/* ==========================================================================
   NAVBAR — written from scratch, independent of css/style.css.

   Every class here is prefixed `nv-`, so none of the `.navbar` / `.nav-*`
   rules in style.css can reach it and none of these can reach them. The two
   implementations coexist in the same site without interfering.

   THE TWO RULES THAT KEEP THIS STABLE
   -----------------------------------
   1. The height of the document never changes.
      The bar is position:fixed and a plain in-flow .nv-spacer reserves its
      EXPANDED height — permanently, in both states. Collapsing the bar
      therefore removes nothing from the page. No scroll anchoring, no
      scrollY compensation, no jolt for the scroll handler to misread. That
      one property is what lets js/navbar.js stay as short as it is.

   2. No JavaScript ever measures anything.
      Both heights are derived by calc() from the tokens below, so they are
      known before first paint and cannot be captured mid-font-load or go
      stale on resize or rotation. There is no measure step, no custom
      property written from script, no resize or load handler.

   Consequence worth knowing: row heights are set by token, not by content.
   Content taller than its row is clipped rather than pushing the bar out of
   shape. That is the deliberate trade — predictable over elastic. Adding a
   control taller than --nv-ctl-h means raising the token.
   ========================================================================== */

:root {
  --nv-pad-y: 10px;
  --nv-pad-x: 20px;
  --nv-gap: 10px;

  /* One height for every control in the bar — phone, CTA, language, and the
     collapsed logo. Nothing in the row is sized by its own padding. */
  --nv-ctl-h: 40px;
  --nv-links-h: 40px;

  --nv-logo-d: 100px; /* desktop */
  --nv-logo-m: 72px;  /* phone, expanded */

  --nv-ink: #ffffff;
  --nv-ink-dim: #d0d0d0;
  --nv-bg: #0b0b0b;
  --nv-line: rgba(255, 255, 255, 0.08); /* the bar's bottom rule */
  --nv-edge: rgba(255, 255, 255, 0.18); /* borders on controls */

  /* The site orange. The same value is #fea710 throughout style.css — if it
     ever moves, it moves here and in there together. */
  --nv-accent: #fea710;
  --nv-accent-soft: rgba(254, 167, 16, 0.55);

  /* Square-ish, like the rest of the site. Pills read as a different design
     language from the buttons on the pages these link to. */
  --nv-radius: 8px;     /* phone, language switch */
  --nv-radius-cta: 6px; /* Book now */

  --nv-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nv-dur: 0.26s;

  /* Desktop is a single row, so open and shut are the SAME number. The
     desktop guarantee is arithmetic rather than a rule that has to win a
     cascade fight: even if .is-shut were somehow left on the element, the
     height it resolves to is identical. */
  --nv-open: calc(var(--nv-logo-d) + var(--nv-pad-y) * 2);
  --nv-shut: var(--nv-open);
}

@media (max-width: 640px) {
  :root {
    /* Three stacked rows: logo, links, controls. Every term is a token, so
       the sum cannot drift from what the rows actually render at. */
    --nv-open: calc(
      var(--nv-pad-y) * 2 + var(--nv-logo-m) + var(--nv-gap) +
        var(--nv-links-h) + var(--nv-gap) + var(--nv-ctl-h)
    );
    /* One row: padding, controls, padding. */
    --nv-shut: calc(var(--nv-pad-y) * 2 + var(--nv-ctl-h));
  }
}

/* --------------------------------------------------------------------------
   THE BAR
   -------------------------------------------------------------------------- */

.nv {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  height: var(--nv-open);
  overflow: hidden; /* clips the taller layout as the bar closes around it */
  background: var(--nv-bg);
  border-bottom: 1px solid var(--nv-line);
  transition: height var(--nv-dur) var(--nv-ease);

  /* The bar centres its own content. Deliberately NOT height:100% on
     .nv-inner — that would make .nv-inner a height-constrained flex
     container, and its children would then compress as the bar shrinks
     instead of being clipped by it. Letting .nv-inner keep its natural
     height and centring it from here keeps the collapsed row vertically
     exact at every frame of the transition. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nv.is-shut {
  height: var(--nv-shut);
}

/* Reserves the EXPANDED height for the whole life of the page, in both
   states. This is the load-bearing element: without it the bar would overlap
   the page, and if its height tracked the bar instead, the document would
   resize on every collapse and bring back every scroll-anchoring problem. */
.nv-spacer {
  height: var(--nv-open);
}

.nv-inner {
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;

  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--nv-pad-x);

  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--nv-gap);
}

/* The page links are full-height tabs with an accent rule along the bottom,
   so they have to reach the bar's bottom edge. That means .nv-inner filling
   the bar vertically — safe here because the desktop bar has ONE height and
   never animates. Scoped to desktop on purpose: doing this on the phone would
   make .nv-inner a height-constrained flex container, and its children would
   compress as the bar collapses instead of being clipped by it. */
@media (min-width: 641px) {
  .nv-inner {
    flex: 1 1 auto;
  }
}

.nv-left {
  display: flex;
  align-items: stretch;
  gap: 28px;
  min-width: 0;
}

.nv-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.nv-logo {
  display: block;
  width: var(--nv-logo-d);
  height: var(--nv-logo-d);
  object-fit: contain;
  transition: width var(--nv-dur) var(--nv-ease),
    height var(--nv-dur) var(--nv-ease);
}

/* --------------------------------------------------------------------------
   LINKS
   -------------------------------------------------------------------------- */

/* Full-height tabs, divided by hairlines, carrying an accent rule along the
   bottom edge. This is the original navbar's design, minus the slow diagonal
   highlight that used to sweep across the active tab — the `nav-glint`
   animation in style.css. The static look is what is kept here. */

.nv-links {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 0;
  min-width: 0;

  --nv-tab-w: clamp(100px, 12vw, 110px);
}

.nv-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--nv-tab-w);
  width: var(--nv-tab-w);
  padding: 0 10px;

  color: var(--nv-ink-dim);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;

  background: transparent;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Divider between neighbours only, so the group reads as one unit rather than
   three separate buttons. */
.nv-links a + a {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.nv-links a:hover,
.nv-links a:focus-visible {
  color: var(--nv-ink);
  background: rgba(255, 255, 255, 0.12);
  border-bottom-color: var(--nv-accent-soft);
}

.nv-links a.is-active {
  color: var(--nv-ink);
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: var(--nv-accent);
}

/* --------------------------------------------------------------------------
   ACTIONS — phone, CTA, language
   -------------------------------------------------------------------------- */

.nv-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* One token drives the height of everything in the row, so the controls line
   up regardless of their individual padding. */
.nv-phone,
.nv-cta,
.nv-lang {
  height: var(--nv-ctl-h);
  box-sizing: border-box;
}

/* A solid white block on the black bar — the original treatment. It is the
   highest-contrast thing in the navbar, which is right for the control that
   dials the business. */
.nv-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: var(--nv-radius);
  background: #ffffff;
  color: #111111;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.nv-phone:hover,
.nv-phone:focus-visible {
  background: #f0f0f0;
}

.nv-phone svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The original CTA, minus the `button-glint` sweep. The inset highlight and
   the coloured drop shadow are what gave it its weight, so both are kept. */
.nv-cta {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-radius: var(--nv-radius-cta);
  background: var(--nv-accent);
  color: #111111;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;

  box-shadow: 0 6px 14px rgba(254, 167, 16, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.nv-cta:hover,
.nv-cta:focus-visible {
  box-shadow: 0 7px 16px rgba(254, 167, 16, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.nv-cta:active {
  transform: scale(0.97);
}

.nv-lang {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--nv-edge);
  border-radius: var(--nv-radius);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.nv-lang > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--nv-ink-dim);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nv-lang > * + * {
  border-left: 1px solid var(--nv-edge);
}

/* Hover belongs to the link only — the language you are already reading must
   not look clickable. */
.nv-lang a:hover,
.nv-lang a:focus-visible {
  color: var(--nv-ink);
  background: rgba(255, 255, 255, 0.12);
}

.nv-lang .is-active {
  background: var(--nv-accent);
  color: #111111;
  cursor: default;
  user-select: none;
}

/* --------------------------------------------------------------------------
   PHONE — EXPANDED (three stacked rows) AND COLLAPSED (one row)

   Everything that distinguishes the two states lives inside this query, so
   .is-shut is inert on desktop even if it is left on the element.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .nv-inner {
    flex-direction: column;
    justify-content: center;
    gap: var(--nv-gap);
    padding: 0 14px;
  }

  .nv-left {
    flex-direction: column;
    align-items: center;
    gap: var(--nv-gap);
    width: 100%;
    min-width: 0;
  }

  /* Explicit row heights — these are the terms of the --nv-open sum. */
  .nv-logo {
    width: var(--nv-logo-m);
    height: var(--nv-logo-m);
  }

  /* Tabs do not survive a stacked bar. Side by side at their desktop width the
     three demand roughly 330px including dividers, which overruns a small
     phone — and the bar's overflow:hidden deletes the overrun rather than
     showing it. As pills sharing the row they fit any width. This is what the
     original did on phones too. */
  .nv-links {
    height: var(--nv-links-h);
    width: 100%;
    justify-content: center;
    gap: 8px;
  }

  .nv-links a {
    flex: 1 1 33.333%;
    width: auto;
    min-width: 0;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--nv-radius);
    border-bottom: 0;
  }

  .nv-links a + a {
    border-left: 0;
  }

  .nv-links a:hover,
  .nv-links a:focus-visible {
    background: rgba(255, 255, 255, 0.12);
  }

  /* A bottom rule would be clipped by the pill's corners, so the accent goes
     on as an inset shadow instead — same signal, inside the rounded shape. */
  .nv-links a.is-active {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 -2px 0 var(--nv-accent);
  }

  .nv-actions {
    height: var(--nv-ctl-h);
    justify-content: center;
    width: 100%;
  }

  /* --- collapsed --- */

  .nv.is-shut {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }

  .nv.is-shut .nv-inner,
  .nv.is-shut .nv-left {
    flex-direction: row;
    align-items: center;
  }

  .nv.is-shut .nv-inner {
    justify-content: space-between;
  }

  .nv.is-shut .nv-left {
    width: auto;
    gap: 10px;
    flex: 0 0 auto;
  }

  .nv.is-shut .nv-logo {
    width: var(--nv-ctl-h);
    height: var(--nv-ctl-h);
  }

  /* display:none, not a fold. .nv-left is a ROW when collapsed, so links left
     in flow would still claim their full width at zero height and shove the
     controls past the right edge, where overflow:hidden deletes them. */
  .nv.is-shut .nv-links {
    display: none;
  }

  .nv.is-shut .nv-actions {
    width: auto;
    justify-content: flex-end;
    flex: 1;
    gap: 8px;
  }

  /* Back to an icon-only pill; tapping it still dials. */
  .nv.is-shut .nv-phone {
    width: var(--nv-ctl-h);
    flex: 0 0 var(--nv-ctl-h);
    padding: 0;
    justify-content: center;
  }

  .nv.is-shut .nv-phone-text {
    display: none;
  }

  .nv.is-shut .nv-cta {
    padding: 0 14px;
    font-size: 0.85rem;
  }
}

/* --------------------------------------------------------------------------
   NARROW DESKTOP — 641px to 860px

   The breakpoint is 640px, so the full desktop row has to survive at 641px.
   Laid out at full size it measures roughly 760px and would overflow that
   band silently, because .nv has overflow:hidden and simply deletes whatever
   crosses the right edge. Tightening it here is what keeps the band honest.

   Note this redefines --nv-logo-d rather than setting a width on .nv-logo:
   --nv-open is a calc() over that token, so the bar height and the spacer
   both follow automatically. Overriding the element would desynchronise
   them, which is precisely the class of bug the tokens exist to prevent.
   -------------------------------------------------------------------------- */

@media (min-width: 641px) and (max-width: 960px) {
  :root {
    --nv-logo-d: 72px;
  }

  .nv-left {
    gap: 18px;
  }

  /* Full-width tabs are the single biggest cost in this row — three of them
     at 110px is 330px before the logo. Narrowing the tab is what buys the
     space back, so the band reaches further up than it used to. */
  .nv-links {
    --nv-tab-w: 78px;
  }

  .nv-links a {
    font-size: 0.95rem;
  }

  .nv-actions {
    gap: 8px;
  }

  .nv-lang > * {
    min-width: 36px;
  }

  .nv-phone {
    width: var(--nv-ctl-h);
    flex: 0 0 var(--nv-ctl-h);
    padding: 0;
    justify-content: center;
  }

  .nv-phone-text {
    display: none;
  }

  .nv-cta {
    padding: 0 14px;
  }
}

/* --------------------------------------------------------------------------
   NARROW PHONE — 480px and below

   Expanded, the controls row with the number spelled out does not fit a
   typical phone. The number is the first thing to go: the pill still dials,
   and the full number is one tap away. Placed after the 640px block so it
   wins.

   Why 480 and not 400: on real pages style.css sets the phone root font to
   18px, so everything here renders 12.5% larger than the numbers suggest.
   Measured with that in place, the full row overran the screen from 401px
   up to ~420px in English and ~459px in Greek, whose "Κράτηση τώρα" is far
   longer than "Book now" — exactly the 414-430px of the larger iPhones.
   480 clears the Greek row with margin rather than to the pixel.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .nv-actions {
    gap: 8px;
  }

  .nv-phone {
    width: var(--nv-ctl-h);
    flex: 0 0 var(--nv-ctl-h);
    padding: 0;
    justify-content: center;
  }

  .nv-phone-text {
    display: none;
  }

  .nv-cta {
    padding: 0 14px;
    font-size: 0.85rem;
  }
}

/* --------------------------------------------------------------------------
   SMALL PHONE — 360px and below

   The minimised bar puts logo, phone, Book-now and the language switch on one
   row. On real pages the text is larger than it looks here, because
   style.css sets the phone root font to 18px and every rem in this file
   scales with it. With the Greek label "Κράτηση τώρα" — 134px against 97px
   for "Book now" — that row came to ~340px on a 320px phone, and the bar's
   overflow:hidden cut the language switch off. These are spacing trims only:
   every control and label stays, just packed closer. Placed last so it wins.
   -------------------------------------------------------------------------- */

@media (max-width: 360px) {
  .nv.is-shut .nv-inner {
    padding: 0 10px;
    gap: 8px;
  }

  .nv.is-shut .nv-actions {
    gap: 6px;
  }

  .nv.is-shut .nv-cta {
    padding: 0 10px;
  }

  .nv-lang > * {
    min-width: 32px;
    padding: 0 7px;
  }
}

/* The collapse is a convenience, not information. Someone who has asked for
   less motion gets the same layout with no animation. */
@media (prefers-reduced-motion: reduce) {
  .nv,
  .nv-logo {
    transition: none;
  }
}