@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&family=Cormorant+Garamond:wght@500;600;700&display=swap');

:root {
  --vh-navy: #3A4A52;
  --vh-accent: #5A7686;
  --vh-lotion: #FEFFF9;
  --vh-ink-900: #141414;
  --vh-ink-700: #474747;
  --vh-ink-500: #666666;
  --vh-ink-400: #9E9E9E;
  --vh-alabaster: #F2F0E6;
  --vh-mtn-greige: #E9E3DC;
  --vh-onyx: #1A1614;
  --vh-carbon: #292929;
}

.vio-header, .vio-footer, .vio-sticky-tab { font-family: 'Nunito Sans', sans-serif; box-sizing: border-box; }
.vio-header *, .vio-footer *, .vio-sticky-tab * { box-sizing: border-box; }
.vio-footer h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; }

body { background: var(--vh-lotion); }

/* Visible keyboard focus for all interactive elements in the header/footer
   region (nav links, buttons, toggles, modal controls). No rule in this
   file removes the outline; this just makes it consistent and brand-colored. */
.vio-header a:focus-visible,
.vio-footer a:focus-visible,
.vio-sticky-tab a:focus-visible,
.vio-header button:focus-visible,
.vio-footer button:focus-visible,
.vio-sticky-tab button:focus-visible,
.vio-nav-toggle:focus-visible,
.vio-modal__close:focus-visible,
.vio-modal a:focus-visible,
.vio-modal button:focus-visible,
.vio-modal input:focus-visible,
.vio-modal textarea:focus-visible,
.vio-modal select:focus-visible {
  outline: 2px solid var(--vh-accent);
  outline-offset: 2px;
}

/* WordPress's default block-spacing rule (is-layout-flow > *) adds a top
   margin to every direct child of .entry-content, including each raw
   <section> in these pages' single wp:html block -- showing as a sliver
   of the body background between sections. These pages control their own
   spacing via each section's own padding, so neutralize it. */
.entry-content.is-layout-flow > * {
  margin-block-start: 0;
}

/* HEADER */
/* Sticky must go on the outer <header> WP renders around the template
   part, not this inner div -- that wrapper has no extra height beyond
   its child, leaving no room for the sticky element to hold in place. */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.vio-header {
  background: var(--vh-carbon);
  padding: 0 5%;
}
.vio-header__inner {
  max-width: none; margin: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; min-height: 0;
  border-bottom: 1px solid rgba(254, 255, 249, 0.15);
}
.vio-header__logo img { height: 34px; width: auto; display: block; }

.vio-header__mobile-actions { display: none; align-items: center; gap: 12px; }
.vio-header__cta-mobile.pop-btn-custom {
  background: var(--vh-accent) !important; color: var(--vh-lotion); border: 1px solid var(--vh-accent);
  padding: 8px 16px; font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.02em; text-transform: none; cursor: pointer; border-radius: 0;
}
.vio-header__cta-mobile.pop-btn-custom:hover { background: var(--vh-carbon) !important; border-color: var(--vh-lotion); }

.vio-primary-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 28px; }
.vio-primary-nav__list > li { position: relative; padding-top: 8px; }
.vio-primary-nav__list a { color: var(--vh-lotion); text-decoration: none; font-weight: 500; font-size: 0.9rem; letter-spacing: 0.09em; text-transform: uppercase; }
.vio-primary-nav__list a:hover { color: var(--vh-lotion); }

/* Growing underline under the active/hovered top-level item, matching
   viomedspa.com's nav indicator. */
.vio-primary-nav__list > li:not(.vio-nav-cta)::after {
  content: ""; display: block; margin: 8px auto 0; height: 2px; width: 0;
  background: var(--vh-lotion); transition: width 0.25s ease;
}
.vio-primary-nav__list > li:not(.vio-nav-cta):hover::after,
.vio-primary-nav__list > li.current-menu-item::after,
.vio-primary-nav__list > li.current-menu-ancestor::after {
  width: 100%;
}
.vio-primary-nav__list .menu-item-has-children { position: relative; }
.vio-primary-nav__list .vio-nav-cta > a {
  background: var(--vh-accent);
  color: var(--vh-lotion) !important;
  border: 1px solid var(--vh-accent);
  padding: 8px 18px;
  cursor: pointer;
}
.vio-primary-nav__list .vio-nav-cta > a:hover {
  background: var(--vh-carbon);
  border-color: var(--vh-lotion);
  color: var(--vh-lotion) !important;
}

.vio-footer__contact-btn.pop-btn-custom {
  background: var(--vh-accent) !important;
  color: var(--vh-lotion) !important;
  border: 1px solid var(--vh-accent) !important;
  padding: 8px 18px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em !important;
}
.vio-footer__contact-btn.pop-btn-custom:hover {
  background: var(--vh-carbon) !important;
  border-color: var(--vh-lotion) !important;
}
.vio-primary-nav__list .sub-menu {
  list-style: none; margin: 0; padding: 16px 0; position: absolute; top: 100%; left: 0;
  background: var(--vh-lotion); min-width: 240px; display: none;
  box-shadow: 0 12px 24px rgba(20, 20, 20, 0.15);
}
.vio-primary-nav__list .menu-item-has-children:hover .sub-menu,
.vio-primary-nav__list .menu-item-has-children:focus-within .sub-menu { display: block; }
.vio-primary-nav__list .sub-menu a { display: block; padding: 10px 24px; white-space: nowrap; color: var(--vh-ink-900); font-weight: 500; }
.vio-primary-nav__list .sub-menu a:hover { color: var(--vh-carbon); background: var(--vh-alabaster); }

.vio-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; }
.vio-nav-toggle__bar { width: 24px; height: 2px; background: var(--vh-lotion); display: block; }

.vio-sticky-tab {
  position: fixed; top: 40%; right: 0; transform: rotate(180deg); writing-mode: vertical-rl;
  background: var(--vh-accent); color: var(--vh-lotion); text-decoration: none;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem;
  padding: 20px 10px; z-index: 200;
  border: none; cursor: pointer; font-family: 'Nunito Sans', sans-serif;
}
.vio-sticky-tab:hover { background: var(--vh-carbon); }

/* MODAL */
.vio-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.vio-modal.is-open { display: block; }
.vio-modal__overlay { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.6); }
.vio-modal__panel {
  position: absolute; top: 0; right: -100%; width: 90%; max-width: 480px; height: 100%;
  background: var(--vh-lotion);
  transition: right 0.3s ease; box-shadow: -8px 0 24px rgba(0,0,0,0.2);
  display: flex; flex-direction: column;
}
.vio-modal.is-open .vio-modal__panel { right: 0; }

.vio-modal__header {
  flex: none; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--vh-lotion); padding: 24px 24px 16px;
  border-bottom: 1px solid var(--vh-mtn-greige);
}
.vio-modal__panel h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--vh-ink-900); margin: 0; font-size: 1.6rem; }
.vio-modal__close {
  background: none; border: none; flex: none;
  font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--vh-ink-700);
}
.vio-modal__close:hover { color: var(--vh-carbon); }

/* Only the body scrolls; the submit button bar is absolutely positioned
   pinned to the bottom of the (already position:absolute) panel, so it's
   always visible without covering fields -- the body gets bottom padding
   to clear it. Ported from viomedspa.com's booking-modal pattern. */
.vio-modal__body { flex: 1; overflow-y: auto; padding: 24px; padding-bottom: 80px; }
body.vio-modal-open { overflow: hidden; }

/* The modal panel (max 480px) is always mobile-width regardless of
   device, so its form uses the same single-column, rounded-field
   styling as the homepage's own embedded form (.vh-hero__form-wrap)
   rather than GF's native multi-column grid, which was designed for
   a much wider container and left half/third-width fields (like the
   two Yes/No qualifier questions) squeezed and wrapping mid-word. */
.vio-modal__body .gform_fields {
  display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important;
  list-style: none; margin: 0; padding: 0;
}
.vio-modal__body .gfield { grid-column: 1 / -1 !important; width: auto !important; }
.vio-modal__body .gfield_label {
  font-size: 0.85rem; font-weight: 700; color: var(--vh-ink-900); margin-bottom: 4px; display: block;
}
.vio-modal__body .ginput_container input:not([type="radio"]):not([type="checkbox"]),
.vio-modal__body .ginput_container select,
.vio-modal__body .ginput_container textarea {
  width: 100% !important; max-width: 100% !important; min-height: 48px; padding: 14px; font-size: 1rem;
  font-family: 'Nunito Sans', sans-serif; border: 1px solid var(--vh-ink-400);
  border-radius: 8px; background: var(--vh-lotion); color: var(--vh-ink-900);
}
/* GF's own CSS forces ".inline-question" fields (the two Yes/No
   selects) into their own "label | 160px input" grid via !important;
   same override already used for the homepage's own form wrapper
   (.vh-hero__form-wrap .gfield.inline-question). */
.vio-modal__body .gform_wrapper .inline-question { display: block !important; grid-template-columns: none !important; }
.vio-modal__body .gform_wrapper .inline-question .ginput_container { width: 100% !important; }

/* Consent checkbox sits beside its fine print instead of stacked above it,
   with a clean square outline matching viomedspa.com's booking form.
   Targets every markup shape GF's consent/checkbox field might use. */
.vio-modal__body .ginput_container_consent,
.vio-modal__body .gfield_consent_label,
.vio-modal__body .ginput_container_checkbox .gchoice {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
.vio-modal__body .ginput_container_consent input[type="checkbox"],
.vio-modal__body .ginput_container_checkbox input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  flex: none !important;
  align-self: flex-start !important;
  margin: 2px 0 0 !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid var(--vh-ink-900) !important;
  border-radius: 0 !important;
  background: var(--vh-lotion) !important;
  cursor: pointer;
  position: relative;
  display: inline-block !important;
}
.vio-modal__body input[type="checkbox"]:checked {
  background: var(--vh-ink-900) !important;
}
.vio-modal__body .ginput_container_consent label,
.vio-modal__body .gfield_consent_label,
.vio-modal__body .ginput_container_checkbox label {
  margin: 0 !important;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--vh-ink-700);
}

/* Pinned to the bottom of the panel (not the scrolling body), so it's
   always reachable and doesn't cover fields while scrolling. */
.vio-modal__body .gform_footer {
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 0;
  padding: 16px 24px;
  background: var(--vh-lotion);
  border-top: 1px solid var(--vh-mtn-greige);
  display: block !important;
}
.vio-modal__body .gform_footer input[type="submit"],
.vio-modal__body .gform_footer .gform_button {
  display: block;
  width: 100% !important;
  margin: 0;
  padding: 18px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--vh-carbon);
  color: var(--vh-lotion);
  border: none;
  border-radius: 0;
}
.vio-modal__body .gform_footer input[type="submit"]:hover,
.vio-modal__body .gform_footer .gform_button:hover {
  background: var(--vh-accent);
}

@media (max-width: 899px) {
  .vio-header__inner { padding: 10px 0; }
  .vio-header__mobile-actions { display: flex; }
  .vio-nav-toggle { display: flex; }
  .vio-primary-nav__list .vio-nav-cta { display: none; }
  /* visibility:hidden while closed keeps the off-screen links out of the
     keyboard tab order and the accessibility tree; the delayed transition
     lets the slide-out finish before it flips. */
  .vio-primary-nav { position: fixed; top: 0; right: -100%; width: 80%; max-width: 320px; height: 100vh; background: var(--vh-carbon); padding: 80px 24px 24px; transition: right 0.25s ease, visibility 0s linear 0.25s; visibility: hidden; overflow-y: auto; }
  .vio-primary-nav.is-open { right: 0; visibility: visible; transition: right 0.25s ease, visibility 0s; }
  .vio-primary-nav { z-index: 2; }
  .vio-nav-backdrop { position: fixed; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
  .vio-nav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; }
  .vio-nav-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
  .vio-nav-close__bar { position: absolute; width: 24px; height: 2px; background: var(--vh-lotion); }
  .vio-nav-close__bar:first-child { transform: rotate(45deg); }
  .vio-nav-close__bar:last-child { transform: rotate(-45deg); }
  .vio-nav-close:focus-visible { outline: 2px solid var(--vh-lotion); outline-offset: 2px; }
  .vio-primary-nav__list { flex-direction: column; align-items: flex-start; gap: 16px; }
  .vio-primary-nav__list > li { padding-top: 0; }
  .vio-primary-nav__list > li::after { display: none; }
  .vio-primary-nav__list .sub-menu { position: static; display: block; padding-left: 16px; background: transparent; box-shadow: none; }
  .vio-primary-nav__list .sub-menu a { color: var(--vh-lotion); }
  .vio-primary-nav__list .sub-menu a:hover { background: transparent; color: var(--vh-accent); }

  .vio-modal__panel { width: 100%; max-width: none; }
}

@media (min-width: 900px) { .vio-nav-close, .vio-nav-backdrop { display: none; } }

/* FOOTER */
.vio-footer { background: var(--vh-carbon); color: var(--vh-mtn-greige); }
.vio-footer__cta { background: var(--vh-navy); padding: 56px 5%; text-align: center; }
.vio-footer__cta-inner { max-width: 700px; margin: 0 auto; }
.vio-footer__cta h2 { color: var(--vh-lotion); font-size: clamp(24px, 3.5vw, 34px); margin: 0 0 24px; }
.vio-footer__cta .gform_wrapper { text-align: left; background: var(--vh-alabaster); padding: 24px; }
.vio-footer__cta .gform_button, .vio-footer__cta input[type=submit] { background: var(--vh-carbon); color: var(--vh-lotion); border: none; border-radius: 0; font-family: 'Nunito Sans', sans-serif; font-weight: 700; padding: 14px 28px; }
.vio-footer__cta .gform_button:hover, .vio-footer__cta input[type=submit]:hover { background: var(--vh-accent); }

.vio-footer__main { max-width: 1200px; margin: 0 auto; padding: 48px 5%; display: grid; gap: 32px; grid-template-columns: 1fr; }
.vio-footer__logo { height: 32px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); }
.vio-footer__social { display: flex; gap: 16px; }
.vio-footer__social a { color: var(--vh-mtn-greige); text-decoration: none; font-size: 0.85rem; }
.vio-footer__social a:hover { color: var(--vh-lotion); }
.vio-footer-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vio-footer-nav__list a { color: var(--vh-mtn-greige); text-decoration: none; font-size: 0.9rem; }
.vio-footer-nav__list a:hover { color: var(--vh-lotion); }
.vio-footer-nav__list .sub-menu { list-style: none; margin: 10px 0 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.vio-footer-nav__list .sub-menu a { font-size: 0.8rem; }
.vio-btn { display: inline-block; padding: 14px 28px; background: var(--vh-carbon); color: var(--vh-lotion); font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem; }
.vio-btn:hover { background: var(--vh-accent); }

.vio-footer__legal { max-width: 1200px; margin: 0 auto; padding: 0 5% 32px; }
.vio-footer__legal p { font-size: 0.75rem; line-height: 1.5; color: var(--vh-ink-400); margin: 0 0 12px; }

.vio-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); max-width: 1200px; margin: 0 auto; padding: 20px 5%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.vio-footer__links { display: flex; gap: 20px; }
.vio-footer__links a { color: var(--vh-mtn-greige); text-decoration: none; font-size: 0.8rem; }
.vio-footer__links a:hover { color: var(--vh-lotion); }
.vio-footer__copyright { margin: 0; font-size: 0.8rem; color: var(--vh-ink-400); }

@media (min-width: 900px) {
  .vio-footer__main { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* BLOG ARCHIVE GRID */
.vio-blog-grid {
  display: grid; gap: 32px; grid-template-columns: 1fr;
  max-width: 1200px; margin: 0 auto; padding: 56px 5%;
}
@media (min-width: 700px) { .vio-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vio-blog-grid { grid-template-columns: repeat(3, 1fr); } }

.vio-blog-card {
  display: block; text-decoration: none; color: inherit; font-family: 'Nunito Sans', sans-serif;
  background: var(--vh-lotion); border: 1px solid var(--vh-mtn-greige);
}
.vio-blog-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--vh-alabaster); }
.vio-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vio-blog-card__body { padding: 20px; }
.vio-blog-card__date { font-size: 0.8rem; color: var(--vh-ink-500); text-transform: uppercase; letter-spacing: 0.04em; }
.vio-blog-card__title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.3rem; color: var(--vh-ink-900); margin: 8px 0; }
.vio-blog-card__excerpt { font-size: 0.9rem; line-height: 1.5; color: var(--vh-ink-700); margin: 0 0 12px; }
.vio-blog-card, .vio-blog-card * { text-decoration: none !important; }
.vio-blog-card__link {
  display: inline-block;
  background: var(--vh-carbon); color: var(--vh-lotion);
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 20px;
}
.vio-blog-card:hover .vio-blog-card__link { background: var(--vh-accent); }

.vio-blog-pagination { text-align: center; padding: 0 5% 56px; display: flex; justify-content: center; gap: 8px; }
.vio-blog-pagination .page-numbers { display: inline-block; padding: 8px 14px; color: var(--vh-ink-900); text-decoration: none; font-family: 'Nunito Sans', sans-serif; }
.vio-blog-pagination .page-numbers.current { background: var(--vh-carbon); color: var(--vh-lotion); }

/* SINGLE POST */
.entry-header .wp-block-post-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--vh-ink-900); }
.wp-block-post-content { font-family: 'Nunito Sans', sans-serif; color: var(--vh-ink-700); line-height: 1.6; }
.wp-block-post-content a { color: var(--vh-navy); text-decoration: underline; }
.wp-block-post-content a:hover { color: var(--vh-accent); }

/* wpautop wraps some of the header/footer shortcode's top-level elements
   (e.g. the sticky tab button) in a stray empty <p> at the block-template
   boundary. Harmless (zero height) but invalid markup -- unwrap it. */
p:has(> .vio-sticky-tab),
p:has(> .vio-modal),
p:has(> .vio-header__logo),
p:has(> .vio-modal__close) {
  display: contents;
}

/* SINGLE POST HERO: navy title block with the featured image bleeding
   over the top of it, matching the site's original blog post styling. */
.vio-post-hero { margin: 0 !important; background: var(--vh-navy); display: flex; flex-direction: column; }
.vio-post-hero__media { width: 100%; order: -1; }
.vio-post-hero__media img { width: 100%; height: 280px; object-fit: cover; display: block; }
.vio-post-hero__block { padding: 40px 5%; }
.vio-post-hero__block .wp-block-post-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--vh-lotion);
  margin: 0 0 16px; font-size: clamp(28px, 5vw, 44px);
}
.vio-post-hero .post-meta { color: var(--vh-mtn-greige); font-size: 0.9rem; }
.vio-post-hero .post-meta a { color: var(--vh-mtn-greige); }

/* Full-bleed side-by-side on desktop: content left (in its own padded
   column), image right, flush to the page edge -- matching the same
   full-bleed row pattern used elsewhere on the site (e.g. Our Story). */
@media (min-width: 900px) {
  .vio-post-hero { flex-direction: row; align-items: stretch; }
  .vio-post-hero__media { order: 0; width: 45%; flex: none; }
  .vio-post-hero__media img { height: 100%; min-height: 420px; }
  .vio-post-hero__block { width: 55%; display: flex; flex-direction: column; justify-content: center; padding: 56px 5%; }
}


/* Every CTA button sitewide uses the nav-menu type treatment (uppercase, weight 500,
   wide tracking). !important so per-page embedded button styles can't override it. */
.pop-btn-custom, .btn.btn-solid, a.btn, button.btn { font-family: "Nunito Sans", sans-serif !important; font-weight: 500 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; }

/* Gravity Forms: the theme's GF styles leave labels, legends, consent text and
   the submit button on browser-default fonts (Times New Roman / Arial) in the
   Request Info modal, and the submit button everywhere. Match the site font. */
.vio-modal__body .gform_wrapper,
.vio-modal__body .gform_wrapper * { font-family: 'Nunito Sans', sans-serif; }
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"],
.gform_footer .gform_button,
.gform_footer input[type="submit"] { font-family: 'Nunito Sans', sans-serif; }

/* Current page in the nav: light blue (6.8:1 on the dark header) plus an underline,
   so the cue doesn't rely on colour alone. Only the link to the open page is marked
   (WordPress sets aria-current="page" on it), not its parent menu items. */
.vio-primary-nav__list a[aria-current="page"] {
  color: #8FB8CC;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}