/*!
 * Balloon Saloon — App / Accessibility / Global Chrome stylesheet
 * VERIFICATION MARKER: BS-INSTALLER-v1.0.0
 * Loaded after bs-stitch.css. Handles: global header/footer chrome, the
 * off-canvas mobile menu, WCAG 2.1 AA code-level hardening, and WooCommerce
 * styling mapped to the Joyful Celebration System tokens.
 */

/* ============================================================
 * 0. Design tokens as CSS variables (mirror the Stitch config)
 * ========================================================== */
:root{
  --bs-primary:#9b0044; --bs-primary-container:#c2185b; --bs-on-primary:#ffffff;
  --bs-secondary:#005db7; --bs-on-secondary:#ffffff;
  --bs-accent:#fabd00; --bs-on-accent:#1c1b1b;
  --bs-surface:#fcf9f8; --bs-surface-lowest:#ffffff; --bs-bg-light:#F5F5F5;
  --bs-on-surface:#1c1b1b; --bs-on-surface-variant:#594045; --bs-text-secondary:#4A4A4A;
  --bs-border:#E0E0E0; --bs-outline:#8d6f75;
  --bs-focus:#005db7;            /* 3px focus ring colour (Secondary Blue) */
  --bs-control-border:#6f5b60;   /* >=3:1 on white, used for form controls  */
}

/* ============================================================
 * 1. Skip link (first focusable element, WCAG 2.4.1)
 * ========================================================== */
.bs-skip-link{
  position:absolute; left:8px; top:-60px; z-index:100000;
  background:var(--bs-primary); color:#fff; padding:12px 20px;
  border-radius:0 0 8px 8px; font-family:"Nunito Sans",sans-serif; font-weight:700;
  text-decoration:none; transition:top .15s ease;
}
.bs-skip-link:focus{ top:0; outline:3px solid var(--bs-accent); outline-offset:2px; }

/* ============================================================
 * 2. Visible focus on EVERYTHING (WCAG 2.4.7 / 2.4.11)
 *    Never remove an outline without a stronger replacement.
 * ========================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.button:focus-visible, .wp-block-button__link:focus-visible{
  outline:3px solid var(--bs-focus) !important;
  outline-offset:2px !important;
  border-radius:6px;
}
/* On raspberry/dark backgrounds switch the ring to the yellow accent for contrast */
.bg-primary a:focus-visible, .bg-primary button:focus-visible,
[class*="bg-primary"] a:focus-visible, [class*="bg-primary"] button:focus-visible,
footer a:focus-visible{
  outline-color:var(--bs-accent) !important;
}

/* ============================================================
 * 3. Target size >= 24px (WCAG 2.2 2.5.8) — we aim 44px for comfort
 * ========================================================== */
.bs-header button, .bs-header a.bs-icon-btn, .bs-menu-toggle,
.bs-mobile-menu a, .bs-mobile-menu button{
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ============================================================
 * 4. Form controls: resting border must meet 3:1 (WCAG 1.4.11)
 *    Stitch used #E0E0E0 (1.3:1) — we darken control borders.
 * ========================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea, .woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea, .select2-container .select2-selection{
  border:1px solid var(--bs-control-border) !important;
  border-radius:12px;
  background:#fff; color:var(--bs-on-surface);
  min-height:44px;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--bs-secondary) !important;
}
/* Required + error indicated by TEXT, never colour alone (WCAG 1.4.1) */
.bs-required{ font-weight:700; }
.bs-required::after, .woocommerce .required{ content:" (required)"; color:var(--bs-on-surface-variant); font-weight:400; }
.bs-field-error, .woocommerce-error li{ color:#93000a; font-weight:700; }
.bs-field-error::before{ content:"⚠ "; }

/* ============================================================
 * 5. Use of colour: in-prose links carry an underline (WCAG 1.4.1)
 * ========================================================== */
.bs-main p a, .bs-main li a, .bs-footer-legal a, .woocommerce-info a{
  text-decoration:underline; text-underline-offset:2px;
}

/* ============================================================
 * 6. Reduced motion (WCAG 2.3.3 / comfort)
 * ========================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .animate-marquee,.balloon-float,.bento-card,.hover-lift{ animation:none !important; transform:none !important; }
}

/* ============================================================
 * 7. Global header (awning) chrome
 * ========================================================== */
.bs-header{ position:sticky; top:0; z-index:9000; background:var(--bs-surface);
  border-bottom:4px solid var(--bs-primary); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.bs-awning{ background-image:repeating-linear-gradient(45deg,#9b0044 0,#9b0044 20px,#fff 20px,#fff 40px); height:8px; width:100%; }
.bs-header-inner{ max-width:1280px; margin:0 auto; padding:14px 48px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.bs-logo{ font-family:"Be Vietnam Pro",sans-serif; font-weight:800; font-size:30px; line-height:1; color:var(--bs-primary); text-transform:uppercase; letter-spacing:-.02em; text-decoration:none; }
.bs-nav{ display:flex; align-items:center; gap:28px; }
.bs-nav a{ font-family:"Nunito Sans",sans-serif; font-weight:700; font-size:16px; color:var(--bs-on-surface-variant); text-decoration:none; padding:6px 2px; border-bottom:2px solid transparent; }
.bs-nav a:hover{ color:var(--bs-primary); }
.bs-nav a[aria-current="page"]{ color:var(--bs-primary); border-bottom-color:var(--bs-primary); }
.bs-header-actions{ display:flex; align-items:center; gap:8px; }
.bs-icon-btn{ color:var(--bs-on-surface); background:transparent; border:0; border-radius:9999px; padding:10px; cursor:pointer; text-decoration:none; }
.bs-icon-btn:hover{ background:var(--bs-primary-container); color:#fff; }
.bs-cta{ background:var(--bs-primary); color:#fff !important; font-family:"Nunito Sans",sans-serif; font-weight:700; padding:12px 22px; border-radius:9999px; text-decoration:none; white-space:nowrap; }
.bs-cta:hover{ box-shadow:0 8px 20px rgba(155,0,68,.25); transform:translateY(-1px); }
.bs-phone-chip{ font-family:"Nunito Sans",sans-serif; font-weight:700; color:var(--bs-primary); text-decoration:none; }
.bs-cart-count{ background:var(--bs-primary); color:#fff; font-size:11px; min-width:18px; height:18px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; margin-left:-6px; }
.bs-menu-toggle{ display:none; background:transparent; border:0; color:var(--bs-primary); cursor:pointer; padding:10px; border-radius:9999px; }

/* ============================================================
 * 8. Off-canvas mobile menu — slides in from the RIGHT
 * ========================================================== */
.bs-menu-overlay{ position:fixed; inset:0; background:rgba(28,27,27,.5); z-index:9990; opacity:0; visibility:hidden; transition:opacity .25s ease; }
.bs-menu-overlay.is-open{ opacity:1; visibility:visible; }
.bs-mobile-menu{ position:fixed; top:0; right:0; height:100%; width:min(86vw,360px);
  background:var(--bs-surface-lowest); z-index:9999; transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1); box-shadow:-8px 0 30px rgba(0,0,0,.18);
  display:flex; flex-direction:column; padding:18px; overflow-y:auto; }
.bs-mobile-menu.is-open{ transform:translateX(0); }
.bs-mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--bs-border); padding-bottom:12px; margin-bottom:8px; }
.bs-mobile-menu nav{ display:flex; flex-direction:column; }
.bs-mobile-menu nav a{ font-family:"Nunito Sans",sans-serif; font-weight:700; font-size:18px; color:var(--bs-on-surface); text-decoration:none; padding:14px 8px; border-bottom:1px solid var(--bs-border); }
.bs-mobile-menu nav a:hover{ color:var(--bs-primary); }
.bs-mobile-menu .bs-cta{ margin-top:16px; text-align:center; }

@media (max-width:900px){
  .bs-nav, .bs-header .bs-cta.bs-cta-desktop{ display:none; }
  .bs-menu-toggle{ display:inline-flex; }
  .bs-header-inner{ padding:12px 16px; }
}

/* ============================================================
 * 9. Main wrapper + footer chrome
 * ========================================================== */
.bs-main{ display:block; }
.bs-footer{ background:#fff; border-top:1px solid var(--bs-border); }
.bs-footer-inner{ max-width:1280px; margin:0 auto; padding:64px 48px 24px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.bs-footer h2,.bs-footer h3{ font-family:"Nunito Sans",sans-serif; font-weight:700; font-size:16px; text-transform:uppercase; color:var(--bs-on-background,#1c1b1b); margin:0 0 12px; }
.bs-footer .bs-foot-brand{ font-family:"Be Vietnam Pro",sans-serif; font-weight:800; font-size:24px; color:var(--bs-primary); }
.bs-footer ul{ list-style:none; margin:0; padding:0; }
.bs-footer li{ margin:0 0 8px; }
.bs-footer a{ font-family:"Nunito Sans",sans-serif; font-size:14px; color:var(--bs-on-surface-variant); text-decoration:none; }
.bs-footer a:hover{ color:var(--bs-secondary); text-decoration:underline; }
.bs-footer p{ font-family:"Nunito Sans",sans-serif; font-size:14px; color:var(--bs-on-surface-variant); line-height:1.6; }
.bs-foot-social a{ color:var(--bs-primary); font-size:22px; margin-right:10px; display:inline-flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.bs-newsletter input[type="email"]{ width:100%; }
.bs-footer-bottom{ max-width:1280px; margin:0 auto; padding:18px 48px; border-top:1px solid var(--bs-border); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.bs-footer-legal{ display:flex; flex-wrap:wrap; gap:14px; }
.bs-footer-legal a{ font-size:13px; }
.bs-footer-bottom p{ font-size:13px; margin:0; }
@media (max-width:900px){
  .bs-footer-inner{ grid-template-columns:1fr 1fr; padding:40px 16px 16px; gap:28px; }
  .bs-footer-bottom{ padding:16px; flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){ .bs-footer-inner{ grid-template-columns:1fr; } }

/* ============================================================
 * 10. WooCommerce mapped to brand tokens
 * ========================================================== */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{ background:#fff; border-radius:14px; padding:14px; box-shadow:0 10px 30px -10px rgba(155,0,68,.12); }
.woocommerce ul.products li.product a img{ border-radius:10px; }
.woocommerce ul.products li.product .price{ color:var(--bs-on-surface); font-weight:700; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt{
  background:var(--bs-primary) !important; color:#fff !important; border-radius:9999px !important;
  font-family:"Nunito Sans",sans-serif; font-weight:700; padding:12px 24px; border:0; min-height:44px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:var(--bs-primary-container) !important; }
.woocommerce span.onsale{ background:var(--bs-accent) !important; color:var(--bs-on-accent) !important; border-radius:9999px; font-weight:700; }
.woocommerce .star-rating span{ color:var(--bs-primary); }
.woocommerce-message, .woocommerce-info{ border-top-color:var(--bs-secondary); }
.woocommerce-message::before, .woocommerce-info::before{ color:var(--bs-secondary); }

/* Headings use the display font site-wide */
h1,h2,h3,h4,.elementor-heading-title{ font-family:"Be Vietnam Pro",sans-serif; }
body, p, li, a, input, button, select, textarea{ font-family:"Nunito Sans",sans-serif; }
body{ background:var(--bs-surface); color:var(--bs-on-surface); }

/* Hide a leftover theme header/footer if the active theme renders one */
.hello-elementor .site-header, .hello-elementor .site-footer{ display:none; }