/* Front-end QA2 — responsive and accessibility hardening (2026-08-14).
   Loaded after page-specific styles so these are deliberate site-wide final guards. */

/* Keyboard focus visibility. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 3px;
}

/* Some older page-specific rules deliberately removed outlines. Restore a
   consistent keyboard indicator as the final cascade layer. */
.main-nav a:focus-visible,
.nav-toggle:focus-visible,
.btn:focus-visible,
.text-link:focus-visible,
.footer-option-b a:focus-visible,
.footer-option-b button:focus-visible,
.legal-toc a:focus-visible,
.legal-block a:focus-visible,
.legal-callout a:focus-visible,
.return-to-top:focus-visible,
.section-scroll-next:focus-visible,
.cookie-choice-button:focus-visible,
.cookie-modal__close:focus-visible,
.cookie-settings-inline:focus-visible {
  outline: 3px solid var(--gold-light) !important;
  outline-offset: 3px !important;
}

/* Robust wrapping for long addresses, URLs and contact details. */
main,
footer,
.panel,
.info-card,
.event-card,
.collab-card,
.legal-article,
.booking-form-card,
.contact-enquiry-form {
  min-width: 0;
}

p,
li,
dd,
figcaption,
.footer-b-contact-pill,
.footer-b-links,
.legal-block,
.form-status {
  overflow-wrap: break-word;
}

.legal-block a,
.legal-contact-card a,
.footer-b-contact-pill--email,
.footer-b-contact-pill--web {
  overflow-wrap: anywhere;
}

iframe,
video,
svg,
canvas {
  max-width: 100%;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.btn {
  max-width: 100%;
  min-height: 48px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

/* Header/navigation: switch to the compact menu before the desktop navigation
   becomes cramped. The previous 900px breakpoint overflowed around 1024px. */
@media (max-width: 1080px) {
  .header-inner {
    width: min(var(--container), calc(100% - 32px));
    min-height: 86px !important;
    grid-template-columns: minmax(0, 240px) 48px !important;
    justify-content: space-between;
    gap: 18px !important;
  }

  .logo-link {
    width: min(240px, 100%) !important;
    min-width: 0;
  }

  .nav-toggle {
    display: inline-grid !important;
    grid-column: 2;
    place-items: center;
    justify-self: end;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 10px;
    cursor: pointer;
  }

  .main-nav {
    position: absolute !important;
    z-index: 60;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px max(20px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(0,0,0,.985) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.48);
    white-space: normal !important;
  }

  body.nav-open .main-nav {
    display: flex !important;
  }

  .main-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    width: 100%;
    padding: 12px 4px !important;
    font-size: .9rem !important;
    line-height: 1.25 !important;
    white-space: normal;
  }

  .main-nav a::after {
    bottom: 5px;
  }
}

@media (min-width: 1081px) and (max-width: 1240px) {
  .header-inner {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  .logo-link { width: 220px !important; }
  .main-nav {
    justify-content: flex-end;
    gap: 10px !important;
  }
  .main-nav a {
    font-size: .70rem !important;
    letter-spacing: .055em !important;
  }
  .nav-toggle { display: none !important; }
}

@media (max-width: 640px) {
  .container,
  .header-inner {
    width: min(100% - 26px, var(--container)) !important;
  }

  .header-inner {
    grid-template-columns: minmax(0, 200px) 46px !important;
    gap: 12px !important;
  }

  .logo-link { width: min(200px, 100%) !important; }

  .main-nav {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }

  .section,
  .section-tight {
    scroll-margin-top: 96px;
  }

  .footer-option-b .footer-b-nav-toggle,
  .footer-option-b .footer-b-contact-pill,
  .footer-option-b .footer-b-social {
    min-height: 44px;
  }

  .footer-option-b .footer-b-social {
    width: 44px;
    height: 44px;
  }

  .return-to-top,
  .weddings-page .section-scroll-next,
  .occasions-page .section-scroll-next,
  .collaborations-page .section-scroll-next,
  .reviews-page .section-scroll-next,
  .about-page .section-scroll-next,
  .thov-page .section-scroll-next {
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 360px) {
  .header-inner {
    width: calc(100% - 22px) !important;
    grid-template-columns: minmax(0, 178px) 46px !important;
    gap: 10px !important;
  }
  .logo-link { width: min(178px, 100%) !important; }
  .main-nav a { font-size: .86rem !important; }
}

/* Fix genuine 320px min-content overflow in the collaboration project cards. */
.collaborations-page .collab-project-feature,
.collaborations-page .collab-project-images,
.collaborations-page .collab-project-copy,
.collaborations-page .collab-project-single-image {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 700px) {
  .collaborations-page .collab-project-images {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .collaborations-page .collab-project-images img,
  .collaborations-page .collab-project-single-image img {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .collaborations-page .collab-project-images {
    grid-template-columns: 1fr !important;
  }
  .collaborations-page .collab-project-images img,
  .collaborations-page .collab-project-single-image img {
    height: auto !important;
    max-height: 260px;
    object-fit: contain;
  }
}

/* Scrollable legal tables are intentional on narrow phones; make the scroll
   region keyboard-focusable and visibly discoverable. */
.legal-table-wrap[tabindex="0"]:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .legal-layout {
    min-width: 0;
  }
  .legal-table-wrap {
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) #090806;
  }
}

/* Native form usability on small touch devices and iOS: keep fields at a
   readable 16px and status messaging visually clear. */
.contact-page .contact-field input,
.contact-page .contact-field select,
.contact-page .contact-field textarea,
.booking-page .booking-field input,
.booking-page .booking-field select,
.booking-page .booking-field textarea {
  font-size: 1rem;
}

.form-status[role="alert"] {
  border-color: rgba(239,107,99,.52);
}

[aria-invalid="true"] {
  border-color: #ef8f87 !important;
  box-shadow: 0 0 0 3px rgba(239,107,99,.14) !important;
}

@media (max-width: 480px) {
  .contact-page .contact-enquiry-form,
  .booking-page .booking-form-card__body,
  .booking-page .booking-form-card__head {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .form-turnstile-block {
    padding-left: 12px;
    padding-right: 12px;
  }

  .contact-page .contact-date-row {
    grid-template-columns: 1fr !important;
    align-items: stretch;
  }

  .contact-page .contact-check {
    min-height: 48px;
  }
}

/* Honour reduced-motion preferences across the entire public site, including
   custom arrows and JavaScript-assisted anchor scrolling. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}