/* ==========================================================================
   Maringotky Šumava — vlastní CSS vrstva
   --------------------------------------------------------------------------
   Tady je jen to, co přes Tailwind utility nedává smysl řešit:
   barevné tokeny, papírové zrno, zástupné fotky, oblouky, animace a formuláře.
   Layout, typografie a spacing se dělají v HTML přes Tailwind třídy.
   ========================================================================== */

:root{
  --paper:#F7F3EB;
  --linen:#EDE5D7;
  --ink:#1B211C;
  --muted:#5A6459;
  --forest:#212D24;
  --moss:#3E5140;
  --sage:#97A48D;
  --clay:#9A5230;
  --ember:#D28B5F;
  --hairline:color-mix(in srgb, var(--ink) 12%, transparent);
  --ease:cubic-bezier(.22,.68,.16,1);
}

html{
  scroll-behavior:smooth;
  /* Kotva doskočí přesně pod spodní hranu hlavičky. Výšku hlavního řádku
     hlavičky dopočítává site.js do --header-h (mění se podle šířky okna). */
  scroll-padding-top:var(--header-h, 4.5rem);
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
body{ background:var(--paper); color:var(--ink); overflow-x:clip; }

/* Papírové zrno přes celou stránku. Drží to fotky i plochy pohromadě
   a ubírá to tomu "čerstvě vygenerovaný web" dojem. */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Typografie ---------------------------------------------------------- */
/* Roboto je variabilní: osa wdth 75–100, wght 100–900. Držíme plnou šířku,
   řez určuje font-weight přímo v HTML. Osa opsz tu není, proto se nenastavuje. */
.font-display{ font-variation-settings:"wdth" 100; }

/* Užší varianta pro dlouhé nadpisy na úzkých displejích. */
.font-display.is-narrow{ font-variation-settings:"wdth" 90; }

.label{
  font-size:.6875rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.24em; line-height:1;
}

/* --- Odkazy -------------------------------------------------------------- */
.link-u{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .35s var(--ease); padding-bottom:2px;
}
.link-u:hover,.link-u:focus-visible{ background-size:100% 1px; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--clay); outline-offset:3px; border-radius:2px;
}

/* --- Hlavička ------------------------------------------------------------ */
/* Hlavička je bílá s tmavým textem pořád, ne až po odscrollování.
   Třída .is-stuck proto řeší jen stín a sbalení servisní lišty. */
[data-header]{
  background:#fff;
  color:var(--ink);
  border-bottom:1px solid var(--hairline);
  transition:box-shadow .35s var(--ease);
}
[data-header].is-stuck{ box-shadow:0 1px 24px -12px rgb(27 33 29 / .35); }

/* Servisní lišta se při scrollu sbalí — kontakty jsou potřeba hlavně
   na začátku, pak ať nezabírají výšku. */
[data-topbar]{
  overflow:hidden; max-height:3.25rem;
  transition:max-height .4s var(--ease), opacity .3s var(--ease);
}
[data-header].is-stuck [data-topbar]{
  max-height:0; opacity:0; border-bottom-color:transparent;
}

/* --- Zástupné fotky ------------------------------------------------------
   Dokud klient nedodá fotky, nakreslí se stylizované šumavské kopce.
   Jakmile se <img> načte, překryje je. Když soubor chybí, JS ho odstraní
   a zůstane placeholder s názvem souboru — snadno se pozná, co doplnit.  */
/* Pozor: pozicování si drží Tailwind utility v HTML (`relative` / `absolute`).
   Kdyby se position nastavil tady, přebilo by to utility — nevrstvené CSS má
   přednost před @layer utilities, kam Tailwind v4 své utility dává. */
.photo{ overflow:hidden; isolation:isolate; background:#D8D2C3; }
/* V šabloně CMS je fotka zabalená v <picture> (WebP + JPEG záložka),
   proto se cílí na .photo img, ne na přímého potomka. display:contents
   nechá <picture> zmizet z layoutu, takže se obrázek chová jako předtím. */
.photo picture{ display:contents; }
.photo img{ position:relative; z-index:2; display:block; width:100%; height:100%; object-fit:cover; }
.photo::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:
    radial-gradient(118% 78% at 68% 118%, var(--ph-1,#2B382E) 0 46%, #0000 46.4%),
    radial-gradient(138% 66% at 24% 122%, var(--ph-2,#47583F) 0 50%, #0000 50.4%),
    radial-gradient(108% 58% at 88% 126%, var(--ph-3,#7E8C71) 0 55%, #0000 55.4%),
    radial-gradient(circle at 76% 24%, var(--ph-sun,#EBCB93) 0 4.2%, #0000 4.8%),
    linear-gradient(180deg, var(--ph-a,#EAE2D3) 0%, var(--ph-b,#D4CEBE) 58%, var(--ph-c,#C3BEAD) 100%);
}
.photo--dusk { --ph-a:#42414C; --ph-b:#7A6156; --ph-c:#B67F58; --ph-1:#161B18; --ph-2:#232D25; --ph-3:#3B4737; --ph-sun:#F3BC7E; }
.photo--mist { --ph-a:#E6E8E2; --ph-b:#D3D7CE; --ph-c:#BFC5B9; --ph-1:#3B493C; --ph-2:#5C6B56; --ph-3:#8C9783; --ph-sun:#0000; }
.photo--night{ --ph-a:#1C2430; --ph-b:#28313A; --ph-c:#333C40; --ph-1:#0E1311; --ph-2:#161E19; --ph-3:#212B23; --ph-sun:#E8E4CF; }
.photo--warm { --ph-a:#F1E3CB; --ph-b:#E2CBA9; --ph-c:#CBAE8A; --ph-1:#2E3A2C; --ph-2:#4E5B3E; --ph-3:#87906B; --ph-sun:#FFD79A; }

.photo__note{
  position:absolute; z-index:3; inset:auto 0 0 0; padding:.65rem .85rem;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:linear-gradient(to top, #0009, #0000);
  display:flex; justify-content:space-between; gap:1rem;
}
.photo:has(img) .photo__note{ display:none; }

/* Oblouk — odkaz na okno a dveře maringotky */
.arch   { border-radius:50% 50% .5rem .5rem / 30% 30% .5rem .5rem; }
.arch-sm{ border-radius:50% 50% .375rem .375rem / 16% 16% .375rem .375rem; }

/* --- Odhalování při scrollu ---------------------------------------------- */
.js [data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .js [data-reveal]{ opacity:1; transform:none; transition:none }
}

/* --- Běžící pás ---------------------------------------------------------- */
.ticker{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000); mask-image:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000); }
.ticker__track{ display:flex; width:max-content; animation:ticker 48s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes ticker{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none } }

/* --- Formulář ------------------------------------------------------------
   Podtržítková pole místo boxů — méně "administrace", více papírový formulář. */
.inp{
  width:100%; font:inherit; color:inherit; background:transparent;
  /* Safari na iPhonu přiblíží stránku, když má pole písmo menší než 16px.
     Proto tvrdých 16px — na větších displejích už je to jedno. */
  font-size:16px;
  border:0; border-bottom:1px solid var(--hairline); border-radius:0;
  padding:.7rem 0; transition:border-color .25s var(--ease);
}
.inp:hover{ border-bottom-color:color-mix(in srgb, var(--ink) 28%, transparent); }
.inp:focus{ outline:0; border-bottom-color:var(--clay); }
.inp::placeholder{ color:color-mix(in srgb, var(--ink) 38%, transparent); }
.inp:user-invalid{ border-bottom-color:#A8341F; }
select.inp{
  appearance:none; padding-right:1.5rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%231B211C' stroke-width='1.6'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .1rem center;
}
input[type="date"].inp::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.5; }
input[type="date"].inp::-webkit-calendar-picker-indicator:hover{ opacity:1; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- Lightbox ------------------------------------------------------------ */
dialog::backdrop{ background:color-mix(in srgb, var(--forest) 92%, transparent); backdrop-filter:blur(4px); }
dialog[open]{ animation:pop .3s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:scale(.97) } }

/* --- Tisk ---------------------------------------------------------------- */
@media print{
  [data-header],#menu,.ticker,#lightbox,[data-noprint]{ display:none !important; }
  body::after{ display:none; }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.75em; }
}