/* Kūmaumau site enhancements — accessibility + mobile polish.
   Loaded after the Webflow export stylesheets; new file so immutable caches stay valid. */

/* Visible keyboard focus states (Webflow export ships none) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #d3bd70;
  outline-offset: 2px;
}

/* Never let long headlines overflow narrow viewports */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

body {
  overflow-x: hidden;
}

/* Comfortable ≥44px tap targets for footer links on touch devices */
.footer-simple-link {
  display: inline-block;
  padding-top: 12px;
  padding-bottom: 12px;
}

.footer-contact-link {
  min-height: 44px;
  align-items: center;
}

/* Spam honeypot field on the contact form */
.fs-honey {
  display: none !important;
}

/* Respect reduced-motion: freeze the hero typewriter on a complete word */
@media (prefers-reduced-motion: reduce) {
  .typewriter::before {
    animation: none;
    content: "Tradition";
  }
  .typewriter::after {
    animation: none;
    border-right: 0;
  }
}

/* Home-page nav cards: serve the card photos from this site instead of the
   old Webflow CDN (cdn.prod.website-files.com). Byte-identical local copies
   (md5-verified 2026-07-01) so nothing changes visually, but the home page
   no longer breaks if the legacy Webflow account ever goes away. */
.page-item {
  background-image: linear-gradient(#20325e66, #20325e66), url("/images/unnamed-3.jpg");
}

.page-item.item1 {
  background-image: linear-gradient(#20325e66, #20325e66), url("/images/unnamed-1.jpg");
}

.page-item.item2 {
  background-image: linear-gradient(#20325e66, #20325e66), url("/images/unnamed-2.jpg");
}

/* Below the desktop breakpoint the three 300px nav cards cannot fit on one
   row; flex-shrink squeezed them into slivers and pushed the row past the
   viewport edges (clipped 16px each side at ~480-640px). Let the row wrap
   instead so each card keeps its designed 300x300 size. Desktop unchanged. */
@media (max-width: 991px) {
  .section {
    flex-wrap: wrap;
  }
}