/* =========================================================================
   Villa Johannes - layout.css
   Containers, page scaffolding, site header / navigation, footer.
   ========================================================================= */

/* ---- Containers & sections ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-wide {
  max-width: var(--container-wide);
}
.container-md {
  max-width: 960px;
}
.container-narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--section);
}

/* =========================================================================
   Header / navigation
   ========================================================================= */
/* Solid forest-green bar, flush to the top of the viewport (no white strip). */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--forest);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
    transform 0.4s var(--ease);
}

/* The bar height is fixed (not min-height) so the oversized logo box below can
   overhang without ever stretching the header. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: var(--header-h);
}
/* The brand must never be squeezed by the navigation: as a flex item it would
   shrink and `max-width:100%` would then scale the artwork down. */
.site-header__brand {
  flex: none;
  display: flex;
  align-items: center;
  height: 100%;
}

/* Logo. The asset is a 500x500 canvas that is transparent apart from a
   landscape wordmark occupying 445x251 in the middle - roughly half the canvas
   height is empty padding. To read at the intended size the element therefore
   has to be larger than the bar; only that transparent padding overhangs, and
   the negative block margins keep it out of the header's height calculation.
   The artwork is pale sage/gold on transparency, so it needs no colour
   treatment on the green ground. Replace the file in place to swap it. */
.site-logo {
  display: block;
  width: var(--logo-box);
  height: var(--logo-box);
  object-fit: contain;
  margin-block: calc((var(--logo-box) - var(--header-h)) / -2);
  /* The empty canvas padding must not swallow clicks meant for the page. */
  pointer-events: none;
}

/* ---- Desktop navigation ----
   The links stay one intentional group rather than being spread with
   space-between; the group is placed on the bar's centre line by the desktop
   grid further down, not by an auto margin. */
.nav-desktop {
  display: none;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 2.4vw, 2.375rem);
  list-style: none;
  white-space: nowrap;
}
/* Warm off-white, never a disabled-looking grey. */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  transition: color 0.2s var(--ease);
}
/* The indicator is measured from the vertical centre of the link, not from the
   bottom of its 44px hit area, so it always sits clear below the label instead
   of striking through it. 0.75em below the centre clears the descenders. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% + 0.75em);
  width: 20px;
  height: 2px;
  background: var(--wine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav-link:hover,
.nav-link:focus-visible {
  color: #fff;
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}
/* Static indicator for the current page (no sliding animation). */
.nav-link[aria-current="page"] {
  color: #fff;
}
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* The header inner carries `.container container-wide`, the same container every
   section uses, so the logo and nav sit on one grid with the hero and content
   below - no separate width here.

   The desktop bar starts at 1100px; below that the seven items plus the
   enlarged logo would collide, so those widths use the side panel. */
@media (min-width: 1100px) {
  /* Three tracks with the nav in the middle one. Because the two 1fr edges are
     always equal, the group sits on the bar's true centre line instead of being
     centred in whatever space the logo leaves over; the logo keeps its place in
     the leading track and the trailing track is left free for the hamburger's
     slot (hidden at this width) and any future right-hand element. Should the
     bar ever get too tight, the edge tracks collapse to their content width, so
     the nav slides across rather than colliding with the logo. */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .nav-desktop {
    display: block;
  }
}

/* Homepage: the hero sits directly below the fixed header. Offsetting main by
   the header height keeps the hero flush under the bar - the green header
   covers this padding, so there is no white strip and no layout shift. Other
   pages carry their own top offset (page-head / flash / room-detail). */
body.home main {
  padding-top: var(--header-h);
}

/* ---- Mobile toggle ---- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  /* Sits at the trailing edge; the nav group carries the same rule on desktop. */
  margin-left: auto;
  /* Quieter than the logo it sits opposite: three hairlines in a 22px span,
     inside a 44px target so the tap area is untouched. */
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: transparent;
  border: 0;
  color: var(--on-dark-soft);
  transition: color 0.2s var(--ease);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  color: var(--on-dark);
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
}

/* ---- Mobile panel ---- */
.nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  width: min(86vw, 360px);
  height: 100dvh;
  background: var(--forest);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--sp-6) var(--gutter) var(--sp-8);
  display: flex;
  flex-direction: column;
  /* Seven links plus the address no longer fit a short phone in landscape or
     a 568px-tall screen, and a clipped panel hides the last item entirely.
     The scrollbar only appears when the content actually overflows, so taller
     screens look exactly as before. */
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  /* visibility flips only after the slide-out finishes when closing, but
     immediately when opening (see .open) - otherwise the panel is still
     `hidden` when the script moves focus into it, and the keyboard user is
     left behind. It stays out of the tab order while closed. */
  transition: transform 0.38s var(--ease), visibility 0s 0.38s;
}
.nav-panel.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.38s var(--ease), visibility 0s;
}
.nav-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-8);
}
/* Same asset, sized for the panel; the negative margin keeps the row compact
   despite the transparent canvas padding. */
.nav-panel__head .site-logo {
  --logo-box: 116px;
  margin-block: -1.5rem;
}
.nav-panel__close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r);
  background: transparent;
  color: var(--on-dark);
  font-size: 1.4rem;
  line-height: 1;
}
.nav-panel__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.nav-panel__list a {
  display: block;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line-on-dark);
  color: var(--on-dark-soft);
  transition: color 0.2s var(--ease);
}
.nav-panel__list a:hover,
.nav-panel__list a[aria-current="page"] {
  color: #fff;
}
.nav-panel__foot {
  margin-top: auto;
  padding-top: var(--sp-6);
  color: var(--on-dark-soft);
  font-size: 0.9rem;
  line-height: 1.7;
}
/* Inline links in the panel foot still need a comfortable touch target. */
.nav-panel__foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav-panel__foot a:hover {
  color: #fff;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(31, 50, 39, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.nav-backdrop.open {
  opacity: 1;
  visibility: visible;
}

body.nav-open {
  overflow: hidden;
}

/* Desktop: the side menu (hamburger, panel, backdrop) is fully removed and the
   "More" dropdown covers the overflow links. Declared after the base rules
   above so it wins on source order without needing !important. */
@media (min-width: 1100px) {
  .nav-toggle,
  .nav-panel,
  .nav-backdrop {
    display: none;
  }
}

/* Reduced motion: keep every state change while dropping movement. */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .nav-link,
  .nav-link::after,
  .nav-panel,
  .nav-panel.open,
  .nav-panel__list a,
  .nav-backdrop {
    transition: none;
  }
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  background: var(--forest-deep);
  color: var(--on-dark-soft);
  padding-top: var(--sp-24);
}
.site-footer a {
  color: var(--on-dark-soft);
  transition: color 0.2s var(--ease);
}
.site-footer a:hover {
  color: var(--on-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-16);
}
.footer-brand__logo {
  height: 100px;
  width: auto;
  margin-bottom: var(--sp-5);
  filter: brightness(0) invert(1);
}
.footer-brand p {
  max-width: 34ch;
  color: var(--on-dark-soft);
}
.footer-col h2 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--sp-4);
}
.footer-col ul {
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.footer-col address {
  font-style: normal;
  line-height: 1.9;
  color: var(--on-dark-soft);
}
.footer-bottom {
  border-top: 1px solid var(--line-on-dark);
  padding-block: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--stone);
}
.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--sp-16);
  }
}