/* Subtle site-wide footer location line */
.footer-location {
  font-size: 0.9rem;
  color: #777; /* lighter gray for a softer look */
  text-align: center;
  margin-top: 0.25rem;
}
/* Consolidated site header & hero small-screen fixes
   - Caps logo/title sizes so nav doesn't overflow on narrow viewports
   - Prevents horizontal scroll by ensuring no element exceeds 100vw
   - Reduces hero min-height/spacing on small phones and tablets
   - Makes mobile toggle visible and ensures nav collapses cleanly
*/

:root {
  --site-header-padding: clamp(0.5rem, 2.5vw, 1.5rem);
  --site-header-desktop-height: 112px; /* unified desktop header height */
}

/* Safety: never allow horizontal overflow from header or hero backgrounds */
html, body {
  max-width: 100vw;
  overflow-x: hidden; /* defensive; site should not rely on this globally but it's safe for overrides */
}

/* Header container safety */
header .container.header-container,
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--site-header-padding) 0;
  /* Unify width across the site so branding aligns consistently */
  width: 80% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Remove double vertical padding from header element itself and prep for full-bleed bg */
header {
  padding: 0 !important;
  position: relative !important; /* ensure ::before positions correctly on all pages */
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0; /* allow children to shrink */
}

.logo img {
  height: clamp(42px, 6vw, 64px);
  width: auto;
  display: block;
  max-width: none; /* avoid width cap that can distort ratio with fixed height */
}

.logo-text, .logo-text-link .logo-text {
  display: inline-block;
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.8vw, 1.75rem); /* larger, readable branding */
  letter-spacing: 0.04em;
  max-width: calc(100vw - 140px); /* leave room for nav toggle + paddings */
  overflow: hidden;
  text-overflow: ellipsis;
  /* Match workflow header text styling */
  color: #639 !important;
  text-shadow:
    -2px -2px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
     0   -1px 0 #fff,
     0    1px 0 #fff,
    -1px  0    0 #fff,
     1px  0    0 #fff,
     0    0    8px #fff !important;
}

/* Ensure nav cannot push past viewport */
nav {
  min-width: 0;
}

/* Mobile toggle visible on small viewports and positioned after logo */
.mobile-toggle {
  display: none; /* default hidden; enabled in media queries below */
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

/* Hero fixes: reduce vertical whitespace and cap media height */
.hero {
  min-height: 36vh; /* drop from larger defaults for phones */
  padding-top: clamp(0.75rem, 3.5vw, 2rem);
  padding-bottom: clamp(0.75rem, 3.5vw, 2rem);
}

.hero .hero-header { margin-bottom: 1rem; }

.hero-image-rotator {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.hero-image-rotator .hero-image {
  max-height: 48vh; /* prevent huge images from creating vertical gaps */
  height: auto;
  object-fit: cover;
}

/* Small screens: enable mobile toggle, shrink logo text, remove extra hero gaps */
@media (max-width: 420px) {
  .mobile-toggle { display: block; color: #fff; }
  .logo img { height: clamp(34px, 10vw, 46px); }
  .logo-text { font-size: clamp(0.9rem, 4.0vw, 1.05rem); max-width: calc(100vw - 110px); }

  /* Reduce extra space below rotator on very small phones */
  .hero { min-height: 28vh; padding-bottom: 0.6rem; }
  .hero-image-rotator { margin-bottom: 0.25rem; }
  .hero-image-rotator .hero-image { max-height: 46vh; height: auto; object-fit: cover; }
}

/* Very small screens: collapse logo text only under 320px (prevent hiding at 360px) */
@media (max-width: 320px) {
  .logo-text { display: none; }
}

/* Tablet and small laptop: prevent horizontal scroll by tightening containers */
@media (min-width: 421px) and (max-width: 920px) {
  .container { width: 94%; max-width: 100%; box-sizing: border-box; padding-inline: 1rem; }
  .logo-text { max-width: calc(100vw - 160px); }
  .hero { min-height: 34vh; }
  .hero-image-rotator .hero-image { max-height: 54vh; }
}

/* Accessibility: focus outline for mobile toggle */
.mobile-toggle:focus { outline: 3px solid #ffbf47; outline-offset: 3px; }

/* Defensive: any element using wide absolute widths should be constrained */
.alignfull, .alignwide, .hero-bg, .main-bg { max-width: 100vw; box-sizing: border-box; }
/* Consolidated header and mobile-nav overrides used across pages
   Purpose: provide a single site-level source for the full-bleed header
   pseudo-element, scaled logo sizes, and robust mobile nav (max-height/opacity)
   while allowing per-page overrides to further customize if needed.
*/

/* Full-bleed header background at all sizes to match workflow look */
body header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to right, #00a79d 0%, #639 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

body header .header-container { position: relative !important; z-index: 1 !important; }

/* Keep branding readable and on one line where possible */
.logo-text { font-size: clamp(1.05rem, 2.4vw, 1.65rem) !important; white-space: nowrap !important; line-height: 1.05 !important; }
.logo img { height: 56px !important; width: auto !important; display: block !important; max-width: none !important; }

/* Desktop nav link color: white on gradient; mobile handled below */
@media (min-width: 769px) {
  /* Lock header height on desktop for pixel-perfect consistency */
  header .container.header-container,
  .header-container { min-height: var(--site-header-desktop-height) !important; }
  .logo img { height: 56px !important; }
  .logo-text { line-height: 1.1 !important; }

  nav a { color: #fff !important; }
  nav a:hover, nav a:focus { color: var(--primary) !important; text-decoration: underline !important; }
  /* Workflow-style animated underline for desktop nav */
  nav li a { position: relative !important; text-decoration: none !important; }
  nav li a::after {
    content: '' !important;
    position: absolute !important;
    width: 0 !important;
    height: 2px !important;
    bottom: -5px !important;
    left: 0 !important;
    background-color: var(--primary) !important;
    transition: width 0.3s ease !important;
  }
  nav li a:hover::after, nav li a:focus::after { width: 100% !important; }

  /* Standardize desktop nav vertical offset site-wide */
  nav ul { padding-top: 15px !important; }
}

/* Small phones: tighten header pseudo sizing and mobile toggle z-index */
@media (max-width: 480px) {
  body header::before { background-size: 100% 100% !important; }
  .logo img { height: 44px !important; }
  .logo-text { font-size: clamp(0.9rem, 4.2vw, 1.1rem) !important; }
  .mobile-toggle { position: relative !important; z-index: 3 !important; }
}

/* Robust mobile navigation: collapse/expand with max-height + opacity and staggered items */
@media (max-width: 1024px) {
  /* Show and elevate the mobile toggle across tablet widths too */
  .mobile-toggle { display: block; color: #fff; position: relative !important; z-index: 300 !important; }

  nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    padding: 0 2rem !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
    transition: max-height 0.36s ease, opacity 0.28s ease, padding 0.28s ease, transform 0.28s ease !important;
    z-index: 200 !important;
  }

  nav.active { max-height: 80vh !important; padding: 1.5rem 2rem !important; opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; }

  nav ul { display: flex !important; flex-direction: column !important; gap: 1rem !important; padding-top: 0 !important; }
  nav ul li { width: 100% !important; }
  nav ul li a { display: block !important; padding: 0.5rem 0 !important; }

  nav ul li { opacity: 0 !important; transform: translateY(-6px) !important; transition: opacity 0.28s ease, transform 0.28s ease !important; }
  nav.active ul li:nth-child(1) { transition-delay: 0.06s; opacity: 1 !important; transform: translateY(0) !important; }
  nav.active ul li:nth-child(2) { transition-delay: 0.12s; opacity: 1 !important; transform: translateY(0) !important; }
  nav.active ul li:nth-child(3) { transition-delay: 0.18s; opacity: 1 !important; transform: translateY(0) !important; }
  nav.active ul li:nth-child(4) { transition-delay: 0.24s; opacity: 1 !important; transform: translateY(0) !important; }
  nav.active ul li:nth-child(5) { transition-delay: 0.30s; opacity: 1 !important; transform: translateY(0) !important; }
  nav.active ul li:nth-child(6) { transition-delay: 0.36s; opacity: 1 !important; transform: translateY(0) !important; }

  /* Dropdown behavior inside mobile nav */
  nav ul li .dropdown-menu {
    position: relative !important; top: auto !important; left: auto !important; min-width: 100% !important; background: #fff !important; box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important; border-radius: 8px !important; padding: 0 !important; margin-top: 0.5rem !important; opacity: 0 !important; max-height: 0 !important; overflow: hidden !important; transform: translateY(-8px) !important; transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.36s ease !important; pointer-events: none !important;
  }

  nav a { color: #222 !important; text-decoration: none !important; }
  nav a:hover, nav a:focus { color: var(--primary) !important; text-decoration: underline !important; }

  nav ul li.dropdown.open .dropdown-menu,
  nav ul li.dropdown:focus-within .dropdown-menu,
  nav ul li.dropdown:hover .dropdown-menu {
    opacity: 1 !important; transform: translateY(0) !important; max-height: 420px !important; pointer-events: auto !important;
  }
}

/* Desktop dropdown behavior (hover/focus): ensure menus open on non-mobile pages */
@media (min-width: 769px) {
  nav ul li.dropdown { position: relative !important; }

  /* Keep dropdown in flow for animation; hidden by default until hover/focus */
  nav ul li .dropdown-menu {
    display: block !important; /* allow transitions */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease !important;
    pointer-events: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 160px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    border-radius: 0 0 8px 8px !important;
    padding: 0.5rem 0 !important;
    z-index: 400 !important;
  }

  nav ul li.dropdown:hover .dropdown-menu,
  nav ul li.dropdown:focus-within .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* Links inside dropdown */
  nav ul li .dropdown-menu li { width: 100% !important; }
  nav ul li .dropdown-menu a {
    color: #333 !important;
    padding: 0.75rem 1.2rem !important;
    display: block !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    position: relative !important;
    transition: background 0.2s ease, color 0.2s ease !important;
  }
  nav ul li .dropdown-menu a:hover,
  nav ul li .dropdown-menu a:focus {
    background: rgba(0,0,0,0.04) !important;
    color: var(--primary) !important;
  }
}