/* Shared nav · announcement bar · footer · form components
   Loaded after styles.css to override the light-theme defaults inherited from the original site. */

/* ════════════════════════════════════════════════════════════
   BRAND PALETTE — logo-faithful trio
   Royal Blue primary · Orange warm CTAs · Green success states
   ════════════════════════════════════════════════════════════ */
:root {
    --blue: #1f6fe5;        /* logo blue dot — primary accent */
    --blue-dim: #1e3a8a;    /* deep blue — borders */
    --sky: #60a5fa;         /* lighter blue — secondary accent / hover */
    --orange: #ff8a1e;      /* logo orange arc — warm CTAs */
    --orange-dim: #9a3412;  /* deep orange — CTA hover state */
    --success: #5bb318;     /* logo green arc — success/positive states only */
    --success-dim: #365314; /* deep green — success borders */
}

/* Announcement bar */
.ann-bar { background:#0a1424; border-bottom:1px solid #1a2a4a; color:#1f6fe5; font-size:.78rem; text-align:center; padding:.55rem 1rem; letter-spacing:.02em; }
.ann-bar a { color:#1f6fe5; font-weight:700; text-decoration:none; border-bottom:1px solid rgba(31,111,229,.4); transition:.2s; }
.ann-bar a:hover { color:#fff; border-color:#fff; }

/* Top nav */
.navbar { background:#0c0c0e; border-bottom:1px solid #2a2a2a; position:sticky; top:0; z-index:100; }
.nav-container { max-width:1160px; margin:0 auto; padding:.8rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav-container .logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; flex-shrink:0; }
.nav-container .logo-text { color:#fff !important; font-weight:700; font-size:1.15rem; }
.nav-links { list-style:none; display:flex; gap:1.6rem; margin:0; padding:0; align-items:center; }
.nav-links > li { position:relative; }
.nav-links > li > a { color:#ccc; text-decoration:none; font-size:.9rem; font-weight:500; transition:.2s; padding:.4rem 0; display:inline-block; }
.nav-links > li > a:hover, .nav-links > li > a.active { color:#1f6fe5; }

/* Dropdown */
.nav-links .has-dropdown > a::after { content:' ▾'; font-size:.7em; opacity:.6; margin-left:.15rem; }
.nav-links .dropdown { display:none; position:absolute; top:100%; left:0; background:#13141a; border:1px solid #2a2a2a; border-radius:8px; padding:.5rem 0; min-width:200px; box-shadow:0 8px 22px rgba(0,0,0,.5); z-index:200; }
.nav-links .has-dropdown:hover .dropdown, .nav-links .has-dropdown:focus-within .dropdown { display:block; }
/* Hover-tolerance: invisible bridge between trigger and dropdown so the cursor can travel without the menu closing */
.nav-links .has-dropdown::before { content:''; position:absolute; top:100%; left:0; right:0; height:10px; pointer-events:auto; }
.nav-links .has-mega::before { left:50%; transform:translateX(-50%); width:920px; max-width:90vw; }
/* Show on hover of trigger OR the dropdown itself OR the bridge */
.nav-links .has-dropdown:hover .dropdown,
.nav-links .has-dropdown .dropdown:hover { display:block; }
.nav-links .dropdown a { display:block; padding:.55rem 1.1rem; color:#ccc; text-decoration:none; font-size:.85rem; transition:.15s; }
.nav-links .dropdown a:hover { background:#0e1a30; color:#1f6fe5; }
.nav-links .dropdown.wide { min-width:240px; }

/* Mega-menu for Use Cases */
.nav-links .has-mega { position:static; }
.nav-links .dropdown.mega { left:50%; transform:translateX(-50%); min-width:780px; max-width:920px; padding:1.2rem 1.4rem .5rem; }
.nav-links .dropdown.mega .mega-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.4rem 1.6rem; }
.nav-links .dropdown.mega .mega-col { display:flex; flex-direction:column; }
.nav-links .dropdown.mega .mega-col .dd-label { padding:0 0 .5rem; border-bottom:1px solid #2a2a2a; margin-bottom:.4rem; }
.nav-links .dropdown.mega .mega-col a { padding:.4rem .3rem; border-radius:4px; font-size:.84rem; }
.nav-links .dropdown.mega .mega-footer { display:flex; gap:1.4rem; padding:.8rem .3rem 0; margin-top:.9rem; border-top:1px solid #2a2a2a; }
.nav-links .dropdown.mega .mega-footer a { color:#1f6fe5; font-weight:700; font-size:.82rem; padding:.3rem 0; }
.nav-links .dropdown.mega .mega-footer a:hover { background:transparent; color:#fff; }
@media(max-width:1100px){
    .nav-links .dropdown.mega { min-width:560px; max-width:640px; }
    .nav-links .dropdown.mega .mega-grid { grid-template-columns:1fr 1fr; }
}
.nav-links .dropdown .dd-label { padding:.6rem 1.1rem .25rem; color:#1f6fe5; font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.8; }
.nav-links .dropdown .dd-divider { height:1px; background:#2a2a2a; margin:.4rem 0; }

.nav-cta { display:flex; gap:.6rem; flex-shrink:0; }
.nav-cta .btn-nav { padding:.5rem 1.1rem; border-radius:6px; text-decoration:none; font-size:.82rem; font-weight:700; transition:.2s; white-space:nowrap; }
.nav-cta .btn-nav.ghost { border:1px solid #444; color:#ccc; }
.nav-cta .btn-nav.ghost:hover { border-color:#1f6fe5; color:#1f6fe5; }
.nav-cta .btn-nav.lime { background:#1f6fe5; color:#0c0c0e; }
.nav-cta .btn-nav.lime:hover { opacity:.88; }

@media(max-width:980px){
    .nav-links { display:none; }
}

/* Footer */
.footer-dark { background:#0c0c0e; border-top:1px solid #2a2a2a; padding:2.5rem 0 1.5rem; }
.footer-dark .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1.4rem; margin-bottom:2rem; }
@media(max-width:980px){
    .footer-dark .footer-grid { grid-template-columns:1fr 1fr 1fr; }
    .footer-dark .footer-grid > div:first-child { grid-column:1 / -1; }
}
@media(max-width:560px){
    .footer-dark .footer-grid { grid-template-columns:1fr 1fr; }
}

/* Use Cases mega-block (mirrors top nav mega-menu structure) */
.footer-dark .footer-mega { border-top:1px solid #1f1f1f; padding:1.6rem 0 1.8rem; margin-bottom:1.6rem; }
/* When mega-block sits at TOP of footer: no top border, separator below it instead */
.footer-dark .footer-mega.footer-mega-top { border-top:0; border-bottom:1px solid #1f1f1f; padding-top:.4rem; padding-bottom:2rem; margin-bottom:2rem; }
.footer-dark .footer-mega-header { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.footer-dark .footer-mega-header h4 { color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; margin:0; }
.footer-dark .footer-mega-actions { display:flex; gap:1.2rem; flex-wrap:wrap; }
.footer-dark .footer-mega-actions .mega-cta { color:#1f6fe5; font-size:.82rem; font-weight:700; text-decoration:none; border-bottom:1px solid rgba(31,111,229,.3); padding-bottom:1px; transition:.15s; }
.footer-dark .footer-mega-actions .mega-cta:hover { color:#fff; border-color:#fff; }
.footer-dark .footer-mega-grid { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:1.6rem 2rem; }
@media(max-width:880px){ .footer-dark .footer-mega-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-dark .footer-mega-grid { grid-template-columns:1fr; } }
.footer-dark .footer-mega-col { display:flex; flex-direction:column; }
.footer-dark .footer-mega-col .dd-label { color:#1f6fe5; font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding-bottom:.5rem; border-bottom:1px solid #1f1f1f; margin-bottom:.7rem; opacity:.85; }
.footer-dark .footer-mega-col ul { list-style:none; padding:0; margin:0; }
.footer-dark .footer-mega-col li { margin-bottom:.4rem; }
.footer-dark .footer-mega-col a { color:#888; text-decoration:none; font-size:.84rem; transition:.15s; }
.footer-dark .footer-mega-col a:hover { color:#1f6fe5; }
.footer-dark .footer-brand .logo { display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem; text-decoration:none; }
.footer-dark .footer-brand .logo-text { color:#fff; font-weight:700; font-size:1.1rem; }
.footer-dark .footer-brand p { color:#888; font-size:.82rem; line-height:1.6; max-width:280px; }
.footer-dark .footer-col h4 { color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; margin-bottom:.9rem; }
.footer-dark .footer-col ul { list-style:none; padding:0; margin:0; }
.footer-dark .footer-col li { margin-bottom:.45rem; }
.footer-dark .footer-col a { color:#888; text-decoration:none; font-size:.84rem; transition:.15s; }
.footer-dark .footer-col a:hover { color:#1f6fe5; }
.footer-bottom { border-top:1px solid #2a2a2a; padding-top:1.2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom .left { color:#555; font-size:.74rem; }
.footer-bottom .left a { color:#888; text-decoration:none; margin-right:1rem; }
.footer-bottom .left a:hover { color:#1f6fe5; }
.footer-bottom .status-pill { color:#1f6fe5; font-size:.72rem; font-weight:700; letter-spacing:.06em; display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; padding:.2rem .6rem; border:1px solid #1a2a4a; border-radius:14px; background:#0a1424; }
.footer-bottom .status-pill::before { content:''; width:7px; height:7px; background:#1f6fe5; border-radius:50%; box-shadow:0 0 6px #1f6fe5; }
.footer-bottom .socials { display:flex; gap:.6rem; }
.footer-bottom .socials a { display:flex; align-items:center; justify-content:center; width:32px; height:32px; background:#13141a; border:1px solid #2a2a2a; border-radius:6px; color:#888; transition:.2s; }
.footer-bottom .socials a:hover { color:#1f6fe5; border-color:#1f6fe5; }
.footer-bottom .socials svg { width:16px; height:16px; }

/* Heading weight normalization (Playfair Display reads heavy at 700)
   Apply 600 for display headings and 500 for serif italics across the site. */
body h1, body h2, body h3 { font-family:'Playfair Display', Georgia, serif; font-weight:600; letter-spacing:-.01em; }
body h1 em, body h2 em, body h3 em { font-weight:500; font-style:italic; }
body h4 { font-weight:600; }

/* Smooth-scroll for in-page anchors */
html { scroll-behavior:smooth; scroll-padding-top:70px; }

/* Lead-capture form (used on contact.html and embedded CTAs) */
.lead-form { background:#13141a; border:1px solid #2a2a2a; border-radius:12px; padding:2rem; max-width:560px; margin:0 auto; }
.lead-form h3 { color:#fff; font-family:'Playfair Display',serif; font-size:1.5rem; margin-bottom:.4rem; }
.lead-form h3 em { color:#1f6fe5; font-style:italic; }
.lead-form .desc { color:#aaa; font-size:.88rem; margin-bottom:1.4rem; line-height:1.55; }
.lead-form .row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:.8rem; }
@media(max-width:560px){ .lead-form .row { grid-template-columns:1fr; } }
.lead-form label { color:#888; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:.3rem; }
.lead-form input, .lead-form select, .lead-form textarea { width:100%; background:#0c0c0e; border:1px solid #2a2a2a; border-radius:6px; padding:.65rem .8rem; color:#fff; font-size:.9rem; font-family:inherit; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline:none; border-color:#1f6fe5; }
.lead-form textarea { resize:vertical; min-height:80px; }
.lead-form .form-row { margin-bottom:.8rem; }
.lead-form button { width:100%; background:#1f6fe5; color:#0c0c0e; font-weight:800; border:none; padding:.85rem 1.2rem; border-radius:6px; font-size:.95rem; cursor:pointer; transition:.2s; margin-top:.6rem; }
.lead-form button:hover { opacity:.88; }
.lead-form .small { color:#666; font-size:.72rem; margin-top:.8rem; text-align:center; }
.lead-form .small a { color:#888; }

/* ════════════════════════════════════════════════════════════
   BRAND OVERRIDES — must come last to defeat per-page inline <style>
   ════════════════════════════════════════════════════════════ */

/* Primary CTAs use the warm orange from the logo (action color),
   while blue stays as the body accent (info/links/UI). This creates a clear
   visual hierarchy: blue = "look here", orange = "act here". */
.hero-dark .btn-lime,
.cta-dark .btn-lime-lg,
.segment-card .btn-seg,
.pricing-btn.primary,
.nav-cta .btn-nav.lime,
a.btn-lime,
a.btn-lime-lg {
    background: var(--orange) !important;
    color: #0c0c0e !important;
}
.hero-dark .btn-lime:hover,
.cta-dark .btn-lime-lg:hover,
.segment-card .btn-seg:hover,
.pricing-btn.primary:hover,
.nav-cta .btn-nav.lime:hover {
    background: #ffa14f !important;
    color: #0c0c0e !important;
    opacity: 1 !important;
}

/* Outline CTAs: orange border + orange text, fills on hover */
.pricing-btn.outline {
    border-color: var(--orange) !important;
    color: var(--orange) !important;
}
.pricing-btn.outline:hover {
    background: var(--orange) !important;
    color: #0c0c0e !important;
}

/* Announcement-bar CTA link in orange for action emphasis (rest of bar stays blue) */
.ann-bar a {
    color: var(--orange) !important;
    border-bottom-color: rgba(255, 138, 30, .4) !important;
}
.ann-bar a:hover {
    color: #fff !important;
    border-bottom-color: #fff !important;
}

/* Status pill — semantic green ("All systems operational" deserves the success color) */
.footer-bottom .status-pill {
    color: var(--success) !important;
    background: #0d180d !important;
    border-color: var(--success-dim) !important;
}
.footer-bottom .status-pill::before {
    background: var(--success) !important;
    box-shadow: 0 0 6px var(--success) !important;
}