/* Cocoon Lux preview: the menu, loaded on every page after base.css. Owned by the nav agent (wp/ARCHITECTURE.md).
   The markup is in wp/src/partials/header.html and the behaviour in assets/js/nav.js; the header bar itself, its
   logo and its condensed state are in base.css. The approved design is design/project/Nav.dc.html (desktop) and
   NavMobile.dc.html (phone), with the links of design/nav-ia.json.
   - Below 1200px: the Menu button opens a full-screen ivory menu. Its five sections open one at a time (the open
     heading stays pinned at the top), the three clinics follow, and Book a consultation and Book via WhatsApp are
     pinned at the bottom (from 768px the header keeps its own Book button, so only WhatsApp is pinned).
   - From 1200px: six top items in the header. Each opens a panel below the header (intro, link groups, the cream
     clinics strip with Contact Us and Book via WhatsApp) over a dark veil; nav.js moves the shared strip into the
     open panel. Without JavaScript a panel opens on hover and while it holds keyboard focus.
   Every size is 16px or larger (the editorial standard, SPEC 1.5); reduced motion turns every transition off (base.css). */

@keyframes lux-fade{from{opacity:0}}
@keyframes lux-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Menu button (below 1200px) ---------- */
.lux-menu-toggle,.lux-menu-fallback{display:none;align-items:center;gap:12px;min-height:48px;margin:0;padding:0 8px;background:none;border:0;border-radius:0;color:inherit;font-family:var(--sans);font-size:16px;font-weight:500;line-height:1;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:color .3s}
.lux-nav-ready .lux-menu-toggle{display:inline-flex}
/* without the menu script the Menu is a plain link to the footer navigation, in the button's place */
.lux-menu-fallback{display:inline-flex}
.lux-nav-ready .lux-menu-fallback{display:none}
@media (hover:hover){
  .lux-menu-toggle:hover,.lux-menu-fallback:hover{color:var(--gold-pale)}
  .lux-header.is-condensed .lux-menu-toggle:hover,.lux-header.is-condensed .lux-menu-fallback:hover,.lux-menu-open .lux-header .lux-menu-toggle:hover{color:var(--gold-text)}
}
/* the open menu's Close cross, drawn in CSS */
.lux-menu-toggle__x{display:none;position:relative;flex:none;width:18px;height:18px}
.lux-menu-toggle__x::before,.lux-menu-toggle__x::after{content:"";position:absolute;left:0;top:8px;width:18px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.lux-menu-toggle__x::after{transform:rotate(-45deg)}
.lux-menu-open .lux-menu-toggle__x{display:inline-block}

/* the open menu is the ivory, full-height header (it does not condense) */
.lux-menu-open .lux-header,.lux-menu-open .lux-header.is-condensed{color:var(--espresso)}
.lux-menu-open .lux-header::before{opacity:1;transform:none}
.lux-menu-open .lux-header::after{opacity:1;transform:none}
.lux-menu-open .lux-header .lux-header__bar,.lux-menu-open .lux-header .lux-header__logo{transform:none}
/* focus rings on the ivory menu and panels: espresso, as on every light ground */
html.lux-menu-open .lux-header :focus-visible,html.lux-mega-open .lux-header :focus-visible{outline-color:var(--espresso)}

/* ---------- The full-screen menu (below 1200px) ---------- */
.lux-nav,.lux-nav__scrim{display:none}
.lux-nav.is-open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;height:calc(100vh - var(--h));height:calc(100dvh - var(--h));background-color:var(--ivory);background-image:url(../img/silk-satin-720x4320.webp);background-image:image-set(url(../img/silk-satin-720x4320.avif) type("image/avif"),url(../img/silk-satin-720x4320.webp) type("image/webp"));background-position:50% 0;background-size:1440px auto;background-repeat:repeat;color:var(--bark);font-size:17px;line-height:1.7;animation:lux-fade .3s var(--ease)}
.lux-nav__scroll{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;padding:0 var(--gutter) 40px}
.lux-nav__list{padding-top:4px}
.lux-nav__list>li{border-bottom:1px solid var(--line)}
/* Locations is the always-visible clinics block on phones */
.lux-nav__item--locations{display:none}

/* section headings: Playfair, a plus that turns into a minus; the open one in gold italic, pinned at the top */
.lux-nav__top{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:64px;margin:0;padding:12px 2px 12px 0;background:none;border:0;border-radius:0;color:var(--espresso);font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;letter-spacing:0;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .3s}
.lux-nav__item.is-open>.lux-nav__top{position:sticky;top:0;z-index:1;color:var(--gold);background:var(--ivory);border-bottom:1px solid var(--line-soft)}
.lux-nav__icon{position:relative;flex:none;width:16px;height:16px}
.lux-nav__icon::before,.lux-nav__icon::after{content:"";position:absolute;left:0;top:7px;width:16px;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.lux-nav__icon::after{transform:rotate(90deg)}
.lux-nav__item.is-open>.lux-nav__top .lux-nav__icon::after{transform:none}

/* a section's links: they open by height, and stay out of the tab order while closed */
.lux-mega{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.lux-mega__in{min-height:0;overflow:hidden;visibility:hidden;margin:0 -6px;padding:0 6px;transition:visibility .45s}
.lux-nav__item.is-open>.lux-mega{grid-template-rows:1fr}
.lux-nav__item.is-open>.lux-mega>.lux-mega__in{visibility:visible}
.lux-mega__grid{padding:10px 0 30px}
.lux-mega__title,.lux-mega__line,.lux-mega__photo,.lux-mega__strip{display:none}
.lux-mega__quiet{display:inline-flex;align-items:center;min-height:48px;font-size:16px;font-weight:500;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--gold-text);text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:7px;transition:color .3s,text-decoration-color .3s}
.lux-mega__quiet:hover{color:var(--espresso);text-decoration-color:var(--espresso)}
.lux-mega__note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.lux-mega__note p{font-size:16px;line-height:1.5;color:var(--umber)}
.lux-mega__head{margin:26px 0 2px;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.lux-mega__link{display:flex;align-items:center;min-height:48px;padding:11px 0;border-bottom:1px solid var(--line-soft);color:var(--espresso);font-size:17px;line-height:1.4}
.lux-mega__link:hover,.lux-mega__link[aria-current="page"]{color:var(--gold-text)}

/* Our clinics in Bali, at the end of the phone menu */
.lux-nav__clinics{margin-top:34px}
.lux-nav__clinics-label{margin:0 0 6px;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.lux-nav__clinic-list{border-top:1px solid var(--line-soft)}
.lux-nav__clinic-list li{border-bottom:1px solid var(--line-soft)}
.lux-nav__clinic{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:52px;padding:13px 0;color:var(--umber)}
.lux-nav__clinic:hover{color:var(--umber)}
.lux-nav__clinic-name{font-size:17px;font-weight:500;line-height:1.4;color:var(--espresso);transition:color .3s}
.lux-nav__clinic:hover .lux-nav__clinic-name{color:var(--gold-text)}
.lux-nav__clinic-street{font-size:16px;line-height:1.4;text-align:right}
.lux-nav__more{margin-top:6px}

/* Book a consultation and Book via WhatsApp, pinned at the bottom under a soft fade */
.lux-nav__actions{position:relative;flex:none;display:flex;flex-direction:column;gap:10px;padding:12px var(--gutter) calc(18px + env(safe-area-inset-bottom,0px));background:var(--ivory);border-top:1px solid var(--line-soft)}
.lux-nav__actions::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% + 1px);height:36px;background:linear-gradient(to bottom,rgba(251,248,242,0),var(--ivory));pointer-events:none}
.lux-nav__actions>li{display:flex;flex-direction:column}
.lux-nav__actions .lux-pill{min-height:52px}
.lux-nav__wa:hover{border-color:var(--espresso);color:var(--espresso)}

/* 600 to 767: the phone menu in the centred 560px column, as the rest of the page */
@media (min-width:600px) and (max-width:767.98px){
  .lux-nav__scroll,.lux-nav__actions{padding-inline:calc((100% - 560px)/2)}
}

/* ---------- 768 to 1199: tablet (the header keeps its Book button) ---------- */
@media (min-width:768px){
  .lux-menu-toggle,.lux-menu-fallback{margin-right:-8px}
  .lux-menu-open .lux-header .lux-header__consult{background:var(--gold);color:var(--espresso)}
  .lux-menu-open .lux-header .lux-header__consult:hover{background:var(--espresso);color:var(--ivory)}
  .lux-nav.is-open{font-size:18px}
  .lux-nav__scroll,.lux-nav__actions{padding-inline:max(var(--gutter),calc((100% - 640px)/2))}
  .lux-nav .lux-nav__actions>.lux-nav__book{display:none}
}

/* ---------- 1200 and up: the desktop navigation and its panels ---------- */
@media (min-width:1200px){
  .lux-menu-toggle,.lux-nav-ready .lux-menu-toggle,.lux-menu-fallback{display:none}
  .lux-nav,.lux-nav.is-open{display:block;position:static;align-self:stretch;height:auto;background:none;color:inherit;font-size:inherit;line-height:inherit;animation:none}
  /* the items fill the visible header, so hovering anywhere in it counts, and nothing below it is covered */
  .is-condensed .lux-nav{align-self:center;height:var(--hc)}
  .lux-nav__scroll{display:contents}
  .lux-nav__list{display:flex;height:100%;gap:clamp(24px,2.6vw,40px);padding:0}
  .lux-nav__list>li{border:0}
  .lux-nav__item,.lux-nav__item--locations{display:flex;align-items:center}

  /* top items: Jost 16px, a gold line under the label on hover and while open, a chevron that turns up */
  .lux-nav__top,.lux-nav__item.is-open>.lux-nav__top{position:relative;top:auto;z-index:auto;justify-content:flex-start;gap:10px;width:auto;min-height:48px;padding:0;border:0;background:none;color:inherit;font-family:var(--sans);font-style:normal;font-size:16px;line-height:1.4;letter-spacing:.03em;white-space:nowrap;opacity:.92;transition:color .3s,opacity .3s}
  .lux-nav__label{padding:4px 0;background:linear-gradient(var(--gold-light),var(--gold-light)) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
  .is-condensed .lux-nav__label,.lux-mega-open .lux-nav__label{background-image:linear-gradient(var(--gold),var(--gold))}
  .lux-nav__top:hover .lux-nav__label,.lux-nav__item.is-open>.lux-nav__top .lux-nav__label{background-size:100% 1px}
  /* the section of the page on screen (nav.js marks its item): its label stays underlined, as on the artboards */
  .lux-nav__item.is-current>.lux-nav__top .lux-nav__label{background-size:100% 1px}
  .lux-nav__icon{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.75;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease),color .3s,opacity .3s}
  .lux-nav__icon::before,.lux-nav__icon::after{content:none}
  .lux-nav__item.is-open>.lux-nav__top .lux-nav__icon{opacity:1;color:var(--gold);transform:translateY(2px) rotate(-135deg)}
  .is-condensed .lux-nav__top{opacity:1}

  /* open: the ivory header over a dark veil; the other items in bark, the Book button in gold */
  .lux-mega-open .lux-header,.lux-mega-open .lux-header.is-condensed{color:var(--espresso)}
  .lux-mega-open .lux-header::before,.lux-mega-open .lux-header::after{opacity:1}
  .lux-mega-open .lux-header::before{background:var(--ivory)}
  .lux-mega-open .lux-header__bar{pointer-events:auto}
  .lux-mega-open .lux-nav__top{color:var(--bark);opacity:1}
  .lux-mega-open .lux-nav__item.is-open>.lux-nav__top{color:var(--espresso)}
  .lux-mega-open .lux-header .lux-header__consult{background:var(--gold);color:var(--espresso)}
  .lux-mega-open .lux-header .lux-header__consult:hover{background:var(--espresso);color:var(--ivory)}
  .lux-mega-open .lux-nav__scrim{display:block;position:fixed;inset:0;z-index:-1;background:rgba(28,20,14,.72);pointer-events:auto;animation:lux-fade .3s var(--ease) both}

  /* the panel: full width under the header (also when it has condensed), at most one screen tall */
  .lux-mega{--mg-intro:clamp(232px,21.1vw,304px);--mg-gap:clamp(32px,3.34vw,48px);display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - var(--h));max-height:calc(100dvh - var(--h));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;grid-template-rows:none;transition:none;border-top:1px solid var(--line-soft);background-color:var(--ivory);background-image:url(../img/silk-satin-720x4320.webp);background-image:image-set(url(../img/silk-satin-720x4320.avif) type("image/avif"),url(../img/silk-satin-720x4320.webp) type("image/webp"));background-position:50% 0;background-size:1440px auto;background-repeat:repeat;color:var(--bark);font-size:16px;line-height:1.55;letter-spacing:0;text-align:left;white-space:normal;cursor:auto}
  .is-condensed .lux-mega{top:calc(100% + var(--hc) - var(--h) - var(--h-shift));max-height:calc(100vh - var(--hc));max-height:calc(100dvh - var(--hc))}
  .lux-nav__item.is-open>.lux-mega{display:block}
  .lux-mega-drop .lux-nav__item.is-open>.lux-mega{animation:lux-drop .3s var(--ease) both}
  .lux-mega__in,.lux-nav__item.is-open>.lux-mega>.lux-mega__in{visibility:visible;overflow:visible;margin:0;padding:0}

  .lux-mega__grid{display:grid;grid-template-columns:var(--mg-intro) repeat(3,minmax(0,1fr));column-gap:var(--mg-gap);align-items:start;padding:36px var(--gutter) 40px}
  .lux-mega__intro{align-self:stretch;padding-right:clamp(24px,2.5vw,36px);border-right:1px solid var(--line-soft)}
  /* the title is one piece in one colour (no italic gold half, editorial pass 13 Oct 2026); balanced so a
     two-line title breaks evenly. The line under it is one sentence of 12 to 20 words. */
  .lux-mega__title{display:block;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.14;letter-spacing:-.01em;color:var(--espresso);text-wrap:balance}
  .lux-mega__line{display:block;margin-top:16px;font-size:17px;line-height:1.65;color:var(--umber);text-wrap:pretty}
  .lux-mega__overview{margin-top:16px}
  .lux-mega__quiet{min-height:44px}
  .lux-mega__note{margin-top:26px;padding-top:20px}

  /* link groups: a Playfair heading over a hairline with a short gold lead, links that show a chevron on hover */
  .lux-mega__col{display:grid;row-gap:32px}
  .lux-mega__quad{grid-column:span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--mg-gap);row-gap:32px}
  .lux-mega__head{margin:0 0 12px;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.25;letter-spacing:0;text-transform:none;color:var(--espresso)}
  .lux-mega__links,.lux-mega__clinic-body{padding-top:1px;background:linear-gradient(var(--gold),var(--gold)) 0 0/40px 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat}
  .lux-mega__link{position:relative;min-height:44px;padding:10px 20px 10px 0;font-size:16px;line-height:1.4}
  .lux-mega__link::after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:1.5px solid var(--gold-text);border-right:1.5px solid var(--gold-text);opacity:0;transform:translateX(-8px) rotate(45deg);transition:opacity .3s,transform .3s var(--ease)}
  .lux-mega__link:hover::after{opacity:1;transform:translateX(0) rotate(45deg)}
  .lux-nav__item--injectables .lux-mega__link{min-height:48px;padding-block:12px}

  /* Locations: the three clinics with hours and directions */
  .lux-mega__clinics{grid-column:2/span 2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
  .lux-mega__clinic .lux-mega__head a{color:var(--espresso);transition:color .3s}
  .lux-mega__clinic .lux-mega__head a:hover{color:var(--gold-text)}
  .lux-mega__clinic-body{padding-top:14px}
  .lux-mega__addr{min-height:4.65em;font-size:16px;line-height:1.55;color:var(--umber)}
  .lux-mega__street{color:var(--espresso)}
  .lux-mega__hours{margin:14px 0 0;font-size:16px;line-height:1.55;font-variant-numeric:lining-nums tabular-nums}
  .lux-mega__hours dt{color:var(--umber)}
  .lux-mega__hours dd{margin:0 0 6px;color:var(--espresso)}

  /* the panel photo (4:5) in the fourth column: Injectables, Locations and About (src/partials/shared.json) */
  .lux-mega__photo{display:block;grid-column:4;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--line-soft)}
  .lux-mega__photo picture{display:block;height:100%}
  .lux-mega__photo img{display:block;width:100%;height:100%;object-fit:cover}
  .lux-nav__item--injectables .lux-mega__photo img{object-position:58% 40%}
  .lux-nav__item--locations .lux-mega__photo img{object-position:30% 35%}
  .lux-nav__item--about .lux-mega__photo img{object-position:8% 50%}

  /* the cream strip: the clinics, Contact Us and Book via WhatsApp (nav.js moves them into the open panel) */
  .lux-nav__clinics,.lux-nav__actions{display:none}
  .lux-mega__strip{display:flex;align-items:center;gap:24px;padding:12px var(--gutter);background:var(--cream);border-top:1px solid var(--line-soft)}
  .lux-mega__strip:empty{display:none}
  .lux-mega__strip .lux-nav__clinics{display:contents}
  .lux-mega__strip .lux-nav__clinics-label{flex:none;width:calc(var(--mg-intro) + var(--mg-gap) - 24px);margin:0;white-space:nowrap}
  .lux-mega__strip .lux-nav__clinic-list{flex:1 1 auto;display:flex;gap:36px;min-width:0;border:0}
  .lux-mega__strip .lux-nav__clinic-list li{border:0}
  .lux-mega__strip .lux-nav__clinic{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-height:48px;padding:0}
  .lux-mega__strip .lux-nav__clinic-name{font-size:16px;line-height:1.45}
  .lux-mega__strip .lux-nav__clinic-street{font-size:16px;line-height:1.45;white-space:nowrap;text-align:left}
  .lux-mega__strip .lux-nav__more{flex:none;margin:0}
  .lux-mega__strip .lux-nav__actions{display:flex;flex:none;flex-direction:row;padding:0;background:none;border:0}
  .lux-mega__strip .lux-nav__actions>li{display:block}
  .lux-mega__strip .lux-nav__actions::before{content:none}
  .lux-mega__strip .lux-nav__wa{min-height:52px;padding:0 22px}
  /* on Locations the strip keeps only Contact Us and Book via WhatsApp */
  .lux-nav__item--locations .lux-nav__clinics-label,.lux-nav__item--locations .lux-nav__clinic-list{display:none}
  .lux-nav__item--locations .lux-nav__more{margin-left:auto}

  /* without the menu script: a panel opens on hover and while it holds keyboard focus */
  html:not(.lux-nav-ready) .lux-nav__item:hover>.lux-mega,html:not(.lux-nav-ready) .lux-nav__item:focus-within>.lux-mega{display:block}
}

@media (min-width:1200px) and (max-width:1400px){
  .lux-mega__strip .lux-nav__clinic-street{display:none}
  .lux-mega__strip .lux-nav__clinic-list{gap:28px}
}
@media (min-width:1200px) and (max-width:1365px){
  .lux-mega{--mg-intro:208px;--mg-gap:32px}
  .lux-mega__intro{padding-right:24px}
  .lux-mega__title{font-size:28px}
}

/* a linked top item (Injectables, Treatments, Wellness, Packages): the label is a link to the section's landing page, the chevron opens the panel.
   Below 1200px the link is hidden and the button (label + plus mark) opens the section as before. */
.lux-nav__toplink{display:none}
@media (min-width:1200px){
  .lux-nav__item--linked{gap:0}
  .lux-nav__toplink{display:inline-flex;align-items:center;min-height:48px;color:inherit;font-family:var(--sans);font-size:16px;line-height:1.4;letter-spacing:.03em;white-space:nowrap;text-decoration:none;opacity:.92;transition:color .3s,opacity .3s}
  .is-condensed .lux-nav__toplink{opacity:1}
  .lux-mega-open .lux-nav__toplink{color:var(--bark);opacity:1}
  .lux-mega-open .lux-nav__item.is-open>.lux-nav__toplink{color:var(--espresso)}
  .lux-nav__toplink:hover .lux-nav__label,.lux-nav__toplink:focus-visible .lux-nav__label,.lux-nav__item.is-open>.lux-nav__toplink .lux-nav__label,.lux-nav__item.is-current>.lux-nav__toplink .lux-nav__label{background-size:100% 1px}
  .lux-nav__item--linked>.lux-nav__top,.lux-nav__item--linked.is-open>.lux-nav__top{gap:0;padding-left:10px;justify-content:flex-start}
  /* the arrow button keeps a 30px target without widening the item: its hit area runs into the gap after it,
     so a linked item sits as close to the next one as an unlinked item does */
  .lux-nav__item--linked>.lux-nav__top::after{content:"";position:absolute;top:0;bottom:0;left:0;right:-12px}
  .lux-nav__item--linked>.lux-nav__top .lux-nav__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}