/**
 * futbol-mesa CSS — partial 2/6: 02-navigation-footer. Contiguous slice of the former style.css.
 * Header/nav mobile media, narrow-phone tweaks, price/store-notice colours, the TSK-020 palette pass, night footer + trust strip, primary buttons, WC notices, product-loop card component pass (start).
 * Load order is load-bearing (LRN-020/TSK-034): enqueued 01->06 in functions.php,
 * before storefront-woocommerce. Do NOT reorder or move rules between partials. @package futbol-mesa
 */
@media (max-width: 767px) {
  /* Contact strip collapses to a thin row: the claim and the "Email:"/"Whatsapp:"
     words are hidden, leaving each icon next to its value (address / number). */
  .futbol_mesa_contact .claim,
  .futbol_mesa_contact .label-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Claim is hidden at this width, so center the remaining email + whatsapp row
     instead of pinning it to the right where the claim used to balance it. */
  .futbol_mesa_contact .content-area {
    padding-top: 6px;
    padding-bottom: 6px;
    justify-content: center;
  }

  .futbol_mesa_contact .main {
    column-gap: 20px;
  }

  /* Single-row sticky header: logo left, cart + hamburger right. The hamburger
     lives in .storefront-primary-navigation, a child of .site-header, so the
     sticky header carries it along on scroll. */
  .site-header {
    margin: 0 0 16px; /* child .site-header (0,1,0) ties Storefront's parent rule, wins on source order (LRN-020) */
    padding: 6px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  }

  .site-header .col-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Keep the fluid gutter so the logo and cart sit off the viewport edge like
       every other band, instead of hugging the screen sides. */
    padding-left: var(--content-gutter);
    padding-right: var(--content-gutter);
  }

  #masthead .site-branding {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
  }

  #masthead .site-branding .custom-logo-link {
    display: inline-block;
  }

  #masthead .custom-logo {
    max-height: 44px;
    width: auto;
  }

  /* Reserve the rightmost ~42px the absolutely-positioned hamburger occupies
     (52px box scaled to ~32px visual + ~10px inset from the gutter), then add a
     consistent gap mirroring the desktop search→cart spacing. Keeps the cart
     right-aligned with an even margin to the toggle. */
  #masthead #site-header-cart {
    margin: 0 calc(42px + clamp(16px, 2.5vw, 40px)) 0 0;
    width: auto;
    flex: 0 0 auto;
    padding: 0;
  }

  /* The nav row collapses to nothing: the toggle is positioned onto the header
     row and the menu opens as an off-canvas panel, both out of normal flow. */
  .storefront-primary-navigation,
  .storefront-primary-navigation .col-full {
    padding: 0;
    margin: 0;
    min-height: 0;
    position: static;
  }

  #site-navigation.main-navigation {
    margin: 0;
  }

  #mega-menu-wrap-primary {
    position: static;
    border: 0 !important; /* Max Mega Menu's wrap border would draw a line across the header row */
  }

  #mega-menu-wrap-primary .mega-menu-toggle {
    position: absolute;
    top: 50%;
    right: var(--content-gutter);
    transform: translateY(-50%);
    /* Plugin leaves the icon flex-start (top-left); center it in the 52x40 box. */
    align-items: center;
    justify-content: center;
  }

  /* Hamburger: the plugin default ("slider" animated) is a chunky 40px grey
     (#636363) icon that clashes with the ink/terracotta header. Scale the whole
     box down — this preserves the open/X animation geometry, which is hardcoded
     to the default bar spacing — and recolor the bars to ink. */
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-box {
    transform: scale(0.62);
  }

  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner,
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::before,
  #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::after {
    background-color: var(--color-ink) !important;
    /* Sync the hamburger↔X morph to the menu panel's slide (left/right 0.2s
       ease-in-out) so the icon and the off-canvas menu open and close together,
       instead of the icon snapping instantly against the sliding panel. */
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu li.mega-6-columns > ul.mega-sub-menu > li.mega-menu-item,
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu li.mega-3-columns > ul.mega-sub-menu > li.mega-menu-item {
    width: 100%;
  }
}

/* Narrow phones: cap the logo width so the logo, cart and hamburger all fit on
   one row. Above 440px the logo keeps its natural width (height-constrained). */
@media (max-width: 439px) {
  #masthead .custom-logo {
    max-width: 160px;
    height: auto;
  }
}

/* Price: terracotta token (TSK-020). #A84830 on white = ~4.6:1, passes WCAG AA
   for normal text — supersedes the TSK-018 grey, which predated the palette. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--color-terracotta);
}

/* Store-notice band (Bizum strip) retinted to ink; verify AA contrast on text. */
.woocommerce-store-notice {
  background-color: var(--color-ink);
  color: var(--color-cream);
}

.woocommerce-store-notice__dismiss-link {
  color: var(--color-terracotta);
}

/* ---------------------------------------------------------------------------
   TSK-020 palette enforcement against Storefront parent + WooCommerce blocks.
   The child stylesheet now loads after storefront-style (enqueue dependency),
   so equal-specificity selectors win on source order — no !important needed
   for Storefront defaults. WooCommerce-blocks CSS loads independently, so the
   handful of selectors it controls (loop links, info notices) need !important.
   --------------------------------------------------------------------------- */

/* Page background: cream. */
body {
  background-color: var(--color-cream);
}

/* Content links: terracotta (token). Scoped to content/widgets so it does not
   touch nav (mega-menu) or footer, which set their own link colours below. */
.entry-content a,
.woocommerce a:not(.button):not(.contact-link),
.widget a,
.product-name a {
  color: var(--color-terracotta);
}

.entry-content a:hover,
.woocommerce a:not(.button):not(.contact-link):hover,
.widget a:hover,
.product-name a:hover {
  color: var(--color-terracotta-hover);
}

/* Headings: ink. Storefront sets #131315 at equal specificity; child wins now. */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-ink);
}

/* Footer: night background, muted text, white headings at full weight. */
.site-footer {
  background-color: var(--color-night);
  color: var(--color-footer-text);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title {
  color: #fff !important; /* widget/blocks CSS forces dark heading on dark footer */
  font-weight: 700;
}

.site-footer a {
  color: var(--color-footer-text);
}

.site-footer a:hover {
  color: #fff;
}

/* Front page: drop the trailing content spacing (band + content wrappers) so the
   trust strip sits flush under the full-bleed beginner band, as in the design. */
.home .site-main,
.home .content-area,
.home .rules-banner {
  margin-bottom: 0;
}

/* Hide the trailing empty columns block after the banner (leftover spacer in the
   page content) so the trust strip butts directly against the green band. */
.home .entry-content > .wp-block-columns:last-child {
  display: none;
}

/* Trust strip (design): shipping / payment / specialist, above the footer.
   White full-bleed band; .col-full centres the inner grid. */
.fm-trust {
  background: #fff;
  border-bottom: 1px solid var(--color-hairline);
}

.fm-trust__grid {
  list-style: none;
  margin: 0;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.fm-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
}

.fm-trust__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; /* design-system icon chip: 48px square / --radius-md */
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-cream);
  border: 1px solid var(--color-hairline);
  color: var(--color-terracotta);
}

.fm-trust__icon svg {
  width: 22px;
  height: 22px;
}

.fm-trust__title {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  margin: 2px 0 0;
}

.fm-trust__desc {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 5px 0 0;
}

.fm-trust__desc .bizum-note {
  position: relative;
  cursor: help;
}

.fm-trust__desc .bizum-note::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateY(-6px);
  z-index: 50;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--color-ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.fm-trust__desc .bizum-note:hover::after,
.fm-trust__desc .bizum-note:focus::after {
  opacity: 1;
}

/* Night footer (design): brand column, link columns, copyright bar.
   Lives inside #colophon .col-full, so width/centering come from .col-full. */
.fm-footer {
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 1.75rem;
}

.fm-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.25rem 1.75rem;
}

.fm-footer__brand {
  min-width: 220px;
}

.fm-footer__logo {
  display: inline-block;
}

.fm-footer__logo img {
  height: 44px;
  width: auto;
  opacity: 0.92;
  filter: brightness(0) invert(1); /* white wordmark on the night background */
}

.fm-footer__tagline {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-footer-muted);
  margin: 1rem 0 0;
  max-width: 26em;
}

.fm-footer__pay {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.125rem;
}

.fm-footer__pay-badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-footer-text);
}

.fm-footer__pay-badge--bizum {
  position: relative;
  cursor: help;
}

.fm-footer__pay-badge--bizum::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateY(-6px);
  z-index: 50;
  padding: 4px 8px;
  border-radius: 6px;
  background: #fff;
  color: var(--color-ink);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.fm-footer__pay-badge--bizum:hover::after,
.fm-footer__pay-badge--bizum:focus::after {
  opacity: 1;
}

.fm-footer__title {
  font-family: "Archivo", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.875rem;
}

.fm-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.fm-footer__links a {
  font-size: 0.92rem;
  color: var(--color-footer-muted); /* .fm-footer__links a (0,2,0) outranks Storefront's .site-footer a (0,1,1) */
  text-decoration: none;
}

.fm-footer__links a:hover {
  color: #fff;
  text-decoration: none;
}

.fm-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.375rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--color-footer-faint);
}

/* Primary action buttons: terracotta. */
.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
#place_order {
  background-color: var(--color-terracotta);
  color: #fff;
}

.button:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover {
  background-color: var(--color-terracotta-hover);
  color: #fff;
}

/* Product loop title links: ink, not the WooCommerce-blocks purple default. */
.woocommerce-loop-product__link,
ul.products li.product .woocommerce-loop-product__link {
  color: var(--color-ink) !important;
}

/* WooCommerce info/message notices: ink band, not blue (kills the #2c8fd6-ish
   blue close to the old Bizum tint). WC-blocks CSS forces blue — needs !important. */
.woocommerce-info,
.woocommerce-message {
  background-color: var(--color-ink) !important;
  color: var(--color-cream) !important;
}

.woocommerce-info a,
.woocommerce-message a {
  color: var(--color-terracotta) !important;
}

/* Storefront's notice ::before sets font-family: "Font Awesome 5 Free" with a
   glyph content code, but storefront-icons (the FA stylesheet) is dequeued
   site-wide for payload savings (functions.php) — leaves a missing-glyph box
   where the icon should be. Swap for inline SVG, no icon font dependency. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-noreviews::before,
p.no-comments::before {
  font-family: inherit;
  content: "";
  width: 1.1em;
  height: 1.1em;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
}

.woocommerce-error::before {
  font-family: inherit;
  content: "";
  width: 1.1em;
  height: 1.1em;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Block-editor "vivid red" button → terracotta (e.g. "Conoce las reglas"). */
.wp-block-button__link.has-vivid-red-background-color {
  background-color: var(--color-terracotta) !important;
}

/* ---------------------------------------------------------------------------
   Claude Design component pass: port the mockup's card/cart/search styling onto
   the existing Storefront/WooCommerce markup. No new sections or elements — only
   restyling the product loop, header search and header cart already on the page.
   Mockup source: claude.ai design "Subbuteo Victoria - Home.dc.html".
   --------------------------------------------------------------------------- */

/* Product loop cards: white surface, hairline border, soft radius, hover lift.
   Storefront's loop is flat <li> children, so the image is padded inside the card
   (no template override needed to bleed it edge-to-edge). */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #fff;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

/* Loop title: Archivo 700 (override the global h1-h3 weight-900 rule here only). */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700 !important;
  font-size: 1.02rem;
  line-height: 1.25;
}

/* Loop price: heavy Archivo, terracotta inherited from the price rule above. */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
}

/* Loop add-to-cart: ink button → terracotta on hover (mockup uses ink in the loop
   and reserves solid terracotta for primary CTAs like single add-to-cart). */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce-page ul.products li.product .button.add_to_cart_button {
  background-color: var(--color-ink);
  color: #fff;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--radius-sm);
}

.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product a.added_to_cart:hover,
.woocommerce-page ul.products li.product .button.add_to_cart_button:hover {
  background-color: var(--color-terracotta);
  color: #fff;
}