/* Sitewide mobile responsiveness retrofit. The original design was built desktop-only with no
   real breakpoints, so this file (plus mobile-fix.js) is a broad, safe corrective pass rather
   than a rebuild of every page. Loaded on every page after the page's own <style> block, so
   these rules win on selector ties; !important is used where the original layout is set via
   inline style="" attributes, which normal external CSS can't otherwise override. */

html, body { overflow-x: hidden; max-width: 100%; }
img, video { max-width: 100%; height: auto; }

/* Hamburger toggle button — hidden on desktop, shown by mobile-fix.js only below the nav
   breakpoint (it sets display via JS so it never flashes on desktop before CSS loads). */
.se-hamburger {
  display: none;
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid rgba(198,163,92,.4);
  border-radius: 4px;
  color: #F2ECDD;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 880px) {
  .se-nav { display: none !important; }
  .se-hamburger { display: flex !important; }
  /* Most pages already hide this subtitle below 1280px via their own <style> block, but a
     good number of pages are missing that rule (pre-existing inconsistency across the site,
     not something this pass introduced) — enforce it here so it's reliable everywhere. */
  .nav-sub { display: none !important; }
}

@media (max-width: 480px) {
  /* The nav bar's logo image + wordmark are fixed-size and nowrap by design (fine on desktop),
     which pushes the hamburger button off-screen on narrow phones. Shrink them down instead. */
  .se-logo-img { height: 34px !important; }
  .se-logo-title { font-size: 13px !important; letter-spacing: .06em !important; }
  .se-nav-bar { padding: 0 14px !important; height: 62px !important; gap: 10px !important; }
}

/* Mobile nav panel — built and toggled by mobile-fix.js */
.se-mobile-panel {
  display: none;
  flex-direction: column;
  background: #0C1626;
  border-bottom: 1px solid rgba(198,163,92,.25);
  padding: 8px 20px 20px;
}
.se-mobile-panel.se-open { display: flex; }
.se-mobile-panel a {
  color: #C9D2E0;
  padding: 12px 4px;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.se-mobile-panel .se-mobile-group-label {
  color: #C6A35C;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 16px 4px 4px;
}
.se-mobile-panel .he { font-family: 'David Libre', serif; color: #B99451; font-size: 13px; }

@media (max-width: 760px) {
  /* Global overflow safety net for the site's very large desktop hero/heading sizes. Specific
     elements also get scaled down individually by mobile-fix.js; this is the CSS-only backstop. */
  h1 { font-size: clamp(30px, 9vw, 44px) !important; line-height: 1.15 !important; }

  /* Flex and grid items default to min-width:auto, which refuses to shrink below the item's
     own content width — the single biggest cause of horizontal overflow on this site's
     originally-desktop-only layouts once a row/column is asked to narrow down for a phone.
     Safe to reset broadly at this breakpoint since it's this file's whole job. */
  div, span, p, a, section { min-width: 0; }
}