/*
Theme Name:  HitTheButton Pro
Theme URI:   https://hithebutton.co.uk
Description: SEO-optimised, child-friendly WordPress theme for Hit The Button maths game sites. Fully consistent design system, mobile-first, Core Web Vitals ready.
Version:     3.0
Author:      Hit The Button
Author URI:  https://hithebutton.co.uk
License:     GPL-2.0+
Text Domain: hithebutton
*/

/* ══════════════════════════════════════════════════════════
   DESIGN SYSTEM
   ══════════════════════════════════════════════════════════ */
:root {
  --c-primary : #1B3A8C;
  --c-primary-dark : #142d6e;
  --c-primary-light: #2d52c4;
  --c-accent  : #F59E0B;
  --c-accent-dark: #d97706;
  --c-teal    : #10B981;
  --c-teal-dark: #059669;
  --c-purple  : #7C3AED;
  --c-pink    : #EC4899;
  --c-white   : #ffffff;
  --c-off-white: #F8FAFF;
  --c-light   : #EEF2FF;
  --c-border  : #E2E8F0;
  --c-text    : #1e293b;
  --c-text-2  : #475569;
  --c-text-3  : #94a3b8;
  --font-head : 'Nunito', sans-serif;
  --font-body : 'Nunito', sans-serif;
  --rad-sm    : 8px;
  --rad       : 14px;
  --rad-lg    : 20px;
  --shadow-sm : 0 2px 8px rgba(27,58,140,.08);
  --shadow    : 0 4px 20px rgba(27,58,140,.12);
  --shadow-lg : 0 8px 40px rgba(27,58,140,.18);
  --max-w     : 1180px;
  --transition: .22s ease;
}

/* ── Reset & base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color      : var(--c-text);
  background : var(--c-off-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-accent); }
ul, ol { padding-left: 1.4rem; }

/* ── Typography ────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-head);
  font-weight: 900;
  color      : var(--c-primary);
  line-height: 1.2;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.55rem); }
h4 { font-size: 1.15rem; }
p  { margin-bottom: 1rem; color: var(--c-text-2); }
p:last-child { margin-bottom: 0; }

/* ── Container ─────────────────────────────────────────── */
.htb-container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.2rem; }

/* ── Section spacing ───────────────────────────────────── */
.htb-section { padding: 4rem 0; }
.htb-section-sm { padding: 2.5rem 0; }

/* ── Buttons ───────────────────────────────────────────── */
.htb-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : .45rem;
  font-family    : var(--font-head);
  font-weight    : 800;
  font-size      : 1rem;
  padding        : .75rem 1.8rem;
  border-radius  : var(--rad);
  border         : none;
  cursor         : pointer;
  transition     : all var(--transition);
  text-decoration: none;
  white-space    : nowrap;
}
.htb-btn-primary {
  background : linear-gradient(135deg,var(--c-accent),var(--c-accent-dark));
  color      : #1a1a1a;
  box-shadow : 0 4px 16px rgba(245,158,11,.38);
}
.htb-btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 24px rgba(245,158,11,.5); color: #1a1a1a; }
.htb-btn-blue {
  background : linear-gradient(135deg,var(--c-primary-light),var(--c-primary));
  color      : white;
  box-shadow : 0 4px 16px rgba(27,58,140,.3);
}
.htb-btn-blue:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,58,140,.4); color: white; }
.htb-btn-outline {
  background   : transparent;
  color        : var(--c-primary);
  border       : 2px solid var(--c-primary);
}
.htb-btn-outline:hover { background: var(--c-primary); color: white; transform: translateY(-1px); }
.htb-btn-sm  { font-size: .85rem; padding: .5rem 1.2rem; }
.htb-btn-lg  { font-size: 1.15rem; padding: .95rem 2.5rem; }

/* ── Cards ─────────────────────────────────────────────── */
.htb-card {
  background   : var(--c-white);
  border-radius: var(--rad);
  box-shadow   : var(--shadow-sm);
  border       : 1px solid var(--c-border);
  overflow     : hidden;
  transition   : transform var(--transition), box-shadow var(--transition);
}
.htb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* ── Badges ────────────────────────────────────────────── */
.htb-badge {
  display     : inline-block;
  font-size   : .72rem;
  font-weight : 700;
  padding     : .25rem .65rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.htb-badge-primary { background: var(--c-light); color: var(--c-primary); }
.htb-badge-accent  { background: #fef3c7; color: #92400e; }
.htb-badge-teal    { background: #d1fae5; color: #065f46; }
.htb-badge-new     { background: #fee2e2; color: #991b1b; }

/* ══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
.site-header {
  background : linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
  box-shadow : 0 2px 20px rgba(11,22,64,.3);
  position   : sticky;
  top        : 0;
  z-index    : 999;
}
.htb-header-inner {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : .85rem 1.2rem;
  max-width      : var(--max-w);
  margin         : 0 auto;
  gap            : 1rem;
}

/* Logo */
.htb-logo {
  display    : flex;
  align-items: center;
  gap        : .6rem;
  text-decoration: none;
  flex-shrink: 0;
}
.htb-logo-icon {
  width        : 42px;
  height       : 42px;
  background   : linear-gradient(135deg, var(--c-accent), #e07b00);
  border-radius: 12px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 1.4rem;
  box-shadow   : 0 3px 10px rgba(0,0,0,.25);
  flex-shrink  : 0;
}
.htb-logo-text { line-height:1; }
.htb-logo-name {
  font-size  : 1.15rem;
  font-weight: 900;
  color      : var(--c-white);
  display    : block;
}
.htb-logo-sub {
  font-size  : .65rem;
  color      : rgba(255,255,255,.65);
  display    : block;
  font-weight: 600;
}

/* Nav */
.htb-nav { display: flex; align-items: center; gap: .2rem; }
.htb-nav a {
  color      : rgba(255,255,255,.85);
  font-weight: 700;
  font-size  : .9rem;
  padding    : .45rem .85rem;
  border-radius: 8px;
  transition : all var(--transition);
}
.htb-nav a:hover, .htb-nav a.current-menu-item { background: rgba(255,255,255,.15); color: var(--c-white); }

/* Play Now button in nav */
.htb-nav-cta {
  background : linear-gradient(135deg,var(--c-accent),var(--c-accent-dark)) !important;
  color      : #1a1a1a !important;
  border-radius: 10px !important;
  padding    : .45rem 1.1rem !important;
  box-shadow : 0 3px 12px rgba(245,158,11,.4);
}
.htb-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(245,158,11,.5) !important; }

/* Mobile menu button */
.htb-menu-toggle {
  display    : none;
  background : rgba(255,255,255,.15);
  border     : 1.5px solid rgba(255,255,255,.3);
  color      : white;
  border-radius: 8px;
  padding    : .45rem .7rem;
  font-size  : 1.2rem;
  cursor     : pointer;
}

/* ══════════════════════════════════════════════════════════
   HERO  (homepage)
   ══════════════════════════════════════════════════════════ */
.htb-hero {
  background : linear-gradient(135deg, var(--c-primary) 0%, #1a2a7a 40%, #0e1b5e 100%);
  padding    : 4rem 1.2rem 3rem;
  position   : relative;
  overflow   : hidden;
}
/* Decorative circles */
.htb-hero::before, .htb-hero::after {
  content  : '';
  position : absolute;
  border-radius: 50%;
  pointer-events: none;
}
.htb-hero::before {
  width: 500px; height: 500px;
  background: rgba(245,158,11,.07);
  top: -200px; right: -150px;
}
.htb-hero::after {
  width: 300px; height: 300px;
  background: rgba(16,185,129,.07);
  bottom: -100px; left: -80px;
}

.htb-hero-inner {
  max-width : var(--max-w);
  margin    : 0 auto;
  display   : grid;
  grid-template-columns: 1fr 1fr;
  gap       : 3rem;
  align-items: center;
  position  : relative; z-index: 2;
}
.htb-hero-badge { margin-bottom: 1rem; }
.htb-hero-title {
  font-size : clamp(2.2rem, 5vw, 3.5rem);
  color     : var(--c-white);
  margin-bottom: 1rem;
  line-height  : 1.1;
}
.htb-hero-title .htb-highlight {
  color      : var(--c-accent);
  display    : block;
  font-style : italic;
}
.htb-hero-desc {
  font-size  : 1.1rem;
  color      : rgba(255,255,255,.8);
  margin-bottom: 2rem;
  line-height: 1.6;
}
.htb-hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.htb-hero-stats {
  display      : flex;
  gap          : 1.5rem;
  flex-wrap    : wrap;
  margin-top   : 2rem;
  padding-top  : 1.5rem;
  border-top   : 1px solid rgba(255,255,255,.1);
}
.htb-hero-stat { text-align: center; }
.htb-hero-stat-num {
  font-size  : 1.8rem;
  font-weight: 900;
  color      : var(--c-accent);
  display    : block;
}
.htb-hero-stat-lbl {
  font-size  : .78rem;
  color      : rgba(255,255,255,.6);
  font-weight: 600;
}
/* Hero visual side */
.htb-hero-visual {
  display        : flex;
  align-items    : center;
  justify-content: center;
}
.htb-hero-game-preview {
  background   : rgba(255,255,255,.06);
  border       : 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding      : 2rem;
  text-align   : center;
  backdrop-filter: blur(10px);
  width        : 100%;
  max-width    : 360px;
}
.htb-preview-question {
  font-size  : 3rem;
  font-weight: 900;
  color      : #fde047;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 20px rgba(253,224,71,.4);
}
.htb-preview-buttons {
  display              : grid;
  grid-template-columns: repeat(3,1fr);
  gap                  : .7rem;
  justify-items        : center;
}
.htb-preview-btn {
  width       : 70px; height: 70px;
  border-radius: 50%;
  background  : radial-gradient(circle at 35% 30%,#ffb347,#f97316 60%,#e65c00);
  border      : 3px solid #fbbf24;
  color       : white;
  font-size   : 1.3rem;
  font-weight : 900;
  display     : flex; align-items: center; justify-content: center;
  box-shadow  : 0 5px 0 rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.25);
  font-family : var(--font-head);
  cursor      : default;
}
.htb-preview-btn.htb-btn-correct {
  background: radial-gradient(circle at 35% 30%,#86efac,#22c55e 60%,#16a34a);
  border-color: #4ade80;
  box-shadow: 0 0 20px rgba(34,197,94,.6);
}

/* ══════════════════════════════════════════════════════════
   GAME MODES GRID
   ══════════════════════════════════════════════════════════ */
.htb-modes-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(175px,1fr));
  gap                  : 1.2rem;
}
.htb-mode-card {
  background   : var(--c-white);
  border-radius: var(--rad);
  padding      : 1.4rem 1rem;
  text-align   : center;
  border       : 2px solid var(--c-border);
  transition   : all var(--transition);
  cursor       : pointer;
  text-decoration: none;
  display      : block;
}
.htb-mode-card:hover {
  border-color : var(--c-primary);
  transform    : translateY(-4px);
  box-shadow   : var(--shadow);
}
.htb-mode-icon {
  width        : 60px; height: 60px;
  border-radius: 50%;
  display      : flex; align-items: center; justify-content: center;
  font-size    : 1.7rem;
  margin       : 0 auto .8rem;
}
.htb-mode-title  { font-size: 1rem; font-weight: 800; color: var(--c-primary); margin-bottom: .3rem; }
.htb-mode-desc   { font-size: .78rem; color: var(--c-text-3); }

/* ══════════════════════════════════════════════════════════
   FEATURES / INFO SECTIONS
   ══════════════════════════════════════════════════════════ */
.htb-features-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap                  : 1.5rem;
}
.htb-feature-item {
  background   : var(--c-white);
  border-radius: var(--rad);
  padding      : 1.6rem;
  border       : 1px solid var(--c-border);
  box-shadow   : var(--shadow-sm);
}
.htb-feature-icon {
  font-size    : 2rem;
  margin-bottom: .8rem;
  display      : block;
}
.htb-feature-title { font-size: 1.05rem; font-weight: 800; margin-bottom: .4rem; }
.htb-feature-text  { font-size: .88rem; color: var(--c-text-2); }

/* ══════════════════════════════════════════════════════════
   AUDIENCE TABS (Teachers / Parents / Children)
   ══════════════════════════════════════════════════════════ */
.htb-audience-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap                  : 1.5rem;
}
.htb-audience-card {
  border-radius: var(--rad);
  padding      : 2rem 1.6rem;
  color        : white;
  position     : relative;
  overflow     : hidden;
}
.htb-audience-card::before {
  content  : '';
  position : absolute;
  width    : 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  top: -40px; right: -40px;
}
.htb-audience-card.htb-card-teachers { background: linear-gradient(135deg,var(--c-primary),var(--c-primary-light)); }
.htb-audience-card.htb-card-parents  { background: linear-gradient(135deg,var(--c-teal-dark),var(--c-teal)); }
.htb-audience-card.htb-card-children { background: linear-gradient(135deg,#7C3AED,#a855f7); }
.htb-audience-emoji { font-size: 2.4rem; display: block; margin-bottom: .7rem; }
.htb-audience-title { font-size: 1.25rem; font-weight: 900; color: white; margin-bottom: .5rem; }
.htb-audience-text  { font-size: .9rem; color: rgba(255,255,255,.82); margin-bottom: 1rem; }
.htb-audience-list  { list-style: none; padding: 0; }
.htb-audience-list li {
  font-size    : .85rem;
  color        : rgba(255,255,255,.85);
  padding      : .3rem 0;
  display      : flex;
  align-items  : flex-start;
  gap          : .5rem;
}
.htb-audience-list li::before { content: '✓'; color: #4ade80; font-weight: 900; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   STATS BAR
   ══════════════════════════════════════════════════════════ */
.htb-stats-bar {
  background : linear-gradient(135deg,var(--c-primary),var(--c-primary-light));
  padding    : 2.5rem 1.2rem;
}
.htb-stats-bar-inner {
  max-width      : var(--max-w);
  margin         : 0 auto;
  display        : grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap            : 1.5rem;
  text-align     : center;
}
.htb-stat-item2 {}
.htb-stat-num2 { font-size: 2.4rem; font-weight: 900; color: var(--c-accent); display: block; }
.htb-stat-lbl2 { font-size: .78rem; color: rgba(255,255,255,.7); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* ══════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════ */
.htb-breadcrumb {
  background : var(--c-light);
  padding    : .6rem 1.2rem;
  font-size  : .82rem;
  color      : var(--c-text-3);
  border-bottom: 1px solid var(--c-border);
}
.htb-breadcrumb-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.htb-breadcrumb a     { color: var(--c-primary); font-weight: 600; }
.htb-breadcrumb span  { color: var(--c-text-3); }

/* ══════════════════════════════════════════════════════════
   PAGE HEADER (inner pages)
   ══════════════════════════════════════════════════════════ */
.htb-page-header {
  background : linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-light) 100%);
  padding    : 2.5rem 1.2rem 2rem;
  text-align : center;
  position   : relative;
  overflow   : hidden;
}
.htb-page-header::before {
  content: ''; position: absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.htb-page-title { color: var(--c-white); margin-bottom: .5rem; font-size: clamp(1.7rem,4vw,2.6rem); position:relative; }
.htb-page-subtitle { color: rgba(255,255,255,.75); font-size: 1rem; position:relative; max-width: 600px; margin: 0 auto; }

/* ── Live badge ── */
.htb-live-badge {
  display    : inline-flex; align-items: center; gap: .4rem;
  background : rgba(34,197,94,.2);
  border     : 1px solid rgba(34,197,94,.4);
  color      : #86efac;
  font-size  : .72rem;
  font-weight: 700;
  padding    : .25rem .7rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .7rem;
}
.htb-live-dot {
  width: 7px; height: 7px;
  background: #22c55e;
  border-radius: 50%;
  animation: htb-pulse 1.6s ease infinite;
}
@keyframes htb-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

/* ══════════════════════════════════════════════════════════
   FAQ ACCORDION
   ══════════════════════════════════════════════════════════ */
.htb-faq { max-width: 760px; margin: 0 auto; }
.htb-faq-item {
  border        : 1px solid var(--c-border);
  border-radius : var(--rad-sm);
  margin-bottom : .7rem;
  overflow      : hidden;
  background    : var(--c-white);
}
.htb-faq-q {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 1rem 1.2rem;
  cursor         : pointer;
  font-weight    : 700;
  color          : var(--c-primary);
  font-size      : .95rem;
  user-select    : none;
  gap            : .8rem;
}
.htb-faq-q:hover { background: var(--c-light); }
.htb-faq-icon { font-size: 1.1rem; transition: transform .25s; flex-shrink: 0; }
.htb-faq-item.open .htb-faq-icon { transform: rotate(45deg); }
.htb-faq-a {
  display : none;
  padding : 0 1.2rem 1rem;
  font-size: .9rem;
  color   : var(--c-text-2);
  line-height: 1.65;
}
.htb-faq-item.open .htb-faq-a { display: block; }

/* ══════════════════════════════════════════════════════════
   BLOG / POSTS
   ══════════════════════════════════════════════════════════ */
.htb-posts-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  gap                  : 1.5rem;
}
.htb-post-card {
  background   : var(--c-white);
  border-radius: var(--rad);
  overflow     : hidden;
  border       : 1px solid var(--c-border);
  box-shadow   : var(--shadow-sm);
  transition   : all var(--transition);
  display      : flex;
  flex-direction: column;
}
.htb-post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.htb-post-thumb img { width:100%; height:190px; object-fit:cover; }
.htb-post-thumb-placeholder {
  height       : 150px;
  display      : flex; align-items: center; justify-content: center;
  font-size    : 3rem;
}
.htb-post-body { padding: 1.3rem 1.4rem 1.5rem; flex:1; display:flex; flex-direction:column; }
.htb-post-meta  { font-size: .75rem; color: var(--c-text-3); margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.htb-post-title { font-size: 1.05rem; font-weight: 800; color: var(--c-primary); margin-bottom: .5rem; }
.htb-post-title a:hover { color: var(--c-accent); }
.htb-post-excerpt { font-size: .88rem; color: var(--c-text-2); flex:1; margin-bottom: 1rem; }
.htb-post-link { font-size: .85rem; font-weight: 700; color: var(--c-primary); }
.htb-post-link:hover { color: var(--c-accent); }

/* ── Single post ── */
.htb-single-layout { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start; max-width:var(--max-w); margin:0 auto; padding:2rem 1.2rem; }
.htb-single-content { min-width:0; }
.htb-single-content img { border-radius:var(--rad-sm); margin:1.5rem 0; }
.htb-single-content h2,h3 { margin:1.6rem 0 .6rem; }
.htb-single-content ul,ol { margin:.8rem 0 1rem 1.5rem; }
.htb-single-content li { margin-bottom:.4rem; color:var(--c-text-2); }
.htb-single-content table { width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.9rem; }
.htb-single-content th { background:var(--c-primary); color:white; padding:.6rem .9rem; text-align:left; }
.htb-single-content td { padding:.55rem .9rem; border-bottom:1px solid var(--c-border); }
.htb-single-content tr:hover td { background:var(--c-light); }
.htb-single-content blockquote {
  border-left:4px solid var(--c-accent); background:var(--c-light);
  padding:1rem 1.2rem; border-radius:0 var(--rad-sm) var(--rad-sm) 0;
  margin:1.2rem 0; font-style:italic; color:var(--c-primary);
}
.htb-single-content code {
  background: #f1f5f9; color: #be185d;
  padding: .15rem .4rem; border-radius:4px; font-size:.88em;
}
.htb-single-content pre { background:#1e293b; color:#e2e8f0; padding:1.2rem; border-radius:var(--rad-sm); overflow:auto; margin:1.2rem 0; }

/* ── Sidebar ── */
.htb-sidebar { position:sticky; top:80px; }
.htb-sidebar-widget {
  background:var(--c-white); border-radius:var(--rad); padding:1.4rem; border:1px solid var(--c-border);
  box-shadow:var(--shadow-sm); margin-bottom:1.5rem;
}
.htb-sidebar-title { font-size:1rem; font-weight:900; color:var(--c-primary); margin-bottom:1rem; padding-bottom:.6rem; border-bottom:2px solid var(--c-border); }

/* ── Pagination ── */
.htb-pagination { display:flex; gap:.5rem; justify-content:center; padding:2rem 0; flex-wrap:wrap; }
.htb-pagination a,
.htb-pagination span {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--rad-sm);
  font-weight:700; font-size:.9rem;
}
.htb-pagination a { background:var(--c-white); color:var(--c-primary); border:1px solid var(--c-border); }
.htb-pagination a:hover { background:var(--c-primary); color:white; border-color:var(--c-primary); }
.htb-pagination .current { background:var(--c-primary); color:white; border:1px solid var(--c-primary); }

/* ══════════════════════════════════════════════════════════
   RELATED GAMES (used on game pages)
   ══════════════════════════════════════════════════════════ */
.htb-related-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(175px,1fr));
  gap                  : 1rem;
}
.htb-related-card {
  background   : var(--c-white);
  border-radius: var(--rad);
  padding      : 1.2rem;
  text-align   : center;
  border       : 2px solid var(--c-border);
  transition   : all var(--transition);
  text-decoration: none;
}
.htb-related-card:hover { border-color:var(--c-primary); transform:translateY(-3px); box-shadow:var(--shadow); }
.htb-related-icon  { font-size:2rem; display:block; margin-bottom:.5rem; }
.htb-related-title { font-size:.9rem; font-weight:800; color:var(--c-primary); }
.htb-related-sub   { font-size:.75rem; color:var(--c-text-3); margin-top:.2rem; }
.htb-related-play  { margin-top:.6rem; font-size:.8rem; font-weight:700; color:var(--c-accent); }

/* ══════════════════════════════════════════════════════════
   PROGRESS / TRACK WIDGET (sidebar)
   ══════════════════════════════════════════════════════════ */
.htb-progress-widget {
  background: linear-gradient(135deg,var(--c-primary),var(--c-primary-light));
  border-radius:var(--rad); padding:1.4rem; color:white;
}
.htb-pw-title { font-size:.95rem; font-weight:900; color:white; margin-bottom:.8rem; }
.htb-pw-text  { font-size:.82rem; color:rgba(255,255,255,.8); margin-bottom:1rem; }

/* ══════════════════════════════════════════════════════════
   MTC PREP BANNER
   ══════════════════════════════════════════════════════════ */
.htb-mtc-banner {
  background   : linear-gradient(135deg,#7C3AED,#a855f7);
  border-radius: var(--rad);
  padding      : 1.4rem;
  color        : white;
  margin-bottom: 1.5rem;
}
.htb-mtc-title { font-size:.95rem; font-weight:900; color:white; margin-bottom:.4rem; }
.htb-mtc-text  { font-size:.82rem; color:rgba(255,255,255,.82); margin-bottom:.8rem; }

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.site-footer {
  background : var(--c-primary);
  color      : rgba(255,255,255,.8);
  margin-top : 4rem;
}
.htb-footer-top {
  max-width     : var(--max-w);
  margin        : 0 auto;
  padding       : 3rem 1.2rem 2rem;
  display       : grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap           : 2rem;
}
.htb-footer-brand .htb-logo { margin-bottom: 1rem; }
.htb-footer-desc { font-size:.88rem; color:rgba(255,255,255,.65); line-height:1.65; margin-bottom:1rem; }
.htb-footer-social { display:flex; gap:.6rem; }
.htb-footer-social a {
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; transition:all var(--transition);
}
.htb-footer-social a:hover { background:var(--c-accent); color:#1a1a1a; transform:translateY(-2px); }

.htb-footer-col h4 { font-size:.85rem; font-weight:900; color:var(--c-white); text-transform:uppercase; letter-spacing:.07em; margin-bottom:1rem; }
.htb-footer-col ul { list-style:none; padding:0; }
.htb-footer-col ul li { margin-bottom:.5rem; }
.htb-footer-col ul li a { font-size:.85rem; color:rgba(255,255,255,.65); transition:color var(--transition); }
.htb-footer-col ul li a:hover { color:var(--c-accent); }

.htb-footer-bottom {
  border-top : 1px solid rgba(255,255,255,.1);
  max-width  : var(--max-w);
  margin     : 0 auto;
  padding    : 1.2rem;
  display    : flex;
  align-items: center;
  justify-content: space-between;
  gap        : 1rem;
  flex-wrap  : wrap;
}
.htb-footer-copy { font-size:.8rem; color:rgba(255,255,255,.5); }
.htb-footer-links { display:flex; gap:1.2rem; }
.htb-footer-links a { font-size:.8rem; color:rgba(255,255,255,.5); }
.htb-footer-links a:hover { color:var(--c-accent); }

/* ══════════════════════════════════════════════════════════
   UTILITY
   ══════════════════════════════════════════════════════════ */
.htb-text-center  { text-align: center; }
.htb-section-title { text-align:center; margin-bottom:2.5rem; }
.htb-section-title h2 { margin-bottom:.5rem; }
.htb-section-title p  { color:var(--c-text-2); max-width:600px; margin:0 auto; }
.htb-divider { border:none; border-top:2px solid var(--c-border); margin:2.5rem 0; }

/* Screen-reader only */
.sr-only { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* Skip link */
.skip-link { position:absolute;top:-40px;left:1rem;background:var(--c-primary);color:white;padding:.5rem 1rem;border-radius:var(--rad-sm);font-weight:700;z-index:9999;transition:top .2s; }
.skip-link:focus { top:1rem; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .htb-footer-top { grid-template-columns:1fr 1fr; }
  .htb-single-layout { grid-template-columns:1fr; }
  .htb-sidebar { position:static; }
}
@media (max-width:768px){
  .htb-hero-inner { grid-template-columns:1fr; }
  .htb-hero-visual { display:none; }
  .htb-nav { display:none; }
  .htb-nav.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--c-primary-dark); padding:1rem; z-index:999; gap:.3rem; }
  .htb-menu-toggle { display:flex; align-items:center; }
  .htb-footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .htb-hero { padding:2.5rem 1rem 2rem; }
  .htb-hero-btns { flex-direction:column; }
  .htb-footer-top { grid-template-columns:1fr; }
  .htb-footer-bottom { flex-direction:column; text-align:center; }
  .htb-section { padding:2.5rem 0; }
}

/* ── WordPress specific fixes ──────────────────────────── */
.wp-block-image img { border-radius:var(--rad-sm); }
.aligncenter { text-align:center; margin:1.5rem auto; }
.alignleft   { float:left; margin:0 1.5rem 1rem 0; }
.alignright  { float:right; margin:0 0 1rem 1.5rem; }
.wp-caption  { font-size:.82rem; color:var(--c-text-3); }

/* Comments */
#comments { max-width:var(--max-w); margin:2rem auto; padding:0 1.2rem; }
.comment-list { list-style:none; padding:0; }
.comment { border:1px solid var(--c-border); border-radius:var(--rad); padding:1.2rem; margin-bottom:1rem; background:var(--c-white); }