/*
Theme Name: Savor
Theme URI: https://webintegrate.com/#themes
Author: Web Integrate
Author URI: https://webintegrate.com
Description: Savor is a warm, wood-fire inspired block theme for restaurants, cafés, bakeries and bars. It ships with ready-made patterns for a hero banner, your story, a printed-style menu, opening hours and reservations, events and catering, and guest reviews — all editable in the Site Editor with no code. Includes a dark "Ember Night" style variation.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: savor
Tags: block-patterns, block-styles, full-site-editing, one-column, wide-blocks, custom-colors, custom-logo, custom-menu, editor-style, featured-images, style-variations, template-editing, threaded-comments, translation-ready, food-and-drink, blog
*/

/*
 * Most styling lives in theme.json. This file only holds what theme.json
 * cannot express yet.
 */

/* Keyboard focus that stays visible on every background */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* Small "— Label" eyebrow above section titles */
.is-style-savor-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

/* Short ember-to-gold rule under section titles */
.wp-block-separator.is-style-savor-flame {
	width: 60px;
	max-width: 60px;
	height: 2px;
	border: 0;
	margin-left: 0;
	background: linear-gradient(to right, var(--wp--preset--color--ember), var(--wp--preset--color--gold));
	opacity: 1;
}
.has-text-align-center + .wp-block-separator.is-style-savor-flame,
.wp-block-separator.is-style-savor-flame.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* Menu rows: dish name ....... price */
.is-style-savor-menu-row {
	border-bottom: 1px dashed color-mix(in srgb, var(--wp--preset--color--ash) 45%, transparent);
	padding-bottom: var(--wp--preset--spacing--20);
}
.is-style-savor-menu-row > .wp-block-group:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

/* Card with an offset gold frame, as in the original design */
.is-style-savor-framed {
	position: relative;
	isolation: isolate;
}
.is-style-savor-framed::before {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	border: 2px solid var(--wp--preset--color--gold);
	z-index: -1;
	pointer-events: none;
}

/* Quote badge with a hard ember shadow */
.is-style-savor-badge {
	box-shadow: 6px 6px 0 var(--wp--preset--color--ember);
}

/* Accent bar on feature blocks */
.is-style-savor-accent {
	border-left: 3px solid var(--wp--preset--color--ember);
}

/*
 * Header stays pinned to the top on every page.
 * Sticky must sit on the template-part wrapper: the inner group is exactly as
 * tall as its parent, so sticking it would have no effect. No backdrop-filter
 * here — it would trap the mobile navigation overlay inside the header.
 */
.wp-site-blocks > header.wp-block-template-part:has(> .savor-site-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .savor-site-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Anchor links (#menu, #reservations…) land below the pinned header */
html { scroll-padding-top: calc(6rem + var(--wp-admin--admin-bar--height, 0px)); }

/* The admin bar scrolls away on small screens, so pin the header to the very top */
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .savor-site-header) { top: 0; }
}

/* Hero flame illustration */
.savor-flame img {
	filter: drop-shadow(0 20px 60px rgba(232, 96, 32, 0.35));
}

@media (prefers-reduced-motion: no-preference) {
	.savor-flame img { animation: savor-flicker 5s ease-in-out infinite; transform-origin: 50% 100%; }
	@keyframes savor-flicker {
		0%, 100% { transform: scale(1) rotate(0deg); }
		40%      { transform: scale(1.03, 0.98) rotate(-0.6deg); }
		70%      { transform: scale(0.98, 1.03) rotate(0.6deg); }
	}
}

/* Menu prices never wrap */
.is-style-savor-menu-row > p:last-child {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Headings: break between words; split a word only if it cannot fit at all */
:where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
	hyphens: manual;
}

/* Stacked full-width sections sit flush against each other */
.wp-block-post-content > .alignfull + .alignfull,
main > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* ==========================================================================
   Post content — also covers posts written in the classic editor
   ========================================================================== */

/* Long words and URLs never push the page wider than the screen */
.wp-block-post-content,
.wp-block-post-excerpt,
.wp-block-comment-content {
	overflow-wrap: break-word;
}
.wp-block-post-content a,
.wp-block-comment-content a,
.wp-block-post-navigation-link {
	overflow-wrap: anywhere;
}

/* Media shrinks to fit narrow screens */
.wp-block-post-content :where(img, video, iframe, embed, object) {
	max-width: 100%;
}
.wp-block-post-content :where(img) {
	height: auto;
}
.wp-block-post-content .wp-caption {
	max-width: 100%;
}

/* Preformatted text scrolls inside its box instead of widening the page */
.wp-block-post-content pre {
	max-width: 100%;
	overflow-x: auto;
}

/* Classic alignments (block alignments are handled by the layout engine) */
.wp-block-post-content .alignleft {
	float: left;
	margin-top: 0.4em;
	margin-bottom: 1em;
	margin-inline-end: var(--wp--preset--spacing--30);
}
.wp-block-post-content .alignright {
	float: right;
	margin-top: 0.4em;
	margin-bottom: 1em;
	margin-inline-start: var(--wp--preset--spacing--30);
}
.wp-block-post-content .aligncenter {
	margin-left: auto;
	margin-right: auto;
}
.wp-block-post-content img.aligncenter {
	display: block;
}
.wp-block-post-content::after {
	content: "";
	display: table;
	clear: both;
}

/* Classic captions */
.wp-block-post-content .wp-caption-text,
.wp-block-post-content .gallery-caption {
	margin-top: 0.5em;
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--ash);
}

/* Classic [gallery] shortcode as a responsive grid */
.wp-block-post-content .gallery {
	display: grid;
	grid-template-columns: repeat(var(--savor-gallery-columns, 3), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}
.wp-block-post-content .gallery-columns-1 { --savor-gallery-columns: 1; }
.wp-block-post-content .gallery-columns-2 { --savor-gallery-columns: 2; }
.wp-block-post-content .gallery-columns-4 { --savor-gallery-columns: 4; }
.wp-block-post-content .gallery-columns-5 { --savor-gallery-columns: 5; }
.wp-block-post-content .gallery-columns-6 { --savor-gallery-columns: 6; }
.wp-block-post-content .gallery-columns-7 { --savor-gallery-columns: 7; }
.wp-block-post-content .gallery-columns-8 { --savor-gallery-columns: 8; }
.wp-block-post-content .gallery-columns-9 { --savor-gallery-columns: 9; }
.wp-block-post-content .gallery .gallery-item {
	margin: 0;
	/* WordPress prints an inline width/float for each item; the grid replaces it */
	width: auto !important;
	float: none !important;
}
.wp-block-post-content .gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}
@media (max-width: 600px) {
	.wp-block-post-content .gallery {
		grid-template-columns: repeat(min(var(--savor-gallery-columns, 3), 2), minmax(0, 1fr));
	}
}

/* Page links for posts split with <!--nextpage--> */
.savor-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.savor-page-links .post-page-numbers {
	display: inline-block;
	min-width: 2.4em;
	padding: 0.4em 0.6em;
	border: 1px solid var(--wp--preset--color--smoke);
	text-align: center;
	text-decoration: none;
}
.savor-page-links .post-page-numbers.current {
	background: var(--wp--preset--color--ember);
	border-color: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--base);
}