/* ============================================================
   sl-theme.css — light/dark mode overrides
   Loaded after sl-styles.css. Light mode activates when
   html[data-theme="light"] is set by the theme toggle.
   Dark mode is the default; no attribute needed for dark.
   ============================================================ */

/* ── Footer: top breathing room ──────────────────────────── */
/* Spacing lives on the footer, not on main-wrapper, so the gap area
   always takes the footer's own background color — no white flash in
   light mode between a dark last-section and the dark footer. */
.footer2_component {
  padding-top: 5rem;
}

/* ── Footer link columns — prevent word wrapping ─────────── */
.footer2_link-column {
  min-width: 200px;
}

/* ── Industry carousel — linked tile cards ───────────────── */
a.team10_item {
  text-decoration: none;
  display: block;
  color: inherit;
  transition: opacity 0.2s;
}
a.team10_item:hover {
  opacity: 0.75;
}

/* ── Light mode: primary-link text ──────────────────────── */
/* .link-text is hardcoded #d8d8d8 in sl-styles.css (dark-mode only) */
html[data-theme="light"] .link-text {
  color: #111111 !important;
}

/* ── Light mode: slider arrow buttons ───────────────────── */
html[data-theme="light"] .slider-arrow {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: #111111;
}
html[data-theme="light"] .slider-arrow:hover {
  background-color: #f0f0f0;
  box-shadow: none;
}

/* ── Light mode: tag / badge pills ──────────────────────── */
html[data-theme="light"] .tag {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: #111111;
}

/* ── Shared text color tokens (used across dark + light) ─── */
:root {
  --fg-primary:   #ffffff;
  --fg-secondary: #ababab;
}
html[data-theme="light"] {
  --fg-primary:   #111111;
  --fg-secondary: #444444;
}

/* ── Webflow CSS variable palette flip ───────────────────── */
html[data-theme="light"] {
  --color-scheme-1--background: #ffffff;
  --color-scheme-1--text: #0d0d0d;
  --color-scheme-1--foreground: #f2f2f2;
  --color-scheme-1--border: #e0e0e0;
  --_primitives---colors--hover-card-bg: #ebebeb;
}

/* ── Theme toggle icon visibility ───────────────────────── */
.theme-icon--moon { display: none; }
.theme-icon--sun  { display: block; }
html[data-theme="light"] .theme-icon--sun  { display: none; }
html[data-theme="light"] .theme-icon--moon { display: block; }

/* ── Navbar background — theme-aware via JS, but this
   ensures correct color on initial load before JS fires.
   No !important: Layout.astro adds .navbar--over-hero on hero pages and
   needs to override this default to go transparent. JS runs at
   DOMContentLoaded so any FOUC window is tiny. ── */
html[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* ── Nav search button (cp-trigger-btn) ─────────────────── */
html[data-theme="light"] .cp-trigger-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: #555555;
}
html[data-theme="light"] .cp-trigger-btn:hover {
  background: rgba(0, 0, 0, 0.09);
  color: #222222;
  border-color: rgba(0, 0, 0, 0.2);
}

/* ── Theme toggle button ────────────────────────────────── */
html[data-theme="light"] .theme-toggle-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: #555555;
}
html[data-theme="light"] .theme-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.09);
  color: #222222;
  border-color: rgba(0, 0, 0, 0.2);
}

/* ── Command Palette ────────────────────────────────────── */
html[data-theme="light"] .cp-backdrop {
  background: rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .cp-dialog {
  background: #f8f8f8;
  border-color: #e0e0e0;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .cp-header {
  border-bottom-color: #e8e8e8;
}
html[data-theme="light"] #cp-input {
  color: #111111;
}
html[data-theme="light"] #cp-input::placeholder {
  color: #aaaaaa;
}
html[data-theme="light"] .cp-group-label {
  background: #f8f8f8;
  color: #aaaaaa;
}
html[data-theme="light"] .cp-item:hover {
  background: #eeeeee;
}
html[data-theme="light"] .cp-item.is-active {
  background: #e8f0ff;
  border-left-color: #146ef5;
}
html[data-theme="light"] .cp-item-label {
  color: #222222;
}
html[data-theme="light"] .cp-item.is-active .cp-item-label {
  color: #0d0d0d;
}
html[data-theme="light"] .cp-item-sublabel {
  color: #888888;
}
html[data-theme="light"] .cp-item.is-active .cp-item-sublabel {
  color: #666666;
}
html[data-theme="light"] .cp-item-path {
  color: #aaaaaa;
}
html[data-theme="light"] .cp-item.is-active .cp-item-path {
  color: #146ef5;
  opacity: 0.8;
}
html[data-theme="light"] .cp-footer {
  border-top-color: #e8e8e8;
  color: #aaaaaa;
}
html[data-theme="light"] .cp-empty {
  color: #aaaaaa;
}
html[data-theme="light"] .cp-list::-webkit-scrollbar-thumb {
  background: #d0d0d0;
}

/* ── Blog listing cards ──────────────────────────────────── */
html[data-theme="light"] .blog-card {
  color: #111111;
  background: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .blog-card:hover {
  background-color: #ffffff;
  border-color: rgba(0, 85, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 85, 255, 0.1);
}
html[data-theme="light"] .blog-card-tag {
  color: #666666;
}
html[data-theme="light"] .blog-card:hover .blog-card-tag {
  color: #444444;
}
html[data-theme="light"] .blog-card-title {
  color: #0d0d0d;
}
html[data-theme="light"] .blog-card:hover .blog-card-title {
  color: #0d0d0d;
}
html[data-theme="light"] .blog-card-description {
  color: #444444;
}
html[data-theme="light"] .blog-card:hover .blog-card-description {
  color: #333333;
}
html[data-theme="light"] .blog-card-meta {
  border-top-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .blog-card:hover .blog-card-meta {
  border-top-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .blog-card-meta .paragraph-small {
  color: #666666;
}
html[data-theme="light"] .blog-card-read-more {
  color: #0055ff;
}
html[data-theme="light"] .blog-card:hover .blog-card-read-more {
  color: #003acc;
}

/* ── Blog detail: byline ────────────────────────────────── */
html[data-theme="light"] .blog-byline {
  color: #555555;
}
html[data-theme="light"] .blog-byline-sep {
  color: #999999;
}

/* ── Blog detail: article content ──────────────────────── */
html[data-theme="light"] .blog-content h2 {
  color: #0d0d0d;
}
html[data-theme="light"] .blog-content h3 {
  color: #0d0d0d;
}
html[data-theme="light"] .blog-content p {
  color: #333333;
}
html[data-theme="light"] .blog-content li {
  color: #333333;
}
html[data-theme="light"] .blog-content strong {
  color: #0d0d0d;
}
html[data-theme="light"] .blog-content blockquote {
  background: #eef3ff;
  border-left-color: #0055ff;
}
html[data-theme="light"] .blog-content hr {
  border-top-color: #e0e0e0;
}

/* ── Blog detail: sidebar cards ────────────────────────── */
html[data-theme="light"] .sidebar-card {
  background: #eeeeee;
  border-color: #dcdcdc;
  color: #111111;
}
html[data-theme="light"] .sidebar-card--light {
  background: #f4f4f4;
}
html[data-theme="light"] .sidebar-card .eyebrow {
  color: #555555;
}
html[data-theme="light"] .sidebar-card .heading-h4,
html[data-theme="light"] .sidebar-card h3 {
  color: #0d0d0d;
}
html[data-theme="light"] .sidebar-card p,
html[data-theme="light"] .sidebar-card .paragraph {
  color: #333333;
}
html[data-theme="light"] .sidebar-links {
  border-top-color: #dcdcdc;
}
html[data-theme="light"] .sidebar-link {
  color: #0055ff;
}
html[data-theme="light"] .sidebar-stat-value {
  color: #0d0d0d;
}
html[data-theme="light"] .sidebar-stat-label {
  color: #555555;
}

/* ── Blog detail: author card ───────────────────────────── */
html[data-theme="light"] .blog-author-card {
  background-color: #f2f2f2;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px,
    transparent 12px,
    rgba(0, 0, 0, 0.015) 12px,
    rgba(0, 0, 0, 0.015) 13px
  );
  border-color: #e0e0e0;
  color: #333333;
}
html[data-theme="light"] .blog-author-card .eyebrow {
  color: #0055ff;
}
html[data-theme="light"] .blog-author-card .heading-h4,
html[data-theme="light"] .blog-author-card h3 {
  color: #0d0d0d !important; /* beats Astro's scoped specificity (cid attr on both elements) */
}
html[data-theme="light"] .blog-author-card .paragraph,
html[data-theme="light"] .blog-author-card p {
  color: #333333 !important;
}
html[data-theme="light"] .blog-author-photo {
  border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .blog-author-cta {
  color: #0055ff;
  border-color: rgba(0, 85, 255, 0.35);
}
html[data-theme="light"] .blog-author-cta:hover {
  background-color: #0055ff;
  border-color: #0055ff;
  color: #ffffff;
}

/* ── Blog detail: FAQ section ───────────────────────────── */
html[data-theme="light"] .blog-faq-item {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* ── Nav trigger — light mode ───────────────────────────── */
html[data-theme="light"] .nav-dropdown-toggle {
  color: var(--nav-link-color);
}
html[data-theme="light"] .nav-dropdown-toggle:hover,
html[data-theme="light"] .nav-dropdown-toggle.w--open {
  color: var(--nav-link-active);
  background: var(--nav-link-hover-bg);
}

/* ── Dropdown panel — light mode ────────────────────────── */
html[data-theme="light"] .navbar5_dropdown-list {
  background: var(--nav-dropdown-bg) !important;
  border-color: var(--nav-dropdown-border);
  box-shadow: var(--shadow-xl);
}

/* ── Dropdown links — light mode ────────────────────────── */
html[data-theme="light"] .nav-dropdown-link:hover {
  background: var(--nav-link-hover-bg);
}
html[data-theme="light"] .nav-dropdown-link .text-weight-semibold {
  color: var(--nav-link-active);
}
html[data-theme="light"] .nav-dropdown-link .text-size-small {
  color: var(--gray-500);
}

/* ── Mega menu left panel — light mode ──────────────────── */
html[data-theme="light"] .mega-menu-left-wrapper {
  border-right-color: var(--nav-dropdown-border);
}
html[data-theme="light"] .mega-menu-left-wrapper .paragraph-sm,
html[data-theme="light"] .mega-menu-left-wrapper .paragraph-l {
  color: var(--gray-600);
}

/* ── Logo — invert in light mode ───────────────────────── */
html[data-theme="light"] .navbar5_logo {
  filter: invert(1);
}

/* ── Mobile nav menu — light mode ───────────────────────── */
html[data-theme="light"] .navbar5_menu.w-nav-menu {
  background: #ffffff;
  border-top: 1px solid #e4e7ec;
}
html[data-theme="light"] .navbar5_menu .nav-dropdown-toggle {
  color: var(--nav-link-color);
}

/* ── Hero sections: always white text (dark photo backgrounds) ─
   .color-scheme-1 sets color:#0d0d0d in light mode, but hero sections
   with forced dark backgrounds must keep white text.
   Scoped to .hero.color-scheme-1 only — NOT .hero.padding-top (centered
   variant has white body background and inherits dark text correctly).
   NOTE: sl-styles.css sets .padding-section-large { color: var(--color-scheme-1--text) }
   which overrides inherited color via specificity. Must be explicitly countered below. */
html[data-theme="light"] .hero.color-scheme-1,
html[data-theme="light"] .hero .color-scheme-1,
html[data-theme="light"] .hero-split__left.color-scheme-1,
html[data-theme="light"] .hero-split__left .padding-section-large {
  color: #ffffff;
}
/* Counter padding-section-large's direct color rule inside dark-bg heroes */
html[data-theme="light"] .hero.color-scheme-1 .padding-section-large,
html[data-theme="light"] .hero-split__left.color-scheme-1 .padding-section-large {
  color: #ffffff;
}

/* Hero sections with dark image backgrounds must keep dark bg in light mode */
html[data-theme="light"] .hero.color-scheme-1 {
  background-color: #080808;
}
html[data-theme="light"] .hero-split__left.color-scheme-1 {
  background-color: #080808;
}

/* ── Tab widget active state — light mode ───────────────── */
/* Active tab has a dark (#171717) background but inherits #0d0d0d text.
   Force white text so the inverted state is readable. */
html[data-theme="light"] .layout505_tab-link.w--current {
  color: #ffffff;
}

/* ── Inline links — light mode ──────────────────────────── */
/* .inline-link uses --shakespeare-lightest (#eef8fa) which is near-white
   and invisible on light backgrounds. Use --brand-600 for visibility. */
html[data-theme="light"] .inline-link {
  color: var(--brand-600);
}
html[data-theme="light"] .inline-link:hover {
  color: var(--brand-700);
}

/* ── Paragraph text — light mode ───────────────────────── */
/* .paragraph, .paragraph-l, .paragraph-sm hardcode #d8d8d8 in sl-styles.css.
   Use --fg-secondary so dark/light both read from the token. */
html[data-theme="light"] .paragraph,
html[data-theme="light"] .paragraph-l,
html[data-theme="light"] .paragraph-sm {
  color: var(--fg-secondary);
}

/* Keep paragraph text white inside hero sections that have forced dark backgrounds.
   Scoped to .color-scheme-1 variants only — centered hero (.hero.padding-top)
   has a white body background in light mode and inherits dark text correctly. */
html[data-theme="light"] .hero.color-scheme-1 .paragraph,
html[data-theme="light"] .hero.color-scheme-1 .paragraph-l,
html[data-theme="light"] .hero.color-scheme-1 .paragraph-sm,
html[data-theme="light"] .hero-split__left.color-scheme-1 .paragraph,
html[data-theme="light"] .hero-split__left.color-scheme-1 .paragraph-l,
html[data-theme="light"] .hero-split__left.color-scheme-1 .paragraph-sm {
  color: #ffffff;
}

/* ── Photo-tile cards (home + services overview) — light mode ───────
   .layout423_card is the photo-background tile pattern used in the
   home page "Services" grid and on /services. Each card has a dark
   photo + overlay; text on top must be white in BOTH themes. The
   global light-mode .paragraph override above forces dark text, which
   becomes invisible on these tiles. Re-whitens both heading and
   paragraph specifically inside .layout423_card. Scoped tight: does
   not affect any other .paragraph or heading-h3 on the page. */
html[data-theme="light"] .layout423_card .heading-h3,
html[data-theme="light"] .layout423_card .paragraph,
html[data-theme="light"] .layout423_card .paragraph-l,
html[data-theme="light"] .layout423_card .paragraph-sm {
  color: #ffffff;
}

/* ── Eyebrow — light mode ───────────────────────────────────── */
/* .eyebrow hardcodes color: white in sl-styles.css. In light mode
   this is invisible on white backgrounds. Override to dark globally,
   then restore white inside sections that have forced dark backgrounds. */
html[data-theme="light"] .eyebrow {
  color: var(--fg-secondary);
}
html[data-theme="light"] .hero.color-scheme-1 .eyebrow,
html[data-theme="light"] .hero-split__left.color-scheme-1 .eyebrow {
  color: #ffffff;
}

/* ── CTA group buttons — light mode (use token vars) ────── */
html[data-theme="light"] .cp-trigger-btn {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--gray-600);
}
html[data-theme="light"] .cp-trigger-btn:hover {
  background: var(--gray-200);
  color: var(--gray-900);
  border-color: var(--gray-300);
}
html[data-theme="light"] .theme-toggle-btn {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--gray-600);
}
html[data-theme="light"] .theme-toggle-btn:hover {
  background: var(--gray-200);
  color: var(--gray-900);
  border-color: var(--gray-300);
}

/* ── Feature cards (IconFeatureGrid) — white text on dark card bg ── */
/* .feature-card has background-color: --neutral-darkest (always dark).
   Inside color-scheme-1, light mode sets all text to #0d0d0d, making
   the card text dark-on-dark. Force white specifically for cards inside
   color-scheme-1 sections. Also counter the global .paragraph override. */
html[data-theme="light"] .color-scheme-1 .feature-card,
html[data-theme="light"] .color-scheme-1 a.feature-card--link {
  color: #ffffff;
}
html[data-theme="light"] .color-scheme-1 .feature-card .paragraph,
html[data-theme="light"] .color-scheme-1 .feature-card .paragraph-l,
html[data-theme="light"] .color-scheme-1 .feature-card .paragraph-sm {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Footer — keep dark background in light mode ────────── */
/* The footer uses color-scheme-1 which flips to white bg in light mode.
   Keeping it intentionally dark preserves the is-alternate form input
   styles (white borders/text on dark bg) and the overall visual design. */
html[data-theme="light"] .footer2_component {
  background-color: #0d0d0d;
}
/* Footer text: revert to white since the background stays dark */
html[data-theme="light"] .footer2_component .footer-link {
  color: rgba(255, 255, 255, 0.6);
}
html[data-theme="light"] .footer2_component .footer-link:hover {
  color: #ffffff;
}
html[data-theme="light"] .footer2_component .footer2_social-link {
  color: rgba(255, 255, 255, 0.6);
}
html[data-theme="light"] .footer2_component .footer2_social-link:hover {
  color: #ffffff;
}
html[data-theme="light"] .footer2_component .paragraph,
html[data-theme="light"] .footer2_component .paragraph-l,
html[data-theme="light"] .footer2_component .paragraph-sm {
  color: rgba(255, 255, 255, 0.65);
}
html[data-theme="light"] .footer2_component .eyebrow {
  color: rgba(255, 255, 255, 0.4);
}
html[data-theme="light"] .footer2_component .heading-h4 {
  color: #ffffff;
}

/* ── Footer divider — muted on intentionally dark footer ──── */
html[data-theme="light"] .footer2_component .divider-horizontal {
  background-color: rgba(255, 255, 255, 0.12);
}

/* ── Layout121 timeline icons — invert white SVGs for light mode ── */
/* Icons are white SVG strokes; invisible on the white color-scheme-1
   section background. Invert to black. The icon-wrapper bg is also
   set to var(--color-scheme-1--background) which creates the visual
   "gap" in the progress line behind each icon — keep that behaviour
   but give the wrapper a visible light-grey background so the icon
   position is distinguishable on the white section. */
html[data-theme="light"] .section_layout121 .layout121_timeline-icon-wrapper {
  background-color: #f0f0f0;
  border-radius: 6px;
}
html[data-theme="light"] .section_layout121 .layout121_timeline-icon-wrapper img {
  filter: invert(1);
}

/* ── CtaBar — white text over video/image background ─────── */
/* The .cta15_component has no color-scheme-1, but global paragraph
   rules in light mode make the text dark over the video overlay. */
html[data-theme="light"] .cta15_component {
  color: #ffffff;
}
html[data-theme="light"] .cta15_component .paragraph,
html[data-theme="light"] .cta15_component .paragraph-l,
html[data-theme="light"] .cta15_component .paragraph-sm {
  color: rgba(255, 255, 255, 0.8);
}