/* =========================================================================
   MENU V4 "Hrana" — the header, built to the owner's own shared pattern
   (komparztv / lokacie / panorama), with exactly one intervention of ours.

   THE PATTERN, unchanged:
     A fixed bar that is full bleed and chrome-less while the page is at the
     top, and that retracts inward into a floating rounded card on one 500ms
     ease-out transition. Everything is driven by ONE boolean expressed as a
     class on the root (.mv4-top), server rendered so the first paint is
     already correct and JS only ever REMOVES the class. The base declarations
     are the CONDENSED state; the .mv4-top rules are the overrides. The white
     text skin is compound scoped (.mv4-top.mv4-light &) so it cannot survive
     the scroll: the "text stayed white" bug is unrepresentable.

   TWO DELIBERATE DEVIATIONS, both briefed:
     A. The trigger is the HERO, not 24px. See menu-v4.blade.php's script.
     B. There IS a backdrop blur. It lives on its own element (.mv4-glass) with
        its own compositor layer, and it has a solid colour fallback under
        @supports not (backdrop-filter). See the note at .mv4-glass.

   THE ONE ORIGAMI INTERVENTION:
     The active/hover indicator. Not his 2px rounded underline: a flat faceted
     shard cut at the swan's own wing angles (26.6 deg and 45 deg edges, a
     crease near 10 deg), in the mark's mid tint, sliding between items on his
     300ms ease-out. When the bar condenses at the hero boundary the shard
     folds once: one crease appears and the lower facet drops to the deep tint.
     Nothing else on this page deviates from the pattern.

   Every class here is prefixed mv4-. The page also links zahrada-v3.css,
   which owns the hero, the bands and the type.
   ========================================================================= */

:root {
  /* geometry, straight off the spec */
  --mv4-row: 4.5rem;          /* 72px, row height in both states */
  --mv4-max: 100rem;          /* 1600px, floating surface max width */
  --mv4-r: 1.5rem;            /* 24px, floating card radius */
  --mv4-r-ctl: 1rem;          /* 16px, every control inside the bar */
  --mv4-pad-top: 1rem;        /* floating top gutter 16px */
  --mv4-pad-top-hi: 0.5rem;   /* at top 8px */

  /* The family shadow signature: y 18, blur 50, spread -12, alpha .28, on the
     house ink. His ink is rgba(10,9,8); ours is the site's pine, so the same
     recipe is mixed on rgba(13,33,28). */
  --mv4-shadow: 0 18px 50px -12px rgba(13, 33, 28, 0.28);
  --mv4-panel-shadow: 0 24px 64px -8px rgba(9, 26, 22, 0.26), 0 4px 20px -4px rgba(9, 26, 22, 0.12);

  /* The swan's own facet tints. These are the mark's shading, never a second
     brand colour: nothing on this page is painted in them except the shard. */
  --mv4-facet-mid: #3eb4b4;
  --mv4-facet-deep: #159b9c;

  --mv4-sbw: 0px;             /* scrollbar compensation, written by lockScroll */
}

/* =========================================================================
   GUTTER LAYER — animates the side and top gutters, and nothing else.
   Padding lives here, every other property lives on the surface below, so
   max-width / background / shadow never share a property list with padding.
   ========================================================================= */
.mv4-gutter {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: var(--mv4-pad-top) 1rem 0;
  margin-right: var(--mv4-sbw);
  transition: padding 500ms ease-out;
}
@media (min-width: 640px) {
  .mv4-gutter { padding-inline: 1.5rem; }
}
.mv4-top .mv4-gutter { padding: var(--mv4-pad-top-hi) 0 0; }

/* =========================================================================
   SURFACE — the thing that morphs.
   Base = the floating card. .mv4-top knocks it back to full bleed.
   The border is ALWAYS 1px; only its colour animates, so the morph costs no
   layout shift at all.
   ========================================================================= */
.mv4-bar {
  position: relative;
  z-index: 1;
  max-width: var(--mv4-max);
  margin-inline: auto;
  border: 1px solid rgba(255, 253, 246, 0.72);
  border-radius: var(--mv4-r);
  background: rgba(246, 242, 230, 0.7);
  box-shadow: var(--mv4-shadow);
  transition:
    max-width 500ms ease-out,
    background-color 500ms ease-out,
    border-color 500ms ease-out,
    border-radius 500ms ease-out,
    box-shadow 500ms ease-out;
}
.mv4-top .mv4-bar {
  max-width: 100%;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- DEVIATION B: the backdrop blur ----------
   His komparztv file forbids backdrop-filter on the bar outright, and the
   reason it gives is real: a fixed full width blur re-samples the viewport on
   every scroll frame, and Chrome flickers it on repaint. He asked for the
   blur anyway, so it is built to cost as little as it can:

   1. The blur is NOT on the bar. It is on this separate child, which paints
      nothing but the filter, is pointer-events:none, and is promoted to its
      own compositor layer (translateZ(0) + backface-visibility) so a repaint
      of the bar's text never invalidates it.
   2. It never animates during scroll. The only thing scroll changes is
      opacity, which is a compositor property, and it changes ONCE, at the
      hero boundary, not continuously. That is the whole reason deviation A
      (hero trigger, not 24px) makes this blur cheap: there is exactly one
      blur transition per page, not one per flick of the trackpad.
   3. contain: paint stops the filter's damage rect from escaping the card.
   4. If the browser has no backdrop-filter, the @supports block below drops
      this layer entirely and raises the bar's own opacity to 0.98, which is
      his documented compensation rule.
   ------------------------------------------------------------------------ */
.mv4-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  contain: paint;
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  opacity: 1;
  transition: opacity 500ms ease-out, border-radius 500ms ease-out;
}
.mv4-top .mv4-glass { opacity: 0; }

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .mv4-glass { display: none; }
  /* solid colour fallback: opacity up, exactly as lokacie did when it removed
     its own blur (95 -> 98) */
  .mv4-bar { background: rgba(246, 242, 230, 0.98); }
}

/* =========================================================================
   ROW
   ========================================================================= */
.mv4-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.1rem);
  height: var(--mv4-row);
  padding: 0 0.75rem 0 1.25rem;
  transition: padding 500ms ease-out;
}
.mv4-top .mv4-row { padding-inline: 1.5rem; }
@media (min-width: 1024px) {
  .mv4-top .mv4-row { padding-inline: 3rem; }
}

/* ---------- brand ---------- */
.mv4-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  margin-right: auto;
  flex: 0 0 auto;
  min-width: 0;
}
/* 36px, constant across every state. The swan is a colour mark, so it is never
   inverted: brightness-0 invert is his trick for a monochrome logo and would
   destroy the only real brand asset this project has. */
.mv4-brand img { width: 2.25rem; height: 2.25rem; }
.mv4-brand > span { display: block; line-height: 1.12; }
.mv4-brand b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
  transition: color 500ms ease-out;
}
.mv4-brand small {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--teal-ink);
  transition: color 500ms ease-out;
}
/* The light skin is scoped to the bar itself, not to the whole root. The mobile
   sheet is a descendant of .mv4-root, so an unscoped .mv4-top.mv4-light rule
   painted the sheet's wordmark #fffdf6 on the cream sheet: invisible. (review fix) */
.mv4-top.mv4-light .mv4-gutter .mv4-brand b { color: #fffdf6; }
.mv4-top.mv4-light .mv4-gutter .mv4-brand small { color: var(--mint); }

/* =========================================================================
   DESKTOP NAV + THE SHARD
   ========================================================================= */
.mv4-nav {
  position: relative;
  display: none;
  align-items: center;
  height: 100%;
}
@media (min-width: 1280px) {
  /* His rule is lg (1024) for <=6 links and <=2 right hand controls. Five
     Slovak labels ("Starostlivosť", "O zariadení") plus a dialling number plus
     the pill do not clear 1024.
     REVIEW FIX: it was 1160, and measured at 1160 the row overflowed its own
     card by 68px: "O zariadení" wrapped to two lines and the CTA pill was cut
     off past the card's right edge. Measured minimum for the whole row with
     nowrap labels is 1250, so the switch is 1280 (Tailwind xl), which is also
     what the shared spec prescribes for >2 right-hand controls. */
  .mv4-nav { display: flex; }
}
.mv4-link {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  padding-inline: 0.875rem;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 300ms;
}
.mv4-link:hover { color: var(--ink); }
.mv4-link[data-active] { color: var(--teal-ink); }
.mv4-top.mv4-light .mv4-link { color: rgba(255, 253, 246, 0.85); }
.mv4-top.mv4-light .mv4-link:hover { color: #fffdf6; }
.mv4-top.mv4-light .mv4-link[data-active] { color: #fffdf6; }

/* ---------- THE ORIGAMI INTERVENTION ----------
   A flat angular sliver, not an underline. Its outline is cut at the swan's
   own facet angles, measured off liri-labut.svg:

     right edge  12px run over 6px rise = 26.6 deg  (the wing's leading edges,
                                                     path4 22.5/43.8 = 27.2)
     left edge    6px run over 6px rise = 45 deg    (the long fold, path3
                                                     201/211 = 46.4)
     crease      3.75px -> 2.25px across the sliver, a shallow tilt
                                                    (path4's long edge, 10.4)

   The cuts are declared in PIXELS inside the polygon, so the angles hold at
   every link width instead of shearing with it. The sliver is 6px tall rather
   than his 2px rule, and the run of the cuts is scaled to that height, which
   is what keeps the shortest label ("Izby") reading as a sliver rather than as
   an arrowhead: at 8px tall the two cuts ate 24px of a 34px shard.
   Its box is the text box plus 8px of the link's padding on each side
   (width = offsetWidth - 16, x = offsetLeft + 8), so even the short labels
   keep a flat bottom edge under the word.

   Two stacked facets. Flat: facet 1 is the whole shard in the mid tint and
   facet 2 is collapsed onto the bottom edge with zero area. Folded: the crease
   splits them, facet 2 opens into the deep tint, and the sliver reads as one
   piece of paper creased along its length. Same vertex count in both states,
   which is what makes clip-path interpolate.
   ------------------------------------------------------------------------ */
.mv4-ind {
  position: absolute;
  left: 0;
  bottom: 1rem;
  height: 6px;
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: transform 300ms ease-out, width 300ms ease-out, opacity 200ms ease-out;
  will-change: transform, width;
}
.mv4-ind.is-shown { opacity: 1; }
.mv4-ind i {
  position: absolute;
  inset: 0;
  display: block;
  /* the fold rides 60ms behind the bar's morph, so it reads as a consequence
     of the bar condensing rather than as a second, separate animation */
  transition: clip-path 500ms ease-out 60ms;
}
.mv4-f1 {
  background: var(--mv4-facet-mid);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 6px 100%);
}
.mv4-f2 {
  background: var(--mv4-facet-deep);
  clip-path: polygon(6px 100%, calc(100% - 12px) 100%, calc(100% - 12px) 100%, 6px 100%);
}
/* the single fold, at the hero boundary. The crease opens along the sliver and
   the lower facet drops to the deep tint: one piece of paper, creased once. */
.mv4-root:not(.mv4-top) .mv4-f1 {
  clip-path: polygon(0 0, 100% 0, calc(100% - 4.5px) 2.25px, 3.75px 3.75px);
}
.mv4-root:not(.mv4-top) .mv4-f2 {
  clip-path: polygon(3.75px 3.75px, calc(100% - 4.5px) 2.25px, calc(100% - 12px) 100%, 6px 100%);
}

/* =========================================================================
   ACTION CLUSTER
   Control height is 44px, not his 40px: the touch target floor on this site is
   44 and a header that dials is the one place it may not be shaved.
   ========================================================================= */
.mv4-acts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.mv4-tel {
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  padding-inline: 0.65rem;
  border-radius: var(--mv4-r-ctl);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--teal-ink);
  transition: color 500ms ease-out, background-color 200ms;
  font-variant-numeric: lining-nums tabular-nums;
}
.mv4-tel:hover { background: rgba(21, 155, 156, 0.09); }
.mv4-top.mv4-light .mv4-tel { color: #fffdf6; }
.mv4-top.mv4-light .mv4-tel:hover { background: rgba(255, 255, 255, 0.12); }

/* THE HEADER CTA IS THE SITE'S PRIMARY BUTTON.

   It used to be a local invention: a rounded pill in --teal with --pine type,
   its own hover lift and its own shadow, sharing nothing with the button the
   rest of the site uses. Two primary buttons on one page is one too many, and
   the one in the chrome is the one a visitor sees on every screen.

   The markup now carries "btn btn--sm mv4-cta", so zahrada-v3.css supplies
   the whole look — the deep teal plate, the cut corner clipped out of its
   ::before, the cream type, the arrow that steps on hover. Everything that
   would fight it is gone from here; menu-v4.css loads after zahrada-v3.css,
   so any background, colour, radius or shadow left in this rule would win and
   put the pill back.

   What stays is layout only: where it sits in the bar and when it hides. */
.mv4-cta {
  white-space: nowrap;
}
@media (max-width: 1279px) { .mv4-cta { display: none; } }

.mv4-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--mv4-r-ctl);
  cursor: pointer;
  color: var(--ink);
  transition: color 500ms ease-out, background-color 200ms;
}
.mv4-burger:hover { background: rgba(17, 35, 29, 0.07); }
.mv4-top.mv4-light .mv4-burger { color: #fffdf6; }
.mv4-top.mv4-light .mv4-burger:hover { background: rgba(255, 255, 255, 0.12); }
@media (min-width: 1280px) { .mv4-burger { display: none; } }
.mv4-burger i {
  position: relative;
  display: block;
  width: 1.35rem;
  height: 1.5px;
  background: currentColor;
}
.mv4-burger i::before,
.mv4-burger i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}
.mv4-burger i::before { top: -6px; }
.mv4-burger i::after { top: 6px; }

/* focus, the only ring in the system, taken from the site's own stylesheet
   rather than invented here */
.mv4-root :is(a, button):focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 6px;
}
/* scoped to the bar for the same reason as the brand colours above: a mint ring
   inside the cream sheet is not a visible focus ring (review fix) */
.mv4-top.mv4-light .mv4-gutter :is(a, button):focus-visible { outline-color: var(--mint); }

/* =========================================================================
   MOBILE DRAWER — his top card, not a side panel.
   12px inset on three sides, 24px radius, so it replaces the bar in place.
   Enter 300ms ease-out, leave 200ms ease-in: overlays always leave faster than
   they enter, and with ease-in against ease-out.
   ========================================================================= */
.mv4-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(9, 26, 22, 0.42);
  /* blur is allowed here: this layer paints once when it opens and is static
     afterwards, which is the exact case his rule permits */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms, visibility 250ms;
}
.mv4-veil.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1280px) { .mv4-veil, .mv4-sheet { display: none; } }

.mv4-sheet {
  position: fixed;
  inset: 0.75rem 0.75rem auto;
  z-index: 100;
  border-radius: var(--mv4-r);
  background: var(--card);
  box-shadow: var(--mv4-panel-shadow);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms;
}
.mv4-sheet.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 300ms ease-out, transform 300ms ease-out, visibility 0s;
}
.mv4-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding-inline: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.mv4-sheet-top .mv4-brand img { width: 1.75rem; height: 1.75rem; }
.mv4-sheet-top .mv4-brand b { font-size: 1.15rem; color: var(--ink); }
.mv4-sheet-top .mv4-brand small { color: var(--teal-ink); }
.mv4-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border-radius: var(--mv4-r-ctl);
  cursor: pointer;
  color: var(--ink);
  transition: background-color 200ms;
}
.mv4-x:hover { background: rgba(17, 35, 29, 0.07); }
.mv4-x i { position: relative; display: block; width: 1.15rem; height: 1.15rem; }
.mv4-x i::before, .mv4-x i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}
.mv4-x i::before { transform: rotate(45deg); }
.mv4-x i::after { transform: rotate(-45deg); }

.mv4-sheet-body {
  padding: 0.75rem;
  max-height: calc(100svh - 6rem);
  overflow-y: auto;
}
.mv4-srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.875rem;
  padding: 0.65rem 1rem;
  border-radius: var(--mv4-r-ctl);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 200ms, color 200ms;
}
.mv4-srow + .mv4-srow { margin-top: 2px; }
.mv4-srow:hover { background: rgba(21, 155, 156, 0.1); color: var(--teal-ink); }
.mv4-srow[data-active] { color: var(--teal-ink); }
.mv4-srow .arw { flex: 0 0 auto; color: var(--line-2); }
.mv4-sheet-foot {
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.6rem;
}
.mv4-sheet-foot .mv4-cta {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  height: 3rem;
}
.mv4-sheet-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3rem;
  border-radius: var(--mv4-r-ctl);
  border: 1.5px solid var(--teal);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--teal-ink);
  transition: background-color 200ms, color 200ms;
  font-variant-numeric: lining-nums tabular-nums;
}
.mv4-sheet-tel:hover { background: var(--teal); color: var(--pine); }

body.mv4-locked { overflow: hidden; padding-right: var(--mv4-sbw, 0px); }

/* =========================================================================
   VARIANT SWITCHER (prototype chrome only)
   ========================================================================= */
.mv4-switch {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 80;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(253, 251, 244, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px -14px rgba(13, 33, 28, 0.6);
}
.mv4-switch a {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
}
.mv4-switch a:hover { background: rgba(21, 155, 156, 0.12); }
.mv4-switch a[aria-current="page"] { background: var(--teal); color: var(--pine); }

/* =========================================================================
   NARROW PHONES — nothing may overflow between 320 and 1920
   ========================================================================= */
@media (max-width: 560px) {
  .mv4-brand small { display: none; }
  .mv4-brand b { font-size: 1.2rem; }
}
@media (max-width: 420px) {
  .mv4-gutter { padding-inline: 0.625rem; }
  .mv4-row { padding: 0 0.5rem 0 0.75rem; }
  .mv4-top .mv4-row { padding-inline: 1rem; }
  .mv4-brand img { width: 2rem; height: 2rem; }
  .mv4-brand b { font-size: 1.1rem; }
  .mv4-tel { font-size: 1rem; padding-inline: 0.4rem; }
}
@media (max-width: 359px) {
  .mv4-gutter { padding-inline: 0.4rem; }
  .mv4-row { gap: 0.3rem; padding: 0 0.35rem 0 0.6rem; }
  .mv4-tel { padding-inline: 0.25rem; }
}

/* =========================================================================
   REDUCED MOTION
   A 500ms geometry morph and a folding indicator are exactly what this query
   exists for. Both become instant swaps; the states themselves are kept.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .mv4-gutter,
  .mv4-bar,
  .mv4-glass,
  .mv4-row,
  .mv4-ind,
  .mv4-ind i,
  .mv4-veil,
  .mv4-sheet,
  .mv4-brand b,
  .mv4-brand small,
  .mv4-link,
  .mv4-tel,
  .mv4-cta,
  .mv4-burger { transition-duration: 1ms !important; transition-delay: 0s !important; }
  .mv4-cta:hover { transform: none; }
}