/* =========================================================
   Varianta „riso“ – světlý zin jako z risografu: modrá + růžová,
   posunutý tisk, rastrový papír, dvoubarevné fotky
   ========================================================= */

:root[data-theme] {
	--bg: #f4efe4;
	--surface: #f4efe4;
	--surface-2: #ffd3e9;
	--ink: #2140c4;
	--muted: #5065bf;
	--line: #2140c4;
	--pink: #ff4fae;

	--tomato: #ff4fae;
	--mustard: #ffe14d;
	--sage: #7fe0a8;
	--berry: #ff8fcb;
	--sky: #8fd3ff;
	--orange: #ffb15c;
	--plum: #b9a2ff;

	--radius: 6px;
	--radius-s: 6px;
	--shadow: 5px 5px 0 var(--pink);
	--shadow-hover: 8px 8px 0 var(--pink);

	--font-display: 'Rubik Mono One', system-ui, sans-serif;
	--font-text: 'Space Grotesk', system-ui, sans-serif;
	--font-hand: 'Space Mono', monospace;
	color-scheme: light;
}

body {
	background-color: var(--bg);
	background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.3px);
	background-size: 7px 7px;
}

h1, h2, h3 { font-weight: 400; letter-spacing: 0; text-transform: uppercase; line-height: 1.05; }
h1, h2 { text-shadow: 3px 3px 0 var(--pink); }
h2 { font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem); }
.hand { font-family: var(--font-hand); font-weight: 700; font-size: 1em; color: var(--pink); text-transform: uppercase; letter-spacing: .1em; }

.topbar { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 2px solid var(--ink); }
.logo-mark { background: var(--pink); border-color: var(--ink); border-radius: 50%; }
.logo-text { font-family: var(--font-display); font-weight: 400; font-size: 1rem; text-transform: uppercase; }
.logo-text small { font-family: var(--font-hand); font-size: .8rem; color: var(--pink); }
.icon-btn { background: var(--mustard); box-shadow: 3px 3px 0 var(--pink); }

.topnav a, .topnav button { font-family: var(--font-hand); text-transform: uppercase; font-size: .8rem; }

/* hero */
.hero h1 { font-size: clamp(2.2rem, 1.2rem + 5vw, 5rem); text-shadow: 5px 5px 0 var(--pink); }
.hero h1 .squiggle { color: var(--ink); background: var(--mustard); padding: 0 .15em; }
.hero h1 .squiggle::after { display: none; }
.hero p { font-family: var(--font-hand); font-size: .9rem; color: var(--ink); }
.hero-doodle { filter: grayscale(1) contrast(2); mix-blend-mode: multiply; }

/* dvoubarevné fotky: šedotón přes růžovou, barva po najetí */
.card-img, .featured-img, .hero-photos img { background: var(--pink); }
.card-img img, .featured-img img, .hero-photos img {
	filter: grayscale(1) contrast(1.15);
	mix-blend-mode: multiply;
	transition: filter .3s, mix-blend-mode .3s;
}
.card:hover .card-img img, .featured:hover .featured-img img { filter: none; mix-blend-mode: normal; }

/* dotyk (bez myši): hover nejde, fotka se probarví sama, když dojede do obrazovky;
   bez podpory scroll animací je rovnou barevná */
@media (hover: none) {
	.card-img img, .featured-img img { filter: none; mix-blend-mode: normal; }
	.card-img, .featured-img { position: relative; background: none; }

	@supports (animation-timeline: view()) {
		.card-img, .featured-img { view-timeline-name: --foto; }
		.card-img::after, .featured-img::after {
			content: '';
			position: absolute;
			inset: 0;
			background: var(--pink);
			mix-blend-mode: multiply;
			opacity: 0;
			pointer-events: none;
			animation: riso-ruzova linear both;
			animation-timeline: --foto;
			animation-range: entry 30% cover 50%;
		}
		.card-img img, .featured-img img {
			animation: riso-seda linear both;
			animation-timeline: --foto;
			animation-range: entry 30% cover 50%;
		}
	}
	.cuisine span { filter: none; mix-blend-mode: normal; }
}
@keyframes riso-ruzova { from { opacity: 1; } to { opacity: 0; } }
@keyframes riso-seda { from { filter: grayscale(1) contrast(1.15); } to { filter: none; } }
.hero-photos img { border-color: var(--ink); border-radius: 6px; }
.hero-photos .p1 { background: var(--mustard); }
.hero-photos .p3 { background: var(--sky); }

.search { border-radius: 6px; background: #fff; }
.search input { font-family: var(--font-hand); }
.search button { border-radius: 6px; background: var(--pink); color: var(--ink); }

.chip {
	border-radius: 6px;
	background: color-mix(in srgb, var(--c, #fff) 45%, #fff);
	box-shadow: 3px 3px 0 var(--pink);
	font-family: var(--font-hand);
	font-weight: 700;
	font-size: .78rem;
	text-transform: uppercase;
	color: var(--ink);
}
.chip:hover { color: var(--ink); }
.chip[aria-current="page"] { background: var(--ink); color: var(--mustard); }

.tag { font-family: var(--font-hand); color: var(--ink); border-radius: 3px; letter-spacing: .05em; }

.card { background: #fff; }
.card-body h3 { font-family: var(--font-text); font-weight: 700; text-transform: none; font-size: 1.1rem; }

.featured { background: var(--mustard); color: var(--ink); }
.featured .tag { background: #fff; }
.featured-body h3 { text-shadow: 4px 4px 0 var(--pink); }
.featured-body .badge { background: var(--pink); color: var(--ink); font-family: var(--font-display); font-size: .8rem; text-transform: uppercase; }

.surprise { background: var(--surface-2); border-color: var(--ink); }

.btn { border-radius: 6px; background: var(--pink); color: var(--ink); font-family: var(--font-hand); text-transform: uppercase; box-shadow: 4px 4px 0 var(--ink); }
.btn:hover { box-shadow: 6px 6px 0 var(--ink); }
.btn.ghost { background: #fff; }

.cuisine { border-radius: 6px; background: #fff; box-shadow: 3px 3px 0 var(--pink); font-family: var(--font-hand); text-transform: uppercase; font-size: .72rem; }
.cuisine span { filter: grayscale(1) contrast(1.4); mix-blend-mode: multiply; }
.cuisine:hover span { filter: none; mix-blend-mode: normal; }

.pager a { border-radius: 6px; background: #fff; font-family: var(--font-hand); }
.pager a[aria-current="page"] { background: var(--ink); color: var(--mustard); }

.reklama { border: 2px dashed var(--ink); background: transparent; border-radius: 6px; color: var(--ink); font-family: var(--font-hand); }

.tabbar { background: var(--ink); color: var(--bg); border-radius: 8px; box-shadow: 5px 5px 0 var(--pink); font-family: var(--font-hand); }
.tabbar [aria-current="page"] { background: var(--pink); color: var(--ink); }
.tabbar span[aria-hidden] { filter: grayscale(1) brightness(2); }

.sheet { border-radius: 8px 8px 0 0; }
.footer { border-top: 2px solid var(--ink); color: var(--ink); font-family: var(--font-hand); font-size: .75rem; }
.footer a { color: var(--ink); }

/* detail */
.recipe-hero img { border-radius: 0 0 6px 6px; }
.recipe-head { background: #fff; border-radius: 6px; }
/* široké písmo – na mobilu menší a dlouhá slova smí zalomit */
.recipe-head h1 { font-size: clamp(1.5rem, 1rem + 4vw, 3.8rem); text-shadow: 4px 4px 0 var(--pink); overflow-wrap: anywhere; hyphens: auto; }
.featured-body h3, .hero h1 { overflow-wrap: anywhere; }
.recipe-head h1 small { font-family: var(--font-hand); text-transform: none; color: var(--ink); }
.crumbs { font-family: var(--font-hand); text-transform: uppercase; color: var(--ink); }

.segmented { border-radius: 6px; background: #fff; }
.segmented button { border-radius: 4px; font-size: .78rem; font-family: var(--font-display); text-transform: uppercase; }
.segmented button[aria-selected="true"] { background: var(--ink); color: var(--mustard); }

.panel { background: #fff; border-radius: 6px; box-shadow: 6px 6px 0 var(--pink); }
.panel h2 { font-size: 1.4rem; }
.progress { font-family: var(--font-hand); color: var(--ink); }
.progress-bar { border-radius: 3px; background: #fff; }
.progress-bar i { border-radius: 0; background: repeating-linear-gradient(45deg, var(--pink) 0 6px, var(--ink) 6px 9px); }
.checklist li + li { border-top-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.checklist input { border-radius: 3px; }
.checklist input:checked { background: var(--pink); }
.checklist input::after { border-color: var(--ink); }
.checklist label:has(input:checked) span { color: var(--muted); text-decoration-color: var(--pink); }

.steps button { border-radius: 6px; background: var(--bg); }
.steps button::before { border-radius: 4px; background: var(--mustard); color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: .9rem; }
.steps button[aria-pressed="true"]::before { background: var(--pink); }
.tip { background: var(--mustard); border-radius: 4px; }
.tip .hand { color: var(--ink); font-size: 1rem; text-transform: none; letter-spacing: 0; }

@media (min-width: 900px) {
	.recipe-hero img { border-radius: 6px !important; box-shadow: 8px 8px 0 var(--pink) !important; }
}