/* ============================================================
   Yolie's Wellness Massage — shared stylesheet
   All values taken verbatim from the original design files.
   Breakpoint: 980px (same as original matchMedia '(max-width: 980px)')
   ============================================================ */

/* ---------- self-hosted fonts ----------
   These were Google Fonts. Serving them from our own origin removes the DNS +
   TLS handshakes to fonts.googleapis.com and fonts.gstatic.com, and removes the
   dependency chain that made the font files wait for Google's stylesheet to
   arrive and parse before they could even start downloading.

   All three files are variable fonts, so one file covers a whole weight range:
   what used to be nine @font-face requests is three. The declared ranges match
   the fvar wght axis in each file (Cormorant 300-700, Inter 100-900) — do not
   widen them past what the file actually contains or the browser will
   synthesise a fake weight.

   font-display: swap keeps text visible during the download; the fallback below
   is metric-adjacent enough that the swap is not a jarring reflow. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-italic.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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-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;
}

html, body { margin: 0; padding: 0; background: #FAF6F0; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #2B2320; -webkit-font-smoothing: antialiased; }
a { color: #800000; text-decoration: none; }
a:hover { color: #5C0000; }
::selection { background: #80000022; }

/* ---------- responsive visibility (original: isDesktop / isMobile at 980px) ---------- */
@media (min-width: 981px) {
  .only-mobile { display: none !important; }
}
@media (max-width: 980px) {
  .only-desktop { display: none !important; }
}

/* ---------- grids filled after the API responds ----------
   home.js renders these from YWM.load(), so they are empty while
   api/state.php is in flight and the footer sits too high until it lands.

   The reserve is deliberately ONE card tall, not the full grid. Both grids are
   auto-fit, so the row count depends on viewport width, and guessing it per
   breakpoint would leave real empty space whenever fewer cards come back than
   the guess assumed — a visible hole is a worse bug than the shift it prevents.
   One row always exists when the section is shown, so this reserve can never
   over-reserve; it shrinks the shift rather than removing it.

   No reserve leaks into an empty page: home.js hides the whole section when a
   grid has no content, and a hidden section takes its min-height with it. */
#testimonial-grid { min-height: 210px; }
#latest-grid { min-height: 380px; }

/* ---------- map facade ----------
   Stands in for the Google Maps embed until a visitor asks for it. The picture
   is an OpenStreetMap render, so .map-credit is the ODbL attribution and has to
   stay visible. main.js replaces the whole contents with the real iframe on
   click; sizing lives on the inline style so each page keeps its own height. */
.map-facade { position: relative; overflow: hidden; border: 1px solid #E8DFD2; }
.map-facade > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-facade > iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Sits low rather than centred: the pin marking the studio is at the centre of
   the picture, and a centred button covers the one thing the picture is for. */
.map-load {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: #800000; color: #FAF6F0; border: none; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14.5px; font-weight: 600;
  padding: 13px 28px; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(43, 21, 18, 0.35);
  transition: background 0.25s ease;
}
.map-load:hover { background: #9A1B1B; }
.map-load:focus-visible { outline: 3px solid #FAF6F0; outline-offset: 2px; }

.map-credit {
  position: absolute; right: 0; top: 0;
  background: rgba(250, 246, 240, 0.82); color: #4A3F37;
  font-size: 10.5px; padding: 3px 8px; border-bottom-left-radius: 8px;
}

/* ---------- header nav ---------- */
.nav-link { font-size: 13px; letter-spacing: 0.12em; color: #5A4F47; font-weight: 500; }
.nav-link:hover { color: #800000; }

/* Book Now (header / detail) — hover #5C0000 */
.bk-deep { background: #800000; color: #FAF6F0; }
.bk-deep:hover { background: #5C0000; color: #FAF6F0; }

/* Book Now (hero / CTA) — hover #9A1B1B */
.bk-red { background: #800000; color: #FAF6F0; }
.bk-red:hover { background: #9A1B1B; color: #FAF6F0; }

/* hero ghost button (home) */
.btn-ghost-hero { border: 1px solid #FAF6F077; color: #FAF6F0; background: rgba(30,9,7,0.18); }
.btn-ghost-hero:hover { border-color: #FAF6F0; background: rgba(250,246,240,0.12); color: #FAF6F0; }

/* hero ghost button (about) */
.btn-ghost-about { border: 1px solid #FAF6F055; color: #FAF6F0; }
.btn-ghost-about:hover { background: rgba(250,246,240,0.08); color: #FAF6F0; }

/* outline buttons — hover fills */
.hov-bg-red9:hover { background: rgba(128,0,0,0.09); }
.hov-bg-red8:hover { background: rgba(128,0,0,0.08); }

/* cards that lift on hover */
.card-lift:hover { box-shadow: 0 16px 40px rgba(80,20,10,0.12); transform: translateY(-3px); color: #2B2320; }
.img-zoom:hover { transform: scale(1.05); }

/* signature combo card (home, maroon section) */
.combo-card { border: 1px solid #FAF6F02E; }
.combo-card:hover { background: #FAF6F00F; border-color: #FAF6F055; color: #FAF6F0; }

/* underlined text links */
.link-underline { border-bottom: 2px solid #80000033; }
.link-underline:hover { border-color: #800000; color: #800000; }

/* footer links */
.f-link { color: #E4C6BC; }
.f-link:hover { color: #FAF6F0; }

/* ---------- burger button (original burgerBtnStyle) ---------- */
.burger { position: relative; z-index: 110; width: 48px; height: 48px; border: none; background: rgba(128,0,0,0.08); border-radius: 50%; display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.3s ease; }
body.menu-open .burger { background: rgba(250,246,240,0.12); }
.burger span { display: block; width: 24px; height: 2px; background: #800000; border-radius: 2px; transition: transform 0.35s cubic-bezier(0.65,0,0.35,1), opacity 0.25s ease, background 0.3s ease; transform-origin: center; }
body.menu-open .burger span { background: #FAF6F0; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- mobile fullscreen menu (original overlayStyle) ---------- */
.mobile-menu { position: fixed; inset: 0; z-index: 100; background: #800000; opacity: 0; visibility: hidden; clip-path: circle(0px at calc(100% - 42px) 36px); transition: clip-path 0.5s cubic-bezier(0.65,0,0.35,1), opacity 0.3s ease 0.25s, visibility 0s 0.55s; }
body.menu-open .mobile-menu { opacity: 1; visibility: visible; clip-path: circle(150% at calc(100% - 42px) 36px); transition: clip-path 0.65s cubic-bezier(0.65,0,0.35,1), opacity 0.2s ease, visibility 0s; }
body.menu-open { overflow: hidden; }

.m-link { display: flex; align-items: baseline; gap: 14px; font-family: 'Cormorant Garamond', serif; font-size: clamp(38px, 9vw, 52px); font-weight: 500; color: #FAF6F0; padding: 10px 0; border-bottom: 1px solid rgba(250,246,240,0.14); line-height: 1.15; opacity: 0; transform: translateY(28px); transition: opacity 0.2s ease, transform 0.25s ease; }
.m-link:hover { color: #FAF6F0; }
body.menu-open .m-link { opacity: 1; transform: translateY(0); }
body.menu-open .m-link:nth-child(1) { transition: opacity 0.5s ease 0.18s, transform 0.55s cubic-bezier(0.22,1,0.36,1) 0.18s; }
body.menu-open .m-link:nth-child(2) { transition: opacity 0.5s ease 0.25s, transform 0.55s cubic-bezier(0.22,1,0.36,1) 0.25s; }
body.menu-open .m-link:nth-child(3) { transition: opacity 0.5s ease 0.32s, transform 0.55s cubic-bezier(0.22,1,0.36,1) 0.32s; }
body.menu-open .m-link:nth-child(4) { transition: opacity 0.5s ease 0.39s, transform 0.55s cubic-bezier(0.22,1,0.36,1) 0.39s; }
body.menu-open .m-link:nth-child(5) { transition: opacity 0.5s ease 0.46s, transform 0.55s cubic-bezier(0.22,1,0.36,1) 0.46s; }

.m-footer { opacity: 0; transform: translateY(24px); transition: opacity 0.2s ease, transform 0.25s ease; }
body.menu-open .m-footer { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.55s, transform 0.55s cubic-bezier(0.22,1,0.36,1) 0.55s; }

.m-book:hover { color: #800000; }
.m-white { color: #FAF6F0; font-weight: 600; }
.m-white:hover { color: #FAF6F0; }

/* ---------- treatments & blog category chips (original categories style) ---------- */
.chip { all: unset; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; padding: 9px 20px; border-radius: 999px; transition: all 0.2s ease; background: transparent; color: #6B5F55; border: 1px solid #D8CBBB; }
.chip.active { background: #800000; color: #FAF6F0; border: 1px solid #800000; }
.chip--blog { padding: 9px 18px; }

/* ---------- treatments cards ---------- */
.plate { background: #FFFDFA; border: 1px solid #ECE3D6; box-shadow: 0 16px 38px rgba(80,20,10,0.10); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.plate:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(80,20,10,0.16); border-color: #E0C89A; }

.back-btn { color: #800000; }
.back-btn:hover { color: #5C0000; }

.rel-card:hover { box-shadow: 0 14px 34px rgba(80,20,10,0.12); transform: translateY(-3px); }

.rel-media { height: 150px; }
@media (max-width: 640px) { .rel-media { height: 220px; } }

select.tw-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23800000' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; }

/* ---------- contact form ---------- */
.ct-input, .ct-select, .ct-textarea { font-family: 'Inter', sans-serif; font-size: 15px; color: #2B2320; background: #FFFFFF; border: 1px solid #D8CBBB; border-radius: 12px; padding: 14px 16px; width: 100%; box-sizing: border-box; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.ct-input:focus, .ct-select:focus, .ct-textarea:focus { border-color: #800000; box-shadow: 0 0 0 3px rgba(128,0,0,0.10); }
.ct-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.ct-input::placeholder, .ct-textarea::placeholder { color: #A99A8B; }
.ct-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23800000' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }

.btn-submit { background: #800000; }
.btn-submit:hover { background: #9A1B1B; }

/* Blog article body. Lives here rather than only in js/blog-post.js so the
   article HTML baked into blog-<slug>.html by api/publish-lib.php is styled
   before JavaScript runs — the baked copy exists for crawlers, but a reader on a
   slow connection sees it first too, and unstyled prose flashing into styled
   prose looks broken. blog-post.js still injects the same rules at runtime; the
   duplicate is harmless and keeps the runtime path self-contained. */
.b-article p { font-size: 16.5px; line-height: 1.85; color: #4A3F37; margin: 0 0 20px; }
.b-article h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(24px, 3.4vw, 30px); font-weight: 600; color: #2B2320; margin: 38px 0 14px; line-height: 1.2; }
.b-article h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(20px, 2.6vw, 24px); font-weight: 600; color: #2B2320; margin: 30px 0 12px; line-height: 1.25; }
.b-article h4 { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: #2B2320; margin: 24px 0 10px; }
.b-article ul, .b-article ol { margin: 0 0 20px; padding-left: 24px; color: #4A3F37; font-size: 16.5px; line-height: 1.85; }
.b-article li { margin: 0 0 8px; }
.b-article a { color: #800000; text-decoration: underline; }
.b-article blockquote { margin: 0 0 22px; padding: 8px 22px; border-left: 3px solid #800000; color: #6A5D53; font-style: italic; }
.b-article img { max-width: 100%; height: auto; border-radius: 14px; display: block; margin: 24px 0; }
.b-article strong, .b-article b { font-weight: 700; }
.b-article hr { border: none; border-top: 1px solid #E4D8C7; margin: 32px 0; }