/* ============================================================
   BORDIC OVERRIDES — laddas EFTER /assets/index-D0K9YzED.css
   <link rel="stylesheet" href="/assets/bordic-overrides.css">
   Palett (oförändrad): mörk #05121F, navy #001026, primär #1D649A,
   glöd #2E86C1, tint #D4E6F4
   ============================================================ */

/* ---------- A. KONTRAST ---------- */

/* A1. Paketsektionen: mörkt band istället för #6B90AD.
   Sektionen är den enda data-theme="hero" utan id="hero".
   Gradient-diven bär inline-style => !important krävs. */
section[data-theme="hero"]:not(#hero) > div.pointer-events-none {
  background: linear-gradient(to bottom,
    rgba(86,121,154,0)   0%,
    rgba(86,121,154,.45) 6%,
    rgba(80,114,146,.80) 12%,
    rgba(78,113,145,.94) 17%,
    #4E7392              22%,
    #46688a              80%,
    rgba(70,104,138,.94) 86%,
    rgba(70,104,138,.72) 91%,
    rgba(70,104,138,.36) 96%,
    rgba(70,104,138,0)   100%) !important;
}

/* A2. Brödtext i kort och ingresser: #4A6075 -> #35506A (8,3:1 på vitt) */
.text-bordic-muted { color:#35506A !important; }
.text-bordic-muted\/60 { color:rgba(53,80,106,.75) !important; }
.placeholder\:text-bordic-muted\/50::placeholder { color:rgba(53,80,106,.65) !important; }
.placeholder\:text-bordic-muted\/50::-moz-placeholder { color:rgba(53,80,106,.65) !important; }

/* A3. Navy-opacitetsvarianter: golv på ~80% */
.text-bordic-navy\/60 { color:rgba(0,16,38,.78) !important; }
.text-bordic-navy\/70 { color:rgba(0,16,38,.84) !important; }
.text-bordic-navy\/75 { color:rgba(0,16,38,.88) !important; }

/* A4. Ljus skärm bakom #problemet (texten ligger naken på blå canvas) */
#problemet {
  background: linear-gradient(to bottom,
    rgba(238,244,249,0)   0%,
    rgba(238,244,249,.55) 15%,
    rgba(238,244,249,.55) 85%,
    rgba(238,244,249,0)   100%);
}

/* A5. Vit-opacitetsgolv på mörka ytor (hero-kort, paketkort, footer) */
.text-white\/40 { color:rgba(255,255,255,.62) !important; }
.text-white\/45 { color:rgba(255,255,255,.64) !important; }
.text-white\/50 { color:rgba(255,255,255,.70) !important; }
.text-white\/55 { color:rgba(255,255,255,.72) !important; }
.text-white\/60 { color:rgba(255,255,255,.76) !important; }
.text-white\/65 { color:rgba(255,255,255,.78) !important; }
.text-white\/70 { color:rgba(255,255,255,.82) !important; }

/* A6. Underlagsstärkning-kortet + "Diskutera ett samarbete"-knappen:
   tydligare glas + fylld knapp (mot mörka bandet från A1) */
section[data-theme="hero"]:not(#hero) .grid > div:last-child .rounded-2xl {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}
section[data-theme="hero"]:not(#hero) .grid > div:last-child a.btn-magnetic {
  background-color: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.55) !important;
}
section[data-theme="hero"]:not(#hero) .grid > div:last-child a.btn-magnetic:hover {
  background-color: rgba(255,255,255,.24) !important;
}

/* A7. Blåa detaljer på ljus botten */
.text-bordic-primary\/60 { color:rgba(29,100,154,.85) !important; }
section[data-theme="light"] .text-bordic-light { color:#2F6D9E; }

/* A8. Synligt fokus + robusthet */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid #2E86C1;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .fade-target { opacity:1 !important; transform:none !important; transition:none !important; }
  .steel-text, .status-breath, .data-status-pulse,
  .card-surface-dark:hover:before { animation:none !important; }
}

/* ---------- B. AVANCERAD LOOK ---------- */

/* B1. Glöd + grain på mörka bandet (paketsektionen) */
section[data-theme="hero"]:not(#hero)::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(620px 340px at 14% 20%, rgba(46,134,193,.22), transparent 70%),
    radial-gradient(760px 420px at 88% 78%, rgba(29,100,154,.16), transparent 70%);
}
section[data-theme="hero"]:not(#hero)::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}

/* B2. Kortdefinition: fastare yta, precisionsborder, lagrade skuggor */
.card-surface {
  position:relative; overflow:hidden;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(13,58,96,.10);
  box-shadow:
    0 1px 2px rgba(5,18,31,.06),
    0 8px 24px -6px rgba(5,18,31,.10),
    0 24px 48px -12px rgba(29,100,154,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.card-surface:hover {
  border-color: rgba(29,100,154,.30);
  box-shadow:
    0 2px 4px rgba(5,18,31,.06),
    0 16px 40px -8px rgba(5,18,31,.14),
    0 32px 64px -16px rgba(46,134,193,.18),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* B3. Hover-accentlinje i glödblått, tänds vid hover */
.card-surface::after {
  content:""; position:absolute; top:0; left:1.5rem; right:1.5rem;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg, transparent, #2E86C1, transparent);
  opacity:0; transition:opacity .35s ease;
}
.card-surface:hover::after { opacity:.9; }

/* B4. Eyebrow-etiketter som statuspiller med glödpunkt
   (font-mono uppercase-etiketterna i ljusa sektioner) */
section[data-theme="light"] span.font-mono.uppercase.mb-4 {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem .95rem; border-radius:999px;
  border:1px solid rgba(29,100,154,.22);
  background:rgba(29,100,154,.06);
  color:#0C2340; font-size:.72rem; letter-spacing:.22em;
}
section[data-theme="light"] span.font-mono.uppercase.mb-4::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background:#2E86C1; box-shadow:0 0 8px rgba(46,134,193,.85);
}

/* B5. Mono-siffror: tabular-nums + fixad gradient på 01–06
   (originalets gradient dör till 15% opacitet => urvattnat) */
.font-mono, .tabular-nums {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}
.card-surface > .font-mono.text-4xl {
  background-image: linear-gradient(135deg, #2E86C1 0%, #1D649A 55%, rgba(29,100,154,.55) 100%) !important;
}

/* B6. Gradient-text på nyckelfras i H2 (spannet i Om Bordic-rubriken) */
h2 span.text-bordic-primary {
  background: linear-gradient(92deg, #1D649A 0%, #2E86C1 60%, #4EA3D9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* B7. Disclaimer-bannern (mörk #001026 efter processkorten): glödkant */
div.rounded-2xl.px-8.py-6.text-center {
  border: 1px solid rgba(46,134,193,.35) !important;
  box-shadow:
    0 8px 32px rgba(0,16,38,.35),
    0 0 42px -12px rgba(46,134,193,.45),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* B8. Global grain något mer närvarande + tightare rubriker */
.noise-overlay { opacity:.03; }
h1, h2 { text-wrap: balance; }
h2.font-heading { letter-spacing: -.02em; }
