/* ==========================================================================
   Mobile / responsive layer.

   Loaded AFTER each page's own <style> block so it wins on the cascade
   without needing !important. Desktop rendering above 900px is untouched.

   The five pages each carry their own copy of the nav CSS and those copies
   have drifted (see README-css.md), so the mobile nav is defined once here
   rather than five times.
   ========================================================================== */

/* --- Cross-browser / iOS baseline ---------------------------------------- */

html {
  /* Stop iOS Safari inflating text when the phone is rotated. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Safety net: nothing should stick out sideways, but if a future element
     does, the page still must not scroll horizontally on a phone. */
  overflow-x: hidden;
}

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

/* iOS Safari zooms the whole page when a focused field is under 16px. */
input,
select,
textarea {
  font-size: max(16px, 1rem);
}

/* --- Hamburger button ----------------------------------------------------
   Hidden on desktop; the mobile block below reveals it. */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }

/* Morph into an X while the drawer is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobile layout -------------------------------------------------------
   900px, not 768px: the six-item nav needs ~780px on its own, so it is
   already overflowing well before tablet width. */

@media (max-width: 900px) {

  .nav-toggle {
    display: inline-flex;
  }

  .header {
    position: relative;
    /* Respect the notch / rounded corners on iPhone in landscape. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .nav-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
  }

  /* The wordmark wrapped onto four lines and pushed the header to ~200px. */
  .logo {
    gap: 0.6rem;
    font-size: 1.02rem;
    line-height: 1.15;
    min-width: 0;
    flex: 1 1 auto;
  }

  .logo span {
    display: block;
    min-width: 0;
  }

  .logo-image {
    height: 38px;
    flex: 0 0 auto;
  }

  /* Nav becomes a drawer that slides down under the header. */
  nav {
    position: static;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    background: var(--bg-white, #fff);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* Collapsed by default. visibility keeps links out of the tab order. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 999;
  }

  .nav-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-menu li {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .nav-menu li:last-child {
    border-bottom: 0;
  }

  /* 48px rows: comfortably above the 44px touch guideline. */
  .nav-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.7rem 1.25rem;
    font-size: 1rem;
    width: 100%;
  }

  /* --- Readability + touch targets on the rest of the page --------------- */

  main a,
  footer a,
  .btn {
    -webkit-tap-highlight-color: rgba(184, 147, 95, 0.15);
  }

  .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Nothing on a phone should render below 13px. */
  body {
    font-size: max(1rem, 16px);
  }

  .footer a,
  .footer p,
  .footer li {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  /* 26 slideshow dots is ~780px of indicators; the row ran off both edges.
     The prev/next arrows remain, so nothing becomes unreachable. */
  .hero-dots {
    display: none;
  }

  /* iOS Safari's address bar makes 100vh taller than the visible area, so a
     100vh hero gets its bottom cropped. dvh tracks the real viewport. */
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* `section { ... }` (specificity 0,0,1) loses to the pages' own
     `.about-section` / `.gallery-section` rules (0,1,0), so the 3rem desktop
     side padding survived and squeezed content into 279px of a 375px screen --
     26% of the display wasted. `section[class]` is 0,1,1 and wins. */
  section[class] {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }

  /* 8rem of top padding is a desktop proportion; on a phone it reads as a
     blank screen before any content appears. */
  section[class] {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .hero {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* --- Fixed image heights ------------------------------------------------
     These are all landscape photos pinned to a tall fixed height with
     object-fit: cover, so on a narrow screen they were cropped into portrait
     slivers -- the 1036x812 headshot was rendering as 279x600. Letting height
     follow the aspect ratio shows the actual photograph. */

  .about-image {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* The offset gold shadow would otherwise push past the viewport edge. */
    box-shadow: 10px 10px 0 var(--accent-gold);
  }

  .gallery-item {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* The hero image on a listing page: a 1260x756 photo pinned to 400px tall
     was rendering as a 311x400 portrait crop. */
  .main-image {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .gallery-item img {
    height: 100%;
  }

  /* Card imagery on the listing pages, same problem. */
  .home-media,
  .home-media img {
    height: auto;
  }

  .home-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .home-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Long headings were breaking awkwardly in the narrow column. */
  h1, h2, h3 {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* --- Small phones (iPhone SE and similar) -------------------------------- */

@media (max-width: 380px) {
  .logo {
    font-size: 0.92rem;
  }

  .logo-image {
    height: 34px;
  }
}

/* --- Respect reduced-motion preferences ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nav-menu,
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    transition: none;
  }
}