/*
Theme Name: Goodman Blog
Theme URI: https://50yeartrader.com/blog/
Author: The Goodman Wave Theory
Author URI: https://50yeartrader.com/
Description: The blog for 50yeartrader.com. It reuses the main site's styles.css, header, footer and subscribe form, so the blog looks and behaves exactly like the rest of the site. Comments are off by design.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: goodman-blog
*/

/* =====================================================================
   The base design (colours, type, plate, buttons, header, footer) is
   loaded live from https://50yeartrader.com/styles.css. This file adds
   ONLY what a blog needs on top of it.
   ===================================================================== */

/* ---------- WordPress wraps Group-block content in an extra div. Make the
   plate behave as if the tab and content were its direct children. ---------- */
.plate > .wp-block-group__inner-container{display:contents}
.plate .wp-block-group__inner-container > .tab{
  position:absolute; top:-2px; left:-2px;
  background:var(--rust); color:#fff;
  font:700 11px/1 var(--font-head); letter-spacing:.12em; text-transform:uppercase;
  padding:8px 14px;
}
.plate.exercise .wp-block-group__inner-container > .tab{background:var(--petrol)}

/* ---------- WordPress essentials ---------- */
.screen-reader-text{border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal}
.alignleft{float:left; margin:0 var(--s3) var(--s2) 0}
.alignright{float:right; margin:0 0 var(--s2) var(--s3)}
.aligncenter{display:block; margin-left:auto; margin-right:auto}
.wp-caption,.wp-block-image{max-width:100%}
.entry img{max-width:100%; height:auto}
.entry figure{margin:var(--s4) 0}
.entry figcaption,.wp-caption-text{font-family:var(--font-head); font-size:12px; letter-spacing:.06em; color:var(--bronze); margin-top:8px}
.wp-block-image img{display:block}
.admin-bar .masthead{top:0}

/* ---------- nav: nine links need the burger a little earlier ---------- */
@media(min-width:861px) and (max-width:1020px){
  .burger{display:block}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--ground); border-bottom:2px solid var(--ink)}
  .nav[data-open="true"]{display:block}
  .nav ul{flex-direction:column; gap:0; padding:var(--s2) var(--gutter)}
  .nav li+li{border-top:1px solid var(--hairline)}
  .nav a{padding:14px 0; border-bottom:none}
  .nav a:hover,.nav a[aria-current="page"]{border-bottom:none}
}
@media(min-width:1021px) and (max-width:1180px){ .nav ul{gap:16px} }

/* ---------- blog hero ---------- */
.bloghero{background:var(--cream); border-bottom:2px solid var(--ink)}
.bloghero h1{font-size:clamp(28px,4.8vw,50px); border-bottom:3px solid var(--rust); padding-bottom:.2em; max-width:22ch}
.bloghero .lede{max-width:44ch; margin-top:var(--s3)}
.bloghero .eyebrow a{color:var(--rust); text-decoration:none}
.bloghero .eyebrow a:hover{text-decoration:underline}

/* ---------- meta line, topic chips ---------- */
.postmeta{font-family:var(--font-head); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze); margin:0 0 var(--s2)}
.postmeta a{color:var(--rust); text-decoration:none; font-weight:700}
.postmeta a:hover{text-decoration:underline}
.postmeta .sep{color:var(--stone); margin:0 8px}
.tagrow{display:flex; flex-wrap:wrap; gap:8px; margin:var(--s3) 0 0; padding:0; list-style:none}
.tagrow a{display:inline-block; font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--rust); text-decoration:none; border:2px solid var(--rust); padding:6px 10px}
.tagrow a:hover,.tagrow a[aria-current="page"]{background:var(--rust); color:#fff}

/* ---------- cards and featured post ---------- */
.card a.thumb{display:block; margin:0 0 var(--s2)}
.card img{display:block; width:100%; height:auto}
.card h3 a{color:inherit; text-decoration:none}
.card h3 a:hover{color:var(--rust)}
.card .note{margin-bottom:var(--s2)}
.card .foot{margin-top:auto}
.featured h2{font-size:clamp(24px,3.2vw,34px); border:none; padding:0; margin:0 0 var(--s2)}
.featured h2 a{color:inherit; text-decoration:none}
.featured h2 a:hover{color:var(--rust)}
.featured img{display:block; width:100%; height:auto}

/* ---------- the article ---------- */
.entry{max-width:var(--measure); margin:0 auto}
.entry > p, .entry > ul, .entry > ol{margin:0 0 var(--s3)}
.entry h2{font-size:clamp(22px,3vw,30px); margin:var(--s5) 0 var(--s3)}
.entry h3{font-size:clamp(18px,2.2vw,22px); margin:var(--s4) 0 var(--s2)}
.entry ul,.entry ol{padding-left:1.3em}
.entry li{margin-bottom:8px}
.entry a{color:var(--petrol)}
.entry a:hover{color:var(--rust)}
.entry blockquote,.entry .wp-block-quote{border-left:4px solid var(--rust); margin:var(--s4) 0; padding:var(--s1) 0 var(--s1) var(--s3)}
.entry blockquote p{font-style:italic; font-size:clamp(19px,2.3vw,23px); line-height:1.45; margin:0}
.entry blockquote cite{display:block; margin-top:8px; font-family:var(--font-head); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-style:normal; color:var(--stone)}
.entry .plate{margin:var(--s4) 0}
.entry .plate h3{margin:0 0 var(--s1)}
.entry .plate svg{max-width:100%; height:auto; margin:12px 0}
.entry table{margin:var(--s4) 0}
.entry .lede{max-width:none}
.entry code{font-size:.9em; background:var(--panel); padding:1px 6px}
.entry hr,.entry .wp-block-separator{border:none; border-top:1px solid var(--hairline); margin:var(--s4) 0}
.entry details.wp-block-details:not(.reveal){border:2px solid var(--ink); padding:var(--s2) var(--s3); margin:var(--s3) 0}
.entry details.wp-block-details:not(.reveal) summary{cursor:pointer; font-family:var(--font-head); font-weight:700}

.disclaimer{border:2px solid var(--ink); background:var(--panel); padding:var(--s3); margin:var(--s5) 0 var(--s3); font-size:15px; line-height:1.55}
.disclaimer b{font-family:var(--font-head); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--rust); display:block; margin-bottom:6px}

.postnav{display:grid; gap:var(--s3); margin:var(--s4) 0}
@media(min-width:680px){ .postnav{grid-template-columns:1fr 1fr} }
.postnav a{display:block; text-decoration:none; color:var(--ink); border:2px solid var(--ink); padding:var(--s2) var(--s3)}
.postnav a:hover{border-color:var(--rust)}
.postnav small{display:block; font-family:var(--font-head); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--rust); margin-bottom:6px}
.postnav .next{text-align:right}

/* ---------- pagination ---------- */
.pager{display:flex; gap:var(--s1); flex-wrap:wrap; margin-top:var(--s4)}
.pager .page-numbers{display:inline-block; font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--ink); border:2px solid var(--ink); padding:10px 14px; background:var(--ground)}
.pager a.page-numbers:hover{border-color:var(--rust); color:var(--rust)}
.pager .page-numbers.current{background:var(--ink); color:#fff}
.pager .page-numbers.dots{border-color:transparent}

/* ---------- 404 / empty ---------- */
.emptystate{max-width:var(--measure)}