/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.2
*/

/* =====================================================================
   THEME PALETTE & TYPOGRAPHY
   --main-color / --main-accent-color are kept dynamic. PHP rewrites the
   :root block at runtime to inject the per-site brand color, so every
   `var(--main-color)` reference below picks up that brand color
   automatically. The defaults here just give a sensible orange baseline
   when no site-specific color has been saved yet.
   ===================================================================== */
:root {

  --page-bg: #f0f5fa;
  --surface: #ffffff;
  --surface-muted: #f7f9fc;
  --text-strong: #1e293b;
  --text-body: #334155;
  --text-soft: #64748b;
  --border-soft: #e2e8f0;
  --border-medium: #cbd5e1;

  --container-max: 1200px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);

  /* Exact system-ui stack used by the reference site (okwins.okwingame.me) */
  --font-stack: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    --main-color: #040028;
    --main-accent-color: #030022;
}

html, body { overflow-x: hidden; }

/* Force the reference site's system-ui stack on every element. The wide
   selector list beats inline font-family styles, plugin CSS, and any
   legacy Plus-Jakarta-Sans @import that lingers in older caches. */
html,
body,
body *,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-stack) !important;
}

body {
  background-color: var(--page-bg) !important;
  color: var(--text-body);
  line-height: 1.7;
  font-size: 16px;
}

/* Container */
.grid-container,
.inside-header.grid-container,
.site-content .container,
.entry-content > * {
  max-width: var(--container-max);
}

.site-content { padding: 0 !important; }
.site-main    { margin: 0 !important; }
.site-main div { margin-bottom: 0; }

/* Reference site has NO white inner panel — content flows directly on the
   slate-blue page bg. Strip surface bg/shadow off every inner wrapper that
   GeneratePress paints white (.site-main, .inside-article, .entry-content,
   article wrappers, etc) so the page is one consistent slate-blue surface. */
.separate-containers .site-main,
.site-main,
.site-content,
#page,
.site,
#primary,
.content-area,
.inside-article,
article.post,
article.page,
article.type-page,
article.hentry,
.wp-block-post,
.entry-content,
.entry-summary,
.page-content {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
}

.separate-containers .site-main {
  margin: 28px auto;
  padding: 0 24px;
  max-width: var(--container-max);
}

@media (max-width: 768px) {
  .separate-containers .site-main {
    margin: 12px auto;
    padding: 0 8px;
  }
  /* Pull the cover hero inset closer to the screen edge on mobile too */
  .wp-block-cover.hero-main { padding-right: 4px !important; padding-left: 4px !important; }
  .wp-block-cover.hero-main h1,
  .wp-block-cover.hero-main .website-name-heading,
  .wp-block-cover.hero-main .wp-block-heading { margin-top: 28px !important; }
}

/* =====================================================================
   HEADER  --  full-width orange bar with white logo + nav.
   GeneratePress puts `grid-container` (max-width: 1200px) on the header
   itself, leaving slate gutters on either side. Force the header to span
   the full viewport so the orange bar reaches edge to edge. The inside-
   header still stretches with its content but is no longer capped. */
.site-header,
.site-header.grid-container {
  background-color: var(--main-color) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Bar is full-width (orange spans edge-to-edge), but the row of content
   inside it (brand + nav) stays centered at the 1200px container so it
   lines up with the page body below. */
.inside-header.grid-container,
.site-header .inside-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px !important;
  max-width: var(--container-max) !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.site-header .site-logo img,
.site-header .header-image,
.site-header img.is-logo-image,
.site-logo img {
  max-height: 52px;
  width: auto;
  display: block;
}

/* Hide the square icon block — reference site doesn't use one */
.website-square-icon,
.site-header .website-square-icon,
.inside-header .square-image,
.site-branding .website-square-icon {
  display: none !important;
}

/* Reference site has no full-bleed image hero. The AIO backup template
   ships a `.wp-block-cover.hero-main` block (image + dark dim + centered
   H1/buttons). Strip the bg/image/dim, but keep the inner H1 + CTA layout
   visible — that matches the reference's centered hero perfectly. */
.hero-bg-image,
.hero-main .hero-bg,
.entry-content > .hero-bg-image {
  display: none !important;
}

.wp-block-cover.hero-main,
.site-main > .wp-block-cover.hero-main {
  background: transparent !important;
  background-color: transparent !important;
  min-height: 0 !important;
  /* No shorthand here — padding-top is set in the dedicated rule below
     so the longhand isn't overridden by this shorthand. */
  padding-right: 0 !important;
  padding-left: 0 !important;
  padding-bottom: 11px !important;
  color: var(--text-strong) !important;
  margin: 0 auto !important;
  max-width: var(--container-max);
}
.wp-block-cover.hero-main .wp-block-cover__image-background,
.wp-block-cover.hero-main img.wp-block-cover__image-background,
.wp-block-cover.hero-main video.wp-block-cover__video-background,
.wp-block-cover.hero-main .wp-block-cover__background,
.wp-block-cover.hero-main .wp-block-cover__gradient-background {
  display: none !important;
  opacity: 0 !important;
}
.wp-block-cover.hero-main .wp-block-cover__inner-container,
.wp-block-cover.hero-main .wp-block-group__inner-container {
  color: var(--text-strong) !important;
}
.wp-block-cover.hero-main h1,
.wp-block-cover.hero-main .wp-block-heading,
.wp-block-cover.hero-main p {
  color: var(--text-strong) !important;
  text-shadow: none !important;
}
/* Keep hero buttons clean — let our generic .wp-block-button styles win */
.wp-block-cover.hero-main .wp-block-button__link {
  color: inherit;
}

/* The AIO backup template used to ship TWO inline-styled <a> buttons inside
   the cover (Sign Up + Login) with hardcoded colors (#2ecc71 green, etc).
   The new [styled_buttons] shortcode wraps its anchors in `.hero-cta-pair`
   with `.hero-btn-*` classes; we exclude those from this normalizer so the
   shortcode's intentional outlined/solid styling wins. This rule only acts
   on legacy hardcoded buttons that lack the new wrapper class. */
.wp-block-cover.hero-main a[style*="background-color"]:not(.hero-btn) {
  background-color: var(--main-color) !important;
  color: #ffffff !important;
  border: 2px solid var(--main-color) !important;
  border-radius: 10px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  min-width: 180px;
  max-width: 320px;
}
/* Hero button pair — side-by-side, with tight spacing (no big empty area
   below the pair). The reference packs the next page section right under
   the buttons. */
.wp-block-cover.hero-main .hero-cta-pair,
.wp-block-cover.hero-main .wp-block-group__inner-container > div:has(> a[style*="background-color"]) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 0;
}

/* Add breathing room at the top so the H1 doesn't sit flush against the
   orange header bar; trim the dead space the cover block reserves below
   its inner content (subheading + description used to live there). */
.wp-block-cover.hero-main {
  padding-top: 24px !important;
  padding-bottom: 0 !important;
  margin-bottom: 8px !important;
}
@media (max-width: 768px) {
  .wp-block-cover.hero-main { padding-top: 16px !important; }
}
.wp-block-cover.hero-main .wp-block-cover__inner-container,
.wp-block-cover.hero-main .wp-block-group,
.wp-block-cover.hero-main .wp-block-group__inner-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.wp-block-cover.hero-main .wp-block-spacer { display: none !important; }
/* Legacy normalizer — make the SECOND legacy button outlined (white bg,
   brand text + border). Scoped to NOT touch the new shortcode's
   `.hero-btn` markup so its intentional inline styling wins. */
.wp-block-cover.hero-main a[style*="background-color"]:not(.hero-btn):nth-of-type(2),
.wp-block-cover.hero-main div:nth-child(2) > a[style*="background-color"]:not(.hero-btn) {
  background-color: #ffffff !important;
  color: var(--main-color) !important;
}
.wp-block-cover.hero-main a[style*="background-color"]:not(.hero-btn) svg { display: none; }

/* Header-builder layout: logo (or brand text) on the left, primary nav on
   the right. The shortcode in functions.php drops these into .header-cta-pair. */
.inside-header .header-cta-pair {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 20px;
}
.inside-header .header-cta-pair .header-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.inside-header .header-cta-pair .header-brand img {
  max-height: 46px;
  width: auto;
  display: block;
}
.inside-header .header-cta-pair .header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0 0 0 auto; /* push nav to the right edge of the header */
  padding: 0;
}
.inside-header .header-cta-pair .header-nav li { margin: 0; padding: 0; }
.inside-header .header-cta-pair .header-nav a {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 14px;
  text-decoration: none;
  border-radius: 6px;
}
.inside-header .header-cta-pair .header-nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
}
/* Mobile: collapse the nav behind a hamburger toggle (CSS-only, no JS).
   The shortcode wraps the menu list with a checkbox + label so we can
   show/hide on click without scripts — the checkbox is invisible. */
.inside-header .header-cta-pair .header-nav-toggle {
  display: none;
}
.inside-header .header-cta-pair .header-nav-burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: #fff;
  margin-left: auto;
}
.inside-header .header-cta-pair .header-nav-burger svg { width: 26px; height: 26px; display: block; }

@media (max-width: 768px) {
  /* GP parent theme forces .inside-header to flex-direction: column +
     text-align: center on mobile, which stacks the logo above the burger
     and centers the logo. We want logo-left + burger-right on one row.
     position: relative anchors the absolute-positioned mobile dropdown
     (defined further below) to the header bar. */
  .inside-header.grid-container,
  .site-header .inside-header {
    position: relative;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    text-align: initial !important;
    justify-content: space-between !important;
  }
  .site-header .site-logo,
  .inside-header .site-logo {
    flex: 0 0 auto;
    margin: 0 !important;
  }
  /* Without this, .header-cta-pair's `width: 100%` (set above for desktop)
     forces the burger to wrap onto its own line on narrow screens. */
  .inside-header .header-cta-pair {
    width: auto !important;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
  }
  .inside-header .header-cta-pair .header-brand { font-size: 18px; flex: 1 1 auto; }
  .inside-header .header-cta-pair .header-brand img { max-height: 36px; }
  .inside-header .header-cta-pair .header-nav-burger { display: inline-flex; }

  /* Mobile dropdown: when the burger toggles the checkbox, the .header-nav
     was previously revealed inline INSIDE .header-cta-pair, which is only
     burger-width on mobile -- so the menu items stacked beside the logo in
     a tiny column. Position it absolutely under the header bar instead so
     it overlays at full container width regardless of the cta-pair size. */
  .inside-header .header-cta-pair .header-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--main-color);
    padding: 8px 0;
    gap: 0;
    z-index: 100;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
  }
  .inside-header .header-cta-pair .header-nav-toggle:checked ~ .header-nav {
    display: flex;
  }
  .inside-header .header-cta-pair .header-nav a {
    display: block;
    padding: 12px 16px;
    border-radius: 8px;
    color: #fff !important;
  }
  .inside-header .header-cta-pair .header-nav a:hover {
    background: rgba(255, 255, 255, 0.18);
  }
}

/* Hero H1 alignment — reference uses left-aligned on desktop, centered on
   mobile. The cover hero centers its inner group; we override its H1 only.
   Explicit big top margin guarantees breathing room from the orange header
   bar even when other padding rules are overridden by the parent theme. */
.wp-block-cover.hero-main h1,
.wp-block-cover.hero-main .website-name-heading,
.wp-block-cover.hero-main .wp-block-heading {
  text-align: left !important;
  font-size: 38px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin: 24px 0 32px !important;
  max-width: 100%;
}
.wp-block-cover.hero-main .wp-block-cover__inner-container,
.wp-block-cover.hero-main .wp-block-group__inner-container {
  text-align: left !important;
  max-width: var(--container-max);
  margin: 0 auto !important;
}
/* But the buttons + description below the H1 stay centered like reference */
.wp-block-cover.hero-main [class*="styled_buttons"],
.wp-block-cover.hero-main .wp-block-buttons,
.wp-block-cover.hero-main .hero-description-only,
.wp-block-cover.hero-main .hero-subheading-only {
  text-align: center !important;
}
@media (max-width: 768px) {
  .wp-block-cover.hero-main h1,
  .wp-block-cover.hero-main .website-name-heading,
  .wp-block-cover.hero-main .wp-block-heading {
    font-size: 26px !important;
    text-align: center !important;
  }
}

.site-header .main-navigation a,
.site-header .main-nav a,
.site-header nav a,
.main-navigation .menu > .menu-item > a {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  padding: 10px 14px;
  text-decoration: none;
}

.main-navigation .menu > .menu-item > a:hover,
.main-navigation .menu > .menu-item.current-menu-item > a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.main-navigation .menu .sub-menu {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 220px;
}

.main-navigation .menu .sub-menu a {
  color: var(--text-body) !important;
  border-radius: 6px;
}
.main-navigation .menu .sub-menu a:hover {
  background: var(--surface-muted);
  color: var(--main-color) !important;
}

/* Mobile menu toggle stays white on the orange bar */
.main-navigation.toggled .menu-toggle,
.menu-toggle {
  color: #ffffff !important;
  background: transparent !important;
}

/* =====================================================================
   HERO  --  centered title + two CTA buttons
   ===================================================================== */
.hero-main {
  text-align: center;
  padding: 18px 0 8px !important;
}

h1, .entry-title, .page-title,
.hero-main .website-name-heading {
  color: var(--text-strong) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

h1, .entry-title, .page-title {
  font-size: 32px;
  line-height: 1.25;
  margin: 18px 0 22px;
}

/* Hide the legacy hero subheading + description (the "Sign up today..." line)
   on the homepage. Reference site keeps its hero clean: H1 → CTA pair → page
   content, with no extra prose between. The stored options stay in the DB
   in case they're re-enabled later. */
.hero-subheading-only,
.hero-content .hero-subheading,
.wp-block-cover.hero-main p.hero-subheading-only,
.hero-description-only,
.wp-block-cover.hero-main .hero-description-only,
.wp-block-cover.hero-main .hero-description {
  display: none !important;
}

.hero-description-only,
.hero-description {
  color: var(--text-body);
  text-align: center;
  max-width: 820px;
  margin: 0 auto 20px;
  font-size: 16px;
}

/* The header dark blue/yellow text from the legacy theme is replaced */
.website-name-heading {
  color: var(--text-strong) !important;
}

@media (max-width: 768px) {
  h1, .entry-title, .page-title { font-size: 26px; line-height: 1.3; }
  .hero-subheading-only { font-size: 16px; }
}

/* =====================================================================
   CONTENT TYPOGRAPHY
   ===================================================================== */
.entry-content { color: var(--text-body); font-size: 16px; line-height: 1.75; }

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: var(--text-strong);
  text-align: left;
  justify-content: flex-start;
  letter-spacing: -0.005em;
  margin-top: 2.2rem;
  margin-bottom: 1rem;
  line-height: 1.35;
}

/* Wins against the legacy heading-style randomizer's `1.3em !important`
   inline-style emitted late on wp_head. We use `body .entry-content` for
   higher specificity AND !important to override that late-loading rule.
   Sizes are ~10% above the original baseline (28/22/19 → 31/24/21). */
body .entry-content h2 { font-size: 31px !important; font-weight: 700 !important; }
body .entry-content h3 { font-size: 24px !important; font-weight: 700 !important; }
body .entry-content h4 { font-size: 21px !important; font-weight: 700 !important; }
body .entry-content h5 { font-size: 19px !important; font-weight: 700 !important; }
body .entry-content h6 { font-size: 17px !important; font-weight: 700 !important; }

/* Defeat the legacy heading-style randomizer (which paints H2/H3 as solid
   orange badges). Use flat dark headings, center-aligned, and bold so
   they read clearly as headings. Higher specificity (body + class) than
   the legacy `.entry-content h2` rule, plus !important to beat its inline-
   style use of !important. */
body .entry-content h1,
body .entry-content h2,
body .entry-content h3,
body .entry-content h4,
body .entry-content h5,
body .entry-content h6 {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block !important;
  color: var(--text-strong) !important;
  text-align: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
}
body .entry-content h1::before,
body .entry-content h2::before,
body .entry-content h3::before,
body .entry-content h4::before,
body .entry-content h1::after,
body .entry-content h2::after,
body .entry-content h3::after,
body .entry-content h4::after { content: none !important; display: none !important; }

.entry-content p   { margin: 0 0 1.1em; }
.entry-content a   { color: var(--main-color); font-weight: 600; }
.entry-content a:hover { color: var(--main-accent-color); text-decoration: underline; }

@media (max-width: 768px) {
  body .entry-content h2 { font-size: 24px !important; }
  body .entry-content h3 { font-size: 21px !important; }
  body .entry-content h4 { font-size: 19px !important; }
  body .entry-content h5 { font-size: 17px !important; }
  body .entry-content h6 { font-size: 16px !important; }
}

/* Override the GeneratePress parent theme's mobile padding on .inside-
   article (and friends), which defaults to 30px. Halve it to ~15px so
   content has more room to breathe on narrow screens. */
@media (max-width: 768px) {
  .separate-containers .inside-article,
  .separate-containers .comments-area,
  .separate-containers .page-header,
  .separate-containers .paging-navigation,
  .one-container .site-content,
  .inside-page-header {
    padding: 15px !important;
  }
}

/* =====================================================================
   LISTS  --  clean, lightweight (replaces the heavy card style)
   ===================================================================== */
.entry-content ul,
.entry-content ol {
  margin: 1.4rem 0;
  padding-left: 1.4rem;
  font-size: 16px;
  line-height: 1.8;
}

.entry-content ul { list-style: none; padding-left: 0; }
.entry-content ul li {
  position: relative;
  padding: 4px 0 4px 28px;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-body);
}
.entry-content ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--main-color);
}

.entry-content ol {
  list-style: decimal;
  padding-left: 1.6rem;
  counter-reset: none;
}
.entry-content ol li {
  padding: 4px 0;
  margin: 0;
  background: transparent;
  border: none;
  color: var(--text-body);
}
.entry-content ol li::before { content: none; }

.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
  margin: 0.4rem 0 0.6rem 1.2rem;
  padding-left: 0.4rem;
}

/* =====================================================================
   TABLES  --  simple bordered (matches reference)
   ===================================================================== */
.entry-content table,
.wp-block-table table,
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: transparent;
  font-size: 15px;
}

.entry-content table th,
.entry-content table td,
.wp-block-table th,
.wp-block-table td,
table th,
table td {
  border: 1px solid var(--border-medium);
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
  color: var(--text-body);
}

.entry-content table th,
.wp-block-table th,
table th {
  font-weight: 700;
  color: var(--text-strong);
  text-align: center;
  background: transparent;
}

.entry-content table tr:hover { background: transparent; }

@media (max-width: 768px) {
  .entry-content table th,
  .entry-content table td { padding: 10px 12px; font-size: 14px; }
}

/* =====================================================================
   BUTTONS  --  outlined + solid orange pair (reference shape)
   ===================================================================== */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 22px 0;
}

.wp-block-button__link,
.wp-block-button__link.wp-element-button {
  font-weight: 500 !important;
  font-size: 18px !important;
  padding: 13px 30px !important;
  border-radius: var(--radius-md) !important;
  letter-spacing: 0.2px !important;
  border: 2px solid var(--main-color) !important;
  background-color: var(--main-color) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  min-height: 48px !important;
  line-height: 1.25 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wp-block-button__link:hover,
.wp-block-button__link.wp-element-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* "Outlined" variant — first button in a pair, or any white-bg button */
.wp-block-buttons .wp-block-button:first-child .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.has-white-background-color {
  background-color: #ffffff !important;
  color: var(--main-color) !important;
  border: 2px solid var(--main-color) !important;
}

.wp-block-buttons .wp-block-button:first-child .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button__link.has-white-background-color:hover {
  background-color: var(--surface-muted) !important;
}

/* =====================================================================
   TABLE OF CONTENTS  --  small inline card (reference look)
   ===================================================================== */
#ez-toc-container {
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 14px 18px !important;
  margin: 1.5rem 0 !important;
  max-width: 360px;
}

#ez-toc-container .ez-toc-title {
  color: var(--text-strong) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin: 0 !important;
}

#ez-toc-container ul,
#ez-toc-container ol {
  margin: 8px 0 0 !important;
  padding-left: 18px !important;
}
#ez-toc-container ul li,
#ez-toc-container ol li {
  padding: 0 !important;
  margin: 4px 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
#ez-toc-container ul li::before,
#ez-toc-container ol li::before { display: none !important; }
#ez-toc-container a {
  color: var(--text-body) !important;
  font-weight: 500;
  text-decoration: none;
}
#ez-toc-container a:hover { color: var(--main-color) !important; text-decoration: underline; }

/* =====================================================================
   FOOTER  --  brand-color bg, white text, white underlined links
   Whole footer takes the brand color so it visually anchors the page.
   High-specificity `body` prefix beats both the legacy single-class rule
   and any plugin CSS that might paint widgets white.
   ===================================================================== */
body .site-footer,
body footer.site-footer,
body .footer-widgets,
body .inside-site-info,
body .site-info {
  background: var(--main-color) !important;
  background-color: var(--main-color) !important;
  color: #ffffff !important;
  border-top: none !important;
}

/* Footer info row — copyright on the left, legal menu on the right,
   vertically centered. Stacks to a column on narrow screens. */
body .inside-site-info {
  padding: 18px 24px !important;
  font-size: 14px;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: space-between;
  gap: 14px 24px;
  text-align: left;
}
body .inside-site-info .copyright-bar {
  order: 0;
  flex: 0 1 auto;
  margin: 0;
}
body .inside-site-info .footer-legal-nav {
  order: 2;
  flex: 0 1 auto;
  width: auto !important;
  margin-left: auto;
}
body .inside-site-info .footer-legal-menu {
  justify-content: flex-end;
}
body .inside-site-info .footer-bar { display: none !important; }
@media (max-width: 600px) {
  body .inside-site-info {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }
  body .inside-site-info .footer-legal-nav { margin-left: 0; }
  body .inside-site-info .footer-legal-menu { justify-content: center; }
}

/* Footer legal menu — horizontal row of pill-style links, dot separators
   on wider screens, stacked column on small screens. */
body .footer-legal-nav {
  width: 100%;
  display: block;
}
body .footer-legal-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 18px;
}
body .footer-legal-menu li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
}
body .footer-legal-menu li::before { content: none !important; }
body .footer-legal-menu li + li::before {
  content: "·";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  display: block !important;
}
body .footer-legal-menu a {
  color: #ffffff !important;
  font-weight: 500;
  text-decoration: none !important;
  padding: 4px 0;
  font-size: 14px;
}
body .footer-legal-menu a:hover {
  text-decoration: underline !important;
  text-decoration-color: #ffffff !important;
}
@media (max-width: 600px) {
  body .footer-legal-menu { gap: 2px 14px; font-size: 13px; }
  body .footer-legal-menu li + li::before { left: -10px; }
}

/* Force every text node inside the footer to white so copy is readable on
   the brand-color bg regardless of inherited theme rules. */
body .site-footer,
body .site-footer p,
body .site-footer span,
body .site-footer li,
body .site-footer h1,
body .site-footer h2,
body .site-footer h3,
body .site-footer h4,
body .site-footer h5,
body .site-footer h6,
body .inside-site-info,
body .inside-site-info p,
body .inside-site-info span {
  color: #ffffff !important;
}

/* Titles inside footer widgets sit slightly bolder; still white. */
body .site-footer .widget-title,
body .site-footer h2,
body .site-footer h3,
body .site-footer h4 {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 12px;
}

/* Links: white with subtle underline — readable on the brand-color bg. */
body .site-footer a,
body .inside-site-info a {
  color: #ffffff !important;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
body .site-footer a:hover,
body .inside-site-info a:hover {
  color: #ffffff !important;
  text-decoration-color: #ffffff;
}

.footer-widgets {
  padding: 36px 24px;
}

.footer-widgets-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--container-max);
  margin: 0 auto;
}
@media (max-width: 768px) {
  .footer-widgets-container { grid-template-columns: 1fr; gap: 22px; }
}

/* =====================================================================
   FLOATING SIGN-UP-BONUS PILL  (reference uses the same pattern)
   functions.php inserts this — these rules harmonize the look.
   ===================================================================== */
.signup-bonus-float {
  border: 2px dashed rgba(0, 0, 0, 0.85) !important;
  border-radius: var(--radius-md) !important;
}

/* =====================================================================
   LEGACY MOBILE OVERRIDES (kept compact)
   ===================================================================== */
@media (max-width: 768px) {
  .inside-header.grid-container { padding: 12px 16px !important; gap: 12px; }
  .site-header .site-logo img { max-height: 42px; }
}

/* High-contrast / reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link,
  .wp-block-button__link.wp-element-button { transition: none !important; }
}

/* =====================================================================
   DISABLE HOVER MOTION/EFFECTS  --  mobile-first theme
   On a mobile-focused site nobody actually hovers, but the legacy parent
   theme + heading-style randomizer pile on transform/box-shadow/border-
   width hover transitions that flicker on touch devices when an element
   gets focus. Kill them globally for headings and clickable cards. Color
   hovers on links stay (they're cheap and useful for accessibility). */
body .entry-content h1:hover,
body .entry-content h2:hover,
body .entry-content h3:hover,
body .entry-content h4:hover,
body .entry-content h5:hover,
body .entry-content h6:hover,
.entry-content ul li:hover,
.entry-content ol li:hover,
.faq-item:hover,
.feature-content:hover,
.feature-item:hover,
.app-info-table tr:hover,
.wp-block-button__link:hover,
.wp-block-button__link.wp-element-button:hover,
.signup-bonus-float:hover,
.signup-bonus-float:focus,
.hero-cta-pair a:hover,
.hero-btn:hover {
  transform: none !important;
  box-shadow: none !important;
  border-width: inherit;
  background-image: none !important;
}

/* Cancel transitions globally on these elements so a tap doesn't trigger
   a brief hover-state flash on touch screens. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content ul li,
.entry-content ol li,
.faq-item,
.feature-content,
.feature-item,
.app-info-table tr,
.wp-block-button__link,
.signup-bonus-float,
.hero-cta-pair a,
.hero-btn {
  transition: none !important;
  animation: none !important;
}

/* WordPress admin bar safe-zone */
body.admin-bar .signup-bonus-float { bottom: 50px; }