/* ── Reset / base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #222;
  background: #fff;
  line-height: 1.5;
}
/* Oswald + Open Sans were both already in use on the original GoDaddy site
   (see the @font-face list in its page source) — reused here for continuity
   with the existing brand rather than introducing new, unrelated fonts. */
h1, h2, h3, h4, .button, .site-nav a, .site-header__phone {
  font-family: 'Oswald', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
/* #0aa2c0 (the original teal) only measured 3.02:1 on white — fails WCAG AA
   (needs 4.5:1 for normal text). Darkened to #087f96 (4.68:1) instead. */
a { color: #087f96; }
a:focus, button:focus, input:focus, textarea:focus, summary:focus {
  outline: 3px solid #ff7a00;
  outline-offset: 2px;
}

.sr-only, .visually-hidden-heading {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #d6336c;
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ── Header / nav ─────────────────────────────────────────────────────────── */
.site-header {
  border-bottom: 4px solid #ff7a00;
}
.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
}
.site-header__brand img { height: 48px; width: auto; }
.site-header__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 1rem 0.5rem;
}
.site-header__phone {
  font-weight: bold;
  color: #d6336c;
  text-decoration: none;
  white-space: nowrap;
  font-size: 1.05rem;
}
.site-header__translate {
  display: flex;
  align-items: center;
  min-height: 30px; /* reserves space so the header doesn't jump once Google's script finishes loading */
}
.site-header__menu-toggle {
  display: none;
  background: none;
  border: 2px solid #222;
  border-radius: 4px;
  font-size: 1.25rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

/* ── Google Translate widget reset ────────────────────────────────────────── */
/* Google's script injects its own markup/iframes with inline styles that
   otherwise look out of place in a custom header and can shove the whole
   page down. This resets it to sit cleanly and inline instead. The required
   "Powered by Google" attribution is kept visible (per Google's terms) but
   shrunk and forced onto one line with the dropdown rather than stacking. */
/* Google's translate widget uses an internal, auto-generated class for the
   banner iframe itself (e.g. "VIpgJd-ZVi9od-ORHb-OEVmcd") that changes
   between script versions/deployments — verified via live testing that
   goog-te-banner-frame no longer matches anything in the current widget.
   "skiptranslate" is the one stable class Google puts on all of its own
   injected iframes, so target that instead; it doesn't touch the actual
   language <select>, which isn't an iframe. */
iframe.skiptranslate { display: none !important; }
body { top: 0 !important; position: static !important; }

#google_translate_element { line-height: 1; }
#google_translate_element .goog-te-gadget {
  display: flex !important;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.7rem;
  color: #888;
  white-space: nowrap;
}
#google_translate_element .goog-te-gadget img { height: 14px; width: auto; }
#google_translate_element .goog-te-gadget a { color: #888; }
#google_translate_element .goog-te-gadget .goog-te-combo {
  order: -1; /* dropdown first, attribution text after */
  margin: 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid #999;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #222;
  max-width: 130px;
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  padding: 0.5rem 1rem 1rem;
}
.site-nav a {
  text-decoration: none;
  color: #222;
  font-weight: 600;
}
.site-nav a[aria-current="page"] {
  color: #d6336c;
  text-decoration: underline;
}

@media (max-width: 720px) {
  .site-header__menu-toggle { display: inline-block; }
  .site-nav { display: none; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: center; gap: 0.5rem; }
}

/* ── Mobile-only sticky "Call" + "Request a Ride" buttons ────────────────────
   Shown on every page except the ones that already lead with the form itself
   (home, /request-a-ride/) — see partials/mobile-cta.php for that logic. */
.mobile-cta { display: none; }
@media (max-width: 720px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
  }
  .mobile-cta__button {
    flex: 1 1 50%;
    text-align: center;
    padding: 0.9rem 0.5rem;
    padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    font-family: 'Oswald', 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
  }
  /* Was #222, same as the footer background right behind it — invisible seam.
     Teal is already used elsewhere on the site (links, outlined buttons). */
  .mobile-cta__button--call { background: #087f96; color: #fff; }
  .mobile-cta__button--call:hover, .mobile-cta__button--call:focus { background: #066274; }
  .mobile-cta__button--request { background: #ff7a00; color: #222; }
  .mobile-cta__button--request:hover, .mobile-cta__button--request:focus { background: #d6336c; color: #fff; }
  /* Leaves room so the fixed buttons never cover footer content/copy. */
  body { padding-bottom: 64px; }
}

/* Extra headroom on small phones (~360px and under) so the logo + phone number
   never crowd the viewport edge — "zero clipping" is a hard requirement. */
@media (max-width: 400px) {
  .site-header__brand img { height: 34px; }
  .site-header__phone { font-size: 0.95rem; }
  .site-header__top { padding: 0.5rem 0.75rem; gap: 0.5rem; }
  .ride-form, form { padding: 0.75rem; }
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero { position: relative; }
.hero__image { width: 100%; object-fit: cover; max-height: 480px; }
.hero__text {
  padding: 1.5rem 1rem;
  text-align: center;
}
.hero__text h1 { font-size: 2rem; margin: 0 0 0.5rem; color: #d6336c; }
.hero__phone a { font-weight: bold; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section, main > h1, main > p, main > ul, main > ol, main > figure, .order-option, .faq-item {
  padding: 0 1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.section { padding-top: 1.5rem; padding-bottom: 1.5rem; }
/* Marker sits flush with the same left edge as paragraph text above/below it,
   instead of the default "outside" position hanging further left. */
main > ul, main > ol { list-style-position: inside; }

.order-methods, .beach-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 0.75rem;
  padding: 0;
}
.order-methods a, .beach-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 160px;
  max-width: 220px;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 2px solid #087f96;
  border-radius: 6px;
  text-decoration: none;
  color: #087f96;
  font-weight: 600;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.ride-form, form {
  max-width: 600px;
  margin: 1rem auto;
  padding: 1rem;
}
.form-row { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.form-row label { font-weight: 600; }
/* :not([type=radio]):not([type=checkbox]) is deliberate — the fieldset below
   still carries the shared .form-row class, so without this exclusion its
   radio inputs also got width:100%, stretching their layout box across the
   full row and visually separating the circle from its label text (they'd
   render at opposite edges). That was the real cause of the radio/label
   separation bug, not a flex quirk. */
.form-row input:not([type="radio"]):not([type="checkbox"]), .form-row textarea {
  width: 100%; /* explicit, rather than relying on flex-stretch alone, to rule out any overflow on narrow phones */
  padding: 0.6rem;
  border: 2px solid #999;
  border-radius: 4px;
  font-size: 1rem;
}
fieldset.radio-fieldset {
  display: block;
  border: 2px solid #999;
  border-radius: 4px;
  padding: 0.75rem;
}
.radio-option {
  display: block;
  font-weight: normal;
  margin: 0.5rem 0;
}
.radio-option input { width: auto; margin-right: 0.5rem; vertical-align: middle; }
.form-row--honeypot { display: none; }

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
/* White text on #ff7a00 only measures 2.61:1 (fails WCAG AA, needs 4.5:1) —
   dark text on the same orange measures 6.09:1, so the orange bg is kept
   (matches the brand) but the text color switches per state. */
.button--primary { background: #ff7a00; color: #222; }
.button--primary:hover, .button--primary:focus { background: #d6336c; color: #fff; }

.form-success { color: #146c2e; font-weight: bold; }
.legal-title { text-align: center; }
.legal-heading { text-align: center; }
.form-legal { font-size: 0.85rem; color: #666; margin: 0.75rem 0; }
.consent-checkbox {
  display: block;
  font-weight: normal;
  font-size: 0.85rem;
  color: #666;
  margin: 0.75rem 0;
}
.consent-checkbox input {
  width: auto;
  margin-right: 0.5rem;
  vertical-align: top;
  position: relative;
  top: 0.15rem;
}

/* ── App ordering page ───────────────────────────────────────────────────── */
.order-option { margin-bottom: 2rem; }
.order-option__cta { margin-top: 0.75rem; }
.app-badges { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.app-badges img { height: 50px; width: auto; }
.app-badges--footer img { height: 36px; }
.fbr-note { color: #666; font-size: 0.9rem; }

.photo-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 900px;
}
.photo-pair .content-figure { flex: 1 1 320px; margin: 0; padding: 0; }

.content-figure {
  max-width: 800px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}
.content-figure figcaption { color: #666; font-size: 0.85rem; margin-top: 0.25rem; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid #ddd;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.faq-item summary { cursor: pointer; font-weight: 600; }

/* ── QR code block (homepage "three ways" section + footer) ─────────────────── */
.qr-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.qr-block a { flex-shrink: 0; display: block; }
.qr-block img {
  width: 100px;
  height: 100px;
  background: #fff;
  padding: 6px;
  border-radius: 6px;
}
.qr-block p { margin: 0; }
.site-footer__qr { margin-top: 1.5rem; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  background: #222;
  color: #eee;
  padding: 2rem 1rem;
  margin-top: 2rem;
}
.site-footer a { color: #ffd400; }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer__heading { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.site-footer__legal { margin-top: 1rem; font-size: 0.85rem; }

/* ── App-wrapper mode ─────────────────────────────────────────────────────── */
/* Server-side (header.php) already omits header/nav/Translate entirely when
   $isApp is true — these rules are a defensive backstop only. */
.app-shell .site-header,
.app-shell .site-nav,
.app-shell #google_translate_element {
  display: none !important;
}