/* Lemon Tree Stay — styles
   Palette and type from the 2026 graphic norms manual:
   off white #F7F6EF, lemon yellow #FCDA70, black #000, font Manrope. */

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --off-white: #f7f6ef;
  --yellow: #fcda70;
  --black: #000;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  color: var(--black);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Layout ---------- */

.page {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(5rem, 8vh, 6rem) 1rem clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;
}

/* With scripts on, the page starts invisible and fades in once app.js has set
   the language, chosen the illustration and the font and image have loaded.
   This hides the reflow that would otherwise flash on first paint. */
.js .page {
  opacity: 0;
}

.js.ready .page {
  opacity: 1;
  transition: opacity 400ms ease;
}

/* ---------- Language picker ---------- */

.lang {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* The picker needs scripts to work, so it is hidden without them */
html:not(.js) .lang {
  display: none;
}

/* Small screens: custom dropdown in the page's own style */
.lang__buttons {
  display: none;
}

.lang__menu {
  position: relative;
  z-index: 2;
}

.lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  margin: 0;
  padding: 0.45em 0.9em 0.45em 1em;
  border: 2px solid var(--black);
  border-radius: 999px;
  background: var(--yellow);
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}

.lang__trigger:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.lang__chevron {
  width: 0.7em;
  height: auto;
  flex: none;
  transition: transform 150ms ease;
}

.lang__trigger[aria-expanded="true"] .lang__chevron {
  transform: rotate(180deg);
}

.lang__list {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  text-align: left;
  background: var(--off-white);
  border: 2px solid var(--black);
  border-radius: 1rem;
  box-shadow: 0 4px 0 var(--black);
}

.lang__list[hidden] {
  display: none;
}

.lang__item {
  padding: 0.55em 0.9em;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}

.lang__item:hover,
.lang__item:focus-visible {
  background: var(--yellow);
  outline: none;
}

.lang__item[aria-selected="true"] {
  background: var(--yellow);
  box-shadow: inset 0 0 0 2px var(--black);
}

.lang__item[aria-selected="true"]:hover,
.lang__item[aria-selected="true"]:focus-visible {
  background: var(--yellow);
}

.lang__option {
  margin: 0;
  padding: 0.35em 0.65em;
  border: 2px solid transparent;
  border-radius: 999px;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: uppercase;
  cursor: pointer;
}

.lang__option:hover,
.lang__option:focus-visible {
  border-color: var(--black);
  outline: none;
}

.lang__option[aria-pressed="true"] {
  background: var(--yellow);
  border-color: var(--black);
}

/* ---------- Brand ---------- */

.brand__name {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.brand__logo {
  display: block;
  width: min(72vw, 28rem);
  height: auto;
}

.brand__sub {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.55em;
  text-indent: 0.55em; /* balances the trailing letter-spacing so the word is truly centred */
  text-transform: uppercase;
}

/* ---------- Call to action ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 1.4em;
  margin-top: clamp(2.5rem, 9vh, 6rem);
  padding: 0.85em 2.8em 0.85em 3em;
  border: 2px solid var(--black);
  border-radius: 999px;
  background: var(--yellow);
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--black);
  outline: none;
}

.cta:active {
  transform: translateY(0);
  box-shadow: none;
}

.cta__arrow {
  width: 1.35em;
  height: 1.35em;
  flex: none;
}

/* ---------- Message ---------- */

.message {
  margin: clamp(2.25rem, 7vh, 4.5rem) 0 0;
  max-width: 34ch;
  font-size: clamp(1.2rem, 5.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.35;
}

/* ---------- Illustration ---------- */

.scene {
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  display: flex;
  justify-content: center;
}

/* The illustration SVGs share a 1080×1080 canvas with the drawing somewhere in
   the middle. `.figure` crops to the drawing's bounding box (--bx --by --bw --bh,
   in SVG units) so every figure can be sized by height, whatever its shape. */
.figure {
  --canvas: 1080;
  height: clamp(13rem, 36vh, 18rem);
  aspect-ratio: var(--bw) / var(--bh);
  overflow: hidden;
}

.figure img {
  display: block;
  width: calc(100% * var(--canvas) / var(--bw));
  height: auto;
  margin-left: calc(-100% * var(--bx) / var(--bw));
  margin-top: calc(-100% * var(--by) / var(--bw));
}

/* ---------- Contact ---------- */

.contact {
  margin-top: auto;
  padding-top: clamp(2.5rem, 7vh, 4.5rem);
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.contact__item a,
.contact__address a {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  text-align: left;
}

.contact__item a:hover span,
.contact__address a:hover span {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.icon {
  width: 1.75em;
  height: 1.75em;
  flex: none;
}

.contact__address {
  font-style: normal;
  margin-top: 1.5rem;
}

.contact__address a {
  align-items: flex-start;
}

.contact__address .icon {
  margin-top: 0.15em;
}

.contact__lines {
  display: block;
  line-height: 1.25;
}

.contact__street,
.contact__city {
  display: block;
}

.contact__street + .contact__city {
  margin-top: 0.3em;
}

/* ---------- Desktop ---------- */

@media (min-width: 48rem) {
  .page {
    padding-top: clamp(4.5rem, 11vh, 7rem);
  }

  .lang {
    top: 1.5rem;
    left: clamp(1rem, 3vw, 2.5rem);
    font-size: 0.85rem;
  }

  /* Larger screens: swap the dropdown for the row of buttons */
  .lang__menu {
    display: none;
  }

  .lang__buttons {
    display: flex;
    gap: 0.2rem;
  }

  .message {
    margin-top: clamp(4rem, 12vh, 7rem);
  }

  .contact {
    padding-top: clamp(4rem, 10vh, 6rem);
  }

  .contact__list {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .contact__item {
    padding: 0 2rem;
    border-left: 1.5px solid var(--black);
    line-height: 1;
  }

  .contact__item:first-child {
    border-left: 0;
  }

  .contact__item a {
    padding: 0.3em 0;
  }

  .contact__address {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }

  .contact__address a {
    align-items: center;
  }

  .contact__address .icon {
    margin-top: 0;
  }

  .contact__street,
  .contact__city {
    display: inline;
  }

  .contact__street + .contact__city {
    margin-top: 0;
    margin-left: 0.9em;
  }
}

/* ---------- Wide screens: illustration beside the message ---------- */

@media (min-width: 64rem) {
  .page {
    /* Figure height follows both viewport width and height so it never
       dominates a short or narrow window. No figure is wider than it is tall,
       so --fig-h is also the widest the figure can get. */
    --fig-h: clamp(11rem, min(18vw, 30vh), 20rem);
    --fig-right: clamp(2rem, 6vw, 7rem);
  }

  /* Illustration sits bottom-right, beside the message, like the mockup */
  .scene {
    position: absolute;
    right: var(--fig-right);
    bottom: clamp(9rem, 20vh, 14rem);
    margin: 0;
  }

  .figure {
    height: var(--fig-h);
  }

  /* Keep the centred message clear of the figure on both sides, and let the
     type scale with the window so the lines still fit in the space left. */
  .message {
    font-size: clamp(1.4rem, 2.3vw, 2.1rem);
    max-width: min(34ch, calc(100% - 2 * (var(--fig-h) + var(--fig-right) + 1rem)));
  }
}

/* ---------- Tall windows: keep the illustration full size ---------- */

/* With plenty of height the figure only needs to shrink a little with width,
   and never below 11rem; the message cap above still keeps them apart. */
@media (min-width: 80rem) and (min-height: 68rem) {
  .page {
    --fig-h: clamp(11rem, min(22vw, 30vh), 20rem);
    --fig-right: clamp(2rem, 4vw, 5rem);
  }
}

/* Between 1024px and 1280px wide there is no room beside the message for a
   full-size figure, so it leaves the corner and sits below the message,
   right-aligned, at full size. The message gets its full width back. */
@media (min-width: 64rem) and (max-width: 79.99rem) and (min-height: 68rem) {
  .page {
    --fig-h: clamp(16rem, 30vh, 20rem);
  }

  .scene {
    position: static;
    order: 1; /* after the message, before the contacts */
    align-self: flex-end;
    margin: clamp(1rem, 3vh, 3rem) var(--fig-right) 0 0;
  }

  .contact {
    order: 2;
  }

  .message {
    font-size: clamp(1.2rem, 5.2vw, 2.1rem);
    max-width: 34ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta,
  .lang__chevron,
  .js.ready .page {
    transition: none;
  }
}