/* ============================================================
   NORVARCH — Apple-Premium Theme Layer
   theme-premium.css  (loaded AFTER style.css)
   Overrides design tokens + adds light/dark themes + polish.
   Non-destructive: re-skins by re-defining existing variables.
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   0. FONTS — SF-style system stack + Inter fallback
   ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ──────────────────────────────────────────────────────────
   1. LIGHT THEME TOKENS (default)  — re-defines style.css vars
   ────────────────────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
    /* ==== NORVARCH identity: bright teal + coral on warm cream ==== */
    /* "navy" tokens repurposed as deep teal-charcoal ink (kept names for compatibility) */
    --color-navy:        #0c1615;   /* deep teal-charcoal ink — headings / dark surfaces */
    --color-navy-light:  #14201f;
    --color-navy-mid:    #1c2b29;
    --color-navy-dark:   #071010;

    /* Bright accent: vivid teal-cyan (primary) */
    --color-gold:        #0fb5a6;   /* primary accent (name kept for compatibility) */
    --color-gold-light:  #1ad3c2;
    --color-gold-dark:   #0a8c80;   /* deeper teal for hover/depth */
    --logo-accent:       #0fb5a6;

    /* Secondary pop accent: coral */
    --color-coral:       #ff5a3c;
    --color-coral-dark:  #e6431f;

    /* Warm cream surfaces & text */
    --color-bg:          #fbf8f3;   /* warm cream */
    --color-bg-alt:      #f1ede4;   /* warm light grey */
    --color-bg-elev:     #ffffff;
    --color-bg-dark:     #0c1615;
    --color-text:        #1f2422;   /* warm-cool ink */
    --color-text-strong: #101615;
    --color-text-muted:  #6d746f;   /* muted */
    --color-border:      #e2ddd2;   /* warm border */
    --color-white:       #ffffff;

    /* Frosted-surface backgrounds (theme-aware) */
    --surface-glass:     rgba(251,248,243,0.72);
    --surface-glass-brd: rgba(31,36,34,0.10);
    --nav-bg:            rgba(251,248,243,0.72);
    --nav-bg-scrolled:   rgba(251,248,243,0.90);
    --nav-fg:            #1f2422;
    --nav-fg-muted:      rgba(31,36,34,0.66);
    --footer-bg:         #0c1615;
    --footer-fg:         rgba(255,255,255,0.64);

    /* Typography */
    --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Softer, Apple-like radii */
    --card-radius: 18px;
    --btn-radius:  980px;   /* pill buttons */

    /* Layered, diffuse shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.12), 0 24px 60px rgba(0,0,0,.12);

    --transition-fast: .2s cubic-bezier(.4,0,.2,1);
    --transition-med:  .4s cubic-bezier(.22,1,.36,1);

    color-scheme: light;
}

/* ──────────────────────────────────────────────────────────
   2. DARK THEME TOKENS
   ────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    --color-navy:        #eef4f2;   /* headings become cool-light on dark */
    --color-navy-light:  #14201f;
    --color-navy-mid:    #1c2b29;
    --color-navy-dark:   #071010;

    --color-gold:        #22d3c0;   /* teal lifts brighter on dark for contrast */
    --color-gold-light:  #4ee6d6;
    --color-gold-dark:   #0fb5a6;
    --logo-accent:       #22d3c0;

    --color-coral:       #ff6b50;
    --color-coral-dark:  #ff5a3c;

    --color-bg:          #081211;   /* deep teal-black */
    --color-bg-alt:      #0e1a19;
    --color-bg-elev:     #14201f;   /* elevated cards */
    --color-bg-dark:     #050c0b;
    --color-text:        #e6edeb;   /* cool off-white text */
    --color-text-strong: #ffffff;
    --color-text-muted:  #97a29e;   /* cool muted */
    --color-border:      #263432;
    --color-white:       #14201f;   /* "white" cards become elevated teal-charcoal */

    --surface-glass:     rgba(20,32,31,0.72);
    --surface-glass-brd: rgba(255,255,255,0.10);
    --nav-bg:            rgba(8,18,17,0.72);
    --nav-bg-scrolled:   rgba(8,18,17,0.92);
    --nav-fg:            #eef4f2;
    --nav-fg-muted:      rgba(238,244,242,0.70);
    --footer-bg:         #050c0b;
    --footer-fg:         rgba(255,255,255,0.62);

    color-scheme: dark;
}

/* Respect OS preference when user hasn't chosen (no data-theme set at all) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --color-navy:#eef4f2; --color-navy-light:#14201f; --color-navy-mid:#1c2b29; --color-navy-dark:#071010;
        --color-gold:#22d3c0; --color-gold-light:#4ee6d6; --color-gold-dark:#0fb5a6; --logo-accent:#22d3c0;
        --color-coral:#ff6b50; --color-coral-dark:#ff5a3c;
        --color-bg:#081211; --color-bg-alt:#0e1a19; --color-bg-elev:#14201f; --color-bg-dark:#050c0b;
        --color-text:#e6edeb; --color-text-strong:#fff; --color-text-muted:#97a29e; --color-border:#263432; --color-white:#14201f;
        --surface-glass:rgba(20,32,31,.72); --surface-glass-brd:rgba(255,255,255,.10);
        --nav-bg:rgba(8,18,17,.72); --nav-bg-scrolled:rgba(8,18,17,.92); --nav-fg:#eef4f2; --nav-fg-muted:rgba(238,244,242,.70);
        --footer-bg:#050c0b; --footer-fg:rgba(255,255,255,.62);
        color-scheme: dark;
    }
}

/* ──────────────────────────────────────────────────────────
   3. GLOBAL TYPE & BASE REFINEMENTS
   ────────────────────────────────────────────────────────── */
body {
    background: var(--color-bg);
    color: var(--color-text);
    letter-spacing: -0.011em;
    transition: background var(--transition-med), color var(--transition-med);
}

h1,h2,h3,h4,h5,h6 { color: var(--color-text-strong); letter-spacing: -0.022em; }
h1,.hero-title { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }

.section-title { letter-spacing: -0.03em; }
.section-tag { color: var(--color-gold); letter-spacing: .18em; }

a { color: var(--color-gold-dark); }
:root[data-theme="dark"] a { color: var(--color-gold-light); }

/* Selection */
::selection { background: var(--color-gold); color: #17150f; }

/* Smooth theme transition on common surfaces */
.card, .service-card, .feature-box, .btn, .form-control, .form-select,
.site-footer, #mainNavbar, .dropdown-menu, .table-custom, .page-banner {
    transition: background var(--transition-med), color var(--transition-med),
                border-color var(--transition-med), box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

/* ──────────────────────────────────────────────────────────
   4. FROSTED NAVBAR (Apple-style translucent)
   ────────────────────────────────────────────────────────── */
#mainNavbar {
    background: var(--nav-bg) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--surface-glass-brd);
    box-shadow: none;
}
#mainNavbar.scrolled {
    background: var(--nav-bg-scrolled) !important;
    box-shadow: 0 1px 0 var(--surface-glass-brd);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
}
/* On hero pages the nav starts transparent; keep it readable */
#mainNavbar.transparent {
    background: transparent !important;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav-brand-text { color: var(--nav-fg); }
#mainNavbar .nav-link {
    color: var(--nav-fg-muted);
    text-transform: none;      /* Apple nav is sentence case, not uppercase */
    letter-spacing: -0.01em;
    font-weight: 500;
    font-size: .9rem;
    white-space: nowrap;        /* prevent "Oil & Gas" wrapping to two lines */
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    #mainNavbar .nav-link { padding: .4rem .6rem !important; font-size: .85rem; }
}
#mainNavbar .nav-link:hover,
#mainNavbar .nav-link.active { color: var(--color-gold-dark); }
:root[data-theme="dark"] #mainNavbar .nav-link:hover,
:root[data-theme="dark"] #mainNavbar .nav-link.active { color: var(--color-gold-light); }
/* Transparent-nav (over dark hero) forces light text for contrast */
#mainNavbar.transparent .nav-link { color: rgba(255,255,255,.85); }
#mainNavbar.transparent .nav-brand-text { color: #fff; }
#mainNavbar.transparent .theme-toggle { color:#fff; border-color: rgba(255,255,255,.3); }

/* ──────────────────────────────────────────────────────────
   4b. BRAND LOGO (SVG monogram + wordmark)
   ────────────────────────────────────────────────────────── */
.brand-svg { height: 34px; width: auto; display: block; color: var(--nav-fg); }
#mainNavbar.transparent .brand-svg { color: #fff; }
:root[data-theme="dark"] .brand-svg { color: var(--nav-fg); }
.footer-brand .brand-svg { height: 30px; color: #fff; }
@media (max-width: 575.98px){ .brand-svg { height: 28px; } }

/* ──────────────────────────────────────────────────────────
   5. THEME TOGGLE BUTTON
   ────────────────────────────────────────────────────────── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--surface-glass-brd);
    background: var(--surface-glass);
    color: var(--nav-fg);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: all var(--transition-fast);
}
.theme-toggle:hover { color: var(--color-gold); transform: translateY(-1px); border-color: var(--color-gold); }
.theme-toggle .bi-sun-fill { display: none; }
.theme-toggle .bi-moon-stars-fill { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; }

/* ──────────────────────────────────────────────────────────
   6. BUTTONS — pill, premium
   ────────────────────────────────────────────────────────── */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    padding: .6rem 1.5rem;
    border-radius: var(--btn-radius);
}
.btn-lg { padding: .85rem 2.1rem; font-size: 1rem; }

.btn-gold,
.btn-gold.btn-sm,
:root[data-theme="dark"] .btn-gold {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #17150f !important;      /* always dark ink on gold for AA contrast */
    box-shadow: 0 2px 10px rgba(15,181,166,.28);
}
.btn-gold:hover,.btn-gold:focus,
:root[data-theme="dark"] .btn-gold:hover {
    background: var(--color-gold-light);
    border-color: var(--color-gold-light);
    color:#17150f !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15,181,166,.38);
}
/* Same fix for the outline-gold and any element relying on --color-navy text on gold */
.stat-number, .stat-label, .stats-bar .stat-item,
.about-experience-badge, .project-badge, .admin-badge-label,
.nav-user-avatar, .topbar-avatar, .sidebar-user-avatar,
.sidebar-nav-link.active, .sidebar-nav-link.active i {
    color: #17150f;
}
.hero-title .highlight { color: var(--color-gold-light); }
.btn-outline-dark {
    border-color: var(--color-border);
    color: var(--color-text);
    background: transparent;
    border-width: 1px;
}
.btn-outline-dark:hover {
    background: var(--color-text-strong);
    border-color: var(--color-text-strong);
    color: var(--color-bg);
    transform: translateY(-2px);
}
.btn-outline-light { border-radius: var(--btn-radius); border-width:1px; }

/* ──────────────────────────────────────────────────────────
   7. CARDS & SURFACES
   ────────────────────────────────────────────────────────── */
.card, .service-card, .feature-box, .glass-card, .portal-panel, .table-custom {
    background: var(--color-bg-elev);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
}
.card-hover:hover, .service-card:hover, .feature-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.bg-light { background: var(--color-bg-alt) !important; color: var(--color-text); }
.text-muted { color: var(--color-text-muted) !important; }

.section-bg { background: var(--color-bg-alt); }
.section-dark { background: var(--color-navy-dark); color:#fff; }

/* Feature/service icon chips */
.feature-icon, .service-icon {
    background: rgba(15,181,166,.12);
    color: var(--color-gold-dark);
}
:root[data-theme="dark"] .feature-icon,
:root[data-theme="dark"] .service-icon { color: var(--color-gold-light); }
.feature-box:hover .feature-icon,
.service-card:hover .service-icon { background: var(--color-gold); color:#17150f; }

/* ──────────────────────────────────────────────────────────
   8. HERO / PAGE BANNERS — refined gradient mesh
   ────────────────────────────────────────────────────────── */
.hero { background: var(--color-navy-dark); }
.hero-overlay {
    background:
      radial-gradient(1200px 600px at 15% 10%, rgba(15,181,166,.14), transparent 60%),
      linear-gradient(135deg, rgba(11,11,15,.96) 40%, rgba(11,11,15,.60));
}
.hero-title { letter-spacing: -0.04em; }
.hero-tag {
    background: rgba(15,181,166,.14);
    border-color: rgba(15,181,166,.3);
    color: var(--color-gold-light);
    border-radius: 980px;
    letter-spacing: .05em;
    text-transform: none;
}
.page-banner { background-color: var(--color-navy-dark) !important; }

/* Legal / prose pages */
.legal-page { background: var(--color-bg); }
.legal-page .container p,
.legal-page .container li { color: var(--color-text); }
.legal-page h2 { color: var(--color-text-strong); margin-top: 2.2rem; }
.legal-toc {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: 1.25rem 1.5rem;
}
.legal-toc a { color: var(--color-gold-dark); }
:root[data-theme="dark"] .legal-toc a { color: var(--color-gold-light); }

/* ──────────────────────────────────────────────────────────
   9. FOOTER — theme-aware
   ────────────────────────────────────────────────────────── */
.site-footer { background: var(--footer-bg); color: var(--footer-fg); }
.footer-desc, .footer-links a, .footer-contact li, .footer-contact li a { color: var(--footer-fg); }
.footer-heading { color: var(--color-gold-light); }
.footer-links a:hover, .footer-contact li a:hover { color: var(--color-gold-light); }

/* ──────────────────────────────────────────────────────────
   10. FORMS — theme-aware inputs
   ────────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--color-bg-elev);
    color: var(--color-text);
    border-color: var(--color-border);
    border-radius: 12px;
    padding: .7rem 1rem;
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:focus, .form-select:focus {
    background: var(--color-bg-elev);
    color: var(--color-text);
    border-color: var(--color-gold);
    box-shadow: 0 0 0 4px rgba(15,181,166,.18);
}
.form-label { color: var(--color-text-strong); text-transform: none; letter-spacing:-.01em; }
.input-group-text { background: var(--color-bg-alt); color: var(--color-text-muted); border-color: var(--color-border); }

/* ──────────────────────────────────────────────────────────
   11. DROPDOWNS / TABLES — theme-aware
   ────────────────────────────────────────────────────────── */
.dropdown-menu { background: var(--color-bg-elev); border-color: var(--color-border); }
.dropdown-item { color: var(--color-text); }
.dropdown-item:hover { background: var(--color-bg-alt); color: var(--color-text-strong); }
.table-custom { background: var(--color-bg-elev); }
.table-custom td { color: var(--color-text); border-color: var(--color-border); }
.table-custom tbody tr:hover td { background: var(--color-bg-alt); }

/* ──────────────────────────────────────────────────────────
   12. MOTION — scroll reveal
   ────────────────────────────────────────────────────────── */
.reveal-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
.reveal-up.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal-up { opacity: 1 !important; transform: none !important; transition: none !important; }
    * { scroll-behavior: auto !important; }
}

/* ──────────────────────────────────────────────────────────
   13. FOCUS-VISIBLE (accessibility polish)
   ────────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .theme-toggle:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────
   14. MOBILE NAV PANEL (theme-aware when expanded)
   ────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    #mainNavbar .navbar-collapse {
        background: var(--nav-bg-scrolled);
        -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
        border: 1px solid var(--surface-glass-brd);
        border-radius: 16px;
        margin-top: .6rem;
        padding: 1rem;
    }
    #mainNavbar .nav-link { color: var(--nav-fg-muted); }
    #mainNavbar.transparent .navbar-collapse .nav-link { color: var(--nav-fg-muted); }
}