/*
Theme Name:   BP GeneratePress Child
Theme URI:    https://adspace.com/
Description:  A premium, performance-first WordPress theme engineered for blazing speed, pixel-perfect design and total flexibility. Built to the highest standards for a flawless front-end experience — best of the best.
Author:       Captain M
Author URI:   https://adspace.com/
Template:     generatepress
Version:      1.2.56
License:      GPL-2.0-or-later
Text Domain:  bp-gp-child
*/

/* ==========================================================================
   BP GeneratePress Child — Brand-driven overrides
   --------------------------------------------------------------------------
   Every value reads from a CSS variable supplied by the BP Brand Importer,
   with a hard-coded dark-casino fallback so the site still looks finished
   BEFORE a brand pack has been imported.
   Fallbacks:  bg #0f0f1a · surface #1c1c2e · accent #ffd600 · text #e8eaf6
               primary #1a237e · secondary #283593 · muted #9fa8da
   ========================================================================== */

:root {
  /* ── Palette fallbacks — overridden by BP Brand Importer ─── */
  --bp-color-bg-fallback:        #0f0f1a;
  --bp-color-surface-fallback:   #1c1c2e;
  --bp-color-accent-fallback:    #ffd600;
  --bp-color-text-fallback:      #e8eaf6;
  --bp-color-primary-fallback:   #1a237e;
  --bp-color-secondary-fallback: #283593;
  --bp-color-muted-fallback:     #9fa8da;

  /* ── Footer payment logo-tile tokens ─────────────────────────────────
     v1.2.51 — SMART PER-LOGO CONTRAST. Earlier versions rendered EVERY logo
     as a dark silhouette (filter:brightness(0)) on a light pill. That was
     legible for transparent-background wordmarks (Visa, Mastercard) but
     DESTROYED self-contained badges: Interac (a gold field with a black
     wordmark) collapsed into a featureless black square.

     The BP Brand Importer (>=1.4.19) now classifies each logo's ink once and
     tags its pill (--onlight / --ondark), so each logo keeps its ORIGINAL
     colours on the chip that gives it contrast:
       • dark / mid / colour ink  → light chip  (Visa blue, Interac gold+black)
       • near-white ink           → dark chip   (Swish, Zimpler white wordmarks)
     Full per-logo rules live in section 5 below. These tokens size/shape the
     chip; --bp-pay-card-bg-dark is the dark-chip surface for white logos.
     The legacy --bp-pay-logo-filter still applies to a pre-1.4.19 importer's
     un-tagged pills so nothing regresses mid-upgrade.                    ── */
  --bp-pay-card-bg:     var(--bp-pay-card-bg-fallback,
                          linear-gradient(180deg, #ffffff 0%, #eef1f5 100%));
  --bp-pay-card-bg-dark: linear-gradient(180deg, #20242c 0%, #14181f 100%);
  --bp-pay-card-border: 1px solid rgba(0, 0, 0, .10);
  --bp-pay-card-radius: var(--bp-border-radius, var(--bp-radius, 12px));
  --bp-pay-card-shadow: 0 1px 3px rgba(0, 0, 0, .35),
                        inset 0 1px 0 rgba(255, 255, 255, .85);
  --bp-pay-logo-h:      24px;
  /* LEGACY only: applies to a pre-1.4.19 importer's un-tagged pills (dark
     silhouette on the light chip). Smart pills override this to `none`. */
  --bp-pay-logo-filter: brightness(0);
}

/* ---- Base ---------------------------------------------------------------- */
body {
  background-color: var(--bp-color-bg, var(--bp-color-bg-fallback));
  color:            var(--bp-color-text, var(--bp-color-text-fallback));
  font-family:      var(--bp-font-body, inherit);
  /* Opt-in texture: set --bp-page-texture on body to add a CSS texture.
     Default none so the Brand Importer's own background is never covered. */
  background-image: var(--bp-page-texture, none);
  /* Prevent elements wider than the viewport from causing a horizontal scrollbar. */
  overflow-x:       hidden;
}

/* ---- Headings ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--bp-font-heading, inherit);
  color:       var(--bp-color-text, var(--bp-color-text-fallback));
}

/* ---- Links --------------------------------------------------------------- */
a {
  color: var(--bp-color-accent, var(--bp-color-accent-fallback));
}
a:hover,
a:focus {
  color: var(--bp-color-secondary, var(--bp-color-secondary-fallback));
}

/* ---- Header / Navigation ------------------------------------------------- */
.site-header,
.main-navigation,
.menu-toggle,
.main-navigation .main-nav ul {
  background-color: var(--bp-color-nav-bg, var(--bp-color-surface, var(--bp-color-surface-fallback)));
}
.main-navigation .main-nav ul li a,
.site-header .site-title a,
.site-header .site-description {
  color: var(--bp-color-text, var(--bp-color-text-fallback));
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--bp-color-accent, var(--bp-color-accent-fallback));
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer,
.site-info,
.footer-widgets {
  background-color: var(--bp-color-footer-bg, var(--bp-color-surface, var(--bp-color-surface-fallback)));
  color:            var(--bp-color-text-muted, var(--bp-color-muted-fallback));
}
.site-info a,
.footer-widgets a {
  color: var(--bp-color-accent, var(--bp-color-accent-fallback));
}

/* ---- Containers — full brand width -------------------------------------- */
.inside-container,
.grid-container,
.inside-article,
.site-content .content-area {
  max-width: var(--bp-container-width, 1140px);
}

/* Full-width content when no sidebar (enforced by inc/layout-defaults.php) */
.content-area {
  width: 100%;
}

/* ---- Buttons ------------------------------------------------------------- */
/* Only target explicit CTA classes, never bare <button> elements.
   Bare <button> would catch semantic buttons like .bp-faq__question,
   .menu-toggle, accordion toggles, etc. giving them the accent background.
   wp-block-button__link + gb-button cover all Gutenberg / GenerateBlocks CTAs.
   The brand importer overrides these with !important when a brand pack is set. */
input[type="button"],
input[type="submit"],
.button,
.wp-block-button__link,
.gb-button {
  background-color: var(--bp-color-accent, var(--bp-color-accent-fallback));
  color:            var(--bp-color-bg, var(--bp-color-bg-fallback));
  font-family:      var(--bp-font-button, var(--bp-font-body, inherit));
  border:           none;
  border-radius:    var(--bp-border-radius, var(--bp-radius, 8px));
  font-weight:      700;
  transition:       opacity .2s ease, transform .15s ease;
}
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
.gb-button:hover {
  opacity:   .88;
  transform: translateY(-1px);
  color:     var(--bp-color-bg, var(--bp-color-bg-fallback));
}

/* ---- Surfaces / cards ---------------------------------------------------- */
.entry-content table,
.wp-block-table table {
  border-color: rgba(255,255,255,.12);
}

/* ---- Selection ----------------------------------------------------------- */
::selection {
  background: var(--bp-color-accent, var(--bp-color-accent-fallback));
  color:      var(--bp-color-bg, var(--bp-color-bg-fallback));
}

/* ==========================================================================
   BP LANDING LOOK  (applied site-wide, no detection needed)
   --------------------------------------------------------------------------
   Every page on a BP brand-protection site is a landing page, so instead of
   trying to auto-detect BP patterns (which was unreliable) we apply the whole
   landing treatment across the front end:
     1) Paint the fancy, textured brand background edge-to-edge.
     2) Strip the theme's white content wrappers so nothing "blocks" the
        texture (no more flat dark/white rectangles over the background).
     3) Hide the post/article chrome (date, author, category, tags, comments).
   The .bp-landing class (added by inc/bp-landing.php) is kept as an extra hook
   but is no longer required for any of this to work.
   ========================================================================== */

/* ---- 1. Brand background — let the IMPORTED brand background win -----------
   IMPORTANT: this theme no longer paints its own texture/gradient over the
   page. A previous version layered a CSS texture on `body` AND the patterns
   plugin layered one on every section, so once a brand was imported you saw
   TWO textures stacked on top of the brand's own background ("overlapping
   texture"). We now only set the background COLOUR from the brand variable
   (falling back to the dark casino colour before an import), with no texture
   and no !important, so any background the Brand Importer sets always shows
   through cleanly. Want a texture back? Set --bp-page-texture on body.
   body background-color, background-image and overflow-x are set in the
   base "body" rule at the top of this file. */

/* ---- 2. Make every theme content wrapper transparent (kill white + flat
          dark boxes that block the texture) -------------------------------- */
.site-content,
#content,
#primary,
#main,
main,
.content-area,
.container,
.grid-container,
.container.grid-container,
.inside-container,
article,
.inside-article,
.entry-content,
.page-content,
.wp-site-blocks,
.one-container .site-content,
.separate-containers .inside-article,
.separate-containers .content-area,
.separate-containers .paging-navigation,
.hentry {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ---- 2b. Optimised, centred content column ------------------------------
   The content area is one CENTRED column (contentSize from theme.json). This
   is what fixes the "patterns not centred / pushed to the left" problem and
   makes normal content you add read as a tidy centred column too. Full-width
   sections (the BP patterns use align:full) break OUT of this column to span
   the whole viewport, so hero/bonus/games still run edge-to-edge. */
.site-content .inside-article,
.site-content .entry-content,
.entry-content {
  margin: 0 auto !important;
  padding: 0 !important;
}
.content-area,
.content-area .grid-container,
.container.grid-container,
.inside-container {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
/* Normal (non-full) blocks sit in a centred, comfortable column */
.entry-content > *:not(.alignfull):not(.alignwide) {
  max-width: var(--bp-container-width, 1140px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}
.entry-content > .alignwide {
  max-width: 1280px;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Full-width sections span the whole viewport, centred, no side gaps */
.entry-content > .alignfull {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* Close the gap GeneratePress leaves between the header and the first section */
.site-content,
#content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ---- 3. Hide the post/article chrome the theme adds ----------------------
   Brand sites never show post date/author/category/tags/comments. GeneratePress
   prints all of these inside `.entry-meta` (in both the header and footer), so
   we hide the whole meta block plus the individual links, everywhere on the
   front end (single, page AND the blog/home index). */
.entry-meta,
.posted-on,
.byline,
.author,
.cat-links,
.tags-links,
.comments-link,
.entry-footer,
.post-navigation,
.nav-links,
.comments-area,
#comments,
.comment-respond,
.comments-title,
.comment-form {
  display: none !important;
}

/* Also hide the duplicate post/page title on explicitly tagged landing pages */
body.bp-landing .entry-header .entry-title,
body.bp-landing .page-header,
body.bp-landing .entry-header {
  display: none !important;
}

/* ---- 4. Clean, on-brand buttons (no theme italic/uppercase). No !important
          so per-block colour/typography edits still win. ------------------- */
.wp-block-button .wp-block-button__link {
  text-transform: none;
  font-style: normal;
  letter-spacing: normal;
}


/* ---- 5. Footer payment logos → SMART per-logo contrast chips ---------------
   The BP importer renders the footer as `.bp-footer` with rows:
     .bp-footer__row--payment    → card / wallet logos (Visa, Mastercard …)
     .bp-footer__row--regulatory → language / help / 18+ icons
     .bp-footer__row--other      → Bizum, Juego Seguro/Autorizado, licence seals

   v1.2.51 — SMART CONTRAST. The importer (>=1.4.19) now analyses each payment
   logo's ink ONCE and tags its pill:
     .bp-footer__pill--onlight → logo has dark/mid/colour ink → LIGHT chip.
     .bp-footer__pill--ondark  → logo ink is near-white → DARK chip (so it
                                  does not vanish, e.g. Swish / Zimpler wordmarks).
     .bp-footer__pill--raw     → no chip at all (site set pay-mode = raw).
   In every smart case the logo keeps its ORIGINAL colours (filter:none), so a
   self-contained badge such as Interac (gold field + black wordmark) shows
   exactly as on the source site instead of being crushed to a black square by
   the old blanket `brightness(0)` silhouette. Shape (radius) still follows the
   imported --bp-border-radius so it adapts to every brand.

   LEGACY FALLBACK: a pre-1.4.19 importer emits bare `.bp-footer__pill` with no
   modifier — those keep the old dark-silhouette-on-light behaviour so nothing
   regresses until the whole suite is updated together.
   Payment token variables are defined in the :root block at the top of this file. */

/* Shared chip shell (all payment pills). */
.bp-footer__row--payment .bp-footer__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bp-pay-card-bg);
  border: var(--bp-pay-card-border);
  border-radius: var(--bp-pay-card-radius);
  padding: .5rem 1.1rem;
  min-height: calc(var(--bp-pay-logo-h) + 1.4rem);
  min-width: 76px;
  box-shadow: var(--bp-pay-card-shadow);
  box-sizing: border-box;
}
.bp-footer__row--payment .bp-footer__pill img {
  height: var(--bp-pay-logo-h);
  max-width: 100px;
  width: auto;
  object-fit: contain;
  opacity: 1;
  display: block;
  color: #101523; /* fallback for inline SVGs using fill="currentColor" */
}

/* LEGACY (old importer, bare pill, no modifier): keep the silhouette so a
   white wordmark can never disappear before the importer half of the suite is
   updated. Smart pills below override this back to full colour. */
.bp-footer__row--payment .bp-footer__pill img {
  filter: var(--bp-pay-logo-filter, brightness(0));
}

/* SMART pills keep ORIGINAL colours (scoped to beat the legacy rule's
   specificity, and placed later in the cascade). */
.bp-footer__row--payment .bp-footer__pill--onlight img,
.bp-footer__row--payment .bp-footer__pill--ondark img,
.bp-footer__row--payment .bp-footer__pill--raw img {
  filter: none;
}

/* Dark chip for near-white logos so they stay visible with their real colours. */
.bp-footer__row--payment .bp-footer__pill--ondark {
  background: var(--bp-pay-card-bg-dark,
                linear-gradient(180deg, #20242c 0%, #14181f 100%));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45),
              inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Raw mode: no chip — logos exactly as the source ships them. */
.bp-footer__row--payment .bp-footer__pill--raw,
.bp-footer__row--pay-raw .bp-footer__pill {
  background: none;
  border: 0;
  box-shadow: none;
  padding: .25rem .4rem;
  min-height: 0;
  min-width: 0;
}
.bp-footer__row--pay-raw .bp-footer__pill img {
  filter: none;
}

/* INK MODE (logo color / silhouette) — independent of chip style.
   Site-wide switcher (v1.4.23+) gives two independent controls: chip style
   (auto/light/dark/raw) and logo ink (native/white/black).

   IMPORTANT — specificity (fixed v1.2.54): these rules MUST beat the SMART pill
   rules above (`.bp-footer__row--payment .bp-footer__pill--onlight img{filter:none}`,
   3 classes). A 2-class `.bp-footer__row--ink-white .bp-footer__pill img` selector
   LOSES that cascade, so "White silhouette" appeared to do nothing. We therefore
   qualify each ink rule with `.bp-footer__row--payment` (compound, 3 classes) AND
   add `!important`, so the forced ink mode always wins on the front end. (Dark-footer
   brands additionally need the ink-aware `!important` rules in inc/nav-contrast.php,
   which are even higher specificity — this file alone can't override those.) */

/* Native ink: keep brand colors (Visa blue, Mastercard red/orange, Interac gold).
   Matches the smart-pill default (filter:none) but forced so ink-native always
   beats any legacy/bare-pill brightness(0) silhouette. */
.bp-footer__row--payment.bp-footer__row--ink-native .bp-footer__pill img {
  filter: none !important;
}

/* White silhouette: for dark footers or monochrome aesthetic. Crush to black then
   invert to white. Works on any chip (auto/light/dark/raw). */
.bp-footer__row--payment.bp-footer__row--ink-white .bp-footer__pill img {
  filter: brightness(0) invert(1) !important;
}

/* Black silhouette: for light footers or forced monochrome. */
.bp-footer__row--payment.bp-footer__row--ink-black .bp-footer__pill img {
  filter: brightness(0) !important;
}


/* ---- Header nav buttons (Login / Register) ----------------------------------
   Styled from BP Brand Importer CSS variables — automatically matches every
   brand. Text + links are set in Appearance → Customize → BP Header Buttons.
   Button 1 (secondary): ghost/outline pill — draws attention without screaming.
   Button 2 (primary):   solid primary colour — the main conversion CTA.
   Hook: generate_header @priority 20 → appended inside .inside-header after GP's branding+nav.
   Desktop: logo | [nav items (GP auto-margin pushes nav right)] | [Log In][Sign Up]
   Mobile:  logo | [Log In][Sign Up] | [☰]  (CSS flex-order re-slots buttons)
   -------------------------------------------------------------------------- */
.bp-nav-buttons {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  margin-left: .75rem;   /* desktop: small gap after the last nav item */
  flex-shrink: 0;
}

/* Shared shape — follows the imported border-radius and text style.
   !important on display / height / font-size / padding prevents GP Free's
   .main-navigation ul li a rules (which target all header links) from
   overriding the button appearance. */
.bp-nav-btn {
  display:        inline-flex !important;
  align-items:    center !important;
  justify-content: center !important;
  height:         var(--bp-nav-btn-h, 40px) !important;
  padding:        0 var(--bp-nav-btn-px, 1.1rem) !important;
  font-size:      var(--bp-nav-btn-fs, .85rem) !important;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space:    nowrap;
  text-decoration: none;
  border-radius:  var(--bp-border-radius, var(--bp-radius, 6px));
  transition:     filter .15s ease, transform .1s ease, background-color .15s ease;
  line-height:    1;
}
.bp-nav-btn:hover {
  filter:    brightness(1.18);
  transform: translateY(-1px);
}
.bp-nav-btn:active {
  transform: none;
  filter:    brightness(.95);
}
.bp-nav-btn:focus-visible {
  outline:        3px solid var(--bp-color-accent, #ffd600);
  outline-offset: 2px;
}

/* Secondary / Login — outlined ghost */
.bp-nav-btn--secondary {
  background:  rgba(255, 255, 255, .10) !important;
  color:       var(--bp-color-text, #ffffff) !important;
  border:      1px solid rgba(255, 255, 255, .40) !important;
}
.bp-nav-btn--secondary:hover {
  background: rgba(255, 255, 255, .20) !important;
  color:      var(--bp-color-text, #ffffff) !important;
}

/* Primary / Register — solid brand colour.
   !important prevents GP Free's nav link rules from overriding background.
   Fallback #1565c0 (visible medium blue) used before a brand pack is imported. */
.bp-nav-btn--primary {
  background: var(--bp-color-primary, #1565c0) !important;
  color:      var(--bp-color-on-primary, var(--bp-color-text, #ffffff)) !important;
  border:     1px solid transparent !important;
  position:   relative;  /* required for ::after shine sweep */
  overflow:   hidden;
  /* contain:paint is the reliable GPU-compositor-level clip for the shine
     pseudo-element. overflow:hidden alone can fail when the child uses
     CSS transforms (animated skew/translate), because some browsers
     rasterise the animated layer before applying the overflow clip. */
  contain:    paint;
}
.bp-nav-btn--primary:hover {
  color: var(--bp-color-on-primary, var(--bp-color-text, #ffffff)) !important;
  background: var(--bp-color-primary, #1565c0) !important;
  filter: brightness(1.18);
}

/* Mobile (≤768px): re-order so the row reads:
   logo | [Log In][Sign Up] | ☰
   GP uses .site-logo (not .site-branding) and splits the navigation into two:
     .mobile-menu-control-wrapper  — the hamburger toggle (stays on row 1)
     #site-navigation              — the full menu drawer (row 2, opens on tap)
   GP's own rule ".has-inline-mobile-toggle .inside-header > .main-navigation
   { flex-basis: 100% }" has higher specificity (3 classes + element) than a
   class-only selector, so we need !important on flex to override it for the
   hamburger wrapper. */
@media (max-width: 768px) {
  /* Safety: never let a wide logo/button cluster push a horizontal scrollbar.
     (Clip only the x-axis so the row-2 menu drawer can still expand vertically.)
     This is the single home for this rule — it used to be duplicated inside the
     SVG logo helper, which also wrongly forced flex-wrap:nowrap and fought GP's
     own inline-toggle wrap; that duplicate was removed in v1.2.40. */
  .has-inline-mobile-toggle .inside-header                               { overflow-x: clip; }
  /* Row 1 */
  .has-inline-mobile-toggle .inside-header .site-logo                    { order: 1 !important; flex: 0 0 auto !important; }
  .has-inline-mobile-toggle .inside-header .bp-nav-buttons               { order: 2 !important; margin-left: auto; flex: 0 0 auto !important; }
  .has-inline-mobile-toggle .inside-header .mobile-menu-control-wrapper  { order: 3 !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin-left: 0 !important; }
  /* Row 2 — full-width menu drawer */
  .has-inline-mobile-toggle #site-navigation                             { order: 100 !important; flex: 1 1 100% !important; width: 100% !important; }
  /* Hide any duplicate hamburger rendered inside #site-navigation */
  .has-inline-mobile-toggle #site-navigation .menu-toggle                { display: none !important; }
}

/* Mobile: trim the buttons so they fit alongside the logo + hamburger.
   768px matches the GP inline-toggle breakpoint (where the main nav collapses
   and the row becomes: logo | [buttons] | [☰]).
   Values use CSS variables so brand packs can tune them without overriding
   this entire block. */
@media (max-width: 768px) {
  .bp-nav-btn {
    height:    var(--bp-nav-btn-h-mobile, 36px) !important;
    padding:   0 var(--bp-nav-btn-px-mobile, .8rem) !important;
    font-size: var(--bp-nav-btn-fs-mobile, .78rem) !important;
  }
}
/* Both buttons shown at all sizes — both fit comfortably alongside the logo */

/* ---- Mobile facts-table containment (v1.2.31) ------------------------------
   The migrator emits the quick-facts table as a native wp:table with the frozen
   `.bp-facts-table` class inside a constrained `.bp-facts-section` group. On
   mobile the reported problem was the table "moving to the right" / sitting as a
   narrow, edge-touching box that didn't line up with the rest of the page:
     • the constrained layout squeezed the table into a narrow content column
       instead of filling the section, and
     • the frozen `th{white-space:nowrap}` forces wide headers, so any table with
       longer labels/extra columns overflows horizontally and shifts.
   We cannot touch the frozen pattern CSS, so we override from the child theme
   (higher specificity + a mobile media query, which loads after the pattern CSS):
   let the table fill the section, give the section a small side gutter so it
   aligns with the other blocks, allow header labels to wrap, and tighten cell
   padding so the columns fit without a jarring horizontal scroll. `overflow-x`
   stays available on the frozen figure as a last resort for genuinely wide data. */
@media (max-width: 768px) {
  .bp-facts-section {
    max-width: 100% !important;
    padding-inline: 16px !important;
    box-sizing: border-box;
  }
  .bp-facts-section > .wp-block-table.bp-facts-table,
  .wp-block-table.bp-facts-table {
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }
  .wp-block-table.bp-facts-table table {
    width: 100% !important;
    table-layout: fixed;   /* distribute columns evenly so nothing spills right */
  }
  .bp-facts-table th {
    white-space: normal !important;  /* frozen CSS forces nowrap — allow wrapping */
  }
  .bp-facts-table th,
  .bp-facts-table td {
    padding: 12px 14px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ---- Shine sweep — header primary (Sign Up) button ----------------------
   A white-gloss diagonal sweeps across the button every ~3 s.
   The pseudo-element is 200 % wide and oversized vertically so a slight
   skew never clips at the edges. Keyframes: sweep across in the first 40 %
   of the cycle (≈ 1.2 s), then pause off-screen right for the rest.
   Disabled for users who prefer reduced motion.
   -------------------------------------------------------------------------- */
@keyframes bp-shine {
  0%        { transform: translateX(-200%) skewX(-15deg); }
  40%, 100% { transform: translateX(200%)  skewX(-15deg); }
}
.bp-nav-btn--primary::after {
  content:    '';
  position:   absolute;
  top:        -50%;
  left:       -50%;
  width:      200%;
  height:     200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:  bp-shine 3s linear infinite;
  pointer-events: none;
  /* No clip-path here — containment is handled by contain:paint on the
     parent (.bp-nav-btn--primary), which clips at compositor level. */
}
@media (prefers-reduced-motion: reduce) {
  .bp-nav-btn--primary::after { animation: none; }
}



/* ══════════════════════════════════════════════════════════════════════════════
   STICKY HEADER — desktop + mobile
   GP Free does not offer a sticky-header Customizer toggle; we add it via CSS.
   z-index 1000 ensures the header sits above GeneratePress's off-canvas panel
   (z-index 999) and our sticky CTA bar (z-index 9999 is intentionally higher —
   the CTA floats above the header, as expected).
   backdrop-filter gives a frosted-glass feel when the page scrolls underneath.
══════════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ══════════════════════════════════════════════════════════════════════════════
   INSIDE-HEADER — explicit flex so order: n works on all GP versions
   GP already sets display:flex in most layouts; this guard ensures it even
   when a child theme or page-builder resets the element.
══════════════════════════════════════════════════════════════════════════════ */
.inside-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BURGER / MOBILE MENU TOGGLE — contrast colours
   GP's .menu-toggle uses an SVG hamburger icon rendered via currentColor.
   Without an explicit colour it inherits the nav background, making it
   invisible. Force it to the brand text colour so it's always visible.
══════════════════════════════════════════════════════════════════════════════ */
.menu-toggle {
  color: var(--bp-color-text, #e8eaf6) !important;
  /* Small explicit padding so the tap-target meets the 44px minimum */
  min-width:  44px;
  min-height: 44px;
  display:    flex;
  align-items: center;
  justify-content: center;
}

/* GP v3 uses inline SVG — target the path/rect/line elements */
.menu-toggle svg,
.menu-toggle svg path,
.menu-toggle svg rect,
.menu-toggle svg line,
.menu-toggle svg circle {
  fill:   var(--bp-color-text, #e8eaf6) !important;
  stroke: var(--bp-color-text, #e8eaf6) !important;
  color:  var(--bp-color-text, #e8eaf6) !important;
}

/* GP v2 / classic icon-bar bars */
.menu-toggle .icon-bar {
  background-color: var(--bp-color-text, #e8eaf6) !important;
}

/* GP "open" state label (screen-reader text already has .sr-only; keep visible text consistent) */
.menu-toggle .mobile-menu {
  color: var(--bp-color-text, #e8eaf6) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NAV BUTTON SHAPE — inherit per-site button design
   --generate-button-border-radius is set by GP Customizer (Colors → Buttons).
   --wp--custom--button--border-radius is the WP theme.json equivalent.
   For sites using clip-path button shapes, set --bp-button-clip-path in the
   Brand Importer settings; the BP Affiliate Tracker extractor can populate it.
══════════════════════════════════════════════════════════════════════════════ */
.bp-nav-btn {
  border-radius: var(--generate-button-border-radius,
    var(--wp--custom--button--border-radius,
    var(--bp-border-radius, 4px))) !important;
  clip-path: var(--bp-button-clip-path, none) !important;
}



/* ══════════════════════════════════════════════════════════════════════════════
   SMART DESKTOP BURGER  (v1.2.30)
   The client wanted the primary menu collapsed behind a SINGLE clean hamburger
   on desktop instead of every item spread flat across the bar. The button is
   injected by bp-header-nav.js into .inside-header; both native GeneratePress
   toggles stay hidden on desktop so the old "two empty burgers" bug (from the
   removed adaptive-overflow script) cannot recur. Clicking the burger adds
   body.bp-desktop-menu-open, which reveals the EXISTING #site-navigation as an
   absolutely-positioned dropdown (no markup is duplicated — the same WordPress
   menu drives both desktop and mobile). On ≤768 px the burger is hidden and
   GeneratePress's native mobile menu takes over unchanged.
══════════════════════════════════════════════════════════════════════════════ */

/* The custom burger is desktop-only; hidden by default (and on mobile). */
.bp-desktop-burger {
  display: none;
}

/* ── Anti-flash gate — measure while hidden, reveal once (v1.2.38) ───────────
   The header has two moving parts that both finish AFTER the initial HTML:
     1. The burger + account buttons are rendered inside .inside-navigation (the
        only GeneratePress hook that reliably fires) and moved to .inside-header
        by a synchronous inline script (before first paint).
     2. bp-header-nav.js measures the bar and decides which primary-menu items
        fit inline vs. overflow behind the burger (priority nav) — this runs
        AFTER first paint.
   Painting the menu first and reshuffling it in step 2 is what produced the
   reported left→right "jumping" on desktop, and the raw-<ul> flash on mobile.

   IMPORTANT: the actual gate now lives in INLINE critical CSS printed in <head>
   by inc/header-buttons.php (bp_gp_child_header_critical_css), NOT here. Earlier
   the gate lived in this external stylesheet, but in WP Playground this file can
   apply a beat AFTER the HTML paints — so the un-gated header flashed (raw menu
   list + unstyled toggle) before the gate took effect. Inlining the gate in
   <head> makes it part of the document itself, so it is guaranteed to apply on
   the very first frame regardless of when this stylesheet loads. The gate hides
   the nav apparatus while <html> lacks .bp-header-ready and reveals it once
   bp-header-nav.js has measured + placed everything. See that PHP file. */

@media (min-width: 769px) {
  /* Keep BOTH GeneratePress toggles hidden — our custom burger replaces them. */
  .mobile-menu-control-wrapper,
  .main-navigation .menu-toggle,
  .site-header .menu-toggle {
    display: none !important;
  }

  /* Anchor for the absolutely-positioned dropdown. */
  .inside-header {
    position: relative;
  }

  /* Custom burger — now the OVERFLOW toggle (v1.2.35). It is hidden by default
     (see the global `.bp-desktop-burger{display:none}` rule) and revealed by
     bp-header-nav.js ONLY when the inline menu has more items than fit between
     the logo and the account buttons. When everything fits, no burger shows and
     the bar reads as a normal inline nav. Colour follows the brand text colour.
         logo  Home  Games  Bonuses  …  [☰] [Log In] [Sign Up]  */
  .bp-desktop-burger {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 0.4rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--bp-border-radius, 6px);
    cursor: pointer;
    color: var(--bp-color-text, #e8eaf6);
    flex: 0 0 auto;
    order: 3; /* sits just before the Login/Sign-Up buttons */
  }
  .bp-desktop-burger:hover,
  .bp-desktop-burger:focus-visible {
    background: rgba(127, 127, 127, 0.14);
    outline: none;
  }
  .bp-desktop-burger svg { display: block; }

  /* Logo pinned left. No auto-margin here — the inline menu below carries
     margin-right:auto, which is the single reliable right-push anchor for the
     burger + account-buttons group (works across every GP markup variant). */
  .inside-header > .site-branding,
  .inside-header > .site-logo {
    order: 1;
    margin-right: 1.25rem;
  }
  .inside-header .bp-nav-buttons {
    order: 4;
    margin-left: 0.4rem;
  }

  /* ── Inline primary menu (v1.2.35) ──────────────────────────────────────
     The menu now renders INLINE in the bar (logo → menu items → burger →
     buttons) instead of being fully collapsed behind the burger. margin-right:
     auto eats the free space to the menu's right, pinning the burger + buttons
     to the far edge:
         logo  Home  Games  Bonuses  …  [☰] [Log In] [Sign Up]
     bp-header-nav.js measures the bar after paint and, ONLY when the items do
     not all fit, moves the trailing (overflow) items into the .bp-more-panel
     dropdown and reveals the burger. Until the script runs (or if JS is off)
     the list simply wraps, so every link stays reachable. */
  #site-navigation.main-navigation {
    display: flex !important;
    align-items: center;
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto;
    background: transparent !important;
  }
  #site-navigation .inside-navigation {
    display: flex;
    align-items: center;
    padding: 0;
    width: auto;
  }
  #site-navigation .main-nav {
    display: flex;
    width: auto;
  }
  #site-navigation .main-nav > ul {
    display: flex;
    flex-wrap: wrap;      /* no-JS / pre-measure: wrap so nothing is ever lost */
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Once the script has measured the bar it switches to a single clipped row;
     any items that don't fit are relocated into .bp-more-panel by the JS. */
  .inside-header.bp-nav-measured #site-navigation.main-navigation { overflow: hidden; }
  .inside-header.bp-nav-measured #site-navigation .main-nav > ul { flex-wrap: nowrap; }
  #site-navigation .main-nav > ul li {
    float: none;
    display: block;
    white-space: nowrap;
    margin: 0;
  }
  #site-navigation .main-nav > ul li a {
    display: block;
    padding: 0.5rem 0.7rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--bp-color-text, #e8eaf6);
  }
  #site-navigation .main-nav > ul li a:hover,
  #site-navigation .main-nav > ul li.current-menu-item > a {
    color: var(--bp-color-primary, #cc0000);
  }

  /* ── Overflow "more" dropdown (built by bp-header-nav.js) ─────────────────
     Holds ONLY the items that did not fit inline. Opens under the burger when
     body.bp-desktop-menu-open is set. */
  .bp-more-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 12px;
    left: auto;
    margin-top: 6px;
    min-width: 220px;
    max-width: 320px;
    background: var(--bp-color-nav-bg, var(--bp-color-surface, var(--bp-color-surface-fallback, #16181d))) !important;
    border: 1px solid rgba(127, 127, 127, 0.22);
    border-radius: var(--bp-border-radius, 8px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
    z-index: 1200;
    padding: 8px;
  }
  body.bp-desktop-menu-open .bp-more-panel { display: block; }
  .bp-more-panel ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .bp-more-panel li {
    display: block;
    width: 100%;
    float: none;
    white-space: normal;
  }
  .bp-more-panel li a {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: 6px;
    line-height: 1.3;
    color: var(--bp-color-text, #e8eaf6);
  }
  .bp-more-panel li a:hover,
  .bp-more-panel li.current-menu-item > a {
    background: rgba(127, 127, 127, 0.16);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   STICKY CTA — centre the button when the bar has no headline text  (v1.2.30)
   The frozen bp-patterns.css styles .bp-sticky-cta as a flex row with
   justify-content:space-between. That is correct WHEN a headline is present
   (the text has flex:1 and pushes the button + ✕ to the right). But a bar with
   NO headline has only two children (the button wrapper and the ✕), so
   space-between pinned the lone button to the FAR LEFT — the reported bug.
   The migrator now tags such bars with .bp-sticky-cta--center; here we centre
   the button block and pin the ✕ to the top-right so it reads as a deliberate
   centred CTA. .bp-sticky-cta is position:fixed, so the absolutely-positioned
   ✕ anchors to the bar itself.
══════════════════════════════════════════════════════════════════════════════ */
.bp-sticky-cta--center {
  display: flex !important;          /* self-sufficient — do not rely on cascade */
  align-items: center !important;
  justify-content: center !important;
  position: fixed;                   /* re-assert the frozen positioning context for the ✕ */
}
.bp-sticky-cta--center .wp-block-buttons {
  display: flex !important;
  justify-content: center !important;
  flex: 0 0 auto !important;         /* stop the button block filling the whole bar */
  width: auto !important;
  margin: 0 !important;
}
.bp-sticky-cta--center .bp-sticky-cta__close {
  position: absolute;
  right: 16px;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  height: fit-content;
}

/* ──────────────────────────────────────────────────────────────────────────
   NAVIGATION / HEADER SEARCH — hidden on all BP sites.
   GP Premium places the search toggle in .inside-header (outside the <nav>),
   so we must target .site-header rather than just .main-navigation.
   Three layers of defence:
     1. PHP filters  generate_navigation_search → false  (layout-defaults.php)
     2. Broad CSS on .site-header  (this block)
     3. Attribute wildcard [class*="search"]  (belt-and-suspenders)
──────────────────────────────────────────────────────────────────────────── */

/* Layer 2 — global known class names (no ancestor scope needed) */
.search-item, .search-toggle, .search-modal, .search-input,
.navigation-search, .nav-search, .nav-search-icon,
.gen-search-icon, .generate-search-icon, .generate-search-modal,
.widget_search, .widget-search,
.wp-block-search, .wp-block-search__button, .wp-block-search__inside-wrapper,
.header-search, .header-search-wrap, .search-widget,
/* Layer 2b — scoped belt-and-suspenders (in case global is later overridden) */
.site-header .gp-search,
.inside-header [class*="search"],
.inside-navigation [class*="search"],
.main-navigation [class*="search"],
/* Layer 3 — GLOBAL wildcard: any element with "search" in class, not a BP element */
[class*="search"]:not([class*="bp-"]),
/* Layer 4 — form elements */
form[role="search"],
input[type="search"] {
        display: none !important;
        visibility: hidden !important;
}
/* Safety guard — BP elements are never affected by the search-hide rules above.
   NOTE: no revert on height/width — revert collapses <a> elements to auto height. */
.bp-nav-buttons,
.bp-nav-btn,
.bp-nav-btn--primary,
.bp-nav-btn--secondary {
        display:    inline-flex !important;
        visibility: visible !important;
}
.bp-nav-buttons {
        display: flex !important;
}
.bp-sticky-cta,
.bp-sticky-cta__text,
.bp-sticky-cta__close {
        display:    revert !important;  /* these are div/span, revert is safe */
        visibility: visible !important;
}

/* ── Stylesheet-applied probe (v1.2.38) ──────────────────────────────────────
   bp-header-nav.js waits for this custom property to read "1" before it reveals
   the header (removes the anti-flash gate by adding .bp-header-ready to <html>).
   The property only exists once THIS external stylesheet is actually applied, so
   the gate can never be lifted while the header is still unstyled — which is the
   exact flash reported in WP Playground, where the HTML can paint a beat before
   the external CSS loads. In normal WordPress this stylesheet is render-blocking
   in <head>, so the probe already reads "1" when the footer script runs and the
   reveal is instant. */
body { --bp-css-ready: 1; }