/* Amici a tavola – site design "Quaderno" (chosen from the design preview, design 6).
   Grandma's handwritten recipe notebook: lined paper, red margin line, handwriting headings
   (Caveat) with a book serif (Lora), polaroid photos with tape, index cards, a yellow sticky
   note for Patrick's tips. Loaded after style.css on the public pages only (not the admin).
   Fonts are self-hosted (SIL OFL). No inline styles, no external resources (strict CSP). */
@font-face { font-family: "Caveat"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fonts/caveat-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fonts/lora-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 400 700; font-style: italic; font-display: swap; src: url("../fonts/lora-latin-wght-italic.woff2") format("woff2"); }

:root {
  --bg: #f3ead6; --surface: #fffdf5; --tint: #efe3c8; --ink: #3a2e24; --muted: #7a6a57; --line: #d9c9a6;
  --accent: #a8372a; --accent-dark: #86281d; --accent-soft: #f5dcd3; --olive: #4f6231; --olive-soft: #e3e7cf;
  --blue: #3c5a8a; --tape: rgba(236, 222, 170, .82);
  --radius: 3px; --radius-sm: 3px; --shadow: 0 1px 2px rgba(58, 46, 36, .12), 0 6px 14px rgba(58, 46, 36, .10); --shadow-lg: 0 10px 24px rgba(58, 46, 36, .18);
  --font: "Lora", Georgia, serif; --serif: "Caveat", "Segoe Print", cursive;
}
body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(120, 90, 50, .06) 1px, transparent 1px);
  background-size: 6px 6px;
}
h1, h2, h3 { font-weight: 700; letter-spacing: 0; line-height: 1; color: var(--ink); }
h1 { font-size: clamp(3.2rem, 8vw, 6rem); }
h2 { font-size: clamp(2.4rem, 4.4vw, 3.3rem); }
h3 { font-size: 1.9rem; }
.eyebrow { font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--accent); font-weight: 600; }
a { color: var(--blue); }
.btn { border-radius: 4px; font-family: var(--serif); font-size: 1.4rem; font-weight: 700; min-height: 48px; box-shadow: 0 2px 0 rgba(58, 46, 36, .35) !important; }
.btn--primary { background: var(--accent); }
.btn--ghost, .btn--icon { background: var(--surface); border: 2px dashed var(--muted); color: var(--ink); }
.btn--whatsapp { background: var(--olive); }

/* Header: paper strip with a stitched edge */
.site-header { background: var(--surface); border-bottom: 2px dashed var(--line); }
.site-header.is-scrolled { box-shadow: 0 4px 14px rgba(58, 46, 36, .12); border-bottom-color: var(--line); }
.brand-mark { background: none; color: var(--accent); transform: rotate(-10deg); }
.brand-mark svg { width: 34px; height: 34px; }
.brand-text strong { font-family: var(--serif); font-size: 2.3rem; font-weight: 700; line-height: .9; }
.brand-text small { font-style: italic; }
.main-nav a { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; padding: .1em .6em; }
.main-nav a:hover { background: none; text-decoration: underline wavy var(--accent); }
.main-nav a[aria-current="page"] { background: none; color: var(--accent); text-decoration: underline wavy var(--accent); text-underline-offset: 6px; }
.header-search input { border-radius: 3px; border: 0; border-bottom: 2px solid var(--line); background: transparent; font-style: italic; }
.header-search button { background: none; }

/* Hero: lined page on the left, polaroid on the right */
.hero {
  color: var(--ink); min-height: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  max-width: 1200px; margin: 32px auto; padding: 56px 56px 56px 96px; overflow: visible;
  background: var(--surface) repeating-linear-gradient(180deg, transparent 0 33px, rgba(60, 90, 138, .16) 33px 34px);
  box-shadow: var(--shadow-lg); border-radius: 3px;
}
.hero::after { content: ""; position: absolute; inset: 0 auto 0 64px; width: 2px; background: rgba(168, 55, 42, .45); z-index: 0; }
.hero-bg { display: block; position: relative; inset: auto; order: 2; z-index: 1; background: #fff; padding: 14px 14px 64px; box-shadow: var(--shadow-lg); transform: rotate(3deg); }
.hero-bg::before { content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; margin-left: -60px; background: var(--tape); transform: rotate(-4deg); z-index: 2; }
/* Shape on the photo itself (height:auto), not height:100% of an aspect-ratio frame:
   that is what Safari on the iPhone could not resolve. */
.hero-bg img { animation: none; transform: none; height: auto; aspect-ratio: 4 / 4.2; }
.hero-inner { order: 1; padding: 0; position: relative; z-index: 1; min-width: 0; margin: 0; max-width: none; }
.hero h1 { color: var(--ink); max-width: 11ch; }
.hero .eyebrow { color: var(--accent); }
.hero-text { color: var(--muted); font-style: italic; font-size: 1.15rem; }
.hero-search { background: transparent; box-shadow: none; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; padding-left: 36px; }
.hero-search > svg { left: 4px; }
.hero-search:focus-within { box-shadow: none; border-bottom-color: var(--accent); }
.hero-search input { font-style: italic; }
.hero-tags span { color: var(--muted); font-family: var(--serif); font-size: 1.3rem; }
.hero-tags a { background: var(--tint); color: var(--ink); border: 0; border-radius: 2px; font-family: var(--serif); font-size: 1.25rem; transform: rotate(-1deg); }
.hero-tags a:nth-of-type(even) { transform: rotate(1.5deg); }
.hero-tags a:hover { background: var(--accent-soft); color: var(--ink); }

/* Sections */
.section--tint { background: transparent; }
.section-head { border-bottom: 2px dashed var(--line); padding-bottom: 6px; }
.link-arrow { font-family: var(--serif); font-size: 1.4rem; color: var(--accent); }

/* Courses: polaroids */
.course-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px 26px; padding: 10px 6px; }
.course-tile { aspect-ratio: auto; background: #fff; padding: 10px 10px 0; border-radius: 2px; box-shadow: var(--shadow); color: var(--ink); transform: rotate(-2deg); transition: transform .25s; }
.course-grid li:nth-child(even) .course-tile { transform: rotate(2deg); }
.course-grid li:nth-child(3n) .course-tile { transform: rotate(-.5deg); }
.course-tile:hover { transform: rotate(0) scale(1.04); color: var(--accent); }
.course-tile::after { display: none; }
.course-img { position: static; aspect-ratio: 1 / 1; height: auto; }
.course-tile:hover .course-img { transform: none; }
.course-label { position: static; text-align: center; padding: 8px 0 10px; }
.course-label strong { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.course-label small { opacity: 1; color: var(--muted); font-style: italic; }

/* Cards: index cards with taped photo */
.card-grid { gap: 36px 28px; }
.card { background: var(--surface); border-radius: 2px; box-shadow: var(--shadow); overflow: visible;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(60, 90, 138, .14) 27px 28px); }
.card:nth-child(odd) { transform: rotate(-.8deg); }
.card:nth-child(even) { transform: rotate(.7deg); }
.card:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-lg); }
.card-link { position: relative; }
.card-media { margin: 12px 12px 0; overflow: visible; border: 6px solid #fff; box-shadow: 0 1px 3px rgba(58, 46, 36, .2); }
.card-media::before { content: ""; position: absolute; top: -12px; left: 50%; width: 80px; height: 24px; margin-left: -40px; background: var(--tape); transform: rotate(-3deg); z-index: 2; }
.card-img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.card:hover .card-img { transform: none; }
.card-course { background: none; color: var(--accent); font-family: var(--serif); font-size: 1.25rem; font-weight: 700; top: auto; bottom: -10px; left: auto; right: -6px; background: var(--surface); padding: 0 .5em; transform: rotate(-4deg); box-shadow: var(--shadow); }
.card-body { padding: 16px 18px 18px; }
.card-title { font-family: var(--serif); font-size: 2rem; font-weight: 700; line-height: .95; }
.card-meta { font-style: italic; }
.card-tags li { background: none; color: var(--olive); font-style: italic; padding: 0; }
.card-tags li::before { content: "#"; }
.level i { background: var(--line); }
.level--1 i:nth-child(1), .level--2 i:nth-child(-n+2), .level--3 i { background: var(--accent); }
.img-placeholder { background: var(--tint); }

/* Chips */
.chip { border-radius: 2px; border: 0; background: var(--tint); font-family: var(--serif); font-size: 1.25rem; }
.chip:hover { background: var(--accent-soft); color: var(--ink); }
.chip--course { background: var(--accent); color: #fff; }
.section--intro .intro { background: var(--surface); padding: 40px; box-shadow: var(--shadow); transform: rotate(-.3deg); }
.intro-text p { font-style: italic; color: var(--ink); }
.intro-tags h3 { font-family: var(--serif); font-size: 1.8rem; letter-spacing: 0; text-transform: none; color: var(--accent); }

/* Recipe list */
.filters-panel { background: var(--surface); box-shadow: var(--shadow); border-radius: 2px; }
.filters-search input, .sort select { border-radius: 2px; border: 0; border-bottom: 2px solid var(--line); background: transparent; font-style: italic; }
.filters fieldset { border-top: 2px dashed var(--line); }
.filters legend { font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--accent); font-weight: 700; }
.choice input:checked + span { background: var(--ink); }
.choice-list--chips .choice span { border-radius: 2px; border-style: dashed; }
.active-filters a { border-radius: 2px; background: var(--accent-soft); font-style: italic; }
.page-head h1 { color: var(--ink); }
.empty { background: var(--surface); box-shadow: var(--shadow); }

/* Recipe page */
.recipe-head { grid-template-columns: 1.1fr 1fr; }
.recipe-intro h1 { font-size: clamp(3rem, 7vw, 5.2rem); }
.recipe-summary { font-style: italic; }
.recipe-media { background: #fff; padding: 14px 14px 56px; border-radius: 2px; box-shadow: var(--shadow-lg); transform: rotate(2deg); overflow: visible; aspect-ratio: auto; }
.recipe-media::before { content: ""; position: absolute; top: -14px; left: 30px; width: 110px; height: 30px; background: var(--tape); transform: rotate(-6deg); z-index: 2; }
.recipe-media { position: relative; }
.recipe-img { aspect-ratio: 4 / 3; height: auto; }
.fact { background: transparent; border: 0; border-bottom: 2px dashed var(--line); border-radius: 0; padding: 4px 14px 6px 0; }
.fact--total { background: transparent; }
.fact dt { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--accent); font-weight: 700; }
.fact dd { font-style: italic; }
.ingredients-card {
  background: var(--surface) repeating-linear-gradient(180deg, transparent 0 39px, rgba(60, 90, 138, .16) 39px 40px);
  box-shadow: var(--shadow); border-radius: 2px; padding-left: 40px; position: relative;
}
.ingredients-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 26px; width: 2px; background: rgba(168, 55, 42, .45); }
.ingredients h2 small { font-family: var(--font); }
.ingredients h3, .step-group { font-family: var(--serif); font-size: 1.6rem; letter-spacing: 0; text-transform: none; color: var(--accent); font-weight: 700; }
.ingredient-list li + li { border-top: 0; }
.ingredient-list label { padding: 8px 0; min-height: 40px; }
.ingredient-list input { border-radius: 2px; border-color: var(--muted); }
.ingredient-list input:checked { background: var(--olive); border-color: var(--olive); }
.step { border-radius: 2px; }
.step:hover { background: rgba(255, 253, 245, .7); }
.step-no { background: none !important; color: var(--accent); border: 2px solid var(--accent); font-family: var(--serif); font-size: 1.6rem; font-weight: 700; border-radius: 48% 52% 45% 55%; }
.step input:checked ~ .step-no { color: var(--olive); border-color: var(--olive); }
.step-text { font-size: 1.06rem; }
.notes { background: #fff3a8; border: 0; border-radius: 0; box-shadow: var(--shadow); transform: rotate(-1.2deg); position: relative; }
.notes::before { content: ""; position: absolute; top: -12px; left: 40%; width: 90px; height: 26px; background: var(--tape); transform: rotate(3deg); }
.notes h2 { color: var(--ink); }
.notes p { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; }
.share-box { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); border: 2px dashed var(--line); border-radius: 2px; }
.share-box h2 { color: var(--ink); }
.share-box p { color: var(--muted); font-style: italic; }
.share-box .btn--ghost { color: var(--ink); border-color: var(--muted); }
.related { background: transparent; }

/* Contact */
.form-card { background: var(--surface) repeating-linear-gradient(180deg, transparent 0 33px, rgba(60, 90, 138, .12) 33px 34px); box-shadow: var(--shadow-lg); border-radius: 2px; }
.field input[type="text"], .field input[type="email"], .field textarea { border-radius: 3px; border: 1px solid var(--line); border-bottom: 2px solid var(--muted); background: #fffdf8; }
.field input:focus, .field textarea:focus { border-color: var(--accent); background: #fff; }
.field label { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; }
.lead { font-style: italic; }
.contact-points svg { background: var(--tint); border-radius: 50%; }

/* Footer: the notebook's leather cover */
.site-footer { background: #4a3527; color: #e9dcc2; }
.site-footer a { color: #fff6df; }
.footer-title { font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: #f0c9a0; }
.brand--footer .brand-mark { color: #f0c9a0; }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 32px 18px 32px 46px; margin: 16px 12px; }
  .hero-inner { width: auto; }
  .hero::after { left: 30px; }
  .hero-bg { order: 0; transform: rotate(1.5deg); }
  .hero-bg img { aspect-ratio: 4 / 3; }
  .recipe-head { grid-template-columns: 1fr; }
  .recipe-media { transform: rotate(1deg); }
}
@media (max-width: 720px) {
  .card:nth-child(odd), .card:nth-child(even) { transform: none; }
  .course-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .course-label strong { font-size: 1.5rem; }
}
html, body { overflow-x: clip; }

/* Print: a clean page, no tilted photos, tape or paper texture */
@media print {
  body { background: #fff !important; background-image: none !important; }
  .hero-bg, .recipe-media, .card, .course-tile, .notes, .section--intro .intro { transform: none !important; box-shadow: none !important; }
  .recipe-media { padding: 0; background: none; }
  .recipe-media::before, .notes::before, .card-media::before, .hero-bg::before { display: none !important; }
  .ingredients-card, .form-card { background: #fff !important; }
  .ingredients-card::before { display: none; }
  .ingredients-card { padding-left: 16px; }
}
.lang-switch a { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0; }
.lang-switch a[aria-current="true"] { background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.recipe-actions .btn { font-size: 1.22rem; padding-inline: 1.1em; }
/* The icon-only buttons (print, copy link) keep their square shape: the padding above
   would eat the whole button and squeeze the icon to zero width. */
.recipe-actions .btn--icon { padding-inline: 0; width: 46px; flex: none; }
.recipe-actions .btn--icon svg { width: 22px; height: 22px; }

/* Extra photos: polaroids like the main one */
.photo { background: #fff; padding: 8px 8px 0; border-radius: 2px; box-shadow: var(--shadow); }
.photo img { border-radius: 0; }
.photo span { position: static; color: var(--muted); background: none; padding: 6px 2px 8px; font-family: var(--serif); font-size: 1.15rem; text-align: center; }
.photo-grid .photo:nth-child(odd) { transform: rotate(-1deg); }
.photo-grid .photo:nth-child(even) { transform: rotate(1.2deg); }
.lightbox figcaption { font-family: var(--serif); font-size: 1.4rem; }

/* Cooking mode on the notebook paper */
.cook { background: var(--surface) repeating-linear-gradient(180deg, transparent 0 33px, rgba(60, 90, 138, .12) 33px 34px); }
.cook-step { font-family: var(--font); }
.cook-progress { font-family: var(--serif); font-size: 1.35rem; color: var(--accent); }
.cook-ingredients summary { font-family: var(--serif); font-size: 1.35rem; }

/* Update 006 on the notebook paper */
.shop-link { background: none; border: 2px dashed var(--line); }
.ingredient-group h2, .shop-group h2, .fridge-group legend { font-family: var(--serif); font-size: 1.6rem; color: var(--accent); font-weight: 700; }
.fridge-teaser-inner { background: var(--surface); padding: 26px 30px; box-shadow: var(--shadow); border-radius: 2px;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(60, 90, 138, .12) 27px 28px); }
.fridge-use, .fridge-all { font-family: var(--serif); font-size: 1.15rem; }
.shop-list .shop-name { font-size: 1.05rem; }
.timer-row { font-family: var(--serif); font-size: 1.15rem; }
.more-with p { font-family: var(--serif); font-size: 1.2rem; color: var(--accent); }
.shop-for h2 { font-family: var(--serif); font-size: 1.6rem; color: var(--accent); }
.shop-recipe a { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; }
.dose-btn { border-style: dashed; font-family: var(--serif); font-size: 1.5rem; }
.dose-value { font-family: var(--serif); font-size: 1.5rem; color: var(--accent); }