@charset "utf-8";

:root {
  --nightshift-safe-top: env(safe-area-inset-top, 0px);
  --nightshift-safe-right: env(safe-area-inset-right, 0px);
  --nightshift-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nightshift-safe-left: env(safe-area-inset-left, 0px);
}

/* viewport-fit=cover lets Safari and installed Home Screen apps use the whole
   display. Keep interactive content clear of the Dynamic Island/notch and the
   Home indicator, including landscape where the left/right insets matter. */
@media (max-width: 880px) {
  body {
    padding-left: var(--nightshift-safe-left);
    padding-right: var(--nightshift-safe-right);
  }

  header {
    padding-left: var(--nightshift-safe-left) !important;
    padding-right: var(--nightshift-safe-right) !important;
  }

  footer {
    padding-bottom: calc(48px + var(--nightshift-safe-bottom));
  }

  .skip-link:focus {
    top: calc(12px + var(--nightshift-safe-top));
  }
}

/* Mobile contact CTA: the contact page's inline mobile treatment darkens the
   primary button background, while the shared button style keeps dark text.
   Restore the intended high-contrast lavender CTA so the phone number stays
   readable in Safari and installed iOS web-app mode. */
@media (max-width: 760px) {
  #enquire .contact-primary a.contact-call {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background: linear-gradient(
      180deg,
      #d8b3ff 0%,
      #b78cff 55%,
      #a574ff 100%
    ) !important;
    color: #12081f !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.42),
      0 8px 22px rgba(126, 75, 210, 0.24) !important;
    -webkit-text-fill-color: #12081f;
  }

  #enquire .contact-primary a.contact-call .contact-label {
    color: rgba(18, 8, 31, 0.72) !important;
    -webkit-text-fill-color: rgba(18, 8, 31, 0.72);
  }
}

/* The packaging step adds .web-app before styles load whenever Safari is in
   Home Screen/standalone mode. navigator.standalone is retained as a fallback
   for older iOS versions where display-mode matching has historically varied. */
html.web-app,
html.web-app body {
  min-height: 100%;
  background-color: #150f24;
  color-scheme: dark;
}

html.web-app body {
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

/* The normal mobile homepage deliberately locks its hero to window.innerHeight
   so Safari's collapsing browser chrome cannot resize the artwork mid-scroll.
   In an installed iOS web app there is no collapsing toolbar, but WebKit's
   innerHeight starts below the top safe area even though viewport-fit=cover
   paints the page behind it. Add that missing inset back so the hero ends at
   the physical bottom of the screen rather than revealing the next section.
   The scroll cue remains positioned from the hero's bottom safe area. */
@media (max-width: 760px) {
  html.web-app #home.hero {
    min-height: calc(
      var(--mobile-hero-height, 100dvh) + var(--nightshift-safe-top)
    ) !important;
  }
}

@media (max-width: 880px) {
  /* Standalone pages use a solid surface once scrolling starts or the menu is
     open. This keeps text legible and avoids WebKit compositor seams. */
  html.web-app header.is-scrolled,
  html.web-app body.nav-open header {
    background: #150f24 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* At the top of the homepage, let the hero artwork continue underneath the
     safe area/header instead of creating a separate black slab. The dark-to-
     transparent fade keeps the status bar, logo and menu readable while making
     the installed app feel like one full-screen surface. */
  html.web-app body:has(.hero) header:not(.is-scrolled) {
    background: linear-gradient(
      180deg,
      rgba(9, 7, 17, 0.98) 0%,
      rgba(9, 7, 17, 0.9) 44%,
      rgba(9, 7, 17, 0.56) 72%,
      rgba(9, 7, 17, 0.12) 92%,
      transparent 100%
    ) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* Interior pages retain a solid top surface because their page heroes are
     shorter content sections rather than the full-screen photographic hero. */
  html.web-app body:not(:has(.hero)) header:not(.is-scrolled) {
    background: #150f24 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  html.web-app header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    pointer-events: none;
    background: #150f24 !important;
  }

  html.web-app body:has(.hero) header:not(.is-scrolled)::after {
    background: transparent !important;
  }

  html.web-app header .nav {
    max-height: calc(
      100dvh - var(--nightshift-header-mobile, 60px) -
        var(--nightshift-safe-top) - var(--nightshift-safe-bottom) - 28px
    ) !important;
    padding-bottom: max(8px, var(--nightshift-safe-bottom)) !important;
  }

  html.web-app .mobile-scroll-cue {
    bottom: calc(18px + var(--nightshift-safe-bottom));
  }
}

/* CSS-only fallback if the early standalone class cannot be applied. Current
   iOS Safari supports :has(), so the homepage can still blend into its hero. */
@media (max-width: 880px) and (display-mode: standalone) {
  header.is-scrolled,
  body.nav-open header,
  body:not(:has(.hero)) header:not(.is-scrolled) {
    background: #150f24 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  body:has(.hero) header:not(.is-scrolled) {
    background: linear-gradient(
      180deg,
      rgba(9, 7, 17, 0.98) 0%,
      rgba(9, 7, 17, 0.9) 44%,
      rgba(9, 7, 17, 0.56) 72%,
      rgba(9, 7, 17, 0.12) 92%,
      transparent 100%
    ) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    pointer-events: none;
    background: #150f24 !important;
  }

  body:has(.hero) header:not(.is-scrolled)::after {
    background: transparent !important;
  }
}

@media (max-width: 760px) and (display-mode: standalone) {
  #home.hero {
    min-height: calc(
      var(--mobile-hero-height, 100dvh) + var(--nightshift-safe-top)
    ) !important;
  }
}