/* Skip link — off-screen via left (not transform) for reliable Tab order in Chromium */
.galbani-skip-link {
  background: #fff;
  border: 3px solid #094da4;
  border-radius: 0 0 8px 8px;
  color: #094da4;
  font-weight: 700;
  left: -10000px;
  padding: 12px 18px;
  position: absolute;
  top: 0;
  z-index: 10001;
  text-decoration: none;
}

.galbani-skip-link:focus,
.galbani-skip-link:focus-visible {
  left: 16px;
  position: fixed;
}

.galbani-screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Landmark only receives programmatic focus from skip link — no ring */
.galbani-main-content:focus {
  outline: none;
  box-shadow: none;
}

.galbani-main-content :is(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: 100px;
}

.header-hamburger-menu-button,
.search-button {
  min-height: 44px;
  min-width: 44px;
}

/* In-field submit icons stay ≤ field height so they do not cover the clear (x).
 * Target size remains ≥24px (WCAG 2.5.8 AA); header.css sets 32×32. */
.header-search-button-mobile,
.header-search-button-desktop {
  min-height: 32px;
  min-width: 32px;
}

/*
 * SLAC-793 — WCAG 1.4.11 (Non-text Contrast) + 2.4.7 (Focus Visible)
 *
 * Single-ring focus indicator (no dual borders):
 *  - Default / light / gray / pills / recipe cards / tip-cards: Galbani orange
 *    Brand orange in theme is #F49811 (pills/CTAs; no --galbani-orange token).
 *    #F49811 fails ≥3:1 vs #fff (2.25) and #f5f5f5 (2.06), so the focus ring
 *    alone uses darkened #7A4C08 (= #F49811 × 0.5 RGB) which passes:
 *      vs #fff 7.33:1 · vs #f5f5f5 6.72:1 · vs #F49811 (pill bar) 3.26:1
 *  - Blue surfaces (#094da4 header/menu/footer/dropdowns): solid white outline
 *    (≥3:1 vs #094da4 ≈ 8.05:1)
 *  - Tip-cards over photo: orange inset via ::after (one stroke). Orange #7A4C08
 *    retains ≥3:1 on light photo areas (e.g. vs ~#e8d4c0 ≈ 5.1:1).
 */
:root {
  --galbani-focus-ring: #7A4C08;
  --galbani-focus-ring-on-blue: #ffffff;
  --galbani-focus-width: 3px;
  --galbani-focus-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.swiper-pagination-bullet:focus-visible,
.drop-down-hover-btn:focus-visible,
.header-hamburger-menu-button:focus-visible,
.search-button:focus-visible,
.header-search-button-mobile:focus-visible,
.header-search-button-desktop:focus-visible,
.highlights-swiper .button:focus-visible,
.highlights-carousel-pause:focus-visible,
.footer-release-version__trigger:focus-visible {
  outline: var(--galbani-focus-width) solid var(--galbani-focus-ring);
  outline-offset: var(--galbani-focus-offset);
  box-shadow: none;
}

/* Inline styles used outline:none !important on bullets — longhands + brand orange.
 * Highlights swiper uses overflow:hidden; open it while a bullet is focused so the
 * outward ring is not clipped (same idea as .home-categories:focus-within). */
.highlights-swiper:focus-within,
.highlights-carousel-region:focus-within .highlights-swiper {
  overflow: visible;
}

.swiper-pagination-bullet:focus-visible,
.highlights-swiper .swiper-pagination-bullet:focus-visible,
.redes-sociais-pagination .swiper-pagination-bullet:focus-visible,
#redes-sociais-swiper .swiper-pagination-bullet:focus-visible {
  outline-width: var(--galbani-focus-width) !important;
  outline-style: solid !important;
  outline-color: var(--galbani-focus-ring) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/*
 * Blue surfaces — white ring only (≥3:1 vs #094da4 ≈ 8.05:1).
 * Covers header, mobile menu, footer, dropdowns over brand blue, pause btn.
 */
.header-desktop :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible,
.header-mobile :is(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible,
.footer :is(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.menu-mobile-container :is(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.drop-down-hover-btn:focus-visible,
.drop-down-hover-content a:focus-visible,
.drop-down-content a:focus-visible,
.highlights-carousel-pause:focus-visible,
.footer-release-version__trigger:focus-visible {
  outline-color: var(--galbani-focus-ring-on-blue);
  box-shadow: none;
}

/*
 * Cards / clipped parents — draw the ring inside the border box so
 * overflow:hidden (tip-card, product-category-card, carousels) does not clip it.
 * Includes .recipe-single-card (Mortadela etc.) — previous selector missed this class.
 */
.recipe-single-card:focus-visible,
a.recipe-single-card:focus-visible,
.recipe-card:focus-visible,
a.recipe-card:focus-visible,
.recipe-highlight-card:focus-visible,
a.recipe-highlight-card:focus-visible,
.product-category-card:focus-visible,
a.product-category-card:focus-visible,
.highlights-swiper .button:focus-visible,
.highlights-carousel a.button:focus-visible {
  outline-offset: -3px;
}

/*
 * Tip cards: overflow:hidden clips negative outlines; inset box-shadow sits
 * under the photo child. Paint a single Galbani-orange ring via ::after on top
 * of content (one stroke — not dual). Orange #7A4C08 passes ≥3:1 on light photo
 * areas and matches the default light-surface focus ring.
 */
.tip-card:focus-visible,
a.tip-card:focus-visible,
.tip-card-landscape:focus-visible,
a.tip-card-landscape:focus-visible {
  outline: none;
  box-shadow: none;
}

.tip-card:focus-visible::after,
a.tip-card:focus-visible::after,
.tip-card-landscape:focus-visible::after,
a.tip-card-landscape:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--galbani-focus-width) var(--galbani-focus-ring);
  pointer-events: none;
  z-index: 200;
}

/*
 * Category pills (orange bar): overflow-x:hidden on .home-categories (and
 * overflow-x:auto on .home-category-list) clips outward rings. While a pill
 * is focused, open overflow so a single orange ring can fully surround the link
 * without breaking idle carousel layout.
 */
.home-categories:focus-within {
  overflow: visible;
}

.home-categories:focus-within .home-category-list {
  overflow: visible;
  animation-play-state: paused;
}

.home-categories a:focus-visible,
.home-category-list-item:focus-visible,
.home-category-list-selected:focus-visible,
a.category-list-selected:focus-visible {
  outline: var(--galbani-focus-width) solid var(--galbani-focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: none;
}

.highlights-carousel-pause {
  background: #094da4;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  padding: 8px 16px;
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 6;
}

.video-slide .video-media-button {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .galbani-skip-link {
    transition: none;
  }

  .home-category-list {
    animation: none !important;
    transform: none !important;
  }
}

/* header.css sets outline:none on search fields — restore focus-visible ring */
.header-search-input-mobile:focus-visible,
.header-search-input-desktop:focus-visible {
  outline: var(--galbani-focus-width) solid var(--galbani-focus-ring);
  outline-offset: var(--galbani-focus-offset);
  box-shadow: none;
}

.header-desktop .header-search-input-desktop:focus-visible,
.header-mobile .header-search-input-mobile:focus-visible {
  /* search inputs are white fields on blue header — orange ring on the white field */
  outline-color: var(--galbani-focus-ring);
}