/*
Theme Name:   Fib Fact (Astra Child)
Theme URI:    https://fibfact.com
Description:  Astra child theme for fibfact.com. Dark navy look matching the Fib Fact game, self-hosted Rubik font, logo and site icon, plus one-click setup of the home page (game), How to Play guide, FAQ, About, Contact and Privacy & Cookies pages.
Author:       Fib Fact
Template:     astra
Version:      1.1.1
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  fibfact-astra
*/

/* ==========================================================================
   Tokens. The Astra palette variables are set too, so anything Astra
   colours with its global palette picks up the brand.
   ========================================================================== */
:root {
  --ffs-bg: #141a2e;
  --ffs-bg-2: #1b2340;
  --ffs-panel: #222b4a;
  --ffs-panel-2: #2a3458;
  --ffs-line: #0d1020;
  --ffs-ink: #f4f6fb;
  --ffs-text: #d4d9e8;
  --ffs-muted: #a3abc4;
  --ffs-fib: #ffc21a;
  --ffs-fib-2: #ffd75e;
  --ffs-fact: #2f7bff;
  --ffs-fact-2: #5fb0ff;
  --ffs-radius: 18px;
  --ffs-font: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ast-global-color-0: #ffc21a;
  --ast-global-color-1: #ffd75e;
  --ast-global-color-2: #f4f6fb;
  --ast-global-color-3: #d4d9e8;
  --ast-global-color-4: #141a2e;
  --ast-global-color-5: #1b2340;
  --ast-global-color-6: #222b4a;
  --ast-global-color-7: #2a3458;
  --ast-global-color-8: #0d1020;
}

/* ==========================================================================
   Base
   ========================================================================== */
html { background: var(--ffs-bg); }
body.fibfact-site,
body.fibfact-site #page,
body.fibfact-site .site-content,
body.fibfact-site.ast-separate-container,
body.fibfact-site.ast-plain-container {
  background: radial-gradient(1200px 600px at 50% -200px, var(--ffs-bg-2), var(--ffs-bg)) fixed, var(--ffs-bg);
  color: var(--ffs-text);
}
body.fibfact-site,
body.fibfact-site button,
body.fibfact-site input,
body.fibfact-site select,
body.fibfact-site textarea {
  font-family: var(--ffs-font);
}
body.fibfact-site { font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

body.fibfact-site h1, body.fibfact-site h2, body.fibfact-site h3,
body.fibfact-site h4, body.fibfact-site h5, body.fibfact-site h6,
body.fibfact-site .entry-title, body.fibfact-site .entry-title a {
  font-family: var(--ffs-font);
  color: var(--ffs-ink);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
body.fibfact-site .entry-content h2 { font-size: 30px; margin: 1.6em 0 .5em; }
body.fibfact-site .entry-content h3 { font-size: 22px; margin: 1.4em 0 .4em; }
body.fibfact-site .entry-content h4 { font-size: 18px; }

body.fibfact-site a { color: var(--ffs-fib); text-decoration-thickness: 2px; text-underline-offset: 3px; }
body.fibfact-site a:hover, body.fibfact-site a:focus { color: var(--ffs-fib-2); }
body.fibfact-site :focus-visible { outline: 3px solid var(--ffs-fact-2); outline-offset: 2px; }
body.fibfact-site strong, body.fibfact-site b { color: var(--ffs-ink); }
body.fibfact-site ::selection { background: var(--ffs-fib); color: var(--ffs-line); }

/* Astra's content boxes: keep them, in navy */
body.fibfact-site.ast-separate-container .ast-article-single,
body.fibfact-site.ast-separate-container .ast-article-post,
body.fibfact-site.ast-separate-container .comment-respond,
body.fibfact-site.ast-separate-container .ast-comment-list li,
body.fibfact-site.ast-separate-container .ast-author-box,
body.fibfact-site.ast-separate-container .ast-woocommerce-container,
body.fibfact-site .ast-separate-container .ast-article-single {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}
body.fibfact-site:not(.ff-game-template) #primary { margin: 40px 0 56px; padding: 0; }
@media (max-width: 544px) { body.fibfact-site:not(.ff-game-template) #primary { margin: 24px 0 40px; } }
body.fibfact-site .site-content .ast-container { padding-left: 20px; padding-right: 20px; }
body.fibfact-site:not(.ff-game-template) .site-content > .ast-container { max-width: 860px; }
body.fibfact-site .entry-header { margin-bottom: 1.2em; text-align: left; }
body.fibfact-site .entry-header .entry-title { font-size: clamp(34px, 6vw, 52px); }
body.fibfact-site .entry-content > * { max-width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */
body.fibfact-site .site-header,
body.fibfact-site .main-header-bar,
body.fibfact-site .ast-primary-header-bar,
body.fibfact-site .ast-above-header-bar,
body.fibfact-site .ast-below-header-bar,
body.fibfact-site .ast-mobile-header-wrap .ast-primary-header-bar,
body.fibfact-site .ast-header-break-point .main-header-bar {
  background: rgba(13, 16, 32, .92);
  border-bottom: 0;
}
body.fibfact-site .site-header { border-bottom: 3px solid var(--ffs-line); backdrop-filter: blur(8px); }
body.fibfact-site .site-branding img.custom-logo,
body.fibfact-site .custom-logo-link img { max-width: 120px; height: auto; }
@media (max-width: 921px) {
  body.fibfact-site .custom-logo-link img { max-width: 92px; }
}
body.fibfact-site .site-title, body.fibfact-site .site-title a { color: var(--ffs-ink); font-weight: 900; }
body.fibfact-site .site-description { color: var(--ffs-muted); }

body.fibfact-site .main-header-menu .menu-link,
body.fibfact-site .main-header-menu > .menu-item > .menu-link,
body.fibfact-site .ast-builder-menu .main-navigation .menu-item > .menu-link,
body.fibfact-site .main-navigation a {
  color: var(--ffs-text);
  font-weight: 600;
  font-size: 16px;
}
body.fibfact-site .main-header-menu .menu-item:hover > .menu-link,
body.fibfact-site .main-header-menu .menu-link:hover,
body.fibfact-site .main-header-menu .current-menu-item > .menu-link,
body.fibfact-site .main-header-menu .current_page_item > .menu-link {
  color: var(--ffs-fib);
}
/* "Play" as a pill button */
body.fibfact-site .main-header-menu > .menu-item:first-child > .menu-link {
  background: var(--ffs-fib);
  color: var(--ffs-line);
  border-radius: 999px;
  padding: 6px 18px;
  margin: 0 8px;
  font-weight: 900;
  line-height: 1.6;
  box-shadow: 0 3px 0 var(--ffs-line);
}
body.fibfact-site .main-header-menu > .menu-item:first-child > .menu-link:hover { color: var(--ffs-line); filter: brightness(1.06); }

/* Mobile menu */
body.fibfact-site .ast-mobile-header-content,
body.fibfact-site .ast-mobile-popup-drawer .ast-mobile-popup-inner,
body.fibfact-site .ast-header-break-point .main-header-bar-navigation,
body.fibfact-site .ast-mobile-header-content .main-header-menu,
body.fibfact-site .ast-header-break-point .main-navigation ul {
  background: var(--ffs-bg-2);
}
body.fibfact-site .ast-mobile-header-content .menu-link,
body.fibfact-site .ast-header-break-point .main-navigation .menu-link {
  color: var(--ffs-ink);
  border-color: var(--ffs-line);
}
body.fibfact-site .ast-mobile-header-content .main-header-menu > .menu-item:first-child > .menu-link { margin: 12px 16px; text-align: center; display: block; }
body.fibfact-site .menu-toggle,
body.fibfact-site .ast-mobile-menu-trigger-minimal,
body.fibfact-site button.menu-toggle {
  color: var(--ffs-ink);
  background: transparent;
}
body.fibfact-site .menu-toggle .ast-mobile-svg,
body.fibfact-site .ast-mobile-svg { fill: var(--ffs-ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
body.fibfact-site .site-footer,
body.fibfact-site .site-below-footer-wrap,
body.fibfact-site .site-primary-footer-wrap,
body.fibfact-site .site-above-footer-wrap,
body.fibfact-site .ast-small-footer,
body.fibfact-site .footer-adv {
  background: var(--ffs-line);
  color: var(--ffs-muted);
  border-top: 0;
}
body.fibfact-site .site-footer { border-top: 3px solid #000; }
body.fibfact-site .site-footer a { color: var(--ffs-text); text-decoration: none; }
body.fibfact-site .site-footer a:hover { color: var(--ffs-fib); }
body.fibfact-site .ast-footer-copyright { font-size: 14px; }

/* ==========================================================================
   Blocks used on the pages
   ========================================================================== */
body.fibfact-site .wp-block-button__link,
body.fibfact-site .wp-element-button,
body.fibfact-site .ast-button,
body.fibfact-site button.button,
body.fibfact-site input[type="submit"] {
  background: var(--ffs-ink);
  color: var(--ffs-line);
  border: 4px solid var(--ffs-line);
  border-radius: 999px;
  font-weight: 900;
  padding: 12px 26px;
  box-shadow: 0 5px 0 var(--ffs-line);
  text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
body.fibfact-site .wp-block-button__link:hover { color: var(--ffs-line); filter: brightness(1.05); }
body.fibfact-site .wp-block-button__link:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ffs-line); }
body.fibfact-site .is-style-fib .wp-block-button__link { background: linear-gradient(#ffe066, var(--ffs-fib)); }
body.fibfact-site .is-style-fact .wp-block-button__link { background: linear-gradient(var(--ffs-fact-2), var(--ffs-fact)); color: #fff; }

/* Cards: any group with the ffs-card class */
body.fibfact-site .ffs-card,
body.fibfact-site .wp-block-group.ffs-card {
  background: var(--ffs-panel);
  border: 4px solid var(--ffs-line);
  border-radius: var(--ffs-radius);
  padding: 22px 24px;
  margin-bottom: 18px;
}
/* Classic themes wrap group contents in .wp-block-group__inner-container; handle both. */
body.fibfact-site .ffs-card > :first-child,
body.fibfact-site .ffs-card > .wp-block-group__inner-container > :first-child { margin-top: 0; }
body.fibfact-site .ffs-card > :last-child,
body.fibfact-site .ffs-card > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
body.fibfact-site .ffs-card.ffs-fib  { border-top: 8px solid var(--ffs-fib); }
body.fibfact-site .ffs-card.ffs-fact { border-top: 8px solid var(--ffs-fact); }

body.fibfact-site .ffs-lead { font-size: 20px; color: var(--ffs-ink); }
body.fibfact-site .ffs-kicker {
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ffs-muted); margin-bottom: 4px;
}
body.fibfact-site .ffs-t-fib  { color: var(--ffs-fib); }
body.fibfact-site .ffs-t-fact { color: var(--ffs-fact-2); }
body.fibfact-site .ffs-note { color: var(--ffs-muted); font-size: 15px; }

/* Numbered steps */
body.fibfact-site ol.ffs-steps { list-style: none; counter-reset: ffstep; padding-left: 0; margin-left: 0; }
body.fibfact-site ol.ffs-steps > li { counter-increment: ffstep; position: relative; padding: 4px 0 14px 54px; min-height: 44px; }
body.fibfact-site ol.ffs-steps > li::before {
  content: counter(ffstep);
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ffs-ink); color: var(--ffs-line); font-weight: 900;
  border: 3px solid var(--ffs-line);
}

/* Contents list */
body.fibfact-site .ffs-toc ul { list-style: none; margin: 0; padding: 0; columns: 2 220px; column-gap: 24px; }
body.fibfact-site .ffs-toc li { break-inside: avoid; padding: 3px 0; }
body.fibfact-site .ffs-toc a { text-decoration: none; font-weight: 600; }

/* Tables */
body.fibfact-site .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5em; }
body.fibfact-site .entry-content code { word-break: break-word; }
body.fibfact-site .wp-block-table table,
body.fibfact-site .entry-content table { border-collapse: separate; border-spacing: 0; width: 100%; border: 3px solid var(--ffs-line); border-radius: 14px; overflow: hidden; background: var(--ffs-panel); }
body.fibfact-site .wp-block-table th,
body.fibfact-site .wp-block-table td,
body.fibfact-site .entry-content th,
body.fibfact-site .entry-content td { border: 0; border-bottom: 2px solid var(--ffs-line); padding: 10px 14px; color: var(--ffs-text); text-align: left; }
body.fibfact-site .entry-content tr:last-child td { border-bottom: 0; }
body.fibfact-site .entry-content th { background: var(--ffs-panel-2); color: var(--ffs-ink); }
body.fibfact-site kbd {
  font: 600 14px var(--ffs-font); color: var(--ffs-ink); background: var(--ffs-bg);
  border: 2px solid var(--ffs-muted); border-radius: 6px; padding: 1px 7px;
}

/* FAQ accordions (core Details block) */
body.fibfact-site .wp-block-details {
  background: var(--ffs-panel);
  border: 4px solid var(--ffs-line);
  border-radius: 14px;
  padding: 0;
  margin: 0 0 12px;
}
body.fibfact-site .wp-block-details summary {
  cursor: pointer; list-style: none;
  padding: 16px 52px 16px 20px; position: relative;
  font-weight: 600; color: var(--ffs-ink); font-size: 18px;
}
body.fibfact-site .wp-block-details summary::-webkit-details-marker { display: none; }
body.fibfact-site .wp-block-details summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--ffs-fib); color: var(--ffs-line);
  display: flex; align-items: center; justify-content: center; font-weight: 900; line-height: 1;
}
body.fibfact-site .wp-block-details[open] summary::after { content: "–"; background: var(--ffs-fact); color: #fff; }
body.fibfact-site .wp-block-details > :not(summary) { margin: 0 20px 16px; }

/* Separators, quotes */
body.fibfact-site hr, body.fibfact-site .wp-block-separator { border: 0; border-top: 3px solid var(--ffs-panel); opacity: 1; }
body.fibfact-site .wp-block-quote { border-left: 6px solid var(--ffs-fib); background: var(--ffs-panel); border-radius: 0 14px 14px 0; padding: 14px 20px; }

/* ==========================================================================
   Game template (home page)
   ========================================================================== */
body.ff-game-template .site-content > .ast-container {
  max-width: 1120px;
  display: block;
  padding: 0 16px;
}
body.ff-game-template #primary { width: 100%; margin: 0; padding: 24px 0 40px; }
body.ff-game-template .ff-game-page { background: transparent; padding: 0; margin: 0; }
body.ff-game-template .entry-content { margin: 0; }
body.ff-game-template .entry-content > .wp-block-shortcode,
body.ff-game-template .entry-content > .fibfact { margin-bottom: 48px; }
/* The game already has its own navy card; give it a subtle edge on the page */
body.ff-game-template .fibfact { box-shadow: 0 0 0 4px var(--ffs-line), 0 24px 60px rgba(0, 0, 0, .35); }

body.ff-game-template .ffs-home-section { max-width: 960px; margin: 0 auto 56px; }
body.ff-game-template .ffs-home-section h2 { text-align: center; margin-top: 0; }
body.fibfact-site .ffs-home-section .wp-block-buttons { justify-content: center; margin-top: 24px; }
body.fibfact-site .ffs-cards-3:not(:has(> .wp-block-group__inner-container)),
body.fibfact-site .ffs-cards-3 > .wp-block-group__inner-container {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px;
}
body.fibfact-site .ffs-cards-3 .ffs-card { margin: 0; }
@media (max-width: 781px) {
  body.fibfact-site .ffs-cards-3:not(:has(> .wp-block-group__inner-container)),
  body.fibfact-site .ffs-cards-3 > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}
body.fibfact-site .ffs-cards-3 h3 { margin-top: 0; font-size: 21px; }

/* Screen-reader text (Astra provides it, but keep a fallback) */
body.fibfact-site .screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal;
}

@media (max-width: 544px) {
  body.fibfact-site { font-size: 16px; }
  body.fibfact-site .entry-content h2 { font-size: 25px; }
  body.ff-game-template .site-content > .ast-container { padding: 0 8px; }
}