/* =========================================================================
   Greens — coffee & food · coming-soon
   greens-coffee.cz · zdroj designu: /_designsource/varianta-a.html

   0. Fonty          1. Tokeny        2. Reset        3. Utility
   4. Kostra         5. Logo          6. Eyebrow      7. Claim
   8. Otevření       9. Doplněk      10. Patička     11. Nástup
   12. Větší plochy

   Žádné inline styly — kvůli pozdějšímu překlopu na jhds.WEB.basic,
   kde platí CSP style-src 'self' bez 'unsafe-inline'.
   ========================================================================= */

/* ---- 0. Fonty (self-hostované, žádné CDN) ------------------------------ */

/* Nunito — variabilní, pokrývá 400–800 jedním souborem */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Caveat Brush — markerový rukopis z tiskovin klienta, jen pro claim */
@font-face {
  font-family: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caveatbrush-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caveatbrush-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 1. Tokeny --------------------------------------------------------- */

:root {
  /* Barvy — pipetované z logotypu a letáku (viz _designsource/README.md) */
  --color-ink: #1e3a28;        /* tmavá zeleň logotypu — 10,3:1 na papíru */
  --color-ink-soft: #3e5c48;   /* sekundární text — 6,2:1 */
  --color-paper: #f0e7d9;      /* krémový papír, sladěno s podkladem logotypu */
  --color-paper-deep: #e5d9c6; /* spodní okraj gradientu */
  --color-leaf: #6e8b6a;       /* šalvěj — podtržení odkazů */
  --color-gold: #a8955f;       /* zlatavý akcent — POUZE dekorace (2,4:1) */
  --color-gold-ink: #7f6a35;   /* tentýž tón čitelně — 4,3:1; rezerva pro text na zlaté */
  --color-focus: #1e3a28;

  /* Typografie */
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Caveat Brush', 'Nunito', cursive;

  --size-eyebrow: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --size-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --size-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --size-claim: clamp(2.75rem, 1.6rem + 5.4vw, 6rem);

  --leading-tight: 0.95;
  --leading-snug: 1.25;
  --leading-body: 1.6;
  --tracking-wide: 0.18em;

  /* Rozestupy */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Tvary */
  --radius-sm: 4px;
  --tap-min: 44px;
  --measure: 34ch;

  /* Pohyb */
  --duration-fast: 160ms;
  --duration-slow: 720ms;
  --ease-out: cubic-bezier(0.22, 0.68, 0.32, 1);
}

/* ---- 2. Reset ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background-color: var(--color-paper);
  background-image: linear-gradient(178deg, var(--color-paper) 55%, var(--color-paper-deep) 100%);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

/* Zrno papíru — tiskoviny klienta jsou na strukturovaném papíře.
   Jeden SVG filtr, žádný obrázek ke stažení. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  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.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---- 3. Utility -------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ---- 4. Kostra stránky ------------------------------------------------- */

.page {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5) var(--space-6);
  text-align: center;
}

/* ---- 5. Logo ----------------------------------------------------------- */

.logo {
  width: clamp(148px, 34vw, 220px);
  aspect-ratio: 690 / 670;
}

/* ---- 6. Eyebrow -------------------------------------------------------- */

.eyebrow {
  margin: 0;
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* ---- 7. Claim — nosný prvek stránky ------------------------------------ */

.claim {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-claim);
  line-height: var(--leading-tight);
  letter-spacing: 0.005em;
  /* Řádky na letáku nejsou vodorovné — stejný lehký náklon drží ten rukopis. */
  rotate: -1.6deg;
}

.claim__accent {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.claim__stroke {
  position: absolute;
  left: -2%;
  bottom: -0.16em;
  width: 104%;
  height: 0.2em;
  overflow: visible;
  color: var(--color-gold);
}

.claim__stroke path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
}

/* ---- 8. Termín otevření ------------------------------------------------ */

.opening {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--size-lead);
  font-weight: 800;
  line-height: var(--leading-snug);
}

.opening a {
  color: inherit;
  text-decoration-color: var(--color-leaf);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--duration-fast) var(--ease-out);
}

.opening a:hover {
  color: var(--color-leaf);
}

/* ---- 9. Doplňující věta ------------------------------------------------ */

.lead {
  margin: 0;
  max-width: var(--measure);
  color: var(--color-ink-soft);
}

/* ---- 10. Patička ------------------------------------------------------- */

.contact {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-5);
  text-align: center;
  color: var(--color-ink-soft);
}

.contact::before {
  /* Hvězdička z letáku — jediná dekorace, kterou stránka má. */
  content: '\2726';
  display: block;
  margin-bottom: var(--space-3);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-gold);
}

.contact a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration-color: var(--color-leaf);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--duration-fast) var(--ease-out);
}

.contact a:hover {
  color: var(--color-leaf);
}

.contact__note {
  margin: 0;
  font-size: var(--size-eyebrow);
  letter-spacing: 0.04em;
}

/* ---- 11. Nástup stránky ------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .page > *,
  .contact {
    animation: rise var(--duration-slow) var(--ease-out) backwards;
  }

  .logo { animation-delay: 60ms; }
  .eyebrow { animation-delay: 180ms; }
  .claim { animation-delay: 280ms; }
  .opening { animation-delay: 420ms; }
  .lead { animation-delay: 540ms; }
  .contact { animation-delay: 660ms; }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

/* ---- 12. Větší plochy -------------------------------------------------- */

@media (min-width: 48rem) {
  .page {
    gap: var(--space-6);
    padding-block: var(--space-6);
  }

  .claim {
    max-width: 18ch;
  }

  .logo {
    width: 190px;
  }
}