/* ==========================================================================
   IV Drips Greece — GLOBAL
   Design tokens, Kreadon font, base reset, header & footer chrome.
   Loaded on every page (homepage.css / innerpage.css load on top of this).
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --background: oklch(97.5% 0.018 85);
  --foreground: oklch(24.5% 0.025 45);
  --card: oklch(98.5% 0.012 85);
  --primary: oklch(72% 0.13 75);
  --primary-foreground: oklch(99% 0.005 85);
  --secondary: oklch(94% 0.025 80);
  --muted: oklch(93% 0.022 80);
  --muted-foreground: oklch(46% 0.025 50);
  --accent: oklch(83% 0.11 80);
  --border: oklch(88% 0.025 75);

  --gold: oklch(72% 0.13 75);
  --gold-light: oklch(88% 0.09 85);
  --gold-deep: oklch(58% 0.12 65);
  --ivory: oklch(97.5% 0.018 85);
  --sand: oklch(92% 0.03 78);
  --espresso: oklch(24.5% 0.025 45);

  --gradient-gold: linear-gradient(
    135deg,
    var(--gold-light),
    var(--gold),
    var(--gold-deep)
  );
  --gradient-ivory: linear-gradient(180deg, oklch(98.5% 0.012 85), var(--sand));
  --shadow-soft: 0 3rem 8rem -4rem oklch(58% 0.12 65 / 0.25);

  --font-kreadon:
    "Kreadon", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --header-height: 13.6rem;
  --header-height-mobile: 9.6rem;
}

/* ---------- Kreadon webfont ---------- */
@font-face {
  font-family: "Kreadon";
  src: url("../fonts/kreadon/fonts/webfonts/Kreadon-ExtraLight.woff2")
    format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kreadon";
  src: url("../fonts/kreadon/fonts/webfonts/Kreadon-Light.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kreadon";
  src: url("../fonts/kreadon/fonts/webfonts/Kreadon-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kreadon";
  src: url("../fonts/kreadon/fonts/webfonts/Kreadon-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kreadon";
  src: url("../fonts/kreadon/fonts/webfonts/Kreadon-Demi.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kreadon";
  src: url("../fonts/kreadon/fonts/webfonts/Kreadon-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kreadon";
  src: url("../fonts/kreadon/fonts/webfonts/Kreadon-ExtraBold.woff2")
    format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base reset ---------- */
* {
  box-sizing: border-box;
}
html {
  font-size: 62.5%; /* 1rem = 10px, so 1.6rem = 16px, 2.4rem = 24px, etc. */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background-color: var(--background) !important;
  color: var(--foreground);
  font-family: var(--font-kreadon) !important;
  font-size: 1.6rem; /* restores the 16px reading size for inherited/unset text */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  max-width: 100%;
}
a {
  text-decoration: none;
  color: inherit;
}
/* visually hidden but readable by screen readers/crawlers — for required
   semantic elements (e.g. a page's H1) whose text already appears visually
   elsewhere through a non-semantic route, like CSS generated content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* margin/padding only — list-style stays browser-default so rich-text
   content lists (articles, etc.) keep their bullets; nav/UI lists set
   list-style:none individually where they're already styled as such */
ul,
ol {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-kreadon) !important;
  font-weight: 600;
  margin: 0;
}

/* ---------- Layout ---------- */
/* Shared horizontal rhythm: every full-width section (header row, hero row,
   and every section to come) uses .container so they line up edge-to-edge
   no matter what each section's own vertical padding is. */
.container {
  width: 100%;
  max-width: 160rem;
  margin: 0 auto;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}
/* media query widths stay in px on purpose: under the 62.5% trick, rem/em
   inside @media is resolved against the browser's default root font-size
   (16px), not our 62.5% override, so a px breakpoint is the only unit that
   reliably fires at the intended viewport width */
@media (min-width: 768px) {
  .container {
    padding-left: 4.8rem;
    padding-right: 4.8rem;
  }
}

/* ---------- Typography utilities ---------- */
.text-gold-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* "— Label" eyebrow used above headings across most homepage sections */
.section-eyebrow {
  display: block;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* frosted-glass card used for floating panels over a photo (e.g. concierge) */
.glass-ivory {
  -webkit-backdrop-filter: blur(2rem) saturate(140%);
  backdrop-filter: blur(2rem) saturate(140%);
  background: oklch(99% 0.01 85 / 0.55);
  border: 1px solid oklch(99% 0.01 85 / 0.6);
}

/* ---------- Buttons & links ---------- */
.btn-liquid,
.btn-liquid-solid {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 2.4rem;
  border-radius: 99.9rem;
  font-family: var(--font-kreadon);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-liquid {
  color: var(--espresso);
  background: oklch(99% 0.01 85 / 0.4);
  border: 1px solid oklch(72% 0.13 75 / 0.6);
  -webkit-backdrop-filter: blur(1.2rem);
  backdrop-filter: blur(1.2rem);
}
.btn-liquid:hover {
  border-color: var(--gold-deep);
}
.btn-liquid-solid {
  color: oklch(99% 0.005 85);
  background: var(--gradient-gold);
  background-size: 200% 200%;
  background-position: 0 0;
  border: none;
  transition:
    background-position 1.2s,
    transform 0.5s;
}
.btn-liquid-solid:hover {
  background-position: 100% 100%;
  transform: translateY(-0.2rem);
}
/* underlined label + arrow, reused for "discover more"-style links across sections */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--espresso);
  transition: color 0.3s ease;
}
.link-arrow__label {
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.4rem;
}
.link-arrow__icon {
  display: inline-block;
  transition: transform 0.3s ease;
}
.link-arrow:hover {
  color: var(--gold-deep);
}
.link-arrow:hover .link-arrow__icon {
  transform: translateX(0.4rem);
}

/* ==========================================================================
   Therapy card (zig-zag list)
   Shared between the homepage Therapies section and the /therapies category
   inner page — lives here (not homepage.css) so both render identically.
   ========================================================================== */
.therapies__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 9.6rem;
  /* therapy-card content is loop-rendered (newsmodules/module1.php via the
     {{news::latest::...}} module on position15, or directly in _category.php
     for the /therapies listing) — numbering and the alternating image side
     are driven by DOM position (counter / nth-child) rather than per-item
     markup, since neither rendering path has a loop-index */
  counter-reset: therapy-counter;
}
@media (min-width: 768px) {
  .therapies__list {
    gap: 16rem;
  }
}

.therapy-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 4.8rem;
  counter-increment: therapy-counter;
  /* splash-in entrance, triggered by the IntersectionObserver in app.js;
     .is-visible gets added once per card the first time it scrolls in */
  opacity: 0;
  transform: translateY(4rem) scale(0.96);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.therapy-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (min-width: 768px) {
  .therapy-card {
    grid-template-columns: 5fr 6fr;
    gap: 12rem;
  }
  /* explicit grid-column (not order) so the image keeps its 5fr track and
     the text keeps its 6fr track regardless of which side they're on —
     using order here would make the columns swap proportions along with
     position, so the image goes wide/text goes narrow every other card */
  .therapy-card__media {
    grid-column: 1;
    grid-row: 1;
  }
  .therapy-card__content {
    grid-column: 2;
    grid-row: 1;
  }
  .therapies__list .therapy-card:nth-child(even) .therapy-card__media {
    grid-column: 2;
  }
  .therapies__list .therapy-card:nth-child(even) .therapy-card__content {
    grid-column: 1;
  }
}

.therapy-card__media {
  position: relative;
}
.therapy-card__image {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 62% 38% 54% 46% / 48% 56% 44% 52%;
  transition: border-radius 1s ease;
}
.therapy-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.therapy-card:hover .therapy-card__image {
  border-radius: 50%;
}
.therapy-card__number {
  position: absolute;
  top: -2.4rem;
  left: -2.4rem;
  font-family: var(--font-kreadon);
  font-weight: 700;
  font-size: 8rem;
  line-height: 1;
  color: oklch(72% 0.13 75 / 0.3);
  transition: color 0.5s ease;
}
.therapy-card__number::before {
  content: counter(therapy-counter, decimal-leading-zero);
}
.therapy-card:hover .therapy-card__number {
  color: oklch(72% 0.13 75 / 0.5);
}
@media (max-width: 767px) {
  .therapy-card__number {
    top: -1.2rem;
    left: 0;
    font-size: 5.6rem;
  }
}

.therapy-card__title {
  margin: 1.6rem 0 0;
  font-weight: 700;
  font-size: clamp(2.4rem, 3vw, 3.6rem);
  line-height: 1.2;
  color: var(--espresso);
}
.therapy-card__title a {
  transition: color 0.3s ease;
}
.therapy-card__title a:hover {
  color: var(--gold-deep);
}
.therapy-card__description {
  max-width: 40rem;
  margin: 2.4rem 0 0;
  font-size: 1.8rem;
  line-height: 1.7;
  color: var(--espresso);
  opacity: 0.75;
}
.therapy-card__meta {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: 3.2rem 0 0;
}
.therapy-card__meta-label {
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--espresso);
  opacity: 0.5;
}
.therapy-card__meta-value {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--espresso);
}
.therapy-card__content .link-arrow {
  margin-top: 4rem;
}

/* ==========================================================================
   Site Header
   logo (position1) | centered menu (position2) | lang switch + CTA (position3)

   The CMS positions already arrive as complete elements (an <a id="logo">,
   a <ul class="center"> menu, a <ul class="inline-list right"> language
   switcher) — page.php no longer wraps them in extra <a>/<ul> tags, it just
   drops them into plain containers. Selectors below target what the CMS
   actually renders.
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease;
}
.innerpage .site-header {
  background-color: var(--ivory) !important;
  box-shadow: 0 1px 0 var(--border);
}
.innerpage .site-header__row {
  padding-top: 0;
  padding-bottom: 0;
}
.innerpage .title-area .name #logo img {
  height: 6rem;
}
/* inner pages start in the same compact state the homepage only reaches
   after scrolling — without this, the bar still reserves the tall
   unscrolled height while the logo above is already shrunk, leaving the
   small logo floating in a too-tall bar */
.innerpage nav.top-bar {
  height: 8rem;
}
.site-header.site-header--scrolled {
  background-color: var(--ivory) !important;
  box-shadow: 0 1px 0 var(--border);
}
.site-header__row {
  /* must outrank .mobile-menu-overlay's z-index within this shared
     .site-header stacking context, otherwise the dimming overlay (meant
     for the page behind the menu) paints over the open menu itself */
  position: relative;
  z-index: 999;
  padding-top: 2rem;
  padding-bottom: 2rem;
  transition: padding 0.4s ease;
}
@media (min-width: 768px) {
  .site-header__row {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
}
.site-header--scrolled .site-header__row {
  padding-top: 0;
  padding-bottom: 0;
}

nav.top-bar {
  background-color: transparent !important;
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  transition: height 0.4s ease;
}
/* the bar itself reserves var(--header-height); without this the logo
   shrinks on scroll but the (still fixed-height) bar just leaves empty
   space around it instead of actually getting shorter */
.site-header--scrolled nav.top-bar:not(:has(.mobile-menu-checkbox:checked)) {
  height: 8rem;
}

/* ---- logo (position 1) ---- */
ul.title-area {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  /* <ul> has a browser-default left padding (list indent) — without this
     reset the logo sits ~4rem further right than the rest of the header */
  padding: 0;
  background: transparent;
}
.title-area .name {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1;
}
.title-area .name a {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 0;
  font-family: var(--font-kreadon) !important;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: var(--espresso) !important;
}
.title-area .name #logo img {
  display: block;
  height: 9.6rem;
  width: auto;
  transition: height 0.4s ease;
}
.site-header--scrolled .title-area .name #logo img {
  height: 6rem;
}

/* ---- mobile menu toggle ---- */
.toggle-topbar.menu-icon {
  position: static;
  margin-top: 0;
  padding-left: 0;
}
.toggle-topbar.menu-icon label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  cursor: pointer;
}
.toggle-topbar.menu-icon label span {
  display: block;
  width: 2.2rem;
  height: 1px; /* hairline */
  background: var(--espresso);
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
/* mobile menu state is driven entirely by the checkbox below — no JS */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: oklch(24.5% 0.025 45 / 0.4);
  cursor: pointer;
}
body:has(.mobile-menu-checkbox:checked) .mobile-menu-overlay {
  display: block;
}

section.top-bar-section {
  background-color: transparent !important;
  margin-top: 0 !important;
}
.site-header__menu,
.site-header__actions {
  background: transparent;
}

/* ---- center menu (position 2 renders <ul class="center">) ---- */
.site-header__menu ul.center {
  display: flex;
  align-items: center;
  gap: 3.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header__menu ul.center li {
  background: transparent;
}
.site-header__menu ul.center li > a {
  display: inline-block;
  font-family: var(--font-kreadon) !important;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso);
  text-shadow: 0 0.1rem 0.6rem oklch(97.5% 0.018 85 / 0.5);
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}
.site-header__menu ul.center li > a:hover,
.site-header__menu ul.center li.active > a {
  color: var(--gold-deep);
}
.site-header.site-header--scrolled .site-header__menu ul.center li > a,
.innerpage .site-header__menu ul.center li > a {
  text-shadow: none;
}

/* ---- language switch + CTA (position 3 renders <ul class="inline-list right">) ---- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.site-header__actions ul.inline-list {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  flex: 2 0 3.4rem;
}
.site-header__actions ul.inline-list > li {
  float: none;
  margin-left: 0;
}
.site-header__actions ul.inline-list li > a img {
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.65;
  transition: opacity 0.3s ease;
}
.site-header__actions ul.inline-list li > a:hover img {
  opacity: 1;
}
.site-header__actions .reserve-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-kreadon);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: oklch(99% 0.005 85);
  background: var(--gradient-gold);
  background-size: 200% 200%;
  background-position: 0 0;
  padding: 1.04rem 2.4rem;
  border-radius: 99.9rem;
  transition:
    background-position 1s ease,
    transform 0.4s ease;
}
.site-header__actions .reserve-link:hover {
  background-position: 100% 100%;
  transform: translateY(-0.1rem);
}

@media (min-width: 1440px) {
  nav.top-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 3.2rem;
    height: var(--header-height);
  }
  ul.title-area {
    grid-column: 1;
    justify-self: start;
  }
  .title-area .name #logo img {
    height: 12.8rem;
  }
  .site-header--scrolled .title-area .name #logo img {
    height: 6rem;
  }
  .toggle-topbar.menu-icon {
    display: none;
  }
  .top-bar-section {
    display: contents;
  }
  .site-header__menu {
    grid-column: 2;
    justify-self: center;
  }
  .site-header__menu ul.center {
    gap: 3.6rem;
  }
  .site-header__menu ul.center li > a {
    font-size: 1.6rem;
    letter-spacing: 0.14em;
  }
  .site-header__actions {
    grid-column: 3;
    justify-self: end;
    gap: 2.4rem;
  }
  .site-header__actions .reserve-link {
    padding: 1.04rem 2.4rem;
    font-size: 1.6rem;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 1439px) {
  nav.top-bar {
    height: var(--header-height-mobile);
    overflow: hidden;
  }
  nav.top-bar:has(.mobile-menu-checkbox:checked) {
    height: auto;
    background-color: var(--ivory) !important;
  }
  .site-header {
    background-color: var(--ivory) !important;
    box-shadow: 0 1px 0 var(--border);
  }
  /* Homepage only: prevent the scrolled-state height shrink (13.6→8rem) on
     mobile — the title-area is fixed at 9.6rem so a shorter nav would
     misalign logo and hamburger. Inner pages already use 8rem and their own
     title-area fix below keeps them in sync. */
  body.homepage .site-header--scrolled nav.top-bar:not(:has(.mobile-menu-checkbox:checked)) {
    height: var(--header-height-mobile);
  }
  ul.title-area {
    width: 100%;
    height: var(--header-height-mobile);
    justify-content: space-between;
  }
  /* Inner pages always have an 8rem nav — match the title-area so logo and
     hamburger are centred in the same 8rem box on every scroll state */
  .innerpage ul.title-area {
    height: 8rem;
  }
  .top-bar-section {
    display: block;
    width: 100%;
  }
  .site-header__menu ul.center {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
    padding: 0.8rem 0 1.6rem;
  }
  .site-header__menu ul.center li {
    width: 100%;
  }
  .site-header__menu ul.center li > a {
    display: block;
    padding: 1.4rem 0;
  }
  /* Actions: flag + BOOK NOW side-by-side */
  .site-header__actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 1.2rem;
    padding: 1.6rem 0 2.4rem;
    border-top: 1px solid var(--border);
  }
  .site-header__actions ul.inline-list {
    flex: 0 0 auto;
    padding: 0;
  }
  .site-header__actions .reserve-link {
    flex: 1;
    justify-content: center;
  }
  /* Hamburger → X when menu is open */
  nav.top-bar:has(.mobile-menu-checkbox:checked) .toggle-topbar.menu-icon label span:nth-child(1) {
    transform: translateY(0.5rem) rotate(45deg);
  }
  nav.top-bar:has(.mobile-menu-checkbox:checked) .toggle-topbar.menu-icon label span:nth-child(2) {
    opacity: 0;
  }
  nav.top-bar:has(.mobile-menu-checkbox:checked) .toggle-topbar.menu-icon label span:nth-child(3) {
    transform: translateY(-0.5rem) rotate(-45deg);
  }
}

@media (max-width: 767px) {
  body.homepage .site-header__row {
    padding-top: 0;
    padding-bottom: 0;
  }
  body.homepage nav.top-bar:not(:has(.mobile-menu-checkbox:checked)),
  body.homepage .site-header--scrolled nav.top-bar:not(:has(.mobile-menu-checkbox:checked)) {
    height: 8rem;
  }
  body.homepage ul.title-area {
    height: 8rem;
  }
  body.homepage .title-area .name #logo img {
    height: 6rem;
  }
}

/* ==========================================================================
   Site Footer
   Appears on every page. Content is hardcoded directly (no lang()/CMS
   positions) per explicit request — revisit if it needs to be editable
   or translated later.
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--espresso);
  color: var(--ivory);
  padding: 12.8rem 0 4.8rem;
}
.site-footer__blob {
  position: absolute;
  top: -12.8rem;
  left: 30%;
  z-index: 0;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(72% 0.13 75 / 0.2), transparent);
  filter: blur(8rem);
  pointer-events: none;
}

.site-footer__columns {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
}
@media (min-width: 640px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 4.8rem;
  }
}
@media (min-width: 1024px) {
  .site-footer__columns {
    grid-template-columns: 3fr 2fr 2fr 3fr;
  }
}
.site-footer__col--brand {
  grid-column: 1 / -1;
}
@media (min-width: 1024px) {
  .site-footer__col--brand {
    grid-column: auto;
  }
}
.site-footer__logo {
  display: inline-block;
}
.site-footer__logo img {
  display: block;
  /* logo.png is gold/espresso-toned for the light header; recolour white
     for the dark footer background */
  filter: brightness(0) invert(1);
}
.site-footer__blurb {
  max-width: 32rem;
  margin: 2.4rem 0 0;
  font-size: 1.6rem;
  line-height: 1.7;
  color: oklch(97.5% 0.018 85 / 0.65);
}
.site-footer__col-title {
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.site-footer__links {
  margin: 2.4rem 0 0;
}
.site-footer__links,
.site-footer__links ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.site-footer__links ul {
  margin: 0;
}
.site-footer__links a {
  font-size: 1.6rem;
  color: oklch(97.5% 0.018 85 / 0.75);
  transition: color 0.3s ease;
}
.site-footer__links a:hover {
  color: var(--gold);
}

.site-footer__social {
  display: flex;
  gap: 1.2rem;
  margin-top: 2.4rem;
}
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 1px solid oklch(97.5% 0.018 85 / 0.25);
  color: var(--ivory);
  transition:
    border-color 0.3s ease,
    color 0.3s ease;
}
.site-footer__social-link svg {
  width: 1.8rem;
  height: 1.8rem;
}
/* the Instagram path has its own padding baked into its 256x256 viewBox
   (the artwork only fills ~72% of it), unlike the Facebook/LinkedIn paths
   which use nearly the full canvas — scale it up so all three read as the
   same visual size inside their buttons */
.site-footer__social-link[aria-label="Instagram"] svg {
  transform: scale(1.35);
}
.site-footer__social-link:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.site-footer__contact {
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.site-footer__contact a {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.6rem;
  color: oklch(97.5% 0.018 85 / 0.75);
  transition: color 0.3s ease;
}
.site-footer__contact a:hover {
  color: var(--gold);
}
.site-footer__contact svg {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--gold);
}

.site-footer__disclaimer {
  position: relative;
  z-index: 1;
  margin-top: 8rem;
  padding: 3.2rem;
  border-radius: 1.6rem;
  background-color: oklch(97.5% 0.018 85 / 0.05);
  font-size: 1.6rem;
  line-height: 1.7;
  color: oklch(97.5% 0.018 85 / 0.55);
}
.site-footer__disclaimer-title {
  margin: 0 0 1.2rem;
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  color: oklch(97.5% 0.018 85 / 0.7);
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: 4.8rem;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  color: oklch(97.5% 0.018 85 / 0.45);
}
.site-footer__bottom-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.site-footer__bottom-left a {
  color: inherit;
  transition: color 0.3s ease;
}
.site-footer__bottom-left a:hover {
  color: var(--gold);
}
.site-footer__bullet {
  opacity: 0.5;
}
.site-footer__credit img {
  display: block;
}

.site-footer__bottom-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
}
.site-footer__powered-by {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: inherit;
  transition: opacity 0.3s ease;
}
.site-footer__powered-by:hover {
  opacity: 0.75;
}
.site-footer__powered-by img {
  display: block;
}
.site-footer__powered-by-logo {
  /* matches imonline-white.png's natural ~4.7rem height so the two
     credits read as the same visual weight, not one bigger than the other */
  height: 4.4rem;
  width: auto;
  /* the source logo is red/gray on a light background; recolour the
     whole mark white to read cleanly on the dark footer, same trick as
     the header/footer ivdrips.gr logo */
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .site-footer {
    padding-top: 6.4rem;
  }
  .site-footer__logo img {
    height: 7rem;
    width: auto;
  }
  .site-footer__disclaimer {
    margin-top: 6.4rem;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .site-footer__bottom-left {
    justify-content: center;
  }
  .site-footer__bottom-right {
    justify-content: center;
  }
}

/* ---------- Floating WhatsApp button (sitewide) ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 2.4rem;
  right: 2.4rem;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  box-shadow: 0 0.6rem 2rem oklch(0% 0 0 / 0.25);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 0.8rem 2.4rem oklch(0% 0 0 / 0.3);
}
.whatsapp-float svg {
  position: relative;
  z-index: 1;
  width: 2.8rem;
  height: 2.8rem;
}
.whatsapp-float__pulse {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background-color: #25d366;
  animation: whatsappPulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes whatsappPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float__pulse {
    animation: none;
    display: none;
  }
}
@media (min-width: 768px) {
  .whatsapp-float {
    bottom: 3.2rem;
    right: 3.2rem;
    width: 6.4rem;
    height: 6.4rem;
  }
  .whatsapp-float svg {
    width: 3.2rem;
    height: 3.2rem;
  }
}

/* ---------- Preloader ---------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  background: radial-gradient(
    ellipse at 50% 38%,
    var(--card) 0%,
    var(--ivory) 62%
  );
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#preloader .loader-mark {
  width: min(34vw, 17rem);
  filter: drop-shadow(0 0 2.6rem oklch(72% 0.13 75 / 0.2));
}

#preloader .loader-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}

#preloader .loader-brand__name {
  font-family: var(--font-kreadon);
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--espresso);
}

#preloader .loader-brand__tagline {
  position: relative;
  padding-top: 1rem;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

#preloader .loader-brand__tagline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3.6rem;
  height: 1px;
  background: var(--gradient-gold);
}

#preloader .preloader-trace {
  fill: url(#preloaderGoldGrad);
  fill-opacity: 0;
  stroke: url(#preloaderGoldGrad);
  stroke-width: 70;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

@keyframes preloaderDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes preloaderFillReveal {
  to {
    fill-opacity: 1;
    stroke-opacity: 0;
  }
}

#preloader-p0 {
  animation:
    preloaderDraw 2.2s cubic-bezier(0.45, 0, 0.25, 1) 0s forwards,
    preloaderFillReveal 1s ease-out 2.2s forwards;
}
#preloader-p1 {
  animation:
    preloaderDraw 1.9s cubic-bezier(0.45, 0, 0.25, 1) 0.25s forwards,
    preloaderFillReveal 0.85s ease-out 2.1s forwards;
}
#preloader-p2 {
  animation:
    preloaderDraw 1.4s cubic-bezier(0.45, 0, 0.25, 1) 0.6s forwards,
    preloaderFillReveal 0.85s ease-out 1.95s forwards;
}
#preloader-p3 {
  animation:
    preloaderDraw 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.4s forwards,
    preloaderFillReveal 0.85s ease-out 2.1s forwards;
}
#preloader-p4 {
  animation:
    preloaderDraw 1.5s cubic-bezier(0.45, 0, 0.25, 1) 0.5s forwards,
    preloaderFillReveal 0.85s ease-out 2s forwards;
}

#preloader .preloader-pulse {
  animation: preloaderBreathe 2.6s ease-in-out 3.5s infinite;
  transform-origin: 288px 396px;
}
@keyframes preloaderBreathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.82;
  }
}

@media (prefers-reduced-motion: reduce) {
  #preloader .preloader-trace {
    animation: none !important;
    fill-opacity: 1;
    stroke-opacity: 0;
  }
  #preloader .preloader-pulse {
    animation: none !important;
  }
}