/*
 * quiz-skin.css — Quiz-design reskin for the 186 legacy Divi replica pages.
 *
 * Loaded by the legacy renderer (app/(legacy)/[...slug]/page.tsx and
 * app/not-found.tsx) AFTER the #legacy-head-extras div, so it cascades over
 * every Divi stylesheet. content/legacy/ partials are never edited (SEO
 * contract) — presentation changes happen only here.
 *
 * Tokens: DESIGN-SYSTEM.md (AI Quiz Funnels reference design).
 * Scope: typography, colors, buttons, container widths ONLY.
 * No layout / display / position changes; Divi grids, sliders, forms and
 * toggles keep their own geometry.
 *
 * Specificity strategy:
 * - #legacy-body prefix (1 id) beats Divi's class-level rules; where Divi
 *   uses !important (customizer/module CSS) we also use !important — later
 *   file + higher specificity wins.
 * - Container rules are intentionally LOW specificity (bare .et_pb_row /
 *   .container) so per-row custom widths (.et_pb_row_N.et_pb_row) still win.
 * - .et_pb_bg_layout_dark guards restore light text on dark sections
 *   (e.g. black theme-builder footer) instead of forcing ink everywhere.
 */

/* Fonts: 185/186 captured heads already load Raleway + Josefin Sans via
   Google Fonts; /build-an-ecommerce-quiz-ebook/embed/ does not, so import
   here (same v1 API endpoint the pages already use — cached, deduped). */
@import url("https://fonts.googleapis.com/css?family=Raleway:500,600,700,800|Josefin+Sans:regular,500,600,700&subset=latin,latin-ext&display=swap");

:root {
  --qs-font-display: Raleway, "Helvetica Neue", Arial, sans-serif;
  --qs-font-body: "Josefin Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --qs-ink: #25303f;
  --qs-muted: #747d88;
  --qs-accent: #8561aa;
  --qs-accent-hover: #6e4f8f;
  --qs-accent-tint: rgba(133, 98, 170, 0.1);
  --qs-accent-light: #b391d2;
  --qs-glow: 0 10px 30px rgba(133, 98, 170, 0.3);
  --qs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------------------------------------------------------------- */
/* 1. Base text                                                      */
/* ---------------------------------------------------------------- */

#legacy-body {
  font-family: var(--qs-font-body);
  color: var(--qs-ink);
  font-size: 15px;
  line-height: 1.55; /* 23.25px at 15px — unitless so headings inherit safely */
}

/* Body copy inside content areas only (never the header/nav chrome).
   .et-l covers theme-builder post + footer layouts; the epkb/eckb ids cover
   the /help/ knowledge-base pages, which have no #main-content. */
#legacy-body
  :is(#main-content, .et-l, #eckb-article-page-container-v2, #epkb-main-page-container)
  :is(p, li, blockquote) {
  font-family: var(--qs-font-body);
  font-size: 15px;
  line-height: 23.25px;
  color: var(--qs-ink);
}

/* Dark sections (black TB footer, dark signup boxes) keep light copy. */
#legacy-body
  :is(#main-content, .et-l, #eckb-article-page-container-v2, #epkb-main-page-container)
  .et_pb_bg_layout_dark
  :is(p, li, blockquote) {
  color: #ffffff;
}

#legacy-body blockquote {
  border-color: var(--qs-accent);
}

/* ---------------------------------------------------------------- */
/* 2. Headings — Raleway display scale                               */
/* ---------------------------------------------------------------- */

#legacy-body h1,
#legacy-body h2,
#legacy-body h3,
#legacy-body h4,
#legacy-body h5,
#legacy-body h6 {
  font-family: var(--qs-font-display) !important;
  color: var(--qs-ink) !important;
}

#legacy-body h1 {
  font-weight: 800 !important;
  font-size: 64px !important;
  line-height: 69.12px !important;
  letter-spacing: -0.64px !important;
}

#legacy-body h2 {
  font-weight: 800 !important;
  font-size: 48px !important;
  line-height: 53.76px !important;
  letter-spacing: -0.24px !important;
}

#legacy-body h3 {
  font-weight: 800 !important;
  font-size: 36px !important;
  line-height: 41.4px !important;
  letter-spacing: -0.18px !important;
}

#legacy-body h4 {
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

#legacy-body h5,
#legacy-body h6 {
  font-weight: 700 !important;
}

/* Dark-section headings stay white (black TB footer, dark boxes). */
#legacy-body .et_pb_bg_layout_dark :is(h1, h2, h3, h4, h5, h6) {
  color: #ffffff !important;
}

/* Blog cards: archive/grid post titles use the cardTitle token, not h2. */
#legacy-body .et_pb_post .entry-title,
#legacy-body .et_pb_post h2.entry-title,
#legacy-body .et_pb_blog_grid h2,
#legacy-body .et_pb_posts .entry-title {
  font-family: var(--qs-font-display) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

#legacy-body .et_pb_post .entry-title a {
  color: var(--qs-ink);
}
#legacy-body .et_pb_post .entry-title a:hover {
  color: var(--qs-accent);
}

/* ---------------------------------------------------------------- */
/* 3. Links                                                          */
/* ---------------------------------------------------------------- */

#legacy-body
  :is(#main-content, .et-l, #eckb-article-page-container-v2, #epkb-main-page-container)
  a:not(.et_pb_button) {
  color: var(--qs-accent);
}

#legacy-body
  :is(#main-content, .et-l, #eckb-article-page-container-v2, #epkb-main-page-container)
  a:not(.et_pb_button):hover {
  color: var(--qs-accent-hover);
}

/* Links on dark sections: white, hover accentLight (quiz dark-band style). */
#legacy-body
  :is(#main-content, .et-l, #eckb-article-page-container-v2, #epkb-main-page-container)
  .et_pb_bg_layout_dark
  a:not(.et_pb_button) {
  color: #ffffff;
}

#legacy-body
  :is(#main-content, .et-l, #eckb-article-page-container-v2, #epkb-main-page-container)
  .et_pb_bg_layout_dark
  a:not(.et_pb_button):hover {
  color: var(--qs-accent-light);
}

/* Post meta stays muted (after the link rules so it wins for meta links). */
#legacy-body .post-meta,
#legacy-body .post-meta a,
#legacy-body .et_pb_post .post-meta,
#legacy-body .et_pb_post .post-meta a,
#legacy-body .published {
  color: var(--qs-muted) !important;
}

/* ---------------------------------------------------------------- */
/* 4. Buttons — primary CTA token                                    */
/* ---------------------------------------------------------------- */

/* Content + theme-builder areas only; the header nav pill is styled apart
   so the fixed header keeps its compact height. */
#legacy-body
  :is(#main-content, .et-l, #main-footer, #eckb-article-page-container-v2, #epkb-main-page-container)
  .et_pb_button {
  background-color: var(--qs-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important; /* also resets UA 2px outset on <button>/<input> */
  border-radius: 6px !important;
  padding: 18px 24px !important;
  font-family: var(--qs-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2.34px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none;
  transition:
    background-color 0.2s var(--qs-ease),
    box-shadow 0.2s var(--qs-ease),
    color 0.2s var(--qs-ease) !important;
}

#legacy-body
  :is(#main-content, .et-l, #main-footer, #eckb-article-page-container-v2, #epkb-main-page-container)
  .et_pb_button:hover,
#legacy-body
  :is(#main-content, .et-l, #main-footer, #eckb-article-page-container-v2, #epkb-main-page-container)
  .et_pb_button:focus {
  background-color: var(--qs-accent-hover) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  padding: 18px 24px !important; /* cancel Divi's hover padding shift */
  box-shadow: var(--qs-glow) !important;
}

/* Divi's data-icon arrow (shifts padding on hover) — quiz buttons have none. */
#legacy-body
  :is(#main-content, .et-l, #main-footer, #eckb-article-page-container-v2, #epkb-main-page-container)
  .et_pb_button:before,
#legacy-body
  :is(#main-content, .et-l, #main-footer, #eckb-article-page-container-v2, #epkb-main-page-container)
  .et_pb_button:after {
  display: none !important;
}

/* Big theme-builder footer CTA gets the primaryLarge token. */
#legacy-body .et-l .et_pb_button_0_tb_footer.et_pb_button {
  padding: 20px 36px !important;
  font-size: 14px !important;
  letter-spacing: 2.52px !important;
}

/* Header nav CTA ("GET IT NOW") → quiz navPill token. */
#legacy-body #et-top-navigation .et_pb_button {
  background-color: var(--qs-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-family: var(--qs-font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.54px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  transition:
    background-color 0.2s var(--qs-ease),
    box-shadow 0.2s var(--qs-ease) !important;
}

#legacy-body #et-top-navigation .et_pb_button:hover {
  background-color: var(--qs-accent-hover) !important;
  box-shadow: var(--qs-glow) !important;
}

#legacy-body #et-top-navigation .et_pb_button:before,
#legacy-body #et-top-navigation .et_pb_button:after {
  display: none !important;
}

/* ---------------------------------------------------------------- */
/* 5. Header / nav chrome                                            */
/* ---------------------------------------------------------------- */

/* The compact nav pill above shortened #et-top-navigation, and Divi derives
   #main-header height from it — #logo is max-height:77% of that header, so
   the wordmark shrank on every legacy page (243→195px). Pin the nav back to
   its original WordPress-rendered height (70.8px border-box incl. 15px top
   padding) so the header chrome and logo (~242×55) match the live site; the
   scrolled .et-fixed-header state is naturally taller (80.8px), so this
   min-height is a no-op there. Desktop-nav breakpoint only. */
@media (min-width: 981px) {
  #legacy-body #et-top-navigation {
    min-height: 70.8px;
  }
}

#legacy-body #main-header,
#legacy-body #top-menu a,
#legacy-body #mobile_menu a,
#legacy-body .mobile_nav .select_page {
  font-family: var(--qs-font-display);
}

#legacy-body #top-menu a {
  font-weight: 700;
  letter-spacing: 1.54px;
  color: var(--qs-ink);
}

#legacy-body #top-menu a:hover,
#legacy-body #top-menu .current-menu-item > a {
  color: var(--qs-accent);
  opacity: 1;
}

#legacy-body #mobile_menu a {
  color: var(--qs-ink);
}

#legacy-body .mobile_menu_bar:before,
#legacy-body .mobile_menu_bar:after {
  color: var(--qs-accent);
}

/* ---------------------------------------------------------------- */
/* 6. Container widths — 75rem (1200px) canonical                    */
/* ---------------------------------------------------------------- */

/* Deliberately low specificity: wins over Divi's default 1080px cap by file
   order alone, but still LOSES to per-row custom widths
   (.et_pb_row_N.et_pb_row) so intentional wide/narrow rows keep working.
   Divi's width:80% left legacy content at 1152px/left-144 while the whole
   site sits at 1200px/left-120 (judge's remaining deviation) — 24px gutters
   match the chrome's container padding exactly at every viewport. */
.et_pb_row {
  width: min(calc(100% - 48px), 1200px);
  max-width: 1200px;
}

.container {
  max-width: 1200px;
}

/* Knowledge-base article grid: 1140px fixed → fluid, capped at 1200px. */
#legacy-body #eckb-article-page-container-v2 #eckb-article-body {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------- */
/* 7. Knowledge base (/help/) — Echo KB plugin                       */
/* ---------------------------------------------------------------- */

/* Off-brand pink search banner → accent (inline-styled, hence !important). */
#legacy-body .epkb-doc-search-container {
  background-color: var(--qs-accent) !important;
}

#legacy-body .epkb-doc-search-container__title {
  color: #ffffff !important;
  font-size: 36px !important;
  line-height: 1.15 !important;
}

/* Slate search submit → token button colors (padding left to the plugin so
   the search-bar row keeps its height). */
#legacy-body #epkb-search-kb {
  background: var(--qs-accent) !important;
  background-color: var(--qs-accent) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-family: var(--qs-font-body) !important;
  font-weight: 700 !important;
  transition: background-color 0.2s var(--qs-ease) !important;
}

#legacy-body #epkb-search-kb:hover {
  background: var(--qs-accent-hover) !important;
  background-color: var(--qs-accent-hover) !important;
}

/* Category tiles: slate Josefin headers → h3 token; teal icons → accent. */
#legacy-body h2.epkb-cat-name,
#legacy-body .epkb-cat-name {
  font-family: var(--qs-font-display) !important;
  font-weight: 800 !important;
  font-size: 36px !important;
  line-height: 41.4px !important;
  letter-spacing: -0.18px !important;
  color: var(--qs-ink) !important;
}

#legacy-body .epkb-cat-icon {
  color: var(--qs-accent) !important;
}

/* Article title + TOC / article nav: plugin blues → accent. */
#legacy-body .eckb-article-title,
#legacy-body .eckb-article-title__text {
  font-family: var(--qs-font-display) !important;
  font-weight: 800 !important;
  color: var(--qs-ink) !important;
}

#legacy-body #eckb-article-body .eckb-article-toc__inner {
  border-color: var(--qs-accent);
}

#legacy-body #eckb-article-body .eckb-article-toc__title,
#legacy-body #eckb-article-body .eckb-article-toc__inner a {
  color: var(--qs-accent);
}

#legacy-body #eckb-article-body .eckb-article-toc ul a.active {
  background-color: var(--qs-accent) !important;
  color: #ffffff !important;
}

#legacy-body #eckb-article-body .eckb-article-toc ul a:hover {
  background-color: var(--qs-accent-tint) !important;
  color: var(--qs-accent-hover) !important;
}

#legacy-body #eckb-article-content-footer .epkb-article-navigation-container a {
  color: var(--qs-accent) !important;
  background-color: var(--qs-accent-tint) !important;
}

#legacy-body #eckb-article-content-footer .epkb-article-navigation-container a:hover {
  color: #ffffff !important;
  background-color: var(--qs-accent-hover) !important;
}

/* ---------------------------------------------------------------- */
/* 8. Responsive heading scale                                       */
/*    (our !important sizes override Divi's own mobile shrinks, so   */
/*    provide the equivalents; same selectors, later = they win)     */
/* ---------------------------------------------------------------- */

@media only screen and (max-width: 980px) {
  #legacy-body h1 {
    font-size: 48px !important;
    line-height: 1.1 !important;
  }
  #legacy-body h2 {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }
  #legacy-body h3 {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
  #legacy-body h2.epkb-cat-name,
  #legacy-body .epkb-cat-name {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
}

@media only screen and (max-width: 767px) {
  #legacy-body h1 {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }
  #legacy-body h2 {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }
  #legacy-body h3 {
    font-size: 25px !important;
    line-height: 1.25 !important;
  }
  #legacy-body h4 {
    font-size: 20px !important;
  }
  #legacy-body h2.epkb-cat-name,
  #legacy-body .epkb-cat-name {
    font-size: 25px !important;
    line-height: 1.25 !important;
  }
  #legacy-body .epkb-doc-search-container__title {
    font-size: 28px !important;
  }
}

/* Diego 2026-08-24: the Divi header/footer are replaced by the home chrome
   (app/(legacy)/[...slug]/page.tsx strips them). Divi still reserves space for
   its fixed header on #page-container — remove it, the new header is sticky
   in normal flow. */
#page-container, .et_fixed_nav #page-container { padding-top: 0 !important; }
/* Diego 2026-08-25: WordPress's empty "Recent Comments" sidebar widget (comments
   are closed site-wide; the list was always empty) must not show. */
#sidebar .widget_recent_comments { display: none !important; }