/* ==========================================================================
   Teen guide pages: late layer
   --------------------------------------------------------------------------
   Extracted verbatim from the inline <style> blocks of teenager-guides.html
   so that the individual guide pages under /guides/teens/ can share one
   cached copy instead of carrying 54 KB of inline CSS each.

   Load order on a guide page must match the hub exactly, or the cascade
   changes:

     guide-teens-base.css  ->  rebrand.css  ->  guide-teens-layer.css
     ->  podcast-wow.css  ->  premium.css  ->  a11y-contrast.css

   Do not reorder. Do not edit this file by hand; edit the hub and re-extract.
   ========================================================================== */

/* Guide chooser: chip row on desktop, single dropdown on mobile */
.guide-chooser-toggle{ display:none; }
@media (max-width:700px){
  .guide-chooser-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; max-width:440px; margin:0 auto 16px; cursor:pointer;
    font-family:inherit; font-size:14px; font-weight:600; color:var(--mid);
    background:#FBE0EE; border:1px solid #F4C4DD; border-radius:18px;
    padding:15px 22px; text-align:left;
  }
  .guide-chooser-toggle .gct-caret{ transition:transform .25s ease; font-size:12px; }
  .guide-chooser-toggle[aria-expanded="true"] .gct-caret{ transform:rotate(180deg); }
  .guide-chooser{
    display:none !important; flex-direction:column !important; flex-wrap:nowrap !important;
    align-items:stretch !important; justify-content:flex-start !important; gap:8px !important;
    width:100% !important; max-width:440px !important; margin:0 auto 60px !important;
    padding:14px !important; max-height:62vh; overflow-y:auto; text-align:left;
  }
  .guide-chooser.open{ display:flex !important; }
  .guide-chooser a{ display:block; }
}

/* ===== Joyful colour layer, warmer, brighter & more uplifting site wide ===== */
:root{
  --cream:#FBF1F7;            /* sunnier, warmer cream */
  --accent:#6E5DC6;          /* brighter, happier violet */
  --accent-light:#ECE7FA;
  --jc1:#E57BA6; --jc1-l:#FBE5F0;  /* rose pink    */
  --jc2:#D973C2; --jc2-l:#F8E5F3;  /* orchid pink  */
  --jc3:#B07FDD; --jc3-l:#EFE6FA;  /* lilac        */
  --jc4:#9579D2; --jc4-l:#EAE3F8;  /* soft violet  */
  --jc5:#E589C0; --jc5-l:#FAE6F2;  /* magenta pink */
  --jc6:#8A66CC; --jc6-l:#ECE5F8;  /* deep violet  */
}

/* Cheerful, sunlit announcement bar */
.marquee-bar{ background:linear-gradient(90deg,#D85BA0,#C158B8 33%,#9E5BD0 66%,#7E5BC4)!important; color:#fff!important; text-shadow:0 1px 2px rgba(0,0,0,.22); }

/* Warm sunrise wash behind every hero */
.hero, .sup-hero{ background:linear-gradient(160deg,var(--jc2-l) 0%, var(--cream) 44%, var(--jc6-l) 100%)!important; }

/* Friendly, sunny call-to-action buttons */
.nav-cta, .tcta-arrow{ background:linear-gradient(135deg,var(--jc2),var(--jc1))!important; color:var(--charcoal)!important; border-radius:100px; }

/* Rotating, cheerful accent stripe across card grids */
.sup-card,.topic-card,.resource-card,.truth-card,.video-card,.tool-card{ background:var(--jc2-l) !important; border-top:4px solid var(--jc2); }
.sup-card:nth-of-type(6n+1),.topic-card:nth-of-type(6n+1),.resource-card:nth-of-type(6n+1),.truth-card:nth-of-type(6n+1),.video-card:nth-of-type(6n+1),.tool-card:nth-of-type(6n+1){ border-top-color:var(--jc1); }
.sup-card:nth-of-type(6n+2),.topic-card:nth-of-type(6n+2),.resource-card:nth-of-type(6n+2),.truth-card:nth-of-type(6n+2),.video-card:nth-of-type(6n+2),.tool-card:nth-of-type(6n+2){ border-top-color:var(--jc2); }
.sup-card:nth-of-type(6n+3),.topic-card:nth-of-type(6n+3),.resource-card:nth-of-type(6n+3),.truth-card:nth-of-type(6n+3),.video-card:nth-of-type(6n+3),.tool-card:nth-of-type(6n+3){ border-top-color:var(--jc3); }
.sup-card:nth-of-type(6n+4),.topic-card:nth-of-type(6n+4),.resource-card:nth-of-type(6n+4),.truth-card:nth-of-type(6n+4),.video-card:nth-of-type(6n+4),.tool-card:nth-of-type(6n+4){ border-top-color:var(--jc4); }
.sup-card:nth-of-type(6n+5),.topic-card:nth-of-type(6n+5),.resource-card:nth-of-type(6n+5),.truth-card:nth-of-type(6n+5),.video-card:nth-of-type(6n+5),.tool-card:nth-of-type(6n+5){ border-top-color:var(--jc5); }

/* Six circles in the "exactly who you are" section.
   These were a heart-shaped clip-path, but clip-path cuts the border off
   at the element's rectangle, so the pink outline was being clipped away
   and the cards read as flat paper hearts. A circle needs no clip-path:
   border-radius:50% rounds the border and the box-shadow with it.

   Scoped body .topics .topic-grid .topic-card - (0,3,1) - because
   premium.css pins border-radius, background and border on
   body .topic-grid .topic-card at (0,2,1) !important. The extra
   .topics step is what clears it, and it keeps the change on this
   page: the women's guide topic cards stay rectangular. */
.topics-inner{ max-width:1140px !important; }
.topic-grid{ gap:34px 26px !important; }

body .topics .topic-grid .topic-card{
  clip-path:none !important;
  border:2px solid #D6547C !important;
  border-top:2px solid #D6547C !important;
  border-radius:50% !important;
  aspect-ratio:1 / 1;
  min-height:300px;
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  /* 17% each side leaves a text column 66% of the diameter; a block that
     wide sits inside the circle up to 0.73d tall, and the tallest card
     needs 0.45d, so nothing touches the stroke. */
  padding:17% !important;
  box-shadow:0 14px 26px -16px rgba(122,43,82,.42) !important;
  /* rebrand.css nudges every even card down 8px, but premium's hover sets
     translateY(-3px) !important, so even cards jumped 11px on hover. */
  transform:none !important;
  transition:transform .26s cubic-bezier(.22,.61,.36,1),
             box-shadow .26s cubic-bezier(.22,.61,.36,1) !important;
}

body .topics .topic-grid .topic-card:nth-child(1){ background:linear-gradient(160deg,#F6CFDF,#EB98BA) !important; }
body .topics .topic-grid .topic-card:nth-child(2){ background:linear-gradient(160deg,#F1CDE9,#E192CF) !important; }
body .topics .topic-grid .topic-card:nth-child(3){ background:linear-gradient(160deg,#E3D1F3,#C19BE4) !important; }
body .topics .topic-grid .topic-card:nth-child(4){ background:linear-gradient(160deg,#D9CFEF,#AC96DC) !important; }
body .topics .topic-grid .topic-card:nth-child(5){ background:linear-gradient(160deg,#F6D5E8,#EBA3CE) !important; }
body .topics .topic-grid .topic-card:nth-child(6){ background:linear-gradient(160deg,#D5C8ED,#A488D7) !important; }

body .topics .topic-grid .topic-card:hover{
  transform:translateY(-5px) scale(1.02) !important;
  box-shadow:0 22px 34px -16px rgba(122,43,82,.5) !important;
  border-color:#B02E52 !important;
}

body .topics .topic-grid .topic-card h3{
  color:#4A1230 !important; font-size:1.12rem !important;
  line-height:1.18 !important; margin-bottom:9px !important;
}
body .topics .topic-grid .topic-card p{
  color:#4A1230 !important; font-size:13.5px !important; line-height:1.46 !important;
}

/* A 3-up grid drops below the 300px min-height at about 1258px wide, and a
   300px-tall box in a 250px column is an ellipse, not a circle. Two columns
   from 1060px down keeps every circle at 347px or wider. */
@media (max-width:1060px) and (min-width:801px){
  .topic-grid{ grid-template-columns:repeat(2, 1fr) !important; }
}

/* Pink circular cards in the "A few things that are true" section */
.truth-grid{ gap:32px 28px !important; }
.truth-card{
  background:linear-gradient(160deg,#FBE5F0 0%, #F3A8CB 100%) !important;
  border-top:none !important;
  border-radius:50% !important;
  clip-path:none;
  aspect-ratio:1 / 1;
  min-height:340px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:72px 54px !important;
  filter:drop-shadow(0 14px 22px rgba(110,95,142,.16));
}
.truth-card h3{ color:#7A2B52 !important; font-size:1.08rem !important; line-height:1.18 !important; margin-bottom:10px !important; max-width:230px; }
.truth-card p{ color:#8C3A66 !important; font-size:12.5px !important; line-height:1.46 !important; max-width:250px; }

@media (max-width: 800px) {
  body .topics .topic-grid .topic-card{
    width:min(100%, 380px);
    min-height:0 !important;
    margin:0 auto;
    padding:16% !important;
  }
  .truth-card{
    width:min(100%, 380px);
    min-height:340px;
    margin:0 auto;
    padding:70px 54px !important;
  }
}

/* Colourful left edge on the resource list items */
.res-item{ border-left:4px solid var(--jc3); }
.res-item:nth-of-type(5n+1){ border-left-color:var(--jc1); }
.res-item:nth-of-type(5n+2){ border-left-color:var(--jc2); }
.res-item:nth-of-type(5n+3){ border-left-color:var(--jc4); }
.res-item:nth-of-type(5n+4){ border-left-color:var(--jc5); }
.res-item:nth-of-type(5n+5){ border-left-color:var(--jc6); }

/* Sunny, encouraging info boxes on the guides */
.why-box{ background:var(--jc2-l)!important; border-left:4px solid var(--jc2); }
.say-line{ background:var(--jc4-l)!important; border-left:3px solid var(--jc4); }

/* Soft lilac glow on the mission section */
.mission{ background:linear-gradient(180deg,#ffffff 0%, var(--jc6-l) 100%); }

/* Pink, rounded guides-index panel with white pills */
.guides-intro nav a{ background:#fff !important; border:1px solid #F4C4DD !important; }
.guides-intro nav{ margin:0 auto 72px !important; }

/* Cheerful rainbow edge along the dark sections */
.founder-note, footer{ position:relative; }
.founder-note::after, footer::after{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--jc1),var(--jc2),var(--jc5),var(--jc3),var(--jc4),var(--jc6)); }