/* Self-hosted Open Sans 400 (regular + italic), latin + greek subsets. Downloaded from Google Fonts. */
/* greek-ext */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/open-sans-greek-ext-400-italic.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/open-sans-greek-400-italic.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin-400-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;
}
/* greek-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/open-sans-greek-ext-400.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/open-sans-greek-400.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/open-sans-latin-400.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;
}


/* =============================================================================
   Afkos Apartments — design tokens + base styles
   Generated from design-system/tokens.json. Keep the two in sync.
   Base: html font-size 18px, so 1rem = 18px.
   ============================================================================= */

:root {
  /* --- Colour: brand ------------------------------------------------------ */
  --c-navy:       #000e4f;
  --c-navy-deep:  #020f2b;
  --c-blue:       #2061b4;
  --c-blue-link:  #0079bf;
  --c-teal:       #009baf;

  /* --- Colour: accents from the fish motif ------------------------------- */
  --c-sand:        #dcb473;
  --c-yellow:      #fbe900;
  --c-teal-fish:   #009ba3;
  --c-green:       #22993a;
  --c-orange:      #e34212;
  --c-stripe-blue: #22398a;
  --c-logo-blue:   #004a94;
  --c-fish-gray:   #dadad2;

  /* --- Colour: neutrals --------------------------------------------------- */
  --c-white:    #ffffff;
  --c-gray-50:  #f5f5f5;
  --c-gray-100: #ededed;
  --c-gray-200: #e6e6e6;
  --c-gray-400: #999999;
  --c-gray-500: #707070;
  --c-gray-600: #6d6d6d;
  --c-slate:    #69768c;
  --c-gray-800: #515151;
  --c-black:    #000000;

  /* --- Colour: semantic --------------------------------------------------- */
  --text:            var(--c-navy);
  --text-body:       var(--c-gray-800);
  --text-muted:      var(--c-gray-600);
  --text-subtle:     var(--c-gray-400);
  --text-on-dark:    var(--c-white);
  --link:            var(--c-navy);
  --link-hover:      var(--c-teal);
  --nav-link:        var(--c-navy);
  --nav-link-active: var(--c-blue-link);
  --surface:         var(--c-white);
  --surface-alt:     var(--c-gray-100);
  --surface-nav:     var(--c-gray-100);
  --surface-overlay: var(--c-gray-50);
  --surface-dark:    var(--c-navy-deep);
  --surface-blue:    var(--c-blue);
  --image-overlay:   rgba(0, 0, 0, 0.5);

  /* --- Type --------------------------------------------------------------- */
  --font-sans: "Open Sans", Arial, sans-serif;

  --fs-display: 3.111rem;   /* 56px */
  --fs-h1:      2.333rem;   /* 42px */
  --fs-h2:      2rem;       /* 36px */
  --fs-h3:      1.556rem;   /* 28px */
  --fs-h4:      1.333rem;   /* 24px */
  --fs-price:   1.167rem;   /* 21px */
  --fs-body:    1rem;       /* 18px */
  --fs-small:   0.889rem;   /* 16px */
  --fs-caption: 0.778rem;   /* 14px */
  --fs-micro:   0.722rem;   /* 13px */

  --lh-display: 1;
  --lh-h1:      2.667rem;   /* 48px */
  --lh-h2:      2.444rem;   /* 44px */
  --lh-h3:      2.222rem;   /* 40px */
  --lh-h4:      1.556rem;   /* 28px */
  --lh-body:    1.667;
  --lh-tight:   1.333rem;   /* 24px */

  --ls-tight: -0.028rem;
  --ls-label: 1px;

  --fw-regular: 400;
  --fw-bold:    700;

  /* --- Space -------------------------------------------------------------- */
  --sp-1:  0.278rem;  /*   5px */
  --sp-2:  0.556rem;  /*  10px */
  --sp-3:  0.833rem;  /*  15px  half gutter */
  --sp-4:  1.111rem;  /*  20px  container padding */
  --sp-5:  1.667rem;  /*  30px  gutter */
  --sp-6:  2.222rem;  /*  40px */
  --sp-7:  2.778rem;  /*  50px  block padding */
  --sp-8:  3.333rem;  /*  60px  footer band */
  --sp-9:  4.444rem;  /*  80px  section */
  --sp-10: 6.667rem;  /* 120px  large section */

  --section-y:        var(--sp-9);
  --section-y-large:  var(--sp-10);
  --section-y-footer: var(--sp-8);

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1230px;
  --container-pad: var(--sp-4);
  --gutter:        var(--sp-5);
  --nav-h:         5.444rem;  /* 98px */
  --logo-w:        14.611rem; /* 263px */

  /* --- Shape & motion ----------------------------------------------------- */
  --radius: 0;
  --radius-pill: 9999px;
  --shadow: none;
  --dur: 300ms;
  --ease: ease-out;
}

/* Phones: tighter rhythm, smaller nav and logo. */
@media (max-width: 543.98px) {
  :root {
    --section-y:        var(--sp-5);
    --section-y-large:  var(--sp-7);
    --section-y-footer: var(--sp-6);
    --nav-h:  3.889rem;
    --logo-w: 9rem;
  }
}

/* =============================================================================
   Base
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  background: var(--surface);
}

img, video, iframe { max-width: 100%; height: auto; display: block; border: 0; }

a { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--link-hover); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-5);
  color: var(--text);
  font-weight: var(--fw-regular); /* site renders all headings at 400 */
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

p { margin: 0 0 var(--sp-5); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-5); padding-left: 1.2em; }

/* Large type keeps its full size on phones, as on the live site (36px lead wraps fine at 390px). */

/* =============================================================================
   Type utilities
   ============================================================================= */

.display  { font-size: var(--fs-display); line-height: var(--lh-display); color: var(--text); }
.lead     { font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text); letter-spacing: var(--ls-tight); }
.fact     { font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--text); }
.body     { font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--text-body); }
.small    { font-size: var(--fs-small); }
.caption  { font-size: var(--fs-caption); line-height: var(--lh-tight); color: var(--text-muted); }
.micro    { font-size: var(--fs-micro); }
.label    { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-subtle); }
.muted    { color: var(--text-muted); }
.subtle   { color: var(--text-subtle); }
.on-dark  { color: var(--text-on-dark); }
.center   { text-align: center; }

/* =============================================================================
   Layout
   ============================================================================= */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  width: 100%;
}

.section { padding-block: var(--section-y); background: var(--surface); }
.section--large  { padding-block: var(--section-y-large); }
.section--alt    { background: var(--surface-alt); }
.section--dark   { background: var(--surface-dark); color: var(--text-on-dark); }
.section--blue   { background: var(--surface-blue); color: var(--text); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--dark a, .section--dark p { color: var(--text-on-dark); }
.section--pattern {
  background-color: var(--surface-alt);
  background-image: url("/assets/img/pattern-fish-3000.webp");
  background-size: auto; /* natural size of the 3000px artwork, as on the old site */
  background-position: top left;
  background-repeat: repeat;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-5);
}
.col-12 { grid-column: span 12; }
.col-10 { grid-column: span 10; }
.col-9  { grid-column: span 9; }
.col-7  { grid-column: span 7; }
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-4  { grid-column: span 4; }
.col-2  { grid-column: span 2; }
.col-offset-2 { grid-column-start: 3; }
.valign-center { align-self: center; }

@media (max-width: 767.98px) {
  .col-10, .col-9, .col-7, .col-6, .col-5, .col-4 { grid-column: span 12; }
  .col-2 { grid-column: span 6; }
  .col-offset-2 { grid-column-start: auto; }
}
@media (min-width: 544px) and (max-width: 767.98px) {
  .col-6--sm-half { grid-column: span 6; }
}

/* =============================================================================
   Components
   ============================================================================= */

/* --- Nav ------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 120;
  height: var(--nav-h);
  background: var(--surface-nav);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.nav__logo img { width: var(--logo-w); }
.nav__menu { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav__menu a {
  display: block;
  padding-inline: 0.722rem;
  font-size: var(--fs-small);
  color: var(--nav-link);
}
.nav__menu a:hover, .nav__menu a[aria-current="page"] { color: var(--nav-link-active); }
.nav__burger {
  display: none; width: 24px; height: 14px; position: relative; background: none; border: 0; padding: 0; cursor: pointer;
}
.nav__burger span, .nav__burger::before, .nav__burger::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--c-black);
}
.nav__burger::before { top: 0; } .nav__burger span { top: 6px; } .nav__burger::after { top: 12px; }
@media (max-width: 991.98px) {
  .nav__menu { display: none; }
  .nav__burger { display: block; }
  .nav__menu.is-open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: fixed; inset: var(--nav-h) 0 0 0;
    background: var(--surface-overlay);
    padding: var(--sp-6) var(--container-pad);
  }
  .nav__menu.is-open a { font-size: var(--fs-h3); padding: var(--sp-2) 0; }
}

/* --- Gallery slider (home hero) ------------------------------------------- */
.slider { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-alt); }
.slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur) var(--ease); }
.slider__slide.is-active { opacity: 1; }
.slider__slide img { width: 100%; height: 100%; object-fit: cover; }
.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: transparent; color: var(--c-white); cursor: pointer;
}
.slider__arrow--prev { left: var(--sp-3); } .slider__arrow--next { right: var(--sp-3); }

/* --- Room card (rooms overview) ------------------------------------------- */
.room-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.room-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.room-card__media img { width: 100%; height: 100%; object-fit: cover; }
.room-card__body { font-size: var(--fs-small); line-height: var(--lh-tight); color: var(--text-muted); }
.room-card__title { color: var(--text-muted); }
.room-card__link { color: var(--c-gray-500); text-decoration: underline; }
.room-card__link:hover { color: var(--link-hover); }

/* --- Price grid (room detail) --------------------------------------------- */
.prices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-1); }
.price {
  background: var(--surface-alt); color: var(--c-slate); text-align: center;
  padding: var(--sp-2) var(--sp-1);
}
.price__period { display: block; font-size: var(--fs-caption); }
.price__amount { display: block; font-size: var(--fs-price); }
@media (min-width: 544px) and (max-width: 767.98px) { .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 543.98px) { .prices { grid-template-columns: minmax(0, 1fr); } }

/* --- Fact list (room facilities, distances) -------------------------------- */
.facts { list-style: none; padding: 0; margin: 0; }
.facts--center { text-align: center; }

/* --- Contact band (contact page) ------------------------------------------ */
.contact-band a { color: var(--text); text-decoration: underline; }
.contact-band a:hover { color: var(--text-on-dark); }
.contact-band .label { color: var(--text); text-transform: none; letter-spacing: 0; font-size: var(--fs-caption); }

/* --- Booking CTA band (site-wide footer) ---------------------------------- */
.cta-band { background: var(--surface-dark); color: var(--text-on-dark); padding-block: var(--section-y-footer); }
.cta-band__title { font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--text-on-dark); }
.cta-band__address { font-size: var(--fs-small); line-height: 1.8; }
.cta-band a { color: var(--text-on-dark); }
.cta-band a:hover { color: var(--c-sand); }

/* --- Map embed -------------------------------------------------------------- */
.map { aspect-ratio: 2 / 1; width: 100%; border: 0; }

/* --- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* =============================================================================
   Site-specific styles layered on top of design-system/tokens.css.
   Only things the generator's markup needs that the design system does not
   define: page scaffolding, module spacing, text block variants, slider chrome.
   ============================================================================= */

/* --- Accessibility helpers --------------------------------------------------- */
.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;
}
.skip-link {
  position: absolute; left: -999px; top: var(--sp-2); z-index: 300;
  background: var(--c-white); color: var(--text); padding: var(--sp-2) var(--sp-4);
}
.skip-link:focus { left: var(--sp-4); }
:focus-visible { outline: 2px solid var(--c-blue-link); outline-offset: 2px; }

/* --- Page scaffolding ---------------------------------------------------------- */
main { display: block; }
.section--pt-none { padding-top: 0; }           .section--pb-none { padding-bottom: 0; }
.section--pt-small { padding-top: var(--sp-5); }  .section--pb-small { padding-bottom: var(--sp-5); }
.section--pt-large { padding-top: var(--section-y-large); }  .section--pb-large { padding-bottom: var(--section-y-large); }
/* the last section always keeps room before the footer band or the page end */
main > .section:last-child { padding-bottom: var(--section-y); }
.modules { display: flex; flex-direction: column; gap: var(--sp-7); }
.rows { display: flex; flex-direction: column; gap: var(--sp-5); }
picture { display: block; }
.cell img, .cell-stack img, .room-card__media img, .slider img, .nav__logo img { width: 100%; }
.cell-stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.valign-center { align-self: center; }
.valign-bottom { align-self: end; }
.valign-stretch { align-self: stretch; }
.valign-stretch picture, .valign-stretch img { height: 100%; object-fit: cover; }
.fit-contain img { object-fit: contain; }
.pos-top img { object-position: top; }       .pos-bottom img { object-position: bottom; }
.pos-left img { object-position: left; }     .pos-right img { object-position: right; }
@media (min-width: 768px) {
  .padx-small { padding-inline: var(--sp-5); }
  .padx-default { padding-inline: var(--sp-7); }
  .padx-large { padding-inline: var(--sp-9); }
}
.section--gap-none .modules { gap: 0; }
.section--gap-small .modules { gap: var(--sp-4); }

@media (max-width: 767.98px) {
  .col-2 { grid-column: span 12; }
  .modules { gap: var(--sp-5); }
}

/* --- Lead and text blocks ------------------------------------------------------- */
.lead-title {
  font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text);
  margin: 0 0 var(--sp-5); font-weight: var(--fw-regular);
}
.lead + .lead { margin-top: var(--sp-5); }
.lead-title:last-child { margin-bottom: 0; }

.text p { margin: 0; }
.text p + p, .text p + .text__heading, .text .text__list + .text__heading { margin-top: var(--sp-4); }
.text .text__heading + p, .text .text__heading + .text__list { margin-top: 0; } /* heading runs straight into its lines, as on the old site */
.text__heading { font-size: inherit; line-height: inherit; color: inherit; margin: 0; font-weight: var(--fw-regular); }
.text__list { list-style: none; padding: 0; margin: 0; }
.text--body { font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--c-black); }
.text--caption { font-size: var(--fs-caption); line-height: var(--lh-tight); color: var(--text-muted); }
.text--caption p + .text__heading { margin-top: var(--sp-5); }
.text--fact { font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--text); }
.text--lead { font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text); }
.text--center { text-align: center; }

/* --- Nav extras -------------------------------------------------------------------- */
.nav__logo { display: block; width: var(--logo-w); }
.nav__logo-img img { height: auto; }
.nav__lang a { text-transform: none; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }
.nav__burger::before, .nav__burger::after { transition: transform var(--dur) var(--ease); }
body.menu-open { overflow: hidden; }

/* --- Slider ---------------------------------------------------------------------------- */
.slider { aspect-ratio: 3 / 2; }
.slider__track { position: absolute; inset: 0; }
.slider__slide picture, .slider__slide img { height: 100%; }
.slider__arrow { z-index: 2; display: grid; place-items: center; }
.slider__arrow svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.slider__arrow:hover svg { transform: scale(1.1); }
.slider__arrow:focus-visible { outline-color: var(--c-white); }
@media (max-width: 543.98px) { .slider__arrow svg { width: 24px; height: 24px; } }

/* --- Room cards ------------------------------------------------------------------------- */
.room-card__title { font-size: inherit; line-height: inherit; color: inherit; margin: 0; font-weight: var(--fw-regular); }
.room-card__body p { margin: 0; }
.grid--cards { row-gap: var(--sp-7); }

/* --- Prices -------------------------------------------------------------------------------- */
.prices__note { margin-top: var(--sp-3); }

/* --- Contact band and footer --------------------------------------------------------------- */
.contact-band .label { margin-bottom: var(--sp-1); }
.contact-band .lead { letter-spacing: 0; }
.cta-band__address { font-style: normal; }
.map { width: 100%; border: 0; display: block; }

/* --- Print --------------------------------------------------------------------------------- */
@media print {
  .nav, .slider__arrow, .skip-link { display: none !important; }
  .section { padding-block: var(--sp-5); }
}