/* ============================================================================
   TOTSNAME — CELEBRITY DETAIL PAGE
   ----------------------------------------------------------------------------
   Loaded ONLY on /celebrity-baby-names/:slug/ (celebrityController sends
   pageCss:'celebrity-detail'). Scoped under .celeb-dtl so nothing here can
   reach any other page and style.css needs no edit.

   SECOND CORRECTION: the previous revision matched container width, font
   stack, card radius/shadow and the H1 -- but still used the SITEWIDE
   .badge/.badge-girl/.badge-boy/.badge-origin classes and the sitewide
   .an-go/.alpha-more action classes. Those are current and dark-mode-aware,
   but they are NOT what views/name.ejs itself uses for its own metadata
   chips and actions: Name Detail has its own, more prominent .ndp-tag chip
   system (30px tall, 15px padding, 13px/600 text) and its own .ndp-btn/
   "view all"-style link (42px solid pink pill / 13px pink text link) --
   visually distinct from (smaller/plainer than) the generic sitewide system.
   That gap is why the page still read as the old design in spite of the
   corrected typography/cards. This revision matches THOSE specific classes'
   measured values instead, under this page's own scope/tokens -- still no
   shared classes or variables with name-detail.css itself.
   ========================================================================== */

.celeb-dtl{
  --cd-ink:#102A6B;
  --cd-ink-2:#334B78;
  --cd-crumb:#52678F;
  --cd-border:#E4EAF3;
  --cd-white:#FFFFFF;
  --cd-page:var(--cream, #FFFCF8);
  --cd-shadow:0 2px 10px rgba(16,42,107,0.04);
  --cd-r-card:16px;

  --cd-meaning-bg:#FFFAF0;   --cd-meaning-bd:#F5E7D0;
  --cd-chosen-bg:#FFF5FA;   --cd-chosen-bd:#F5DDE9;

  /* Name Detail's own chip colours (.ndp-tag), by slot -- not the smaller,
     plainer sitewide .badge system. */
  --cd-pink:#E7207B; --cd-pink-hover:#D9186D;
  --cd-t-gender-bg:#EAF6FF; --cd-t-gender-fg:#1677D2;
  --cd-t-girl-bg:#FFF0F6;   --cd-t-girl-fg:#B91F6B;
  --cd-t-origin-bg:#FFF4E8; --cd-t-origin-fg:#A84B22;

  /* Mandatory, locked celebrity-name colour: hot pink in light mode, aqua
     marine in dark. Its own token, not reused elsewhere, so it can't drift
     if either theme's brand accent changes later. */
  --cd-name-color:#FF69B4;

  background:var(--cd-page);
  color:var(--cd-ink-2);
  font-family:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:20px 0 60px;
}
.celeb-dtl *{ box-sizing:border-box; }

[data-theme="dark"] .celeb-dtl{
  --cd-ink:#DCE7FF;
  --cd-ink-2:#B9C6DF;
  --cd-crumb:#8FA1BF;
  --cd-border:#26344D;
  --cd-white:#121C2E;
  --cd-page:#0B1220;
  --cd-shadow:none;
  --cd-meaning-bg:#211D18;  --cd-meaning-bd:#3A3328;
  --cd-chosen-bg:#211722;  --cd-chosen-bd:#3B2935;
  --cd-pink:#F02A83; --cd-pink-hover:#FF3D91;
  --cd-t-gender-bg:#142A42; --cd-t-gender-fg:#63B4FF;
  --cd-t-girl-bg:#351C29;   --cd-t-girl-fg:#FF7BA9;
  --cd-t-origin-bg:#332719; --cd-t-origin-fg:#F2B77C;
  --cd-name-color:#2DD4BF;
}

/* ---- Container: matches .ndp-wrap ---- */
.celeb-dtl-wrap{ max-width:960px; margin:0 auto; padding:0 32px; }

/* ---- Breadcrumb: matches .ndp-crumb typography ---- */
.celeb-dtl-crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  min-height:24px; font-size:12px; font-weight:500; color:var(--cd-crumb); margin:0 0 12px;
}
.celeb-dtl-crumb a{ color:var(--cd-crumb); text-decoration:none; }
.celeb-dtl-crumb a:hover{ color:var(--cd-pink); text-decoration:underline; }
.celeb-dtl-crumb strong{ color:var(--cd-ink-2); font-weight:600; }
.celeb-dtl-sep{ color:#9BAAC6; }

/* ---- Name hero: matches .ndp h1.ndp-name's size steps/weight/family ---- */
.celeb-dtl-head{ margin-bottom:2px; }
.celeb-dtl-name{
  font-family:inherit; font-size:56px; line-height:1.05; font-weight:700;
  letter-spacing:-1px; margin:0 0 10px;
  /* Locked requirement. !important is required for the same reason
     name-detail.css states for its own H1: style.css ends with a global
     sweep (h1,h2,h3,...{color:...!important}) that would otherwise repaint
     this heading a different colour regardless of the rule above. */
  background:none !important;
  -webkit-text-fill-color:var(--cd-name-color) !important;
  color:var(--cd-name-color) !important;
}

/* ---- Metadata chips: matches .ndp-tag exactly (30px tall, 15px padding,
       13px/600 text) -- NOT the smaller sitewide .badge system. ---- */
.celeb-dtl-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }
.celeb-dtl-tag{
  display:inline-flex; align-items:center; height:30px; padding:0 15px;
  border-radius:15px; font-size:13px; font-weight:600;
  background:var(--cd-t-gender-bg); color:var(--cd-t-gender-fg);
}
.celeb-dtl-tag.is-girl{ background:var(--cd-t-girl-bg); color:var(--cd-t-girl-fg); }
.celeb-dtl-tag.t-origin{ background:var(--cd-t-origin-bg); color:var(--cd-t-origin-fg); }

/* ---- Card system: matches .ndp-card / .ndp-meaning (solid tint, not
       gradient; 16px radius; subtle shadow) ---- */
.celeb-dtl-card{
  margin-top:16px;
  padding:20px;
  border:1px solid var(--cd-border);
  border-radius:var(--cd-r-card);
  box-shadow:var(--cd-shadow);
}
.celeb-dtl-card.is-meaning{ background:var(--cd-meaning-bg); border-color:var(--cd-meaning-bd); }
.celeb-dtl-card.is-chosen { background:var(--cd-chosen-bg);  border-color:var(--cd-chosen-bd); }

.celeb-dtl-label{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--cd-crumb); margin:0 0 6px;
}
.celeb-dtl-value{
  font-family:inherit; font-size:28px; font-weight:700; line-height:1.2;
  letter-spacing:-.4px; color:var(--cd-ink); margin:2px 0 0; overflow-wrap:anywhere;
}

/* ---- Actions: matches .ndp-btn (solid 42px pink pill) and the
       "View All" .ndp-more link (13px/600 pink text) -- NOT the sitewide
       .an-go/.alpha-more classes. ---- */
.celeb-dtl-actions{ margin-top:28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.celeb-dtl-btn{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 22px;
  border:none; border-radius:21px; cursor:pointer; text-decoration:none;
  background:var(--cd-pink); color:#fff !important;
  font-family:inherit; font-size:14px; font-weight:600;
  transition:background .18s;
}
.celeb-dtl-btn:hover{ background:var(--cd-pink-hover); }
.celeb-dtl-more{
  font-size:13px; font-weight:600; color:var(--cd-pink);
  text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
}
.celeb-dtl-more:hover{ text-decoration:underline; }

/* ---- Hero actions (Pronounce/Share): matches Name Detail's own .ndp-act
       pill exactly (30px tall, 13px padding, 15px radius, 13px/600 text). ---- */
.celeb-dtl-hero-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.celeb-dtl-act{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 13px;
  border-radius:15px; border:1px solid var(--cd-border); background:var(--cd-white);
  color:var(--cd-ink-2); font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:color .18s, border-color .18s, background .18s;
}
.celeb-dtl-act:hover{ color:var(--cd-ink); border-color:#C9D6EA; }
[data-theme="dark"] .celeb-dtl-act:hover{ color:#F1F5FF; border-color:#3B4C6E; }
.celeb-dtl-act.is-speaking{ background:var(--cd-t-gender-bg); color:var(--cd-t-gender-fg); border-color:transparent; }
.celeb-dtl-act.celeb-dtl-save.is-saved{ background:var(--cd-t-girl-bg); color:var(--cd-t-girl-fg); border-color:transparent; }

/* ---- Celebrity Snapshot card: reuses the same card system, plain label/
       value rows rather than a gradient/prose card since this is factual
       key-value data. ---- */
.celeb-dtl-snap{ margin:6px 0 0; display:flex; flex-direction:column; gap:0; }
.celeb-dtl-snap-row{
  display:flex; justify-content:space-between; gap:14px; padding:9px 0;
  border-bottom:1px solid var(--cd-border); font-size:14px;
}
.celeb-dtl-snap-row:last-child{ border-bottom:none; }
.celeb-dtl-snap-row dt{ color:var(--cd-crumb); font-weight:500; margin:0; }
.celeb-dtl-snap-row dd{ color:var(--cd-ink); font-weight:600; margin:0; text-align:right; }

/* ---- Baby Name bridge card ---- */
.celeb-dtl-bridge-copy{ font-size:14px; color:var(--cd-ink-2); margin:2px 0 10px; }

/* ---- Discovery sections (related / category / origin) ---- */
.celeb-dtl-discover{ margin-top:32px; }
.celeb-dtl-discover-h{
  font-family:inherit; font-size:20px; font-weight:700; color:var(--cd-ink);
  margin:0 0 14px;
}
.celeb-dtl-discover-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px;
}
.celeb-dtl-rel-card{
  display:flex; flex-direction:column; gap:4px; padding:14px 16px;
  border:1px solid var(--cd-border); border-radius:var(--cd-r-card);
  background:var(--cd-white); box-shadow:var(--cd-shadow);
  text-decoration:none; transition:transform .18s, box-shadow .18s;
}
.celeb-dtl-rel-card:hover{ transform:translateY(-2px); }
.celeb-dtl-rel-name{ font-family:inherit; font-size:18px; font-weight:700; color:var(--cd-ink); }
.celeb-dtl-rel-meta{ font-size:11.5px; color:var(--cd-crumb); text-transform:uppercase; letter-spacing:.05em; }
.celeb-dtl-discover-origin{ margin-top:20px; }

/* ---- FAQ accordion: matches Name Detail's own .ndp-faq typography/spacing
       (13px/500 summary, 13px/1.6 answer text, bordered rows) without
       importing its classes or SVG icon. A CSS-only +/- indicator replaces
       the SVG chevron so no icon markup is duplicated. ---- */
.celeb-dtl-faq-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.celeb-dtl-faq-list details{
  background:var(--cd-white); border:1px solid var(--cd-border); border-radius:10px; overflow:hidden;
}
.celeb-dtl-faq-list summary{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  min-height:42px; padding:12px; font-size:13px; font-weight:500; color:var(--cd-ink); line-height:1.4;
}
.celeb-dtl-faq-list summary::-webkit-details-marker{ display:none; }
.celeb-dtl-faq-list summary::after{ content:'+'; margin-left:auto; color:var(--cd-crumb); font-size:16px; }
.celeb-dtl-faq-list details[open] summary::after{ content:'\2013'; }
.celeb-dtl-faq-list details p{ margin:0; padding:0 12px 12px; font-size:13px; line-height:1.6; color:var(--cd-ink-2); }

@media (max-width:899px){
  .celeb-dtl-name{ font-size:40px; }
}
@media (max-width:599px){
  .celeb-dtl-wrap{ padding:0 16px; }
  .celeb-dtl-name{ font-size:36px; }
  .celeb-dtl-card{ padding:16px; }
  .celeb-dtl-value{ font-size:24px; }
  .celeb-dtl-btn{ width:100%; justify-content:center; }
  .celeb-dtl-discover-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .celeb-dtl-snap-row{ font-size:13px; }
}