/*
  Responsive overrides for the static export.
  
  The original site was exported from a Wix/Thunderbolt runtime and many
  elements are positioned with fixed widths (e.g. 980px) and left offsets.
  This file is intentionally loaded AFTER inline styles so it can override
  those rules on narrow viewports.
*/

/* -------------------------------------------------------------------------- */
/* Base: sensible defaults                                                    */
/* -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
}

/* -------------------------------------------------------------------------- */
/* Custom Mobile Header Styles                                                */
/* -------------------------------------------------------------------------- */
#mobile-header {
  display: none;
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 15px;
  position: sticky;
  top: 0;
  z-index: 9999;
  text-align: center;
}
#mobile-header .logo {
  font-family: 'avenir-lt-w01_35-light1475496', sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #2a5e4d;
  margin-bottom: 10px;
  display: block;
  text-decoration: none;
}
#mobile-header .mobile-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
}
#mobile-header .mobile-nav a {
  color: #333;
  text-decoration: none;
  font-size: 16px;
  font-family: 'avenir-lt-w01_35-light1475496', sans-serif;
  padding: 5px 10px;
}
#mobile-header .mobile-nav a:hover,
#mobile-header .mobile-nav a.active {
  color: #2a5e4d;
  font-weight: bold;
}

/* -------------------------------------------------------------------------- */
/* Mobile layout overrides                                                    */
/* -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  :root {
    --site-width: 100vw !important;
  }

  /* Hide Desktop Header */
  #SITE_HEADER {
    display: none !important;
  }

  /* Show Mobile Header */
  #mobile-header {
    display: block !important;
  }

  /* 
     Reset core containers to be fluid and centered 
  */
  #site-root,
  #SITE_CONTAINER,
  #masterPage,
  #PAGES_CONTAINER,
  #SITE_PAGES,
  .site-root,
  .mesh-layout,
  main,
  footer {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  /* 
     Handle Columns and Strips
  */
  .ui-column-strip,
  .ui-column-strip__column,
  .V5AUxf,
  [data-mesh-id] {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important;
  }

  /* 
     Stack grid items vertically and center them 
  */
  [data-mesh-id$="gridContainer"],
  [data-mesh-id$="inlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 20px !important;
    gap: 20px !important;
    box-sizing: border-box !important;
  }

  /* 
     Reset absolute positioning for all direct children of grid containers 
  */
  [data-mesh-id$="gridContainer"] > *,
  [data-mesh-id$="inlineContent-gridContainer"] > *,
  [data-mesh-id$="inlineContent-gridContainer"] > interact-element > * {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  /* 
     Image adjustments 
  */
  .ui-image,
  .ui-image img,
  .MazNVa,
  .j7pOnl {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    left: 0 !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* 
     Text centering 
  */
  .ui-rich-text,
  .ui-rich-text * {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Paragraphs specifically */
  p.font_8, p.font_9 {
      text-align: center !important;
      padding: 0 10px !important;
  }

  /* Fix for elements that use translate-based centering on desktop */
  [id^="comp-"] {
      transform: none !important;
  }

}

/* -------------------------------------------------------------------------- */
/* Desktop refinements                                                        */
/* -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  :root {
    --site-width: 980px;
  }
}