/*
Theme Name: BMX-READY
Theme URI: https://bmx-ready.com
Author: BMX-READY
Author URI: https://bmx-ready.com
Description: A clean, modern block theme (Site Editor / Gutenberg) built for BMX shops. Navy (#303759) and race red (#ba2425) used as accents on a mostly light canvas, with one dark hero anchor, soft color-field cards instead of boxes, pill buttons, and a floating header that shrinks and docks to the top on scroll. Home, Contact, and the WooCommerce Shop and Product pages are all built from ordinary, editable blocks, so quality-and-price messaging stays front and center everywhere. Requires the WooCommerce plugin for the shop and product templates.
Version: 1.14
Requires at least: 6.4
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: bmx-ready
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, template-editing, wide-blocks, woocommerce
*/

body { -webkit-font-smoothing: antialiased; }

/* Kill the automatic gap WordPress's global styles add between the header,
   main content, and footer at the site root (.wp-site-blocks > *). Every
   section already controls its own vertical padding, so that extra margin
   only ever shows up as an unwanted band of plain background color between
   the header and the page — most visible right under the dark header. The
   root block-gap value itself (theme.json) is left generous, since nested
   content (cards, columns, post content) still relies on it for normal
   rhythm; !important guarantees this wins regardless of the order WP
   prints its own generated global-styles rule in. */
.wp-site-blocks > * {
  margin-block-start: 0 !important;
}

/* ---- "Gate Lean" — a slanted parallelogram lean available on any Button
   from the block toolbar, echoing a BMX starting-gate angle. ---- */
.wp-block-button__link.is-style-gate-lean { transform: skewX(-8deg); }
.wp-block-button__link.is-style-gate-lean > span { display: inline-block; transform: skewX(8deg); }
.wp-block-button__link.is-style-gate-lean:hover { transform: skewX(-8deg) translateY(-3px); }

/* ---- inline line icons (replace emoji throughout — crisp at any size,
   inherit color via currentColor, no icon font dependency) ---- */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.trust-row .trust-icon .icon,
.usp-strip .icon,
.product-reassurance .icon { width: 18px; height: 18px; }
.site-footer .icon { width: 16px; height: 16px; }
.icon-list li { display: flex; align-items: center; gap: 10px; }
.icon-line { display: flex; align-items: center; gap: 10px; }

/* ---- tags / chips (category labels, stock badges) ---- */
.chip {
  display: inline-block;
  font-family: var(--wp--preset--font-family--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--wp--preset--color--navy-tint);
  color: var(--wp--preset--color--navy);
}
.chip.is-red { background: var(--wp--preset--color--race-red); color: var(--wp--preset--color--white); }

/* =========================================================
   BUTTON HOVER MOTION
   Solid buttons lift with a red glow; outline/"ghost" buttons
   (is-style-outline) fill in with whatever color they're
   already bordered in, flipping the text to stay readable.
   ========================================================= */
.wp-block-button__link {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(186, 36, 37, .35);
}
.wp-block-button__link:active { transform: translateY(-1px); }

.wp-block-button.is-style-outline .wp-block-button__link {
  border-width: 2px;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  box-shadow: 0 12px 28px rgba(24, 26, 36, .25);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-navy-color:hover {
  background-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-white-color:hover {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--navy);
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link { transition: none; }
}

/* =========================================================
   FLOATING / SHRINKING HEADER — dark glass, fixed to the
   viewport (not `position: sticky`, which silently stops
   working the moment any ancestor — including WordPress's own
   root-padding-aware-alignment wrapper — has anything but
   `overflow: visible`). Fixed is immune to that, so it never
   just "scrolls away". Because it's fixed, the page content
   needs matching top padding so nothing hides underneath it —
   see the `body` rules below, kept in step with the header's
   own two heights (normal / .is-scrolled).
   ========================================================= */
:root {
  /* Static fallback for the instant before JS runs (and for no-JS) —
     assets/js/header-scroll.js overwrites --bmx-header-h-live with the
     header's real, live-measured height the moment it can, which is what
     actually drives the padding below. Guessing a fixed px value here
     previously caused a visible gap/overlap because real rendered header
     height shifts with font loading, viewport width, and content. */
  --bmx-header-h: 160px;
  --bmx-header-h-scrolled: 90px;
}

body {
  padding-top: var(--bmx-header-h-live, var(--bmx-header-h));
  transition: padding-top .3s ease;
}
body.is-scrolled {
  padding-top: var(--bmx-header-h-live, var(--bmx-header-h-scrolled));
}

.wp-site-blocks > header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.announce-bar {
  background: var(--wp--preset--color--race-red);
  color: var(--wp--preset--color--white);
  max-height: 60px;
  overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease;
}
.announce-bar p { margin: 0; }
.announce-bar a { color: var(--wp--preset--color--white); text-decoration: underline; }
body.is-scrolled .announce-bar {
  max-height: 0;
  opacity: 0;
}

.site-header {
  background: #12131c;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  margin: 0;
  border-radius: 0;
  transition: margin .3s ease, border-radius .3s ease, box-shadow .3s ease;
}
.site-header .site-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 26px 32px;
  transition: padding .3s ease;
}
body.is-scrolled .site-header {
  margin: 10px 14px 0;
  border-radius: 16px;
  border-bottom-color: transparent;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
body.is-scrolled .site-header .site-header-inner {
  padding: 14px 28px;
}

/* Belt-and-suspenders text color: the site-title/navigation blocks below
   also carry an explicit textColor:white attribute in header.html, but
   these rules make sure the header text is never dark-on-dark even if
   that attribute is ever removed in the editor. */
.site-header,
.site-header .wp-block-site-title,
.site-header .wp-block-site-title a,
.site-header .wp-block-navigation,
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation-item__content {
  color: #ffffff !important;
}
.site-header .wp-block-site-title a {
  font-size: 26px;
  transition: font-size .3s ease, color .2s ease;
}
.site-header .wp-block-site-title a:hover { color: var(--wp--preset--color--race-red) !important; }
body.is-scrolled .site-header .wp-block-site-title a {
  font-size: 19px;
}

.site-header .wp-block-navigation-item { position: relative; }
.site-header .wp-block-navigation-item__content { position: relative; }
.site-header .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--wp--preset--color--race-red);
  transition: right .25s ease;
}
.site-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after { right: 0; }

.site-header .wc-block-mini-cart,
.site-header .wc-block-mini-cart__button {
  color: #ffffff !important;
  transition: transform .3s ease;
}
.site-header .wc-block-mini-cart__badge {
  background-color: var(--wp--preset--color--race-red) !important;
  color: #ffffff !important;
}
body.is-scrolled .site-header .wc-block-mini-cart {
  transform: scale(.92);
}

@media (max-width: 782px) {
  :root {
    --bmx-header-h: 160px;
    --bmx-header-h-scrolled: 92px;
  }
  .site-header .site-header-inner { padding: 16px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  body, .site-header, .site-header .site-header-inner, .site-header .wp-block-site-title a, .announce-bar { transition: none; }
}

/* =========================================================
   DARK SECTION UTILITY — apply to any group sitting on the
   navy/ink backgrounds so headings, text, links, and lists
   stay legible without needing per-block color overrides.
   ========================================================= */
.on-dark { color: rgba(255, 255, 255, .82); }
.on-dark .wp-block-heading, .on-dark .wp-block-query-title, .on-dark .wp-block-post-title { color: var(--wp--preset--color--white); }
.on-dark p { color: rgba(255, 255, 255, .78); }
.on-dark li { color: rgba(255, 255, 255, .82); }
.on-dark .has-gray-color { color: rgba(255, 255, 255, .6); }
.on-dark a:not(.wp-element-button) { color: var(--wp--preset--color--white); }
.on-dark a:not(.wp-element-button):hover { color: var(--wp--preset--color--race-red); }
.on-dark .chip:not(.is-red) { background: rgba(255, 255, 255, .12); color: var(--wp--preset--color--white); }

/* Cards keep their own white surface even inside an .on-dark section, so
   their contents reset back to the normal light-background palette. */
.on-dark .category-card, .on-dark .value-card, .on-dark .testimonial-card {
  color: var(--wp--preset--color--ink);
}
.on-dark .category-card p, .on-dark .value-card p, .on-dark .testimonial-card p {
  color: var(--wp--preset--color--ink);
}
.on-dark .category-card .has-gray-color, .on-dark .value-card .has-gray-color, .on-dark .testimonial-card .has-gray-color {
  color: var(--wp--preset--color--gray);
}
.on-dark .category-card .wp-block-heading, .on-dark .value-card .wp-block-heading, .on-dark .testimonial-card .wp-block-heading {
  color: var(--wp--preset--color--navy);
}
.on-dark .category-card .price-tag, .on-dark .value-card .price-tag, .on-dark .testimonial-card .price-tag {
  color: var(--wp--preset--color--race-red);
}
.on-dark .category-card a:not(.wp-element-button), .on-dark .value-card a:not(.wp-element-button), .on-dark .testimonial-card a:not(.wp-element-button) {
  color: var(--wp--preset--color--navy);
}

/* ---- hero ---- */
.hero-section {
  background: var(--wp--preset--color--navy);
}
/* A highlighter-style underline swipe instead of a solid block behind the
   text — reads as an editorial accent rather than a blunt meme-style box. */
.hero-section mark {
  position: relative;
  background: none;
  color: inherit;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero-section mark::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0.1em;
  height: 0.2em;
  background: var(--wp--preset--color--race-red);
  border-radius: 2px;
  z-index: -1;
}

/* ---- floating rating badge overlapping the hero image ---- */
.hero-visual { position: relative; }
.hero-badge {
  position: absolute;
  left: 28px;
  bottom: -26px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 14px 24px 14px 20px;
  box-shadow: 0 16px 36px rgba(18, 19, 28, .28);
}
.hero-badge .hero-badge-stars { color: var(--wp--preset--color--race-red); font-size: 13px; letter-spacing: 1px; }
.hero-badge .hero-badge-score { font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--navy); font-size: 20px; line-height: 1; }
.hero-badge .hero-badge-label { font-size: 12px; color: var(--wp--preset--color--gray); line-height: 1.3; }

@media (max-width: 600px) {
  .hero-badge { left: 16px; bottom: -20px; padding: 10px 18px 10px 16px; }
}
.hero-section .wp-block-image img { border: 1px solid rgba(255, 255, 255, .08); }

/* ---- trust row — small inline icon+text list, sits directly on the
   hero panel instead of a separate boxed section with circle badges ---- */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.trust-row .trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
}
.trust-row .trust-icon { font-size: 16px; line-height: 1; }

/* ---- value / category cards — soft color fields, not boxes.
   No border, no shadow at rest; separation comes from the tint against
   the page background, shadow/lift only appears on hover. ---- */
.value-card, .category-card {
  border-radius: 20px;
  background: var(--wp--preset--color--navy-tint);
  height: 100%;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.value-card:hover, .category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--wp--preset--shadow--floating);
}
.value-card .value-card-body, .category-card .category-card-body { padding: 30px 30px 34px; }
.category-card .wp-block-image { margin: 0; overflow: hidden; }
.category-card .wp-block-image img { border-radius: 0; transition: transform .5s ease; }
.category-card:hover .wp-block-image img { transform: scale(1.06); }

/* ---- price emphasis (used in patterns + WooCommerce output) ---- */
.price-tag {
  font-family: var(--wp--preset--font-family--heading);
  color: var(--wp--preset--color--race-red);
}

/* ---- testimonials — same soft field as the cards above, for one
   consistent "color field" language across the page ---- */
.testimonial-card {
  background: var(--wp--preset--color--navy-tint);
  border-radius: 20px;
  padding: 34px 32px;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--wp--preset--shadow--floating);
}
.testimonial-stars { color: var(--wp--preset--color--race-red); letter-spacing: 2px; }

/* ---- CTA banner ---- */
.cta-banner { background: var(--wp--preset--color--ink); }
.cta-banner .wp-block-heading, .cta-banner p { color: var(--wp--preset--color--white); }

/* ---- contact form (rendered via [bmxready_contact_form] shortcode) ---- */
.bmxready-contact-form { border-radius: 14px; padding: 44px; background: var(--wp--preset--color--paper); }
.bmxready-contact-form .form-field { margin-bottom: 18px; }
.bmxready-contact-form label { display: block; font-family: var(--wp--preset--font-family--label); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; color: var(--wp--preset--color--navy); }
.bmxready-contact-form input, .bmxready-contact-form select, .bmxready-contact-form textarea {
  width: 100%; background: var(--wp--preset--color--white); border: 1px solid rgba(48, 55, 89, .25); border-radius: 8px;
  padding: 12px 14px; font-size: 15px; font-family: var(--wp--preset--font-family--body);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bmxready-contact-form input:focus, .bmxready-contact-form select:focus, .bmxready-contact-form textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--wp--preset--color--race-red); border-color: var(--wp--preset--color--race-red); }
.bmxready-contact-form textarea { resize: vertical; min-height: 120px; }
.bmxready-contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bmxready-contact-form .form-note { font-size: 12px; color: var(--wp--preset--color--gray); margin-top: 14px; }
.bmxready-contact-form .form-success { border-radius: 8px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); padding: 14px 16px; font-size: 14px; margin-bottom: 18px; }
.bmxready-contact-form .form-error { border-radius: 8px; background: #fdecec; color: #8a1414; padding: 14px 16px; font-size: 14px; margin-bottom: 18px; }

/* ---- footer ---- */
.site-footer { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
.site-footer .wp-block-heading, .site-footer p, .site-footer a, .site-footer li { color: var(--wp--preset--color--white); }
.site-footer a { transition: color .2s ease; }
.site-footer a:hover { color: var(--wp--preset--color--race-red); }

/* ---- sub-footer — a darker closing strip under the main footer ---- */
.sub-footer { background: var(--wp--preset--color--ink); color: rgba(255, 255, 255, .7); }
.sub-footer p { color: rgba(255, 255, 255, .7); }

/* =========================================================
   WOOCOMMERCE — classic loop/single markup rendered via the
   woocommerce/legacy-template block, styled to match the theme.
   Cards get an explicit white background so they read correctly
   even when the section behind them (e.g. "Today's Best Deals")
   is dark.
   ========================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--wp--preset--color--navy-tint);
  border-radius: 20px;
  padding: 20px 20px 24px;
  transition: box-shadow .3s ease, transform .3s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--wp--preset--shadow--floating); transform: translateY(-6px); }
.woocommerce ul.products li.product img { border-radius: 12px; transition: transform .5s ease; }
.woocommerce ul.products li.product:hover img { transform: scale(1.06); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
  font-family: var(--wp--preset--font-family--heading);
  color: var(--wp--preset--color--navy);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.woocommerce span.price, .woocommerce-page span.price {
  font-family: var(--wp--preset--font-family--heading);
  color: var(--wp--preset--color--race-red);
  font-size: 1.2em;
}
.woocommerce span.price del { color: var(--wp--preset--color--gray); opacity: 1; font-family: var(--wp--preset--font-family--body); font-size: .8em; }
.woocommerce span.price ins { text-decoration: none; }
.woocommerce span.onsale, .woocommerce-page span.onsale {
  background: var(--wp--preset--color--race-red);
  font-family: var(--wp--preset--font-family--label);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  border-radius: 999px;
  min-height: 0;
  min-width: 0;
  padding: 6px 12px;
  line-height: 1;
  top: 12px;
  left: 12px;
}
.woocommerce .star-rating { color: var(--wp--preset--color--race-red); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button {
  background: var(--wp--preset--color--race-red);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--label);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 6px;
  padding: 12px 22px;
  border: none;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(24, 26, 36, .25);
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
  border-radius: 6px;
  margin: 0 3px;
  border-color: rgba(48, 55, 89, .15);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
.woocommerce .quantity input.qty {
  border: 1px solid rgba(48, 55, 89, .25);
  border-radius: 6px;
  padding: 10px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--wp--preset--font-family--label);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--wp--preset--color--navy);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--race-red); }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--wp--preset--color--race-red);
  border-radius: 8px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--wp--preset--color--race-red); }

/* trust strip shown under single-product content */
.product-reassurance { background: var(--wp--preset--color--navy); }

@media (max-width: 720px) {
  .bmxready-contact-form .form-row { grid-template-columns: 1fr; }
}