/*
Theme Name: CIC Child
Theme URI: https://cic.engineering
Description: Custom child theme for Cast-iron CAD. Visual clone of the live Odoo cic.engineering site — bold dark-with-colour-accent aesthetic.
Author: Dave Lock
Author URI: https://cic.engineering
Template: astra
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cic-child
*/

/* =====================================================================
   CIC design tokens — revised to match actual Odoo source design
   ===================================================================== */

:root {
    /* Typography */
    --cic-font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
    --cic-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --cic-fw-light: 300;
    --cic-fw-regular: 400;
    --cic-fw-bold: 700;

    /* Type scale */
    --cic-fs-xs: 0.75rem;
    --cic-fs-sm: 0.875rem;
    --cic-fs-base: 1rem;
    --cic-fs-lg: 1.125rem;
    --cic-fs-xl: 1.25rem;
    --cic-fs-2xl: 1.5rem;
    --cic-fs-3xl: 2rem;
    --cic-fs-4xl: 2.5rem;
    --cic-fs-5xl: 3rem;
    --cic-fs-6xl: 3.5rem;

    --cic-lh-tight: 1.2;
    --cic-lh-snug: 1.4;
    --cic-lh-base: 1.6;

    /* Brand colours */
    --cic-color-orange: #E8A017;
    --cic-color-orange-hover: #CA8E1A;
    --cic-color-blue: #175FE8;
    --cic-color-blue-hover: #0F4BBF;
    --cic-color-green: #35CA1B;
    --cic-color-green-hover: #2BAE15;
    --cic-color-pink: #E83E8C;
    --cic-color-grey: #6C757D;

    /* Surface colours */
    --cic-color-dark-bg: #0E1112;          /* primary dark canvas */
    --cic-color-dark-section: #161A1C;     /* slightly lighter dark surface */
    --cic-color-card-grey: #6C757D;        /* manufacture pillar bg */
    --cic-color-paper: #FDFEFF;
    --cic-color-white: #FFFFFF;
    --cic-color-ink: #212529;
    --cic-color-heading: #0E1112;
    --cic-color-muted: #ADB5BD;            /* on dark — lighter muted */
    --cic-color-divider: #E9ECEF;
    --cic-color-surface: #F8F9FA;

    /* Layout */
    --cic-container-md: 720px;
    --cic-container-lg: 960px;
    --cic-container-xl: 1140px;

    /* Spacing */
    --cic-space-1: 0.25rem;
    --cic-space-2: 0.5rem;
    --cic-space-3: 1rem;
    --cic-space-4: 1.5rem;
    --cic-space-5: 3rem;
    --cic-space-6: 4.5rem;
    --cic-space-7: 6rem;

    /* Radius */
    --cic-radius-sm: 4px;
    --cic-radius-md: 8px;
    --cic-radius-pill: 24px;

    /* Shadows */
    --cic-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --cic-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);

    --cic-transition-fast: 0.15s ease;
}

/* =====================================================================
   Base typography
   ===================================================================== */

body, body.ast-separate-container, body.ast-plain-container {
    font-family: var(--cic-font-sans);
    font-weight: var(--cic-fw-regular);
    font-size: var(--cic-fs-base);
    line-height: var(--cic-lh-base);
    color: var(--cic-color-ink);
    background-color: var(--cic-color-dark-bg);
    margin: 0;
}

h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
    font-family: var(--cic-font-sans);
    font-weight: var(--cic-fw-bold);
    line-height: var(--cic-lh-tight);
    margin-top: 0;
    margin-bottom: var(--cic-space-3);
}

p, li, blockquote {
    font-size: var(--cic-fs-base);
    line-height: var(--cic-lh-base);
}

/* =====================================================================
   Header — dark bg, white text, green accent
   ===================================================================== */

.site-header {
    background-color: var(--cic-color-dark-bg) !important;
    border-bottom: 0;
}
.site-header .ast-builder-grid-row,
.site-header .main-header-bar {
    background-color: var(--cic-color-dark-bg) !important;
    color: var(--cic-color-white);
}
.main-header-menu li > a,
.site-header a {
    color: var(--cic-color-white) !important;
    font-family: var(--cic-font-sans);
    font-weight: var(--cic-fw-regular);
    text-decoration: none;
}
.main-header-menu li.current-menu-item > a {
    color: var(--cic-color-orange) !important;
    font-weight: var(--cic-fw-bold);
}
.main-header-menu li > a:hover { color: var(--cic-color-orange) !important; }

/* =====================================================================
   Buttons — green primary, orange accent, pill-shape
   ===================================================================== */

.wp-block-button__link,
.wp-element-button,
.button,
button[type="submit"],
input[type="submit"] {
    background-color: var(--cic-color-green);
    color: var(--cic-color-white) !important;
    font-family: var(--cic-font-sans);
    font-weight: var(--cic-fw-bold);
    font-size: var(--cic-fs-base);
    padding: var(--cic-space-2) var(--cic-space-4);
    border: 0;
    border-radius: var(--cic-radius-pill);
    text-decoration: none;
    transition: background-color var(--cic-transition-fast);
    display: inline-block;
    box-shadow: var(--cic-shadow-sm);
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.button:hover {
    background-color: var(--cic-color-green-hover);
    color: var(--cic-color-white) !important;
    text-decoration: none;
}

/* =====================================================================
   Layout — full-bleed sections, no Astra container constraints on home
   ===================================================================== */

body.home .ast-container,
body.home .site-content > .ast-container,
body.home .entry-content {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.home .entry-content > * {
    max-width: none;
}
.site-content { padding: 0 !important; }
body.home .entry-header { display: none !important; }

/* =====================================================================
   Hero — full-bleed image + overlaid white card
   ===================================================================== */

.cic-hero {
    position: relative;
    width: 100%;
    min-height: 480px;
    background-image: url('https://cic.engineering/unsplash/jJT2r2n7lYA/product%20design.jpg?unique=fb523ba4');
    background-size: cover;
    background-position: center;
    padding: var(--cic-space-6) var(--cic-space-5);
    display: flex;
    align-items: center;
    text-align: left;
}
.cic-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 100%);
    pointer-events: none;
}
.cic-hero h1,
.cic-hero p,
.cic-hero figure,
.cic-hero .wp-block-buttons {
    position: relative;
    z-index: 2;
}
.cic-hero h1 {
    color: var(--cic-color-orange);
    font-size: var(--cic-fs-3xl);
    margin-bottom: var(--cic-space-3);
    max-width: 580px;
    background-color: var(--cic-color-white);
    padding: var(--cic-space-4) var(--cic-space-4) 0 var(--cic-space-4);
    border-radius: var(--cic-radius-md) var(--cic-radius-md) 0 0;
    margin-left: var(--cic-space-5);
    margin-right: 0;
}
.cic-hero > p {
    color: var(--cic-color-ink);
    font-size: var(--cic-fs-base);
    line-height: var(--cic-lh-base);
    max-width: 580px;
    background-color: var(--cic-color-white);
    padding: 0 var(--cic-space-4);
    margin: 0 0 0 var(--cic-space-5);
    text-align: left;
}
.cic-hero > p:last-of-type {
    padding-bottom: var(--cic-space-3);
    border-radius: 0 0 var(--cic-radius-md) var(--cic-radius-md);
    margin-bottom: 0;
}
/* Hide the inline image; the photo is now a background */
.cic-hero figure.wp-block-image { display: none; }

/* =====================================================================
   3 pillar cards — solid colour blocks with white image insets
   ===================================================================== */

.cic-pillars {
    background-color: var(--cic-color-dark-bg);
    padding: var(--cic-space-6) var(--cic-space-5) var(--cic-space-5);
    background-image: 
        radial-gradient(circle at 10% 30%, rgba(232,160,23,0.06) 0%, transparent 40%),
        radial-gradient(circle at 90% 70%, rgba(23,95,232,0.06) 0%, transparent 40%);
}

/* Hide the inline H2 + paragraph headings in pillars (Odoo only shows the cards) */
.cic-pillars > h2,
.cic-pillars > p {
    display: none;
}

/* The 3 wp-block-columns containers — render as a single 3-up grid of CARDS */
.cic-pillars .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cic-space-4);
    max-width: var(--cic-container-xl);
    margin: 0 auto var(--cic-space-5);
}

/* Each pillar column = a solid coloured card */
.cic-pillars .wp-block-columns:nth-of-type(1) .wp-block-column {
    background-color: var(--cic-color-orange);
}
.cic-pillars .wp-block-columns:nth-of-type(2) .wp-block-column {
    background-color: var(--cic-color-blue);
}
.cic-pillars .wp-block-columns:nth-of-type(3) .wp-block-column {
    background-color: var(--cic-color-grey);
}

.cic-pillars .wp-block-column {
    padding: var(--cic-space-4);
    border-radius: var(--cic-radius-md);
    color: var(--cic-color-white);
}

/* Card title (h4) — orange-underlined */
.cic-pillars .wp-block-column h4 {
    font-size: var(--cic-fs-xl);
    color: var(--cic-color-white);
    margin: var(--cic-space-3) 0 var(--cic-space-2);
    text-decoration: underline;
    text-decoration-color: var(--cic-color-orange);
    text-underline-offset: 4px;
}

/* Bulleted lists hidden on the top pillar cards — they belong in the icon grid below */
.cic-pillars .wp-block-columns:nth-of-type(1) .wp-block-column ul,
.cic-pillars .wp-block-columns:nth-of-type(2) .wp-block-column ul,
.cic-pillars .wp-block-columns:nth-of-type(3) .wp-block-column ul {
    color: var(--cic-color-white);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--cic-fs-sm);
}

/* =====================================================================
   "Over 260 products designed" — solid blue strip
   ===================================================================== */

.cic-portfolio {
    background-color: var(--cic-color-blue);
    color: var(--cic-color-white);
    padding: var(--cic-space-6) var(--cic-space-5);
    text-align: center;
}
.cic-portfolio h3 {
    color: var(--cic-color-white);
    font-size: var(--cic-fs-4xl);
    margin: 0 auto var(--cic-space-3);
}
.cic-portfolio h3 strong,
.cic-portfolio h3 em {
    color: var(--cic-color-orange);
    font-weight: var(--cic-fw-bold);
    text-decoration: underline;
}
.cic-portfolio > p {
    color: var(--cic-color-white);
    font-size: var(--cic-fs-base);
    max-width: var(--cic-container-md);
    margin: 0 auto var(--cic-space-4);
    line-height: var(--cic-lh-base);
}
.cic-portfolio .wp-block-columns {
    max-width: var(--cic-container-xl);
    margin: var(--cic-space-5) auto 0;
    gap: var(--cic-space-4);
}
.cic-portfolio .wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: var(--cic-radius-md);
    aspect-ratio: 16/10;
    object-fit: cover;
}
.cic-portfolio h4 {
    color: var(--cic-color-white);
    font-size: var(--cic-fs-xl);
    margin: var(--cic-space-3) 0 var(--cic-space-2);
}
.cic-portfolio p {
    color: var(--cic-color-white);
    font-size: var(--cic-fs-sm);
}
.cic-portfolio a:not(.wp-block-button__link) {
    color: var(--cic-color-orange);
    text-decoration: underline;
}

/* =====================================================================
   Testimonials — dark bg with subtle dot field
   ===================================================================== */

.cic-references {
    background-color: var(--cic-color-dark-bg);
    color: var(--cic-color-white);
    padding: var(--cic-space-6) var(--cic-space-5);
    background-image:
        radial-gradient(circle at 12% 18%, var(--cic-color-orange) 1px, transparent 2px),
        radial-gradient(circle at 87% 32%, var(--cic-color-orange) 1px, transparent 2px),
        radial-gradient(circle at 35% 75%, var(--cic-color-blue) 1px, transparent 2px),
        radial-gradient(circle at 65% 88%, var(--cic-color-white) 1px, transparent 2px),
        radial-gradient(circle at 8%  62%, var(--cic-color-white) 1px, transparent 2px),
        radial-gradient(circle at 92% 60%, var(--cic-color-blue) 1px, transparent 2px);
    background-size: 100% 100%;
}
.cic-references h2 {
    color: var(--cic-color-white);
    font-size: var(--cic-fs-4xl);
    text-align: center;
    margin-bottom: var(--cic-space-3);
}
.cic-references > p {
    color: var(--cic-color-muted);
    text-align: center;
    margin-bottom: var(--cic-space-5);
}
.cic-references .wp-block-columns {
    max-width: var(--cic-container-xl);
    margin: 0 auto var(--cic-space-4);
    gap: var(--cic-space-4);
}
.cic-references .wp-block-quote {
    background-color: var(--cic-color-white);
    color: var(--cic-color-ink);
    padding: var(--cic-space-4);
    border-left: 6px solid var(--cic-color-orange);
    border-radius: 0 var(--cic-radius-md) var(--cic-radius-md) 0;
    margin: 0;
    box-shadow: var(--cic-shadow-md);
}
.cic-references .wp-block-columns:nth-of-type(2) .wp-block-column:nth-of-type(1) .wp-block-quote {
    border-left-color: var(--cic-color-pink);
}
.cic-references .wp-block-columns:nth-of-type(2) .wp-block-column:nth-of-type(2) .wp-block-quote {
    border-left-color: var(--cic-color-pink);
}
.cic-references .wp-block-quote p {
    color: var(--cic-color-ink);
    font-style: italic;
    font-size: var(--cic-fs-base);
    margin-bottom: var(--cic-space-3);
}
.cic-references .wp-block-quote cite {
    color: var(--cic-color-grey);
    font-style: normal;
    font-weight: var(--cic-fw-bold);
    font-size: var(--cic-fs-sm);
}

/* =====================================================================
   About CTA — solid blue, green button
   ===================================================================== */

.cic-about-cta {
    background-color: var(--cic-color-blue);
    color: var(--cic-color-white);
    padding: var(--cic-space-5) var(--cic-space-5);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--cic-space-4);
    text-align: left;
}
.cic-about-cta h3 {
    color: var(--cic-color-white);
    font-size: var(--cic-fs-3xl);
    margin: 0;
    grid-column: 1;
}
.cic-about-cta > p {
    color: var(--cic-color-white);
    font-size: var(--cic-fs-base);
    margin: 0;
    grid-column: 1;
    grid-row: 2;
}
.cic-about-cta .wp-block-buttons {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

/* =====================================================================
   Footer — dark bg
   ===================================================================== */

.site-footer,
.site-footer .ast-builder-grid-row,
.footer-widget-area {
    background-color: var(--cic-color-dark-bg) !important;
    color: var(--cic-color-white);
    padding-top: var(--cic-space-5);
    padding-bottom: var(--cic-space-5);
    border-top: 0;
}
.site-footer h5 {
    color: var(--cic-color-white);
    font-size: var(--cic-fs-base);
    font-weight: var(--cic-fw-bold);
    margin-bottom: var(--cic-space-3);
}
.site-footer p,
.site-footer li {
    color: var(--cic-color-white);
}
.site-footer a {
    color: var(--cic-color-orange);
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--cic-color-green);
    text-decoration: underline;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 992px) {
    .cic-pillars .wp-block-columns { grid-template-columns: 1fr; }
    .cic-portfolio .wp-block-columns { grid-template-columns: 1fr; }
    .cic-references .wp-block-columns { grid-template-columns: 1fr; }
    .cic-about-cta { grid-template-columns: 1fr; text-align: center; }
    .cic-about-cta .wp-block-buttons { grid-column: 1; grid-row: auto; }
}
@media (max-width: 768px) {
    .cic-hero { padding: var(--cic-space-5) var(--cic-space-3); min-height: 360px; }
    .cic-hero h1 { font-size: var(--cic-fs-2xl); margin-left: 0; }
    .cic-hero > p { margin-left: 0; }
    .cic-pillars, .cic-portfolio, .cic-references, .cic-about-cta {
        padding: var(--cic-space-5) var(--cic-space-3);
    }
}