/*
 * artemis — this site's own styles, after the theme's (docs/site-overrides.md).
 */

/* ── The look of artemishotelcrete.gr ─────────────────────────────────────────────────────────
   Headings in Cardo (a classical serif with real Greek; the live site's Marcellus has none),
   text in the theme's Google Sans; a warm off-white page; one container for everything; square
   corners. Cardo: public/site/fonts (SIL Open Font License, Cardo-OFL.txt), Latin + Greek. */
@font-face { font-family: "Cardo"; src: url("fonts/cardo-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cardo"; src: url("fonts/cardo-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cardo"; src: url("fonts/cardo-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --font-heading: "Cardo", Georgia, "Times New Roman", serif;
  --fs-h1: clamp(2.6rem, 4.4vw + 1rem, 4.9rem);
  --fs-h2: clamp(2.1rem, 2.6vw + 1rem, 3.5rem);
  --fs-h3: clamp(1.45rem, 1vw + 1rem, 1.9rem);
  --fs-h4: 1.3rem;

  --color-bg: #F7F6F2;
  --color-surface: #EDEBE5;
  --color-surface-2: #E1DFD9;
  --color-text: #1E2223;
  --color-ink: #1A1B1A;
  --color-muted: #5A5F60;
  --color-border: rgb(30 34 35 / 0.12);
  --color-border-strong: rgb(30 34 35 / 0.28);

  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;

  --container: 1200px;
  --measure: 860px;
}
body { background: var(--color-bg); }
::selection { background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-ink); }

/* Headings: the serif at its regular weight, open, never squeezed. */
:is(h1, h2, h3, h4, .el-heading__title, .page-header__title) {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
}
.el-heading__title--xl { line-height: 1.04; letter-spacing: -0.005em; }
/* Small headings (cards, feature titles) stay in the text face, as the live site's facts do. */
:is(.el-feature__title, .card__meta, .el-heading__title--s) { font-family: var(--font-body); letter-spacing: 0; }

/* Buttons: square, small spaced capitals — the live site's. */
.button {
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.95em 1.9em;
}

/* One width: a page's breadcrumb, heading and text start where its sections start (the
   container's left edge), the text kept to a comfortable line; no narrow middle column. */
article.container.measure { max-width: none; }
article.container.measure > *,
.container > .measure { max-width: var(--measure); margin-inline: 0; }

/* The breadcrumb: readable, with air around it. */
.breadcrumbs { margin: var(--space-6) 0 var(--space-5); font-size: 0.95rem; letter-spacing: 0.01em; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline: 0.65rem 0.15rem; color: var(--color-border-strong); }
.breadcrumbs a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.breadcrumbs a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.breadcrumbs [aria-current="page"] { color: var(--color-ink); font-weight: 500; }

/* A page's main image, edge to edge under the header like the home page's slideshow, with the
   page's title and intro on it (site/views/theme/partials/hero.blade.php). */
.page-hero {
  position: relative;
  display: grid;
  margin-top: calc(-1 * var(--main-pad));
  margin-bottom: var(--space-6);
  min-height: clamp(360px, 62vh, 680px);
  color: #fff;
  overflow: hidden;
}
/* The picture fills the box and never sets its height: the box is min-height, or taller when a
   long title and intro need it (a phone). */
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media :is(picture, img) { display: block; width: 100%; height: 100%; }
.page-hero__media img { object-fit: cover; border-radius: 0; max-height: none; }
/* The same veil as the home page's hero (its section's overlay 0.4), a little darker at the
   bottom where the intro sits. */
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.5));
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--space-7) var(--edge);
  text-align: center;
}
.page-header--hero { margin: 0; max-width: 52rem; }
.page-header--hero .page-header__title { color: #fff; text-wrap: balance; }
.page-header--hero .page-header__intro { color: rgb(255 255 255 / 0.92); margin-inline: auto; text-wrap: pretty; }
.page-header--hero .page-header__eyebrow { color: #fff; }
.page-hero :is(.page-header__title, .page-header__intro, .page-header__eyebrow) { text-shadow: 0 1px 12px rgb(0 0 0 / 0.35); }

/* The ESPA banner on the home page's hero: top right on a computer, top centre on a phone. */
.hero { position: relative; }
.espa-banner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: block;
  line-height: 0;
  background: #fff;
}
.espa-banner img { display: block; width: 300px; max-width: calc(100vw - 2 * var(--edge)); height: auto; }
.espa-banner:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
@media (max-width: 767px) {
  .espa-banner { right: auto; left: 50%; transform: translateX(-50%); }
}

/* «Newsletter» (site/blocks/Newsletter.php), «Πριν το footer» on every page: a full-width band,
   the photo under a teal veil (the site's accent), the label between two short rules, a large
   heading, one joined field + button, a line of perks. Stacked on a phone. */
.block-newsletter {
  --nl-deep: color-mix(in srgb, var(--color-accent) 55%, #031a20);
  position: relative;
  isolation: isolate;
  /* Straight into the footer: no block margins around the band. */
  margin-block: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: clamp(440px, 58vh, 600px);
  padding: clamp(3.5rem, 8vw, 6rem) var(--edge);
  color: #fff;
  text-align: center;
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--color-accent) 70%, #fff) 0%, transparent 55%),
    linear-gradient(160deg, var(--color-accent), var(--nl-deep));
}
.block-newsletter__bg { position: absolute; inset: 0; z-index: -2; }
.block-newsletter__bg :is(picture, img) { display: block; width: 100%; height: 100%; }
.block-newsletter__bg img { object-fit: cover; transform: scale(1.04); }
/* The veil: the accent over the photo, deeper at the bottom; the words always read. */
.block-newsletter--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 52%, transparent) 0%, color-mix(in srgb, var(--nl-deep) 82%, transparent) 100%);
}
.block-newsletter__inner { position: relative; width: min(100%, 40rem); text-shadow: 0 1px 14px rgb(0 0 0 / 0.35); }
.block-newsletter__field { text-shadow: none; }

.block-newsletter__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 var(--space-4);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.85);
}
.block-newsletter__eyebrow::before,
.block-newsletter__eyebrow::after { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: 0.6; }

.block-newsletter__heading {
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 3.2vw + 1rem, 3.4rem);
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
}
.block-newsletter__text { margin: 0 auto var(--space-6); max-width: 34rem; font-size: 1.05rem; color: rgb(255 255 255 / 0.88); text-wrap: pretty; }

/* One field: the envelope, the email and the button in a white bar. */
.block-newsletter__form { position: relative; max-width: 34rem; margin-inline: auto; }
.block-newsletter__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem;
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.2);
  transition: box-shadow 0.2s ease;
}
.block-newsletter__field:focus-within { box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.55), 0 0 0 4px rgb(255 255 255 / 0.35); }
.block-newsletter__field:has([aria-invalid="true"]) { box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.55), 0 0 0 3px #ffb4a8; }
.block-newsletter__icon { flex: none; width: 1.25rem; height: 1.25rem; margin-left: 0.85rem; fill: none; stroke: var(--color-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.block-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 0.25rem;
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: transparent;
  border: 0;
  outline: none;
}
.block-newsletter__input::placeholder { color: #6b767d; }
.block-newsletter__button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0 1.4rem 0 1.6rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.block-newsletter__button:hover { background: var(--color-accent-hover); }
.block-newsletter__button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.block-newsletter__arrow { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.block-newsletter__button:hover .block-newsletter__arrow { transform: translateX(3px); }

/* Sending: the button dims and its arrow keeps nudging forward. */
.block-newsletter__form.is-sending .block-newsletter__button { pointer-events: none; opacity: 0.8; }
.block-newsletter__form.is-sending .block-newsletter__arrow { animation: nl-nudge 0.7s ease-in-out infinite alternate; }
@keyframes nl-nudge { to { transform: translateX(5px); } }

.block-newsletter__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.block-newsletter__status { margin: var(--space-3) 0 0; min-height: 1.5em; font-size: 0.95rem; color: #fff; }
.block-newsletter__status.is-error { color: #ffd2ca; font-weight: 500; }

.block-newsletter__perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: rgb(255 255 255 / 0.92);
}
.block-newsletter__perks li { display: inline-flex; align-items: center; gap: 0.45rem; }
.block-newsletter__perks li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.2) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22m4.5 8.2 2.2 2.2 4.8-4.8%22 fill=%22none%22 stroke=%22white%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / 100% no-repeat;
}
.block-newsletter__note { margin: var(--space-4) 0 0; font-size: 0.8rem; color: rgb(255 255 255 / 0.72); }
.block-newsletter__note a { color: inherit; text-underline-offset: 3px; }
.block-newsletter__note a:hover { color: #fff; }

/* Signed up: the bar gives way to a drawn tick and the thank-you. */
.block-newsletter__done { display: none; }
.block-newsletter__form.is-done .block-newsletter__field { display: none; }
.block-newsletter__form.is-done .block-newsletter__done { display: block; }
.block-newsletter__done svg { display: block; width: 64px; height: 64px; margin: 0 auto; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.block-newsletter__done circle { stroke: rgb(255 255 255 / 0.45); stroke-dasharray: 151; stroke-dashoffset: 151; animation: nl-draw 0.6s ease forwards; }
.block-newsletter__done path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: nl-draw 0.4s 0.45s ease forwards; }
@keyframes nl-draw { to { stroke-dashoffset: 0; } }
.block-newsletter__form.is-done .block-newsletter__status { margin-top: var(--space-4); font-family: var(--font-heading); font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); }

/* A phone: the email above, the button full width below, both inside the white card. */
@media (max-width: 559px) {
  .block-newsletter__field { flex-wrap: wrap; border-radius: var(--radius-lg); padding: 0.5rem; }
  .block-newsletter__input { flex-basis: calc(100% - 3rem); }
  .block-newsletter__button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .block-newsletter__button, .block-newsletter__arrow, .block-newsletter__field { transition: none; }
  .block-newsletter__form.is-sending .block-newsletter__arrow { animation: none; }
  .block-newsletter__done :is(circle, path) { animation: none; stroke-dashoffset: 0; }
}

/* No gap above the footer: the newsletter band (or the page) runs into it. */
.site-footer { margin-top: 0; }


/* The home page's availability bar (site/views/theme/partials/availability-bar.blade.php): a
   floating panel half over the slideshow's lower edge. Each choice is a soft cell (label above,
   value below) parted by short rules; the cell under the pointer or the keyboard lights up. On a
   phone: a card under the slideshow, the dates side by side, the rest full width. */
.availability {
  --ab-ink: #13262b;
  --ab-label: color-mix(in srgb, var(--color-accent) 78%, #13262b);
  --ab-cell: color-mix(in srgb, var(--color-accent) 7%, #fff);
  --ab-shadow: 0 30px 60px -28px rgb(3 26 32 / 0.55), 0 10px 22px -12px rgb(3 26 32 / 0.25);
  position: relative;
  z-index: 3;
  width: min(100% - 2 * var(--edge), 1040px);
  margin: calc(-1 * clamp(3rem, 8vw, 4rem)) auto clamp(2rem, 5vw, 3.5rem);
}
.availability__bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--ab-shadow);
}

.availability__field {
  position: relative;
  min-width: 0;
  padding: 0.7rem 1rem 0.65rem;
  border-radius: var(--radius);
  background: var(--ab-cell);
  transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.availability__field--room,
.availability__field--guests { grid-column: 1 / -1; }
.availability__field:hover { background: color-mix(in srgb, var(--color-accent) 11%, #fff); }
.availability__field:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--color-accent); }

.availability__label {
  display: block;
  margin: 0 0 0.15rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ab-label);
}
.availability__control { position: relative; }
.availability__control :is(input, select),
.availability__summary {
  display: block;
  width: 100%;
  min-height: 1.9rem;
  padding: 0;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ab-ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.availability__control input::placeholder { color: color-mix(in srgb, var(--ab-ink) 45%, transparent); font-weight: 400; }
/* The room and the guests open something: a fine chevron says so. */
.availability__control select,
.availability__summary {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22m7 10 5 5 5-5%22 fill=%22none%22 stroke=%22%2313262b%22 stroke-opacity=%22.55%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") right center / 1.1rem no-repeat;
}
.availability__summary[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22m7 14 5-5 5 5%22 fill=%22none%22 stroke=%22%2313262b%22 stroke-opacity=%22.55%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.availability__control select option { color: var(--ab-ink); }

/* Guests: − / + steppers in a small panel (site.js); without JavaScript, two number boxes. */
.availability__guests { display: grid; gap: 0.6rem; margin-top: 0.4rem; }
.js .availability__field--guests:not(.is-open) .availability__guests[data-ready] { display: none; }
.availability__guests[data-ready] {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.6rem);
  right: 0;
  width: max(100%, 300px);
  margin: 0;
  padding: 1rem 1.1rem 0.9rem;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--ab-shadow), 0 0 0 1px rgb(19 38 43 / 0.06);
  cursor: auto;
}
.availability__field--guests.is-open .availability__guests[data-ready] { animation: ab-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ab-rise { from { opacity: 0; transform: translateY(-6px); } }
.availability__guest { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.availability__guest + .availability__guest { padding-top: 0.6rem; border-top: 1px solid rgb(19 38 43 / 0.08); }
.availability__guest label { font-size: 1rem; font-weight: 500; color: var(--ab-ink); }
.availability__stepper { display: flex; align-items: center; gap: 0.35rem; }
.availability__stepper input {
  width: 2.4rem;
  min-height: 2.25rem;
  padding: 0;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ab-ink);
  background: transparent;
  border: 0;
  -moz-appearance: textfield;
}
.availability__stepper input::-webkit-inner-spin-button,
.availability__stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.availability__stepper input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 8px; }
.availability__stepper button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--color-accent);
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 35%, #fff);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.availability__stepper button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.availability__stepper button:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.availability__stepper button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.availability__stepper button:disabled { color: rgb(19 38 43 / 0.25); border-color: rgb(19 38 43 / 0.1); cursor: default; }
.availability__done {
  justify-self: end;
  margin-top: 0.2rem;
  padding: 0.35rem 0.2rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.availability__done:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 6px; }

.availability__submit {
  grid-column: 1 / -1;
  min-height: 3.5rem;
  padding: 0 2rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--color-accent) 90%, #000);
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.availability__submit:hover { background: var(--color-accent-hover); transform: translateY(-1px); box-shadow: 0 16px 28px -14px color-mix(in srgb, var(--color-accent) 90%, #000); }
.availability__submit:active { transform: translateY(0); }
.availability__submit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* A computer: one row, the cells parted by short rules instead of tiles. */
@media (min-width: 1024px) {
  .availability { margin-top: calc(-1 * clamp(6rem, 13vh, 7.75rem)); }
  .availability__bar { grid-template-columns: 1fr 1fr 1.45fr 1.25fr auto; gap: 0; padding: 0.55rem; align-items: stretch; }
  .availability__field--room, .availability__field--guests { grid-column: auto; }
  .availability__field { padding: 0.8rem 1.35rem 0.75rem; background: transparent; }
  .availability__field + .availability__field::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26%;
    bottom: 26%;
    width: 1px;
    background: rgb(19 38 43 / 0.12);
    transition: opacity 0.2s ease;
  }
  .availability__field:hover::before, .availability__field:hover + .availability__field::before,
  .availability__field:focus-within::before, .availability__field:focus-within + .availability__field::before { opacity: 0; }
  .availability__field:hover { background: var(--ab-cell); }
  .availability__submit { grid-column: auto; margin-left: 0.4rem; padding: 0 2.1rem; }
}
/* A phone: the guests' panel opens inside the card, not over the page. */
@media (max-width: 1023px) {
  .availability__guests[data-ready] { position: static; width: auto; margin-top: 0.6rem; padding: 0.75rem 0 0.2rem; background: transparent; box-shadow: none; border-top: 1px solid rgb(19 38 43 / 0.08); border-radius: 0; }
}
/* The booking page: the form comes into view below the fixed header, not under it. */
[data-form] { scroll-margin-top: calc(var(--header-height, 76px) + 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  .availability__field, .availability__submit, .availability__stepper button { transition: none; }
  .availability__submit:hover { transform: none; }
  .availability__field--guests.is-open .availability__guests[data-ready] { animation: none; }
}
.availability [hidden] { display: none !important; }
/* The calendar in the site's teal: flatpickr's own sheet loads after the theme's, so one class more. */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.flatpickr-calendar .flatpickr-day.today:not(.selected) { border-color: var(--color-accent); }
.flatpickr-calendar .flatpickr-day:hover:not(.selected):not(.flatpickr-disabled),
.flatpickr-calendar .flatpickr-day:focus:not(.selected) { background: color-mix(in srgb, var(--color-accent) 10%, #fff); border-color: transparent; }
.flatpickr-calendar { border-radius: var(--radius-lg); border: 0; box-shadow: 0 30px 60px -28px rgb(3 26 32 / 0.55), 0 0 0 1px rgb(19 38 43 / 0.06); }

/* ── Header, as on artemishotelcrete.gr: a larger logo and the menu in small spaced capitals.
   (The phone and «Book now» are the site's floating buttons, not the header's.) */
.site-logo__img { max-height: 52px; }
@media (min-width: 1024px) {
  :root { --header-height: 104px; }
  .site-logo__img { max-height: 72px; }
  /* The header a little wider than the page (the theme's 1320px) and the capitals a little less
     spaced, so the longer Greek menu («ΕΜΠΕΙΡΙΕΣ & ΔΡΑΣΤΗΡΙΟΤΗΤΕΣ») stays one row on a computer
     instead of turning into the burger; on a smaller laptop nav.js's «compact» step tightens it
     further (its own values: the theme's would make the words larger). Measured: one row from
     1280 px up in Greek, below that the burger. */
  .site-header__inner { width: min(100% - 2 * var(--edge), 1320px); }
  [data-nav-mode="desktop"] .site-nav__list > .site-nav__item > .site-nav__row > a {
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  [data-nav-mode="desktop"][data-nav-compact] .site-nav__list > .site-nav__item > .site-nav__row > a {
    padding-inline: 0.38rem;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
  }
  [data-nav-mode="desktop"][data-nav-compact] .site-menu { column-gap: 0.5rem; }
  [data-nav-mode="desktop"] .site-nav__list > .site-nav__item > .site-nav__row > a:hover,
  [data-nav-mode="desktop"] .site-nav__list > .site-nav__item > .site-nav__row > a[aria-current] { color: var(--color-accent); }
}

/* ── Footer: the brand's teal over a faint photo of the bay, white words, a dark bar below. ── */
.site-footer {
  position: relative;
  isolation: isolate;
  color: rgb(255 255 255 / 0.88);
  background: var(--color-accent) url("img/footer-bay.webp") center / cover no-repeat;
  border-top: 0;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-accent) 86%, #062a33);
}
.site-footer :is(a, .site-nav__heading, .site-contact__item) { color: #fff; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__about { color: rgb(255 255 255 / 0.85); }
.site-footer__brand .site-logo__img { max-height: 72px; filter: brightness(0) invert(1); }
.site-footer .site-nav__heading { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 400; letter-spacing: 0.02em; }
.site-footer .site-contact__icon,
.site-footer .site-contact__socials svg { color: #fff; }
.site-footer .site-contact__socials a { color: #fff; }
/* The bottom line on a near-black bar the full width of the screen. */
.site-footer__bottom {
  position: relative;
  color: rgb(255 255 255 / 0.72);
  border-top: 0;
  box-shadow: 0 0 0 100vmax #0e1516;
  clip-path: inset(0 -100vmax);
  background: #0e1516;
}
.site-footer__bottom :is(a, button) { color: rgb(255 255 255 / 0.85); }
/* The imonline wordmark (footer-credit.blade.php, SVG): white letters, the sage dot its own. */
.site-footer__credit a { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.site-footer__credit-mark { display: block; width: auto; height: 22px; color: #fff; transition: opacity 0.2s ease; }
.site-footer__credit a:hover .site-footer__credit-mark { opacity: 0.8; }
.site-footer__credit a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ── Cards: no frame — a square-cornered photo, the name in the serif, the facts small. ── */
.card { background: transparent; border: 0; box-shadow: none; }
.card__body { padding: var(--space-4) 0 var(--space-2); }
.card__title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 400; line-height: 1.15; letter-spacing: 0; }
.card__title a { color: var(--color-ink); }
.card:hover .card__title a { color: var(--color-accent); }
.card__media img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.card:hover .card__media img { transform: scale(1.03); }
.card__intro { color: var(--color-muted); }
.card__more { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
/* The words on the photo («Things to do»): tall, a deeper fade, the name larger. */
.card.card--overlay .card__body { padding: var(--space-5); }
.card.card--overlay .card__title { font-size: clamp(1.6rem, 1.2vw + 1rem, 2.1rem); }
.card.card--overlay .card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(6 20 24 / 0.82), rgb(6 20 24 / 0.1) 62%); }

/* ── Home page intro: photo · teal panel with the words · photo (the section's three columns;
   the middle one holds the blocks marked artemis-intro-copy). On a phone: photo, panel. ── */
.section__col:has(> .artemis-intro-copy) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.25rem, 4vw, 3.75rem) clamp(1.5rem, 3vw, 3rem);
  color: rgb(255 255 255 / 0.9);
  text-align: center;
  background: var(--color-accent);
}
.section__col:has(> .artemis-intro-copy) :is(h1, h2, h3, .el-heading__title) { color: #fff; font-size: clamp(2rem, 1.6vw + 1rem, 2.75rem); }
.section__col:has(> .artemis-intro-copy) :is(.eyebrow, .el-heading__eyebrow) { color: rgb(255 255 255 / 0.8); }
.section__col:has(> .artemis-intro-copy) :is(p, li) { color: rgb(255 255 255 / 0.9); margin-inline: auto; }
.section__col:has(> .artemis-intro-copy) a { color: #fff; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; font-weight: 600; text-underline-offset: 5px; }
.section__inner:has(.artemis-intro-copy) .section__col:not(:has(> .artemis-intro-copy)) :is(.el, .block, picture, img) { height: 100%; }
.section__inner:has(.artemis-intro-copy) .section__col:not(:has(> .artemis-intro-copy)) img { object-fit: cover; }
@media (max-width: 767px) {
  .section__inner:has(.artemis-intro-copy) .section__col:last-child:not(:has(> .artemis-intro-copy)) { display: none; }
}
/* Footer words: the theme's footer-menu and bottom-line colours are more specific; these win. */
.site-footer .site-nav--footer :is(a, .site-nav__heading),
.site-footer .site-nav--footer .site-nav__submenu a { color: rgb(255 255 255 / 0.9); }
.site-footer .site-nav--footer a:hover { color: #fff; }
.site-footer__bottom :is(p, span, li, a, button, .site-footer__fine) { color: rgb(255 255 255 / 0.78); }
.site-footer__bottom a:hover { color: #fff; }
.site-footer .site-nav--columns > .site-nav__list > .site-nav__item > .site-nav__row > :is(a, .site-nav__heading) { color: #fff; font-weight: 400; }
/* The dark bar runs to the very bottom, through the room the floating buttons keep there. */
.site-footer__bottom { clip-path: inset(0 -100vmax -100vmax); }

/* Cards with the words on the photo (e.g. Kima's «Explore Our Menus»): the description keeps room
   for two lines, so a longer one doesn't push its title up — titles, texts and «View menu» line
   up across the row. Side by side only; stacked on a phone each card stands alone. */
@media (min-width: 768px) {
  .el-cards--overlay .el-card__text { min-height: 3.4em; min-height: 2lh; }
}

/* Cards with the words under the photo (e.g. Kima's four «Breakfast & Brunch · Seaside Dining…»):
   the card under the pointer fills with the brand's teal, its words turn white and the photo eases
   in — so it stands apart from the others. The words keep the same box at rest (no jump). */
.el-cards--below .el-card { transition: background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.el-cards--below .el-card__media { overflow: hidden; }
.el-cards--below .el-card__media img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.el-cards--below .el-card__body { padding: var(--space-4) var(--space-4) var(--space-5); }
.el-cards--below :is(.eyebrow, .el-card__title, .el-card__text, .el-card__text p) { transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) {
  .el-cards--below .el-card:hover { background: var(--color-accent); }
  .el-cards--below .el-card:hover .el-card__media img { transform: scale(1.04); }
  .el-cards--below .el-card:hover :is(.el-card__title, .el-card__title a, .el-card__text, .el-card__text p) { color: #fff; }
  .el-cards--below .el-card:hover .eyebrow { color: rgb(255 255 255 / 0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .el-cards--below .el-card, .el-cards--below .el-card__media img, .el-cards--below :is(.eyebrow, .el-card__title, .el-card__text, .el-card__text p) { transition: none; }
  .el-cards--below .el-card:hover .el-card__media img { transform: none; }
}

/* Cards that are links (e.g. «Explore Our Menus»): no underlined or recoloured title on hover —
   the photo eases in, the shade deepens a little and a line draws itself under «View menu». */
.el-card:has(.el-card__link):hover .el-card__title { text-decoration: none; }
.el-cards--overlay :is(.el-card__link, .el-card__link:hover, .el-card__title) { color: #fff; }
.el-cards--overlay .el-card__media { overflow: hidden; }
.el-cards--overlay .el-card__media img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.el-cards--overlay .el-card__media::after { transition: opacity 0.35s ease; }
.el-card__more {
  position: relative;
  border-bottom: 0;
  padding-bottom: 0.3rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.el-card__more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .el-card:has(.el-card__link):hover .el-card__more::after { transform: scaleX(1); }
  .el-cards--overlay .el-card:has(.el-card__link):hover .el-card__media img { transform: scale(1.04); }
}
/* Without hover (phones), the line is simply there, so «View menu» still reads as a link. */
@media (hover: none) { .el-card__more::after { transform: scaleX(1); } }
.el-card:has(.el-card__link:focus-visible) .el-card__more::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .el-card__more::after, .el-cards--overlay .el-card__media img { transition: none; }
  .el-cards--overlay .el-card:has(.el-card__link):hover .el-card__media img { transform: none; }
}

/* ── Motion: one language everywhere ─────────────────────────────────────────────────────────
   Quick feedback (200 ms) on links, buttons, menu and arrows; photos in grids, carousels and
   cards ease in slowly on hover (800 ms, a soft deceleration); carousels glide on the same curve;
   sections arrive gently as they scroll in. Less motion asked for: colours still change, nothing
   moves. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 200ms;
  --motion-slow: 800ms;
}

/* Feedback: colour, background and border follow the pointer smoothly. */
a, .button, .site-nav a, .language-switcher button, .splide__arrow, .splide__pagination__page, .floating-buttons a {
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, opacity var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.card__title a, .el-card__title, .site-footer a { transition: color 300ms ease; }

/* Photos in cards, grids and carousels: a slow, soft ease-in on hover — never a jump. */
.card__media, .gallery-item, .el-card__media { overflow: hidden; }
.card__media img, .gallery-grid .gallery-item img, .el-card__media img { transition: transform var(--motion-slow) var(--ease-out), opacity 300ms ease; }

/* Carousels (rooms, galleries, reviews): the slides glide in and settle, instead of stopping hard. */
.splide__list { transition-timing-function: var(--ease-out) !important; }
.splide__slide { transition-timing-function: var(--ease-out); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover .card__media img,
  .gallery-grid .gallery-item:hover img,
  .el-card:has(.el-card__link):hover .el-card__media img { transform: scale(1.045); }
  .button:active, .splide__arrow:active { transform: translateY(1px); }
  .splide__arrow { transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform 300ms var(--ease-out), opacity var(--motion-fast) ease; }
}

/* Sections arriving on scroll: a shorter, gentler rise on the same curve. */
@media (prefers-reduced-motion: no-preference) {
  .js :is(.el--animate-fade, .el--animate-rise, .el--animate-zoom) { transition: opacity 0.9s ease-out, transform 1s var(--ease-out); }
  .js .el--animate-rise:not(.is-in) { transform: translateY(1.25rem); }
  .js .el--animate-zoom:not(.is-in) { transform: scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .card__media img, .gallery-grid .gallery-item img, .el-card__media img { transition: opacity 300ms ease; }
  .card:hover .card__media img, .gallery-grid .gallery-item:hover img, .el-card:hover .el-card__media img { transform: none; }
}

/* ── The client's corrections (22/10/2026) ──────────────────────────────────────────────────── */

/* No lone word on a last line (e.g. «…your next visit», «…when you need them», «Night»): headings
   balance their lines; paragraphs, subtitles and intros of any length avoid an orphan («balance»
   stops working past six lines). public/site/site.js also ties each text's last two words. */
:is(p, li, .el-card__text, .card__intro, .el-heading__subtitle, .page-header__intro) { text-wrap: pretty; }
:is(h1, h2, h3, h4, .el-heading__title, .card__title, .el-card__title, .eyebrow) { text-wrap: balance; }

/* Stay → «Good to Know» on a phone: each time on one line. */
@media (max-width: 767px) {
  .el-features--cols-2.el-features--compact .el-feature__title { font-size: clamp(0.78rem, 3.5vw, 0.95rem); white-space: nowrap; }
}

/* «Things to do» on the home page (cards with the words on the photo, side by side): the same room
   for the category, a title of up to three lines and a three-line intro in every card, so the
   category and the titles line up across the row. */
@media (min-width: 768px) {
  .cards .card--overlay .card__title { min-height: calc(3 * 1.15em); display: flex; align-items: flex-end; }
  .cards .card--overlay .card__intro {
    min-height: calc(3 * 1.6em);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

/* Kima's four cards: a short line under each title sets the words apart. */
.el-cards--below .el-card__title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 0.85rem auto 0;
  background: var(--color-accent);
  transition: background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s var(--ease-out, ease);
}
.el-cards--below .el-card:not(.el-card--align-left) .el-card__title::after { margin-inline: auto; }
@media (hover: hover) {
  .el-cards--below .el-card:hover .el-card__title::after { background: rgb(255 255 255 / 0.8); width: 3.5rem; }
}

/* «Things to do» articles are lasting guides, not news: no publication or update date on them. */
.article-meta :is(time, .updated) { display: none; }
.article-meta:not(:has(.byline)) { display: none; }

/* Stay → «Good to Know», on a phone: check-in and check-out side by side, centred. */
@media (max-width: 767px) {
  .el-features--cols-2.el-features--compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .el-features--cols-2.el-features--compact .el-feature { flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
}

/* About → the three photos after «A Place That Feels Like Home»: one row of three on a phone too
   (the gallery's own «Στήλες σε κινητό» stops at two, which left one photo alone). */
@media (max-width: 767px) {
  .artemis-trio .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
}

/* «Pop-up» (site/blocks/Popup.php): the «Early booking» window, 26/10/2026 design. Its own
   colours from the design: cream, deep green, gold. On a computer words left and photo right
   (the photo's wavy edge is in the image); on a phone the photo on top. */
.artemis-popup {
  --pu-cream: #F5F0E6;
  --pu-ink: #33483B;
  --pu-gold: #A98352;
  --pu-text: #6B665E;
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 16px;
}
.artemis-popup[hidden] { display: none; }
.artemis-popup__backdrop { position: absolute; inset: 0; background: rgb(20 28 24 / 0.55); }
.artemis-popup__box {
  position: relative; display: grid; grid-template-columns: 1fr;
  width: min(100%, 420px); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--pu-cream); color: var(--pu-text); box-shadow: 0 24px 60px rgb(0 0 0 / 0.3);
  opacity: 0; transform: translateY(12px); transition: opacity 0.35s ease, transform 0.35s ease;
}
.artemis-popup.is-open .artemis-popup__box { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .artemis-popup__box { transition: none; transform: none; } }
.artemis-popup__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--pu-cream); color: #3A3A36; cursor: pointer;
}
.artemis-popup__close:focus-visible, .artemis-popup__button:focus-visible { outline: 2px solid var(--pu-ink); outline-offset: 3px; }
.artemis-popup__box:focus { outline: none; }
.artemis-popup__photo { position: relative; line-height: 0; }
.artemis-popup__img { display: block; width: 100%; height: auto; }
.artemis-popup__img--desktop { display: none; }
.artemis-popup__copy { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 24px 22px; text-align: center; }
.artemis-popup__logo { width: 190px; height: auto; }
.artemis-popup__logo--copy { display: none; }
.artemis-popup__logo--photo { position: absolute; top: 7%; left: 50%; width: 34%; transform: translateX(-50%); }
.artemis-popup__eyebrow, .artemis-popup__figure span, .artemis-popup__button, .artemis-popup__footer {
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.04em;
}
.artemis-popup__eyebrow { margin: 0; color: #8C7556; font-size: 0.82rem; font-weight: 600; }
.artemis-popup__heading { margin: 0; color: var(--pu-ink); font-family: var(--font-heading); font-weight: 400; font-size: 2rem; line-height: 1.1; }
.artemis-popup__heading em { display: block; font-style: italic; }
/* Cardo's italic file has no Greek letters: on Greek pages the word is Cardo slanted by the browser
   (a family with only the upright face, so the italic is made from it). */
@font-face { font-family: "Cardo Slanted"; src: url("fonts/cardo-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.artemis-popup__heading em:lang(el) { font-family: "Cardo Slanted", var(--font-heading); font-synthesis: style; }
.artemis-popup__figure { margin: 0; display: flex; flex-direction: column; align-items: center; color: var(--pu-gold); font-family: var(--font-heading); font-size: 3.2rem; line-height: 0.95; }
.artemis-popup__figure span { font-size: 0.72rem; font-weight: 600; line-height: 1.4; margin-top: 4px; }
.artemis-popup__text { margin: 0; max-width: 30ch; font-size: 0.95rem; line-height: 1.6; text-wrap: pretty; }
.artemis-popup__pill {
  margin: 4px 0 0; width: 100%; padding: 10px 16px; border: 1.5px solid color-mix(in srgb, var(--pu-gold) 70%, transparent);
  border-radius: 999px; font-size: 1rem; color: #5A5650;
}
.artemis-popup__button {
  display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 52px; padding: 0 34px;
  border-radius: 999px; background: var(--pu-ink); color: #fff; font-size: 0.82rem; font-weight: 600; text-decoration: none;
  transition: background-color 0.25s ease;
}
.artemis-popup__button:hover { background: color-mix(in srgb, var(--pu-ink) 85%, #000); color: #fff; }
.artemis-popup__footer { margin: 6px 0 0; font-size: 0.68rem; color: #8B857B; }
@media (min-width: 760px) {
  .artemis-popup__box { width: min(100%, 1000px); grid-template-columns: 1fr 0.78fr; max-height: calc(100dvh - 48px); }
  .artemis-popup__photo { order: 2; }
  .artemis-popup__img--mobile { display: none; }
  /* The wavy edge between the words and the photo, drawn smooth (a mask, any height). */
  .artemis-popup__img--desktop {
    display: block; height: 100%; object-fit: cover; object-position: center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M7 0 C2 14 11 26 6 40 S1 64 7 78 S4 94 2 100 L100 100 L100 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M7 0 C2 14 11 26 6 40 S1 64 7 78 S4 94 2 100 L100 100 L100 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  }
  .artemis-popup__copy { padding: 34px 48px 26px; gap: 16px; justify-content: center; }
  .artemis-popup__logo--copy { display: block; }
  .artemis-popup__logo--photo { display: none; }
  .artemis-popup__heading { font-size: clamp(2.2rem, 3.6vw, 2.9rem); }
  .artemis-popup__figure { font-size: clamp(3.4rem, 5vw, 4.2rem); }
  .artemis-popup__pill { max-width: 330px; }
}
/* While it is open the page doesn't scroll under it. */
html.artemis-popup-open { overflow: hidden; }

/* The booking form's «Πηγή» (source): filled by site.js when the visitor came from the pop-up,
   never shown (the hotel sees it in the email and «Υποβολές»). */
.block-form .form-row:has([name="data[source]"]) { display: none; }