/* Mobile navigation dropdown: the compiled Tailwind bundle only contains
   utility classes that literally appear in the page markup, so the open
   state for the mobile menu (added/removed by js/site.js) is hand-written
   here rather than as invented Tailwind classes. */
@media (max-width: 1023.98px) {
  header nav.nav-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #071c33;
    padding: 1.25rem 1.5rem;
  }
  header nav.nav-open a {
    padding: 0.75rem 0;
    width: 100%;
  }
}

/* Solid/white header state (scrolled past the hero on the homepage, or
   any page without a hero, where js/site.js adds "bg-white" in place of
   "bg-transparent"): the logo needs to drop its invert-to-white filter and
   the nav text needs to switch from white to navy so both stay readable
   against the white bar. Reuses the same --color-navy/--color-ocean tokens
   the compiled Tailwind bundle defines on :root. The "Get In Touch" button
   lives outside <nav>, so none of this touches it. */
header.bg-white {
  box-shadow: 0 1px 20px rgba(11, 45, 107, 0.08);
}
header.bg-white img {
  filter: none;
}
header.bg-white nav a {
  color: var(--color-navy);
}
header.bg-white nav a:hover {
  color: var(--color-ocean);
}
header.bg-white button[aria-expanded] {
  color: var(--color-navy);
}
/* ...except inside the open mobile dropdown, which keeps its own dark
   background (above) regardless of header state, so its links need to
   stay light for contrast against that dark panel. */
header.bg-white nav.nav-open a {
  color: #fff;
}
header.bg-white nav.nav-open a:hover {
  color: var(--color-maritime-light);
}

/* Contact form: there was no form anywhere in the original design, so
   none of the input/textarea/focus states below exist as compiled
   Tailwind utilities anywhere in the bundle — hand-written here rather
   than guessed at with classes that would silently no-op. */
.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-heading);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 15px;
  color: var(--color-heading);
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--color-body);
  opacity: 0.55;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-ocean);
  box-shadow: 0 0 0 3px rgba(13, 93, 170, 0.15);
}
.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}
.contact-form .form-status[data-state="success"] {
  color: var(--color-ocean);
}
.contact-form .form-status[data-state="error"] {
  color: #b42318;
}

/* Google Map embed: a fixed wide aspect ratio with rounded corners and a
   shadow matching the site's card treatment (aspect-ratio value has no
   equivalent compiled Tailwind class since nothing else used 21/9). */
.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(11, 45, 107, 0.35);
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 639.98px) {
  .map-frame {
    aspect-ratio: 4 / 5;
  }
}