/* ==========================================================================
   McORven — responsive refinements

   The core responsive system is Tailwind's breakpoint utilities compiled into
   main.css (sm 640 / md 768 / lg 1024 / xl 1280). This file holds only the
   adjustments that cannot be expressed as utilities on the markup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Safe-area insets — notched phones, with the fixed header and the floating
   contact button both sitting against a screen edge.
   -------------------------------------------------------------------------- */

@supports (padding: env(safe-area-inset-left)) {
  /* Phone widths only. Above md the header uses Tailwind's md:px-6 / lg:px-10,
     which must not be overridden — and notches only occur on phones anyway. */
  @media (max-width: 767px) {
    [data-header] > div {
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
    }
  }

  .md\:hidden.fixed.bottom-5 {
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    right: max(1rem, env(safe-area-inset-right));
  }
}

/* --------------------------------------------------------------------------
   Mobile menu — cap the panel height so a long nav stays reachable on short
   viewports (the source version could overflow past the fold).
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  [data-mobile-menu] {
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   Hero — the 620px/780px fixed heights come from the source design. On very
   short landscape phones, let the hero grow to the viewport instead of pushing
   the CTAs off screen.
   -------------------------------------------------------------------------- */

@media (max-height: 560px) and (orientation: landscape) {
  #hero {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 6rem;
    padding-bottom: 4rem;
  }
}

/* --------------------------------------------------------------------------
   Process — the connecting line is drawn only at xl, where all seven steps sit
   on one row. Below that the steps stack, so the line must not appear.
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
  #process .absolute.top-9 {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Contact map — keep a usable height when the two-column grid collapses.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  #contact iframe {
    min-height: 340px;
  }
}

/* --------------------------------------------------------------------------
   Long CJK and accented headings must never overflow their container.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Never let the page scroll sideways.

   The source design has several decorative absolutely-positioned elements that
   deliberately sit outside their container (-inset-4 on the About frame,
   -top-10 -right-10 on the Services CTA blob). At phone widths they push the
   document ~8px wider than the viewport. `clip` removes the sideways scroll
   without turning <html> into a scroll container, so the fixed header, smooth
   anchor scrolling and scroll-padding-top all keep working.
   -------------------------------------------------------------------------- */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}