/* Self-hosted Google Fonts (OFL): Gloock for the title, Jost (variable 300-600) in place of
   Wix's licensed Avenir. Latin + latin-ext subsets, the latter for Hungarian ő/ű. */
@font-face { font-family: Gloock; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/gloock-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Gloock; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/gloock-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Jost; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/fonts/jost-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Jost; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/fonts/jost-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Jost; font-style: italic; font-weight: 300; font-display: swap;
  src: url(/fonts/jost-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Jost; font-style: italic; font-weight: 300; font-display: swap;
  src: url(/fonts/jost-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Forum (OFL) for section headings, as on the Wix site */
@font-face { font-family: Forum; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/forum-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Forum; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/forum-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Colours from the Wix site: parchment cover, cream #FFF8EE, brown #726049, near-black footer */
:root {
  color-scheme: light;
  --paper: #ecdfca;
  --cream: #fff8ee;
  --brown: #726049;
  --ink: #000;
  --muted: #403e3c;
  --night: #120909;
  --grey: #807c77;   /* schedule widget: secondary text */
  --line: #b2ada6;   /* grid lines */
  --rule: #ccc6be;   /* rule under the heading */
  --shade: #f2ece2;  /* days with no classes */
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 300 1rem/1.6 Jost, "Avenir Next", Avenir, "Segoe UI", sans-serif;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
}
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--brown); }
a[href^="tel:"] { white-space: nowrap; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; border-radius: 2px; }

/* Hero: the parchment cover with the wordmark, as on the Wix home page */
.hero {
  flex: 1 0 auto;
  background: var(--paper) url(/img/paper.jpg) center / cover no-repeat;
  padding: calc(var(--menu-h) + 12px) var(--gutter) clamp(48px, 8vw, 88px);
  text-align: center;
}
/* Top menu as on Wix: centred items, the selected one marked with a brown bar along the top edge.
   Sticky: transparent over the hero, a translucent parchment bar once the page scrolls (.is-stuck, menu.js).
   menu.js also moves the bar to the section in view; the language links (flag + name) sit on the right. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:root { --menu-h: 52px; } /* menu height, kept exact by menu.js */
html { scroll-padding-top: calc(var(--menu-h) + 12px); }
.menu {
  position: sticky; top: 0; z-index: 10; margin-bottom: calc(-1 * var(--menu-h)); /* overlaps the hero */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  padding: 0 var(--gutter); font-size: .9375rem;
  transition: background-color .2s, box-shadow .2s;
}
.menu.is-stuck {
  background: rgb(236 223 202 / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgb(114 96 73 / .15);
}
.menu-links, .langs { display: flex; flex-wrap: wrap; }
.menu-links { grid-column: 2; justify-content: center; gap: 0 clamp(12px, 2.5vw, 32px); }
.langs { grid-column: 3; justify-self: end; gap: 0 4px; }
.menu a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 52px; padding: 0 10px;
  text-decoration: none; letter-spacing: .02em; transition: box-shadow .15s, color .15s;
}
.menu a:hover { color: var(--brown); }
.menu a.is-active, .langs a[aria-current="true"] { color: var(--brown); box-shadow: inset 0 3px 0 var(--brown); }
/* With JS (menu.js) one bar slides between the menu links instead of each link drawing its own */
.menu-links { position: relative; }
.menu-bar { position: absolute; top: 0; left: 0; width: 0; height: 3px; background: var(--brown); pointer-events: none; }
.has-bar .menu-links a.is-active { box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .bar-ready .menu-bar { transition: transform .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1); }
}
.flag { width: 21px; height: 14px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .12); }
@media (max-width: 760px) {
  /* Phones: no SANCTUARY.hu link (the wordmark is right below), languages as flags only, all on one line */
  :root { --menu-h: 44px; }
  .menu { grid-template-columns: minmax(0, 1fr) auto; padding: 0 6px; }
  .menu-links { grid-column: 1; justify-content: flex-start; gap: 0; }
  .menu-links a:not([href*="#"]) { display: none; }
  .menu a { min-height: 44px; padding: 0 8px; }
  .langs { grid-column: 2; gap: 0; }
  .menu-links a[href="#contact"] { display: none; } /* replaced by the floating contact button */
  .lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.wordmark { display: block; width: min(940px, 100%); height: auto; margin: clamp(8px, 3vw, 28px) auto 0; }
.hero h1 {
  font: 400 clamp(1.3rem, 1.05rem + 1vw, 1.6rem)/1.25 Gloock, Georgia, serif;
  margin: clamp(28px, 6vw, 56px) 0 0;
}
/* Maintenance notice (EN + HU) while the full site is being rebuilt */
.notice {
  max-width: 680px; margin: clamp(24px, 4vw, 36px) auto 0; padding: 22px clamp(18px, 4vw, 32px);
  background: var(--brown); color: var(--cream); border-radius: 6px;
  box-shadow: 0 6px 24px rgb(64 48 30 / .25);
  font-size: 1.0625rem; line-height: 1.5;
}
.notice p { margin: 0; }
.notice p + p { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgb(255 248 238 / .3); }
.notice strong { font-weight: 500; display: block; font-size: 1.1875rem; }
.notice .notice-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; font-size: 1.125rem; font-weight: 500; }
.notice a:hover { color: #fff; }
.notice a:focus-visible { outline-color: var(--cream); }
.to-schedule { margin: 22px 0 0; font-size: 1.0625rem; letter-spacing: .02em; }
.to-schedule a + a { margin-left: 32px; }
.to-schedule a::after { content: ""; display: inline-block; width: .45em; height: .45em; margin: 0 0 .2em .55em;
  border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg); }
.address { font-size: clamp(1.1rem, 1rem + .5vw, 1.375rem); margin: clamp(20px, 4vw, 36px) 0 0; }
.tagline {
  font-style: italic; font-size: clamp(1.1rem, 1rem + .45vw, 1.3125rem); line-height: 1.5;
  max-width: 900px; margin: clamp(28px, 5vw, 48px) auto 0;
}

/* Weekly class schedule, after the Wix "Class Schedule" widget: 7 bordered day columns,
   shaded empty days, brown Book buttons. Below 900px the days stack into a list. */
.schedule { padding: clamp(40px, 6vw, 72px) var(--gutter) 0; }
.schedule > h2, .contact h2 { font: 400 clamp(1.75rem, 1.45rem + 1vw, 2.25rem)/1.2 Forum, Georgia, serif; text-align: center; }
.schedule > h2 { max-width: 1300px; margin: 0 auto; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.week { max-width: 1300px; margin: 0 auto; }
.week-nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 32px 0 26px; }
.week-nav h3 { font: 400 1rem/1.4 Jost, "Avenir Next", Avenir, "Segoe UI", sans-serif; margin: 0; min-width: 12em; text-align: center; }
.week-nav button { display: none; }
.is-paged .week-nav button {
  display: inline-flex; padding: 8px; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 2px;
}
.is-paged .week-nav button:hover { color: var(--brown); }
.is-paged .week-nav button:disabled { opacity: .3; cursor: default; color: var(--ink); }
button:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }
/* Rows: day heads, then five rows per session (time, title, instructor + length, price, Book) repeated
   --rows times (most sessions on one day, set by the build), then bottom space. Days, session lists and
   sessions are subgrids, so each detail lines up across the whole week. Title rows hold two lines, so
   every week is the same height; a longer title grows all title rows alike (1fr), and a one-line title
   sits in the middle of its area */
.days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(var(--rows, 1), auto minmax(calc(2.8 * .9375rem + 2px), 1fr) auto auto auto) 16px; }
.day { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
.day-head { margin: 0 0 16px; text-align: center; font-weight: 300; font-size: .875rem; line-height: 1.4; color: var(--grey); }
.day-head abbr { text-decoration: none; }
.day-head span { display: block; font-size: 1rem; color: var(--ink); }
.day.is-past .day-head span { color: var(--grey); }
.day.is-today .day-head, .day.is-today .day-head span { color: var(--brown); font-weight: 500; }
.sessions, .no-classes { margin: 0; border: 1px solid var(--line); border-right: 0; }
.day:last-child > .sessions, .day:last-child > .no-classes { border-right: 1px solid var(--line); }
.sessions, .no-classes { grid-row: 2 / -1; }
.sessions { list-style: none; padding: 0; display: grid; grid-template-rows: subgrid; }
.no-classes { display: flex; align-items: center; justify-content: center; padding: 20px 12px; background: var(--shade); color: var(--muted); }
.session { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); padding: 10px 10px; border-bottom: 1px solid var(--line); }
.session p { margin: 0; }
.time, .name { font-size: .9375rem; line-height: 1.4; }
.name { align-self: center; margin-top: 2px; hyphens: auto; overflow-wrap: break-word; }
.meta { margin-top: 4px; font-size: .8125rem; line-height: 1.4; color: var(--muted); }
.meta span { display: block; }
/* "Special event" badge in the event's top-right corner, outside the flow so the cell keeps its size */
.tag {
  position: absolute; top: 0; right: 0; padding: 3px 7px 4.5px 9px; border-bottom-left-radius: 6px; background: var(--brown); color: var(--cream);
  font-size: .625rem; font-weight: 500; line-height: 13px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.price, .closed { margin-top: 6px !important; font-size: .8125rem; }
.closed { display: none; color: var(--grey); }
.book {
  display: block; margin-top: 8px; padding: 5px 10px; background: var(--brown); color: var(--cream);
  text-align: center; text-decoration: none; font-size: .9375rem; letter-spacing: .02em;
}
.book:hover { background: #5f4f3c; color: #fff; }
/* Fully booked: same box as Book, but outlined and not a link */
.full { margin-top: 8px !important; padding: 4px 10px; border: 1px solid var(--line); color: var(--grey); text-align: center; font-size: .9375rem; letter-spacing: .02em; }
.session.is-past .time, .session.is-past .name { color: var(--grey); }
.session.is-past .price, .session.is-past .book, .session.is-past .full { display: none; }
.session.is-past .closed { display: block; }
.schedule-note { max-width: 640px; margin: 24px auto 0; text-align: center; font-size: .875rem; color: var(--muted); }
.schedule-note strong { font-weight: 500; }

/* Massage & treatments, after the Wix /massage service cards: italic uppercase category headings,
   bordered cards with the Request to Book button at the bottom */
.treatments { padding: clamp(56px, 8vw, 96px) var(--gutter) 0; }
.treatments > h2 { font: 400 clamp(1.75rem, 1.45rem + 1vw, 2.25rem)/1.2 Forum, Georgia, serif; text-align: center;
  max-width: 1300px; margin: 0 auto; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.treatments-lead { margin: 28px 0 0; text-align: center; font-style: italic; font-size: clamp(1.1rem, 1rem + .45vw, 1.3125rem); }
.category { max-width: 1000px; margin: 0 auto; }
.category h3 { margin: clamp(36px, 5vw, 56px) 0 28px; text-align: center; font-weight: 300; font-style: italic;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: .03em; text-transform: uppercase; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card { display: flex; flex-direction: column; padding: 22px 18px 18px; border: 1px solid var(--rule); }
.card h4 { margin: 0; font-weight: 400; font-size: 1.125rem; line-height: 1.35; }
.card-text { margin: 10px 0 0; font-size: .875rem; line-height: 1.55; color: var(--muted); }
.card-meta { margin: 16px 0 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: .875rem; line-height: 1.7; }
.card-meta span { display: block; }
.card .book { align-self: flex-start; margin-top: auto; padding: 7px 16px; font-size: .875rem; }

@media (max-width: 900px) {
  .days { grid-template-columns: 1fr; grid-template-rows: none; border-top: 1px solid var(--line); }
  .day { grid-row: auto; grid-template-rows: none; grid-template-columns: 64px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
  .day-head { margin: 0; padding: 14px 0; }
  .sessions, .no-classes, .day:last-child > .sessions, .day:last-child > .no-classes { border: 0; border-left: 1px solid var(--line); }
  .sessions, .no-classes { grid-row: auto; }
  .sessions { display: block; }
  .session:last-child { border-bottom: 0; }
  .no-classes { justify-content: flex-start; padding: 14px; }
  .session { display: flex; flex-direction: column; grid-row: auto; padding: 14px; }
  .book, .full { align-self: flex-start; min-width: 140px; padding: 8px 24px; }
  .full { padding: 7px 23px; }
}

/* Email chooser dialog (mail.js) */
.mail-chooser {
  width: min(400px, calc(100vw - 2 * var(--gutter))); padding: 28px 24px 22px; border: 0; border-radius: 6px;
  background: var(--cream); color: var(--ink); box-shadow: 0 12px 40px rgb(40 30 20 / .3); text-align: center;
}
.mail-chooser::backdrop { background: rgb(18 9 9 / .45); }
.mail-chooser h2 { font: 400 1.5rem/1.2 Forum, Georgia, serif; margin: 0 24px; }
.mail-subject { margin: 10px 0 0; font-size: .875rem; color: var(--muted); overflow-wrap: anywhere; }
.mail-when { white-space: nowrap; font-weight: 500; color: var(--ink); }
.mail-options { display: grid; gap: 8px; margin-top: 20px; }
.mail-options a {
  display: block; padding: 9px 12px; background: var(--brown); color: var(--cream); text-decoration: none; letter-spacing: .02em;
}
.mail-options a:hover { background: #5f4f3c; color: #fff; }
.mail-options a:last-child { background: none; color: var(--brown); border: 1px solid var(--brown); }
.mail-options a:last-child:hover { background: var(--shade); color: var(--brown); }
.mail-copy { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 16px; }
.mail-copy button, .mail-close {
  border: 0; background: none; padding: 4px; font: inherit; font-size: .875rem; color: var(--ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.mail-copy button:hover, .mail-close:hover { color: var(--brown); }
.mail-close { position: absolute; top: 8px; right: 10px; font-size: 1.5rem; line-height: 1; text-decoration: none; }
.mail-phone { margin: 12px 0 0; font-size: .875rem; color: var(--muted); }

/* Floating contact button, phones only: bottom right, within reach of the right thumb */
.contact-fab { display: none; }
@media (max-width: 760px) {
  .contact-fab {
    position: fixed; z-index: 20; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom));
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--brown); color: var(--cream); box-shadow: 0 6px 20px rgb(40 30 20 / .35);
    transition: opacity .2s, transform .2s;
  }
  .contact-fab:hover, .contact-fab:active { background: #5f4f3c; color: #fff; }
  .contact-fab:focus-visible { outline-offset: 3px; border-radius: 50%; }
  .contact-fab.is-here { opacity: 0; transform: scale(.8); pointer-events: none; }
}

/* Contact strip */
/* Set apart from the massage list by wide margins and a soft parchment band */
.contact {
  margin-block: clamp(72px, 10vw, 128px) clamp(56px, 8vw, 96px); padding: clamp(56px, 8vw, 96px) var(--gutter);
  background: var(--shade); border-block: 1px solid var(--rule);
}
.contact h2 { margin: 0 0 clamp(32px, 4vw, 44px); }
.contact dl {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 28px clamp(32px, 5vw, 64px);
  max-width: 1180px; margin: 0 auto; text-align: center;
}
.contact dl > div { flex: 0 1 auto; }
.contact dl > div:first-child dd { white-space: nowrap; } /* keep the address on one line, Get directions below */
.contact dt { font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.contact dd { margin: 8px 0 0; font-size: 1.0625rem; overflow-wrap: anywhere; }
.contact dd a + a { margin-left: 14px; }

footer {
  background: var(--night); color: var(--cream);
  padding: 14px 0 20px; text-align: center; font-size: .8125rem; letter-spacing: .02em;
}
footer p { margin: 0; }
footer span + span::before { content: "·"; margin: 0 .6em; opacity: .6; }

/* 404 */
.notfound .hero { display: flex; flex-direction: column; justify-content: center; }
.notfound .lead { font-size: 1.125rem; max-width: 560px; margin: 32px auto 0; }
.notfound .lead + .lead { margin-top: 12px; }

@media (max-width: 480px) {
  footer span { display: block; }
  footer span + span::before { content: none; }
}