/* ---------------------------------------------------------------------------
   Mandala navigation (Felix, 2026-10-05). Pairs with nav.js and _nav.php;
   loaded by both designs after their own sheets.

   The theme sheets already dress `.nav a` (the panel rows on a phone, the
   inline links on the desktop row). This adds what a link cannot be: the
   Services and More buttons, the accordion, the flyouts, and the folding.
   Without JavaScript the buttons go away and a plain Services link stands in.
--------------------------------------------------------------------------- */
.nav-dd-btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:6px;margin:0;border:0;background:none;color:var(--olive);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;text-align:left}
.nav-chev{flex:none;transition:transform .22s ease}
.nav-dd.is-open>.nav-dd-btn .nav-chev{transform:rotate(180deg)}
.nav-dd-panel ul{list-style:none;margin:0;padding:0}
html.js .nav-dd:not(.is-open)>.nav-dd-panel{display:none}
html.js .nav-nojs,html:not(.js) .nav-dd{display:none}

/* ---------- phones: rows in the slide-down panel, Services an accordion ---------- */
@media (max-width:920px){
  .nav-more{display:none!important}
  .nav>a.is-folded{display:flex}
  .nav-dd-btn{display:flex;width:100%;justify-content:space-between;min-height:52px;padding:0;border-bottom:var(--hair,1px) solid var(--line);font:400 1.2rem/1.2 var(--ui);letter-spacing:0}
  .nav-dd-btn .nav-chev{width:18px;height:18px;margin-right:4px}
  .nav-dd.is-current>.nav-dd-btn{color:var(--muted)}
  .nav .nav-dd-panel{padding:6px 0 12px 14px;border-bottom:var(--hair,1px) solid var(--line)}
  .nav .nav-dd-panel a{display:flex;align-items:center;min-height:44px;padding:0 0 0 14px;border:0;border-left:1px solid var(--line-strong,var(--line));font:400 1.05rem/1.25 var(--ui);color:var(--olive);text-decoration:none}
  .nav .nav-dd-panel a[aria-current="page"]{border-left:2px solid var(--copper,currentColor);padding-left:13px}
  .nav .nav-dd-all a{font-weight:400}
  /* the button climbs in with the links (core/assets/menu.css ladders only <a>) */
  html.js [data-menu-panel] .nav-dd-btn{opacity:0;transform:translateY(12px);transition:opacity .22s ease,transform .22s ease}
  html.js body.menu-open [data-menu-panel] .nav-dd-btn{opacity:1;transform:none;transition:opacity .42s ease,transform .5s cubic-bezier(.2,.8,.3,1);transition-delay:calc(120ms + var(--i,0) * 42ms)}
  /* the accordion's own links arrive with it, not on the ladder */
  html.js body.menu-open [data-menu-panel] .nav-dd-panel a{transition-delay:0s}
}

/* ---------- desktop: one line, flyouts ---------- */
@media (min-width:921px){
  .nav{flex:none}
  .nav>a.is-folded{display:none}
  .nav-more:not(.is-needed){display:none}
  .nav-more li:not(.is-shown){display:none}
  .nav-dd{position:relative;display:flex}
  .nav-dd-btn{min-height:44px;padding:0 10px 0 12px;font:400 15px/1 var(--ui);letter-spacing:.005em;border-radius:999px}
  .nav-dd-btn:hover,.nav-dd.is-open>.nav-dd-btn{text-decoration:underline;text-underline-offset:.45em}
  .nav-dd.is-current>.nav-dd-btn{text-decoration:underline;text-decoration-color:var(--copper);text-decoration-thickness:2px;text-underline-offset:.45em}
  .nav-dd-panel{position:absolute;top:calc(100% + 10px);left:0;z-index:60;min-width:248px;padding:8px;background:var(--cream);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 36px -26px rgba(25,25,23,.45)}
  /* a bridge over the gap, so the pointer can travel from button to list */
  .nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .nav-more .nav-dd-panel{left:auto;right:0}
  .nav .nav-dd-panel a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px;font:400 15px/1.2 var(--ui);letter-spacing:.005em;color:var(--olive);text-decoration:none;white-space:nowrap}
  .nav .nav-dd-panel a:hover{background:var(--paper);text-decoration:none}.nav .nav-dd-panel a:focus-visible{background:var(--paper);text-decoration:none}
  .nav .nav-dd-panel a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--copper);text-decoration-thickness:2px;text-underline-offset:.4em}
  .nav-dd-all{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
  .nav .nav-dd-all a{font-weight:400}
}
@media (min-width:921px) and (max-width:1120px){.nav-dd-btn{padding:0 6px 0 8px}}
/* nav.js measures the row at its natural width for one synchronous moment
   (never painted): nothing shrinks, an auto margin counts as nothing */
.head-row.is-measuring{width:-webkit-max-content!important;width:max-content!important;max-width:none!important}
.head-row.is-measuring>*{flex-shrink:0!important}
/* the last step when even a folded row will not fit (large text, a zoomed
   page): Find help keeps its icon and its aria-label, not the words */
@media (min-width:921px){.head-row.is-tight .head-find .hf-long{display:none}.head-row.is-tight .head-find{padding:0 13px}}
/* without JavaScript nothing folds into More, so the desktop row carries only
   the links that measured to fit at each width (natural widths plus 32px);
   every page is still in the footer */
@media (min-width:921px){html:not(.js) .nav>a[data-prio="4"],html:not(.js) .nav>a[data-prio="5"],html:not(.js) .nav>a[data-prio="6"],html:not(.js) body:not(.lotus) .nav>a[data-prio="3"]{display:none}}
@media (min-width:921px) and (max-width:1276px){html:not(.js) body.lotus .nav>a[data-prio="3"]{display:none}}
@media (min-width:921px) and (max-width:1109px){html:not(.js) body.lotus .nav>a[data-prio="2"]{display:none}}
@media (min-width:921px) and (max-width:957px){html:not(.js) body.lotus .nav>a[data-prio="1"]{display:none}}
@media (min-width:921px) and (max-width:1018px){html:not(.js) body:not(.lotus) .nav>a[data-prio="2"]{display:none}}

/* ---------- Lotus: its own type on the same bones ---------- */
@media (max-width:920px){
  body.lotus .nav-dd-btn{min-height:58px;border-bottom-color:var(--grey);font:400 1.45rem/1.15 var(--ui);letter-spacing:0}
  body.lotus .nav .nav-dd-panel{border-bottom-color:var(--grey)}
  body.lotus .nav .nav-dd-panel a{font:400 1.05rem/1.25 var(--ui);letter-spacing:0;border-left-color:var(--grey)}
  body.lotus .nav .nav-dd-panel a[aria-current="page"]{border-left-color:var(--gold,currentColor)}
  body.lotus .nav .nav-dd-all a{font-weight:400}
}
@media (min-width:921px){
  body.lotus .nav-dd-btn{padding:0 12px 0 14px;font:400 .95rem/1 var(--ui);letter-spacing:.005em;border-radius:0}
  body.lotus .nav-dd-btn:hover,body.lotus .nav-dd.is-open>.nav-dd-btn{text-decoration-color:var(--peri);text-decoration-thickness:2px;text-underline-offset:.5em}
  body.lotus .nav-dd.is-current>.nav-dd-btn{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:.5em}
  body.lotus .nav-dd-panel{border-color:var(--grey)}
  body.lotus .nav .nav-dd-panel a{font:400 .95rem/1.2 var(--ui);letter-spacing:.005em}
  body.lotus .nav .nav-dd-panel a[aria-current="page"]{text-decoration-color:var(--gold)}
  body.lotus .nav-dd-all{border-top-color:var(--grey)}
  body.lotus .nav .nav-dd-all a{font-weight:400}
}
@media (min-width:921px) and (max-width:1040px){body.lotus .nav-dd-btn{padding:0 8px 0 10px}}

/* ---------- the booking cards: the two policy pages under the button ---------- */
.side-links{display:flex;flex-wrap:wrap;gap:0 18px;margin:14px 0 0}
.side-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--olive)}

/* ---------- the footer's links elsewhere (Otis, 2026-10-06): Instagram and
   Facebook as icon + name, the Verified on ORCounselors badge under them
   (_nav.php mm_social_html). Every target is 44px tall; the -11px lines the
   icons up with the column's text. The badge is small and in the footer's
   own colour; its words may wrap under the compass in a narrow column
   (max-width keeps it from widening Lotus's max-content Elsewhere column). */
.foot-social{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:14px 0 0 -11px}
.foot-social p{margin:0}
.foot-social-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px}
.site-foot .foot-social a{display:inline-flex;align-items:center;gap:8px;width:auto;min-width:44px;height:auto;min-height:44px;margin:0;padding:0 12px 0 11px;border:0;border-radius:999px;background:none;color:inherit;text-decoration:none;opacity:.88;transition:opacity .18s ease,background-color .18s ease}
.site-foot .foot-social a:hover,.site-foot .foot-social a:focus-visible{opacity:1;background:rgba(127,127,127,.14)}
.foot-social svg{display:block;flex:none}
.foot-social-row span{font-size:.95rem;line-height:1.2}
.site-foot .foot-verified a{gap:7px;max-width:17.5em;padding-top:4px;padding-bottom:4px;font-size:.8rem;line-height:1.3;letter-spacing:.01em;opacity:.78}
.foot-verified svg{opacity:.9}
.foot-nav .foot-social{margin:4px 0 0 -11px}
/* under the logo, on a line of its own, whatever the brand block's flex direction */
.foot-brand.has-social{flex-wrap:wrap}
.foot-brand .foot-social{flex-basis:100%}

@media (prefers-reduced-motion:reduce){
  .nav-chev,html.js [data-menu-panel] .nav-dd-btn,html.js body.menu-open [data-menu-panel] .nav-dd-btn{transition:none}
}
@media print{.nav-dd-panel{display:none!important}}