/* Temporary notice at the top of every page, added 27 Oct 2026 at the clinic's request while Semble's online
   booking shows no availability. Wording is Donna's, word for word. To remove: delete this file and site-notice.js,
   and on every page the line that loads this file, the .site-notice block and script in the header, and
   "has-notice" on the body (a script over every *.html, as for any header change).

   The notice is the first row INSIDE the fixed header, so it can never sit behind it. The header's own top padding
   moves onto the row under the notice. site-notice.js keeps --notice-h equal to the notice's height; everything
   below that measured the header from the top of the screen gets --notice-h added, so each page keeps exactly the
   spacing it had under the menu row. */
.site-notice { background: var(--accent-deep); color: #fff; }
.site-notice__text {
  max-width: 1200px; margin: 0 auto; padding: 10px 20px;
  font-size: .875rem; line-height: 1.45; text-align: center; text-wrap: balance;
}
.site-notice a {
  color: #fff; font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 2px;
}
.site-notice a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

body.has-notice .nav { padding-top: 0; }
body.has-notice .nav__row { padding-top: 18px; transition: padding-top .28s ease; }
body.has-notice .nav.is-scrolled .nav__row { padding-top: 10px; }
/* the 2px reading-progress line runs along the foot of the notice, not across it */
body.has-notice .scroll-progress { top: var(--notice-h, 0px); }

/* the page itself starts below the notice */
body.has-notice #smooth-wrapper { padding-top: var(--notice-h, 0px); }

/* sticky labels and headings (neko.css sets --nk-top on :root at the same three sizes) */
body.has-notice { --nk-top: calc(104px + var(--notice-h, 0px)); }
@media (max-width: 760px) { body.has-notice { --nk-top: calc(68px + var(--notice-h, 0px)); } }
@media (min-width: 761px) and (max-height: 820px) { body.has-notice { --nk-top: calc(88px + var(--notice-h, 0px)); } }
/* Our Ethos photograph (neko.css), Book buttons landing on a panel (site.css), the FAQs contents (its own page) */
body.has-notice .nk-ethos__media { top: calc(96px + var(--notice-h, 0px)); }
@media (min-width: 761px) { body.has-notice .booking__panel { scroll-margin-top: calc(104px + var(--notice-h, 0px)); } }
body.has-notice .faq-page__group,
body.has-notice .faqx-subject { scroll-margin-top: calc(120px + var(--notice-h, 0px)); }
body.has-notice .faqx-index { top: calc(110px + var(--notice-h, 0px)); max-height: calc(100vh - 130px - var(--notice-h, 0px)); }

@media (max-width: 760px) {
  .site-notice__text { padding: 8px 16px; font-size: .8125rem; }
  body.has-notice .nav .nav__row,
  body.has-notice .nav.is-scrolled .nav__row { padding-top: 6px; }
  html.has-notice-h { scroll-padding-top: calc(var(--m-head) + var(--notice-h, 0px) + 12px); }
}