/* ---------------------------------------------------------------------------
   Accessibility corrections. Loaded last so these values win.
   Gold stays the brand colour; it simply stops being used as pale text or as a
   background under white text, where it fell below the WCAG AA 4.5:1 minimum.
--------------------------------------------------------------------------- */

:root{
  --gaia-gold-text:#8F6320;   /* gold, dark enough to read on ivory and white */
}

/* --- gold buttons: navy label instead of white (2.25:1 -> 6.99:1) --- */
.top-book,
.nav-book,
.availability-btn,
.booking-progress span.active,
.utility-book{
  color:#0A243F;
  font-weight:700;
}
.newsletter-section{color:#0A243F}
.newsletter-section input{color:#0A243F}
.newsletter-section ::placeholder{color:rgba(10,36,63,.62)}

/* --- gold used as text on a light ground --- */
.line-link,
.text-button,
.add-room,
.eyebrow.teal,
.gallery-filters button.active{
  color:var(--gaia-gold-text);
}
.line-link{border-bottom-color:var(--gaia-gold-text)}

/* --- a focus ring that is actually visible, on both grounds --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #0A243F;
  outline-offset:2px;
  border-radius:2px;
}
.header a:focus-visible,
.header button:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible,
.sun-footer a:focus-visible,
.sun-footer button:focus-visible,
.mega-menu a:focus-visible,
.mega-menu button:focus-visible,
.utility a:focus-visible,
.utility button:focus-visible{
  outline-color:#F2C97E;
}

/* --- touch targets: 44px minimum where links were stacked tightly --- */
.sun-footer-column a,
.sun-footer-column button,
.utility a,
.utility-link,
.language-menu button,
.currency-menu button,
.mega-menu .mega-links a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.language-menu button,
.currency-menu button{width:100%;justify-content:flex-start;gap:10px}

/* --- respect a reduced-motion preference --- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .activity-grid article:hover img,
  .gallery-card:hover img{transform:none}
}

/* ---- Second pass: every remaining pairing measured below WCAG AA ---- */
:root{
  --gaia-gold-text:#8A5E1C;   /* readable on white, ivory and sand */
  --gaia-grey-text:#586A74;   /* replaces the pale grey used for small labels */
}

/* gold as text, wherever it sits on a light ground */
.line-link,
.text-button,
.add-room,
.eyebrow.teal,
.gallery-filters button.active,
.villa-switcher button.active,
.date-inputs > span,
.date-toggle button.active,
.booking-cell button.active,
.villa-switch button.active,
.villa-stage strong,
.available-villa strong,
.review-card strong,
.sun-footer a.is-current,
.sun-footer-column a.is-current,
.price strong{
  color:var(--gaia-gold-text);
}
.line-link{border-bottom-color:var(--gaia-gold-text)}

/* white on gold, in the one place it was left */
.activity-arrow{color:#0A243F}

/* small grey labels */
.villa-stage small,
.villa-stage span,
.booking-cell small,
.booking-cell button,
.date-toggle button,
.villa-switch button,
.villa-switcher button,
.sun-footer .sun-contact-column .sun-contact-label,
.sun-contact-label{
  color:var(--gaia-grey-text);
}
.booking-cell button.active,
.date-toggle button.active,
.villa-switch button.active,
.villa-switcher button.active{color:var(--gaia-gold-text)}

/* the gold eyebrow stays light where it sits on a dark band */
.hero .eyebrow.gold,
.section-dark .eyebrow.gold,
.destination-section .eyebrow.gold,
.experience-section .eyebrow.gold,
.page-banner .eyebrow.gold,
.celebrations-section .eyebrow.gold{color:#E2A956}

/* body copy on the near-black experience band */
.light-copy,
.experience-section .light-copy,
section[class*="experience"] p.light-copy{
  color:#AEBEC7;
}

/* the dining accordion markers */
.dining-section button span{color:var(--gaia-gold-text)}
.dining-section button.active span{color:var(--gaia-gold-text)}

/* ---- Touch targets: WCAG 2.5.8 asks for 24×24 CSS pixels ---- */
.nav-links a,
.nav-links .utility-link,
.nav-links button{
  padding-block:12px;
  display:inline-flex;
  align-items:center;
}
.mega-menu a,
.mega-menu button:not(.mega-toggle){
  padding-block:13px;
}
.booking-cell button,
.date-toggle button,
.booking-cell .text-button{
  padding-block:7px;
}
/* the gallery dots keep their small look but gain a larger hit area */
.gallery-dots button,
.hero-dots button{
  padding:8px;
  background-clip:content-box;
  box-sizing:content-box;
}
.skip-link:focus{padding:14px 18px}
.image-dots button{padding:8px;background-clip:content-box;box-sizing:content-box}
.offer .line-link,
.offer a,
.offer button{padding-block:5px}
.offers-section .offer a,
.offers-section .offer button,
.offer-body a,
.offer-body button{padding-block:7px;display:inline-flex;align-items:center}

/* ---- Booking dialog: the two pairings still short of AA ---- */
.available-villa small,
.available-villa p{color:var(--gaia-grey-text)}
.available-villa div > small:first-child{color:var(--gaia-gold-text)}
.booking-progress span{color:#41535E;border-color:#8FA0AA}
.booking-progress span.active{color:#0A243F}