/*
Theme Name: TheGoodShane
Theme URI: https://thegoodshane.com
Author: Shane
Author URI: https://thegoodshane.com
Description: Bold & confident dark-first blog theme for technology, AI and IT leadership. Auto light/dark by system preference with a persistent Auto / Light / Dark switch. Oversized Space Grotesk display type, warm amber accent.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 7.0.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thegoodshane
*/

/* ============ THEME TOKENS ============ */
:root,
:root[data-theme="dark"] {
  --bg:#0B0B0C; --elev:#141416; --nav-bg:rgba(11,11,12,0.82);
  --text:#F5F3EE; --dim:#B8B3A8; --faint:#6B6860;
  --line:#1A1A1C; --border:#26262A;
  --accent:#E8A13A; --accent-text:#0B0B0C; --accent-ink:#E8A13A;
  --soft-bg:#171207; --soft-border:#3A2E18; --seg-bg:#141416;
  --code-bg:#0D1217; --code-border:#1E262E;
}
:root[data-theme="light"] {
  --bg:#FBFAF7; --elev:#FFFFFF; --nav-bg:rgba(251,250,247,0.82);
  --text:#17150F; --dim:#57544B; --faint:#98938A;
  --line:#EDEAE2; --border:#E0DCD2;
  --accent:#E8A13A; --accent-text:#1A1408; --accent-ink:#B4720E;
  --soft-bg:#FBF1DD; --soft-border:#EFDDB4; --seg-bg:#F0EDE6;
  --code-bg:#F4F1EA; --code-border:#E0DCD2;
}

/* ============ BASE ============ */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
.wrap { max-width:1240px; margin:0 auto; padding:0 56px; }
.mono { font-family:'Space Mono',ui-monospace,monospace; }
.eyebrow {
  font-family:'Space Mono',ui-monospace,monospace; font-size:12px;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-ink);
}

/* ============ READING PROGRESS ============ */
#tgs-progress {
  position:fixed; top:0; left:0; height:3px; width:0;
  background:var(--accent); z-index:60; transition:width .05s linear;
}

/* ============ HEADER / NAV ============ */
.site-header {
  position:sticky; top:0; z-index:50;
  background:var(--nav-bg); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .35s ease, border-color .35s ease;
}
.site-header .wrap {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:18px; padding-bottom:18px;
}
.brand {
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:21px;
  letter-spacing:-0.02em; white-space:nowrap;
}
.brand b { color:var(--accent); font-weight:700; }
.main-nav { font-size:14px; font-weight:500; color:var(--dim); }
.main-nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:30px; }
.main-nav li { margin:0; }
.main-nav a { display:inline-block; }
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current_page_item > a { color:var(--text); }
.header-actions { display:flex; align-items:center; gap:14px; }

/* Hamburger — hidden on desktop, shown at the mobile breakpoint. */
.nav-toggle {
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; cursor:pointer;
  background:var(--seg-bg); color:var(--text);
  border:1px solid var(--border); border-radius:9px;
}
.nav-toggle .bars { position:relative; width:18px; height:2px; background:currentColor; display:block; transition:background .2s ease; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor;
  transition:transform .25s ease, top .25s ease;
}
.nav-toggle .bars::before { top:-6px; }
.nav-toggle .bars::after { top:6px; }
.site-header.nav-open .nav-toggle .bars { background:transparent; }
.site-header.nav-open .nav-toggle .bars::before { top:0; transform:rotate(45deg); }
.site-header.nav-open .nav-toggle .bars::after { top:0; transform:rotate(-45deg); }
.theme-switch {
  display:flex; align-items:center; gap:2px; padding:3px; border-radius:8px;
  background:var(--seg-bg); border:1px solid var(--border);
}
.theme-switch button {
  font-family:'Space Mono',ui-monospace,monospace; font-size:13px; line-height:1;
  border:none; border-radius:5px; padding:6px 11px; cursor:pointer;
  background:transparent; color:var(--dim); transition:all .2s ease;
}
.theme-switch button[aria-pressed="true"] {
  background:var(--accent); color:var(--accent-text); font-weight:700;
}
.btn-accent {
  font-family:'Space Mono',ui-monospace,monospace; font-size:13px; font-weight:700;
  color:var(--accent-text); background:var(--accent);
  padding:9px 16px; border-radius:7px; border:none; cursor:pointer; white-space:nowrap;
}

/* ============ HERO (featured post) ============ */
.hero { padding:88px 0 68px; border-bottom:1px solid var(--line); }
.hero .eyebrow { display:block; margin-bottom:26px; }
.hero h1 {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(46px,7vw,82px); line-height:0.97; letter-spacing:-0.03em;
  margin:0 0 30px; max-width:1120px; text-wrap:balance;
}
.hero .dek { font-size:22px; line-height:1.55; color:var(--dim); max-width:720px; margin:0 0 34px; }
.post-meta {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:'Space Mono',ui-monospace,monospace; font-size:14px; color:var(--faint);
}
.post-meta .sep { color:var(--border); }

/* ============ TWO-UP / CARD GRID ============ */
.two-up { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.card { display:block; background:var(--bg); padding:48px 56px; transition:background .2s ease; }
.card:hover { background:var(--elev); }
.card .eyebrow { display:block; margin-bottom:18px; }
.card h3 {
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:30px;
  line-height:1.12; letter-spacing:-0.01em; margin:0 0 14px;
}
.card p { font-size:16px; line-height:1.6; color:var(--dim); margin:0 0 20px; }
.card .card-meta { font-family:'Space Mono',ui-monospace,monospace; font-size:13px; color:var(--faint); }

/* ============ LIST ROWS ============ */
.list-head {
  display:flex; align-items:center; justify-content:space-between; padding:30px 0 8px;
  font-family:'Space Mono',ui-monospace,monospace; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--faint);
}
.list-head a { color:var(--accent-ink); }
.row {
  display:grid; grid-template-columns:130px 1fr auto; gap:24px; align-items:center;
  padding:24px 0; border-top:1px solid var(--line);
}
.row:last-child { border-bottom:1px solid var(--line); }
.row .date, .row .time { font-family:'Space Mono',ui-monospace,monospace; font-size:13px; color:var(--faint); }
.row .kicker { font-family:'Space Mono',ui-monospace,monospace; font-size:11px; color:var(--accent-ink); margin-right:12px; text-transform:uppercase; }
.row .row-title { font-size:19px; font-weight:500; }

/* ============ SUBSCRIBE BAND ============ */
.subscribe {
  margin:56px; padding:52px 56px; border-radius:16px;
  background:var(--soft-bg); border:1px solid var(--soft-border);
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.subscribe h2 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:38px; letter-spacing:-0.02em; margin:0 0 10px; }
.subscribe h2 span { color:var(--accent-ink); }
.subscribe p { font-size:18px; color:var(--dim); margin:0; max-width:480px; }
.subscribe form { display:flex; gap:10px; }
.subscribe input {
  font-size:15px; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:8px; padding:13px 18px; width:280px; outline:none;
}
.subscribe button {
  font-family:'Space Mono',ui-monospace,monospace; font-size:14px; font-weight:700;
  color:var(--accent-text); background:var(--accent); border:none; border-radius:8px; padding:13px 22px; cursor:pointer;
}

/* ============ SINGLE POST ============ */
.article { max-width:720px; margin:0 auto; padding:72px 56px; }
.article .eyebrow { display:block; margin-bottom:22px; }
.article h1 {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(38px,5vw,54px); line-height:1.04; letter-spacing:-0.03em; margin:0 0 22px;
}
.article .byline {
  display:flex; gap:16px; flex-wrap:wrap; font-family:'Space Mono',ui-monospace,monospace;
  font-size:13px; color:var(--faint); padding-bottom:28px; border-bottom:1px solid var(--line); margin-bottom:38px;
}
.entry-content { font-size:19px; line-height:1.75; color:var(--dim); }
.entry-content > *:first-child { margin-top:0; }
.entry-content p { margin:0 0 24px; }
.entry-content h2 { font-family:'Space Grotesk',sans-serif; color:var(--text); font-weight:600; font-size:30px; letter-spacing:-0.01em; line-height:1.2; margin:44px 0 16px; }
.entry-content h3 { font-family:'Space Grotesk',sans-serif; color:var(--text); font-weight:600; font-size:23px; margin:36px 0 14px; }
.entry-content a { color:var(--accent-ink); border-bottom:1px solid var(--soft-border); }
.entry-content strong { color:var(--text); }
.entry-content blockquote {
  margin:34px 0; padding:8px 0 8px 28px; border-left:3px solid var(--accent);
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:26px; line-height:1.3;
  letter-spacing:-0.01em; color:var(--text);
}
.entry-content img { border-radius:10px; margin:32px 0; }
.entry-content ul, .entry-content ol { padding-left:22px; margin:0 0 24px; }
.entry-content li { margin-bottom:10px; }
.entry-content pre {
  background:var(--code-bg); border:1px solid var(--code-border); border-radius:10px;
  padding:20px 22px; overflow:auto; font-family:'Space Mono',ui-monospace,monospace;
  font-size:14px; line-height:1.7; color:var(--text); margin:0 0 26px;
}
.entry-content code {
  font-family:'Space Mono',ui-monospace,monospace; font-size:0.88em;
  background:var(--code-bg); border:1px solid var(--code-border); border-radius:5px; padding:2px 6px;
}
.entry-content pre code { background:none; border:none; padding:0; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; }
.tags a {
  font-family:'Space Mono',ui-monospace,monospace; font-size:12px; color:var(--dim);
  border:1px solid var(--border); border-radius:5px; padding:6px 12px;
}
.tags a:hover { border-color:var(--accent); color:var(--accent-ink); }

/* ============ PAGE (about etc) ============ */
.page-body { max-width:760px; margin:0 auto; padding:72px 56px; }
.page-body h1 {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(40px,5.5vw,60px); line-height:1.05; letter-spacing:-0.03em; margin:0 0 28px;
}

/* ============ FOOTER ============ */
.site-footer {
  padding:40px 0 56px; border-top:1px solid var(--line);
}
.site-footer .wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.site-footer .brand { font-size:16px; }
.footer-links { display:flex; gap:24px; font-family:'Space Mono',ui-monospace,monospace; font-size:13px; color:var(--dim); }
.footer-links a:hover { color:var(--accent-ink); }
.copyright { font-family:'Space Mono',ui-monospace,monospace; font-size:12px; color:var(--faint); }

/* ============ PAGINATION ============ */
.pagination { display:flex; gap:12px; justify-content:center; padding:48px 0 72px; }
.pagination a, .pagination span {
  font-family:'Space Mono',ui-monospace,monospace; font-size:13px; color:var(--dim);
  border:1px solid var(--border); border-radius:6px; padding:9px 15px;
}
.pagination .current { background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:700; }

/* ============ RESPONSIVE ============ */

/* Tablet & down: nav collapses into a toggleable drawer. */
@media (max-width:960px) {
  .site-header .wrap { position:relative; gap:16px; }
  .nav-toggle { display:inline-flex; }
  .main-nav {
    position:absolute; top:100%; left:0; right:0; z-index:40;
    background:var(--elev); border-bottom:1px solid var(--line);
    box-shadow:0 24px 48px rgba(0,0,0,0.28);
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .3s ease, opacity .2s ease;
  }
  .main-nav ul { flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 16px; }
  .main-nav li + li a { border-top:1px solid var(--line); }
  .main-nav a { padding:15px 0; font-size:17px; }
  .site-header.nav-open .main-nav { max-height:70vh; opacity:1; pointer-events:auto; }
}

/* Tablet portrait: single-column cards. */
@media (max-width:820px) {
  .wrap { padding:0 32px; }
  .two-up { grid-template-columns:1fr; }
  .hero { padding:64px 0 52px; }
  .subscribe { margin:32px; padding:40px 36px; }
  .article, .page-body { padding:56px 32px; }
}

/* Phone. */
@media (max-width:560px) {
  .wrap { padding:0 20px; }
  .site-header .wrap { padding-top:14px; padding-bottom:14px; }
  .brand { font-size:19px; }
  .btn-accent { display:none; }               /* keep header uncluttered; Subscribe lives in the footer band */
  .hero { padding:48px 0 40px; }
  .hero .dek { font-size:18px; }
  .card { padding:34px 24px; }
  .card h3 { font-size:26px; }
  .subscribe { margin:20px; padding:30px 24px; }
  .subscribe form { width:100%; }
  .subscribe input { width:100%; flex:1; }
  .subscribe button { white-space:nowrap; }
  .row { grid-template-columns:1fr auto; gap:14px; }
  .row .date { display:none; }
  .row .row-title { font-size:17px; }
  .article, .page-body { padding:44px 20px; }
  .entry-content { font-size:17px; }
  .site-footer .wrap { flex-direction:column; align-items:flex-start; gap:20px; }
}

/* Small phone: let the theme switch shrink gracefully. */
@media (max-width:380px) {
  .theme-switch button { padding:6px 9px; font-size:12px; }
  .header-actions { gap:10px; }
}