/* ============================================================
   BIOHEAL A11y PATCH — WCAG 2.1 AA fixes
   2026-05-25
   ============================================================ */

/* ----- 1) WCAG 2.4.1 — Skip link visible on focus -----
   The Magento default skip link is screen-reader-only but never
   becomes visible on keyboard focus. Browser keyboard users were
   missing the bypass. */
a[href="#contentarea"] {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html body a[href="#contentarea"]:focus,
html body a[href="#contentarea"]:focus-visible,
html body a[href="#contentarea"].bh-skip-focused {
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0.85rem 1.4rem !important;
  margin: 0 !important;
  background: var(--forest, #2D5A3D) !important;
  color: var(--paper, #FAF8F2) !important;
  text-decoration: none !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  border: 0 !important;
  border-radius: 10px !important;
  z-index: 99999 !important;
  outline: 2px solid var(--gold, #C9A961) !important;
  outline-offset: 3px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-indent: 0 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  pointer-events: auto !important;
  display: inline-block !important;
}

/* ----- 2) WCAG 1.3.1 + brand consistency — hide Magento auto H1 -----
   Magento auto-generates an <h1 class="page-title"> from the CMS
   page title; this is the default Magento gray header that breaks
   the v7 brand look. Hide it on:
   - Homepage (v7 supplies its own bh-hero-h1)
   - /rolunk, /kapcsolat, /gyakori-kerdesek (per Attila — keep mobile
     header consistent across all key CMS pages). For consistency
     when adding new CMS pages, add the body class to this rule. */
.cms-home .page-title-wrapper,
.cms-index-index .page-title-wrapper,
.cms-rolunk .page-title-wrapper,
.cms-kapcsolat .page-title-wrapper,
.cms-gyakori-kerdesek .page-title-wrapper {
  display: none !important;
}

/* ----- 3) WCAG 2.5.5 — touch target for "Belépés" header link -----
   The .header-account-toggle anchor was 126x21 — too small for the
   AA 44px minimum. Padding-block expands the hit area without
   visually moving the text. */
.header-account-toggle {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
}

/* ----- 4) Visible focus ring fallback (defensive) -----
   Ensure focus-visible is unmistakable on header links + buttons
   for keyboard users, including in cases where theme :focus rules
   have been blanked by older Magento defaults. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--gold, #C9A961) !important;
  outline-offset: 3px !important;
}

/* ----- 5) WCAG 2.1.1 — slider keyboard controls -----
   The scroll-snap product carousel had no keyboard nav. JS injects
   prev/next buttons into section.bhS; these styles position them. */
.bh-slider-a11y-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.25rem;
  padding: 0 1rem;
}
.bh-slider-a11y-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0.6rem 1rem;
  background: var(--paper-3, #fff);
  color: var(--forest, #2D5A3D);
  border: 1.5px solid var(--forest, #2D5A3D);
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.bh-slider-a11y-btn:hover {
  background: var(--forest, #2D5A3D);
  color: var(--paper, #FAF8F2);
  transform: translateY(-1px);
}
.bh-slider-a11y-btn:focus-visible {
  outline: 2px solid var(--gold, #C9A961);
  outline-offset: 3px;
}

/* Don't override the visible skip link's own ring */
a[href="#contentarea"]:focus-visible {
  outline-color: var(--gold, #C9A961) !important;
}

/* ============================================================
   BIOHEAL MOBILE TUNING — small-screen visual fixes
   2026-05-25
   ============================================================ */

/* ----- 6) Hide hero-media-cap pill on mobile -----
   The "Olíva D3 · 120 db" pill is absolute-positioned at bottom-right
   of the hero figure (188×110 on desktop). On phone widths it covers
   a large portion of the product image. The same info is already
   communicated by the "ÚJ · OLÍVA D3 4000 NE" pill above the H1 and
   the H1 itself, so it's safe to hide on small screens. */
@media (max-width: 767px) {
  .bh-hero-media-cap {
    display: none !important;
  }
}