/*
Theme Name:  The Young Dentist
Description: TYD hub site - light editorial system (Anton/Mulish, periwinkle) with a dark masterclass mode (League Spartan/Raleway, navy studio). Pixel port of the approved 2026-07 prototypes. Data layer lives in the TYD Core plugin.
Author:      The Young Dentist
Version:     1.1.0
License:     GPL-2.0-or-later
Text Domain: tyd
Requires PHP: 7.4
*/

/* ============================================================
   The Young Dentist - site design system (light / editorial)
   Periwinkle accent, Anton condensed display, Mulish body,
   uppercase kickers, italic standfirsts, hairline rules.
   Dark mode (masterclasses) uses the navy system separately.
   ============================================================ */
:root{
  --accent:#6B7AE6;
  --accent-deep:#5563D8;
  --ink:#1C1C1C;
  --body-c:#3A3A3A;
  --muted:#9A9AA5;
  --rule:#E6E6E6;
  --tint:#EEF0FC;
  --page:#F1F1F4;
  --white:#FFFFFF;
  --navy:#1C1C34;          /* dark-mode bridge (masterclasses) */
  --yellow:#FCDB3F;        /* sparing highlight accent */
  --disp:"Anton",Impact,sans-serif;
  --body:"Mulish","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--body-c);background:var(--page);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.col{max-width:680px;margin:0 auto;padding:0 24px}

/* dark mode base (masterclass section) - templates carry their own detailed styling */
body.tyd-dark{background:#0A0A0D;color:#fff;font-family:"Raleway","Helvetica Neue",Arial,sans-serif}
body.tyd-dark .h-white:hover{color:#fff!important}
body.tyd-dark .h-btn:hover{background:#4d63d4!important}
body.tyd-dark .h-cta:hover{background:#4d63d4!important;transform:translateY(-2px)!important}
body.tyd-dark .h-border:hover{border-color:#fff!important}
body.tyd-dark .h-lift:hover{transform:translateY(-6px)!important}
body.tyd-dark .f-gold:focus{outline:2px solid #FCDB3F!important;border-color:transparent!important}

/* ---------- type ---------- */
h1,h2,h3,.disp{font-family:var(--disp);font-weight:400;color:var(--ink);letter-spacing:.01em;line-height:1.05;text-transform:uppercase}
h1{font-size:clamp(38px,5.6vw,64px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:20px}
.kicker{font:800 11.5px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.standfirst{font-style:italic;font-size:18px;line-height:1.55;color:var(--body-c)}
.leadin{font-weight:800;color:var(--ink)}
.muted{color:var(--muted)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------- nav ---------- */
nav.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;gap:26px;height:66px}
.wordmark{font-family:var(--disp);font-size:16px;letter-spacing:.05em;color:var(--ink);display:flex;align-items:center;gap:10px;text-transform:uppercase}
.wordmark .dot{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font:800 8px var(--body);text-align:center;line-height:1.15;flex:none}
.nav-links{display:flex;gap:22px;margin-left:auto;font:700 13.5px var(--body);color:var(--body-c)}
.nav-links ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav-links a:hover{color:var(--accent-deep)}
.nav-links .active,
.nav-links .current-menu-item>a,
.nav-links .current_page_parent>a{color:var(--accent-deep);border-bottom:2px solid var(--yellow);padding-bottom:4px}

/* dark header - same wp_nav_menu() markup as the light nav, restyled for the studio */
body.tyd-dark .nav-links{color:rgba(255,255,255,.62)}
body.tyd-dark .nav-links a{color:rgba(255,255,255,.62)}
body.tyd-dark .nav-links a:hover{color:#fff}
body.tyd-dark .nav-links .active,
body.tyd-dark .nav-links .current-menu-item>a,
body.tyd-dark .nav-links .current_page_parent>a{color:#fff;border-bottom:2px solid #FCDB3F;padding-bottom:4px}
.nav-cta{background:var(--accent);color:#fff;font:800 13.5px var(--body);padding:10px 20px;border-radius:24px;transition:background .2s}
.nav-cta:hover{background:var(--accent-deep)}
.nav-burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px;font-size:20px;color:var(--ink)}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:block}
  .nav-cta{margin-left:0}
  body.nav-open .nav-links{display:flex;position:absolute;top:66px;left:0;right:0;background:#fff;border-bottom:1px solid var(--rule);flex-direction:column;padding:18px 24px;gap:14px}
  body.nav-open .nav-links ul{flex-direction:column;gap:14px}
  body.tyd-dark.nav-open .nav-links{background:#0A0A0D;border-color:rgba(255,255,255,.09)}
}

/* ---------- buttons / chips ---------- */
.btn{display:inline-block;font:800 15px var(--body);padding:14px 28px;border-radius:28px;border:0;cursor:pointer;transition:transform .15s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-deep)}
.btn-ink{background:var(--ink);color:#fff}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-sm{font-size:13px;padding:10px 18px}
.chip{display:inline-block;font:800 10.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);background:var(--tint);border-radius:4px;padding:4px 9px}
.chip.yellow{background:var(--yellow);color:var(--navy)}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button,.tabs a{font:800 13px var(--body);padding:9px 18px;border-radius:22px;border:1.5px solid var(--rule);background:#fff;color:var(--body-c);cursor:pointer;display:inline-block}
.tabs button.on,.tabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- ribbon ---------- */
.ribbon{background:var(--yellow);color:var(--navy);font:700 12px var(--body);text-align:center;padding:8px 16px;letter-spacing:.05em}

/* ---------- sections ---------- */
section.band{padding:72px 0}
section.band.tight{padding:48px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.sec-head p{font-size:14px;color:var(--muted);max-width:400px}
.more-link{font:800 13.5px var(--body);color:var(--accent-deep);white-space:nowrap}
.more-link:hover{text-decoration:underline}

/* ---------- cards ---------- */
.card-grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g3,.g4{grid-template-columns:1fr}}
.ep-card{background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.ep-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(28,28,52,.10)}
.ep-card .thumb{position:relative;aspect-ratio:16/9;background:var(--tint);overflow:hidden}
.ep-card .thumb img{width:100%;height:100%;object-fit:cover}
.ep-card .thumb .len{position:absolute;right:10px;bottom:10px;background:rgba(28,28,52,.85);color:#fff;font:700 11px var(--body);padding:3px 8px;border-radius:4px}
.ep-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.ep-card .guest{font:800 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep)}
.ep-card .title{font:800 15px/1.35 var(--body);color:var(--ink)}
.ep-card .meta{margin-top:auto;font:600 12px var(--body);color:var(--muted)}
.sq-card{background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.sq-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(28,28,52,.10)}
.sq-card .img{aspect-ratio:1/1;background:linear-gradient(150deg,var(--tint),#dde2f7);display:flex;align-items:center;justify-content:center;color:var(--muted);font:700 12px var(--body);overflow:hidden}
.sq-card .img img{width:100%;height:100%;object-fit:cover}
.sq-card .body{padding:16px 18px 18px}
.sq-card .title{font:800 15px/1.35 var(--body);color:var(--ink);margin-top:8px}
.sq-card .by{font:600 12px var(--body);color:var(--muted);margin-top:8px}

/* ---------- forms ---------- */
.f-input{font:600 14px var(--body);color:var(--ink);background:#fff;border:1.5px solid var(--rule);border-radius:10px;padding:14px 16px;width:100%}
.f-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.f-input::placeholder{color:var(--muted)}
select.f-input{appearance:none;color:var(--body-c)}
textarea.f-input{resize:vertical;min-height:110px}
label.chk{display:flex;gap:10px;align-items:flex-start;font:500 12px/1.55 var(--body);color:var(--body-c);cursor:pointer}
label.chk input{margin-top:2px;accent-color:var(--accent);width:15px;height:15px;flex:none}
.fine{font:500 11px/1.55 var(--body);color:var(--muted)}
.fine a{text-decoration:underline}
.toast{display:none;font:700 13px var(--body);color:var(--accent-deep);margin-top:8px}

/* ---------- newsletter block ---------- */
.nl-block{background:var(--tint);border:1.5px solid var(--accent);border-radius:16px;padding:38px 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.nl-block h2{font-size:clamp(24px,3vw,32px)}
.nl-block .pitch{margin-top:10px;font-size:14.5px}
.nl-form{display:grid;gap:10px}
.nl-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:820px){.nl-block{grid-template-columns:1fr;padding:30px 24px}}

/* ---------- masterclass dark band (light pages) ---------- */
.mc-band{background:linear-gradient(120deg,var(--navy),#25292B);border-radius:20px;color:#fff;padding:54px;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;overflow:hidden;position:relative}
.mc-band .kicker{color:var(--yellow)}
.mc-band h2{color:#fff}
.mc-band p{color:rgba(255,255,255,.65);font-size:15px;margin-top:14px}
.mc-band .img{border-radius:14px;overflow:hidden;aspect-ratio:4/3.2;position:relative}
.mc-band .img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.mc-band .img::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 50%,rgba(28,28,52,.8))}
@media(max-width:820px){.mc-band{grid-template-columns:1fr;padding:34px 26px}}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:rgba(255,255,255,.65);margin-top:60px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.4fr;gap:36px;padding:56px 0 40px}
.foot-grid h4{font:800 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot-grid a{display:block;font:600 13.5px var(--body);padding:5px 0}
.foot-grid a:hover{color:#fff}
.foot-grid p{font:500 13px/1.6 var(--body)}
/* wp_nav_menu (items_wrap '%3$s') emits bare <li> - match the hardcoded fallback links exactly */
.foot-grid li,.tyd-foot-dark-col li{list-style:none;margin:0;padding:0}
.tyd-foot-dark-col li a{font-size:13px;color:rgba(255,255,255,.55);text-decoration:none}
.tyd-foot-dark-col li a:hover{color:#fff}
.foot-mark{font-family:var(--disp);font-size:18px;color:#fff;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.foot-base{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:600 12px var(--body)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ---------- editorial bits (newsletter-style) ---------- */
.story{padding:26px 0;border-top:1px solid var(--rule)}
.story:first-of-type{border-top:0}
.story .chip{margin-bottom:10px}
.story h3{font:800 19px/1.3 var(--body);text-transform:none;letter-spacing:0}
.story p{margin-top:8px;font-size:14.5px}
.story .more-link{display:inline-block;margin-top:10px}
.tooth-divider{text-align:center;color:var(--accent);font-size:18px;letter-spacing:.6em;padding:8px 0}

/* ---------- WordPress additions (not in prototype) ---------- */

/* Gutenberg article body - news articles, show notes, prose pages */
.prose{font-size:16.5px;line-height:1.75}
.prose>*+*{margin-top:1.1em}
.prose h2{font:800 24px/1.3 var(--body);text-transform:none;letter-spacing:0;color:var(--ink);margin-top:1.8em}
.prose h3{font:800 19px/1.3 var(--body);text-transform:none;letter-spacing:0;color:var(--ink);margin-top:1.6em}
.prose a{color:var(--accent-deep);text-decoration:underline}
.prose ul,.prose ol{padding-left:1.3em}
.prose blockquote{border-left:3px solid var(--yellow);padding:6px 0 6px 20px;font-style:italic;color:var(--ink)}
.prose img{border-radius:12px}
.prose figcaption{font:500 12.5px var(--body);color:var(--muted);margin-top:8px}
.prose .wp-block-embed iframe{max-width:100%}

/* Lite YouTube facade */
.yt-lite{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#000 center/cover no-repeat;border-radius:14px;overflow:hidden;cursor:pointer;border:0;padding:0}
.yt-lite::after{content:"";position:absolute;inset:0;background:rgba(10,10,13,.18);transition:background .2s}
.yt-lite:hover::after{background:rgba(10,10,13,.05)}
.yt-lite .yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:50px;background:var(--accent);border-radius:14px;display:flex;align-items:center;justify-content:center;z-index:1;transition:background .2s}
.yt-lite:hover .yt-play{background:var(--accent-deep)}
.yt-lite .yt-play::before{content:"";border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff;margin-left:3px}
.yt-lite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Pagination */
.tyd-pagination{display:flex;gap:8px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.tyd-pagination .page-numbers{font:800 13px var(--body);padding:9px 16px;border-radius:22px;border:1.5px solid var(--rule);background:#fff;color:var(--body-c)}
.tyd-pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff}
.tyd-pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent-deep)}

/* Accessibility */
.screen-reader-text{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;position:absolute!important;word-wrap:normal!important}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.tyd-dark a:focus-visible,body.tyd-dark button:focus-visible{outline-color:var(--yellow)}

.skip-link{position:absolute;top:-100px;left:16px;z-index:100;background:var(--accent);color:#fff;font:800 13.5px var(--body);padding:12px 20px;border-radius:8px;text-decoration:none;transition:top .15s}
.skip-link:focus{top:16px}
body.tyd-dark .skip-link{background:#6984fc;color:#fff}
body.tyd-dark .skip-link:focus{outline:2px solid #FCDB3F;outline-offset:2px}