/* =======================================================
   JOGGIS — Fresh Light Theme (Consolidated & Accessible)
   - Consolidated tokens
   - Strong focus states
   - Reduced-motion friendly
   - Optional dark mode via [data-theme="dark"]
   - Optional hero bubble via .hero--bubble
   ======================================================= */

/* ===================== */
/*        TOKENS         */
/* ===================== */

:root{
  /* Palette — Light (base) */
  --bg:           #ffffff;
  --bg2:          #f5f7fb;

  /* Navy surfaces (cards/sections) */
  --card:         #14294b;
  --card-2:       #1a3664;
  --card-3:       #102342;

  /* Text */
  --text:         #0b1324;   /* Dark text on light */
  --text-inv:     #ffffff;   /* White on navy */
  --text-dim:     #334155;   /* Secondary on light */
  --text-dim-inv: #cfe1f7;   /* Secondary on navy */

  /* UI */
  --border:       #d7e2f0;   /* Light borders */
  --border-inv:   #233a64;   /* Borders on navy */
  --link:         #0b6cff;   /* Link blue */

  /* Accents */
  --ok:           #22c55e;   /* CTA green */
  --ok-text:      #04140a;

  /* Chips */
  --chip:         #1c2f55;
  --chip-text:    #e4eefc;

  /* Shadows */
  --shadow-1:     0 6px 18px rgba(2,19,40,.12);
  --shadow-2:     0 10px 28px rgba(2,19,40,.18);

  /* Sizing / Radius / Z */
  --radius-xs:    8px;
  --radius-sm:    12px;
  --radius:       14px;
  --radius-lg:    18px;
  --radius-xl:    22px;
  --radius-2xl:   24px;

  --space-1:      6px;
  --space-2:      8px;
  --space-3:      10px;
  --space-4:      12px;
  --space-5:      14px;
  --space-6:      16px;
  --space-7:      18px;
  --space-8:      20px;
  --space-9:      22px;
  --space-10:     28px;
  --space-11:     36px;

  --z-header:     1000;
}

/* ===================== */
/*       DARK MODE       */
/*   (Optional toggle)   */
/* ===================== */

[data-theme="dark"]{
  --bg:           #0b1324;
  --bg2:          #0f1a31;

  --card:         #0f213b;
  --card-2:       #132b58;
  --card-3:       #102447;

  --text:         #eaf2ff;
  --text-inv:     #ffffff;
  --text-dim:     #b6c7e3;
  --text-dim-inv: #e0ecff;

  --border:       #203459;
  --border-inv:   #1c2f55;

  --link:         #6aa4ff;

  --chip:         #1a2e54;
  --chip-text:    #e4eefc;

  --shadow-1:     0 6px 18px rgba(0,0,0,.28);
  --shadow-2:     0 10px 28px rgba(0,0,0,.35);
}

/* ===================== */
/*     BASE / RESET      */
/* ===================== */

*,
*::before,
*::after{ box-sizing: border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font:16px system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,var(--bg),var(--bg2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }

/* ===================== */
/*       WRAPPER         */
/* ===================== */

.wrap{
  max-width:960px;
  margin:9vh auto 6vh;
  padding:0 var(--space-6);
}

/* ===================== */
/*    CARDS / SECTIONS   */
/* ===================== */

.card{
  background:var(--card);
  color:var(--text-inv);
  padding:var(--space-11) var(--space-10);
  border-radius:var(--radius-lg);
  border:1px solid var(--border-inv);
  box-shadow:var(--shadow-2);
  text-align:center;
}

/* Pricing variant (light on light for readability) */
.card.pricing{
  background:#ffffff;
  color:#0b1324;
  text-align:left;
  border:1px solid #e6edf6;
  border-radius:var(--radius-xl);
  box-shadow:0 16px 42px rgba(2,19,40,.16);
  padding:var(--space-10);
}

/* Optional panel-light utility */
.panel-light{
  background:#ffffff;
  border:1px solid #e6edf6;
  border-radius:var(--radius-2xl);
  padding:var(--space-8);
  box-shadow:0 16px 42px rgba(2,19,40,.12);
}

/* ===================== */
/*     TYPOGRAPHY        */
/* ===================== */

h1{
  margin:6px 0 12px;
  font-size:clamp(1.9rem, 3.6vw, 2.2rem);
  letter-spacing:.3px;
  color:var(--text-inv);
  text-shadow:0 2px 14px rgba(0,0,0,.28);
  font-weight:800;
}

h2{
  margin:0 0 8px;
  color:var(--text-inv);
  font-weight:800;
}

p{
  margin:10px 0 16px;
  line-height:1.65;
  font-size:1.05rem;
  color:var(--text-dim-inv);
}

/* Sub / helper text under titles */
.sub{
  color:#d6e4fb;
  opacity:.95;
  margin:4px 0 0;
  font-size:.95rem;
}

/* ===================== */
/*        LINKS          */
/* ===================== */

a{
  color:var(--link);
  text-decoration:none;
  font-weight:600;
}

a:hover{ text-decoration:underline; }

/* High-visibility focus */
a:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--link);
  outline-offset:2px;
  border-radius:10px;
}

/* ===================== */
/*         HERO          */
/* ===================== */

.hero{
  text-align:center;
  padding:28px var(--space-6) 6px;
}

/* Clean hero by default */
.hero h1,
.hero p{
  color:#eaf2ff;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}

/* Optional “bubble” variant: add .hero--bubble on container */
.hero.hero--bubble h1,
.hero.hero--bubble p,
.card .section-title,
.plan .plan-head h2{
  display:inline-block;
  background:#0D1326;
  color:#ffffff;
  padding:6px 10px;
  border-radius:10px;
  line-height:1.2;
  box-shadow:0 6px 20px rgba(43,99,207,.25);
}

/* “Logo bubble” */
.logo-bubble{
  display:inline-block;
  border-radius:999px;
  padding:14px;
  background:
    radial-gradient(120px 120px at 50% 30%, rgba(255,255,255,.32), rgba(255,255,255,.18) 50%, rgba(255,255,255,.08) 70%, rgba(255,255,255,0) 72%),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    0 0 24px rgba(124,221,255,.20);
  backdrop-filter: blur(6px) saturate(120%);
}
.hero .logo-bubble{ margin:8px auto 14px; }

/* ===================== */
/*         LOGO          */
/* ===================== */

.logo{
  width:clamp(140px,22vw,260px);
  height:auto;
  object-fit:contain;
  margin:0 auto 12px;
  display:block;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.18));
}
.logo.sm{ width:clamp(96px,14vw,150px); height:auto; }

/* If logo already has heavy shadow, softly clamp it inside bubble */
.logo-bubble .logo,
.logo-bubble .logo.sm{
  filter:drop-shadow(0 0 5px rgba(121,212,255,.25));
}

/* ===================== */
/*        FOOTER         */
/* ===================== */

footer{
  margin:22px auto 0;
  text-align:center;
  font-size:.92rem;
  color:var(--text-dim);
}

/* ===================== */
/*        HEADER         */
/* ===================== */

.jg-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  background:#14294b;
  color:#fff;
  border-bottom:2px solid #0d1b33;
  backdrop-filter:saturate(140%) blur(4px);
}

.jg-back{
  justify-self:start;
  color:#9ef0c1;
  text-decoration:none;
  font-weight:700;
}
.jg-back:hover{ text-decoration:underline; }

.jg-brand{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:#fff;
  font-weight:900;
  letter-spacing:.06em;
}
.jg-brand img{ height:28px; width:28px; border-radius:6px; }
.jg-brand span{ color:#ffffff; font-size:.98rem; }

.jg-nav{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px;
}
.jg-nav a{
  color:#e6effa;
  text-decoration:none;
  font-weight:700;
  opacity:.9;
}
.jg-nav a:hover{ opacity:1; }
.jg-nav a.active{
  color:var(--ok);
  border-bottom:2px solid var(--ok);
  padding-bottom:2px;
}

.jg-burger{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  padding:6px 10px;
  border-radius:8px;
  font-size:1rem;
  margin-left:8px;
}

/* ===================== */
/*   PLANS / PROGRAM     */
/* ===================== */

.plan{ margin-top:var(--space-7); }

.plan-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.plan h2{
  font-size:1.25rem;
  color:#ffffff;
  text-shadow:0 1px 10px rgba(0,0,0,.22);
  letter-spacing:.2px;
}

/* ===================== */
/*      WEEK / DAYS      */
/* ===================== */

/* Week card */
.week-card{
  background:var(--card-2);
  border:1px solid var(--border-inv);
  border-radius:var(--radius);
  padding:14px;
  margin-top:8px;
  color:var(--text-inv);
  box-shadow:var(--shadow-1);
}
.week-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.week-title{
  color:#ffffff;
  font-weight:800;
  letter-spacing:.2px;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}

/* Progress */
.progress{ min-width:180px; text-align:right; }
.progress-bg{
  height:8px;
  background:#0e1d36;
  border-radius:8px;
  overflow:hidden;
}
.progress-fg{
  height:8px;
  background:var(--ok);
  border-radius:8px;
  width:0%;
  transition:width .35s ease;
}
.progress-text{ color:#a6bfdc; font-size:11px; margin-top:6px; }

/* Days */
.days{
  margin-top:10px;
  display:grid;
  gap:10px;
}
.day{
  background:var(--card-3);
  border:1px solid #21395f;
  border-radius:12px;
  padding:12px;
  color:var(--text-inv);
}
.day-title{
  color:#f3f7ff;
  font-weight:800;
  font-size:13px;
  margin-bottom:6px;
}
.details{
  color:#d6e6fb;
  font-size:13px;
  line-height:1.48;
}

/* ===================== */
/*        CHIPS          */
/* ===================== */

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
}
.chip{
  background:var(--chip);
  color:var(--chip-text);
  font-size:11px;
  font-weight:800;
  padding:4px 8px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(255,255,255,.06);
}

/* ===================== */
/*        BUTTONS        */
/* ===================== */

.cta-row{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  padding:11px 16px;
  border-radius:12px;
  background:#244474;              /* stronger default */
  color:#fff;
  font-weight:800;
  text-decoration:none;
  border:1px solid #2f548f;
  transition:transform .06s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.btn:hover{ filter:brightness(1.08); text-decoration:none; }
.btn:active{ transform:translateY(1px); }

.btn.primary{
  background:var(--ok);
  color:var(--ok-text);
  border-color:var(--ok);
  box-shadow:0 8px 22px rgba(34,197,94,.25);
}
.btn.primary:hover{
  filter:brightness(1.05);
  box-shadow:0 10px 26px rgba(34,197,94,.3);
}

.btn.secondary{
  background:#1f335a;
  color:#e9f1ff;
  border:1px solid #2e4a80;
  box-shadow:0 4px 14px rgba(13,30,66,.25) inset, 0 4px 16px rgba(0,0,0,.15);
}
.btn.secondary:hover{
  background:#274074;
  border-color:#3a63b6;
  box-shadow:0 4px 18px rgba(13,30,66,.28) inset, 0 6px 18px rgba(0,0,0,.18);
}

.btn.ghost{
  background:transparent;
  color:#294066;
  border:1px solid #2d4572;
}

/* Buttons inside pricing cards */
.card.pricing .btn.primary{
  background:#22c55e;
  color:#04140a;
  border-color:#22c55e;
  box-shadow:0 10px 24px rgba(34,197,94,.25);
}
.card.pricing .btn.primary:hover{
  filter:brightness(1.05);
  box-shadow:0 14px 28px rgba(34,197,94,.32);
}
.card.pricing .btn.secondary{
  background:#f2f5fb;
  color:#15315e;
  border:1px solid #cfe0f6;
  box-shadow:0 2px 0 rgba(0,0,0,.05);
}
.card.pricing .btn.secondary:hover{
  background:#e8eef9;
  border-color:#bcd2f0;
}

/* ===================== */
/*       ACCORDION       */
/* ===================== */

.week-acc{
  border:1px solid var(--border-inv);
  border-radius:var(--radius);
  background:var(--card-2);
  margin-top:8px;
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.week-acc[open]{ border-color:#2a4a80; }

.week-summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  padding:14px;
  background:#1a3566;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.week-summary::-webkit-details-marker{ display:none; }
.week-summary .week-title{
  color:#ffffff;
  font-weight:800;
}
.week-summary .caret{
  color:#e0ecff;
  transition:transform .2s ease;
}
.week-acc[open] .week-summary{ background:#1d3a70; }
.week-acc[open] .week-summary .caret{ transform:rotate(180deg); }

/* Remove extra border when nested */
.week-acc .week-card{
  border:0;
  border-radius:0;
  margin:0;
}

/* ===================== */
/*         LISTS         */
/* ===================== */

ul.list{
  text-align:left;
  margin:8px auto;
  padding-left:20px;
  max-width:720px;
}
ul.list li{
  margin:8px 0;
  color:var(--text-dim);
}

/* ===================== */
/*     PRICING BLOCK     */
/* ===================== */

.pricing{ gap:20px; }

/* Titles inside pricing cards */
.card.pricing h2{
  color:#0b1324;
  font-size:1.35rem;
  line-height:1.25;
  margin:4px 0 10px;
}

/* Price highlight inside pricing cards */
.card.pricing .price{
  color:#0b1324;
  font-weight:900;
}

/* Badge / pill */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:10px;
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  background:#e9fbf1;
  color:#0c8b52;
}
.badge.blue{   background:#e9f1ff; color:#1b59d4; }
.badge.green{  background:#e9fbf1; color:#0c8b52; }
.badge.purple{ background:#f2e9ff; color:#6a1b9a; }

.pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
  background:#0ea36b;
  color:#041018;
}

/* Features list */
.card.pricing .features{
  list-style:none;
  margin:12px 0 16px;
  padding:0;
}
.card.pricing .features li{
  position:relative;
  padding-left:28px;
  margin:10px 0;
  color:#334155;
  line-height:1.5;
}
.card.pricing .features li::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:18px; height:18px;
  border-radius:50%;
  background:#e9fbf1;
  border:1px solid #b9efd4;
  box-shadow:inset 0 0 0 2px #22c55e;
}

/* CTA row in pricing */
.card.pricing .cta-row{ margin-top:14px; }
.card.pricing .cta-row .btn{ min-width:44%; }

/* ===================== */
/*       UTILITIES       */
/* ===================== */

.bubble{
  display:inline-block;
  background:#0D1326;
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(43,99,207,.25);
}

/* ===================== */
/*       RESPONSIVE      */
/* ===================== */

@media (max-width:760px){
  .wrap{
    margin:7vh auto 4vh;
    padding:0 14px;
  }
  .card{
    padding:28px 20px;
    border-radius:16px;
  }
  h1{ font-size:1.9rem; }
  .plan-head{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .progress{ min-width:140px; }

  .jg-header{ grid-template-columns:auto 1fr auto; }

  .jg-nav{
    position:absolute;
    top:56px;
    right:12px;
    background:#14294bf2;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:10px 12px;
    display:none;
    flex-direction:column;
    gap:10px;
  }
  .jg-nav.open{ display:flex; }
  .jg-burger{ display:inline-block; }
}

/* ===================== */
/*   REDUCED MOTION      */
/* ===================== */

@media (prefers-reduced-motion: reduce){
  .progress-fg,
  .btn{
    transition:none;
  }
  .btn:active{
    transform:none;
  }
}

/* ===================== */
/*         PRINT         */
/* ===================== */

@media print{
  body{
    background:#fff;
    color:#000;
  }
  .card,
  .week-card,
  .day{
    box-shadow:none;
    border:1px solid #cfd7e3;
    background:#fff;
    color:#000;
  }
  a{
    color:#0b6cff;
    text-decoration:underline;
  }
  .logo,.logo.sm{ filter:none; }
}

/* ===================== */
/*   OPTIONAL TWEAKS     */
/*  (Light navy lift)    */
/* ===================== */

/* Slightly lighter navy for weeks/days when used on dark pages */
.week-card{ background:var(--card-2); border-color:#274a81; }
.day      { background:var(--card-3); border-color:#21426f; }
.day-title{ color:#f8fbff; }
.details  { color:#d8e6fb; }
/* === Oppdatert plan-tittel og undertekst === */
.plan h2 {
  display: inline-block;
  background: #0f172a;        /* mørk blå boble */
  color: #fff;                /* hvit tekst */
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.sub {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 500;
  color: #334155;             /* tydelig blågrå */
  opacity: 0.95;
}
/* Hero – BOBLE-VARIANT (bruk .hero--bubble + wrapper .logo-bubble) */
.hero--bubble .logo-bubble {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  padding: 20px;
  background: radial-gradient(circle at center,
    rgba(255,255,255,0.9) 0%,
    rgba(120,160,210,0.35) 40%,
    rgba(18,34,70,0.95) 100%);
  box-shadow:
    0 0 35px rgba(18,34,70,0.7),
    0 8px 20px rgba(0,0,0,0.35),
    inset 0 4px 12px rgba(255,255,255,0.15);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.hero--bubble .logo-bubble:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 45px rgba(18,34,70,0.8),
    0 10px 24px rgba(0,0,0,0.45),
    inset 0 5px 14px rgba(255,255,255,0.2);
}
.hero--bubble .logo-bubble img.logo.sm {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

/* Hero – PLAIN-VARIANT (bruk .hero--plain når du vil ha ren logo) */
.hero--plain .logo.sm{
  width: 80px;
  height: auto;
  margin-bottom: 10px;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}
/* Personvernerklæring panel — alltid lys for lesbarhet */
.privacy-hero {
  max-width: 760px;
  margin: 8vh auto 28px;
  background: #ffffff;
  color: #0b1324;
  padding: 32px 22px 28px;
  border: 1px solid #e6edf6;
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(2,19,40,.20);
  text-align: center;
}

.privacy-hero h1 {
  margin: 8px 0 16px;
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 800;
  color: #0b1324;
}

.privacy-hero p,
.privacy-hero li {
  color: #334155;   /* tydelig blågrå på hvitt */
  font-size: 1rem;
  line-height: 1.55;
}

.privacy-hero strong {
  color: #0b1324;   /* gjør nøkkelord ekstra tydelige */
}
/* === FIX: Personvernerklæring lesbarhet === */
.card.privacy p,
.card.privacy li {
  color: var(--text-dim-inv) !important;   /* lys blågrå på mørk bakgrunn */
}
.card.privacy strong {
  color: #ffffff !important;               /* hvit for tydelig nøkkelord */
}

/* === FIX: Checkout logo-boble === */
.hero.hero--checkout .logo.sm {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 14px;
  display: block;
  z-index: 1;
}

.hero.hero--checkout .logo.sm::after {
  content: "";
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255,255,255,0.3) 0%,
    rgba(124,221,255,0.2) 40%,
    rgba(20,41,75,0.95) 100%);
  box-shadow:
    0 12px 30px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.18);
  z-index: -1;
}