/* ════════════════════════════════════════════════════════════════════
   PINOY GAME APPS — DESIGN SYSTEM (HYBRID)
   Brand red kept · Plus Jakarta Sans replaces Tahoma · modern layout

   Naming: BEM-ish with `pga-` prefix
     .pga-block          → component root
     .pga-block__elem    → component element
     .pga-block--mod     → component modifier
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* ─ Brand: red as the single accent color ─────────────────────── */
  --pga-brand:          #C62828;   /* your red — kept */
  --pga-brand-dark:     #9A1F1F;   /* hover / pressed states */
  --pga-brand-light:    #FEE8E8;   /* subtle wash backgrounds */
  --pga-brand-tint:     #FDF4F4;   /* even softer wash */

  /* ─ Surfaces: neutral white/grays ─────────────────────────────── */
  --pga-bg:             #FAFAFA;   /* page background, subtle off-white */
  --pga-surface:        #FFFFFF;   /* cards, panels */
  --pga-surface-2:      #F4F4F4;   /* alt sections */
  --pga-surface-3:      #EAEAEA;

  /* ─ Text: black-leaning ───────────────────────────────────────── */
  --pga-text:           #0A0A0A;   /* primary, near-black */
  --pga-text-2:         #2A2A2A;   /* secondary */
  --pga-text-muted:     #5C5C5C;   /* meta, captions */
  --pga-text-soft:      #8A8A8A;   /* tertiary */

  /* ─ Lines ──────────────────────────────────────────────────────── */
  --pga-line:           #E8E8E8;
  --pga-line-strong:    #D0D0D0;

  /* ─ Stars / ratings (gold kept ONLY for ratings — universal) ──── */
  --pga-star:           #F59E0B;
  --pga-star-soft:      #FCD34D;

  /* ─ Semantic ──────────────────────────────────────────────────── */
  --pga-success:        #16A34A;   /* live-dot only */
  --pga-warning:        #B45309;
  --pga-warning-bg:     #FEF7E6;
  --pga-warning-border: #F5D78F;

  /* ─ Type ──────────────────────────────────────────────────────── */
  --pga-font:      "Plus Jakarta Sans", "Tahoma", -apple-system, BlinkMacSystemFont, sans-serif;
  --pga-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* Type scale matches your Elementor globals (desktop):
     H1=40 · H2=30 · H3=20 · H4=18 · H5/H6=16 · Body=16/18 · Prose=20 */
  --pga-h1:   clamp(28px, 5vw, 40px);
  --pga-h2:   clamp(24px, 4vw, 30px);
  --pga-h3:   clamp(18px, 2.5vw, 20px);
  --pga-h4:   18px;
  --pga-h5:   16px;
  --pga-body: 16px;
  --pga-lede: 18px;
  --pga-prose: 18px;     /* prose paragraphs slightly under your 20px global for density */

  /* ─ Sizing ────────────────────────────────────────────────────── */
  --pga-container:        1120px;
  --pga-container-narrow:  760px;
  --pga-radius-sm:   8px;
  --pga-radius:     12px;
  --pga-radius-lg:  16px;
  --pga-radius-xl:  24px;

  /* ─ Shadows ───────────────────────────────────────────────────── */
  --pga-shadow-sm:  0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --pga-shadow:     0 4px 12px -2px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --pga-shadow-lg:  0 12px 32px -8px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.06);

  /* ─ Motion ────────────────────────────────────────────────────── */
  --pga-ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --pga-fast:  150ms;
  --pga-base:  200ms;
}

/* ─── 2. RESET + BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.pga-body {
  margin: 0;
  font-family: var(--pga-font);
  background: var(--pga-bg);
  color: var(--pga-text);
  line-height: 1.55;
  font-size: var(--pga-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pga-body img { max-width: 100%; display: block; }
.pga-body a   { color: inherit; text-decoration: none; }

.pga-body h1, .pga-body h2, .pga-body h3,
.pga-body h4, .pga-body h5, .pga-body h6 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pga-text);
  line-height: 1.2;
}

.pga-body h1 { font-size: var(--pga-h1); }
.pga-body h2 { font-size: var(--pga-h2); }
.pga-body h3 { font-size: var(--pga-h3); }
.pga-body h4 { font-size: var(--pga-h4); }
.pga-body h5, .pga-body h6 { font-size: var(--pga-h5); }

.pga-body p { margin: 0; }

.pga-container {
  width: 100%;
  max-width: var(--pga-container);
  margin: 0 auto;
  padding: 0 20px;
}

.pga-container--narrow { max-width: var(--pga-container-narrow); }

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

/* ─── 3. HEADER / NAV ──────────────────────────────────────────────── */
.pga-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 250, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pga-line);
}

.pga-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}

.pga-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.025em;
  color: var(--pga-text);
}

.pga-logo__mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--pga-brand);
  display: grid; place-items: center;
  color: var(--pga-surface);
  position: relative;
  box-shadow: 0 1px 2px rgba(198, 40, 40, 0.25);
}

.pga-logo__sub {
  display: none;
  font-size: 11px;
  font-weight: 500;
  color: var(--pga-text-muted);
  letter-spacing: 0;
  text-transform: uppercase;
  margin-left: 2px;
}

.pga-nav {
  display: none;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}

.pga-nav a {
  color: var(--pga-text-2);
  transition: color var(--pga-fast) var(--pga-ease);
}
.pga-nav a:hover { color: var(--pga-brand); }

.pga-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pga-text);
  color: var(--pga-surface) !important;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--pga-fast) var(--pga-ease);
  white-space: nowrap;
}
.pga-header__cta:hover {
  background: var(--pga-brand);
  transform: translateY(-1px);
  box-shadow: var(--pga-shadow);
}

@media (min-width: 768px) {
  .pga-logo { font-size: 19px; }
  .pga-logo__sub { display: inline; }
  .pga-nav { display: flex; }
  .pga-header__inner { padding: 16px 0; }
}

/* ─── 4. HERO ──────────────────────────────────────────────────────── */
.pga-hero {
  position: relative;
  padding: 56px 0 40px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(198, 40, 40, 0.06), transparent 70%),
    var(--pga-bg);
}

.pga-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--pga-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pga-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 600px 280px at 50% 30%, rgba(0,0,0,0.16), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 600px 280px at 50% 30%, rgba(0,0,0,0.16), transparent 70%);
}

.pga-hero__content {
  position: relative;
  z-index: 1;
  text-align: center !important;
}

.pga-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--pga-line-strong);
  background: var(--pga-surface);
  border-radius: 999px;
  font-family: var(--pga-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pga-brand);
  margin-bottom: 20px;
}

.pga-hero__eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pga-success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  animation: pga-pulse 2s ease-in-out infinite;
}
@keyframes pga-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.pga-hero__title {
  font-size: var(--pga-h1);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 auto 16px;
  text-align: center !important;
}
.pga-hero__title em {
  font-style: normal;
  color: var(--pga-brand);
  position: relative;
  white-space: nowrap;
}
.pga-hero__title em::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  bottom: 0.04em;
  height: 0.16em;
  background: var(--pga-brand);
  opacity: 0.18;
  z-index: -1;
  border-radius: 2px;
}

.pga-hero__lede {
  font-size: var(--pga-lede);
  line-height: 1.6;
  color: var(--pga-text-2);
  margin: 0 auto 28px;
  text-align: center !important;
}

.pga-hero__trust {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 14px 24px;
  background: var(--pga-surface);
  border: 1px solid var(--pga-line);
  border-radius: 999px;
  box-shadow: var(--pga-shadow-sm);
  margin-bottom: 8px;
}
.pga-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pga-text-2);
}
.pga-hero__trust-item svg {
  flex-shrink: 0;
  color: var(--pga-brand);
}

@media (min-width: 768px) { .pga-hero { padding: 88px 0 64px; } }

/* ─── 5. SECTION SCAFFOLDING ───────────────────────────────────────── */
.pga-section { padding: 56px 0; }
.pga-section--alt { background: var(--pga-surface-2); }

.pga-section__head {
  margin-bottom: 32px;
  text-align: center !important;
}

.pga-eyebrow {
  display: inline-block;
  font-family: var(--pga-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pga-brand);
  margin-bottom: 10px;
}

.pga-section__title {
  font-size: var(--pga-h2);
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}

.pga-section__sub {
  font-size: var(--pga-body);
  color: var(--pga-text-muted);
  margin: 0 auto;
  text-align: center !important;
}

@media (min-width: 768px) { .pga-section { padding: 80px 0; } }

/* ─── 6. RANKED APP CARDS ───────────────────────────────────────────── */
.pga-apps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.pga-app {
  background: var(--pga-surface);
  border: 1px solid var(--pga-line);
  border-radius: var(--pga-radius-lg);
  padding: 16px;
  display: grid;
  grid-template-columns: auto 64px 1fr;
  gap: 14px;
  align-items: center;
  transition: all var(--pga-base) var(--pga-ease);
  position: relative;
}
.pga-app:hover {
  border-color: var(--pga-line-strong);
  transform: translateY(-2px);
  box-shadow: var(--pga-shadow);
}

.pga-app--featured {
  border-color: var(--pga-brand);
  background:
    linear-gradient(180deg, var(--pga-brand-tint) 0%, var(--pga-surface) 100%);
}

.pga-app__rank {
  font-family: var(--pga-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--pga-text-soft);
  width: 28px;
  text-align: center;
  letter-spacing: -0.02em;
}
.pga-app--featured .pga-app__rank {
  color: var(--pga-brand);
}

.pga-app__icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--pga-surface-3);
  box-shadow: 0 0 0 1px var(--pga-line) inset;
  flex-shrink: 0;
}

.pga-app__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pga-app__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pga-app__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--pga-text);
}

.pga-app__tag {
  font-family: var(--pga-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--pga-text);
  color: var(--pga-surface);
  line-height: 1.4;
}
.pga-app__tag--hot {
  background: var(--pga-brand-light);
  color: var(--pga-brand);
}

.pga-app__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 13px;
  color: var(--pga-text-muted);
  line-height: 1.4;
}
.pga-app__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pga-app__meta-item svg {
  color: var(--pga-text-soft);
  flex-shrink: 0;
}
.pga-app__bonus {
  color: var(--pga-brand);
  font-weight: 600;
}
.pga-app__bonus svg { color: var(--pga-brand); }

.pga-app__actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--pga-line);
}

@media (min-width: 640px) {
  .pga-app {
    grid-template-columns: auto 64px 1fr auto;
    gap: 16px;
  }
  .pga-app__actions {
    grid-column: auto;
    grid-template-columns: auto auto;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    gap: 8px;
  }
}

/* ─── 7. BUTTONS ───────────────────────────────────────────────────── */
.pga-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all var(--pga-fast) var(--pga-ease);
  white-space: nowrap;
  text-decoration: none !important;
  line-height: 1;
}
.pga-btn svg { flex-shrink: 0; }

.pga-btn--primary {
  background: var(--pga-text);
  color: var(--pga-surface) !important;
  border-color: var(--pga-text);
}
.pga-btn--primary:hover {
  background: var(--pga-brand);
  border-color: var(--pga-brand);
  transform: translateY(-1px);
  box-shadow: var(--pga-shadow);
}

.pga-btn--secondary {
  background: var(--pga-surface);
  color: var(--pga-text-2) !important;
  border-color: var(--pga-line-strong);
}
.pga-btn--secondary:hover {
  background: var(--pga-surface-2);
  border-color: var(--pga-text-2);
  color: var(--pga-text) !important;
}

.pga-btn--lg { font-size: 14px; padding: 12px 20px; }

/* ─── 8. CATEGORY GRID ─────────────────────────────────────────────── */
.pga-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.pga-cat {
  background: var(--pga-surface);
  border: 1px solid var(--pga-line);
  border-radius: var(--pga-radius);
  padding: 18px 16px;
  text-align: left;
  transition: all var(--pga-base) var(--pga-ease);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
}
.pga-cat:hover {
  border-color: var(--pga-brand);
  transform: translateY(-2px);
  box-shadow: var(--pga-shadow);
}
.pga-cat:hover .pga-cat__icon {
  background: var(--pga-brand);
  color: var(--pga-surface);
}
.pga-cat:hover .pga-cat__arrow {
  transform: translate(2px, -2px);
  opacity: 1;
}

.pga-cat__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--pga-brand-light);
  color: var(--pga-brand);
  display: grid;
  place-items: center;
  transition: all var(--pga-base) var(--pga-ease);
}

.pga-cat__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pga-cat__count {
  font-family: var(--pga-font-mono);
  font-size: 11px;
  color: var(--pga-text-muted);
  letter-spacing: 0.02em;
}

.pga-cat__arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--pga-text-soft);
  opacity: 0.45;
  transition: all var(--pga-base) var(--pga-ease);
}

@media (min-width: 640px)  { .pga-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 1024px) { .pga-cat-grid { grid-template-columns: repeat(6, 1fr); }
                              .pga-cat { padding: 20px 18px; min-height: 156px; } }

/* ─── 9. TRUST PILLARS ─────────────────────────────────────────────── */
.pga-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.pga-pillar {
  background: var(--pga-surface);
  border: 1px solid var(--pga-line);
  border-radius: var(--pga-radius);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pga-pillar__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--pga-text);
  color: var(--pga-surface);
  display: grid;
  place-items: center;
}
.pga-pillar__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pga-pillar__desc {
  font-size: 14px;
  color: var(--pga-text-muted);
  line-height: 1.6;
}

@media (min-width: 640px)  { .pga-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pga-pillars { grid-template-columns: repeat(4, 1fr); } }

/* ─── 10. STEPS ────────────────────────────────────────────────────── */
.pga-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  counter-reset: pga-step;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pga-step {
  background: var(--pga-surface);
  border: 1px solid var(--pga-line);
  border-radius: var(--pga-radius);
  padding: 20px;
  position: relative;
  counter-increment: pga-step;
}
.pga-step::before {
  content: counter(pga-step, decimal-leading-zero);
  display: block;
  font-family: var(--pga-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--pga-brand);
  margin-bottom: 8px;
  letter-spacing: 0.06em;
}
.pga-step__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.pga-step__desc {
  font-size: 14px;
  color: var(--pga-text-muted);
  line-height: 1.6;
}

@media (min-width: 768px) { .pga-steps { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* ─── 11. FAQ ACCORDION ────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
   FAQ — Enhanced Design
   Bigger radius, red accent bar on open, SVG chevron circle that
   rotates + fills red, hover lift, smooth fade-in animation.
   ════════════════════════════════════════════════════════════════════ */
.pga-faq {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pga-faq__item {
  background: var(--pga-surface);
  border: 1px solid var(--pga-line);
  border-radius: 16px;
  overflow: hidden;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  position: relative;
}

.pga-faq__item:hover {
  border-color: var(--pga-line-strong);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.pga-faq__item[open] {
  border-color: var(--pga-brand);
  box-shadow: 0 8px 28px -8px rgba(198, 40, 40, 0.18);
  background: linear-gradient(180deg, #FFFBFB 0%, #FFFFFF 100%);
}

/* Red accent bar on the left when open */
.pga-faq__item[open]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--pga-brand), #DC2626);
  border-radius: 16px 0 0 16px;
}

.pga-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 22px 64px 22px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--pga-text);
  letter-spacing: -0.01em;
  line-height: 1.4;
  position: relative;
  transition: color 200ms ease;
}
.pga-faq__q::-webkit-details-marker { display: none; }
.pga-faq__q:hover { color: var(--pga-brand); }

/* Custom chevron icon in circle */
.pga-faq__q::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 30px;
  height: 30px;
  background-color: var(--pga-surface-2);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}
.pga-faq__item[open] .pga-faq__q::after {
  background-color: var(--pga-brand);
  transform: translateY(-50%) rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  box-shadow: 0 4px 12px -2px rgba(198, 40, 40, 0.4);
}

.pga-faq__a {
  padding: 0 24px 22px;
  font-size: 15px;
  color: var(--pga-text-muted);
  line-height: 1.7;
}
.pga-faq__a > *:first-child {
  border-top: 1px solid #F3F4F6;
  padding-top: 16px;
  margin-top: 0;
}

.pga-faq__item[open] .pga-faq__a {
  animation: pga-faq-fade-in 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pga-faq-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 599px) {
  .pga-faq__q { padding: 18px 56px 18px 18px; font-size: 15px; }
  .pga-faq__q::after { right: 16px; width: 28px; height: 28px; }
  .pga-faq__a { padding: 0 18px 18px; font-size: 14px; }
}

/* ─── 12. PROSE / DISCLAIMER BLOCKS ────────────────────────────────── */
/* Wraps any WordPress page content via the_content().
   Styles every common Gutenberg block automatically. */
.pga-prose {
  max-width: var(--pga-container-narrow);
  margin: 0 auto;
}
.pga-prose > * + * { margin-top: 16px; }

/* Headings inside prose */
.pga-prose h2 {
  font-size: var(--pga-h2);
  letter-spacing: -0.02em;
  margin-top: 36px;
}
.pga-prose h3 {
  font-size: var(--pga-h3);
  color: var(--pga-brand);
  margin-top: 22px;
}
.pga-prose h4 {
  font-size: var(--pga-h4);
  margin-top: 18px;
}

/* Paragraphs */
.pga-prose p {
  font-size: var(--pga-prose);
  line-height: 1.7;
  color: var(--pga-text-2);
}

/* Inline elements */
.pga-prose strong { color: var(--pga-text); font-weight: 700; }
.pga-prose em     { font-style: italic; }
.pga-prose a {
  color: var(--pga-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--pga-fast) var(--pga-ease);
}
.pga-prose a:hover { color: var(--pga-brand-dark); }

/* Lists — unordered (default checkmark style) */
.pga-prose ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pga-prose ul li {
  position: relative;
  padding-left: 26px;
  font-size: var(--pga-prose);
  line-height: 1.65;
  color: var(--pga-text-2);
  margin-top: 8px;
}
.pga-prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 14px; height: 14px;
  border-radius: 4px;
  background: var(--pga-brand);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none'><polyline points='2,6 5,9 10,3' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* Lists — ordered (numbered) */
.pga-prose ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pga-ol;
}
.pga-prose ol li {
  position: relative;
  padding-left: 32px;
  font-size: var(--pga-prose);
  line-height: 1.65;
  color: var(--pga-text-2);
  margin-top: 8px;
  counter-increment: pga-ol;
}
.pga-prose ol li::before {
  content: counter(pga-ol);
  position: absolute;
  left: 0; top: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--pga-brand);
  color: var(--pga-surface);
  font-family: var(--pga-font-mono);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
  letter-spacing: 0;
}

/* Blockquote */
.pga-prose blockquote,
.pga-prose .wp-block-quote {
  border-left: 3px solid var(--pga-brand);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  font-size: var(--pga-prose);
  font-style: italic;
  color: var(--pga-text-2);
  line-height: 1.65;
}
.pga-prose blockquote cite,
.pga-prose .wp-block-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 14px;
  color: var(--pga-text-muted);
}

/* Code */
.pga-prose code {
  font-family: var(--pga-font-mono);
  font-size: 0.92em;
  background: var(--pga-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--pga-text);
}
.pga-prose pre {
  background: var(--pga-text);
  color: var(--pga-surface);
  padding: 16px 18px;
  border-radius: var(--pga-radius);
  overflow-x: auto;
  font-family: var(--pga-font-mono);
  font-size: 13px;
  line-height: 1.55;
}
.pga-prose pre code { background: none; padding: 0; color: inherit; }

/* Images */
.pga-prose img,
.pga-prose .wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--pga-radius-sm);
}
.pga-prose figure {
  margin: 24px 0;
}
.pga-prose figure figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--pga-text-muted);
  text-align: center;
}

/* Horizontal rule */
.pga-prose hr {
  border: none;
  border-top: 1px solid var(--pga-line);
  margin: 32px 0;
}

/* Tables */
.pga-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.pga-prose th,
.pga-prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--pga-line);
  text-align: left;
}
.pga-prose th {
  background: var(--pga-surface-2);
  font-weight: 700;
  color: var(--pga-text);
}

/* Modifier — neutral dot bullets (use on disclaimer / legal pages where checks feel inappropriate) */
.pga-prose--bullets ul li {
  padding-left: 22px;
}
.pga-prose--bullets ul li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pga-brand);
  background-image: none;
  top: 13px;
  left: 4px;
}

.pga-callout {
  background: var(--pga-warning-bg);
  border: 1px solid var(--pga-warning-border);
  border-radius: var(--pga-radius);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--pga-warning);
  line-height: 1.55;
}
.pga-callout svg {
  flex-shrink: 0;
  color: var(--pga-warning);
  margin-top: 1px;
}

/* ─── 13. CATEGORY ARCHIVE GRID (/reviews/) ────────────────────────── */
.pga-archive-head {
  text-align: center !important;
  margin-bottom: 32px;
}
.pga-archive-head__title {
  font-size: var(--pga-h1);
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.pga-archive-head__sub {
  font-size: var(--pga-body);
  color: var(--pga-text-muted);
  margin: 0 auto;
  text-align: center !important;
}
.pga-archive-head__count {
  color: var(--pga-brand);
  font-weight: 700;
}

.pga-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px)  { .pga-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .pga-grid { grid-template-columns: repeat(4, 1fr); } }

/* Grid column variants — used by per-category templates */
@media (min-width: 1024px) {
  .pga-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .pga-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.pga-card {
  background: var(--pga-surface);
  border: 1px solid var(--pga-line);
  border-radius: var(--pga-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--pga-base) var(--pga-ease);
}
.pga-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pga-shadow);
  border-color: var(--pga-line-strong);
}

.pga-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--pga-brand), var(--pga-brand-dark));
  position: relative;
  overflow: hidden;
}
.pga-card__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.pga-card__media-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 28px;
  color: var(--pga-surface);
  opacity: 0.92;
}

.pga-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.pga-card__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pga-card__title a:hover { color: var(--pga-brand); }

.pga-card__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--pga-text-muted);
  line-height: 1.4;
}
.pga-card__bonus { color: var(--pga-brand); font-weight: 600; }

.pga-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--pga-text);
  font-weight: 600;
}
.pga-card__rating .pga-star { color: var(--pga-star); }

.pga-card__cta {
  margin-top: auto;
  background: var(--pga-text);
  color: var(--pga-surface) !important;
  text-align: center;
  padding: 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--pga-fast) var(--pga-ease);
  text-decoration: none !important;
}
.pga-card__cta:hover { background: var(--pga-brand); }

/* ─── 14. PAGINATION ───────────────────────────────────────────────── */
.pga-pagination {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
.pga-pagination .page-numbers,
.pga-pagination a,
.pga-pagination span {
  display: inline-block;
  min-width: 36px;
  text-align: center;
  padding: 8px 12px;
  margin: 0 3px;
  background: var(--pga-surface);
  border: 1px solid var(--pga-line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pga-text);
  text-decoration: none;
  transition: all var(--pga-fast) var(--pga-ease);
}
.pga-pagination a:hover {
  border-color: var(--pga-brand);
  color: var(--pga-brand);
}
.pga-pagination .current {
  background: var(--pga-brand);
  color: var(--pga-surface);
  border-color: var(--pga-brand);
}
.pga-pagination .dots { border: none; background: transparent; }

/* ─── 15. FOOTER ───────────────────────────────────────────────────── */
.pga-footer {
  background: var(--pga-text);
  color: rgba(255, 255, 255, 0.78);
  padding: 48px 0 32px;
  margin-top: 64px;
}

.pga-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.pga-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pga-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--pga-surface);
  letter-spacing: -0.025em;
}
.pga-footer__tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  max-width: 36ch;
}

.pga-footer__col h4 {
  color: var(--pga-surface);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.pga-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pga-footer__links a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--pga-fast) var(--pga-ease);
}
.pga-footer__links a:hover { color: var(--pga-brand); }

.pga-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pga-footer__badge {
  font-family: var(--pga-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
}

.pga-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.pga-footer__bottom strong { color: rgba(255, 255, 255, 0.8); }

@media (min-width: 768px) {
  .pga-footer__inner {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
  }
  .pga-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ─── 16. WORDPRESS COMPAT — Hello Elementor classes the theme uses ── */
/* Targets WP-default classes that might leak in alongside our system. */
.pga-body .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ─── 17. PAGE TEMPLATE (about, disclaimer, privacy, etc.) ─────────── */
/* Card-on-gray layout adapted from the original site design,
   ported to the new red brand. Used by page.php. */

.pga-page {
  background: var(--pga-surface-2) !important;
  padding: 40px 0 60px !important;
}

.pga-page__card {
  background: var(--pga-surface) !important;
  border-radius: var(--pga-radius-lg) !important;
  padding: 32px 20px 28px !important;
  margin: 0 auto !important;
  max-width: 760px !important;
  box-shadow: var(--pga-shadow-sm) !important;
}

.pga-page__title {
  font-size: var(--pga-h1) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  margin-bottom: 24px !important;
  color: var(--pga-text) !important;
}

.pga-page__lede {
  font-size: var(--pga-lede);
  color: var(--pga-text-muted);
  text-align: center;
  margin-bottom: 28px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .pga-page          { padding: 60px 0 80px; }
  .pga-page__card    { padding: 48px 44px 40px; }
  .pga-page__title   { margin-bottom: 32px; }
}

/* Back to home button — bottom-left of page card */
.pga-page__footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--pga-line);
  display: flex;
  justify-content: flex-start;
}
.pga-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--pga-surface-2);
  color: var(--pga-text) !important;
  border: 1px solid var(--pga-line-strong);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all var(--pga-fast) var(--pga-ease);
}
.pga-back-btn:hover {
  background: var(--pga-text);
  color: var(--pga-surface) !important;
  border-color: var(--pga-text);
  transform: translateX(-2px);
}
.pga-back-btn svg {
  flex-shrink: 0;
  transition: transform var(--pga-fast) var(--pga-ease);
}
.pga-back-btn:hover svg { transform: translateX(-3px); }

/* Info card — light red wash, for highlighted content blocks */
.pga-info-card {
  background: var(--pga-brand-tint);
  border: 1px solid var(--pga-brand-light);
  border-radius: var(--pga-radius);
  padding: 18px 20px;
  margin: 16px 0;
}
.pga-info-card > * + * { margin-top: 12px; }
.pga-info-card p {
  font-size: var(--pga-body);
  line-height: 1.65;
  color: var(--pga-text-2);
}
.pga-info-card h2,
.pga-info-card h3 {
  color: var(--pga-brand);
  font-size: var(--pga-h3);
  margin-top: 14px;
}

@media (min-width: 768px) {
  .pga-info-card { padding: 22px 26px; }
}

/* Disclaimer card — white with neutral border, for legal copy */
.pga-disclaimer-card {
  background: var(--pga-surface);
  border: 1px solid var(--pga-line);
  border-radius: var(--pga-radius);
  padding: 18px 20px;
  margin: 16px 0;
}
.pga-disclaimer-card > * + * { margin-top: 12px; }
.pga-disclaimer-card p {
  font-size: var(--pga-body);
  line-height: 1.65;
  color: var(--pga-text-2);
}
.pga-disclaimer-card h2,
.pga-disclaimer-card h3 {
  color: var(--pga-text);
  font-size: var(--pga-h3);
  margin-top: 14px;
}

@media (min-width: 768px) {
  .pga-disclaimer-card { padding: 22px 26px; }
}

/* Warning box — yellow, for risk / age notices */
.pga-warning-box {
  background: var(--pga-warning-bg);
  border: 1px solid var(--pga-warning-border);
  border-radius: var(--pga-radius-sm);
  padding: 12px 14px;
  margin: 16px 0 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.pga-warning-box svg,
.pga-warning-box .pga-warn-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--pga-warning);
}
.pga-warning-box span,
.pga-warning-box p {
  font-size: var(--pga-body);
  font-weight: 700;
  color: var(--pga-warning);
  line-height: 1.55;
  margin: 0;
}

/* Bordered checklist — green-card-style replacement, now in red brand.
   Use this when you want item-by-item separation with bottom borders. */
.pga-checklist {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.pga-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--pga-body);
  color: var(--pga-text-2);
  line-height: 1.6;
  padding: 9px 0;
  border-bottom: 1px solid var(--pga-brand-light);
}
.pga-checklist li:last-child { border-bottom: none; }
.pga-checklist li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 3px;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--pga-brand);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><polyline points='2,6 5,9 10,3' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* Bordered bullet list — for legal / disclaimer items */
.pga-bullet-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.pga-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--pga-body);
  color: var(--pga-text-2);
  line-height: 1.65;
  padding: 8px 0;
  border-bottom: 1px solid var(--pga-line);
}
.pga-bullet-list li:last-child { border-bottom: none; }
.pga-bullet-list li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pga-brand);
}

/* ─── 18. APP REVIEW PAGE ELEMENTS ─────────────────────────────────── */
/* Used inside page.php content for individual app review pages.
   Generated by the App Page Generator. */

.pga-review-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--pga-line);
  margin-bottom: 24px;
  position: relative;
}
.pga-review-hero__icon {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  object-fit: cover;
  background: var(--pga-surface-3);
  box-shadow: 0 0 0 1px var(--pga-line) inset;
}
.pga-review-hero__info { min-width: 0; }
.pga-review-hero__name {
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 4px;
}
.pga-review-hero__tag {
  display: inline-block;
  font-family: var(--pga-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  background: var(--pga-brand-light);
  color: var(--pga-brand);
  border-radius: 4px;
  margin-bottom: 6px;
}
.pga-review-hero__desc {
  font-size: 14px;
  color: var(--pga-text-muted);
  line-height: 1.5;
  margin: 6px 0 8px;
}
.pga-review-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--pga-text-muted);
}
.pga-review-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pga-text);
  font-weight: 700;
}
.pga-review-hero__rating svg { color: var(--pga-star); }

@media (min-width: 640px) {
  .pga-review-hero { gap: 20px; }
  .pga-review-hero__icon { width: 96px; height: 96px; }
}

/* Stats grid — bonus, min withdraw, etc. */
.pga-review-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 24px;
}
.pga-stat {
  background: var(--pga-surface-2);
  border: 1px solid var(--pga-line);
  border-radius: var(--pga-radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pga-stat__label {
  font-family: var(--pga-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pga-text-muted);
}
.pga-stat__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--pga-text);
  letter-spacing: -0.01em;
}
.pga-stat--brand .pga-stat__value { color: var(--pga-brand); }

@media (min-width: 640px) {
  .pga-review-stats { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .pga-stat { padding: 14px 16px; }
  .pga-stat__value { font-size: 18px; }
}

/* Big download CTA */
.pga-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--pga-text);
  color: var(--pga-surface) !important;
  padding: 16px 24px;
  border-radius: var(--pga-radius);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  transition: all var(--pga-fast) var(--pga-ease);
  margin: 8px 0 24px;
  border: none;
  cursor: pointer;
}
.pga-cta:hover {
  background: var(--pga-brand);
  transform: translateY(-2px);
  box-shadow: var(--pga-shadow);
}

/* Section heading inside review pages */
.pga-prose h2.pga-review-heading,
.pga-review-heading {
  font-size: var(--pga-h2);
  letter-spacing: -0.02em;
  margin: 32px 0 16px !important;
  padding-top: 8px;
}

/* Player reviews */
.pga-reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0;
}
.pga-review-card {
  background: var(--pga-surface-2);
  border: 1px solid var(--pga-line);
  border-radius: var(--pga-radius);
  padding: 16px;
}
.pga-review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
}
.pga-review-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--pga-text);
}
.pga-review-card__stars {
  font-size: 13px;
  color: var(--pga-star);
  letter-spacing: 1px;
}
.pga-review-card__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pga-text-2);
  margin: 0 !important;
}

@media (min-width: 640px) {
  .pga-reviews { grid-template-columns: repeat(2, 1fr); }
}

/* Quick stats — 2x2 (or 4x1 on desktop) numeric callout grid */
.pga-quick-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0;
}
.pga-quick-stat {
  background: var(--pga-surface-2);
  border: 1px solid var(--pga-line);
  border-radius: var(--pga-radius);
  padding: 14px 12px;
  text-align: center;
}
.pga-quick-stat__value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--pga-brand);
  letter-spacing: -0.01em;
}
.pga-quick-stat__label {
  display: block;
  font-family: var(--pga-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pga-text-muted);
  margin-top: 4px;
}
@media (min-width: 640px) {
  .pga-quick-stats { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .pga-quick-stat__value { font-size: 20px; }
}

/* Avatar circle for review cards */
.pga-review-card__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--pga-brand);
  color: var(--pga-surface);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.pga-review-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pga-review-card__head-info { flex: 1; min-width: 0; }

/* Secondary CTA (Telegram, etc.) — outline style */
.pga-cta--secondary {
  background: var(--pga-surface);
  color: var(--pga-text) !important;
  border: 2px solid var(--pga-text);
}
.pga-cta--secondary:hover {
  background: var(--pga-text);
  color: var(--pga-surface) !important;
}

/* ─── 19. CONTACT PAGE ─────────────────────────────────────────────── */
/* Contact channel cards — large clickable tiles for email, Telegram, etc. */
.pga-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0 24px;
}
.pga-contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--pga-surface);
  border: 1px solid var(--pga-line);
  border-radius: var(--pga-radius);
  text-decoration: none !important;
  transition: all var(--pga-base) var(--pga-ease);
  color: inherit;
}
.pga-contact-card:hover {
  border-color: var(--pga-brand);
  transform: translateY(-2px);
  box-shadow: var(--pga-shadow);
}
.pga-contact-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--pga-brand-light);
  color: var(--pga-brand);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all var(--pga-base) var(--pga-ease);
}
.pga-contact-card:hover .pga-contact-card__icon {
  background: var(--pga-brand);
  color: var(--pga-surface);
}
.pga-contact-card__info { flex: 1; min-width: 0; }
.pga-contact-card__label {
  display: block;
  font-family: var(--pga-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pga-text-muted);
  margin-bottom: 2px;
}
.pga-contact-card__value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--pga-text);
  letter-spacing: -0.01em;
  word-break: break-word;
}
.pga-contact-card__arrow {
  color: var(--pga-text-soft);
  flex-shrink: 0;
  transition: all var(--pga-base) var(--pga-ease);
}
.pga-contact-card:hover .pga-contact-card__arrow {
  color: var(--pga-brand);
  transform: translateX(2px);
}

@media (min-width: 640px) {
  .pga-contact-grid { grid-template-columns: repeat(3, 1fr); }
  .pga-contact-card__value { font-size: 14px; }
}

/* Expectation columns — what we can / can't help with */
.pga-expect-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0 24px;
}
.pga-expect-card {
  background: var(--pga-surface);
  border: 1px solid var(--pga-line);
  border-radius: var(--pga-radius);
  padding: 20px;
}
.pga-expect-card--yes { border-top: 3px solid var(--pga-success); }
.pga-expect-card--no  { border-top: 3px solid var(--pga-danger); }
.pga-expect-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pga-line);
}
.pga-expect-card--yes .pga-expect-card__head { color: var(--pga-success); }
.pga-expect-card--no  .pga-expect-card__head { color: var(--pga-danger); }
.pga-expect-card__head svg { flex-shrink: 0; }
.pga-expect-card ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.pga-expect-card ul li {
  position: relative;
  padding: 6px 0 6px 18px !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pga-text-2);
  margin: 0 !important;
}
.pga-expect-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-image: none !important;
}
.pga-expect-card--yes ul li::before { background: var(--pga-success); }
.pga-expect-card--no  ul li::before { background: var(--pga-danger); }

@media (min-width: 768px) {
  .pga-expect-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* "Tip" callout — small icon + short message inline */
.pga-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--pga-brand-tint);
  border: 1px solid var(--pga-brand-light);
  border-radius: var(--pga-radius);
  padding: 12px 14px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pga-text-2);
}
.pga-tip svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--pga-brand);
}

/* ─── 20. CATEGORY HERO BANNERS ────────────────────────────────────── */
/* Wide colored banner at the top of each category archive page.
   The .pga-cat-hero--{slug} modifier sets the per-category color. */

.pga-cat-hero {
  position: relative;
  padding: 48px 0 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--pga-line);
}

.pga-cat-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cat-bg, var(--pga-brand-tint));
  z-index: 0;
}
.pga-cat-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--pga-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pga-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 600px 280px at 50% 30%, rgba(0,0,0,0.15), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 600px 280px at 50% 30%, rgba(0,0,0,0.15), transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.pga-cat-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pga-cat-hero__icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--cat-icon-bg, var(--pga-brand));
  color: var(--pga-surface);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  box-shadow: var(--pga-shadow);
}

.pga-cat-hero__eyebrow {
  font-family: var(--pga-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cat-accent, var(--pga-brand));
}

.pga-cat-hero__title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 !important;
  color: var(--pga-text);
}

.pga-cat-hero__sub {
  font-size: var(--pga-lede);
  color: var(--pga-text-2);
  line-height: 1.55;
  max-width: 60ch;
  margin: 6px auto 0;
}

.pga-cat-hero__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 14px;
  background: var(--pga-surface);
  border: 1px solid var(--pga-line-strong);
  border-radius: 999px;
  font-family: var(--pga-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pga-text-2);
}
.pga-cat-hero__count strong {
  color: var(--cat-accent, var(--pga-brand));
}

@media (min-width: 768px) {
  .pga-cat-hero { padding: 80px 0 64px; }
  .pga-cat-hero__icon { width: 88px; height: 88px; border-radius: 22px; }
}

/* Per-category color themes */
.pga-cat-hero--slots         { --cat-bg: #FEE8E8; --cat-icon-bg: #C62828; --cat-accent: #C62828; }
.pga-cat-hero--live-casino   { --cat-bg: #E0F2FE; --cat-icon-bg: #0369A1; --cat-accent: #0369A1; }
.pga-cat-hero--fishing       { --cat-bg: #DCFCE7; --cat-icon-bg: #16A34A; --cat-accent: #16A34A; }
.pga-cat-hero--arcade        { --cat-bg: #FEF3C7; --cat-icon-bg: #B45309; --cat-accent: #B45309; }
.pga-cat-hero--bingo         { --cat-bg: #FCE7F3; --cat-icon-bg: #BE185D; --cat-accent: #BE185D; }
.pga-cat-hero--sports        { --cat-bg: #EDE9FE; --cat-icon-bg: #6D28D9; --cat-accent: #6D28D9; }

/* ════════════════════════════════════════════════════════════════════
   GAMES AVAILABLE — Card grid layout
   Replaces the old nested checklist for game category sections.
   ════════════════════════════════════════════════════════════════════ */

.pga-games-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .pga-games-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

.pga-game-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 22px 22px 20px;
  transition: all 200ms ease;
}
.pga-game-card:hover {
  border-color: #C62828;
  box-shadow: 0 4px 16px -4px rgba(198, 40, 40, 0.15);
  transform: translateY(-1px);
}

.pga-game-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.pga-game-card__icon {
  font-size: 28px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
  border-radius: 10px;
  flex-shrink: 0;
}
.pga-game-card__name {
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0A0A0A !important;
  letter-spacing: -0.01em;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.pga-game-card__desc {
  color: #4B5563;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
  padding-left: 56px;
  text-decoration: none !important;
}
.pga-game-card__desc a,
.pga-game-card__desc * {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Spacer line between description and tags */
.pga-game-card__list {
  list-style: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid #F3F4F6;
}
.pga-game-card__list li {
  display: inline-block !important;
  padding: 5px 12px !important;
  background: #FEE2E2 !important;
  color: #991B1B !important;
  border: 1px solid #FECACA !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #FECACA !important;
}
.pga-game-card__list li a,
.pga-game-card__list li * {
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit !important;
}
.pga-game-card__list li::before {
  content: none !important;
  display: none !important;
}

/* Mobile: tighter padding, full description without indent (cleaner) */
@media (max-width: 599px) {
  .pga-game-card { padding: 16px; }
  .pga-game-card__desc { padding-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   PGA CTA — BULLETPROOF OVERRIDES
   Beats Hello Elementor parent theme's CTA rules with high specificity.
   ════════════════════════════════════════════════════════════════════ */

/* Primary CTA (Download APK / Sign Up) — black bg, white text by default,
   inline style overrides handle custom colors per app */
body .pga-prose a.pga-cta,
body .entry-content a.pga-cta,
body article a.pga-cta,
.pga-prose a.pga-cta,
.entry-content a.pga-cta,
a.pga-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  background: #0A0A0A !important;
  background-color: #0A0A0A !important;
  background-image: none !important;
  color: #FFFFFF !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  text-shadow: none !important;
  border: none !important;
  border-bottom: none !important;
  margin: 8px 0 24px !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  box-shadow: none !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}

body .pga-prose a.pga-cta:hover,
body .entry-content a.pga-cta:hover,
.pga-prose a.pga-cta:hover,
a.pga-cta:hover {
  background: #C62828 !important;
  background-color: #C62828 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px -8px rgba(198, 40, 40, 0.4) !important;
}

/* Secondary CTA (Telegram, How to Download) — outlined style */
body .pga-prose a.pga-cta.pga-cta--secondary,
body .entry-content a.pga-cta.pga-cta--secondary,
.pga-prose a.pga-cta.pga-cta--secondary,
a.pga-cta.pga-cta--secondary {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #0A0A0A !important;
  border: 2px solid #E5E7EB !important;
  border-bottom: 2px solid #E5E7EB !important;
  margin-top: 8px !important;
}

body .pga-prose a.pga-cta.pga-cta--secondary:hover,
body .entry-content a.pga-cta.pga-cta--secondary:hover,
.pga-prose a.pga-cta.pga-cta--secondary:hover,
a.pga-cta.pga-cta--secondary:hover {
  background: #0A0A0A !important;
  background-color: #0A0A0A !important;
  color: #FFFFFF !important;
  border-color: #0A0A0A !important;
}

/* Inline style attribute MUST win — preserve user's custom button color */
a.pga-cta[style*="background"] {
  /* The inline style="background:#XXX;color:#YYY;" should override above.
     But Hello Elementor sometimes uses !important in parent CSS, breaking this.
     Solution: when generator outputs inline style, ensure it ends with !important.
     Handled in the generator JS update below. */
}

/* Kill any Elementor button classes that may bleed through */
a.pga-cta,
a.pga-cta:visited,
a.pga-cta:focus,
a.pga-cta:active {
  outline: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   SINGLE POST TEMPLATE — Wide layout for review/blog posts
   Replaces parent theme's narrow card-bordered layout.
   ════════════════════════════════════════════════════════════════════ */

.pga-single-main {
  background: var(--pga-surface);
  min-height: 60vh;
  padding: 32px 0 64px;
}

.pga-single-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
}

.pga-single-feature {
  margin: 0 auto 32px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--pga-surface-2);
  aspect-ratio: 40 / 21;
  width: 100%;
}
.pga-single-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pga-single-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pga-line);
}

/* Post title rendered as a styled <div>, NOT an H1. The SEO Headline H1 lives in post content. */
.pga-app-title {
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--pga-text);
  margin: 0 0 12px;
}

.pga-single-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pga-font-mono);
  font-size: 12px;
  color: var(--pga-text-muted);
  letter-spacing: 0.05em;
}
.pga-single-meta__cat {
  background: var(--pga-brand);
  color: white;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}
.pga-single-meta__sep { opacity: 0.5; }

.pga-single-content {
  font-size: 16px;
  line-height: 1.7;
  color: var(--pga-text);
}

/* Prose spacing inside post content */
.pga-single-content > * + * {
  margin-top: 16px;
}
.pga-single-content h2,
.pga-single-content h3,
.pga-single-content h4 {
  margin-top: 32px;
}

.pga-single-back {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--pga-line);
}
.pga-single-back__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--pga-surface-2);
  color: var(--pga-text);
  border-radius: 8px;
  font-family: var(--pga-font-mono);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 200ms ease;
}
.pga-single-back__link:hover {
  background: var(--pga-text);
  color: var(--pga-surface);
}

/* Mobile tighter padding */
@media (max-width: 599px) {
  .pga-single-main { padding: 16px 0 48px; }
  .pga-single-container { padding: 0 16px; }
  .pga-single-feature { aspect-ratio: 40 / 21; margin-bottom: 20px; border-radius: 12px; }
  .pga-single-header { margin-bottom: 20px; }
}

/* ════════════════════════════════════════════════════════════════════
   SEO HEADLINE — H1 in post content
   Bigger and bolder than H2 section headings.
   ════════════════════════════════════════════════════════════════════ */
.pga-review-heading-h1 {
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
  font-size: clamp(26px, 4.5vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: var(--pga-text) !important;
  margin: 36px 0 16px !important;
  padding-top: 12px;
}

/* Slight visual hierarchy: H1 uses more space than H2 below it */
.pga-review-heading-h1 + p,
.pga-review-heading-h1 + * {
  margin-top: 12px;
}
/* ════════════════════════════════════════════════════════════════════
   WORDPRESS ADMIN BAR — Fix sticky header overlap
   When logged in, body gets `.admin-bar` class. WP admin toolbar is
   32px tall on desktop, 46px on mobile (under 782px viewport).
   Push sticky header DOWN by that amount so it doesn't hide the bar.
   ════════════════════════════════════════════════════════════════════ */

body.admin-bar .pga-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .pga-header {
    top: 46px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   BLOG POST TEMPLATE — Non-review posts (news, guides, tips, etc.)
   ════════════════════════════════════════════════════════════════════════════ */

/* Reading progress bar */
.pga-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pga-brand), #DC2626);
  z-index: 200;
  transition: width 100ms linear;
  box-shadow: 0 1px 3px rgba(198, 40, 40, 0.4);
  width: 0;
}
body.admin-bar .pga-progress { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .pga-progress { top: 46px; }
}

.pga-blog-main {
  background: #FFFFFF;
  padding: 32px 0 64px;
}

.pga-blog {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Featured image hero ─── */
.pga-blog__hero {
  margin-bottom: 32px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 40 / 21;
  background: var(--pga-surface-2);
  width: 100%;
}
.pga-blog__hero-img,
.pga-blog__hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ─── Article header ─── */
.pga-blog__header {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--pga-line);
}

.pga-blog__meta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--pga-text-muted);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pga-blog__category {
  background: var(--pga-brand);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pga-blog__category--news  { background: #2563eb; }
.pga-blog__category--guide { background: #10b981; }
.pga-blog__category--tips  { background: #f59e0b; }
.pga-blog__sep { opacity: 0.4; }

.pga-blog__title {
  font-size: clamp(28px, 5vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.15 !important;
  color: var(--pga-text) !important;
  margin-bottom: 16px !important;
  margin-top: 0 !important;
}

.pga-blog__lede {
  font-size: 19px;
  color: var(--pga-text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
  font-weight: 400;
}

.pga-blog__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pga-blog__author-img,
.pga-blog__author-img-real {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  flex-shrink: 0;
}
.pga-blog__author-img {
  background: linear-gradient(135deg, var(--pga-brand), #DC2626);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  font-size: 14px;
}
.pga-blog__author-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--pga-text);
  line-height: 1.2;
}
.pga-blog__author-role {
  font-size: 12px;
  color: var(--pga-text-soft);
  margin-top: 2px;
}

/* ─── Article body — typography ─── */
.pga-blog__content {
  font-size: 17px;
  line-height: 1.75;
  color: var(--pga-text);
  max-width: 100%;
  margin: 0;
}
.pga-blog__content > * + * { margin-top: 18px; }

.pga-blog__content h2 {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin-top: 48px !important;
  margin-bottom: 14px !important;
  position: relative;
  padding-left: 18px !important;
}
.pga-blog__content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background: linear-gradient(180deg, var(--pga-brand), #DC2626);
  border-radius: 2px;
}

.pga-blog__content h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
  margin-top: 32px !important;
  margin-bottom: 10px !important;
}
.pga-blog__content h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}

.pga-blog__content p {
  font-size: 17px;
  line-height: 1.75;
  color: #1F2937;
}
.pga-blog__content p strong { font-weight: 700; color: var(--pga-text); }
.pga-blog__content a {
  color: var(--pga-brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 500;
}
.pga-blog__content a:hover { color: var(--pga-brand-dark); }

/* Bullet lists with red dots */
.pga-blog__content ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 18px 0 !important;
}
.pga-blog__content ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.7;
}
.pga-blog__content ul li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 11px;
  width: 8px;
  height: 8px;
  background: var(--pga-brand);
  border-radius: 50%;
}

/* Numbered lists with red badges */
.pga-blog__content ol {
  list-style: none !important;
  counter-reset: blogc;
  padding-left: 0 !important;
  margin: 18px 0 !important;
}
.pga-blog__content ol li {
  counter-increment: blogc;
  position: relative;
  padding-left: 42px;
  margin-bottom: 14px;
  line-height: 1.7;
}
.pga-blog__content ol li::before {
  content: counter(blogc);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  background: var(--pga-brand);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
}

/* ════════════════════════════════════════════════════════════════════════════
   IN-CONTENT BLOCKS — paste the HTML snippets in CONTENT-BLOCKS.md
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Callout boxes (4 variants) ─── */
.pga-callout {
  border-radius: 12px;
  padding: 16px 20px;
  margin: 24px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.65;
  border-left: 4px solid;
}
.pga-callout__icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.pga-callout__title {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  display: block;
}
.pga-callout__body { margin: 0; }

.pga-callout--tip {
  background: #ECFDF5;
  border-color: #10b981;
  color: #065F46;
}
.pga-callout--info {
  background: #EFF6FF;
  border-color: #3B82F6;
  color: #1E40AF;
}
.pga-callout--warning {
  background: #FFFBEB;
  border-color: #F59E0B;
  color: #92400E;
}
.pga-callout--important {
  background: #FEF2F2;
  border-color: #EF4444;
  color: #991B1B;
}

/* ─── Pull quote ─── */
.pga-pullquote {
  margin: 36px 0;
  padding: 24px 28px 28px;
  background: linear-gradient(135deg, #FFFBFB 0%, #FFF 100%);
  border-radius: 16px;
  position: relative;
  text-align: center;
  border: 1px solid var(--pga-line);
}
.pga-pullquote::before {
  content: "\201C";
  font-family: "Crimson Text", Georgia, serif;
  font-size: 80px;
  color: var(--pga-brand);
  line-height: 0.5;
  position: absolute;
  top: 24px;
  left: 20px;
  opacity: 0.3;
}
.pga-pullquote__text {
  font-family: Georgia, "Crimson Text", serif;
  font-size: 24px !important;
  line-height: 1.45 !important;
  color: var(--pga-text);
  font-style: italic;
  font-weight: 600;
  margin: 0 0 8px !important;
  position: relative;
  z-index: 1;
}
.pga-pullquote__cite {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--pga-text-muted);
  letter-spacing: 0.1em;
  font-style: normal;
}
.pga-pullquote__cite::before { content: "— "; }

/* ─── Key Takeaway box ─── */
.pga-takeaway {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border-radius: 16px;
  padding: 24px 28px;
  margin: 32px 0;
  border: 1px solid #FBBF24;
  position: relative;
  overflow: hidden;
}
.pga-takeaway::before {
  content: "💡";
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 140px;
  opacity: 0.08;
}
.pga-takeaway__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #92400E;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pga-takeaway__title::before { content: "💡"; }
.pga-takeaway__body {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #78350F !important;
  font-weight: 500;
}

/* ─── Comparison table ─── */
.pga-table-wrap {
  margin: 24px 0;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--pga-line);
}
.pga-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.pga-table thead { background: var(--pga-text); color: white; }
.pga-table th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pga-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--pga-line);
}
.pga-table tbody tr:nth-child(even) { background: var(--pga-surface-3); }
.pga-table tbody tr:last-child td { border-bottom: 0; }
.pga-table .check { color: #10b981; font-weight: 700; }
.pga-table .x { color: #EF4444; font-weight: 700; }

/* ─── In-content CTA box ─── */
.pga-cta-box {
  background: linear-gradient(135deg, #0A0A0A, #1F1F1F);
  border-radius: 16px;
  padding: 28px 32px;
  margin: 36px 0;
  color: white;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.pga-cta-box__text { flex: 1; min-width: 200px; }
.pga-cta-box__title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  color: white !important;
}
.pga-cta-box__sub {
  color: #94A3B8 !important;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.pga-cta-box__btn {
  background: var(--pga-brand) !important;
  color: white !important;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none !important;
  font-size: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: all 200ms;
  display: inline-block;
}
.pga-cta-box__btn:hover {
  background: #DC2626 !important;
  transform: translateY(-1px);
}

/* ─── Image with caption ─── */
.pga-figure { margin: 32px 0; }
.pga-figure img,
.pga-figure__img {
  width: 100% !important;
  border-radius: 12px;
  display: block;
  margin-bottom: 10px;
}
.pga-figure__caption,
.pga-figure figcaption {
  font-size: 13px !important;
  color: var(--pga-text-soft) !important;
  text-align: center;
  font-style: italic;
  line-height: 1.5;
}

/* ─── Table of Contents (optional) ─── */
.pga-toc {
  background: var(--pga-surface-3);
  border: 1px solid var(--pga-line);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 32px 0;
}
.pga-toc__heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pga-text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pga-toc__heading::before { content: "📋"; }
.pga-toc ol {
  list-style: none !important;
  counter-reset: toc;
  padding: 0 !important;
  margin: 0 !important;
}
.pga-toc li {
  counter-increment: toc;
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--pga-line);
  font-size: 14px;
  margin: 0 !important;
  padding-left: 0 !important;
}
.pga-toc li:last-child { border: 0; }
.pga-toc li::before {
  content: counter(toc, decimal-leading-zero) !important;
  font-family: "JetBrains Mono", monospace;
  color: var(--pga-text-soft) !important;
  margin-right: 10px;
  font-size: 12px !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  position: static !important;
  display: inline !important;
}
.pga-toc a {
  color: var(--pga-text);
  text-decoration: none !important;
  font-weight: 500;
}
.pga-toc a:hover { color: var(--pga-brand); }

/* ─── Tags ─── */
.pga-blog__tags {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--pga-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--pga-text-soft);
}
.pga-tag {
  background: var(--pga-surface-2);
  color: var(--pga-text) !important;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 200ms;
}
.pga-tag:hover {
  background: var(--pga-text);
  color: white !important;
}

/* ─── Author box ─── */
.pga-blog__author-box {
  margin-top: 32px;
  padding: 28px;
  background: var(--pga-surface-3);
  border-radius: 16px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.pga-blog__author-box-img,
.pga-blog__author-box-img-real {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50%;
  flex-shrink: 0;
}
.pga-blog__author-box-img {
  background: linear-gradient(135deg, var(--pga-brand), #DC2626);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  font-size: 20px;
}
.pga-blog__author-box h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
  margin-top: 0 !important;
  padding: 0 !important;
}
.pga-blog__author-box h3::before { display: none !important; }
.pga-blog__author-box p {
  font-size: 14px;
  color: var(--pga-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ─── Related posts ─── */
.pga-blog__related {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--pga-line);
}
.pga-blog__related-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin-bottom: 18px !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
}
.pga-blog__related-title::before { display: none !important; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.related-card {
  background: white;
  border: 1px solid var(--pga-line);
  border-radius: 12px;
  overflow: hidden;
  transition: all 200ms;
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}
.related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
  border-color: var(--pga-line-strong);
}
.related-card__img,
.related-card__img-real {
  aspect-ratio: 16 / 9;
  background: var(--pga-surface-2);
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}
.related-card__body { padding: 14px; }
.related-card__cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pga-brand);
  font-weight: 700;
  margin-bottom: 6px;
}
.related-card__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ─── Footer back nav ─── */
.pga-blog__footer {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--pga-line);
}

/* Mobile adjustments */
@media (max-width: 599px) {
  .pga-blog { padding: 0 16px; }
  .pga-blog-main { padding: 16px 0 48px; }
  .pga-blog__content h2 { font-size: 24px !important; }
  .pga-blog__content p { font-size: 16px; }
  .pga-cta-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
  }
  .pga-blog__author-box { padding: 20px; gap: 16px; }
  .pga-pullquote { padding: 20px; }
  .pga-pullquote__text { font-size: 20px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   DEFENSIVE: Force single-post containers to be full-width blocks
   Prevents Hello Elementor parent grid/flex layouts from splitting
   our content into 2 columns (sidebar layout).
   ════════════════════════════════════════════════════════════════════ */
.pga-blog-main,
.pga-single-main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
  flex: 1 1 100% !important;
  float: none !important;
}

/* If Hello Elementor's #content tries to be a grid/flex, normalize it */
main#content,
#content {
  display: block !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   TAG ARCHIVE TEMPLATE
   /tag/{slug}/ pages — branded with hero + smart card grid that handles
   both review posts (with stats) and blog posts (with excerpt).
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Tag hero banner ─── */
.pga-tag-hero {
  background: linear-gradient(135deg, #0A0A0A 0%, #1F1F1F 100%);
  color: white;
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
}
.pga-tag-hero::before {
  content: '#';
  position: absolute;
  top: -40px;
  right: -20px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 280px;
  font-weight: 800;
  color: var(--pga-brand);
  opacity: 0.15;
  line-height: 1;
}
.pga-tag-hero__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.pga-tag-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 18px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  transition: all 200ms;
}
.pga-tag-hero__breadcrumb:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}
.pga-tag-hero__eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--pga-brand);
  margin-bottom: 10px;
}
.pga-tag-hero__title {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: white;
}
.pga-tag-hero__sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 18px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.pga-tag-hero__sub strong {
  color: white;
  font-weight: 600;
}
.pga-tag-hero__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-family: "JetBrains Mono", monospace;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.pga-tag-hero__count strong {
  color: var(--pga-brand);
  font-weight: 700;
}

/* ─── Tag results grid (mixed cards) ─── */
.pga-tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 8px;
}

/* Type badge (REVIEWS / NEWS / GUIDE / etc.) */
.pga-card__type-badge {
  display: inline-block;
  background: var(--pga-brand);
  color: white;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  font-family: "JetBrains Mono", monospace;
}
.pga-card__type-badge--blog {
  background: var(--pga-text);
}

/* Blog card variant */
.pga-card--blog .pga-card__media,
.pga-card__media--blog {
  aspect-ratio: 16 / 9;
  background: var(--pga-surface-2);
  display: block;
  overflow: hidden;
}
.pga-card__media--blog img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.pga-card__media-fallback--blog {
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  color: var(--pga-brand);
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.pga-card__excerpt {
  font-size: 13px;
  line-height: 1.55;
  color: var(--pga-text-muted);
  margin: 6px 0 12px;
}

.pga-card__meta--blog {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--pga-text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.pga-card__sep { opacity: 0.4; }

/* Mobile */
@media (max-width: 599px) {
  .pga-tag-hero { padding: 40px 0 36px; }
  .pga-tag-hero::before { font-size: 200px; right: -30px; }
  .pga-tag-grid { gap: 16px; grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   GUIDES & NEWS — Category hero color variants
   Distinct accents to differentiate from review categories.
   ════════════════════════════════════════════════════════════════════════════ */

/* Guides — Green (educational, helpful) */
.pga-cat-hero--guides {
  background: linear-gradient(135deg, #064E3B 0%, #065F46 50%, #047857 100%);
}
.pga-cat-hero--guides .pga-cat-hero__icon {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: #6EE7B7;
}
.pga-cat-hero--guides .pga-cat-hero__eyebrow { color: #34D399; }
.pga-cat-hero--guides .pga-cat-hero__count strong { color: #6EE7B7; }

/* News — Blue (current events, updates) */
.pga-cat-hero--news {
  background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 50%, #2563EB 100%);
}
.pga-cat-hero--news .pga-cat-hero__icon {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93C5FD;
}
.pga-cat-hero--news .pga-cat-hero__eyebrow { color: #60A5FA; }
.pga-cat-hero--news .pga-cat-hero__count strong { color: #93C5FD; }

/* Type badges for blog post cards */
.pga-card__type-badge--guide {
  background: #10b981 !important;
  color: white;
}
.pga-card__type-badge--news {
  background: #2563eb !important;
  color: white;
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADER NAV — Tightened gap for 6 nav items
   (Categories, News, Guides, Blogs, How It Works, About)
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .pga-nav { gap: 22px; }
}
@media (min-width: 1100px) {
  .pga-nav { gap: 28px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BLOGS — Purple theme (third blog category accent)
   Distinct from Guides (green) and News (blue).
   ════════════════════════════════════════════════════════════════════════════ */
.pga-cat-hero--blogs {
  background: linear-gradient(135deg, #4C1D95 0%, #5B21B6 50%, #7C3AED 100%);
}
.pga-cat-hero--blogs .pga-cat-hero__icon {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.3);
  color: #C4B5FD;
}
.pga-cat-hero--blogs .pga-cat-hero__eyebrow { color: #A78BFA; }
.pga-cat-hero--blogs .pga-cat-hero__count strong { color: #C4B5FD; }

.pga-card__type-badge--blogs {
  background: #7C3AED !important;
  color: white;
}

.pga-card__media-fallback--blog.blogs-fallback {
  background: linear-gradient(135deg, #EDE9FE, #DDD6FE) !important;
  color: #7C3AED !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   CATEGORY CARDS — Fix featured image aspect ratio
   Match the user's 1200x630 (40:21) banner ratio so images display fully
   without cropping on category archive pages.
   ════════════════════════════════════════════════════════════════════════════ */
.pga-card__media {
  aspect-ratio: 40 / 21 !important;
}
.pga-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT — Single post with 3-widget sidebar
   Hot Picks · Browse Categories · Popular Tags
   ════════════════════════════════════════════════════════════════════════════ */

/* Override blog layout to 2-column with sidebar */
.pga-blog-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}

.pga-blog-layout .pga-blog {
  min-width: 0;
  max-width: 760px;
  margin-left: auto;
  padding: 0;
}

.pga-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Adjust top offset when admin bar is present */
body.admin-bar .pga-sidebar { top: 122px; }

/* ─── Widget base ─── */
.pga-widget {
  background: white;
  border: 1px solid var(--pga-line);
  border-radius: 14px;
  overflow: hidden;
}
.pga-widget__heading {
  padding: 14px 18px;
  background: linear-gradient(135deg, #FAFAFA, white);
  border-bottom: 1px solid var(--pga-line);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pga-text);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
}
.pga-widget__body { padding: 14px; }
.pga-widget__footer {
  padding: 10px 18px;
  border-top: 1px solid var(--pga-line);
  background: var(--pga-surface-3);
  text-align: center;
}
.pga-widget__footer a {
  font-size: 12px;
  font-weight: 700;
  color: var(--pga-brand);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: "JetBrains Mono", monospace;
}
.pga-widget__footer a:hover { color: var(--pga-brand-dark); }

/* ─── Widget 1: Hot Picks ─── */
.pga-widget--hot .pga-widget__heading {
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  color: var(--pga-brand-dark);
  border-bottom-color: #FECACA;
}
.pga-hot-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pga-hot-list li {
  padding: 0 !important;
  margin: 0 !important;
}
.pga-hot-list li::before { display: none !important; }
.pga-hot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 200ms;
}
.pga-hot-item:hover { background: var(--pga-surface-3); }
.pga-hot-rank {
  width: 24px;
  height: 24px;
  background: var(--pga-text);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
}
.pga-hot-list li:nth-child(1) .pga-hot-rank { background: #FFB800; color: #0A0A0A; }
.pga-hot-list li:nth-child(2) .pga-hot-rank { background: #C0C0C0; color: #0A0A0A; }
.pga-hot-list li:nth-child(3) .pga-hot-rank { background: #CD7F32; color: white; }
.pga-hot-icon,
.pga-hot-icon-img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
}
.pga-hot-icon {
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  display: grid;
  place-items: center;
  color: var(--pga-brand);
  font-weight: 800;
  font-size: 13px;
  border: 1px solid var(--pga-line);
}
.pga-hot-info {
  flex: 1;
  min-width: 0;
}
.pga-hot-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--pga-text);
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pga-hot-meta {
  font-size: 11px;
  color: var(--pga-text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
}
.pga-hot-rating { color: #F59E0B; font-weight: 700; }
.pga-hot-sep { opacity: 0.4; }

/* ─── Widget 2: Browse Categories ─── */
.pga-cat-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pga-cat-list li { padding: 0 !important; margin: 0 !important; }
.pga-cat-list li::before { display: none !important; }
.pga-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--pga-text) !important;
  transition: all 200ms;
  font-size: 13px;
}
.pga-cat-item:hover { background: var(--pga-surface-3); color: var(--pga-brand) !important; }
.pga-cat-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.pga-cat-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--pga-surface-2);
  color: var(--pga-text-muted);
  font-size: 14px;
  flex-shrink: 0;
  transition: all 200ms;
}
.pga-cat-item:hover .pga-cat-icon { background: var(--pga-brand); color: white; }
.pga-cat-count {
  font-size: 11px;
  color: var(--pga-text-soft);
  font-family: "JetBrains Mono", monospace;
  background: var(--pga-surface-2);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}

/* ─── Widget 3: Popular Tags ─── */
.pga-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pga-tags-cloud a {
  background: var(--pga-surface-2);
  color: var(--pga-text);
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 200ms;
}
.pga-tags-cloud a:hover { background: var(--pga-text); color: white; }
.pga-tags-cloud a.popular {
  background: var(--pga-brand);
  color: white;
  font-weight: 600;
}
.pga-tags-cloud a.popular:hover { background: var(--pga-brand-dark); }

/* ─── Responsive: stack sidebar below article on tablet/mobile ─── */
@media (max-width: 1100px) {
  .pga-blog-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pga-blog-layout .pga-blog {
    margin: 0 auto;
  }
  .pga-sidebar {
    position: static;
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
  }
}
@media (max-width: 599px) {
  .pga-blog-layout {
    padding: 0 16px;
    gap: 24px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   SINGLE POST SIDEBAR — Pinoy Game Apps
   Hot Picks · Browse Categories · Popular Tags
   Sticky on desktop (>1100px), stacks below content on tablet/mobile.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 2-COLUMN LAYOUT ─── */
.pga-blog-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}
.pga-blog-layout .pga-blog {
  min-width: 0;
  max-width: 760px;
  margin: 0;
  padding: 0;
}

.pga-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
body.admin-bar .pga-sidebar { top: 122px; }

/* ─── WIDGET BASE ─── */
.pga-widget {
  background: white;
  border: 1px solid var(--pga-line);
  border-radius: 14px;
  overflow: hidden;
}
.pga-widget__heading {
  padding: 14px 18px;
  background: linear-gradient(135deg, #FAFAFA, white);
  border-bottom: 1px solid var(--pga-line);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pga-text);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
}
.pga-widget__body { padding: 14px; }
.pga-widget__footer {
  padding: 10px 18px;
  border-top: 1px solid var(--pga-line);
  background: var(--pga-surface-3);
  text-align: center;
}
.pga-widget__footer a {
  font-size: 12px;
  font-weight: 700;
  color: var(--pga-brand);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: "JetBrains Mono", monospace;
}
.pga-widget__footer a:hover { color: var(--pga-brand-dark); }

/* ─── WIDGET 1: HOT PICKS ─── */
.pga-widget--hot .pga-widget__heading {
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  color: var(--pga-brand-dark);
  border-bottom-color: #FECACA;
}
.pga-hot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pga-hot-list li { padding: 0; margin: 0; }
.pga-hot-list li::before { display: none; }
.pga-hot-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 200ms;
}
.pga-hot-item:hover { background: var(--pga-surface-3); }
.pga-hot-rank {
  width: 24px;
  height: 24px;
  background: var(--pga-text);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
}
.pga-hot-item:nth-child(1) .pga-hot-rank,
.pga-hot-list li:nth-child(1) .pga-hot-rank { background: #FFB800; color: #0A0A0A; }
.pga-hot-list li:nth-child(2) .pga-hot-rank { background: #C0C0C0; color: #0A0A0A; }
.pga-hot-list li:nth-child(3) .pga-hot-rank { background: #CD7F32; color: white; }
.pga-hot-icon, .pga-hot-icon-img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
}
.pga-hot-icon {
  background: linear-gradient(135deg, #FEE2E2, #FECACA);
  display: grid;
  place-items: center;
  color: var(--pga-brand);
  font-weight: 800;
  font-size: 13px;
  border: 1px solid var(--pga-line);
}
.pga-hot-info { flex: 1; min-width: 0; }
.pga-hot-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--pga-text);
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pga-hot-meta {
  font-size: 11px;
  color: var(--pga-text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
}
.pga-hot-rating { color: #F59E0B; font-weight: 700; }
.pga-hot-sep { opacity: 0.4; }

/* ─── WIDGET 2: BROWSE CATEGORIES ─── */
.pga-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pga-cat-list li { padding: 0; margin: 0; }
.pga-cat-list li::before { display: none; }
.pga-cat-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--pga-text) !important;
  transition: all 200ms;
  font-size: 13px;
}
.pga-cat-item:hover { background: var(--pga-surface-3); color: var(--pga-brand) !important; }
.pga-cat-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.pga-cat-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--pga-surface-2);
  color: var(--pga-text-muted);
  font-size: 14px;
  flex-shrink: 0;
  transition: all 200ms;
}
.pga-cat-item:hover .pga-cat-icon { background: var(--pga-brand); color: white; }
.pga-cat-count {
  font-size: 11px;
  color: var(--pga-text-soft);
  font-family: "JetBrains Mono", monospace;
  background: var(--pga-surface-2);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}

/* ─── WIDGET 3: POPULAR TAGS ─── */
.pga-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pga-tags-cloud a {
  background: var(--pga-surface-2);
  color: var(--pga-text);
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 200ms;
}
.pga-tags-cloud a:hover { background: var(--pga-text); color: white !important; }
.pga-tags-cloud a.popular {
  background: var(--pga-brand);
  color: white !important;
  font-weight: 600;
}
.pga-tags-cloud a.popular:hover { background: var(--pga-brand-dark); }

/* ─── RESPONSIVE: Stack sidebar below article ─── */
@media (max-width: 1100px) {
  .pga-blog-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 760px;
  }
  .pga-blog-layout .pga-blog { max-width: 100%; }
  .pga-sidebar {
    position: static;
    top: auto;
    width: 100%;
  }
}
@media (max-width: 599px) {
  .pga-blog-layout { padding: 0 16px; gap: 24px; }
  .pga-widget__body { padding: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   iOS / MOBILE DEFENSIVE FIXES
   - Prevent horizontal scroll
   - Force grid → single column on tablet/mobile
   - Better tap targets
   - Fix sidebar stacking
   - Constrain hero image
   ════════════════════════════════════════════════════════════════════════════ */

/* Prevent any horizontal scroll site-wide (iOS Safari is strict about this) */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Force the blog layout to NEVER overflow */
.pga-blog-main {
  width: 100%;
  overflow-x: hidden;
}
.pga-blog-layout {
  width: 100%;
  max-width: 1180px;
  box-sizing: border-box;
}

/* iPad / large tablet — force single column */
@media (max-width: 1100px) {
  .pga-blog-layout {
    grid-template-columns: 1fr !important;
    gap: 32px;
    max-width: 760px !important;
    padding: 0 20px;
  }
  .pga-blog-layout .pga-blog {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .pga-sidebar {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* iPhone / small tablet */
@media (max-width: 768px) {
  .pga-blog-layout {
    padding: 0 16px;
    gap: 24px;
  }
  .pga-blog__hero {
    margin: 8px 0 24px;
    border-radius: 14px;
  }
  .pga-blog__title {
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em;
  }
  .pga-blog__lede {
    font-size: 16px !important;
    line-height: 1.6;
  }
  .pga-blog__content p {
    font-size: 16px !important;
    line-height: 1.7;
  }
  .pga-blog__content h2 {
    font-size: 22px !important;
    margin-top: 36px;
    padding-left: 14px;
  }
  .pga-blog__content h2::before { width: 3px; }

  /* Tap targets — Apple Human Interface Guidelines: min 44px */
  .pga-tag, .pga-cat-item, .pga-hot-item, .pga-tags-cloud a {
    min-height: 36px;
    display: flex;
    align-items: center;
  }
  .pga-share-btn { width: 44px; height: 44px; }

  /* Sidebar widgets full-width */
  .pga-widget { width: 100%; }
  .pga-widget__heading { padding: 12px 14px; }
  .pga-widget__body { padding: 12px; }

  /* Author box stacks on mobile */
  .pga-blog__author-box {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 20px;
  }
  .pga-blog__author-box-img,
  .pga-blog__author-box-img-real {
    margin: 0 auto;
  }

  /* Pull quotes */
  .pga-pullquote {
    margin: 24px 0 !important;
    padding: 20px 22px !important;
  }
  .pga-pullquote__text { font-size: 18px !important; }

  /* Related grid — single column on small phones */
  .related-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Reading progress — adjust for mobile header */
  .pga-progress { top: 56px; }
}

/* iPhone SE / very small */
@media (max-width: 380px) {
  .pga-blog-layout { padding: 0 12px; }
  .pga-blog__title { font-size: 24px !important; }
  .pga-blog__meta-top {
    font-size: 11px !important;
    gap: 6px !important;
  }
  .pga-hot-name { font-size: 12px !important; }
}

/* iOS Safari — disable double-tap zoom on tap highlights */
.pga-tag, .pga-cat-item, .pga-hot-item, .pga-share-btn,
.pga-tags-cloud a, .related-card, .pga-back-btn {
  -webkit-tap-highlight-color: rgba(198, 40, 40, 0.1);
  -webkit-touch-callout: none;
}

/* Fix iOS sticky inside grid bug (Safari 14 and below) */
@supports (-webkit-touch-callout: none) {
  .pga-sidebar {
    /* iOS Safari: ensure sticky works inside grid */
    -webkit-position: sticky;
  }
}

/* Prevent images from breaking out */
.pga-blog__hero img,
.pga-blog__hero-img,
.pga-blog__content img,
.related-card img,
.pga-hot-icon-img {
  max-width: 100% !important;
  height: auto;
  display: block;
}

/* Ensure long words/URLs don't break layout */
.pga-blog__content,
.pga-blog__title,
.pga-hot-name,
.related-card__title {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE OVERFLOW FIX — Stop horizontal scroll on iOS / mobile
   This is a HARD reset that forces every element inside the article
   to respect the viewport width. Targets the exact issue in screenshot.
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {

  /* Nuclear option — hard-stop horizontal scroll */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Force the layout wrapper and ALL its children to respect viewport */
  .pga-blog-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 0 48px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  .pga-blog-layout {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    box-sizing: border-box !important;
  }

  /* Article and sidebar both must respect viewport */
  .pga-blog-layout > article,
  .pga-blog-layout > aside,
  .pga-blog-layout .pga-blog,
  .pga-blog-layout .pga-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Title — smaller and word-breakable on mobile */
  .pga-blog__title {
    font-size: 26px !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Lede */
  .pga-blog__lede {
    font-size: 16px !important;
    padding-left: 14px !important;
  }

  /* Body content */
  .pga-blog__content {
    width: 100% !important;
    max-width: 100% !important;
  }
  .pga-blog__content > * {
    max-width: 100% !important;
  }
  .pga-blog__content p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    word-wrap: break-word !important;
  }
  .pga-blog__content h2 {
    font-size: 22px !important;
    padding-left: 14px !important;
  }
  .pga-blog__content img,
  .pga-blog__content iframe,
  .pga-blog__content table,
  .pga-blog__content video {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
  }

  /* Hero image */
  .pga-blog__hero {
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 24px !important;
    border-radius: 12px !important;
  }

  /* Pull quotes — kill any negative margins on mobile */
  .pga-pullquote {
    margin: 24px 0 !important;
    padding: 20px 22px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .pga-pullquote__text { font-size: 18px !important; }

  /* Author box */
  .pga-blog__author-box {
    width: 100% !important;
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px !important;
  }

  /* Tags row */
  .pga-blog__tags {
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  /* Related posts grid → single column on phones */
  .related-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .related-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Sidebar widgets */
  .pga-widget {
    width: 100% !important;
    max-width: 100% !important;
  }
  .pga-hot-name,
  .related-card__title {
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* Featured image (parent theme post-thumbnail conflicts) */
  .post-thumbnail,
  article img,
  .wp-post-image {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   CATEGORY BADGE — Fix empty/invisible badge issue on mobile
   - Add missing --blogs variant (purple)
   - Force visible padding/sizing
   - Ensure text is always readable
   ════════════════════════════════════════════════════════════════════════════ */

.pga-blog__category {
  display: inline-block !important;
  background: var(--pga-brand) !important;
  color: white !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  line-height: 1.4 !important;
  min-height: 22px;
  white-space: nowrap;
  /* iOS Safari sometimes drops text rendering — force visibility */
  -webkit-text-fill-color: white;
  text-shadow: none;
}

/* Color variants */
.pga-blog__category--news   { background: #2563eb !important; }
.pga-blog__category--guide  { background: #10b981 !important; }
.pga-blog__category--tips   { background: #f59e0b !important; }
.pga-blog__category--blogs  { background: #7C3AED !important; }

/* Ensure meta-top elements are always visible on mobile */
@media (max-width: 768px) {
  .pga-blog__meta-top {
    font-size: 11px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
  }
  .pga-blog__meta-top time,
  .pga-blog__meta-top span:not(.pga-blog__category):not(.pga-blog__sep) {
    color: var(--pga-text-muted) !important;
    font-size: 11px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE HAMBURGER MENU
   - Hamburger button visible only below 1100px
   - Nav transforms into slide-down full-width menu on mobile
   - Body scroll locked when menu open
   ════════════════════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.pga-hamburger {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  z-index: 110;
  position: relative;
}
.pga-hamburger span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--pga-text);
  border-radius: 2px;
  transition: transform 250ms, opacity 200ms;
}

/* Hamburger → X animation when menu open */
.pga-hamburger.is-open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.pga-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.pga-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Lock body scroll when menu open */
body.pga-menu-open {
  overflow: hidden;
}

/* ─── DESKTOP: Hide hamburger, show nav inline (default behavior preserved) ─── */
@media (min-width: 1101px) {
  .pga-hamburger { display: none; }
}

/* ─── MOBILE / TABLET: Show hamburger, hide nav, transform nav to dropdown ─── */
@media (max-width: 1100px) {

  .pga-hamburger {
    display: flex !important;
  }

  /* Hide CTA text on small screens to save space (keep arrow) */
  .pga-header__cta {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Nav becomes a slide-down panel below header */
  .pga-nav {
    position: fixed !important;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 16px 32px !important;
    border-top: 1px solid var(--pga-line);
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    overflow-y: auto;
    display: flex !important;
    -webkit-overflow-scrolling: touch;
  }
  body.admin-bar .pga-nav { top: 110px; }

  .pga-nav.is-open {
    transform: translateX(0);
    box-shadow: -4px 0 24px -8px rgba(0, 0, 0, 0.15);
  }

  /* Nav links — full-width tappable rows */
  .pga-nav a {
    display: flex !important;
    align-items: center;
    padding: 16px 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--pga-text) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--pga-line);
    border-radius: 0 !important;
    transition: all 200ms;
    min-height: 52px;
  }
  .pga-nav a:hover,
  .pga-nav a:active {
    background: var(--pga-surface-3);
    color: var(--pga-brand) !important;
    padding-left: 18px !important;
  }
  .pga-nav a::after {
    content: '→';
    margin-left: auto;
    color: var(--pga-text-soft);
    font-size: 18px;
    opacity: 0;
    transition: opacity 200ms;
  }
  .pga-nav a:hover::after,
  .pga-nav a:active::after {
    opacity: 1;
  }
}

/* ─── Compact tweaks for very small screens ─── */
@media (max-width: 460px) {
  .pga-header__cta {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
  .pga-header__cta svg { width: 12px; height: 12px; }
  .pga-logo__sub { display: none !important; } /* Hide "Independent Directory" subtitle */
}

/* ════════════════════════════════════════════════════════════════════════════
   HAMBURGER BREAKPOINT FIX — Mobile only (≤768px)
   Override the previous 1100px breakpoint.
   Tablet/iPad and desktop keep inline nav.
   ════════════════════════════════════════════════════════════════════════════ */

/* Tablet (769px – 1024px) — show inline nav with tighter spacing */
@media (min-width: 769px) and (max-width: 1024px) {
  .pga-hamburger { display: none !important; }

  .pga-nav {
    /* Restore inline nav (override mobile slide-out) */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: transparent !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
  .pga-nav a {
    padding: 8px 4px !important;
    font-size: 13px !important;
    border: 0 !important;
    min-height: auto !important;
    border-radius: 0 !important;
  }
  .pga-nav a::after { display: none !important; }
  .pga-nav a:hover { padding-left: 4px !important; background: transparent !important; }

  /* Save space on tablet */
  .pga-logo__sub { display: none !important; }
}

/* Desktop (≥1025px) — definitely no hamburger */
@media (min-width: 1025px) {
  .pga-hamburger { display: none !important; }
}

/* Mobile only (≤768px) — hamburger visible, slide-out menu active */
@media (max-width: 768px) {
  .pga-hamburger {
    display: flex !important;
  }
}

/* Make sure desktop nav (>1024px) keeps its inline style */
@media (min-width: 1025px) {
  .pga-nav {
    position: static !important;
    flex-direction: row !important;
    background: transparent !important;
    transform: none !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .pga-nav a {
    padding: 0 !important;
    border: 0 !important;
    min-height: auto !important;
  }
  .pga-nav a::after { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CONSISTENT HEADER → CONTENT SPACING
   Ensures every page (homepage, post, category, tag, static) has proper
   breathing room below the sticky header — desktop AND mobile.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Single posts (blog + review) ─── */
.pga-blog-main,
.pga-single-main {
  padding-top: 48px !important;
  padding-bottom: 64px !important;
}

/* ─── Static pages (about, disclaimer, privacy) ─── */
.pga-page-main,
.pga-page__inner {
  padding-top: 48px !important;
}

/* ─── Category & Tag archive hero banners ─── */
.pga-cat-hero,
.pga-tag-hero {
  padding-top: 64px !important;
  padding-bottom: 48px !important;
}

/* ─── First section after header on any page ─── */
main#content > section:first-child:not(.pga-cat-hero):not(.pga-tag-hero):not(.pga-hero),
main#content > .pga-section:first-child {
  padding-top: 40px;
}

/* ─── Subtle separator below the sticky header ─── */
.pga-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 12px -8px rgba(0, 0, 0, 0.06);
}

/* ─── Mobile adjustments — tighter but still breathable ─── */
@media (max-width: 768px) {
  .pga-blog-main,
  .pga-single-main {
    padding-top: 28px !important;
    padding-bottom: 48px !important;
  }
  .pga-page-main,
  .pga-page__inner {
    padding-top: 28px !important;
  }
  .pga-cat-hero,
  .pga-tag-hero {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
  }
  main#content > section:first-child:not(.pga-cat-hero):not(.pga-tag-hero):not(.pga-hero),
  main#content > .pga-section:first-child {
    padding-top: 24px;
  }
}

/* ─── Very small phones (≤460px) ─── */
@media (max-width: 460px) {
  .pga-blog-main,
  .pga-single-main {
    padding-top: 20px !important;
  }
  .pga-cat-hero,
  .pga-tag-hero {
    padding-top: 32px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   HAMBURGER MENU FIX — FINAL VERSION
   Replace the broken slide-out with a clean show/hide dropdown.
   This block goes LAST in the stylesheet so it wins all cascade conflicts.
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── 1. Hamburger button always visible on mobile ─── */
  .pga-hamburger {
    display: flex !important;
  }

  /* ─── 2. Nav panel — HIDDEN by default on mobile ─── */
  .pga-nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    background: white !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 16px 24px !important;
    margin: 0 !important;
    border-top: 1px solid var(--pga-line) !important;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15) !important;
    z-index: 99 !important;
    transform: none !important;
    transition: none !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 80px);
  }

  /* ─── 3. Nav panel — SHOWN when hamburger toggled ─── */
  .pga-nav.is-open {
    display: flex !important;
  }

  /* ─── 4. Nav links — full-width tappable rows ─── */
  .pga-nav a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 16px 8px !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--pga-text) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--pga-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    min-height: 52px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
  .pga-nav a:last-child {
    border-bottom: 0 !important;
  }
  .pga-nav a:active,
  .pga-nav a:hover {
    background: var(--pga-surface-3) !important;
    color: var(--pga-brand) !important;
    padding-left: 14px !important;
  }
  .pga-nav a::after {
    content: '→' !important;
    margin-left: auto !important;
    color: var(--pga-text-soft) !important;
    font-size: 18px !important;
    opacity: 0.5 !important;
    display: inline !important;
  }

  /* ─── 5. Header inner — make sure it can position the nav panel ─── */
  .pga-header {
    position: sticky !important;
  }
  .pga-header__inner {
    position: relative !important;
  }
  .pga-container {
    position: relative !important;
  }

  /* ─── 6. Lock body scroll when menu open ─── */
  body.pga-menu-open {
    overflow: hidden !important;
  }
}

/* ─── Desktop & tablet: ABSOLUTELY no hamburger styles applied ─── */
@media (min-width: 769px) {
  .pga-hamburger {
    display: none !important;
  }
  .pga-nav {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
    overflow: visible !important;
    max-height: none !important;
  }
  .pga-nav a {
    padding: 0 !important;
    border: 0 !important;
    min-height: auto !important;
    background: transparent !important;
    font-size: 14px !important;
  }
  .pga-nav a::after {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   SINGLE POST REDESIGN — Design 2: Hero Overlap
   Full-width brand-colored hero band + featured image floats up into body
   Replaces the old centered .pga-blog__header pattern
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── HERO BAND (full-width, brand red default) ─── */
.pga-hero-band {
  background: linear-gradient(135deg, #7F1D1D 0%, #B91C1C 50%, #DC2626 100%);
  color: white;
  padding: 56px 0 100px;
  position: relative;
  overflow: hidden;
}
.pga-hero-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 400px at 50% 20%, rgba(255, 255, 255, 0.1), transparent 60%);
  pointer-events: none;
}
.pga-hero-band__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Category badge inside hero — white background, brand red text */
.pga-hero-band__category {
  display: inline-block;
  background: white;
  color: var(--pga-brand);
  font-family: var(--pga-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.pga-hero-band__title {
  font-family: var(--pga-font-display, 'Geist', sans-serif);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 18px;
  color: white;
}

.pga-hero-band__lede {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 auto 24px;
}

.pga-hero-band__meta {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-family: var(--pga-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  align-items: center;
  flex-wrap: wrap;
}
.pga-hero-band__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pga-hero-band__author strong {
  color: white;
  font-weight: 600;
  font-family: var(--pga-font-body, 'Inter', sans-serif);
}
.pga-hero-band__author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  font-size: 11px;
  font-family: var(--pga-font-display, 'Geist', sans-serif);
}
.pga-hero-band__sep { opacity: 0.5; }

/* ─── Per-category hero color variants ─── */
.pga-hero-band--news {
  background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 50%, #3B82F6 100%);
}
.pga-hero-band--news .pga-hero-band__category { color: #1E3A8A; }

.pga-hero-band--guides {
  background: linear-gradient(135deg, #14532D 0%, #15803D 50%, #16A34A 100%);
}
.pga-hero-band--guides .pga-hero-band__category { color: #14532D; }

.pga-hero-band--tips {
  background: linear-gradient(135deg, #7C2D12 0%, #C2410C 50%, #FB923C 100%);
}
.pga-hero-band--tips .pga-hero-band__category { color: #7C2D12; }

.pga-hero-band--blogs {
  background: linear-gradient(135deg, #581C87 0%, #7E22CE 50%, #A855F7 100%);
}
.pga-hero-band--blogs .pga-hero-band__category { color: #581C87; }

/* ─── FEATURED IMAGE OVERLAP ─── */
.pga-featured-image {
  background: var(--pga-bg, #FAFAFA);
  padding: 0;
}
.pga-featured-image__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}
.pga-featured-image__frame {
  margin-top: -60px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 2;
  aspect-ratio: 16 / 9;
  background: var(--pga-surface-3, #F1F5F9);
}
.pga-featured-image__frame img,
.pga-featured-image__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Mobile defensive */
@media (max-width: 768px) {
  .pga-hero-band {
    padding: 40px 0 80px !important;
  }
  .pga-hero-band__title {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
  .pga-hero-band__lede {
    font-size: 16px !important;
  }
  .pga-hero-band__meta {
    gap: 10px;
    font-size: 11px;
  }
  .pga-featured-image__frame {
    margin-top: -48px;
    border-radius: 12px;
  }
  .pga-featured-image__inner {
    padding: 0 16px;
  }
  .pga-blog-main { padding-top: 32px !important; }
}
@media (max-width: 460px) {
  .pga-hero-band { padding: 32px 0 64px !important; }
  .pga-hero-band__title { font-size: 24px !important; }
  .pga-featured-image__frame { margin-top: -36px; }
}

/* ─── Page body padding (accommodates featured image overlap) ─── */
.pga-page {
  padding-top: 40px !important;
  background: var(--pga-bg, #FAFAFA);
}
@media (max-width: 768px) {
  .pga-page { padding-top: 28px !important; }
}


/* Footer — tablet adjustment for 4-column layout */
@media (min-width: 768px) and (max-width: 1024px) {
  .pga-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .pga-footer__brand {
    grid-column: 1 / -1;
  }
}