/*
Theme Name: Stratus Medical
Template: generatepress
Author: Stratus Medical
Version: 1.4
*/

/* Styling lives inline in each template. Only global resets belong here. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

/* GeneratePress chrome we replace with our own nav/footer */
.site-header, .main-navigation, .site-footer, .site-info { display: none; }
.site-content, .content-area, .site-main { margin: 0; padding: 0; max-width: none; }

/* Kill the dark page frame: the parent theme paints a body background and
   insets/borders the content wrapper. Our pages own their own backgrounds. */
html, body, #page, .site, .site-content, .content-area, .site-main,
#sm-page, .entry-content, .page-content {
  background: #FFFFFF;
  border: 0;
  outline: 0;
  box-shadow: none;
  max-width: none;
  width: auto;
  padding: 0;
  margin: 0;
}
#sm-page { display: block; }
/* GeneratePress separating-containers adds vertical gutters around content */
.separate-containers .site-main,
.separate-containers .inside-article,
.separate-containers .page-header { margin: 0; padding: 0; background: none; }
.one-container .site-content { padding: 0; }

/* Last resort on the dark frame: whatever paints it, this outranks it.
   Nothing in our design relies on a body-level background. */
html, body { background-color: #FFFFFF !important; }
#page, .site, #content, .site-content, .content-area, .site-main, #sm-page {
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/* TranslatePress ships its own floating switcher; ours lives in the utility bar. */
#trp-floater-ls { display: none !important; }

/* Reveal-on-scroll (driven by js/stratus.js) */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
[data-reveal].sm-in { opacity: 1; transform: none; }

/* Phone nav: links become one thumb-scrollable row */
[data-navrow] { height: auto !important; min-height: 52px; }
@media (max-width: 760px) {
  [data-navrow] { flex-wrap: wrap !important; gap: 10px 14px !important; }
  [data-navlinks] { order: 3; width: 100%; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 22px !important; padding-bottom: 2px; }
  [data-navlinks]::-webkit-scrollbar { display: none; }
  [data-navlinks] a { flex: 0 0 auto; white-space: nowrap; padding: 6px 0; }
  [data-utilrow] { justify-content: flex-start !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 16px !important; }
  [data-utilrow]::-webkit-scrollbar { display: none; }
  [data-utilrow] > * { flex: 0 0 auto; }
}

/* Fixed header: nothing outside our own markup may draw a line under it.
   (The nav's own hairline is applied by js/stratus.js on scroll.) */
[data-chrome] { border: 0 !important; box-shadow: none !important; }
[data-chrome] > div { border-top: 0 !important; }
[data-utilbar] { border-left: 0 !important; border-right: 0 !important; }

/* Some GeneratePress setups outline the content wrapper; that line reads as a
   dark bar directly beneath a fixed header. */
#content, #page, .site-content, .inside-article, .entry-content {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* backdrop-filter needs a compositing context to blur reliably when fixed. */
[data-chrome] { will-change: backdrop-filter; isolation: isolate; }

/* ===========================================================
   Phone hardening (<= 760px)
   =========================================================== */

/* 1. Opaque header. iOS Safari drops backdrop-filter on a fixed, transformed
      ancestor, which left page content legible straight through the nav. */
@media (max-width: 760px) {
  [data-utilbar] { background: #EDF1F4 !important; }
  [data-nav]     { background: #FFFFFF !important; box-shadow: 0 1px 0 rgba(42,48,54,0.10); }
}
/* Same guard on any browser that cannot blur at all. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-utilbar] { background: #EDF1F4 !important; }
  [data-nav]     { background: #FFFFFF !important; }
}

@media (max-width: 760px) {
  /* 2. Nothing may exceed the viewport. Fixed px widths and heights get baked
        into inline styles by the block editor's resize handles; on a phone
        they cause horizontal overflow and clipped text. */
  #sm-page h1, #sm-page h2, #sm-page h3, #sm-page p,
  [data-herocopy], [data-herocopy] > * {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
  [data-herocopy] { max-width: 100% !important; }

  /* 3. Hero CTAs stack instead of running off the right edge. */
  [data-herobtns] { flex-wrap: wrap !important; gap: 8px !important; }
  [data-herobtns] > a { flex: 1 1 auto; justify-content: center; }

  /* 4. Nav collapses to a hamburger; the inline link row is replaced by the
        drop-down panel below the bar. */
  [data-navlinks] { display: none !important; }
  [data-navtoggle] { display: flex !important; }
  [data-navrow] { padding-left: 16px !important; padding-right: 16px !important; flex-wrap: nowrap !important; }
  [data-navpanel].sm-open { display: block !important; }

  /* Hamburger morphs to an X while the panel is open. */
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(2) { opacity: 0; }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* 5. Horizontal card rails keep their scroll but reveal the next card. */
  [data-stagger] > [style*="flex:0 0 300px"],
  [data-stagger] > [style*="flex: 0 0 300px"] { flex: 0 0 82vw !important; }
}

/* 6. Belt and braces against a page wider than the screen. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Parent-theme wrappers occasionally paint side borders/outlines that read as
   dark vertical bars beside our fixed header. Nothing outside our markup draws. */
#page, .site, #content, .site-content, .content-area, .site-main,
.inside-article, .entry-content, .page-content, #sm-page {
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* The utility bar must collapse to nothing, hairline included. */
[data-utilbar] { min-height: 0 !important; box-sizing: border-box; }

/* Frosted header, without the edge fringe.
   Safari's backdrop-filter paints a dark band where the blurred element's edge
   is. Blurring [data-utilbar] and [data-nav] directly puts such an edge at both
   viewport sides (bars) and, once the utility bar collapses, along the nav's
   top (sliver). Bleeding them sideways failed because [data-chrome] clipped it.

   Instead the blur lives on a pseudo-element behind the two tiers, extended 60px
   past the top and both sides so every fringe-able edge is off-screen. The tiers
   keep their translucent tints and stop blurring. [data-chrome]'s own box is
   untouched — nav.php sets its offsets inline and js/stratus.js measures its
   height for the content spacer, so changing its padding/position breaks both. */
[data-utilbar], [data-nav] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  z-index: 1;
}
[data-chrome] { will-change: auto !important; overflow: visible !important; }
[data-chrome]::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  right: -60px;
  bottom: 0;
  backdrop-filter: saturate(1.7) blur(20px);
  -webkit-backdrop-filter: saturate(1.7) blur(20px);
  pointer-events: none;
  z-index: 0;
}

/* Header search: the phone uses the field inside the drop-down panel instead. */
@media (max-width: 760px) { [data-search] { display: none !important; } }

/* ===========================================================
   Tablet (<= 1024px): the inline link row plus logo, search and
   CTA no longer fit on one line, so the hamburger takes over here
   too — not just on phones.
   =========================================================== */
@media (max-width: 1024px) {
  [data-navlinks]  { display: none !important; }
  [data-navtoggle] { display: flex !important; }
  [data-navrow]    { flex-wrap: nowrap !important; }
  [data-navpanel].sm-open { display: block !important; }
  [data-search]    { display: none !important; }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(2) { opacity: 0; }
  [data-navtoggle][aria-expanded="true"] [data-navtoggle-bars] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* GeneratePress lays its content inside a width-capped .grid-container and
   paints the area outside it. That inset is what shows as dark vertical bars
   down each side of a full-bleed page. Our templates are full-bleed by design,
   so no wrapper may cap width or paint a frame. */
.grid-container, .site.grid-container, .container, .wp-site-blocks,
#page, #main, #primary, #content, .site, .site-content, .content-area, .site-main {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Whatever the parent theme paints behind that inset, it is not ours to show. */
html, body { background: #FFFFFF !important; background-image: none !important; }

/* Our page wrapper paints its own white. Earlier rules made every wrapper
   transparent, which is precisely what let a dark ancestor show through at the
   edges. #sm-page is the last layer before our content — it is never see-through. */
#sm-page {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative;
  z-index: 1;
}

/* Full-viewport white underlay, behind everything, pinned to the viewport so no
   ancestor's width cap or inset can expose a dark edge beside it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  z-index: -1;
  pointer-events: none;
}