/*
Theme Name:   Baxtons (Bricks Child)
Theme URI:    https://baxtons.co.za
Description:  Child theme for the Baxtons catalogue rebuild. Bricks owns component styling; this file carries global concerns only: design tokens, focus visibility, motion preferences, the variant spec table, and the Contact Form 7 skin.
Author:       Socom Digital
Template:     bricks
Version:      1.2
Text Domain:  bricks-child
*/

/* ===========================================================================
   1. DESIGN TOKENS
   Extracted from the live site's per-template Elementor CSS by declaration
   frequency. The Elementor *global* colour variables are untouched Astra
   defaults (#046bd2 etc.) and are deliberately NOT used.
   =========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --bx-red:        var(--brand-red, #F44336);  /* primary, 12 declarations on the live site */
  --bx-red-deep:   var(--brand-red-deep, #D2202E);  /* text-weight red: #F44336 is only ~3.7:1 on
                                white, below AA for body copy. Use this for
                                any red text under 24px. */
  --bx-blue:       var(--brand-blue, #0D4C93);  /* secondary, 7 declarations */
  --bx-navy:       var(--brand-navy, #1C244B);  /* ink */
  --bx-cream:      var(--brand-cream, #F5F1EE);  /* warm ground */
  --bx-peach:      var(--brand-peach, #FFBC7D);  /* accent */
  --bx-white:      var(--surface, #FFFFFF);
  --bx-grey-light: var(--grey-light, #F2F2F2);
  --bx-rule:       var(--rule, #E5DED4);
  --bx-muted:      var(--muted, #6E6A66);

  /* --- Fluid type -------------------------------------------------------
     clamp() rather than per-breakpoint overrides. Display sizes scale;
     body and small stay fixed, because fluid body copy changes the measure
     as the viewport changes and fights the ~65ch target.
     Ranges map the live desktop sizes (88 / 50 / 40 / 28px) down to sensible
     mobile minimums across a 375px -> 1440px viewport.
     --------------------------------------------------------------------- */
  --bx-text-hero:  var(--text-hero, clamp(2.75rem,  1.60rem + 5.20vw, 5.500rem)); /* 44 -> 88 */
  --bx-text-h1:    var(--text-h1, clamp(2.00rem,  1.40rem + 2.80vw, 3.125rem)); /* 32 -> 50 */
  --bx-text-h2:    var(--text-h2, clamp(1.625rem, 1.30rem + 1.60vw, 2.500rem)); /* 26 -> 40 */
  --bx-text-h3:    var(--text-h3, clamp(1.375rem, 1.20rem + 0.90vw, 1.750rem)); /* 22 -> 28 */
  --bx-text-h4:    var(--text-h4, clamp(1.250rem, 1.15rem + 0.40vw, 1.500rem)); /* 20 -> 24 */
  --bx-text-lead:  var(--text-lead, clamp(1.0625rem,1.00rem + 0.30vw, 1.250rem)); /* 17 -> 20 */
  --bx-text-body:  var(--text-body, 1rem);
  --bx-text-small: var(--text-small, 0.875rem);
  --bx-text-micro: var(--text-micro, 0.75rem);

  /* --- Spacing ---------------------------------------------------------- */
  --bx-space-2xs: var(--space-2xs, 0.25rem);
  --bx-space-xs:  var(--space-xs, 0.5rem);
  --bx-space-sm:  var(--space-sm, 1rem);
  --bx-space-md:  var(--space-md, 1.5rem);
  --bx-space-lg:  var(--space-lg, 2.5rem);
  --bx-space-xl:  var(--space-xl, 4rem);
  --bx-space-2xl: var(--space-2xl, 6rem);
  --bx-section-y: var(--section-y, clamp(3rem, 2rem + 4vw, 6rem));

  /* --- Radius ------------------------------------------------------------
     25px is the signature card shape: 17 declarations on the live site.
     --------------------------------------------------------------------- */
  --bx-radius-card: var(--radius-card, 25px);
  --bx-radius-pill: var(--radius-pill, 999px);
  --bx-radius-sm:   var(--radius-sm, 8px);

  /* --- Typefaces --------------------------------------------------------- */
  --bx-font-display: "Baloo Bhaina 2", "Poppins", system-ui, sans-serif;
  --bx-font-body:    "Baloo Bhaina 2", "Poppins", system-ui, sans-serif;  /* live site sets BODY copy in
                                Baloo Bhaina 2 too, verified by computed style on every text role.
                                Poppins is loaded but used in a single declaration per page. */
}

/* ===========================================================================
   2. BASE
   =========================================================================== */

/* Keep running text readable regardless of container width. */
.bx-prose { max-width: 65ch; }

/* Visible keyboard focus. Bricks does not guarantee one. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bx-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect reduced-motion across every animation on the site. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Accessible hiding: read by assistive tech, invisible on screen. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   4. VARIANT SPEC TABLE
   Rendered by the baxtons-variant-table element. Tabular data needs real
   table semantics; every Bricks loop emits divs.
   =========================================================================== */

.baxtons-variant-table {
  /* Wide tables scroll inside their own container so the page body never
     scrolls sideways. */
  overflow-x: auto;
  border: 1px solid var(--bx-rule);
  border-radius: var(--bx-radius-sm);
  background: var(--bx-white);
}

.baxtons-variant-table table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--bx-text-small);
}

.baxtons-variant-table th {
  text-align: left;
  font-weight: 600;
  color: var(--bx-navy);
  background: var(--bx-cream);
  border-bottom: 1px solid var(--bx-rule);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

.baxtons-variant-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0EBE4;
  vertical-align: middle;
  /* Digits in the per-case column line up. */
  font-variant-numeric: tabular-nums;
}

.baxtons-variant-table tr:last-child td { border-bottom: 0; }

.baxtons-variant-table__view { width: 1%; white-space: nowrap; text-align: right; }

.baxtons-variant-table__view a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--bx-blue);
  border-radius: var(--bx-radius-pill);
  color: var(--bx-blue);
  background: transparent;
  font-weight: 600;
  font-size: var(--bx-text-small);
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.baxtons-variant-table__view a:hover,
.baxtons-variant-table__view a:focus-visible {
  background: var(--bx-blue);
  color: var(--bx-white);
}

.baxtons-variant-table__media { width: 96px; }

.baxtons-variant-table__media img {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
  border-radius: 8px;
}

/* ===========================================================================
   5. CONTACT FORM 7
   CF7's own stylesheet is dequeued in inc/forms.php; everything here is ours.
   =========================================================================== */

.bx-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 10px, measured off the reference form: its rows sit 50px apart with 40px
     fields, so the gutter is 10px in both axes. */
  gap: 10px;
}

.bx-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bx-field--full { grid-column: 1 / -1; }

/* The reference form displays no labels - every field is placeholder-only.
   Match it visually but keep the label in the accessibility tree, because a
   placeholder alone is not an accessible name. */
.bx-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bx-req      { color: var(--bx-red-deep); }
.bx-optional { font-weight: 400; color: var(--bx-muted); }

.bx-field input[type="text"],
.bx-field input[type="email"],
.bx-field input[type="tel"],
.bx-field select,
.bx-field textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  min-height: 40px;
  font: inherit;
  line-height: 1.4;
  color: var(--bx-navy);
  background: var(--bx-white);
  /* The reference fields are UNDERLINED, not boxed: top/right/left are 0 and
     only the bottom carries a 1px #69727D rule. */
  border: 0;
  border-bottom: 1px solid #69727D;
  border-radius: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.bx-field :is(input, select, textarea):focus-visible {
  outline: none;
  border-bottom-color: var(--bx-blue);
  box-shadow: 0 1px 0 0 var(--bx-blue);
}

.bx-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--bx-text-small);
}

.bx-consent input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--bx-red);
}

.bx-actions { grid-column: 1 / -1; margin: 0; }

/* Submit control for the CF7 form.
   SCOPED TO .wpcf7-submit ON PURPOSE. `bx-btn` is also a Bricks GLOBAL CLASS used
   by every button on the site; styling the bare `.bx-btn` here leaked width:100%
   and min-height onto all of them, because the Bricks rule
   (`.bx-btn.brxe-text-link`) never sets those two properties and so could not win
   them back. Never style a bare `bx-*` name in this file - it is the global-class
   namespace.
   Deliberately NOT --bx-red: the live site has zero red buttons (#F44336 is an
   Astra/WooCommerce fingerprint), and the reference Send button measures #0D4C93
   at a 25px radius. */
.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  font: inherit;
  font-size: var(--bx-text-body, 1rem);
  font-weight: 400;
  line-height: 1;
  padding: 17px 30px 14px;
  color: var(--bx-white);
  background: var(--bx-blue);
  border: 0;
  border-radius: 25px;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}

.wpcf7-submit:hover  { background: var(--brand-navy, #1C244B); }
.wpcf7-submit:active { transform: translateY(1px); }

.wpcf7 form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: var(--bx-space-sm) 0 0;
  padding: 0.9rem 1.1rem;
  border: 0;
  border-left: 4px solid currentColor;
  border-radius: 0 var(--bx-radius-sm) var(--bx-radius-sm) 0;
  font-size: var(--bx-text-small);
}

.wpcf7 form.sent .wpcf7-response-output       { color: #1F7A4D; background: #EAF6F0; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { color: #9A6212; background: #FCF4E6; }
.wpcf7 form.failed .wpcf7-response-output     { color: #B3261E; background: #FBEDEC; }

.wpcf7-not-valid-tip {
  color: #B3261E;
  font-size: var(--bx-text-small);
  font-weight: 500;
}

.wpcf7-not-valid { border-bottom-color: #B3261E !important; }

@media (max-width: 640px) {
  .bx-form-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   6. HEADER NAV — submenu pill padding
   Bricks applies the nav-item padding control to `.brx-submenu-toggle > *`,
   which means a menu item WITH a dropdown pays that padding twice: once on the
   link and again on the caret button. That inflated the "Products" pill by
   ~50px against the reference design. No Bricks control can split the two, and
   the element-level Custom CSS field silently dropped the rule, so it lives
   here instead. Scoped to #brx-header (stable) rather than a generated
   #brxe-<id>, which changes whenever the header tree is rewritten.
   =========================================================================== */

#brx-header .bricks-nav-menu > li > .brx-submenu-toggle > a {
  padding-right: 0;
}

#brx-header .bricks-nav-menu > li > .brx-submenu-toggle > button {
  padding-left: 8px;
  padding-right: 36px;
}

/* ===========================================================================
   7. SWIPER GALLERY  (element: baxtons-gallery)
   Main slider + synced thumbnail strip. Bricks' bundled Swiper CSS handles the
   track mechanics; this covers only what it does not: our own arrows, the
   thumbnail strip, and the active-thumb state.
   =========================================================================== */

.baxtons-gallery { display: flex; flex-direction: column; gap: var(--bx-space-xs); min-width: 0; }

/* A Swiper track sizes its slides from the container, while the container sizes
   from its content — inside a flex or grid parent whose default `min-width:auto`
   refuses to shrink, that circular dependency runs away to 33,554,432px (2^25).
   Both rails need an explicit floor. */
.baxtons-gallery__main,
.baxtons-gallery__thumbs { min-width: 0; width: 100%; }

.baxtons-gallery__main { position: relative; border-radius: var(--bx-radius-card); overflow: hidden; }

.baxtons-gallery__main .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Arrows: real <button>s, so they are keyboard reachable by default. */
.baxtons-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--bx-radius-pill);
  background: var(--bx-white);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.15);
  cursor: pointer;
  transition: background-color .2s ease;
}

.baxtons-gallery__nav:hover { background: var(--bx-cream); }

/* Chevrons drawn with a rotated border — no icon font dependency. */
.baxtons-gallery__nav::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 2px solid var(--bx-navy);
  border-right: 2px solid var(--bx-navy);
}

.baxtons-gallery__prev { left: 0.75rem; }
.baxtons-gallery__prev::before { transform: translateX(2px) rotate(-135deg); }
.baxtons-gallery__next { right: 0.75rem; }
.baxtons-gallery__next::before { transform: translateX(-2px) rotate(45deg); }

/* Swiper adds this class when there is nowhere left to go. */
.baxtons-gallery__nav.swiper-button-disabled { opacity: 0.35; pointer-events: none; }

.baxtons-gallery__thumbs { width: 100%; }

.baxtons-gallery__thumbs .swiper-slide {
  /* Width comes from the grid track Swiper sizes; keep them square. */
  aspect-ratio: 1;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--bx-radius-sm);
  overflow: hidden;
  opacity: 0.55;
  transition: opacity .2s ease, border-color .2s ease;
}

.baxtons-gallery__thumbs .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }

.baxtons-gallery__thumbs .swiper-slide:hover { opacity: 0.85; }

/* Swiper marks the thumb matching the visible main slide. */
.baxtons-gallery__thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--bx-blue);
}

.baxtons-gallery__pagination { display: flex; justify-content: center; gap: 0.4rem; padding-top: var(--bx-space-xs); }

/* ===========================================================================
   8. LIGHTBOX CONTROLS
   PhotoSwipe puts the arrows at the vertical mid-edges and the counter inside
   the top bar, which makes both easy to miss. Pull all three into one row
   beneath the image, under the caption.

   `.pswp` is appended to <body>, so these cannot be scoped to an element; they
   are deliberately global and apply to every lightbox on the site. The controls
   use `position: fixed` because `.pswp` fills the viewport, which sidesteps
   `.pswp__top-bar` acting as the counter's containing block.

   The selectors look heavy on purpose: Bricks ships its PhotoSwipe CSS scoped as
   `.pswp.brx .pswp__button--arrow` — two classes on the same element, so (0,3,0).
   A plain `.pswp__button--arrow--prev` or even `.pswp .pswp__…--prev` is (0,1,0)
   / (0,2,0) and silently loses, which is exactly what happened first time.
   =========================================================================== */

.pswp.brx .pswp__button--arrow.pswp__button--arrow--prev,
.pswp.brx .pswp__button--arrow.pswp__button--arrow--next {
  position: fixed;
  top: auto;
  bottom: 2rem;
  margin-top: 0;
  transform: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--bx-radius-pill);
  background: rgb(255 255 255 / 0.14);
  transition: background-color .2s ease;
}

.pswp.brx .pswp__button--arrow.pswp__button--arrow--prev:hover,
.pswp.brx .pswp__button--arrow.pswp__button--arrow--next:hover { background: rgb(255 255 255 / 0.28); }

/* Offset either side of the centred counter. */
.pswp.brx .pswp__button--arrow.pswp__button--arrow--prev { left: 50%; right: auto; margin-left: -7.5rem; }
.pswp.brx .pswp__button--arrow.pswp__button--arrow--next { left: 50%; right: auto; margin-left: 4.5rem; }

.pswp.brx .pswp__counter {
  position: fixed;
  top: auto;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Match the arrow buttons' box so all three share a centre line: they are
     bottom-anchored, so unequal heights offset the counter vertically. */
  height: 3rem;
  min-height: 3rem;
  line-height: 3rem;
  min-width: 4rem;
  margin: 0;
  padding: 0;
  font-size: var(--bx-text-body);
  font-weight: 600;
  /* PhotoSwipe dims the counter by default; it is a control here, not chrome. */
  opacity: 1;
}

/* Keep the caption clear of the control row. */
.pswp.brx .pswp__dynamic-caption { padding-bottom: 3.5rem; }