/* ==========================================================================
   SWEDBANG LUXURY HOMEPAGE UPGRADE
   Scope: Homepage hero, cards, CTA, typography, spacing + sitewide header/logo
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   SECTION 7 — LOGO CRISP FIX (SITEWIDE — highest priority)
   ───────────────────────────────────────────────────────────────────────── */

header img,
header .logo img,
header .site-logo img,
header .navbar-logo img,
header .header-logo img,
header [class*="logo"] img,
header img.uhd-sharp,
header a[href="/"] img,
nav img[alt],
.header-logo img,
#sb-header-logo {
  display: block !important;
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 52px !important;
  object-fit: contain !important;
  object-position: left center !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: none !important;
  /* Remove will-change:transform — it forces GPU compositing layers that can cause subpixel blur */
  will-change: auto !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTION 8 — HEADER PREMIUM REFINEMENT (SITEWIDE)
   ───────────────────────────────────────────────────────────────────────── */

header,
.site-header,
nav.header,
.navbar,
#site-header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: background 0.30s ease, backdrop-filter 0.30s ease,
              border-color 0.30s ease, box-shadow 0.30s ease !important;
}

header.is-scrolled,
.site-header.is-scrolled,
.navbar.is-scrolled,
#site-header.is-scrolled,
header[data-scrolled="true"],
header.scrolled,
header.sticky-active {
  background: rgba(12, 22, 45, 0.97) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  border-bottom: 1px solid rgba(0, 198, 255, 0.10) !important;
  box-shadow: 0 2px 28px rgba(0, 0, 0, 0.45) !important;
}

/* Light Mode Scrolled Header */
html.light-theme header.is-scrolled,
html.light-theme .site-header.is-scrolled,
html.light-theme .navbar.is-scrolled,
html.light-theme #site-header.is-scrolled,
html.light-theme header[data-scrolled="true"],
html.light-theme header.scrolled {
  background: rgba(244, 246, 250, 0.94) !important;
  border-bottom: 1px solid rgba(43, 74, 192, 0.10) !important;
  box-shadow: 0 2px 16px rgba(43, 74, 192, 0.07) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTION 2 — HERO SECTION LUXURY UPGRADE (HOMEPAGE ONLY)
   ───────────────────────────────────────────────────────────────────────── */

/* Target the hero/first-section on the homepage */
#root > div > main > section:first-of-type,
.hero-section,
[class*="hero"],
section.hero,
section:has(> .hero-title),
.home-hero {
  position: relative;
  isolation: isolate;
}

/* Light leak overlay removed to ensure geode stone animation is visible */

/* Gold editorial accent divider — injected via JS below hero headline block */
.sb-lux-hero-divider {
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.55), transparent);
  margin: 20px auto;
  border-radius: 999px;
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTION 4 — TYPOGRAPHY REFINEMENT (HOMEPAGE ONLY)
   ───────────────────────────────────────────────────────────────────────── */

/* Only target homepage — first-child of root (React SPA root) */
:where(#root) h1,
:where(#root) .hero-title,
:where(#root) section:first-of-type h2 {
  letter-spacing: -0.01em;
  line-height: 1.20;
}

/* Eyebrow / label accent treatment — enterprise cyan */
:where(#root) .eyebrow,
:where(#root) .region-label,
:where(#root) [class*="eyebrow"],
:where(#root) [class*="label-accent"],
:where(#root) .section-label {
  color: #00C6FF !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTION 3 — HOMEPAGE CARD SURFACE REFINEMENT
   ───────────────────────────────────────────────────────────────────────── */

/* Enterprise dark card */
:where(#root) .card,
:where(#root) [class*="card"]:not([class*="card-fore"]):not([class*="card-back"]) {
  background: #111E38 !important;
  border: 1px solid rgba(0, 198, 255, 0.10) !important;
  border-radius: 12px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.40),
    0 1px 3px rgba(0, 0, 0, 0.30) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  transition: transform 0.20s ease,
              box-shadow 0.20s ease,
              border-color 0.20s ease !important;
  overflow: hidden;
}

/* Card top-edge glow — enterprise cyan */
:where(#root) .card::before,
:where(#root) [class*="card"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 198, 255, 0.35) 40%,
    rgba(123, 92, 255, 0.25) 60%,
    transparent
  );
  pointer-events: none;
  z-index: 1;
}

/* Card hover lift */
:where(#root) .card:hover,
:where(#root) [class*="card"]:hover {
  transform: translateY(-3px);
  background: #162645 !important;
  border-color: rgba(0, 198, 255, 0.28) !important;
  box-shadow:
    0 8px 32px rgba(0, 198, 255, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.50) !important;
}

/* Light mode cards */
html.light-theme :where(#root) .card,
html.light-theme :where(#root) [class*="card"]:not([class*="card-fore"]):not([class*="card-back"]) {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(43, 74, 192, 0.12) !important;
  box-shadow:
    0 4px 20px rgba(43, 74, 192, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Light mode card hover */
html.light-theme :where(#root) .card:hover,
html.light-theme :where(#root) [class*="card"]:hover {
  box-shadow:
    0 8px 28px rgba(43, 74, 192, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(43, 74, 192, 0.26) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTION 5 — CTA BUTTON LUXURY TREATMENT (protect luxury-cta.css button)
   ───────────────────────────────────────────────────────────────────────── */

/* Only target NON-luxury-cta buttons in the hero area */
:where(#root) .hero-section button:not(.sb-luxury-hero-cta),
:where(#root) [class*="hero"] button:not(.sb-luxury-hero-cta),
:where(#root) [class*="cta-btn"]:not(.sb-luxury-hero-cta),
:where(#root) [class*="primary-btn"]:not(.sb-luxury-hero-cta) {
  background: #00C6FF !important;
  border: none !important;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 198, 255, 0.25) !important;
  color: #000F1F !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  position: relative;
  overflow: hidden;
  transition: background 0.15s ease,
              box-shadow 0.15s ease,
              transform 0.15s ease !important;
}

:where(#root) .hero-section button:not(.sb-luxury-hero-cta):hover,
:where(#root) [class*="hero"] button:not(.sb-luxury-hero-cta):hover {
  background: #0099CC !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(0, 198, 255, 0.40) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTION 6 — SPACING & VISUAL RHYTHM
   ───────────────────────────────────────────────────────────────────────── */

/* Breathing room between sections */
:where(#root) section {
  scroll-margin-top: 80px;
}

:where(#root) .card-grid,
:where(#root) [class*="grid"]:where([class*="card"]) {
  gap: 24px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   SCROLLED HEADER DETECTION — JS fallback via class injection
   (in case the React header doesn't use .is-scrolled)
   ───────────────────────────────────────────────────────────────────────── */

/* Handled by the JS in index.html — see sb-header-scroll-watch */