/* ---- contrast ---- */
/* Text contrast to WCAG 2.x AA (4.5:1 normal text, 3:1 large text). Only colours change; sizes,
   fonts and layout stay as they are. Classes here are the ones already in the purged Tailwind CSS,
   each used only by the elements named in the comment (checked against the bundle). */

/* Sage eyebrows "O nás", "O projektu", "Výrobní zázemí", "Astrafood a.s. – klíčové informace":
   #8FA67A (2.3–2.5:1 on cream) -> deeper sage of the same hue, 5.2:1 on cream, 4.9:1 in the tinted box */
.text-sage { color: #596E44; }

/* Hero subtitle "Spojujeme čerstvost…" (black/45 = 3.3:1) */
.text-black\/45 { color: rgba(0, 0, 0, 0.6); }
/* "Aktuálně" label on the frosted card next to the bowl (black/40 = 2.6:1) */
.text-black\/40 { color: rgba(0, 0, 0, 0.62); }

/* "Silné výrobní zázemí" paragraphs (charcoal/60 = 4.46:1, charcoal/55 = 3.8:1) */
.text-charcoal\/60 { color: rgba(26, 26, 26, 0.72); }
.text-charcoal\/55 { color: rgba(26, 26, 26, 0.68); }
/* stat pill labels "na trhu", "výrobků/měsíc" … on salmon (charcoal/65 = 4.0:1) */
.stat-pill .text-charcoal\/65 { color: rgba(26, 26, 26, 0.82); }

/* "astrafood.cz" link hover: salmon text on cream is 1.9:1 -> deeper salmon, 4.8:1 (border stays salmon) */
.hover\:text-salmon:hover { color: #995F3A; }

/* contact form placeholders "Vaše jméno", "vas@email.cz", "Váš dotaz…" (white/20 = 1.9:1) */
.placeholder-white\/20::-moz-placeholder { color: rgba(255, 255, 255, 0.52); }
.placeholder-white\/20::placeholder { color: rgba(255, 255, 255, 0.52); }

/* ---- hero-topbar ---- */
/* hero-topbar: solid header, readable announcement bar, Simona's face kept clear of the bowl.
   Selectors use only structure that exists in the original bundle (no new class names in the bundle). */

/* 1. Header: the scrolled look (cream, blur, subtle shadow) at every scroll position, slightly more opaque,
      so the menu never sits directly on Simona's hair or on dark sections. */
#root header.fixed {
  background-color: rgba(250, 246, 240, 0.97) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
/* the mobile menu panel uses bg-cream/98, which the purged stylesheet does not contain */
.bg-cream\/98 { background-color: rgba(250, 246, 240, 0.98); }

/* 2. Announcement bar (fixed under the header): a little larger text, same bar height on desktop. */
#root div.fixed.z-40 p.font-body { font-size: 0.72rem !important; }
#root div.fixed.z-40 p.font-body > span.rounded-full { font-size: 0.66rem !important; }
@media (max-width: 719.98px) {
  /* up to two lines on phones / narrow tablets: slightly smaller step and tighter padding,
     so a wrapped bar still ends above the hero (hero content starts at 7rem) */
  #root div.fixed.z-40 p.font-body { font-size: 0.68rem !important; padding-top: 0.375rem; padding-bottom: 0.375rem; }
  #root div.fixed.z-40 p.font-body > span.rounded-full { font-size: 0.62rem !important; }
}
@media (max-width: 359.98px) {
  /* very small phones: keep the original text size, otherwise the bar wraps to a third line */
  #root div.fixed.z-40 p.font-body { font-size: 0.63rem !important; }
  #root div.fixed.z-40 p.font-body > span.rounded-full { font-size: 0.58rem !important; }
}

/* 3. Desktop hero: Simona's photo starts below the header + bar and is never taller than 66vw,
      so her face always stays right of the bowl column (and its ring, glow and cards). */
@media (min-width: 1024px) {
  #root section div:has(> img[src*="simona-trimmed"]) {
    height: min(calc(100% - 104px), 66vw) !important;
  }
}
/* narrow desktops: the bowl column is 10% smaller so its ring clears the intro paragraph */
@media (min-width: 1024px) and (max-width: 1149.98px) {
  #root section div.flex-shrink-0:has(img[width="480"]) { scale: 0.9; }
}
/* tall desktop windows (portrait or square): Simona is height-capped and stands at the bottom, so the
   headline + bowl row is centred vertically to keep the bowl beside her instead of far above her */
@media (min-width: 1024px) and (max-aspect-ratio: 6/5) {
  #root section > div.z-10.flex-col:has(h1) { justify-content: center; }
}
/* very small phones (< 360 px): the mobile bowl and the product thumbnails are 25% smaller and sit further
   right, so they no longer cover "Jídlo které dává smysl", the intro text and the buttons */
@media (max-width: 359.98px) {
  #root section div.lg\:hidden.absolute.right-4:has(img[width="140"]) { scale: 0.75; transform-origin: top right; right: 0.5rem; }
  #root section div.lg\:hidden.absolute.flex-col:has(img[width="60"]) {
    scale: 0.75; transform-origin: top center; left: calc(100% - 96px) !important; top: 128px !important;
  }
}

/* ---- film ---- */
/* Poké by Simona film: the hero bowl opens the 3D film (/poke/) in a full-screen overlay.
   enhance.js marks the bowl box with [data-rm-film], adds the .rm-film-hint button into it
   and creates the .rm-film dialog on the first open. */

/* ---- the bowl: clickable, with a small play hint that sits in the bowl's own box ----
   The four product images are scaled 1.55x with wide transparent margins, so their boxes spill far
   outside the bowl (over Simona on desktop, over the first thumbnail on phones). They therefore take
   no clicks; a round hit area the size of the visible bowl does, and the click lands on the bowl box. */
[data-rm-film] { pointer-events: none; }
[data-rm-film] > img { pointer-events: none; }
[data-rm-film]::before {
  content: "";
  position: absolute;
  left: -5%;
  top: -5%;
  width: 110%;
  height: 110%;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
}

/* phones (no cards around the 140 px bowl): bottom centre, overlapping the bowl's lower rim and
   staying inside its box, so it never reaches the product thumbnails that start 8 px below the box */
.rm-film-hint {
  --rm-hint-x: -50%;
  --rm-hint-y: 0px;
  position: absolute;
  left: 50%;
  bottom: -4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 10px 3px 3px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  color: #1A1A1A;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(var(--rm-hint-x), var(--rm-hint-y));
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.rm-film-hint-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #1A1A1A;
  color: #FAF6F0;
}
.rm-film-hint-i svg { display: block; width: 8px; height: 8px; margin-left: 2px; }
[data-rm-film]:hover .rm-film-hint,
.rm-film-hint:hover {
  --rm-hint-y: -2px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.rm-film-hint:focus:not(:focus-visible) { outline: none; }
/* two-tone ring: visible over the white page and over the black bowl rim */
.rm-film-hint:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 5px #1A1A1A; }

/* small phones (360-380 px): the "Jídlo které dává smysl" heading reaches under the pill's left end */
@media (max-width: 380.98px) {
  .rm-film-hint { bottom: 12px; }
}

/* desktop bowl: lower left, level with the "Aktuálně" card at the lower right (centred, it would
   run into that card at 1280 px and narrower); still inside the bowl box, so it moves with the bowl */
@media (min-width: 1024px) {
  .rm-film-hint {
    --rm-hint-x: 0px;
    left: 4%;
    bottom: 8px;
    gap: 8px;
    padding: 5px 14px 5px 5px;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
  }
  .rm-film-hint-i { width: 24px; height: 24px; }
  /* short windows: bowl-place.js sets this when the pill would end below the first screen */
  .rm-film-hint.rm-film-hint--top { top: 10%; bottom: auto; left: auto; right: 4%; }
  .rm-film-hint-i svg { width: 10px; height: 10px; }
}

/* ---- the film overlay ----
   A slim bar of the film's own black carries the close button and the iframe fills everything below.
   A close button floating over the film would always sit on the film's own interface: its
   "POKÉ BY SIMONA" label (top right, every stage) and, on phones, the full-width "Sortiment" panel. */
.rm-film {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 2147483000; /* above the header (z-50), the bar (z-40) and the cookie dialogs */
  display: flex;
  flex-direction: column;
  background: #0b0d0c;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.rm-film.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.32s ease, visibility 0s linear 0s;
}
.rm-film-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 56px;
  box-sizing: content-box;
  padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
  background: #050608; /* between the film's loader (#0b0d0c) and its vignetted top edge (~#010206): no visible seam */
}
.rm-film-frame {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #0b0d0c;
  color-scheme: normal;
}
.rm-film-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.rm-film-close svg { display: block; width: 16px; height: 16px; }
.rm-film-close:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.85); }
.rm-film-close:focus:not(:focus-visible) { outline: none; }
.rm-film-close:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rm-film,
  .rm-film.is-open,
  .rm-film-hint,
  .rm-film-close { transition: none; }
  [data-rm-film]:hover .rm-film-hint,
  .rm-film-hint:hover { --rm-hint-y: 0px; }
}

/* ---- topbar-flow ---- */
/* topbar-flow (user decisions 26. 10. 2026): the green "Real Meal Global" bar is the first thing on the page and
   scrolls away with it; the menu sits right under it and then sticks to the top (CSS sticky, no JS); the hero
   starts right under the menu; Simona is bigger and the bowl sits in front of her (bowl-place.js).
   Selectors are more specific than hero-topbar.css, so the patch order does not matter.
   Browsers without overflow:clip (Safari < 16) keep the original layout (bar fixed under the fixed menu). */

@supports (overflow-x: clip) {
  /* the site sets html,body{overflow-x:hidden}; on body that creates a scroll container and breaks sticky */
  body { overflow-x: clip !important; }

  /* the app wrapper becomes a column so the bar can come first; header and bar take part in the flow */
  #root > div.min-h-screen { display: flex; flex-direction: column; }
  #root > div.min-h-screen > div.fixed.z-40 {            /* the bar */
    order: -1;
    position: relative !important;
    top: auto !important;
  }
  #root > div.min-h-screen > header.fixed {               /* the menu: sticky instead of fixed */
    position: sticky !important;
    top: 0 !important;
    transition: background-color .2s ease, box-shadow .2s ease !important;
  }
  /* the mobile menu panel opens over the page (as before), it does not push the hero down */
  #root > div.min-h-screen > header.fixed > div.md\:hidden {
    position: absolute; left: 0; right: 0; top: 100%;
  }
  /* the hero follows the menu directly; the content no longer needs the old 7rem top padding */
  #root main > section:first-child > div.z-10.flex-col {
    padding-top: 1.5rem !important;
  }
  @media (min-width: 1024px) {
    /* one screen tall below bar (38 px, while it is there) + menu, but no taller than 68vw (tall windows would
       get a large empty area) */
    #root main > section:first-child.lg\:min-h-screen {
      min-height: min(calc(100vh - 64px), 68vw);
    }
    #root:has(div.fixed.z-40) main > section:first-child.lg\:min-h-screen {
      min-height: min(calc(100vh - 64px - 38px), 68vw);
    }
    /* hero-topbar centred the row in tall windows; with the capped height the headline starts under the menu */
    #root main > section:first-child > div.z-10.flex-col:has(h1) { justify-content: flex-start !important; }
  }
}

/* anchors (menu links, the film's end button → #kontakt) land below the menu */
#root section[id] { scroll-margin-top: 64px; }

@media (min-width: 1024px) {
  /* Simona ~18 % bigger, head at the top of the hero, never wider than half the window;
     her lower body is cropped at the hero's bottom */
  #root main > section:first-child.lg\:min-h-screen { overflow: hidden !important; }
  #root main > section:first-child div:has(> img[src*="simona-trimmed"]) {
    top: 0 !important;
    bottom: auto !important;
    height: min(118%, 106vw) !important;
  }
}