/*
Theme Name: Start Hockey
Theme URI: https://starthockey.com
Author: Start Hockey
Description: Editorial guide-and-gear theme for StartHockey.com. Guides and gear are organized by parent/child categories; gear fields (price, rating, pick type, Amazon link) use Advanced Custom Fields.
Version: 1.0
Requires PHP: 7.4
Text Domain: gih
*/

:root{
  --paper:#EDE7D9;
  --card:#F7F2E6;
  --ink:#20281F;
  --pine:#2E4A3A;
  --pine-deep:#1B2E23;
  --gold:#B8862E;
  --rust:#9C4A2E;
  --line:#D8CDAF;
  --muted:#6E6553;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Work Sans', sans-serif;font-size:17px;line-height:1.6;}
h1,h2,h3,h4,.serif{font-family:'Fraunces', serif;color:var(--ink);line-height:1.1;margin:0;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.rule{border:none;border-top:1px solid var(--line);margin:0;}
.rule-thick{border:none;border-top:2px solid var(--ink);margin:0;}

.masthead-top{padding:22px 0 0;text-align:center;}
.issue-line{font-size:13px;letter-spacing:0.03em;color:var(--muted);font-style:italic;}
.nameplate{font-size:54px;font-weight:600;font-variation-settings:'opsz' 144;margin-top:6px;}
.site-logo{display:flex;justify-content:center;margin-top:6px;}
.site-logo img{
  height:auto !important;
  max-height:90px !important;   /* caps tall/square uploads */
  width:auto !important;
  max-width:320px !important;   /* caps wide uploads */
  display:block;
}
.tagline{font-size:15.5px;color:var(--muted);font-style:italic;margin-top:6px;}
.masthead-rules{padding:16px 24px 0;max-width:1080px;margin:0 auto;}
.masthead-rules .rule-thick{margin-bottom:3px;}

nav.section-nav{padding:14px 0;}
.nav-row{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.nav-row li{display:inline;}
.nav-row a{font-size:14.5px;font-weight:600;color:var(--pine);}
.nav-row a:hover{color:var(--rust);}

section{padding:52px 0;}
.kicker{display:inline-block;font-size:12.5px;font-weight:600;color:var(--rust);border-bottom:1.5px solid var(--rust);padding-bottom:2px;margin-bottom:14px;}
.dept-head{margin-bottom:30px;}
.dept-head h2{font-size:29px;font-weight:600;}
.dept-head p.dek{color:var(--muted);font-size:16px;margin-top:8px;max-width:56ch;}
.byline{font-size:13.5px;color:var(--muted);}
.byline .dot{margin:0 6px;}

.intro{padding-top:40px;padding-bottom:20px;text-align:center;}
.intro h1{font-size:36px;font-weight:600;max-width:20ch;margin:0 auto;}
.intro p{font-size:17.5px;color:var(--muted);max-width:52ch;margin:14px auto 0;}

.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.path-card{padding:30px 28px;border-left:1px solid var(--line);}
.path-card:first-child{border-left:none;}
.path-card .kicker{margin-bottom:12px;}
.path-card.c-pine .kicker{color:var(--pine);border-bottom-color:var(--pine);}
.path-card.c-gold .kicker{color:var(--gold);border-bottom-color:var(--gold);}
.path-card.c-rust .kicker{color:var(--rust);border-bottom-color:var(--rust);}
.path-card h3{font-size:21px;font-weight:600;margin-bottom:10px;}
.path-card p{font-size:14.5px;color:var(--muted);margin-bottom:16px;}
.path-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.path-card a.plink{font-size:14.5px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);display:inline-block;padding-bottom:1px;}
.path-card a.plink:hover{border-bottom-color:var(--ink);}

.guide-cat{margin-bottom:46px;}
.guide-cat:last-child{margin-bottom:0;}
.guide-cat-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;}
.guide-cat-head h3{font-size:22px;font-weight:600;white-space:nowrap;}
.guide-cat-head .cat-rule{flex:1;border-top:1px solid var(--line);}
.toc-list{display:flex;flex-direction:column;}
.toc-item{display:grid;grid-template-columns:40px 1fr auto;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);}
.toc-num{font-family:'Fraunces', serif;font-weight:600;font-size:19px;color:var(--gold);}
.toc-item h4{font-size:18px;font-weight:500;}
.toc-item p{font-size:14.5px;color:var(--muted);margin-top:4px;max-width:56ch;}
.toc-time{font-size:13px;color:var(--muted);white-space:nowrap;}

.gear-desk-section{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.disclosure{font-size:13.5px;color:var(--muted);font-style:italic;margin-top:-8px;margin-bottom:30px;}
.gear-cat{margin-bottom:38px;}
.gear-cat:last-child{margin-bottom:0;}
.gear-cat-head{font-size:19px;font-weight:600;margin-bottom:16px;}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.pick-card{background:var(--paper);border:1px solid var(--line);padding:20px;}
.pick-tag{display:inline-block;font-size:11.5px;font-weight:600;color:#fff;background:var(--pine);padding:4px 9px;margin-bottom:12px;}
.pick-card.budget .pick-tag{background:var(--rust);}
.pick-card h4{font-size:16.5px;font-weight:600;line-height:1.3;}
.pick-card p{font-size:14px;color:var(--muted);margin-top:8px;}
.pick-meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
.pick-price{font-family:'Fraunces', serif;font-weight:600;font-size:17px;}
.pick-rating{font-size:12.5px;color:var(--muted);}
.pick-btn{display:block;text-align:center;margin-top:14px;background:var(--gold);color:#241A05;font-weight:600;font-size:14px;padding:10px;border:none;cursor:pointer;text-decoration:none;}
.pick-btn:hover{background:#CB984A;}

.wotw-compact{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;padding:26px 0;border-bottom:1px solid var(--line);border-top:1px solid var(--line);}
.wotw-compact .lbl{font-size:12.5px;font-weight:600;color:var(--rust);white-space:nowrap;}
.wotw-compact .term{font-size:22px;font-weight:600;}
.wotw-compact .def{font-size:15px;color:var(--muted);}
.wotw-compact .more{font-size:13.5px;font-weight:600;color:var(--pine);border-bottom:1px solid var(--pine);margin-left:auto;white-space:nowrap;}

.brief{padding:44px 0;}
.brief-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.brief-head h3{font-size:19px;font-weight:600;}
.brief-head a{font-size:13.5px;font-weight:600;color:var(--pine);border-bottom:1px solid var(--pine);}
.brief-list{display:flex;flex-direction:column;}
.brief-item{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;}
.brief-item:first-child{border-top:1px solid var(--line);}
.brief-item .cat{font-size:12px;font-weight:600;color:var(--rust);white-space:nowrap;min-width:70px;}

.coming-soon{border:1px dashed var(--muted);padding:28px 32px;text-align:center;}
.coming-soon h4{font-size:17px;font-weight:600;margin-bottom:8px;}
.coming-soon p{font-size:14.5px;color:var(--muted);max-width:52ch;margin:0 auto;}

.newsletter{background:var(--pine-deep);color:#F2EEE0;}
.newsletter .wrap{text-align:center;padding:20px 0;}
.newsletter .kicker{color:var(--gold);border-bottom-color:var(--gold);}
.newsletter h2{color:#fff;font-size:30px;max-width:22ch;margin:0 auto;}
.newsletter p{color:#C9C2AC;margin-top:12px;max-width:44ch;margin-left:auto;margin-right:auto;}
.newsletter-form{display:flex;justify-content:center;gap:10px;margin-top:26px;flex-wrap:wrap;}
.newsletter-form input{padding:13px 16px;border:1px solid #4A5F51;background:#25392E;color:#fff;font-family:'Work Sans', sans-serif;font-size:15px;min-width:260px;}
.newsletter-form input::placeholder{color:#8FA091;}
.newsletter-form button{padding:13px 26px;background:var(--gold);color:#241A05;border:none;font-family:'Work Sans', sans-serif;font-weight:600;font-size:15px;cursor:pointer;}
.newsletter-form button:hover{background:#CB984A;}

footer{padding:44px 0 30px;}
.colophon-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:14px;padding-bottom:26px;border-bottom:1px solid var(--line);}
.colophon-top .serif{font-size:22px;font-weight:600;}
.colophon-links{display:flex;gap:22px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.colophon-links a{font-size:14px;font-weight:600;color:var(--pine);}
.colophon-bottom{padding-top:22px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.colophon-bottom .disclaimer{max-width:60ch;}
.colophon-legal{margin-top:14px;}
.legal-links{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap;}
.legal-links a{font-size:12.5px;color:var(--muted);}
.legal-links a:hover{color:var(--pine);}

/* ---- single article ---- */
.article-head{padding:48px 0 30px;border-bottom:1px solid var(--line);}
.article-head .kicker{margin-bottom:16px;}
.article-head h1{font-size:40px;max-width:22ch;}
.article-head .byline{margin-top:16px;}
.article-body{padding:40px 0;max-width:70ch;margin:0 auto;font-size:18px;}
.article-body p{margin:0 0 22px;}
.article-body h2{font-size:26px;margin:36px 0 14px;}
.article-body h3{font-size:21px;margin:28px 0 12px;}
.article-body img{margin:24px 0;}
.article-back{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;color:var(--pine);border-bottom:1px solid var(--pine);}

@media (max-width:860px){
  .nameplate{font-size:38px;}
  .site-logo img{max-height:64px !important; max-width:240px !important;}
  .intro h1{font-size:28px;}
  .paths{grid-template-columns:1fr;}
  .path-card{border-left:none;border-top:1px solid var(--line);}
  .path-card:first-child{border-top:none;}
  .pick-grid{grid-template-columns:1fr;}
  .toc-item{grid-template-columns:30px 1fr;}
  .toc-time{grid-column:2;}
  .wotw-compact .more{margin-left:0;}
  .nav-row{gap:16px;row-gap:10px;}
  .article-head h1{font-size:30px;}
}

/* ---- reusable in-article components (paste plain HTML for these via a
   Custom HTML block in any post — the styling lives here so it stays
   consistent everywhere and posts don't need to repeat <style> tags) ---- */

.yh-quickstart{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--gold);
  padding:22px 26px; border-radius:8px; margin:28px 0;
}
.yh-quickstart .yh-kicker{
  font-size:12.5px; font-weight:600; color:var(--rust); margin-bottom:10px; display:block;
}
.yh-quickstart ul{ margin:0; padding-left:20px; }
.yh-quickstart li{ margin-bottom:8px; font-size:16px; }
.yh-quickstart li:last-child{ margin-bottom:0; }

.yh-reassure{
  background:var(--pine-deep); color:#F2EEE0; padding:28px 30px; border-radius:8px; margin:32px 0;
}
.yh-reassure h4{ font-family:'Fraunces',serif; font-size:20px; margin:0 0 10px; color:#fff; }
.yh-reassure p{ margin:0 0 12px; color:#D9D2BE; font-size:15.5px; }
.yh-reassure p:last-child{ margin-bottom:0; }
.yh-reassure a{ color:var(--gold); font-weight:600; border-bottom:1px solid var(--gold); text-decoration:none; }

.yh-ladder{ max-width:100%; margin:32px 0; color:var(--ink); }
.yh-ladder .yh-head{ text-align:center; margin-bottom:24px; }
.yh-ladder .yh-head h3{ font-family:'Fraunces', serif; font-weight:600; font-size:28px; margin:0; }
.yh-ladder .yh-head p{ font-style:italic; color:var(--muted); margin:8px 0 0; font-size:15.5px; }
.yh-ladder .yh-rule{ border:none; border-top:2px solid var(--ink); margin:0 0 18px; }
.yh-cols{
  display:grid; grid-template-columns: 80px 1.3fr 1fr 1fr; gap:8px; padding:0 4px 10px;
  font-size:12.5px; font-weight:600; letter-spacing:0.02em; color:var(--muted);
}
.yh-cols .yh-usa{ color:var(--pine); text-align:center; }
.yh-cols .yh-can{ color:var(--rust); text-align:center; }
.yh-cols .yh-trad{ text-align:left; padding-left:8px; }
.yh-row{
  display:grid; grid-template-columns: 80px 1.3fr 1fr 1fr; align-items:center;
  gap:8px; padding:16px 4px; border-radius:10px;
}
.yh-row:nth-child(odd){ background:var(--card); }
.yh-row.yh-highlight{ background:#D7C5A3; }
.yh-age{ text-align:left; }
.yh-age .yh-lbl{ display:block; font-size:11px; font-weight:600; color:var(--muted); }
.yh-age .yh-val{ font-family:'Fraunces', serif; font-weight:600; font-size:21px; }
.yh-trad-name{ font-weight:600; font-size:16.5px; padding-left:8px; }
.yh-num{ font-family:'Fraunces', serif; font-weight:600; font-size:19px; text-align:center; }
.yh-num.yh-usa-num{ color:var(--pine); }
.yh-num.yh-can-num{ color:var(--rust); }
.yh-badge-row{ grid-column: 1 / -1; text-align:center; margin-top:8px; }
.yh-badge{
  display:inline-block; background:var(--gold); color:#241A05;
  font-weight:600; font-size:13px; padding:6px 15px; border-radius:20px;
}
.yh-foot{
  border-top:1px solid var(--line); margin-top:12px; padding-top:16px;
  font-size:13.5px; color:var(--muted); text-align:center; line-height:1.6;
}
.yh-foot p{ margin:0 0 6px; }

.yh-dodont{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0; }
.yh-dodont .yh-do, .yh-dodont .yh-dont{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:20px 22px; border-top-width:4px; border-top-style:solid;
}
.yh-dodont .yh-do{ border-top-color:var(--pine); }
.yh-dodont .yh-dont{ border-top-color:var(--rust); }
.yh-dodont h4{ font-family:'Fraunces', serif; font-size:17px; margin:0 0 12px; }
.yh-dodont .yh-do h4{ color:var(--pine); }
.yh-dodont .yh-dont h4{ color:var(--rust); }
.yh-dodont ul{ margin:0; padding-left:18px; }
.yh-dodont li{ margin-bottom:8px; font-size:15px; }
.yh-dodont li:last-child{ margin-bottom:0; }

/* ---- season calendar (gantt-style chart) ---- */
.yh-season-chart{ margin:32px 0; overflow-x:auto; }
.yh-season-inner{ min-width:640px; }
.yh-season-head, .yh-season-row{
  display:grid;
  grid-template-columns: 100px repeat(10, 1fr);
  align-items:center;
  gap:0;
}
.yh-season-head{
  font-size:12px; font-weight:600; color:var(--muted); padding-bottom:10px;
  border-bottom:2px solid var(--ink);
}
.yh-season-head span{ text-align:center; }
.yh-season-row{ padding:9px 0; border-bottom:1px solid var(--line); }
.yh-season-league{ font-family:'Fraunces', serif; font-weight:600; font-size:14.5px; padding-right:8px; }
.yh-season-track{
  grid-column: 2 / -1;
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  height:22px;
  position:relative;
}
.yh-season-bar{ grid-row:1; align-self:center; height:16px; }
.yh-season-bar.reg{ background:var(--pine); border-radius:4px 0 0 4px; }
.yh-season-bar.playoffs{ background:var(--gold); border-radius:0 4px 4px 0; }
.yh-season-bar.solo{ border-radius:4px; }
.yh-season-legend{ display:flex; gap:22px; margin-top:14px; font-size:13px; color:var(--muted); }
.yh-season-legend span{ display:inline-flex; align-items:center; gap:7px; }
.yh-season-legend .swatch{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.yh-season-legend .swatch.reg{ background:var(--pine); }
.yh-season-legend .swatch.playoffs{ background:var(--gold); }
.yh-season-note{ font-size:12.5px; color:var(--muted); margin-top:10px; font-style:italic; }

@media (max-width:560px){
  .yh-dodont{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .yh-cols{ display:none; }
  .yh-row{ grid-template-columns: 60px 1fr; row-gap:6px; }
  .yh-age{ grid-row: 1 / 3; }
  .yh-trad-name{ grid-column: 2; }
  .yh-usa-num{ grid-column: 2; text-align:left; padding-left:8px; }
  .yh-usa-num::before{ content:"USA "; font-family:'Work Sans',sans-serif; font-size:12px; font-weight:600; color:var(--muted); }
  .yh-can-num{ grid-column: 2; text-align:left; padding-left:8px; }
  .yh-can-num::before{ content:"CAN "; font-family:'Work Sans',sans-serif; font-size:12px; font-weight:600; color:var(--muted); }
  .yh-age .yh-val{ font-size:18px; }
}