/* Claimsters Animated Glass Header - all styles namespaced with .cgh- */
.cgh-header,
.cgh-header *,
.cgh-header *::before,
.cgh-header *::after { box-sizing: border-box; }

.cgh-header {
  position: fixed;
  z-index: 999999;
  top: 10px;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0 20px;
  pointer-events: none;
  isolation: isolate;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #263b32;
}

body.admin-bar .cgh-header { top: 40px; }
@media screen and (max-width: 782px) {
  body.admin-bar .cgh-header { top: 54px; }
}

.cgh-pill {
  position: relative;
  display: block;
  width: 184px;
  max-width: calc(100vw - 24px);
  height: 68px;
  margin: 0 auto;
  border-radius: 999px;
  background: transparent;
  opacity: 1;
  transform: translateY(0);
  transition:
    width 850ms cubic-bezier(.2,.8,.2,1),
    height 260ms ease,
    opacity 360ms ease,
    transform 650ms cubic-bezier(.2,.8,.2,1);
  pointer-events: auto;
  isolation: isolate;
  overflow: visible;
}

.cgh-pill::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: inherit;
  background: rgba(255,253,246,.60);
  box-shadow: 0 8px 28px rgba(16,34,25,.12);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  pointer-events: none;
}

/* Early-preparation class is added from wp_head so the animation starts
   before the first visible paint. Without JS, the header remains visible. */
.cgh-has-js .cgh-header:not(.is-ready) .cgh-pill {
  width: 184px;
  opacity: 0;
  transform: translateY(-130px);
}

.cgh-header.is-ready .cgh-pill {
  opacity: 1;
  transform: translateY(0);
}

.cgh-header.is-expanded .cgh-pill {
  width: min(1450px, calc(100vw - 40px));
}

/* Logo begins in the center; it moves left only after the pill expands. */
.cgh-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  width: max-content;
  max-width: calc(100% - 24px);
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: left 720ms cubic-bezier(.2,.8,.2,1), transform 720ms cubic-bezier(.2,.8,.2,1), opacity 300ms ease;
  text-decoration: none;
  pointer-events: auto;
}

.cgh-header.is-dropped .cgh-brand { opacity: 1; }
.cgh-header.is-expanded .cgh-brand {
  left: 24px;
  transform: translateY(-50%);
}

.cgh-logo {
  display: block;
  width: auto;
  max-width: 160px;
  height: auto;
  max-height: 38px;
  object-fit: contain;
  filter: none;
  transition: filter 260ms ease;
}

/* Center navigation, hidden until the pill begins its full expansion. */
.cgh-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 360px);
  transform: translate(-50%, -50%) translateY(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, transform 550ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 360ms;
  pointer-events: none;
}

.cgh-header.is-expanded .cgh-nav {
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
  transition-delay: 140ms, 140ms, 0s;
  pointer-events: auto;
}

.cgh-menu,
.cgh-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cgh-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 28px);
}

.cgh-menu > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.cgh-menu > li > a,
.cgh-menu > li > a:visited {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  padding: 7px 0;
  color: #263b32;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  transition: color 220ms ease;
}

.cgh-menu > li > a:hover,
.cgh-menu > li.current-menu-item > a,
.cgh-menu > li.current-menu-ancestor > a { color: #14532d; }

.cgh-submenu-toggle {
  display: inline-flex;
  width: 23px;
  height: 30px;
  flex: 0 0 23px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.cgh-chevron {
  display: block;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.cgh-menu li.cgh-submenu-open > .cgh-submenu-toggle .cgh-chevron {
  margin-top: 3px;
  transform: rotate(225deg);
}

.cgh-menu .sub-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: -14px;
  display: block;
  width: max-content;
  min-width: 218px;
  max-width: min(320px, 88vw);
  padding: 8px;
  border: 1px solid #e5e8e0;
  border-radius: 14px;
  background: rgba(255,255,250,.98);
  box-shadow: 0 14px 32px rgba(14,32,23,.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.cgh-menu li:hover > .sub-menu,
.cgh-menu li:focus-within > .sub-menu,
.cgh-menu li.cgh-submenu-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.cgh-menu .sub-menu li { display: block; margin: 0; padding: 0; }
.cgh-menu .sub-menu a,
.cgh-menu .sub-menu a:visited {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #20382d;
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
  white-space: normal;
}
.cgh-menu .sub-menu a:hover,
.cgh-menu .sub-menu .current-menu-item > a {
  background: #edf2ec;
  color: #14532d;
}

.cgh-actions {
  position: absolute;
  top: 50%;
  right: 15px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  max-width: 36%;
  transform: translateY(-50%) translateX(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, transform 550ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 360ms;
  pointer-events: none;
}

.cgh-header.is-expanded .cgh-actions {
  transform: translateY(-50%);
  opacity: 1;
  visibility: visible;
  transition-delay: 140ms, 140ms, 0s;
  pointer-events: auto;
}

.cgh-cta,
.cgh-cta:visited {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid #14532d;
  border-radius: 999px;
  background: #14532d;
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, transform 160ms ease;
}

.cgh-cta:hover,
.cgh-cta:focus-visible {
  background: #0d3f21;
  color: #fff;
  transform: translateY(-1px);
}

.cgh-mobile-toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(21,59,53,.18);
  border-radius: 50%;
  background: #fff;
  color: #153b35;
  cursor: pointer;
}

.cgh-mobile-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 160ms ease, opacity 160ms ease;
}

.cgh-header.is-mobile-open .cgh-mobile-toggle span:first-child {
  transform: translateY(7px) rotate(45deg);
}
.cgh-header.is-mobile-open .cgh-mobile-toggle span:nth-child(2) { opacity: 0; }
.cgh-header.is-mobile-open .cgh-mobile-toggle span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

/* Light/dark glass contrast states. */
.cgh-header.is-on-light .cgh-pill::before {
  background: rgba(255,253,246,.62);
  border-color: rgba(255,255,255,.72);
}
.cgh-header.is-on-dark .cgh-pill::before {
  background: rgba(8,25,22,.42);
  border-color: rgba(255,255,255,.34);
  box-shadow: 0 9px 30px rgba(0,0,0,.18);
}
.cgh-header.is-scrolled .cgh-pill::before {
  box-shadow: 0 9px 30px rgba(0,0,0,.16);
}
.cgh-header.is-on-dark .cgh-logo {
  filter: grayscale(1) brightness(0) invert(1);
}
.cgh-header.is-on-dark .cgh-menu > li > a,
.cgh-header.is-on-dark .cgh-menu > li > a:visited {
  color: #fff;
}
.cgh-header.is-on-dark .cgh-menu > li > a:hover,
.cgh-header.is-on-dark .cgh-menu > li.current-menu-item > a,
.cgh-header.is-on-dark .cgh-menu > li.current-menu-ancestor > a {
  color: #ffe0c9;
}
.cgh-header.is-on-dark .cgh-submenu-toggle { color: #fff; }

/* Always keep dropdowns opaque and readable, even over the dark hero. */
.cgh-menu .sub-menu {
  background: #fffdf7;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Tablet and mobile navigation. */
@media (max-width: 1024px) {
  .cgh-header { padding-inline: 12px; }
  .cgh-pill { height: 62px; }
  .cgh-header.is-expanded .cgh-pill { width: calc(100vw - 24px); }
  .cgh-logo { max-width: 130px; max-height: 32px; }
  .cgh-header.is-expanded .cgh-brand { left: 17px; }

  .cgh-mobile-toggle { display: inline-flex; }
  .cgh-actions { right: 10px; max-width: none; gap: 8px; }
  .cgh-cta { min-height: 40px; padding: 10px 14px; font-size: 12px; }

  .cgh-nav,
  .cgh-header.is-expanded .cgh-nav {
    top: calc(100% + 9px);
    left: 0;
    right: 0;
    display: none;
    width: 100%;
    max-width: none;
    max-height: min(70vh, 540px);
    overflow-y: auto;
    padding: 12px;
    border: 1px solid #e8e8de;
    border-radius: 18px;
    background: rgba(255,253,247,.98);
    box-shadow: 0 14px 36px rgba(8,25,18,.16);
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .cgh-header.is-mobile-open .cgh-nav { display: block; }
  .cgh-menu { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .cgh-menu > li { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #eceee7; }
  .cgh-menu > li:last-child { border-bottom: 0; }
  .cgh-menu > li > a,
  .cgh-menu > li > a:visited {
    min-height: 45px;
    flex: 1 1 auto;
    padding: 11px 8px;
    color: #263b32 !important;
    font-size: 14px;
    white-space: normal;
  }
  .cgh-submenu-toggle { width: 38px; height: 38px; flex-basis: 38px; align-self: center; color: #263b32 !important; }
  .cgh-menu .sub-menu {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 3px 0 9px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .cgh-menu li.cgh-submenu-open > .sub-menu { display: block; }
  .cgh-menu .sub-menu a { padding: 10px 12px; font-size: 14px; }
  .cgh-header.is-on-dark .cgh-nav .cgh-menu > li > a { color: #263b32 !important; }
}

@media (max-width: 480px) {
  .cgh-header { top: 7px; padding-inline: 8px; }
  body.admin-bar .cgh-header { top: 54px; }
  .cgh-pill { height: 58px; }
  .cgh-header.is-expanded .cgh-pill { width: calc(100vw - 16px); }
  .cgh-header.is-expanded .cgh-brand { left: 12px; }
  .cgh-logo { max-width: 102px; max-height: 27px; }
  .cgh-actions { right: 7px; gap: 6px; }
  .cgh-cta { min-height: 37px; padding: 9px 11px; font-size: 11px; }
  .cgh-mobile-toggle { width: 36px; height: 36px; flex-basis: 36px; }
  .cgh-mobile-toggle span { width: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .cgh-header *, .cgh-header *::before, .cgh-header *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .cgh-has-js .cgh-header:not(.is-ready) .cgh-pill {
    width: min(1450px, calc(100vw - 40px));
    opacity: 1;
    transform: none;
  }
}

/* In the Elementor editor, always show the finished template. */
body.elementor-editor-active .cgh-header .cgh-pill,
body.elementor-editor-preview .cgh-header .cgh-pill {
  width: min(1450px, calc(100vw - 40px));
  opacity: 1;
  transform: none;
}
body.elementor-editor-active .cgh-header .cgh-brand,
body.elementor-editor-preview .cgh-header .cgh-brand {
  left: 24px;
  transform: translateY(-50%);
  opacity: 1;
}
body.elementor-editor-active .cgh-header .cgh-nav,
body.elementor-editor-preview .cgh-header .cgh-nav,
body.elementor-editor-active .cgh-header .cgh-actions,
body.elementor-editor-preview .cgh-header .cgh-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
