/* ==========================================================================
   ADVENNO — PREMIUM SKIN (site-wide, public pages only)
   Loaded via includes/head.php AFTER design-system.css. Brings every public
   page up to the homepage's elevated look: eyebrow pills, premium cards,
   section rhythm, refined headings. Tokens adapt to light/dark automatically.

   NOTE: bundle.min.css loads async (after this file) so it can win equal-
   specificity battles — hence the targeted !important on properties bundle
   also sets. Per-page *.phase4.css can still override by being more specific.
   Admin/client/employee portals use a different bootstrap and never load this.
   ========================================================================== */

/* ---- Eyebrow label → accent pill (the strongest unifying signal) ---- */
.section-label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, monospace) !important;
    font-size: var(--text-caption, 0.78rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--color-accent) !important;
    background: var(--color-accent-subtle) !important;
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent) !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-pill, 9999px) !important;
    margin-bottom: var(--space-4, 1rem);
}
.section-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent);
    animation: advLabelPulse 2.4s ease-in-out infinite;
}
@keyframes advLabelPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---- Section headings: tighter, more confident ---- */
.section-header { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-title { letter-spacing: -0.02em; line-height: 1.1; }

/* ---- Premium card interaction (additive lift + accent edge + glow) ---- */
.section .card,
.card-slider .card,
.grid .card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease, box-shadow 0.35s ease !important;
}
.section a.card:hover,
.section button.card:hover,
.section .card[onclick]:hover,
.section .selector-card:hover,
.card-slider .card:hover {
    transform: translateY(-5px) !important;
    border-color: color-mix(in srgb, var(--color-accent) 50%, transparent) !important;
    box-shadow: 0 24px 48px rgba(2, 6, 23, 0.4), var(--shadow-accent-glow) !important;
}
[data-theme="light"] .section a.card:hover,
[data-theme="light"] .section button.card:hover,
[data-theme="light"] .section .card[onclick]:hover,
[data-theme="light"] .section .selector-card:hover,
[data-theme="light"] .card-slider .card:hover {
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14), var(--shadow-accent-glow) !important;
}

/* ---- Section rhythm: alternating surface bands separate sections ---- */
.section-alt {
    background: var(--color-surface-1) !important;
    border-block: 1px solid var(--color-border-subtle);
}

/* ---- Gradient section dividers ---- */
hr.section-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border-default) 18%, var(--color-accent) 50%, var(--color-border-default) 82%, transparent);
    opacity: 0.5;
}

/* ---- Primary CTA buttons get the accent glow on hover (consistency) ---- */
.btn-primary:hover,
.btn-accent:hover {
    box-shadow: var(--shadow-md), var(--shadow-accent-glow) !important;
}

@media (prefers-reduced-motion: reduce) {
    .section-label::before { animation: none; }
}

/* ==========================================================================
   SITE-WIDE SCROLL MOTION (re-enable; bundle.min.css force-disables it).
   Higher specificity (body ...) + !important beats bundle. A JS failsafe in
   scripts.php force-reveals anything left after 3.5s so content can't stick.
   ========================================================================== */
body .reveal {
    opacity: 0 !important;
    transform: translateY(28px) !important;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity, transform;
}
body .reveal.active { opacity: 1 !important; transform: none !important; }
body .stagger-children > * {
    opacity: 0 !important;
    transform: translateY(24px) !important;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity, transform;
}
body .stagger-children.active > * { opacity: 1 !important; transform: none !important; }
body .stagger-children.active > *:nth-child(1) { transition-delay: 0.05s; }
body .stagger-children.active > *:nth-child(2) { transition-delay: 0.11s; }
body .stagger-children.active > *:nth-child(3) { transition-delay: 0.17s; }
body .stagger-children.active > *:nth-child(4) { transition-delay: 0.23s; }
body .stagger-children.active > *:nth-child(5) { transition-delay: 0.29s; }
body .stagger-children.active > *:nth-child(6) { transition-delay: 0.35s; }
body .stagger-children.active > *:nth-child(n+7) { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
    body .reveal, body .stagger-children > * {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* ---- Footer social icon bar ---- */
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--color-text-secondary);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-default);
    font-size: 1.05rem;
    transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.footer-social a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-accent-glow);
}

/* ---- Brand logo lockup (square icon mark + Advenno wordmark) ---- */
.logo { display: inline-flex !important; align-items: center; gap: 10px; text-decoration: none; }
.logo .logo-mark {
    height: 38px !important;
    width: 38px !important;
    border-radius: 10px;
    display: block;
    object-fit: cover;
    box-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.logo .logo-word {
    font-family: var(--font-heading, sans-serif);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    line-height: 1;
}
@media (max-width: 480px) {
    .logo .logo-word { font-size: 1.1rem; }
    .logo .logo-mark { height: 34px !important; width: 34px !important; }
}

/* ==========================================================================
   THEME TOGGLE — single authoritative style.
   bundle.min.css accreted THREE conflicting .theme-toggle definitions (a
   sliding-pill switch + a round icon button + size overrides) that collided
   and rendered inconsistently/clipped. This is the one source of truth: a
   round icon button (sun in dark, moon in light), theme-aware via design
   tokens. Header-scoped + !important so it reliably beats the async bundle
   regardless of cascade insertion order.
   ========================================================================== */
.header-actions .theme-toggle {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--color-surface-2, rgba(255,255,255,0.05)) !important;
    border: 1px solid var(--color-border-default, rgba(148,163,184,0.24)) !important;
    color: var(--color-text-secondary, #94a3b8) !important;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease !important;
}
.header-actions .theme-toggle:hover {
    background: var(--color-accent-subtle, rgba(20,184,166,0.12)) !important;
    border-color: var(--color-accent, #14b8a6) !important;
    color: var(--color-accent, #14b8a6) !important;
}
.header-actions .theme-toggle:active { transform: scale(0.93); }
.header-actions .theme-toggle:focus-visible {
    outline: 2px solid var(--color-accent, #14b8a6);
    outline-offset: 2px;
}
/* neutralize the legacy sliding gradient circle */
.header-actions .theme-toggle .theme-toggle-circle {
    width: auto !important;
    height: auto !important;
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* icons */
.header-actions .theme-toggle .icon-sun,
.header-actions .theme-toggle .icon-moon {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
    color: inherit !important;
}
/* sun shows in dark (default), moon shows in light */
.header-actions .theme-toggle .icon-sun  { display: block !important; }
.header-actions .theme-toggle .icon-moon { display: none !important; }
[data-theme="light"] .header-actions .theme-toggle .icon-sun  { display: none !important; }
[data-theme="light"] .header-actions .theme-toggle .icon-moon { display: block !important; }

/* ==========================================================================
   GLOBAL ATMOSPHERIC BACKGROUND
   The body was a flat near-black animated gradient, so everything below the
   hero felt empty/harsh. This gives the WHOLE page subtle hero-like depth:
   soft, fixed accent glows over a gentle base — sitewide, both themes.
   Overrides .animated-gradient-bg (bundle) via !important on body.
   ========================================================================== */
body {
    background-color: #0b1124 !important;             /* lifted floor (kept below the band so cards pop) */
    background-image:
        radial-gradient(1050px 720px at 2% -6%,  rgba(20,184,166,0.20), transparent 56%),  /* teal spot, top-left */
        radial-gradient(1050px 720px at 99% 2%,  rgba(52,211,153,0.20), transparent 56%),  /* green spot, top-right */
        radial-gradient(900px 640px at 88% 99%,  rgba(52,211,153,0.13), transparent 60%),  /* green spot, bottom-right */
        radial-gradient(820px 560px at 14% 104%, rgba(20,184,166,0.12), transparent 60%),  /* teal spot, bottom-left */
        radial-gradient(1300px 1000px at 50% 48%, rgba(30,44,78,0.16), transparent 72%),   /* gentle center lift */
        linear-gradient(180deg, #0e1730 0%, #0b1124 80%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}
[data-theme="light"] body {
    background-color: #E9EFF6 !important;             /* soft gray floor (cards = white above it) */
    background-image:
        radial-gradient(1100px 720px at 6% -8%,  rgba(13,148,136,0.06), transparent 55%),
        radial-gradient(1000px 700px at 100% 6%, rgba(16,185,129,0.05), transparent 55%),
        linear-gradient(180deg, #eef3f9 0%, #e6edf5 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* Section bands = a clean single elevation step (surface-1) above the floor, so
   cards (surface-2) sit clearly ABOVE the band. Hairline reinforces the edge. */
.section-alt {
    background: color-mix(in srgb, var(--color-surface-1) 88%, transparent) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    border-block: 1px solid var(--color-border-subtle, rgba(148,163,184,0.12));
}

/* ==========================================================================
   GLASS ("water glass") for content containers.
   Translucent surface + backdrop blur so the page atmosphere/glows show through
   — frosted-glass depth that separates layers by transparency, not just hue.
   !important beats the non-important phase4 fills (which load after this file).
   ========================================================================== */
.section .card,
.p7-cap,
.p7-compare-col,
.p7-why,
.p7-svg-stage,
.p4-svc-hero-visual {
    background: color-mix(in srgb, var(--color-surface-2) 66%, transparent) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    border: 1px solid var(--color-border-default) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 34px rgba(2,6,23,0.34) !important;
}
[data-theme="light"] .section .card,
[data-theme="light"] .p7-cap,
[data-theme="light"] .p7-compare-col,
[data-theme="light"] .p7-why,
[data-theme="light"] .p7-svg-stage,
[data-theme="light"] .p4-svc-hero-visual {
    background: color-mix(in srgb, #ffffff 66%, transparent) !important;
    border: 1px solid rgba(148,163,184,0.35) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 12px 30px rgba(15,23,42,0.10) !important;
}
/* keep the comparison "gain" panel's accent emphasis on top of the glass */
.p7-compare-col.is-gain {
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent) !important;
}

/* Nested-container safety net: a panel inside a panel steps up one more level
   (surface-3, opaque) so a sub-sub-container never matches its glass parent. */
.card .card,
.card .p7-cap,
.section .card .card {
    background: var(--color-surface-3) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ==========================================================================
   TEMP HIDE — services not offered right now:
   UI/UX Design, Digital Marketing, Cybersecurity, Blockchain.
   Markup & pages are kept intact; this only hides their entries site-wide
   (nav, footer, services listing, home selector/links, related cards).
   To RESTORE: delete this block + the $adv_hidden_services filter in
   components/related-content.php. (`> a` keeps it from hiding parent menus.)
   ========================================================================== */
/* standalone link/card items (the anchor IS the item) */
a.selector-card[href*="/services/ui-ux-design"],
a.selector-card[href*="/services/digital-marketing"],
a.selector-card[href*="/services/cybersecurity"],
a.selector-card[href*="/services/blockchain"],
a.related-card[href*="/services/ui-ux-design"],
a.related-card[href*="/services/digital-marketing"],
a.related-card[href*="/services/cybersecurity"],
a.related-card[href*="/services/blockchain"],
a.text-link[href*="/services/ui-ux-design"],
a.text-link[href*="/services/digital-marketing"],
a.text-link[href*="/services/cybersecurity"],
a.text-link[href*="/services/blockchain"],
/* nav mega-menu + footer + related lists (li wrapping the link) */
li:has(> a[href*="/services/ui-ux-design"]),
li:has(> a[href*="/services/digital-marketing"]),
li:has(> a[href*="/services/cybersecurity"]),
li:has(> a[href*="/services/blockchain"]),
/* services.php listing cards (card wraps a Learn-More link) */
.service-card:has(a[href*="/services/ui-ux-design"]),
.service-card:has(a[href*="/services/digital-marketing"]),
.service-card:has(a[href*="/services/cybersecurity"]),
.service-card:has(a[href*="/services/blockchain"]),
/* home "What We Build" benefit cards (heading+link blocks) */
.service-benefit-card:has(a[href*="/services/ui-ux-design"]),
.service-benefit-card:has(a[href*="/services/digital-marketing"]),
.service-benefit-card:has(a[href*="/services/cybersecurity"]),
.service-benefit-card:has(a[href*="/services/blockchain"]) {
    display: none !important;
}

/* ==========================================================================
   LIGHT-MODE FAQ FIX
   bundle.min.css hardcodes the FAQ accordion text to white with !important
   (.faq-item .faq-answer p, .faq-question, chevron icon) and never gates it
   by theme. In dark mode that's correct; in light mode it leaves white text
   on the light FAQ panel — the "colors mixing" reported site-wide (every
   public page has an FAQ). Re-point those colors to the theme tokens, light
   only. Selectors carry the .faq-accordion prefix to outspecify the bundle's
   own !important rules. Dark mode is left exactly as-is.
   ========================================================================== */
[data-theme="light"] .faq-accordion .faq-item .faq-answer p,
[data-theme="light"] .faq-item .faq-answer p,
[data-theme="light"] .faq-accordion .faq-item .faq-answer,
[data-theme="light"] .faq-item .faq-answer {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .faq-accordion .faq-item button.faq-question,
[data-theme="light"] .faq-accordion .faq-item summary.faq-question,
[data-theme="light"] .faq-item button.faq-question,
[data-theme="light"] .faq-item summary.faq-question {
    color: var(--text-primary) !important;
}
[data-theme="light"] .faq-accordion .faq-item button.faq-question i,
[data-theme="light"] .faq-accordion .faq-item summary.faq-question i,
[data-theme="light"] .faq-item button.faq-question i,
[data-theme="light"] .faq-item summary.faq-question i {
    color: var(--text-muted) !important;
}