/* Header typography and spacing to match snapshot */
.site-header, .unite-header { background:#fff; }
.logo, .site-title-link, #wsite-title { font-family: 'Josefin Sans', sans-serif; font-weight: 500; letter-spacing: 0.08em; font-size: 30px; line-height: 1; text-transform: uppercase; color:#000; }
.site-branding img.custom-logo { max-height: 70px; height:auto; width:auto; }
.nav-primary .menu-items { list-style:none; margin:0; padding:0; display:flex; gap:24px; }
.nav-primary .menu-items a { font-family: 'Josefin Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: inherit; }

/* Layout for header using current markup */
.unite-header .nav-wrap .container { display:flex; align-items:center; justify-content:space-between; padding:16px 0 !important; }
.unite-header .logo { line-height:1; }
.site-title-link, .logo a { color:#000 !important; text-decoration:none !important; }
.nav.desktop-nav ul, .nav.desktop-nav .menu-items { display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.nav.desktop-nav a { text-decoration:none; color:#000; font-family:'Josefin Sans',sans-serif; font-size:14px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; }

/* Hardening header layout and link styles */
.unite-header .nav-wrap .container { display:flex !important; align-items:center !important; justify-content:space-between !important; }
.unite-header .logo { margin-right:24px; }
.unite-header a { text-decoration:none !important; }
.unite-header #wsite-title { border:0 !important; }
.unite-header .menu-items-wrapper { float:none !important; width:auto !important; }
.unite-header .desktop-nav { margin-left:auto !important; }
.unite-header .membership-cart { display:none !important; }
.article-content > *, .article-content > [class^="wp-block-"] { max-width: 1200px; }
/* Hong Legal overrides
   This stylesheet loads last to layer safe fixes on top of imported static CSS
   Add minimal, targeted rules here to avoid touching original snapshot files */

/* Front page hero band (green), centered content mimicking original) */
.hero--green { background-color:#23301e; padding:60px 0; }
.hero--green .hero__inner { max-width:860px; margin:0 auto; text-align:center; }
.hero--green h2 { color:#cfe0cf; font-weight:600; letter-spacing:.02em; margin:0 0 16px; }
.hero--green .paragraph { color:#cfe0cf; line-height:1.6; }

/* Example: ensure header title inherits intended font/spacing */
/*
#wsite-title { font-weight: 700; letter-spacing: 1px; }
*/

/* Layout helpers (avoid overriding snapshot container widths) */
.wrapper { width: 100%; }
.unite-header .container,
.banner .container,
.main-wrap .container,
.footer .container { margin: 0 auto; padding: 0 15px; }

/* Header/logo */
.logo #wsite-title { font-weight: 700; letter-spacing: 1px; }

/* Desktop navigation alignment */
.nav.desktop-nav .wsite-menu-default { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; align-items: center; }
.nav.desktop-nav .wsite-menu-default > li { display: inline-block; }
.nav.desktop-nav .wsite-menu-default a.wsite-menu-item { text-decoration: none; }

/* Active state mirrors static id="active" */
.wsite-menu-default li#active > a.wsite-menu-item,
.wsite-menu-default .wsite-nav-current > a.wsite-menu-item { text-decoration: underline; }

/* Mobile menu toggle fallback */
#menu-items-wrapper { display: block; }
@media (max-width: 768px) {
  .nav.desktop-nav .wsite-menu-default { display: none; flex-direction: column; gap: 12px; }
  .nav-toggle { display: inline-block; }
  #menu-items-wrapper.is-open .wsite-menu-default { display: flex; }
}

/* Hero defaults if inline styles are missing */
.banner .wsite-content-title { color: #ffffff; }

/* Table grid spacing */
.wsite-multicol-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.wsite-multicol-col { vertical-align: top; }

/* Footer spacing */
.footer .wsite-multicol-table { width: 100%; }
.footer .paragraph { color: inherit; }




/* Align primary desktop menu to the right of the container (away from logo) */
@media (min-width: 1025px) {
  .unite-header .container { table-layout: auto; }
  .desktop-nav { width: auto; text-align: right; }
  .membership-cart { width: auto; text-align: right; }
  .nav.desktop-nav .wsite-menu-default { justify-content: flex-end; }
}


/* Fix: Prevent Services and Contact sections from overlapping on narrow viewports/zoom */
/* Convert the multicolumn table to stacked blocks and ensure clearfix */
@media (max-width: 1024px) {
  .wsite-multicol-table,
  .wsite-multicol-tbody,
  .wsite-multicol-tr { display: block !important; width: 100% !important; }
  .wsite-multicol-col { display: block !important; width: 100% !important; padding: 0 0 20px !important; float: none !important; }
  .wsite-section-elements::after { content: ""; display: block; clear: both; }
}

/* Extra breathing room between Services and the next section */
.main-wrap .wsite-section.wsite-background-1 + .wsite-section-wrap { margin-top: 20px; }


/* Mobile navigation: show Air-light menu and working toggle; hide legacy hamburger */
@media (max-width: 1024px) {
  /* Hide legacy static-site hamburger that does nothing */
  .unite-header > .nav-wrap .hamburger { display: none !important; }

  /* Ensure our nav container is visible on mobile */
  .desktop-nav { display: block !important; width: 100%; }
  .nav-primary { width: 100%; }

  /* Basic toggle-controlled reveal */
  #menu-items-wrapper { display: none; }
  #nav-toggle { display: inline-block; margin-left: auto; }
  body.js-nav-active #menu-items-wrapper { display: block; }

  /* Stack menu items vertically */
  .nav.desktop-nav .wsite-menu-default { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
}


/* Mobile readability tweaks for Services section */
@media (max-width: 1024px) {
  /* Remove negative outer gutters that can cause overlap/overflow */
  .wsite-multicol-table-wrap { margin: 0 !important; }

  /* Make label-like strong headings break onto their own lines */
  .wsite-background-1 .paragraph strong { display: block; margin: 12px 0 6px; }
  .wsite-background-1 .paragraph strong span { display: inline; }

  /* Add breathing room between stacked columns */
  .wsite-background-1 .wsite-multicol-col { padding-bottom: 24px !important; border-bottom: 1px solid rgba(0,0,0,0.08); }
  .wsite-background-1 .wsite-multicol-col:last-child { border-bottom: 0; }
}

/* Fix: static CSS clips content on mobile via overflow:hidden; allow content to flow */
@media (max-width: 1024px) {
  .container, .wsite-footer { overflow: visible !important; }
  .wsite-section .container { overflow: visible !important; }
}
  .main-wrap,
  .wsite-section,
  .wsite-section-content,
  .wsite-section-elements,
  .footer-wrap,
  .footer-wrap .wsite-footer { overflow: visible !important; }


/* Ensure footer does not overlap content and stays in normal flow */
.footer-wrap { position: static !important; }

/* Stronger float clear for mixed table/floats content */
.wsite-section, .wsite-section .container, .wsite-section-elements,
.wsite-multicol-table-wrap { clear: both; }


/* Ensure page content clears floated media so footer cannot overlap */
.entry-content::after, .site-main::after { content: ""; display: block; clear: both; }
.entry-content img { max-width: 100%; height: auto; }



/* Force header brand/menu to render professionally regardless of legacy CSS */
.unite-header, .unite-header * { box-sizing: border-box; }

/* Ensure main content never hides behind header or gets clipped */
.site-main { display:block; position:relative; z-index:1; }
.site-main .entry, .site-main .entry-content, .site-main .container { overflow:visible !important; }
.site-main .container { max-width: 1200px; margin: 0 auto; }

/* Remove any table-layout clipping from old snapshot tables used in footer only */
.wsite-multicol-table, .wsite-multicol-tbody, .wsite-multicol-tr, .wsite-multicol-col { vertical-align:top; }

/* Avoid double output or layout collisions */
#wsite-content, .wsite-not-footer .wsite-section-wrap { display:block; }

.unite-header .nav-wrap .container { display:flex; align-items:center; gap:32px; }
.unite-header .desktop-nav { margin-left:auto; }
.unite-header .menu-items-wrapper { float:none !important; }
.unite-header .logo a, .unite-header .site-title-link, .unite-header #wsite-title { color:#000 !important; text-decoration:none !important; border:0 !important; }

/* Footer should sit below content and not intrude into body area */
.site-footer { clear: both; position: relative; z-index: 0; }

/* Contact page: make top blue/colored band full-bleed left-to-right */
.page-template-page-contact .wsite-section.wsite-section-bg-color {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* Mobile/responsive fixes for legacy multi-column content so it does not overlap */
@media (max-width: 1024px) {
  .wsite-multicol-table, .wsite-multicol-tbody, .wsite-multicol-tr { display:block; width:100% !important; }
  .wsite-multicol-col { display:block; width:100% !important; padding:0 0 16px !important; }
  .wsite-multicol-table-wrap { margin:0 !important; overflow:visible !important; }
}

/* Mobile nav: show toggle, hide items wrapper until expanded */
@media (max-width: 1024px) {
  .desktop-nav .menu-items-wrapper { display:none; }
  .desktop-nav .nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; cursor:pointer; }
  /* When toggle is opened (aria-expanded=true), reveal menu */
  .nav-primary .nav-toggle[aria-expanded="true"] + .menu-items-wrapper { display:block; position:absolute; top:100%; right:12px; background:#fff; padding:12px 16px; border:1px solid #e6e6e6; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.12); z-index:9999; }
  .nav-primary .menu-items-wrapper ul { display:block; gap:0; }
  .nav-primary .menu-items-wrapper li { margin:0; }
  .nav-primary .menu-items-wrapper a { display:block; padding:10px 6px; }
}

/* Optional: draw basic hamburger if no icon asset provided */
.nav-toggle{position:relative; z-index:10001;} /* ensure on top */
.nav-toggle .hamburger { width:22px; height:2px; background:#000; position:relative; display:inline-block; transform: translateY(0.5px); transition:background .2s ease, transform .2s ease; }
.nav-toggle .hamburger:before, .nav-toggle .hamburger:after { content:""; position:absolute; left:0; width:22px; height:2px; background:#000; transition:transform .2s ease, top .2s ease; }
.nav-toggle .hamburger:before { top:-6px; }
.nav-toggle .hamburger:after { top:6px; }
/* Animate to X when open */
.nav-toggle[aria-expanded="true"] .hamburger{ background:transparent; }
.nav-toggle[aria-expanded="true"] .hamburger:before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger:after{ top:0; transform:rotate(-45deg); }
/* Also react when body carries the js-nav-active flag */
body.js-nav-active .nav-toggle .hamburger{ background:transparent; }
body.js-nav-active .nav-toggle .hamburger:before{ top:0; transform:rotate(45deg); }
body.js-nav-active .nav-toggle .hamburger:after{ top:0; transform:rotate(-45deg); }

.unite-header .logo .custom-logo-link { display:inline-block; }
.unite-header .logo .custom-logo { display:block; max-height:70px; height:auto; width:auto; }
.unite-header .desktop-nav ul { display:flex !important; gap:24px; list-style:none; margin:0; padding:0; }
.unite-header .desktop-nav ul li { margin:0; padding:0; }
.unite-header .desktop-nav ul a { display:inline-block; padding:6px 0; line-height:1.4; color:#000 !important; text-decoration:none !important; font-family:'Josefin Sans',sans-serif; font-size:14px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; }

/* Preserve intended text color in Services section on mobile */
@media (max-width: 1024px) {
  .wsite-background-1, .wsite-background-1 .paragraph, .wsite-background-1 li, .wsite-background-1 span { color: #2a2a2a !important; }
}

/* At high zoom on desktop ensure stacked layout and visible overflow */
@media (min-width: 1025px) and (min-resolution: 1dppx) {
  .wsite-multicol-table, .wsite-multicol-tbody, .wsite-multicol-tr { display: table; width: 100%; }
  @media (min-resolution: 2dppx) {
    /* Fallback: if zoom creates overflow clipping, force visible */
    .container, .wsite-section .container { overflow: visible !important; }
  }
}


/* Modern two-column layout (table-like) 40% / 60% with responsive stack */
.hl-two-col { display:grid; grid-template-columns: 2fr 3fr; gap: 24px; align-items:start; }
.hl-two-col .hl-media { width:100%; }
.hl-two-col .hl-media img { display:block; width:100%; height:auto; max-width:100%; border-radius:6px; }
.hl-two-col .hl-content { width:100%; }
/* Optional: vertical centering */
.hl-two-col.hl--center { align-items:center; }
/* Reverse order variant (image on right on desktop) */
.hl-two-col.hl--reverse { grid-auto-flow: column; grid-template-columns: 3fr 2fr; }
@media (max-width: 900px) {
  .hl-two-col, .hl-two-col.hl--reverse { grid-template-columns: 1fr; }
}


/* Two-row, two-column layout
   - Top row: 40% / 60% (image + content)
   - Bottom row: 50% / 50% evenly spaced
*/
.hl-two-by-two { display:grid; gap:24px; }
.hl-two-by-two .hl-row-top { display:grid; grid-template-columns: 2fr 3fr; gap:24px; align-items:start; }
.hl-two-by-two .hl-row-bottom { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; }
.hl-two-by-two .hl-media img { display:block; width:100%; height:auto; border-radius:6px; }
/* Optional variants */
.hl-two-by-two .hl-row-top.hl--center { align-items:center; }
.hl-two-by-two .hl-row-top.hl--reverse { grid-template-columns: 3fr 2fr; }
/* Responsive: stack to single column */
@media (max-width: 900px) {
  .hl-two-by-two .hl-row-top,
  .hl-two-by-two .hl-row-bottom { grid-template-columns: 1fr; }
}


/* Contact page width adjustments */
/* Widen the blue-band inner container */
.page-template-page-contact .wsite-section .container { max-width: 1200px !important; }
/* Widen the editable content area under the band */
.page-template-page-contact .article-content > *,
.page-template-page-contact .article-content > [class^="wp-block-"] { max-width: 1200px; }


/* CONTACT PAGE — full-bleed hero band centered, content bounded and centered */
.page-template-page-contact #content { overflow: visible; }
.page-template-page-contact .wsite-section.wsite-section-bg-color {
  display: block;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw; /* full bleed */
}
.page-template-page-contact .wsite-section .wsite-section-content { padding: 40px 0; }
.page-template-page-contact .wsite-section .container {
  max-width: 1200px !important;
  margin: 0 auto;
  padding: 0 20px;
}
/* Bound and center the editable region content below the band */
.page-template-page-contact .article-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.page-template-page-contact .article-content > *,
.page-template-page-contact .article-content > [class^="wp-block-"] { max-width: none; }


/* CONTACT PAGE FALLBACK — apply even if the Contact template is not assigned */
/* Make the blue band full-bleed and centered regardless of template usage */
.wsite-section.wsite-background-7 {
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw;
}
.wsite-section.wsite-background-7 .wsite-section-content { padding: 40px 0; }
.wsite-section.wsite-background-7 .container { max-width: 1200px !important; margin: 0 auto; padding: 0 20px; }
/* Bound and center the editable region that follows the blue band */
.wsite-section.wsite-background-7 ~ main .article-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; }


/* Contact band: center inner content within the full-bleed bar */
.page-template-page-contact .wsite-section .wsite-section-elements { max-width: 1000px; margin: 0 auto; text-align: center; }
.page-template-page-contact .wsite-section .wsite-content-title,
.page-template-page-contact .wsite-section .paragraph { text-align: center !important; }

/* Fallback (if template not assigned) */
.wsite-section.wsite-background-7 .wsite-section-elements { max-width: 1000px; margin: 0 auto; text-align: center; }
.wsite-section.wsite-background-7 .wsite-content-title,
.wsite-section.wsite-background-7 .paragraph { text-align: center !important; }


/* Final centering for full-bleed contact band using viewport math */
.page-template-page-contact .wsite-section.wsite-section-bg-color,
.wsite-section.wsite-background-7 {
  width: 100vw !important;
  max-width: 100vw !important;
  left: auto !important; right: auto !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}


/* Footer: two distinct columns, responsive stack */
.footer .footer-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: start; }
.footer .footer-col .paragraph { margin: 0; }
.footer .footer-col--contact strong { display:block; font-size: 1.25rem; margin-bottom: 8px; }
.footer .footer-col--disclaimer small { line-height: 1.6; display: block; }
@media (max-width: 800px) {
  .footer .footer-grid { grid-template-columns: 1fr; }
}


/* Three-column layout (table-like) with responsive fallbacks */
.hl-three-col { display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items:start; }
.hl-three-col .hl-group { display:block; }
.hl-three-col .hl-group h3, .hl-three-col .hl-group h4 { margin: 0 0 8px; }
.hl-three-col ul { margin: 8px 0 18px 1.1em; padding: 0; }
@media (max-width: 1100px){ .hl-three-col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){ .hl-three-col { grid-template-columns: 1fr; } }


/* Ensure wider home content at most viewport widths */
.home .entry-content.container { max-width: 1300px !important; margin: 0 auto; padding-left: 20px; padding-right: 20px; }


/* Home page: widen main content container for multi-column services */
@media (min-width: 1300px){
  .home .entry-content.container { max-width: 1300px !important; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
}
/* Three-col on home: auto-fit responsive columns, no media query conflicts */

/* Centered three-column helper (self-contained, no conflicts) */
.hl-three-col-centered { display:grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap:28px; align-items:start; max-width:1200px; margin:0 auto; padding:0 20px; }
.hl-three-col-centered .hl-group { display:block; }
.hl-three-col-centered .hl-group h3, .hl-three-col-centered .hl-group h4 { margin:0 0 8px; }
.hl-three-col-centered ul { margin:8px 0 18px 1.1em; padding:0; }
@media (max-width: 1100px){ .hl-three-col-centered { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
@media (max-width: 700px){ .hl-three-col-centered { grid-template-columns: 1fr; } }

.home .hl-three-col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }


/* Force reliable mobile/zoom nav behavior and icon visibility */
@media (max-width: 1030px){
  /* Always show the toggle button */
  .nav-primary .nav-toggle{display:inline-flex !important; align-items:center; justify-content:center; width:44px; height:44px; cursor:pointer;}
  /* Hide menu items wrapper until toggled */
  .nav-primary #menu-items-wrapper{display:none !important;}
  /* Reveal when toggle open */
  .nav-primary .nav-toggle[aria-expanded="true"] + #menu-items-wrapper{display:block !important; position:absolute; top:100%; right:12px; background:#000; color:#fff; padding:10px 12px; border:1px solid #333; border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.45); z-index:10000;}
  .nav-primary #menu-items-wrapper ul{display:block; gap:0;}
  .nav-primary #menu-items-wrapper li{margin:0;}
  .nav-primary #menu-items-wrapper a{display:block; padding:10px 6px;}
  /* Ensure the hamburger bars draw visibly (override any earlier hide rules) */
  .nav-primary{position:relative;z-index:1000}
  .nav-primary .nav-toggle .hamburger{width:22px;height:2px;background:#000;position:relative;display:inline-block !important}
  .nav-primary .nav-toggle .hamburger:before,
  .nav-primary .nav-toggle .hamburger:after{content:"";position:absolute;left:0;width:22px;height:2px;background:#000;display:block !important}
  .nav-primary .nav-toggle .hamburger:before{top:-6px}
  .nav-primary .nav-toggle .hamburger:after{top:6px}
}


/* Remove any legacy rules that hide the nav toggle/hamburger on mobile */
@media (max-width:1030px){
  .unite-header > .nav-wrap .hamburger{display:none} /* legacy */
  .nav-primary .hamburger{display:block !important}
}


/* Align with Air-light sliding mobile nav: when body has .js-nav-active, bring panel onscreen */
@media (max-width:1030px){
  /* Compact dropdown variant for small menu counts */
  .nav-primary{position:relative}
  body.js-nav-active .nav-primary #menu-items-wrapper{
    display:block !important; position:fixed !important; top:var(--hl-menu-top, 0); right:12px; z-index:10000;
    width:auto; min-width:220px; max-width:90vw; background:#000; color:#fff;
    border:1px solid #333; border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.45);
    padding:10px 12px;
  }
  body.js-nav-active .nav-primary #menu-items-wrapper ul{list-style:none;margin:0;padding:0}
  body.js-nav-active .nav-primary #menu-items-wrapper a{color:#fff !important; display:block; padding:8px 6px}
}


/* Keep header color the same when menu opens */
.js-nav-active .site-header, .js-nav-active .unite-header { background:#fff !important; }

/* Ensure hamburger bars are visible and form an X in black while open */
.js-nav-active .nav-toggle .hamburger,
.js-nav-active .nav-toggle .hamburger::before,
.js-nav-active .nav-toggle .hamburger::after{ background:#000 !important; }

/* Compact menu: height only as tall as items */
@media (max-width:1030px){
  .nav-primary #menu-items-wrapper{ height:auto !important; max-height:none !important; }
  body.js-nav-active .nav-primary #menu-items-wrapper,
  .nav-primary .nav-toggle[aria-expanded="true"] + #menu-items-wrapper{ height:auto !important; }
}