/*
Theme Name: Topoli
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: topoli
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* === reset === */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	background-image: url('assets/img/watermark.svg');
	background-repeat: repeat;
	background-position: top center;
	background-size: 1244px auto;
}

/* === header === */
/* the template-part wrapper is only as tall as the header, which would clip position:sticky
   to its own 63px box; display:contents hands the sticky containing block to .wp-site-blocks */
.wp-site-blocks > .wp-block-template-part:first-child { display: contents; }
.wp-site-blocks > .wp-block-template-part:has(> .site-header) { display: contents; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(245, 236, 222, 0.22); }
.site-header__inner { max-width: 1140px; margin: 0 auto; width: 100%; padding-left: clamp(1.25rem, 5vw, 3rem); padding-right: clamp(1.25rem, 5vw, 3rem); }
.site-header__mark { margin: 0; }
.site-header__mark a { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--turquoise); }
.site-header__nav { flex-grow: 1; justify-content: center; }
.site-header .site-header__nav a:where(:not(.wp-element-button)) { position: relative; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 1rem; letter-spacing: 0.03em; text-transform: capitalize; text-decoration: none; color: var(--wp--preset--color--panel); padding-bottom: 2px; transition: color 0.2s; }
/* pomegranate flourish that fades in to the left of the hovered nav item */
.site-header .site-header__nav a::after,
.site-header .site-header__phone a::after { content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 5px; width: 14px; height: 15px; background: url('assets/img/phone.svg') center/contain no-repeat; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.site-header .site-header__nav a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--saffron); }
.site-header .site-header__nav a:hover::after,
.site-header .site-header__phone a:hover::after { opacity: 1; }
.site-header__right { align-items: center; gap: 1rem; }
.site-header__phone { margin: 0; }
.site-header__phone a { position: relative; font-size: 0.86rem; letter-spacing: 0.06em; font-weight: 600; text-decoration: none; color: var(--wp--preset--color--panel); white-space: nowrap; transition: color 0.2s; }
.site-header__phone a:hover { color: var(--wp--preset--color--saffron); }
.site-header__order { margin: 0; }
.site-header__order .wp-element-button { background: var(--wp--preset--color--pomegranate); border-radius: 999px; font-weight: 700; font-size: 1rem; padding: 0.5rem 1.1rem; }
.site-header__order .wp-element-button:hover { background: var(--wp--preset--color--saffron); color: var(--wp--preset--color--ink); }
@media (max-width: 600px) { .site-header__phone { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.site-header__nav a, .site-header__nav a::after,
	.site-header__phone a, .site-header__phone a::after { transition: none; }
}

/* === footer === */
.site-footer { padding: 2.4rem 1.5rem 3rem; text-align: center; border-top: 1px solid #322c27; line-height: 1.4; }
.site-footer__mark { margin: 0 auto 0.6rem; }
.site-footer__allergen { max-width: 46rem; margin: 0 auto 0.6rem; font-size: 0.82rem; line-height: 1.35; font-style: italic; }
.site-footer__halal { margin-top: 0.35rem; font-weight: 600; letter-spacing: 0.02em; font-style: normal; }
.site-footer__copy { font-size: 0.82rem; margin: 0; }

/* === hero === */
.hero-section { display: flex; align-items: center; justify-content: center; }
.hero-section .wp-block-cover__inner-container { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.hero-section__mark img { display: block; margin: 0 auto; animation: hero-zoom 16s ease-in-out infinite alternate; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hero-section__mark img { animation: none; } }
.hero-section__ornament { margin-top: 1.3rem !important; margin-bottom: 0.2rem !important; opacity: 0.55; }
.hero-section__tag { max-width: 33rem; margin: 1.2rem auto 1.8rem !important; color: #f3ece1; font-size: 1.2rem; font-family: var(--wp--preset--font-family--body); }
.hero-section .wp-block-buttons { justify-content: center; }
.hero-section .is-style-outline .wp-block-button__link { border-color: rgba(255,255,255,.8); }
/* original's final cascade: every red and ghost button goes saffron with dark ink text on hover */
.hero-section .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--saffron); border-color: var(--wp--preset--color--saffron); color: var(--wp--preset--color--ink) !important; }
.wp-block-button .wp-element-button { border-radius: 7px; font-family: var(--wp--preset--font-family--body); font-weight: 700; letter-spacing: 0.04em; text-transform: capitalize; }
.wp-block-button .has-pomegranate-background-color.wp-element-button:hover { background-color: var(--wp--preset--color--saffron) !important; border-color: var(--wp--preset--color--saffron); color: var(--wp--preset--color--ink) !important; }

/* === sections === */
.note-bar { background: var(--wp--preset--color--panel); border-top: 1px solid var(--wp--preset--color--saffron); border-bottom: 1px solid var(--wp--preset--color--saffron); }
.note-bar p { padding: .7rem 1rem; margin: 0; font-family: var(--wp--preset--font-family--body); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--pomegranate); }
.section { padding: 3.6rem 0; scroll-margin-top: 66px; }
.section-title { font-size: clamp(2rem, 6vw, 4rem); color: var(--wp--preset--color--pomegranate); margin-bottom: 0 !important; }
.section-divider { margin-top: .6rem !important; margin-bottom: 0 !important; opacity: .75; }
.section-about p { font-size: 1.18rem; color: var(--wp--preset--color--ink-soft); }
.park-note { font-size: 1rem; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--panel); border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: .7rem 1.1rem; display: inline-block; }
.park-note strong { color: var(--wp--preset--color--pomegranate); }
.park-link { display: inline-block; margin-left: .3rem; font-size: .9rem; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--saffron); border: 1px solid var(--wp--preset--color--saffron); border-radius: 6px; padding: .28rem .75rem; text-decoration: none; font-weight: 700; }
.park-link:hover { background: var(--wp--preset--color--pomegranate); border-color: var(--wp--preset--color--pomegranate); color: #fff; }
.about-meta { margin-top: 1.4rem; gap: .3rem !important; }

/* === signature === */
.signature-section { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.dish-grid { gap: 1.4rem !important; margin-top: 1.6rem; flex-wrap: wrap !important; justify-content: center; }
.dish-grid .wp-block-column { flex-basis: calc(33.333% - 0.95rem) !important; }
.dish { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: 8px; overflow: hidden; }
.dish__photo { margin: 0 !important; border-bottom: 1px solid var(--wp--preset--color--line); }
.dish__photo img { width: 100%; display: block; }
.dish__name { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 1.4rem; line-height: 1.2; margin: .45rem 1.1rem .5rem; text-transform: capitalize; color: var(--wp--preset--color--pomegranate); }
/* mobile sizing lives in the consolidated dish-grid block further down */

/* === menu === */
/* menu runs 15% wider than the site content width so the two dish columns fit their text */
#menu.section { max-width: 874px !important; --wp--style--global--content-size: 874px; }
#menu .menu-cats, #menu .menu-cat { max-width: 874px; }
.menu-cats { column-count: 2; column-gap: 3.5rem; margin-top: 1.6rem; }
.menu-cat { break-inside: avoid; margin: 0 0 2.6rem; }
.menu-cat__name { font-size: 3rem; line-height: 1; color: var(--wp--preset--color--cobalt); margin-bottom: 0 !important; }
.menu-cat__aside { font-family: var(--wp--preset--font-family--body); font-style: italic; font-size: 1.05rem; color: var(--wp--preset--color--stone); margin-left: .2rem; }
.menu-cat__divider { margin: -.5rem 0 .7rem !important; opacity: .8; }
.menu-cat__note { font-style: italic; color: var(--wp--preset--color--stone); font-size: 1.04rem; margin: 0 0 .6rem; }
.menu-cat__foot { font-style: italic; color: var(--wp--preset--color--stone); font-size: .97rem; margin-top: 1rem; }
.menu-item { margin-top: .8rem; align-items: flex-start; gap: .85rem; }
.menu-item__thumb { flex: 0 0 80px; margin: 0 !important; border: 1px solid var(--wp--preset--color--line); border-radius: 6px; overflow: hidden; background: var(--wp--preset--color--panel); }
.menu-item__thumb img { display: block; border-radius: 5px; }
.menu-item__text { flex: 1; min-width: 0; }
.menu-item__thumb figcaption, .menu-item__gallery figcaption { display: none; }
.menu-item__gallery.wp-block-gallery { display: block !important; width: 80px !important; height: 64px !important; gap: 0 !important; overflow: hidden; }
.menu-item__gallery.wp-block-gallery > .wp-block-image { display: none !important; margin: 0 !important; }
.menu-item__gallery.wp-block-gallery > .wp-block-image:first-of-type { display: block !important; width: 80px !important; height: 64px !important; }
.menu-item__gallery.wp-block-gallery > .wp-block-image:first-of-type img { width: 80px !important; height: 64px !important; object-fit: cover; border-radius: 5px; }
.menu-item__head { display: flex; gap: .8rem; align-items: baseline; margin: 0; font-family: var(--wp--preset--font-family--body); }
.menu-item__head strong { font-weight: 600; font-size: 1.08rem; color: var(--wp--preset--color--pomegranate); }
.menu-item__fav { font-style: italic; font-weight: 400; font-size: .92rem; color: var(--wp--preset--color--ink); }
.menu-item__dots { flex: 1; border-bottom: 1px dotted var(--wp--preset--color--line); min-width: .8rem; }
.menu-item__price { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1rem; color: var(--wp--preset--color--pomegranate); }
.menu-item__desc { margin: .12rem 0 0; color: var(--wp--preset--color--ink); font-size: .96rem; line-height: 1.28; }
@media (max-width: 820px) { .menu-cats { column-count: 1; } }
@media (max-width: 600px) { .menu-cat__name { font-size: 2.2rem; } }

/* === order === */
.order-section { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.order-grid { gap: 1.4rem !important; margin-top: 1.6rem; }
.order-card { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 2rem; height: 100%; }
.order-card h3 { color: var(--wp--preset--color--pomegranate); }
.order-card p { color: var(--wp--preset--color--ink-soft); }
@media (max-width: 780px) { .order-grid { flex-wrap: wrap; } .order-grid .wp-block-column { flex-basis: 100% !important; } }

/* keep signature dishes at 2-per-row on mobile, matching source design; beats core's default
   full-width mobile column stacking via higher selector specificity. The basis subtracts exactly
   half the gap so two cards + one gap total 100% -- otherwise they overflow and drop to 1-per-row.
   justify-content centers any odd trailing card instead of leaving it left-justified. */
@media (max-width: 780px) {
	.wp-block-columns.dish-grid { flex-wrap: wrap !important; gap: 1.2rem !important; justify-content: center; }
	.wp-block-columns.dish-grid > .wp-block-column { flex: 0 0 calc(50% - 0.6rem) !important; width: calc(50% - 0.6rem) !important; }
}
@media (max-width: 600px) {
	.wp-block-columns.dish-grid { gap: .7rem !important; }
	.wp-block-columns.dish-grid > .wp-block-column { flex: 0 0 calc(50% - 0.35rem) !important; width: calc(50% - 0.35rem) !important; }
}

/* === events === */
.events-inner p { font-size: 1.16rem; color: var(--wp--preset--color--ink-soft); }
.inquiry-card { max-width: 32rem; margin: 2.6rem auto 0; background: var(--wp--preset--color--panel); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 2rem; }
.inquiry-card__title { color: var(--wp--preset--color--pomegranate); margin-bottom: .3rem !important; }
.inquiry-card__sub { color: var(--wp--preset--color--ink-soft); margin-top: 0 !important; margin-bottom: 1.2rem !important; }
.wp-block-jetpack-contact-form label { font-family: var(--wp--preset--font-family--body); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); }
.wp-block-jetpack-contact-form input, .wp-block-jetpack-contact-form textarea { font-family: var(--wp--preset--font-family--body); border-radius: 7px; border: 1px solid var(--wp--preset--color--line); }

/* === visit === */
.visit-section { padding-top: 3.6rem; padding-bottom: 3.6rem; }
.visit-title { color: var(--wp--preset--color--turquoise); }
.visit-divider { color: var(--wp--preset--color--saffron); }
.visit-grid { gap: 2.2rem !important; margin-top: 1.6rem; text-align: center; }
.visit-eyebrow { font-family: var(--wp--preset--font-family--body); text-transform: capitalize; letter-spacing: .04em; font-size: 1.08rem; color: var(--wp--preset--color--saffron); font-weight: 600; margin-bottom: .2rem !important; }
.visit-big { font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 1.3rem; color: var(--wp--preset--color--panel); margin-bottom: 0 !important; }
.visit-big a { text-decoration: none; }
.visit-section p { color: #e7e2d8; }
.parking-block { margin-top: 2.4rem; text-align: center; }
.parking-block__image { border-radius: 8px; overflow: hidden; margin-top: 1.2rem !important; }
@media (max-width: 780px) { .visit-grid { flex-wrap: wrap; gap: 1.6rem !important; } .visit-grid .wp-block-column { flex-basis: 100% !important; } }