/*
Theme Name: Joseph Draper
Theme URI: https://josephdraper.com/
Author: Joseph Draper
Author URI: https://josephdraper.com/
Description: A fast, SEO-optimized personal brand theme for Joseph Draper, sports broadcaster and multimedia journalist. Includes built-in Person, WebSite, WebPage and BreadcrumbList schema, Open Graph and Twitter meta, and a responsive landing, biography, and portfolio layout.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: josephdraper
*/

/* ============================================================
   Design tokens
   Palette: navy ink + white paper + a restrained broadcast gold.
   Type: Georgia (editorial serif) for the name/headlines, a system
   sans for UI and body. The serif is the one memorable choice and
   ties the brand to journalism; everything else stays quiet.
   ============================================================ */
:root{
  --ink:#10233f;
  --ink-2:#0b1a30;
  --paper:#ffffff;
  --soft:#f6f7f9;
  --line:#e4e7ec;
  --text:#1f2a3a;
  --muted:#5b6675;
  --gold:#c8962a;
  --gold-2:#a97c1a;
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1120px;
  --gap:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--paper);
  line-height:1.6;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.15;margin:0 0 .5em;font-weight:700}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:.8rem 1.5rem;border-radius:2px;border:2px solid transparent;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--gold);color:var(--ink-2)}
.btn-primary:hover{background:var(--gold-2);color:#fff;text-decoration:none}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink);text-decoration:none}
.btn-ink{border-color:var(--ink);color:var(--ink)}
.btn-ink:hover{background:var(--ink);color:#fff;text-decoration:none}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}
.menu{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.menu a{color:var(--ink);font-weight:600;font-size:.98rem;padding:.3rem 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold);text-decoration:none}

/* ---------- Hero (front page) ---------- */
.hero{background:var(--ink);color:#fff}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap);align-items:center;padding-block:clamp(3rem,7vw,5.5rem)}
.kicker{display:inline-flex;align-items:center;gap:.7rem;color:var(--gold);font-weight:600;font-size:1rem;margin-bottom:1rem}
.kicker::before{content:"";width:34px;height:3px;background:var(--gold)}
.hero h1{color:#fff;font-size:clamp(2.8rem,7vw,4.6rem);letter-spacing:-.01em;margin-bottom:.35em}
.hero .location{font-family:var(--sans);font-size:clamp(1.05rem,2.5vw,1.25rem);color:#c9d2de;margin:0 0 1.3rem}
.hero p.lead{font-size:1.12rem;color:#e7ebf1;max-width:52ch;margin:0 0 1.9rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-photo{position:relative}
.hero-photo img{width:100%;border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.hero-photo::after{content:"";position:absolute;left:-14px;bottom:-14px;width:70px;height:70px;border-left:3px solid var(--gold);border-bottom:3px solid var(--gold)}

/* ---------- Social row ---------- */
.socials{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#fff}
.socials a:hover{background:#fff;color:var(--ink);text-decoration:none}
.socials svg{width:18px;height:18px;fill:currentColor}
.footer .socials a{border-color:rgba(255,255,255,.35)}

/* ---------- Sections ---------- */
.section{padding-block:clamp(2.75rem,6vw,4.5rem)}
.section.soft{background:var(--soft);border-block:1px solid var(--line)}
.section-head{max-width:60ch;margin-bottom:2rem}
.section-head h2{font-size:clamp(1.7rem,4vw,2.3rem)}
.section-head p{color:var(--muted);margin:.4rem 0 0}

/* ---------- Highlights (home) ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.fact{padding:1.4rem 1.5rem;background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold)}
.fact h3{font-size:1.15rem;margin:0 0 .3rem}
.fact p{margin:0;color:var(--muted);font-size:.98rem}

/* ---------- Article / bio ---------- */
.article{max-width:72ch;margin-inline:auto}
.article .lede{font-size:1.2rem;color:var(--ink);font-family:var(--serif);line-height:1.5}
.article p{margin:0 0 1.15rem}
.article h2{font-size:1.5rem;margin-top:2rem}
.bio-figure{float:right;width:min(320px,42%);margin:0 0 1.25rem 1.75rem}
.bio-figure img{border-radius:4px;border:1px solid var(--line)}
.bio-figure figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:.9rem;color:var(--muted);padding-top:1.4rem}
.crumbs a{color:var(--muted)}
.crumbs span[aria-current]{color:var(--ink)}

/* ---------- Page hero (bio/portfolio) ---------- */
.page-hero{background:var(--ink);color:#fff;padding-block:clamp(2.4rem,5vw,3.4rem)}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,5vw,3rem);margin:.4rem 0 .3rem}
.page-hero p{color:#c9d2de;margin:0;max-width:60ch}

/* ---------- Portfolio gallery ---------- */
.gallery{columns:3;column-gap:1.1rem}
.gallery figure{break-inside:avoid;margin:0 0 1.1rem;background:#fff;border:1px solid var(--line)}
.gallery img{width:100%}
.gallery figcaption{padding:.7rem .85rem;font-size:.9rem;color:var(--muted)}

/* ---------- Video facade (fast YouTube) ---------- */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.yt{position:relative;aspect-ratio:16/9;border:0;padding:0;width:100%;cursor:pointer;background:#000 center/cover no-repeat;border-radius:4px;overflow:hidden}
.yt::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55))}
.yt .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(200,150,42,.95);display:flex;align-items:center;justify-content:center}
.yt .play::after{content:"";border-left:20px solid var(--ink-2);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.yt .label{position:absolute;left:14px;right:14px;bottom:12px;color:#fff;font-weight:600;text-align:left;z-index:2;font-size:.95rem}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.linkrow{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.5rem}

/* ---------- Footer ---------- */
.footer{background:var(--ink-2);color:#c9d2de;padding-block:2.6rem;margin-top:0}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;align-items:center}
.footer .brand{color:#fff}
.footer a{color:#e7ebf1}
.footer small{display:block;color:#8695a8;margin-top:.6rem;font-size:.85rem}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:2rem}
  .hero-photo{order:-1;max-width:360px}
  .facts{grid-template-columns:1fr;gap:1rem}
  .gallery{columns:2}
  .bio-figure{float:none;width:auto;margin:0 0 1.5rem}
}
@media (max-width:640px){
  .nav-toggle{display:block}
  .menu{position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:flex-start;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:.5rem 1.2rem 1rem;display:none}
  .menu.open{display:flex}
  .menu li{width:100%}
  .menu a{display:block;width:100%;padding:.7rem 0;border-bottom:1px solid var(--line)}
  .gallery{columns:1}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}