/* ============================================================
   PersonaBlocks — shared site theme + cookie-consent styles
   Loaded on every www page. Defines the LIGHT (default) and
   DARK theme token sets, the theme-toggle button, and the
   cookie-consent banner / preferences modal / relauncher.
   Page-specific layout CSS lives inline per page and only
   references the tokens below.
   ============================================================ */

/* ---- LIGHT (default): Editorial Ivory + Yale (EMBA) blue ---- */
:root {
  --bg: #f8f5ee;
  --bg-2: #fdfbf6;
  --surface: #fdfbf6;
  --surface-2: #f3efe5;
  --grid-line: rgba(26,36,54,0.018);
  --ink: #1a2436;
  --ink-soft: #2b3650;
  --muted: #5d6677;
  --faint: #8a8f9c;
  --accent: #0F4D92;            /* Yale blue — accent words, eyebrows, icon strokes */
  --cta-bg: #0F4D92;
  --cta-bg-hover: #1560B0;
  --cta-text: #ffffff;
  --navcta-bg: #0F4D92;
  --navcta-bg-hover: #1560B0;
  --navcta-border: #0F4D92;
  --navcta-text: #ffffff;
  --navcta-shadow: 0 4px 14px rgba(15,77,146,0.20);
  --nav-bg: rgba(248,245,238,0.82);
  --nav-border: rgba(26,36,54,0.07);
  --hairline: rgba(26,36,54,0.12);
  --hairline-soft: rgba(26,36,54,0.07);
  --ghost-num: rgba(26,36,54,0.07);
  --timeline: rgba(15,77,146,0.32);
  --dot-bg: #0F4D92;
  --dot-border: var(--bg);
  --dot-glow: rgba(15,77,146,0.40);
  --icon-bg: linear-gradient(145deg, #ffffff, #f3efe5);
  --icon-border: rgba(15,77,146,0.16);
  --icon-shadow: 0 10px 26px rgba(15,77,146,0.09), 0 1px 2px rgba(26,36,54,0.06);
  --icon-shadow-hover: 0 14px 34px rgba(15,77,146,0.18), 0 1px 2px rgba(26,36,54,0.06);
  --ghost-bg: #fdfbf6;
  --ghost-border: rgba(26,36,54,0.12);
  --ghost-text: #1a2436;
  --ghost-border-hover: rgba(26,36,54,0.28);
  --btn-shadow: 0 6px 20px rgba(15,77,146,0.22), 0 1px 2px rgba(15,77,146,0.18);
  --btn-shadow-hover: 0 8px 26px rgba(15,77,146,0.30), 0 1px 2px rgba(15,77,146,0.20);
  --field-bg: #f3efe5;
  --field-bg-focus: #ffffff;
  --field-border: rgba(26,36,54,0.12);
  --field-text: #1a2436;
  --placeholder: #8a8f9c;
  --focus-border: rgba(15,77,146,0.55);
  --focus-ring: 0 0 0 3px rgba(15,77,146,0.13);
  --card-shadow: 0 18px 50px rgba(26,36,54,0.08), 0 2px 6px rgba(26,36,54,0.04);
  --pill-bg: #fdfbf6;
  --pill-shadow: 0 2px 10px rgba(26,36,54,0.05);
  --green: #0f9d6b;
  --error: #d33a32;
  --beta-tag: rgba(255,255,255,0.78);
  --scrim: rgba(20,28,44,0.45);
  --cc-shadow: 0 -8px 30px rgba(26,36,54,0.10);
  --modal-shadow: 0 30px 80px rgba(20,28,44,0.30);
}

/* ---- DARK: the original navy theme ---- */
html[data-theme="dark"] {
  --bg: #0a1f44;
  --bg-2: #0d2b5e;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.05);
  --grid-line: rgba(255,255,255,0.025);
  --ink: #ffffff;
  --ink-soft: #e8eefc;
  --muted: rgba(255,255,255,0.6);
  --faint: rgba(255,255,255,0.4);
  --accent: #bfdbfe;
  --cta-bg: #2563eb;
  --cta-bg-hover: #3b82f6;
  --cta-text: #ffffff;
  --navcta-bg: rgba(255,255,255,0.08);
  --navcta-bg-hover: rgba(255,255,255,0.14);
  --navcta-border: rgba(255,255,255,0.15);
  --navcta-text: #ffffff;
  --navcta-shadow: none;
  --nav-bg: rgba(10,31,68,0.88);
  --nav-border: rgba(255,255,255,0.06);
  --hairline: rgba(255,255,255,0.10);
  --hairline-soft: rgba(255,255,255,0.06);
  --ghost-num: rgba(191,219,254,0.09);
  --timeline: rgba(96,165,250,0.40);
  --dot-bg: #0a1f44;
  --dot-border: #3b82f6;
  --dot-glow: rgba(96,165,250,0.55);
  --icon-bg: linear-gradient(145deg, rgba(37,99,235,0.22), rgba(37,99,235,0.06));
  --icon-border: rgba(59,130,246,0.30);
  --icon-shadow: 0 8px 28px rgba(37,99,235,0.18);
  --icon-shadow-hover: 0 12px 36px rgba(37,99,235,0.30);
  --ghost-bg: transparent;
  --ghost-border: rgba(255,255,255,0.12);
  --ghost-text: rgba(255,255,255,0.6);
  --ghost-border-hover: rgba(255,255,255,0.25);
  --btn-shadow: none;
  --btn-shadow-hover: none;
  --field-bg: rgba(255,255,255,0.05);
  --field-bg-focus: rgba(255,255,255,0.05);
  --field-border: rgba(255,255,255,0.10);
  --field-text: #ffffff;
  --placeholder: rgba(255,255,255,0.25);
  --focus-border: rgba(59,130,246,0.50);
  --focus-ring: 0 0 0 3px rgba(59,130,246,0.18);
  --card-shadow: none;
  --pill-bg: rgba(255,255,255,0.06);
  --pill-shadow: none;
  --green: #10b981;
  --error: #ef4444;
  --beta-tag: #10b981;
  --scrim: rgba(0,0,0,0.6);
  --cc-shadow: 0 -8px 30px rgba(0,0,0,0.35);
  --modal-shadow: 0 30px 80px rgba(0,0,0,0.55);
}

/* Smooth the cross-fade when toggling themes (not on first paint). */
html.pb-theme-ready body,
html.pb-theme-ready nav,
html.pb-theme-ready .pb-cc-banner,
html.pb-theme-ready .pb-cc-modal { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }

/* ============================================================
   Theme toggle button
   ============================================================ */
.pb-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 8px;
  background: transparent; border: 1px solid var(--hairline);
  color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.pb-theme-toggle:hover { background: var(--surface); border-color: var(--ghost-border-hover); }
.pb-theme-toggle svg { width: 18px; height: 18px; display: block; }
.pb-theme-toggle .pb-icon-sun { display: none; }
.pb-theme-toggle .pb-icon-moon { display: block; }
html[data-theme="dark"] .pb-theme-toggle .pb-icon-moon { display: none; }
html[data-theme="dark"] .pb-theme-toggle .pb-icon-sun { display: block; }

/* ============================================================
   Cookie consent — banner
   ============================================================ */
.pb-cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;
  padding: 20px 28px;
  background: var(--nav-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--nav-border); box-shadow: var(--cc-shadow);
  transform: translateY(110%); transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.pb-cc-banner.pb-show { transform: none; }
.pb-cc-banner__text { font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 720px; }
.pb-cc-banner__text strong { color: var(--ink); font-weight: 600; }
.pb-cc-banner__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.pb-cc-banner__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Buttons (shared by banner + modal) */
.pb-cc-btn {
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  padding: 11px 18px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.pb-cc-btn--primary { background: var(--cta-bg); color: var(--cta-text); box-shadow: var(--btn-shadow); }
.pb-cc-btn--primary:hover { background: var(--cta-bg-hover); box-shadow: var(--btn-shadow-hover); }
.pb-cc-btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.pb-cc-btn--ghost:hover { border-color: var(--ghost-border-hover); background: var(--surface); }
.pb-cc-btn--link {
  background: transparent; border: none; color: var(--accent); padding: 11px 6px;
  text-decoration: underline; text-underline-offset: 2px; font-weight: 500;
}
.pb-cc-btn--link:hover { color: var(--cta-bg-hover); }

/* ============================================================
   Cookie consent — preferences modal
   ============================================================ */
.pb-cc-overlay {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.pb-cc-overlay.pb-show { opacity: 1; pointer-events: auto; }
.pb-cc-modal {
  width: 100%; max-width: 640px; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); border: 1px solid var(--hairline);
  border-radius: 18px; box-shadow: var(--modal-shadow);
  transform: translateY(14px) scale(.99); transition: transform .25s ease;
}
.pb-cc-overlay.pb-show .pb-cc-modal { transform: none; }
.pb-cc-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 24px 26px 16px; border-bottom: 1px solid var(--hairline-soft);
}
.pb-cc-modal__head h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 600; color: var(--ink); }
.pb-cc-modal__head p { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-top: 6px; }
.pb-cc-modal__head p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.pb-cc-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; border: none; cursor: pointer;
  background: var(--surface-2); color: var(--muted); font-size: 16px; line-height: 1; transition: background .2s, color .2s;
}
.pb-cc-close:hover { background: var(--field-bg); color: var(--ink); }
.pb-cc-modal__body { overflow-y: auto; padding: 8px 26px; }

.pb-cc-cat { padding: 18px 0; border-bottom: 1px solid var(--hairline-soft); }
.pb-cc-cat:last-child { border-bottom: none; }
.pb-cc-cat__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pb-cc-cat__title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pb-cc-cat__count { font-size: 12px; font-weight: 500; color: var(--faint); }
.pb-cc-cat__desc { font-size: 12.5px; line-height: 1.65; color: var(--muted); margin-top: 8px; max-width: 60ch; }
.pb-cc-details {
  background: none; border: none; cursor: pointer; padding: 0; margin-top: 10px;
  font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.pb-cc-details-panel { display: none; margin-top: 12px; padding: 12px 14px; background: var(--surface-2); border-radius: 10px; }
.pb-cc-details-panel.pb-open { display: block; }
.pb-cc-cookie { font-size: 12px; line-height: 1.6; color: var(--muted); padding: 4px 0; }
.pb-cc-cookie b { color: var(--ink); font-weight: 600; }
.pb-cc-cookie--empty { font-style: italic; }

/* Toggle switch */
.pb-cc-switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; }
.pb-cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pb-cc-switch .pb-track {
  position: absolute; inset: 0; border-radius: 99px; background: var(--field-border); transition: background .2s;
}
.pb-cc-switch .pb-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s;
}
.pb-cc-switch input:checked + .pb-track { background: var(--accent); }
.pb-cc-switch input:checked + .pb-track::after { transform: translateX(18px); }
.pb-cc-switch input:disabled { cursor: not-allowed; }
.pb-cc-switch input:disabled + .pb-track { background: var(--accent); opacity: 0.5; }
.pb-cc-switch input:focus-visible + .pb-track { box-shadow: var(--focus-ring); }

.pb-cc-modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 18px 26px; border-top: 1px solid var(--hairline-soft);
}
.pb-cc-modal__foot .pb-cc-spacer { margin-right: auto; }

/* ============================================================
   Cookie consent — floating relauncher
   ============================================================ */
.pb-cc-relaunch {
  position: fixed; left: 18px; bottom: 18px; z-index: 900;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--hairline);
  border-radius: 99px; box-shadow: var(--icon-shadow); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; transition: background .2s, border-color .2s, transform .2s;
  opacity: 0; transform: translateY(8px); pointer-events: none;
}
.pb-cc-relaunch.pb-show { opacity: 1; transform: none; pointer-events: auto; }
.pb-cc-relaunch:hover { border-color: var(--ghost-border-hover); transform: translateY(-2px); }
.pb-cc-relaunch svg { width: 15px; height: 15px; }

@media (max-width: 768px) {
  .pb-cc-banner { padding: 16px 18px; gap: 14px; }
  .pb-cc-banner__actions { width: 100%; }
  .pb-cc-banner__actions .pb-cc-btn { flex: 1 1 auto; text-align: center; }
  .pb-cc-modal__foot { justify-content: stretch; }
  .pb-cc-modal__foot .pb-cc-btn { flex: 1 1 auto; text-align: center; }
  .pb-cc-modal__foot .pb-cc-spacer { display: none; }
  .pb-cc-relaunch { left: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-cc-banner, .pb-cc-overlay, .pb-cc-modal, .pb-cc-relaunch,
  html.pb-theme-ready body, html.pb-theme-ready nav { transition: none !important; }
}