/* Global base + shared header/footer styles. Applies to all 20 pages.
   Page-specific CSS stays in each page's own <style> block. */

/* --- Tap targets (WCAG 2.5.5). Controls that must LOOK smaller keep a 44px
   target via this pseudo-element; never shrink the target. --qst-tap-gap
   widens the box horizontally where neighbours allow. --- */
.qst-tap{position:relative;touch-action:manipulation}
.qst-tap::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + var(--qst-tap-gap,12px));height:44px}

/* The mobile menu panel and overlay carry inline display values, which beat the
   UA stylesheet's [hidden]{display:none}. Without this they render over the page. */
[hidden]{display:none !important}

html{overflow-y:scroll}
body{margin:0;background:var(--warm-ivory,#F5EFE6);color:var(--espresso,#241826);font-family:var(--font-body,Jost,sans-serif);font-size:16px;line-height:1.7}
a{color:var(--aubergine,#4B285A);text-decoration:none}
a:hover{color:var(--aubergine,#4B285A);text-decoration:underline;text-underline-offset:4px}

/* --- Header --- */
.qst-navlinks{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.qst-navlinks a{white-space:nowrap}
.qst-burger{display:none}
@media (max-width:968px){.qst-navlinks{display:none}.qst-burger{display:inline-flex}}
.qst-sub{position:relative}
.qst-sub-left{flex-wrap:nowrap;white-space:nowrap;justify-content:center}
.qst-burger-social{display:none;align-items:center;gap:2px}
@media (max-width:968px){.qst-burger-social{display:inline-flex}}
@media (max-width:968px){.qst-social{display:none !important}}
@media (max-width:700px){
  .qst-sub{flex-direction:column;align-items:center;gap:0 !important;padding-top:4px !important;padding-bottom:10px !important}
  .qst-sub-left{flex-direction:column;align-items:center;gap:0 !important}
  .qst-sub-addr{white-space:nowrap}
}
.qst-logo{height:64px;min-width:200px;object-fit:contain;object-position:left}
@media (max-width:520px){.qst-logo{height:54px;min-width:0;max-width:200px}.qst-sub{font-size:12px}}
@media (max-width:430px){.qst-burger-social{display:none !important}.qst-logo{max-width:180px;min-width:132px}.qst-burger{gap:8px !important}.qst-burger-book{padding:3px 9px !important;letter-spacing:0.1em !important;font-size:12px !important}}

/* Mobile menu animations */
@keyframes qstMenuFade{from{opacity:0}to{opacity:1}}
@keyframes qstMenuSlide{from{transform:translateY(-10px)}to{transform:none}}
@keyframes qstMenuFadeSlide{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes qstMenuReveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes qstMenuFadeOut{from{opacity:1}to{opacity:0}}
@keyframes qstMenuSlideUp{from{transform:none}to{transform:translateY(-10px)}}
@keyframes qstMenuFadeSlideOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}
@keyframes qstMenuConceal{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@media (prefers-reduced-motion: reduce){.qst-anim{animation:none !important}}

/* Announcement bar */
.qst-alert a{color:var(--warm-ivory,#F5EFE6);text-decoration:underline;text-underline-offset:3px}
.qst-alert a:hover{color:#fff;text-decoration:underline}
@media (max-width:520px){.qst-alert{font-size:12px !important;padding-left:44px !important;padding-right:44px !important}}

/* Header interaction states (were style-hover / style-focus attributes) */
.qst-alert-close:hover{opacity:1}
.qst-alert-close:focus{outline:2px solid var(--champagne-gold);outline-offset:-4px}
.qst-navlink:hover{text-decoration:underline;color:var(--aubergine)}
.qst-btn-book:hover{background:#3A1F46;text-decoration:none;color:var(--warm-ivory)}
.qst-social-link:hover{color:var(--espresso)}
.qst-social-link:focus{outline:2px solid var(--aubergine)}
.qst-burger-btn:focus{outline:2px solid var(--aubergine)}
.qst-menu-close:hover{background:var(--champagne-gold);color:#fff}
.qst-menu-close:focus{outline:2px solid var(--aubergine)}
.qst-menu-cta:hover{background:#3A1F46;text-decoration:none;color:var(--warm-ivory,#F5EFE6)}
.qst-menu-cta:focus{outline:2px solid var(--aubergine);outline-offset:2px}
.qst-menu-social:hover{background:var(--champagne-gold);color:#fff}
.qst-menu-contact:hover{color:var(--aubergine)}

/* FAQ accordions (animated by assets/js/faq.js). While an answer animates
   closed its [open] attribute stays on until the motion ends, so turn the
   + icon back as soon as the close starts. */
details[data-closing] .qst-faq-ico,
details[data-closing] .qst-faq-plus{transform:none !important}

/* Skip link (was a style-focus attribute on every page) */
.qst-skip:focus{left:12px;top:12px;outline:2px solid var(--champagne-gold)}

/* --- Footer --- */
.qst-foot-logo{height:100px;object-fit:contain;object-position:left}
@media (max-width:520px){.qst-foot-logo{height:76px;max-width:240px}}
/* Tagline set to the footer logo's width: 19.1px spans the 202px logo. On
   phones the logo is 154px, which would need 14.6px; Jost 300 stays at 16px
   or above, so it runs slightly wider there. */
.qst-foot-tag{font-size:19.1px}
@media (max-width:520px){.qst-foot-tag{font-size:16px}}
/* Footer links: 32px rows by client decision (Oct 2026), tighter than the
   site-wide 44px tap-target rule; still above the WCAG 2.2 AA 24px minimum. */
.qst-foot-link{display:flex;align-items:center;box-sizing:border-box;min-height:32px;color:var(--warm-ivory,#F5EFE6);text-decoration:none}
.qst-foot-link:hover{color:var(--warm-ivory,#F5EFE6);text-decoration:underline;text-underline-offset:4px}
/* Logo left, link columns right, for as long as at least 64px separates them
   (column-gap). Below that the whole column group drops under the logo,
   left-aligned. The logo block grows to take up the slack, which pushes the
   columns right without margin-left:auto: that would keep them right-aligned
   after they wrap onto their own line. Never justify-content:space-between on
   the columns; it dumps the slack between them instead. flex:0 0 auto plus
   max-width:100% means the group wraps as a whole rather than squeezing its
   columns, and still fits a phone screen once it is on its own line. */
.qst-foot-top{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:64px;row-gap:clamp(36px,5vw,56px)}
.qst-foot-top > div:first-child{flex:1 0 auto}
.qst-foot-cols{display:flex;flex:0 0 auto;max-width:100%;flex-wrap:wrap;row-gap:28px;column-gap:48px}
.qst-foot-cols > div{flex:0 0 auto;white-space:nowrap}
@media (max-width:899px){.qst-foot-cols{column-gap:32px}}
@media (max-width:319px){.qst-foot-cols > div{flex:1 1 100%}}