/*
 * Script titles - the layered "Thirsty script" heading from the original
 * site (and the voucher PDF): a pale base, the "rough shadow" layer offset
 * below it and the "three" texture on top.
 *
 * Markup comes from partials/site/script-title.htm:
 *   <h2 class="script-title">
 *     <span class="st-base">Text</span>
 *     <span class="st-shadow" aria-hidden="true">Text</span>
 *     <span class="st-texture" aria-hidden="true">Text</span>
 *   </h2>
 * The two decorative copies are absolutely positioned over the base, so
 * they wrap exactly like it.
 */

@font-face {
  font-family: "Thirsty script rough";
  src: url("../fonts/thirstyroughbold.woff2") format("woff2"),
       url("../fonts/thirstyroughbold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thirsty script rough shadow";
  src: url("../fonts/thirstyroughboldshadow.woff2") format("woff2"),
       url("../fonts/thirstyroughboldshadow.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thirsty script three";
  src: url("../fonts/thirstyroughboldthree.woff2") format("woff2"),
       url("../fonts/thirstyroughboldthree.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --script-base: #c1d3fc;     /* voucher: title fill      */
  --script-shadow: #334f91;   /* voucher: dark blue       */
  --script-texture: #7596ea;  /* voucher: mid blue        */
  --script-offset: 0.06em;    /* shadow drop (4px at 64px) */
}

.script-title {
  position: relative;
  font-family: "Thirsty script rough", var(--heading-font), cursive;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  color: var(--script-base);
}

.script-title > span { display: block; }

.script-title .st-shadow,
.script-title .st-texture {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  text-align: inherit;
}

.script-title .st-shadow {
  top: var(--script-offset);
  font-family: "Thirsty script rough shadow", cursive;
  color: var(--script-shadow);
}

.script-title .st-texture {
  top: 0;
  font-family: "Thirsty script three", cursive;
  color: var(--script-texture);
}

/* ---- Section titles (all blocks) --------------------------------------
   Horizon draws a short accent line with h2::before and pads the heading
   for it - not wanted under a script title. */
.section-title .script-title {
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  padding-top: 0;
}
.section-title .script-title::before { display: none; }
.section-title .script-title .st-shadow { top: var(--script-offset); }

/* ---- Page banner (subpages) -------------------------------------------- */
.page-title .heading .script-title {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  margin-bottom: 12px;
}

/* ---- Homepage hero ----------------------------------------------------- */
.hero .hero-content .script-title {
  font-size: clamp(2.75rem, 5.2vw, 4.5rem);
  margin-bottom: 24px;
}

/* Dark sections (colour mode dark / inverse): keep the layers readable. */
[data-bs-theme="dark"] .script-title {
  --script-shadow: #0f1b3d;
}

/* ==========================================================================
 * Spa illustrations - "Spa sketch icons" by macrovector / Magnific,
 * split into assets/images/spa/*.svg (dark blue #334f91).
 * ======================================================================== */

/* Service cards: the Icon field may name an illustration (12-stones.svg). */
.services .service-item .item-top .service-illustration {
  width: auto;
  height: 96px;
  max-width: 120px;
  object-fit: contain;
  transition: transform .4s ease-out;
}
.services .service-item:hover .item-top .service-illustration {
  transform: rotate(-4deg) scale(1.05);
}

/* Page banner: optional illustration on the right (Pages -> "Ilustrace"). */
.page-title .heading .page-illustration {
  display: block;
  width: 100%;
  max-width: 220px;
  max-height: 200px;
  margin-left: auto;
  object-fit: contain;
}
@media (max-width: 991.98px) {
  .page-title .heading .page-illustration {
    max-width: 140px;
    max-height: 130px;
    margin: 24px 0 0;
  }
}

/* Dark sections / dark mode: lift the dark-blue line art. */
[data-bs-theme="dark"] .service-illustration,
[data-bs-theme="dark"] .page-illustration {
  filter: invert(1) hue-rotate(180deg) brightness(1.15);
}