/*
 * Florida 30A site-wide button contrast and focus improvements
 * Targets WCAG 2.2 AA text contrast (4.5:1 for normal text) and
 * clearly visible control boundaries/focus indicators.
 * Build: 2026-07-12
 */
:root {
  --30a-hc-ocean: #005f99;
  --30a-hc-ocean-hover: #004b7a;
  --30a-hc-teal: #0f766e;
  --30a-hc-teal-hover: #0b5f59;
  --30a-hc-coral: #b63d14;
  --30a-hc-coral-hover: #922f0f;
  --30a-hc-sun: #fde68a;
  --30a-hc-ink: #0f172a;
  --30a-hc-light-border: #f8fafc;
  --30a-hc-dark-border: #334155;
}

/* Dark theme buttons: light text and a light visible boundary. */
a.bg-beach-ocean.text-white,
button.bg-beach-ocean.text-white,
a.bg-beach-teal.text-white,
button.bg-beach-teal.text-white,
a.bg-beach-coral.text-white,
button.bg-beach-coral.text-white,
.card-action-button.action-theme-ocean,
.card-action-button.action-theme-teal,
.card-action-button.action-theme-coral,
.affiliate-cta-button,
.booking-cta,
.travel-cta,
.btn-primary {
  color: #ffffff !important;
  border: 2px solid rgba(248, 250, 252, .92) !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .28);
}

a.bg-beach-ocean.text-white,
button.bg-beach-ocean.text-white,
.card-action-button.action-theme-ocean,
.affiliate-cta-button {
  background: var(--30a-hc-ocean) !important;
}

a.bg-beach-ocean.text-white:hover,
button.bg-beach-ocean.text-white:hover,
.card-action-button.action-theme-ocean:hover,
.affiliate-cta-button:hover {
  background: var(--30a-hc-ocean-hover) !important;
  color: #ffffff !important;
}

a.bg-beach-teal.text-white,
button.bg-beach-teal.text-white,
.card-action-button.action-theme-teal,
.travel-cta.secondary {
  background: var(--30a-hc-teal) !important;
}

a.bg-beach-teal.text-white:hover,
button.bg-beach-teal.text-white:hover,
.card-action-button.action-theme-teal:hover,
.travel-cta.secondary:hover {
  background: var(--30a-hc-teal-hover) !important;
  color: #ffffff !important;
}

a.bg-beach-coral.text-white,
button.bg-beach-coral.text-white,
.card-action-button.action-theme-coral {
  background: var(--30a-hc-coral) !important;
}

a.bg-beach-coral.text-white:hover,
button.bg-beach-coral.text-white:hover,
.card-action-button.action-theme-coral:hover,
button.hover\:bg-orange-600:hover,
a.hover\:bg-orange-600:hover {
  background: var(--30a-hc-coral-hover) !important;
  color: #ffffff !important;
}

/* Gradient primary controls use only colors that retain white-text contrast. */
.btn-primary {
  background: linear-gradient(135deg, var(--30a-hc-ocean), var(--30a-hc-teal)) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--30a-hc-ocean-hover), var(--30a-hc-teal-hover)) !important;
  color: #ffffff !important;
}

/* Booking/travel controls already use dark fills; reinforce their boundary. */
.booking-cta,
.travel-cta {
  border-color: rgba(248, 250, 252, .92) !important;
}

/* Light theme buttons: dark text and dark outline. */
a.bg-white.text-beach-ocean,
a.bg-white\/90.text-slate-700,
a.bg-white\/95.text-slate-700,
button.bg-white.text-beach-ocean,
button.bg-white\/90.text-beach-teal,
.btn-secondary,
.card-action-button.action-theme-sun,
a.rounded-full.bg-white.text-beach-ocean {
  color: var(--30a-hc-ink) !important;
  border: 2px solid var(--30a-hc-dark-border) !important;
  text-shadow: none !important;
}

a.bg-white.text-beach-ocean,
button.bg-white.text-beach-ocean,
.btn-secondary,
a.rounded-full.bg-white.text-beach-ocean {
  background: rgba(248, 250, 252, .96) !important;
}

a.bg-white.text-beach-ocean:hover,
button.bg-white.text-beach-ocean:hover,
.btn-secondary:hover,
a.rounded-full.bg-white.text-beach-ocean:hover {
  background: #dbeafe !important;
  color: var(--30a-hc-ink) !important;
}

a.bg-white\/90.text-slate-700,
a.bg-white\/95.text-slate-700 {
  background: rgba(248, 250, 252, .96) !important;
  color: #1e293b !important;
}

a.bg-white\/90.text-slate-700:hover,
a.bg-white\/95.text-slate-700:hover {
  background: #e0f2fe !important;
  color: var(--30a-hc-ink) !important;
}

/* Light gold action theme intentionally uses dark text and outline. */
.card-action-button.action-theme-sun {
  background: var(--30a-hc-sun) !important;
}
.card-action-button.action-theme-sun:hover {
  background: #fcd34d !important;
  color: var(--30a-hc-ink) !important;
}

/* Filter chips are light controls, so use dark teal text/border. */
button.bg-white\/90.text-beach-teal {
  background: rgba(248, 250, 252, .96) !important;
  color: #0b5f59 !important;
  border-color: #0f766e !important;
}
button.bg-white\/90.text-beach-teal:hover {
  background: var(--30a-hc-teal) !important;
  color: #ffffff !important;
  border-color: var(--30a-hc-light-border) !important;
}

/* Phase 2 location-panel controls use the same accessible dark palette. */
.listing-action-button.primary,
.listing-action-button.secondary {
  color: #ffffff !important;
  border: 2px solid rgba(248, 250, 252, .92) !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .28);
}
.listing-action-button.primary {
  background: var(--30a-hc-ocean) !important;
}
.listing-action-button.primary:hover {
  background: var(--30a-hc-ocean-hover) !important;
}
.listing-action-button.secondary {
  background: var(--30a-hc-teal) !important;
}
.listing-action-button.secondary:hover {
  background: var(--30a-hc-teal-hover) !important;
}

/* Missing-link placeholders remain legible without looking active. */
.card-action-placeholder {
  background: #e2e8f0 !important;
  color: #475569 !important;
  border: 2px solid #64748b !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Ensure button-like white controls have a visible edge even when a page's
   glass-background rules replace their original white background. */
a.inline-flex.bg-white,
a.rounded-full.bg-white,
.btn-secondary {
  border-color: var(--30a-hc-dark-border) !important;
}

/* Clickable light cards use a dark edge so their boundary does not disappear. */
a.block.bg-white\/95.rounded-2xl,
a.block.rounded-2xl.bg-sky-50,
a.block.rounded-2xl.bg-teal-50,
a.block.rounded-2xl.bg-orange-50,
a.block.rounded-2xl.bg-amber-50 {
  border: 2px solid rgba(51, 65, 85, .72) !important;
}

/* Resource cards displayed on dark panels keep a dark fill, white text, and
   a visible light outline instead of translucent white-on-light styling. */
a.rounded-2xl.bg-white\/10 {
  background: #0f4f68 !important;
  color: #ffffff !important;
  border: 2px solid rgba(248, 250, 252, .92) !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .35);
}
a.rounded-2xl.bg-white\/10:hover {
  background: #0b3f54 !important;
  color: #ffffff !important;
}

/* Strong, two-tone focus indicator works on both light and dark surfaces. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--30a-hc-ink) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px #ffffff, 0 0 0 9px var(--30a-hc-ink) !important;
  position: relative;
  z-index: 20;
}

/* Preserve readable colors in Windows/high-contrast forced-color modes. */
@media (forced-colors: active) {
  a,
  button,
  input,
  select,
  textarea {
    border: 2px solid ButtonText !important;
  }
  :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid Highlight !important;
  }
}

@media print {
  a,
  button {
    text-shadow: none !important;
    box-shadow: none !important;
  }
}

/* -------------------------------------------------------------------------
 * Contrast hotfix 2 — grid/card cascade and light navigation controls
 * The site's decorative `.grid > a:nth-child(...)` glass-tint selectors use
 * `!important` and are more specific than the original action-theme rules.
 * These selectors deliberately outrank that cascade so real controls always
 * keep their accessible button colors and visible boundaries.
 * ---------------------------------------------------------------------- */

/* Card action buttons that are direct children of a grid. */
html body .grid > a.card-action-button.action-theme-ocean,
html body .grid > button.card-action-button.action-theme-ocean {
  background: var(--30a-hc-ocean) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid var(--30a-hc-light-border) !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .28) !important;
}

html body .grid > a.card-action-button.action-theme-teal,
html body .grid > button.card-action-button.action-theme-teal {
  background: var(--30a-hc-teal) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid var(--30a-hc-light-border) !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .28) !important;
}

html body .grid > a.card-action-button.action-theme-coral,
html body .grid > button.card-action-button.action-theme-coral {
  background: var(--30a-hc-coral) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid var(--30a-hc-light-border) !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, .28) !important;
}

html body .grid > a.card-action-button.action-theme-sun,
html body .grid > button.card-action-button.action-theme-sun {
  background: var(--30a-hc-sun) !important;
  background-image: none !important;
  color: var(--30a-hc-ink) !important;
  border: 2px solid var(--30a-hc-dark-border) !important;
  text-shadow: none !important;
}

html body .grid > a.card-action-button.action-theme-ocean:hover,
html body .grid > button.card-action-button.action-theme-ocean:hover {
  background: var(--30a-hc-ocean-hover) !important;
  color: #ffffff !important;
}
html body .grid > a.card-action-button.action-theme-teal:hover,
html body .grid > button.card-action-button.action-theme-teal:hover {
  background: var(--30a-hc-teal-hover) !important;
  color: #ffffff !important;
}
html body .grid > a.card-action-button.action-theme-coral:hover,
html body .grid > button.card-action-button.action-theme-coral:hover {
  background: var(--30a-hc-coral-hover) !important;
  color: #ffffff !important;
}
html body .grid > a.card-action-button.action-theme-sun:hover,
html body .grid > button.card-action-button.action-theme-sun:hover {
  background: #fcd34d !important;
  color: var(--30a-hc-ink) !important;
}

/* Any anchor/button using a pale utility background is an interactive light
   control: give it dark text, a dark outline, and a clear hover state. This
   covers the Plan around this stop links and similar controls site-wide. */
html body a.bg-sky-50,
html body a.bg-teal-50,
html body a.bg-orange-50,
html body a.bg-amber-50,
html body button.bg-sky-50,
html body button.bg-teal-50,
html body button.bg-orange-50,
html body button.bg-amber-50 {
  color: var(--30a-hc-ink) !important;
  border: 2px solid var(--30a-hc-dark-border) !important;
  text-shadow: none !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .12) !important;
}

html body a.bg-sky-50:hover,
html body button.bg-sky-50:hover {
  background: #bae6fd !important;
  color: var(--30a-hc-ink) !important;
}
html body a.bg-teal-50:hover,
html body button.bg-teal-50:hover {
  background: #99f6e4 !important;
  color: var(--30a-hc-ink) !important;
}
html body a.bg-orange-50:hover,
html body button.bg-orange-50:hover {
  background: #fed7aa !important;
  color: var(--30a-hc-ink) !important;
}
html body a.bg-amber-50:hover,
html body button.bg-amber-50:hover {
  background: #fde68a !important;
  color: var(--30a-hc-ink) !important;
}

/* Keep missing/unavailable card controls visibly disabled even inside grids. */
html body .grid > span.card-action-placeholder,
html body .grid > a.card-action-placeholder,
html body .grid > button.card-action-placeholder {
  background: #e2e8f0 !important;
  background-image: none !important;
  color: #475569 !important;
  border: 2px solid #64748b !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------
 * Navigation hotfix 3 — keep FAQ and all category tabs in one navigation row
 * Added after the contrast rules so it overrides both Tailwind utilities and
 * the older page-level responsive grid that was sized for only six tabs.
 * ---------------------------------------------------------------------- */

/* Standard desktop and tablet navigation: compact, flexible, and no wrapping. */
@media (min-width: 768px) {
  html body nav.mobile-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: clamp(.35rem, .65vw, .7rem) !important;
    width: 100% !important;
  }

  html body nav.mobile-tabs > a.mobile-tab {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: .68rem clamp(.5rem, .85vw, .9rem) !important;
    gap: clamp(.25rem, .4vw, .45rem) !important;
    font-size: clamp(.76rem, .88vw, .95rem) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  html body nav.mobile-tabs > a.mobile-tab .category-tab-logo {
    width: clamp(1.3rem, 1.55vw, 1.6rem) !important;
    height: clamp(1.3rem, 1.55vw, 1.6rem) !important;
  }

  html body nav.mobile-tabs > a.mobile-tab > span[aria-hidden="true"] {
    font-size: 1rem !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }
}

/* Compact tablet/small-laptop mode. Hiding decorative logos at these widths
   preserves readable labels while keeping all seven destinations in one row. */
@media (min-width: 768px) and (max-width: 1100px) {
  html body nav.mobile-tabs {
    gap: .3rem !important;
  }

  html body nav.mobile-tabs > a.mobile-tab {
    padding: .58rem .42rem !important;
    gap: .2rem !important;
    font-size: clamp(.68rem, 1.15vw, .78rem) !important;
  }

  html body nav.mobile-tabs > a.mobile-tab .category-logo-picture {
    display: none !important;
  }

  html body nav.mobile-tabs > a.mobile-tab > span[aria-hidden="true"] {
    font-size: .82rem !important;
  }
}

/* Phones: the old page-level rule created six columns, so the seventh FAQ
   item dropped to a second row. Use seven equal columns and allow long labels
   to wrap inside their own button rather than creating another navigation row. */
@media (max-width: 767px) {
  html body nav.mobile-tabs {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: .18rem !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  html body nav.mobile-tabs > a.mobile-tab {
    width: 100% !important;
    min-width: 0 !important;
    padding: .34rem .06rem !important;
    gap: .08rem !important;
    font-size: clamp(.39rem, 1.55vw, .56rem) !important;
    line-height: .64rem !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    align-content: center !important;
    min-height: 2.55rem !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    box-sizing: border-box !important;
  }

  html body nav.mobile-tabs > a.mobile-tab .category-tab-logo {
    width: 1.05rem !important;
    height: 1.05rem !important;
  }

  html body nav.mobile-tabs > a.mobile-tab > span[aria-hidden="true"] {
    font-size: .7rem !important;
    line-height: 1 !important;
  }
}

@media (max-width: 420px) {
  html body nav.mobile-tabs > a.mobile-tab .category-logo-picture {
    display: none !important;
  }

  html body nav.mobile-tabs > a.mobile-tab {
    min-height: 2.35rem !important;
    font-size: clamp(.36rem, 1.65vw, .48rem) !important;
    line-height: .58rem !important;
  }
}