/* Vespella mobile and tablet navigation — one compact row, accessible drawer. 
   The original desktop navigation, home artwork and page compositions remain unchanged. */
.mobile-menu-toggle { display:none; }
.mobile-menu-backdrop[hidden] { display:none !important; }
@media (max-width:1199px) {
  html { scroll-padding-top: 90px; }
  body { --hero-header-height: 74px; }
  .simple-nav-wrap {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(5px, 1.4vw, 16px);
    width:min(100%, var(--max));
    min-height:74px;
    height:74px;
    padding-top:0;
    padding-bottom:0;
  }
  .simple-nav-wrap > .logo {
    font-size:clamp(18px, 2.4vw, 22px);
    grid-area:auto;
    min-width:0;
    width:auto;
    flex:1 1 auto;
    white-space:nowrap;
  }
  .simple-nav-wrap > .logo > span {font-size:6px;margin-top:6px;letter-spacing:.19em;}
  .header-book.button {
    display:inline-flex;
    grid-area:auto;
    flex:0 0 auto;
    min-height:44px;
    padding:9px clamp(11px,2vw,17px);
    font-size:11px;
    gap:9px;
    white-space:nowrap;
  }
  .header-book.button svg {width:15px;}
  .mobile-menu-toggle {
    display:inline-flex;
    grid-area:auto;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(213,184,141,.48);
    border-radius:50%;
    background:#162023;
    color:var(--ivory);
    transition:background .22s,border-color .22s;
  }
  .mobile-menu-toggle:hover,.mobile-menu-toggle[aria-expanded="true"] {background:#273034;border-color:var(--gold);}
  .mobile-menu-toggle:focus-visible {outline:2px solid var(--gold);outline-offset:3px;}
  .menu-icon {display:block;position:relative;width:19px;height:19px;}
  .menu-icon i {position:absolute;left:0;top:50%;height:1.5px;width:100%;display:block;background:var(--ivory);border-radius:2px;transition:transform .22s;}
  .menu-icon i:first-child {transform:translateY(-5px);}
  .menu-icon i:last-child {transform:translateY(4px);}
  .mobile-menu-toggle[aria-expanded="true"] .menu-icon i:first-child {transform:translateY(0) rotate(45deg);}
  .mobile-menu-toggle[aria-expanded="true"] .menu-icon i:last-child {transform:translateY(0) rotate(-45deg);}
  /* Only hide the menu when JavaScript is active. Without JS, links stay available. */
  html.js-navigation .primary-nav {
    position:fixed;
    z-index:42;
    top:74px;
    inset-inline:0;
    width:100%;
    height:auto;
    max-height:calc(100dvh - 74px - env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-padding-block:12px;
    display:none;
    grid-template-columns:none;
    gap:0;
    margin:0;
    padding:12px max(24px, env(safe-area-inset-left)) calc(22px + env(safe-area-inset-bottom));
    border:0;
    border-top:1px solid var(--line);
    border-bottom:1px solid rgba(213,184,141,.32);
    background:#111a1c;
    box-shadow:0 24px 45px rgba(0,0,0,.45);
    text-align:left;
  }
  html.js-navigation .primary-nav.is-open {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
  }
  html.js-navigation .primary-nav > a,
  html.js-navigation .primary-nav .nav-session-group {
    display:flex;
    width:100%;
    grid-column:auto;
    justify-content:flex-start;
    align-items:center;
    margin:0;
    border-bottom:1px solid var(--line);
    flex-shrink:0;
    gap:0;
  }
  html.js-navigation .primary-nav > a:not(.nav-instagram),
  html.js-navigation .primary-nav .nav-how {
    position:relative;
    display:flex;
    flex:1 1 auto;
    width:100%;
    min-height:58px;
    justify-content:space-between;
    align-items:center;
    padding:12px 3px;
    color:var(--ivory);
    font-family:var(--serif);
    font-size:clamp(17px,4.6vw,22px);
    line-height:1.3;
    white-space:normal;
    text-align:left;
    font-weight:400;
  }
  html.js-navigation .primary-nav > a:not(.nav-instagram)::after,
  html.js-navigation .primary-nav .nav-how::after {display:none;}
  html.js-navigation .primary-nav > a:not(.nav-instagram)::before,
  html.js-navigation .primary-nav .nav-how::before {
    content:'↗';
    position:absolute;
    right:4px;
    top:50%;
    transform:translateY(-50%);
    color:var(--gold);
    font:400 18px/1 var(--sans);
    opacity:.65;
  }
  html.js-navigation .primary-nav [aria-current="page"] {color:var(--gold) !important;}
  html.js-navigation .primary-nav [aria-current="page"]::before {opacity:1;}
  html.js-navigation .primary-nav > .nav-instagram {
    flex:none;
    width:100%;
    min-height:58px;
    justify-content:flex-start;
    color:var(--gold);
    padding:10px 3px;
    border-bottom:0;
  }
  html.js-navigation .primary-nav > .nav-instagram::after {
    content:'Instagram';
    display:inline;
    position:static;
    background:none;
    transform:none;
    width:auto;
    height:auto;
    margin-left:14px;
    color:var(--ivory);
    font-family:var(--sans);
    font-size:13px;
  }
  .mobile-menu-backdrop:not([hidden]) {
    position:fixed;
    z-index:39;
    inset:74px 0 0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(3px);
  }
  body.mobile-nav-open {overflow:hidden;}
  /* Shared headings: their centerlines/spacing don't jump when switching pages. */
  body[data-page="services"] .page-heading.compact-heading,
  body[data-page="consultations"] .page-heading.compact-heading,
  body[data-page="how"] .page-heading.compact-heading,
  body[data-page="contacts"] .page-heading.compact-heading {
    padding-top:calc(var(--hero-header-height) + 20px);
    padding-bottom:20px;
    text-align:center;
  }
  body[data-page="services"] .compact-heading > .breadcrumbs,
  body[data-page="consultations"] .compact-heading > .breadcrumbs,
  body[data-page="how"] .compact-heading > .breadcrumbs,
  body[data-page="contacts"] .compact-heading > .breadcrumbs {justify-content:center;}
  body[data-page="services"] .compact-heading > h1,
  body[data-page="consultations"] .compact-heading > h1,
  body[data-page="how"] .compact-heading > h1,
  body[data-page="contacts"] .compact-heading > h1 {
    margin-inline:auto;
    text-align:center;
  }
  body[data-page="services"] .compact-heading > p:last-child,
  body[data-page="consultations"] .compact-heading > p:last-child,
  body[data-page="how"] .compact-heading > p:last-child,
  body[data-page="contacts"] .compact-heading > p:last-child {
    margin-inline:auto;
    text-align:center;
  }
  /* Header height is smaller; preserve the rest of the home hero typography/art. */
  .home {--hero-header-height:74px;}
  .legal-main {padding-top:0;}
  .footer-brand {letter-spacing:.015em;line-height:1.6;white-space:normal;}
}
@media (max-width:599px) {
  .simple-nav-wrap {padding-inline:max(16px,env(safe-area-inset-left));}
  .simple-nav-wrap > .logo {font-size:clamp(16px,4.6vw,20px);letter-spacing:.09em;}
  .simple-nav-wrap > .logo > span {font-size:5.5px;letter-spacing:.08em;}
  .header-book.button {font-size:10px;gap:5px;padding-inline:12px;}
  .header-book.button svg {width:13px;}
  .mobile-menu-toggle {flex-basis:44px;}
  body[data-page="services"] .compact-heading > h1,
  body[data-page="consultations"] .compact-heading > h1,
  body[data-page="how"] .compact-heading > h1,
  body[data-page="contacts"] .compact-heading > h1 {
    white-space:normal;
    font-size:clamp(27px,7.5vw,39px);
    line-height:1.24;
    text-wrap:balance;
  }
  .footer-row {align-items:center;}
  .footer-brand {display:block;max-width:29ch;}
}
@media (max-width:359px) {
  .simple-nav-wrap {gap:5px;padding-inline:12px;}
  .simple-nav-wrap > .logo {font-size:16px;}
  .simple-nav-wrap > .logo > span {font-size:5px;}
  .header-book.button {font-size:9px;padding-inline:9px;}
  .header-book.button svg {width:12px;}
}
@media (prefers-reduced-motion:reduce) {
  .menu-icon i,.mobile-menu-toggle {transition:none;}
  .mobile-menu-backdrop {backdrop-filter:none;}
}

/* No-JavaScript fallback keeps all links available in their original layout. */
@media (max-width:1199px) {
  html:not(.js-navigation) .mobile-menu-toggle {display:none;}
  html:not(.js-navigation) .simple-nav-wrap {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    height:auto;
    min-height:110px;
    padding-block:9px 0;
  }
  html:not(.js-navigation) .primary-nav {
    position:static;
    display:flex;
    grid-column:1/-1;
    grid-row:2;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    width:100%;
  }
}
/* Distinct close glyph prevents ambiguous diagonal-line rendering on narrow screens. */
@media (max-width:1199px) {
  .mobile-menu-toggle[aria-expanded="true"] .menu-icon {display:none;}
  .mobile-menu-toggle[aria-expanded="true"]::after {
    content:"×";
    display:block;
    font:300 27px/1 var(--sans);
    color:var(--ivory);
    translate:0 -1px;
  }
}

/* Low-height landscape devices must start at the FIRST link rather than
   centering a taller flex column through the fixed top edge. */
@media (max-width:1199px) and (orientation:landscape) and (max-height:520px) {
  html.js-navigation .primary-nav {
    padding-top:6px;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
  }
  html.js-navigation .primary-nav > a:not(.nav-instagram),
  html.js-navigation .primary-nav .nav-how {
    min-height:41px;
    padding-block:6px;
    font-size:17px;
    line-height:1.25;
  }
  html.js-navigation .primary-nav > .nav-instagram {
    min-height:42px;
    padding-block:6px;
  }
}