/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

/* ─── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }

p { max-width: 68ch; }
p + p { margin-top: var(--space-4); }

a { color: inherit; text-decoration: none; }

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: max(var(--container-pad), env(safe-area-inset-left));
}

.page-content { min-height: 50vh; }

/* ─── Dark Section Utility ───────────────────────────────────────────────── */
.section-dark {
    background-color: var(--color-surface-dark);
    color: #F2F2F0;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: #F2F2F0;
}

.section-dark p,
.section-dark .elementor-widget-text-editor {
    color: rgba(242,242,240,0.7);
}

/* ─── Skip Link (keyboard / screen-reader) ───────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--container-pad);
    z-index: 9999;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-text);
    color: var(--color-bg);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top var(--duration-fast) ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ─── Transparent Header — dark-hero pages ───────────────────────────────── */
body.has-dark-hero .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.5s var(--ease-out),
                border-color     0.5s var(--ease-out),
                backdrop-filter  0.5s var(--ease-out);
    will-change: background-color;
}

body.has-dark-hero .site-header.is-scrolled {
    background: rgba(12, 12, 12, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.has-dark-hero .site-header .site-logo { color: #F2F2F0; }
body.has-dark-hero .site-header .site-logo:hover { color: var(--color-accent); }

body.has-dark-hero .site-header .nav-list a { color: rgba(242, 242, 240, 0.65); }
body.has-dark-hero .site-header .nav-list a:hover,
body.has-dark-hero .site-header .nav-list .current-menu-item > a { color: #F2F2F0; border-bottom-color: #F2F2F0; }

body.has-dark-hero .site-header .nav-list li.menu-item-rfq > a {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
body.has-dark-hero .site-header .nav-list li.menu-item-rfq > a:hover {
    background: var(--color-accent);
    color: #0C0C0C;
    border-bottom-color: transparent;
}

body.has-dark-hero .site-header .nav-toggle span { background-color: #F2F2F0; }

/* ─── Site Header ─────────────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height);
}

.site-header__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: max(var(--container-pad), env(safe-area-inset-left));
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.site-logo {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-text);
    white-space: nowrap;
    transition: color var(--duration-fast) ease;
}

.site-logo:hover { color: var(--color-accent); }

/* ─── Primary Nav ─────────────────────────────────────────────────────────── */
.primary-nav { display: flex; align-items: center; }

.nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.nav-list a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.nav-list a:hover,
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
}

/* RFQ — outlined button */
.nav-list li.menu-item-rfq > a {
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.nav-list li.menu-item-rfq > a:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-bottom-color: transparent;
}

/* 404 return home button */
.btn-404 {
    display: inline-block;
    margin-top: var(--space-8);
    padding: .7rem 1.75rem;
    border: 1px solid var(--color-text);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.btn-404:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
}

/* ─── Mobile toggle ──────────────────────────────────────────────────────── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: var(--space-3);
    min-width:  44px;
    min-height: 44px;
    z-index: 201;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background-color: var(--color-text);
    transition: transform var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── Site Footer ─────────────────────────────────────────────────────────── */
.site-footer {
    background-color: var(--color-dark);
    color: #F2F2F0;
    padding-block: var(--space-16);
    margin-top: var(--space-section);
}

.site-footer__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: max(var(--container-pad), env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}

.site-footer__brand {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-accent);
}

.site-footer__tagline {
    font-size: var(--text-xs);
    color: rgba(242,242,240,0.4);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--font-body);
}

.footer-nav__list {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-block: var(--space-2);
}

.footer-nav__list a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(242,242,240,0.5);
    transition: color var(--duration-fast) ease;
}

.footer-nav__list a:hover { color: var(--color-accent); }

.site-footer__copy {
    font-size: var(--text-xs);
    color: rgba(242,242,240,0.25);
    margin-top: var(--space-4);
    font-family: var(--font-body);
}

/* ─── Blog / Archive ─────────────────────────────────────────────────────── */
.archive-header {
    padding-block: var(--space-12);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-12);
}

.post-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: var(--space-8);
    padding-block: var(--space-8);
}

.post-card {
    background-color: var(--color-surface);
    overflow: hidden;
    transition: box-shadow var(--duration-normal) var(--ease-out);
}

.post-card:hover { box-shadow: var(--shadow-md); }

.post-card a { display: block; padding: var(--space-6); }

.post-card img { margin-bottom: var(--space-4); }

.post-card h2 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
}

.post-card time {
    font-size: var(--text-xs);
    color: var(--color-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    display: block;
    font-family: var(--font-body);
}

/* ─── Single post ─────────────────────────────────────────────────────────── */
.post-header {
    padding-block: var(--space-12);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-12);
}

.post-date {
    font-size: var(--text-xs);
    color: var(--color-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: var(--space-3);
    display: block;
    font-family: var(--font-body);
}

.post-content {
    font-size: var(--text-lg);
    line-height: 1.75;
    max-width: 72ch;
}

.post-content h2, .post-content h3 { margin-block: var(--space-8) var(--space-4); }
.post-content p { margin-bottom: var(--space-4); max-width: 100%; }
.post-content ul, .post-content ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.post-content li + li { margin-top: var(--space-2); }
.post-content img { margin-block: var(--space-8); }
.post-content a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ─── Responsive — 768px ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-toggle { display: flex; }

    .primary-nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background-color: #0C0C0C;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding: var(--space-6) var(--container-pad);
        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        z-index: 199;
    }

    .primary-nav.is-open { display: block; }

    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    /* Always light text inside the dark mobile dropdown */
    .nav-list a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding-block: 0;
        color: rgba(242,242,240,0.7);
        border-bottom-color: transparent;
    }
    .nav-list a:hover,
    .nav-list .current-menu-item > a,
    .nav-list .current_page_item > a {
        color: #F2F2F0;
        border-bottom-color: var(--color-accent);
    }

    /* RFQ button — gold in dark dropdown */
    .nav-list li.menu-item-rfq > a {
        line-height: normal;
        padding: 0.6rem 1.2rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        border-color: var(--color-accent);
        color: var(--color-accent);
    }
    .nav-list li.menu-item-rfq > a:hover {
        background: var(--color-accent);
        color: #0C0C0C;
        border-bottom-color: transparent;
    }

    .site-footer { padding-block: var(--space-12); }

    /* ── Homepage grid — stack on mobile ── */
    /* Why Us bento → single column */
    .bs-why-grid { grid-template-columns: 1fr !important; }
    .bs-why-main { grid-row: auto !important; padding: 32px 24px !important; }
    .bs-why-cell { padding: 24px 20px !important; }
    .bs-why-stat { font-size: 48px !important; }

    /* Catalogue → single column, auto height */
    .bs-cat-grid { grid-template-columns: 1fr !important; }
    .bs-cat-main { min-height: 220px !important; padding: 32px 24px 28px !important; }
    .bs-cat-sub  { grid-template-rows: auto auto !important; }

    /* Process → 2-column, add row border */
    .bs-proc-grid { grid-template-columns: 1fr 1fr !important; }
    .bs-proc-grid > div:nth-child(1),
    .bs-proc-grid > div:nth-child(2) {
        border-bottom: 1px solid rgba(242,242,240,0.08) !important;
        padding-bottom: 32px !important;
    }
    .bs-proc-grid > div:nth-child(3),
    .bs-proc-grid > div:nth-child(4) {
        padding-top: 32px !important;
    }
    .bs-proc-num { font-size: 48px !important; margin-bottom: 16px !important; }
}

/* ─── Responsive — 480px ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
    :root { --header-height: 60px; }

    .site-logo { font-size: var(--text-lg); }

    .post-list { gap: var(--space-6); }

    .post-card a { padding: var(--space-4); }

    /* Process → single column at very small screens */
    .bs-proc-grid { grid-template-columns: 1fr !important; }
    .bs-proc-grid > div {
        border-right: none !important;
        border-bottom: 1px solid rgba(242,242,240,0.08) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .bs-proc-grid > div:nth-child(1),
    .bs-proc-grid > div:nth-child(2),
    .bs-proc-grid > div:nth-child(3) {
        border-bottom: 1px solid rgba(242,242,240,0.08) !important;
    }
    .bs-proc-grid > div:last-child {
        border-bottom: none !important;
    }
}

/* ─── Blog index card enhancements ────────────────────────────────────────── */
.archive-intro {
    margin-top: var(--space-3);
    color: var(--color-muted);
    font-size: var(--text-base);
    max-width: 60ch;
}

.post-card__cat {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.post-card p {
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.post-card__more {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    transition: opacity var(--duration-fast) var(--ease-out);
}

.post-card:hover .post-card__more { opacity: 0.65; }

/* ─── Responsive article tables (mobile) ─────────────────────────────────── */
.post-content table { width: 100%; }
@media (max-width: 680px) {
    .post-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .post-content table th,
    .post-content table td { min-width: 8.5rem; }
    .post-content { font-size: var(--text-base); }
}