/*
 * ob-global.css — Obsidian dark / gold system
 * Reassigns every --cz-* token to the black & gold palette.
 * Loaded on every page (front page manages its own CSS separately).
 * =========================================================== */

/* ─── Design tokens ────────────────────────────────────────── */
:root {
    /* Backgrounds */
    --cz-bg:             #111111;
    --cz-bg-section:     #111111;
    --cz-bg-header:      rgba(17,17,17,0.97);
    --cz-bg-card:        #222222;
    --cz-bg-card-img:    #1a1a1a;

    /* Borders */
    --cz-border:         rgba(200,158,70,0.12);
    --cz-border-hover:   rgba(200,158,70,0.30);

    /* Gold gradient (replaces purple) */
    --cz-grad:           linear-gradient(135deg, #C89E46 0%, #9A7830 100%);
    --cz-grad-from:      #C89E46;
    --cz-grad-via:       #B08A30;
    --cz-grad-to:        #9A7830;
    --cz-grad-glow:      0 8px 24px rgba(200,158,70,0.22);
    --cz-grad-cta-bg:    linear-gradient(90deg, #0d0d0d, #1a1a1a, #0d0d0d);

    /* Accent */
    --cz-accent:         #C89E46;
    --cz-accent-lt:      #d9af57;

    /* Text */
    --cz-text:           #FFFFFF;
    --cz-text-muted:     rgba(255,255,255,0.65);
    --cz-text-dimmed:    rgba(255,255,255,0.45);
    --cz-text-faint:     rgba(255,255,255,0.30);

    /* Typography */
    --cz-font:           "Inter", system-ui, -apple-system, sans-serif;

    /* Shape — sharp & industrial */
    --cz-radius-card:    2px;
    --cz-radius-pill:    2px;

    /* Gold shorthand (used in page-level PHP templates) */
    --ob-gold:           #C89E46;
    --ob-gold-light:     #d9af57;
    --ob-gold-dim:       #9A7830;
    --ob-gold-glow:      rgba(200,158,70,0.18);
    --ob-black:          #111111;
    --ob-charcoal:       #222222;
    --ob-white:          #FFFFFF;
    --ob-gray:           #999999;

    /* Layout */
    --cz-max-w:          1200px;
    --cz-max-w-narrow:   860px;
    --cz-max-w-prose:    720px;
    --cz-px:             1rem;
}

/* ─── Base ───────────────────────────────────────────────────── */
body { background-color: var(--ob-black) !important; color: var(--cz-text); }

::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: var(--ob-gold-dim); }

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", "Inter", system-ui, sans-serif;
    font-weight: 800;
    color: var(--cz-text);
    letter-spacing: -0.02em;
}

/* ─── Page hero (shared across all page types) ───────────────── */
.cz-page-hero {
    background: var(--ob-black);
    padding: 130px 0 72px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(200,158,70,0.1);
}
.cz-page-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 480px; height: 1px;
    background: linear-gradient(to right, transparent, var(--ob-gold), transparent);
}
.cz-page-hero .cz-heading-xl {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 5vw, 4rem);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    line-height: 0.95;
    color: var(--cz-text);
}
.cz-page-hero .cz-heading-xl em,
.cz-page-hero .ob-gold { color: var(--ob-gold); font-style: normal; }
.cz-page-hero__desc { color: var(--cz-text-muted); font-size: 1rem; margin-top: 16px; max-width: 520px; line-height: 1.7; }

/* page-hero gold label */
.ob-page-label {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 24px;
}
.ob-page-label span {
    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--ob-gold);
}
.ob-page-label::before {
    content: '';
    display: block; width: 32px; height: 1px;
    background: var(--ob-gold); opacity: 0.7;
}

/* ─── Sections ───────────────────────────────────────────────── */
.cz-section { background: var(--ob-black); }
.cz-section--charcoal { background: var(--ob-charcoal); }
.cz-section--dark { background: #0a0a0a; }

/* ─── Buttons ────────────────────────────────────────────────── */
.cz-btn-primary,
.cz-btn-primary:visited {
    background: var(--ob-gold) !important;
    color: #111111 !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 16px 40px !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s !important;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
}
.cz-btn-primary:hover {
    background: #d9af57 !important;
    color: #111 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(200,158,70,0.3) !important;
}

.cz-btn-glass,
.cz-btn-glass:visited {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: var(--cz-text) !important;
    border-radius: 0 !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    transition: border-color 0.2s, color 0.2s !important;
    text-decoration: none;
}
.cz-btn-glass:hover { border-color: var(--ob-gold) !important; color: var(--ob-gold) !important; }

/* ─── Cards ──────────────────────────────────────────────────── */
.cz-card {
    background: var(--ob-charcoal);
    border: 1px solid rgba(200,158,70,0.08);
    border-radius: 0;
    transition: border-color 0.3s;
}
.cz-card:hover { border-color: rgba(200,158,70,0.25); }

/* ─── Blog cards ─────────────────────────────────────────────── */
.cz-blog-card {
    background: var(--ob-charcoal);
    border: 1px solid rgba(200,158,70,0.08);
    border-radius: 0;
    transition: border-color 0.3s;
}
.cz-blog-card:hover { border-color: rgba(200,158,70,0.25); }
.cz-blog-card__category {
    font-family: "Montserrat", sans-serif;
    background: transparent;
    color: var(--ob-gold);
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    border: 1px solid rgba(200,158,70,0.3);
    padding: 4px 10px; border-radius: 0;
}
.cz-blog-card__title {
    color: var(--cz-text);
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

/* ─── Pagination ─────────────────────────────────────────────── */
.cz-pagination { margin-top: 40px; display: flex; gap: 8px; flex-wrap: wrap; }
.cz-pagination .page-numbers {
    color: var(--ob-gray);
    border: 1px solid rgba(200,158,70,0.15);
    background: transparent;
    padding: 8px 14px;
    font-size: 0.8rem;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.2s;
}
.cz-pagination .page-numbers.current,
.cz-pagination .page-numbers:hover {
    background: var(--ob-gold);
    color: #111;
    border-color: var(--ob-gold);
}

/* ─── Forms ──────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
    background: #1a1a1a !important;
    border: 1px solid rgba(200,158,70,0.18) !important;
    color: var(--cz-text) !important;
    border-radius: 0 !important;
    font-family: "Inter", sans-serif !important;
    font-size: 0.9rem !important;
    padding: 14px 16px !important;
    width: 100%;
    outline: none !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--ob-gold) !important;
    box-shadow: 0 0 0 3px rgba(200,158,70,0.08) !important;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.2) !important; }
label {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: 7px !important;
    display: block !important;
}

/* ─── Header overrides ───────────────────────────────────────── */
.cz-header {
    background: rgba(17,17,17,0.97) !important;
    border-bottom: 1px solid rgba(200,158,70,0.1) !important;
    backdrop-filter: blur(8px);
}
.cz-header__brand { font-family: "Montserrat", sans-serif; font-weight: 900; letter-spacing: 0.18em; color: var(--cz-text) !important; }
.cz-nav__link { color: rgba(255,255,255,0.55) !important; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; }
.cz-nav__link:hover, .cz-nav__link[aria-current="page"] { color: var(--ob-gold) !important; }
.cz-header__quote { background: var(--ob-gold) !important; color: #111 !important; border-radius: 0 !important; font-family: "Montserrat", sans-serif !important; font-weight: 800 !important; letter-spacing: 0.12em !important; font-size: 0.72rem !important; padding: 12px 24px !important; }
.cz-header__quote:hover { background: #d9af57 !important; }

/* Cart button */
.cz-header__cart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    color: rgba(255,255,255,0.75) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
    padding: 10px 18px;
    border: 1px solid rgba(200,158,70,0.25);
}
.cz-header__cart:hover { color: var(--ob-gold) !important; border-color: rgba(200,158,70,0.6); }
.cz-header__cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ob-gold);
    color: #111;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
}
@media (max-width: 768px) { .cz-header__cart span:first-of-type { display: none; } }

/* Account / Login button */
.cz-header__account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.55) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.cz-header__account:hover { color: var(--ob-gold) !important; }
.cz-header__account svg { flex-shrink: 0; }
@media (max-width: 768px) { .cz-header__account span { display: none; } }

.cz-burger { color: var(--cz-text); }

/* ─── Mobile nav ─────────────────────────────────────────────── */
.cz-nav--mobile { background: rgba(17,17,17,0.99) !important; border-top: 1px solid rgba(200,158,70,0.1); }
.cz-nav__list--mobile .cz-nav__link { color: rgba(255,255,255,0.7) !important; }
.cz-nav__mobile-cta { background: var(--ob-gold) !important; color: #111 !important; border-radius: 0 !important; font-family: "Montserrat", sans-serif !important; font-weight: 800 !important; }

/* ─── Footer overrides ───────────────────────────────────────── */
.cz-footer { background: #0a0a0a !important; border-top: 1px solid rgba(200,158,70,0.1) !important; }
.cz-footer__brand-name { font-family: "Montserrat", sans-serif; font-weight: 900; letter-spacing: 0.18em; color: var(--cz-text) !important; }
.cz-footer__brand-desc, .cz-footer__legal { color: rgba(153,153,153,0.6) !important; }
.cz-footer__col-heading { font-family: "Montserrat", sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ob-gold) !important; }
.cz-footer__nav-link { color: rgba(153,153,153,0.7) !important; transition: color 0.2s; }
.cz-footer__nav-link:hover { color: var(--cz-text) !important; }
.cz-footer__phone { color: var(--ob-gold) !important; }
.cz-footer__copy { color: rgba(153,153,153,0.4) !important; font-size: 0.72rem; }
.cz-footer__contact-name { color: var(--cz-text) !important; font-weight: 600; }

/* ─── Sidebar ────────────────────────────────────────────────── */
.cz-blog-sidebar { background: var(--ob-charcoal) !important; border: 1px solid rgba(200,158,70,0.08); }
.cz-blog-sidebar input[type="search"] { background: #1a1a1a !important; }

/* ─── Prose / article body ───────────────────────────────────── */
.cz-prose { color: var(--cz-text-muted); line-height: 1.85; }
.cz-prose h2, .cz-prose h3, .cz-prose h4 { color: var(--cz-text); margin-top: 2em; margin-bottom: 0.5em; }
.cz-prose a { color: var(--ob-gold); }
.cz-prose a:hover { color: var(--cz-accent-lt); }
.cz-prose blockquote {
    border-left: 2px solid var(--ob-gold);
    padding-left: 1.5rem; margin: 2rem 0;
    color: var(--cz-text-dimmed); font-style: italic;
}
.cz-prose code { background: #1a1a1a; color: var(--ob-gold); padding: 2px 6px; font-size: 0.85em; }

/* ─── Announce pill + marquee ────────────────────────────────── */
.cz-hero__pill {
    border-color: rgba(200,158,70,0.25) !important;
    color: var(--ob-gray) !important;
    background: rgba(34,34,34,0.6) !important;
}
.cz-hero__pill span { color: var(--ob-gold) !important; }

/* ─── Tags/pills ──────────────────────────────────────────────── */
.cz-tag, .cz-tag-pill {
    background: transparent !important;
    border: 1px solid rgba(200,158,70,0.2) !important;
    color: var(--ob-gray) !important;
    border-radius: 0 !important;
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.cz-tag.active, .cz-tag:hover { background: var(--ob-gold) !important; color: #111 !important; border-color: var(--ob-gold) !important; }

/* ─── Gradient text → gold ───────────────────────────────────── */
.cz-text-gradient {
    background: var(--cz-grad) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ─── WP admin bar safety ────────────────────────────────────── */
.admin-bar .cz-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .cz-header { top: 46px; } }