/* ========================================================================== Dr Esh — site header and mobile drawer Ported from design/assets/app.css and adapted to the wp_nav_menu markup. -------------------------------------------------------------------------- Elementor's kit also declares these tokens on (.elementor-kit-6). They are repeated here on :root so the chrome renders correctly even if Elementor is disabled, and so this file stands on its own. The kit's copy wins where both apply, which is intentional: the kit stays the editable source of truth. ========================================================================== */ :root { --paper: #FAF8F4; --paper-warm: #F4F1EA; --ink: #1C2521; --ink-muted: #4C5650; --eucalypt: #2E4B3F; --clay: #C4643C; --clay-deep: #A9502C; --clay-darkest: #8F4324; --sand: #E7E1D6; --hairline: #D8D2C6; --font-display: Newsreader, Georgia, "Times New Roman", serif; --font-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-brand: "Dancing Script", var(--font-display); --wrap-max: 92rem; --gutter: clamp(1.5rem, 1.1rem + 1.7vw, 3.25rem); --gutter-tablet: 2.75rem; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } .site-head *, .drawer * { box-sizing: border-box; } /* Scoped to the header, because the page body's .wrap elements are Elementor's and carry their own padding. An unscoped .wrap here would compete with them. */ .site-head .wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--gutter); } /* Roomier gutter across tablet widths, per app.css. The band is Elementor's tablet breakpoint, not app.css's 601-1279, because the page body below is built from Elementor variants and the bar has to move with it or the brand sits out of line with the content. Mobile falls back to the clamp, which is what the Elementor wrap class does at the same breakpoint. */ @media (min-width: 768px) and (max-width: 1024px) { .site-head .wrap { padding-inline: var(--gutter-tablet); } } /* ---------------- sticky bar ---------------- */ .site-head { position: sticky; top: 0; z-index: 60; background: transparent; } /* solid paper bar behind the content. Also masks the dropdown so it appears to slide out from behind the bar. Hairline and shadow fade in once scrolled. */ .site-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .site-head.is-scrolled::before { border-bottom-color: var(--hairline); box-shadow: 0 8px 28px -22px rgba(28, 37, 33, .45); } .site-head__bar { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; } .brand { font-family: var(--font-brand); font-weight: 700; font-size: 1.7rem; line-height: 1.2; color: var(--ink); text-decoration: none; white-space: nowrap; margin-right: auto; } .brand:hover, .brand:focus-visible { color: var(--eucalypt); } /* ---------------- desktop nav ---------------- */ .nav { display: flex; align-items: center; } .nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; } .nav__list > li { position: relative; border-radius: 10px; transition: background-color .18s var(--ease); } /* the pill sits on the

so it covers the link and its caret as one shape, rather than stopping short at the link edge. */ .nav__list > li:hover, .nav__list > li:focus-within, .nav__list > li[data-open="true"] { background: rgba(231, 225, 214, .55); } .nav__list > li > a { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .6rem .75rem; font-family: var(--font-body); font-weight: 600; font-size: .95rem; line-height: 1.2; color: var(--ink); text-decoration: none; white-space: nowrap; border: 0; border-radius: 10px; background: none; cursor: pointer; transition: background-color .18s var(--ease), color .18s var(--ease); } .nav__list > li > a::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .7rem; height: 1.5px; background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav__list > li > a[aria-current="page"]::after, .nav__list > li.current-menu-item > a::after { transform: scaleX(1); } .nav__list > li > a:hover { color: var(--ink); } /* ---------------- icon buttons ---------------- hello-elementor's reset.css styles bare