/* Blocksy bridge.
 *
 * Blocksy is entirely CSS-variable driven, so the way to make it look like
 * Fantom is to repoint its variables at Fantom tokens - not to out-specify its
 * selectors one at a time. Everything Blocksy renders (buttons, links, forms,
 * cart badge, borders) then inherits the design system for free.
 *
 * Loaded AFTER tokens.css and BEFORE base.css.
 *
 * Selector is `html:root`, not `:root`. Blocksy prints its own `:root` block
 * from an inline <style> that lands AFTER every enqueued stylesheet, so at
 * equal specificity it always won and its blue (#2872fa) survived into
 * buttons and links. `html:root` outranks it wherever it sits in the document.
 */

html:root {
  /* Palette */
  --theme-palette-color-1: var(--ftm-ink);
  --theme-palette-color-2: var(--ftm-ink-muted);
  --theme-palette-color-3: var(--ftm-accent);
  --theme-palette-color-4: var(--ftm-ink);
  --theme-palette-color-5: var(--ftm-border);
  --theme-palette-color-6: var(--ftm-surface-alt);
  --theme-palette-color-7: var(--ftm-bg);
  --theme-palette-color-8: var(--ftm-bg);

  /* Text + headings */
  --theme-text-color:      var(--ftm-ink);
  --theme-headings-color:  var(--ftm-ink);
  --theme-heading-color:   var(--ftm-ink);
  --theme-heading-1-color: var(--ftm-ink);
  --theme-heading-2-color: var(--ftm-ink);
  --theme-heading-3-color: var(--ftm-ink);
  --theme-heading-4-color: var(--ftm-ink);

  /* Links - underline on hover only, no blue anywhere */
  --theme-link-initial-color: var(--ftm-ink);
  --theme-link-hover-color:   var(--ftm-ink-muted);
  --theme-link-active-color:  var(--ftm-ink);

  /* Type */
  --theme-font-family:        var(--ftm-font);
  --theme-button-font-family: var(--ftm-font);
  --theme-form-font-family:   var(--ftm-font);

  /* Structure - flat, square, no shadows */
  --theme-border-color:               var(--ftm-border);
  --theme-border-radius:              0;
  --theme-box-shadow:                 none;
  --theme-button-border-radius:       0;
  --theme-button-shadow:              none;
  --theme-form-field-border-radius:   0;
  --theme-boxed-content-border-radius: 0;
  --theme-boxed-content-box-shadow:   none;

  /* Buttons - near-black, never Blocksy's blue */
  --theme-button-background-initial-color: var(--ftm-btn-primary-bg);
  --theme-button-background-hover-color:   #000000;
  --theme-button-text-initial-color:       var(--ftm-btn-primary-ink);
  --theme-button-text-hover-color:         var(--ftm-btn-primary-ink);
  --theme-button-border-hover-color:       #000000;
  --theme-button-font-weight:    var(--ftm-weight-bold);
  --theme-button-font-size:      var(--ftm-text-sm);
  --theme-button-text-transform: uppercase;
  --theme-button-letter-spacing: 0.04em;
  --theme-button-min-height:     3.25rem;
  --theme-button-padding:        var(--ftm-space-4) var(--ftm-space-8);

  /* Cart badge - amber with ink text. Never white on amber. */
  --theme-cart-badge-background: var(--ftm-accent);
  --theme-cart-badge-text:       var(--ftm-accent-ink);

  /* Ground */
  --theme-content-background:   var(--ftm-bg);
  /* NOT --theme-container-width: Blocksy uses that as the container's actual
     WIDTH and sets it responsively (90vw desktop, 88vw mobile). Overriding it
     with a fixed px value forced every container to that width at every
     viewport, which removed the page gutters and pushed the grid off screen.
     --theme-normal-container-max-width is the max-width, which is what we want. */
  --theme-normal-container-max-width: 1440px;
  --theme-content-spacing:      var(--ftm-space-6);
  --theme-selection-text-color: var(--ftm-bg);
}

/* Blocksy paints the page wrapper off-white; the design calls for pure white. */
html, body, #main-container, .ct-container-full, #content { background-color: var(--ftm-bg); }

/* The page-title band ("Shop" on a grey slab) is switched off properly via the
   woo_categories_hero_enabled theme mod in scripts/wp-cli/configure-store.php,
   not hidden with CSS - hiding it would also kill legitimate page titles
   elsewhere on the site. */

/* --- Header ---------------------------------------------------------------
   Blocksy paints the header row from --theme-palette-color-8, and prints its
   rule as `[data-header] .ct-header [data-row]` from an inline <style> in the
   head. `.ct-header` is ON the header element, not inside it - an earlier
   attempt used it as a descendant and matched nothing. Using #header brings an
   ID to the fight, which outranks Blocksy's three-class selector.

   The bar is dark because the logo is white-on-transparent: on a white header
   the wordmark vanishes and only the amber flame shows. */
#header [data-row="middle"],
#header [data-row="middle"] > div {
  background-color: var(--ftm-nav-bg) !important;
  --theme-palette-color-8: var(--ftm-nav-bg);
  --theme-text-color: var(--ftm-nav-ink);
  --theme-link-initial-color: var(--ftm-nav-ink);
  --theme-link-hover-color: var(--ftm-accent);
  --theme-icon-color: var(--ftm-nav-ink);
  --theme-border-color: rgba(255, 255, 255, 0.12);
}
/* Bar height. The logo needs room to breathe above and below or the header
   reads as a toolbar rather than a shopfront. */
#header [data-row="middle"] { --height: 6rem; }
@media (max-width: 999.98px) { #header [data-row="middle"] { --height: 4.5rem; } }

#header a,
#header .ct-toggle,
#header button { color: var(--ftm-nav-ink); }
#header a:hover,
#header .ct-toggle:hover { color: var(--ftm-accent); }
#header .ct-toggle svg { fill: currentColor; }

/* WordPress cannot read intrinsic dimensions from an SVG, so the size is set
   here or the browser guesses. */
#header .site-logo-container img,
#header img.default-logo {
  width: auto;
  height: 1.9rem;
  max-height: 1.9rem;
}
@media (min-width: 1024px) {
  #header .site-logo-container img,
  #header img.default-logo { height: 2.25rem; max-height: 2.25rem; }
}
#header .site-title { display: none; }

/* Search opens Blocksy's modal - keep it, just make it Fantom's. */
#search-modal { background-color: rgba(38, 38, 38, 0.98) !important; }
#search-modal .ct-search-form { --theme-form-border-radius: 0; }

/* Mobile menu / search triggers rendered at 18px by Blocksy. The icon can stay
   small; the hit area cannot. Padding grows the target without moving the
   glyph. */
#header .ct-header-trigger,
#header .ct-header-search,
#header .ct-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ct-footer a { min-height: 44px; display: inline-flex; align-items: center; }