/* Paws On The Earth - UI layer (mobile nav, gutters, polish). Loaded on every page. */
:root{--poe-teal:#76cad4;--poe-teal-d:#4fb4c1;--poe-ink:#0d2c31;--poe-line:rgba(13,44,49,.1)}

/* ---------- 1. Mobile + tablet side gutters ---------- */
@media (max-width:1023.98px){
  .hl_page-preview--content .c-row{padding-left:18px!important;padding-right:18px!important}
  .hl_page-preview--content .c-row .c-row{padding-left:0!important;padding-right:0!important}
  .c-heading,.c-sub-heading,.c-text,.c-paragraph,.c-list{max-width:100%}
  .text-output{overflow-wrap:break-word}
}
@media (max-width:480px){
  .hl_page-preview--content .c-row{padding-left:16px!important;padding-right:16px!important}
}

/* ---------- 2. One header below 1024px: always the mobile one ---------- */
@media (max-width:1023.98px){
  #section-osSjD414YW{display:none!important}
  #section-iYHn3CuQsw{display:block!important}
  #row-RlHL8HhlqR{display:block!important}
  #col-LY934FARs_{display:block!important}
  #section-iYHn3CuQsw ul.nav-menu{display:none!important}
  #section-iYHn3CuQsw .nav-menu-mobile{display:flex!important;align-items:center}
}
@media (min-width:1024px){
  #section-iYHn3CuQsw{display:none!important}
  .poe-burger,.poe-drawer{display:none!important}
}

/* ---------- 3. Hamburger: restyle the site's OWN icon span, so GHL's
   client-side hydration can never wipe it out ---------- */
@media (max-width:1023.98px){
  #nav-menu-popup{display:none!important}
  .nav-menu-mobile span.menu-icon{
    display:block!important;position:relative;width:46px;height:46px;flex:0 0 auto;
    background-image:linear-gradient(var(--poe-ink),var(--poe-ink));
    background-size:24px 2.5px;background-position:center;background-repeat:no-repeat;
    border-radius:12px;font-size:0!important;line-height:0!important;color:transparent!important;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:background-size .2s ease,background-color .2s ease}
  .nav-menu-mobile span.menu-icon:hover{background-color:rgba(13,44,49,.06)}
  .nav-menu-mobile span.menu-icon::before,
  .nav-menu-mobile span.menu-icon::after{
    content:""!important;font-family:inherit!important;font-size:0!important;
    position:absolute;left:11px;width:24px;height:2.5px;border-radius:3px;background:var(--poe-ink);
    transition:transform .38s cubic-bezier(.2,.85,.2,1),top .38s cubic-bezier(.2,.85,.2,1)}
  .nav-menu-mobile span.menu-icon::before{top:15px}
  .nav-menu-mobile span.menu-icon::after{top:28.5px}
  body.poe-nav-open .nav-menu-mobile span.menu-icon{background-size:0 2.5px;
    position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;z-index:2147483646}
  body.poe-nav-open .nav-menu-mobile span.menu-icon::before{top:22px;transform:rotate(45deg)}
  body.poe-nav-open .nav-menu-mobile span.menu-icon::after{top:22px;transform:rotate(-45deg)}
}

/* the injected button is only used on the hand-built pages (field guide, thank you) */
.poe-burger{position:relative;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  border-radius:12px;transition:background .2s ease}
.poe-burger:hover{background:rgba(13,44,49,.06)}
.poe-burger b{position:absolute;left:12px;width:22px;height:2.5px;border-radius:3px;background:var(--poe-ink);
  transition:transform .38s cubic-bezier(.2,.85,.2,1),top .38s cubic-bezier(.2,.85,.2,1),opacity .16s ease}
.poe-burger b:nth-child(1){top:16px}
.poe-burger b:nth-child(2){top:22px}
.poe-burger b:nth-child(3){top:28px}
body.poe-nav-open .poe-burger b:nth-child(1){top:22px;transform:rotate(45deg)}
body.poe-nav-open .poe-burger b:nth-child(2){opacity:0;transform:scaleX(.2)}
body.poe-nav-open .poe-burger b:nth-child(3){top:22px;transform:rotate(-45deg)}
body.poe-nav-open .poe-burger{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;z-index:2147483646}

/* ---------- 4. Drawer ---------- */
.poe-drawer{position:fixed;inset:0;z-index:2147483645;visibility:hidden;pointer-events:none}
.poe-drawer__scrim{position:absolute;inset:0;background:rgba(7,28,32,.55);opacity:0;
  transition:opacity .32s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.poe-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(89vw,410px);background:#fff;
  box-shadow:-26px 0 70px rgba(0,0,0,.3);transform:translateX(102%);
  transition:transform .44s cubic-bezier(.22,.92,.24,1);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 0 calc(env(safe-area-inset-bottom,0px) + 18px)}
body.poe-nav-open .poe-drawer{visibility:visible;pointer-events:auto}
body.poe-nav-open .poe-drawer__scrim{opacity:1}
body.poe-nav-open .poe-drawer__panel{transform:none}
body.poe-nav-open{overflow:hidden!important;touch-action:none}

.poe-drawer__brand{display:flex;align-items:center;gap:11px;min-height:50px;padding:2px 74px 16px 22px;border-bottom:1px solid var(--poe-line);margin-bottom:4px}
.poe-drawer__brand img{height:46px;width:auto;display:block}
.poe-drawer__brand span{font:700 12px/1.2 Montserrat,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--poe-teal-d)}

.poe-drawer__list{list-style:none;margin:0;padding:6px 0 4px}
.poe-drawer__list li{list-style:none;margin:0}
.poe-drawer__row{opacity:0;transform:translateY(12px);transition:opacity .36s ease,transform .40s cubic-bezier(.2,.85,.2,1)}
body.poe-nav-open .poe-drawer__row{opacity:1;transform:none}
.poe-drawer__link,.poe-drawer__toggle{display:flex;align-items:center;width:100%;
  box-sizing:border-box;gap:12px;min-height:54px;padding:12px 22px;background:transparent;border:0;
  border-left:3px solid transparent;text-align:left;
  font:600 17px/1.3 Montserrat,Arial,sans-serif;color:var(--poe-ink);text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .18s ease,color .18s ease,border-color .18s ease}
.poe-drawer__toggle>span:first-child{flex:1 1 auto}
.poe-drawer__link:hover,.poe-drawer__toggle:hover,.poe-drawer__link:active{background:rgba(118,202,212,.14);color:#0a2226}
.poe-drawer__link[aria-current="page"]{color:var(--poe-teal-d);border-left-color:var(--poe-teal);background:rgba(118,202,212,.08)}
.poe-drawer__chev{flex:0 0 auto;width:11px;height:11px;border-right:2.5px solid var(--poe-ink);border-bottom:2.5px solid var(--poe-ink);
  transform:rotate(45deg);transition:transform .32s cubic-bezier(.2,.85,.2,1);opacity:.55;margin-right:3px}
.poe-drawer__toggle[aria-expanded="true"] .poe-drawer__chev{transform:rotate(-135deg);opacity:.9}
.poe-drawer__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s cubic-bezier(.2,.85,.2,1)}
.poe-drawer__sub>div{overflow:hidden}
.poe-drawer__toggle[aria-expanded="true"]+.poe-drawer__sub{grid-template-rows:1fr}
.poe-drawer__sub a{display:flex;align-items:center;min-height:46px;padding:9px 22px 9px 38px;
  font:500 15px/1.35 Montserrat,Arial,sans-serif;color:#39565b;text-decoration:none;
  border-left:2px solid var(--poe-line);margin-left:22px;transition:background .18s ease,color .18s ease,border-color .18s ease}
.poe-drawer__sub a:hover,.poe-drawer__sub a:active{background:rgba(118,202,212,.12);color:var(--poe-ink);border-color:var(--poe-teal)}

.poe-drawer__cta{display:flex;flex-direction:column;gap:10px;padding:16px 22px 4px;margin-top:auto;border-top:1px solid var(--poe-line)}
.poe-drawer__cta a{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:12px;
  font:700 16px/1 Montserrat,Arial,sans-serif;text-decoration:none;transition:transform .18s ease,box-shadow .2s ease,background .2s ease}
.poe-drawer__cta a:active{transform:scale(.985)}
.poe-cta--solid{background:var(--poe-teal);color:var(--poe-ink);box-shadow:0 8px 22px rgba(118,202,212,.42)}
.poe-cta--solid:hover{background:var(--poe-teal-d)}
.poe-cta--ghost{background:#fff;color:var(--poe-ink);border:2px solid var(--poe-ink)}
.poe-cta--ghost:hover{background:rgba(13,44,49,.05)}
.poe-drawer__note{padding:12px 22px 0;font:500 12.5px/1.5 Montserrat,Arial,sans-serif;color:#6b8489}

/* ---------- 5. Announcement bar ---------- */
/* Below 1024px nothing is pinned: GHL's client-side script makes the mobile header
   fixed with a 108px spacer, which left a dead gap under the banner and covered it.
   Keeping the header in normal flow means the banner simply scrolls away with the page,
   and the phone gets those 108px back. */
@media (max-width:1023.98px){
  .poe-announce{position:static!important}
  #section-iYHn3CuQsw{position:static!important;top:auto!important}
  #row-RlHL8HhlqR,#col-LY934FARs_{position:static!important;top:auto!important}
  .preview-container.hl_page-preview--content{margin-top:0!important}
}
.poe-announce{display:flex;align-items:center;justify-content:center;gap:10px}
.poe-announce a{flex:0 1 auto}
.poe-announce__x{flex:0 0 auto;width:28px;height:28px;margin:-6px -6px -6px 0;border:0;background:transparent;
  cursor:pointer;position:relative;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:background .18s ease}
.poe-announce__x:hover{background:rgba(13,44,49,.12)}
.poe-announce__x::before,.poe-announce__x::after{content:"";position:absolute;left:8px;top:13px;width:12px;height:2px;
  border-radius:2px;background:var(--poe-ink)}
.poe-announce__x::before{transform:rotate(45deg)} .poe-announce__x::after{transform:rotate(-45deg)}
body.poe-nav-open .poe-announce{opacity:0;pointer-events:none;transition:opacity .2s ease}
.poe-announce{transition:opacity .25s ease}

/* ---------- 5b. Pages with the simple hand-built header (field guide, thank you) ---------- */
@media (max-width:1023.98px){
  .poe-simple-nav header .bar > nav{display:none!important}
  .poe-simple-nav header .bar{justify-content:space-between;gap:12px}
  .poe-simple-nav header .bar .poe-burger{margin-right:-8px}
}
@media (min-width:1024px){ .poe-simple-nav header .bar .poe-burger{display:none!important} }

/* ---------- 6. Polish ---------- */
@media (max-width:1023.98px){
  .c-button a,.c-button button{min-height:46px}
}
.c-button a,.c-button button{transition:transform .18s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease}
.c-button a:active,.c-button button:active{transform:scale(.985)}
:where(a,button,[role="button"]):focus-visible{outline:3px solid var(--poe-teal);outline-offset:2px;border-radius:8px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .poe-drawer__panel,.poe-drawer__scrim,.poe-drawer__row,.poe-burger b,.poe-drawer__sub,.poe-drawer__chev,
  .c-button a,.c-button button{transition:none!important}
}