@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;
/*
 * ProfiStranka baseline central.css
 * Color placeholders #00C27A, #00a868,
 * #F9F7F4, #F0EBDF are substituted by
 * Profistranka.Service.Appearance.CssPipeline before NUglify minification.
 * Custom site CSS (WebsiteAppearance.StyleContent) is appended after this file.
 *
 * This file is intentionally minimal: only essential box-model and layout
 * resets that tenants should not have to repeat. All opinionated typography,
 * color, background and component defaults belong in StyleContent.
 */

:root {
    --primary: #00C27A;
    --primary-hover: #00a868;
    --secondary: #F9F7F4;
    --secondary-hover: #F0EBDF;
    --text: #222;
    --muted: #666;
    --border: #ddd;
}

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

html, body {
    margin: 0;
    padding: 0;
}

/*
 * Height model — full-bleed section patterns (hero, cover-bg, filtered) fill the
 * viewport but GROW with content. They are sized in vh (not %) so they do NOT depend on
 * a definite parent height — that lets <main> keep its natural auto height.
 *
 * Why not %/main height: the inline min-height:X% on these sections only resolves if an
 * ancestor has a definite height. An earlier fix set html,body,main{height:100%} to give
 * it one — but that pinned <main> to exactly one viewport. Its content then overflowed
 * the box and the <footer> (next flow sibling) started at the viewport bottom and painted
 * OVER everything below the hero, so the whole page looked blank below the fold.
 *
 * Sizing the inner element directly in vh keeps document flow intact: <main> auto-grows,
 * the footer comes after the content, nothing overlaps, and min-height (never a fixed
 * height) means content-tall sections are never clipped. !important overrides the inline
 * min-height:X% which would otherwise compute to 0 against the now-auto-height parent.
 *
 * The .filtered rule is scoped to sections that carry an inline min-height — that is the
 * original's own signal that a section is meant to be a full-bleed banner. A bare .filtered
 * (no inline min-height) is just an overlay-tinted content section (e.g. a dark box centered
 * over a photo); forcing 90vh on it leaves the inner tinted box short of the section edges,
 * exposing a lighter band of the section's own tint above/below it. Sizing it to content
 * makes the inner box fill the section, matching the original.
 */
main > div.section > header { min-height: 90vh !important; }
main > div.section > section.cover-bg { min-height: 80vh !important; }
main > div.section > section.filtered[style*="min-height"] { min-height: 90vh !important; }

/* Photo gallery (folder-as-gallery-page) — edge-to-edge responsive image grid. */
.gallery-section { background: #000; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.gallery-grid .gallery-item { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #111; }
.gallery-grid .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.gallery-grid .gallery-item:hover img { transform: scale(1.06); }
@media (max-width: 992px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/*
 * Daily menu (denní menu) — structural defaults matching the original mstranka markup so a
 * migrated <daily-menu> renders identically. Only layout/alignment lives here; brand color of
 * the category <h3> comes from each tenant's custom StyleContent (e.g. Chapadlo's gold), exactly
 * as on the live site. Classes: .dailyMenu(.weeklyMenu) > .dailyMenuWrapper > .dm-day/.dm-name +
 * .dailyMenuTable with td-cislo (Gramáž), td-popis (Název), td-cena (Cena).
 */
.dailyMenuTable { border-collapse: collapse; }
.dailyMenuTable td { font-size: 15px; text-align: left; vertical-align: top; padding: 5px; min-width: 0; }
.dailyMenuTable td:first-child { text-align: right; width: 35px; }
.dailyMenuTable td:last-child { text-align: right; width: 70px; }
.dailyMenuTable h3 { font-size: 20px; text-transform: uppercase; margin: 0; }
.dailyMenuTable td h3 { text-align: center; }
.dm-day { font-size: 20px; text-transform: lowercase; text-align: center; }

500;600;700;800;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  --primary: 162 100% 38%;
  --foreground: 215 43% 14%;
  --background: 40 25% 97%;
  --secondary: 38 30% 93%;
  --muted: 40 15% 93%;
  --muted-foreground: 215 15% 50%;
  --border: 215 20% 88%;
  --card: 0 0% 100%;
  --accent: 37 91% 55%;
  --heat-color: 24 90% 52%;
  --vape-color: 199 89% 48%;
  --pouch-color: 263 70% 55%;
  --quit-color: 142 76% 36%;
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background-color: hsl(40, 25%, 97%);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', system-ui, sans-serif; }
.font-outfit { font-family: 'Outfit', system-ui, sans-serif; }
.font-dm-sans { font-family: 'DM Sans', system-ui, sans-serif; }

.tag-heat { background: hsla(24, 90%, 52%, 0.12); color: hsl(24, 90%, 52%); }
.tag-vape { background: hsla(199, 89%, 48%, 0.12); color: hsl(199, 89%, 48%); }
.tag-pouch { background: hsla(263, 70%, 55%, 0.12); color: hsl(263, 70%, 55%); }
.tag-quit { background: hsla(142, 76%, 36%, 0.12); color: hsl(142, 76%, 36%); }

.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.section { padding: 0 !important; margin: 0 !important; }

.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.translate-y-4 { transform: translateY(1rem); }
.translate-y-8 { transform: translateY(2rem); }
.translate-y-12 { transform: translateY(3rem); }
.translate-y-0 { transform: translateY(0); }
.transition-all { transition: all; }
.duration-700 { transition-duration: 700ms; }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }

/* Perex clamp */
.perex-clamp {
  max-height: 3.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.perex-clamp * {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
.perex-clamp h1, .perex-clamp h2, .perex-clamp h3, .perex-clamp h4,
.perex-clamp img, .perex-clamp figure { display: none !important; }

/* Force truncate perex inside article-link cards */
.article-link > div > p,
.article-link > div > div > p {
  max-height: 3.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.8125rem;
  color: hsl(215, 15%, 50%);
  line-height: 1.5;
}

/* === PROSE CUSTOM — Article body typography === */
.prose-custom {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #334155;
}
.prose-custom h2 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: hsl(215, 43%, 14%);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.prose-custom h3 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(215, 43%, 14%);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}
.prose-custom h4 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(215, 43%, 14%);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.prose-custom p {
  margin-bottom: 1.25rem;
}
.prose-custom ul, .prose-custom ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.prose-custom li {
  margin-bottom: 0.5rem;
}
.prose-custom strong, .prose-custom b {
  font-weight: 700;
  color: hsl(215, 43%, 14%);
}
.prose-custom a {
  color: hsl(162, 100%, 38%);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose-custom a:hover {
  color: hsl(162, 100%, 30%);
}
.prose-custom img {
  border-radius: 0.75rem;
  margin: 1.5rem 0;
  max-width: 100%;
}
.prose-custom blockquote {
  border-left: 3px solid hsl(162, 100%, 38%);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: #64748b;
  font-style: italic;
}
.prose-custom hr {
  border: none;
  border-top: 1px solid hsl(215, 20%, 88%);
  margin: 2rem 0;
}
.prose-custom table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.prose-custom th, .prose-custom td {
  border: 1px solid hsl(215, 20%, 88%);
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
}
.prose-custom th {
  background: hsl(40, 25%, 97%);
  font-weight: 600;
}