/* R049 header navigation (owner request 9 Nov 2026: the nine nav items must arrange themselves tastefully at any window size).
   Source: tools/publishing/visual/r049/nav.css, served as /r049/nav.css; replaces /r043/nav.css (whose rules survive below as
   the no-JavaScript fallback). Script: /r049/nav.js ("Priority+").
   With JavaScript (html.psg-nav-plus), from 1025 px: every label stays on ONE line at the design's own size; first the spacing
   between labels tightens (16 -> 8 px per side, --psg-nav-pad set by nav.js), then any items that still do not fit move, lowest priority first, into a "More" disclosure at the end of the menu (Home, Stones, Contact and the current
   page stay visible longest). Below 1025 px the existing side drawer is unchanged and lists every item. */

/* ---- JavaScript: Priority+ ---------------------------------------------------------------------------------------------------- */
.psg-more-item[hidden],.psg-more-list[hidden]{display:none!important}
@media (min-width:1025px){
  html.psg-nav-plus #masthead .psg-fp-nav{flex:1 1 0;min-width:0}
  html.psg-nav-plus #masthead .psg-fp-menu{flex-wrap:nowrap}
  html.psg-nav-plus #masthead .psg-fp-menu>li{flex:0 0 auto}
  html.psg-nav-plus #masthead .psg-fp-menu>li>a{white-space:nowrap;max-width:none;padding-inline:var(--psg-nav-pad,clamp(8px,-16.0465px + 2.346vw,16px))}
  #masthead .psg-more-item{position:relative;display:flex;align-items:center}
  #masthead .psg-more-btn{display:inline-flex;align-items:center;gap:6px;height:32px;margin:0;padding:0 var(--psg-nav-pad,clamp(8px,-16.0465px + 2.346vw,16px));border:0;background:none;
    color:var(--fp-text);font:inherit;font-size:clamp(14px,7.98325px + .587vw,16px);line-height:1;white-space:nowrap;cursor:pointer;transition:color .4s}
  #masthead .psg-more-btn:hover,#masthead .psg-more-btn[aria-expanded="true"]{color:var(--fp-hover)}
  #masthead .psg-more-btn.is-current{color:var(--fp-current)}
  #masthead .psg-more-btn:focus-visible{outline:2px solid var(--fp-current);outline-offset:2px;border-radius:999px}
  #masthead .psg-more-btn svg{width:12px;height:12px;transition:transform .2s}
  #masthead .psg-more-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
  /* the panel mirrors the language list (same glass, radius and row height) */
  #masthead .psg-more-list{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-end:0;z-index:1000;min-inline-size:220px;margin:0;padding:8px;list-style:none;
    border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(16,13,11,.86);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
    box-shadow:0 18px 40px rgba(0,0,0,.35)}
  #masthead .psg-more-list>li{display:block}
  #masthead .psg-more-list>li>a{display:flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:12px;color:#e9e2d6;text-decoration:none;font:400 15px/1.3 Inter,sans-serif;white-space:nowrap}
  #masthead .psg-more-list>li>a:hover,#masthead .psg-more-list>li>a:focus-visible{background:rgba(255,255,255,.06);color:#fff}
  #masthead .psg-more-list>li>a[aria-current="page"]{color:var(--fp-current)}
  html[lang=ar] #masthead .psg-more-list>li>a{font-family:inherit}
}
@media (max-width:1024px){#masthead .psg-more-item{display:none!important}}

/* ---- no JavaScript: the R043 arrangement (balanced two-line long labels, tighter spacing) --------------------------------------- */
@media (min-width:1025px) and (max-width:1440px){
  html:not(.psg-nav-plus) body #masthead .psg-fp-menu>li>a{white-space:nowrap;padding-inline:clamp(4px,calc(-14px + 2.1vw),16px)!important}
  html:not(.psg-nav-plus) body #masthead .psg-fp-menu>li{flex-shrink:0}
  html:not(.psg-nav-plus) body #masthead .psg-fp-menu>li>a.psg-nav-long{white-space:normal;text-wrap:balance;text-align:center;line-height:1.15;height:auto;min-height:32px;max-width:7.6em!important}
  html:not(.psg-nav-plus) body #masthead .psg-fp-menu>li:has(>a.psg-nav-long){flex-shrink:1}
  html:not(.psg-nav-plus):is([lang=el],[lang=fr]) body #masthead .psg-fp-menu>li>a.psg-nav-long{max-width:9.2em!important}
  html:not(.psg-nav-plus) body #masthead .psg-fp-pill{gap:clamp(8px,calc(-20px + 3vw),24px)}
}
@media (min-width:1025px) and (max-width:1299px){
  html:not(.psg-nav-plus) body #masthead .psg-fp-logo{width:15%!important;max-width:15%!important}
  html:not(.psg-nav-plus) body #masthead .psg-fp-menu>li>a{font-size:14px}
}
@media (min-width:1025px) and (max-width:1099px){
  html:not(.psg-nav-plus) body #masthead .psg-fp-logo{width:14%!important;max-width:14%!important}
  html:not(.psg-nav-plus) body #masthead .psg-fp-menu>li>a{font-size:13.5px;padding-inline:4px!important}
  html:not(.psg-nav-plus):is([lang=el],[lang=fr]) body #masthead .psg-fp-menu>li>a.psg-nav-long{max-width:10.5em!important}
}