/*
Theme Name:   Stulna Bestick
Theme URI:    https://stulnabestick.se
Description:  Barntema till Twenty Twenty-Five: svart och guld, ljust/mörkt läge, sektioner för restaurangen. Innehållet (lunch, erbjudanden, viner) finns i tillägget "Stulna Bestick – funktioner".
Author:       Stulna Bestick
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.7
Requires PHP: 8.1
License:      GPL-2.0-or-later
Text Domain:  stulna
*/

/* ---------- Light mode: overrides the colour presets, everything else follows ---------- */
html[data-theme="light"] {
	--wp--preset--color--base: #faf7f1;
	--wp--preset--color--contrast: #211c16;
	--wp--preset--color--accent-1: #94681c;
	--wp--preset--color--accent-2: #ffffff;
	--wp--preset--color--accent-3: #f3ede3;
	--wp--preset--color--accent-4: #5b5245;
	--wp--preset--color--accent-5: #e5dccd;
	--wp--preset--color--accent-6: #8a2433;
	--wp--custom--btn: #bd9643;
	--wp--custom--btn-hover: #a9832f;
	--snb-shadow: 0 1px 2px rgba(60, 40, 10, .05), 0 8px 24px rgba(60, 40, 10, .06);
	--snb-veil: linear-gradient(90deg, #faf7f1 0%, rgba(250, 247, 241, .96) 55%, rgba(250, 247, 241, .55) 75%, rgba(250, 247, 241, .1) 100%);
	--snb-glow: rgba(122, 31, 43, .07);
}
html[data-theme="light"] body { font-size: 1.0625rem; }
html[data-theme="light"] .snb-card,
html[data-theme="light"] .snb-offer,
html[data-theme="light"] .snb-mini { box-shadow: var(--snb-shadow); }
:root {
	--snb-veil: linear-gradient(90deg, rgba(14, 13, 11, .97) 0%, rgba(14, 13, 11, .88) 55%, rgba(14, 13, 11, .4) 100%);
	--snb-glow: rgba(122, 31, 43, .28);
}
body { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Header / footer ---------- */
header.wp-block-template-part {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--accent-5);
}
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.snb-header { position: relative; padding-block: 12px; }
.snb-header .wp-block-site-logo img { height: 54px; width: auto; }
footer.wp-block-template-part { border-top: 1px solid var(--wp--preset--color--accent-5); }
.snb-footer { padding-block: 40px; color: var(--wp--preset--color--accent-4); font-size: .88rem; }
.snb-footer .wp-block-site-logo img { height: 44px; width: auto; }

/* header, page and footer sit directly on top of each other */
.wp-site-blocks > * { margin-block-start: 0; }

/* ---------- Sections ---------- */
.snb-sections > * { margin-block: 0 !important; }
.snb-section { padding-block: var(--wp--preset--spacing--60); }
.snb-section.is-tight { padding-block: var(--wp--preset--spacing--50) 0; }
.snb-section.is-alt { background: var(--wp--preset--color--accent-3); border-block: 1px solid var(--wp--preset--color--accent-5); }
.snb-section .snb-head { max-width: 640px; margin-inline: auto !important; margin-bottom: 48px !important; text-align: center; }
.snb-head > * { margin-block: .4rem 0; }
.snb-head p:not(.snb-eyebrow) { color: var(--wp--preset--color--accent-4); }

/* ---------- Hero: image from an ordinary Image block, text over a gradient ---------- */
.snb-hero { position: relative; overflow: hidden; min-height: min(88svh, 820px); display: flex; align-items: center; padding-block: 90px; }
.snb-hero > .snb-hero__img { position: absolute; inset: 0; margin: 0 !important; max-width: none !important; z-index: 0; }
.snb-hero > .snb-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center right; }
.snb-hero::after { content: ""; position: absolute; inset: 0; background: var(--snb-veil); z-index: 0; pointer-events: none; }
.snb-hero > :not(.snb-hero__img) { position: relative; z-index: 1; }
.snb-hero > .snb-hero__text { max-width: 620px; margin: 0 20px 0 max(20px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important; }
.snb-hero h1 em { color: var(--wp--preset--color--accent-1); }
.snb-hero__text > p:not(.snb-eyebrow) { font-size: 1.15rem; color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent); }
@media (max-width: 800px) {
	.snb-hero::after { background: var(--wp--preset--color--base); opacity: .88; }
}

/* ---------- Building blocks used in the patterns ---------- */
.snb-eyebrow { font-size: .75rem !important; letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--accent-1); font-weight: 500; }
.is-style-outline > .wp-block-button__link { background: transparent; color: inherit; border: 1px solid var(--wp--preset--color--accent-5); }
.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--accent-1); background: transparent; }

/* Card (Group → style "Kort") */
.is-style-kort { background: var(--wp--preset--color--accent-2); border: 1px solid var(--wp--preset--color--accent-5); border-radius: 14px; padding: 24px !important; overflow: hidden; }
.is-style-kort > .wp-block-image { margin: -24px -24px 18px !important; }
.is-style-kort > .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.is-style-kort p { color: var(--wp--preset--color--accent-4); }
.is-style-kort .snb-price { color: var(--wp--preset--color--accent-1); font-weight: 600; }
html[data-theme="light"] .is-style-kort { box-shadow: var(--snb-shadow); }

/* Menu row (Group → style "Menyrad"): dish name … price, description below */
.is-style-meny-rad { display: grid !important; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline; padding-block: 18px; border-bottom: 1px solid var(--wp--preset--color--accent-5); }
.is-style-meny-rad > * { margin: 0 !important; }
.is-style-meny-rad > h5 { display: flex; align-items: baseline; gap: 12px; }
.is-style-meny-rad > h5::after { content: ""; flex: 1; border-bottom: 1px dotted var(--wp--preset--color--accent-4); opacity: .5; transform: translateY(-4px); }
.is-style-meny-rad > p:nth-child(2) { color: var(--wp--preset--color--accent-1); font-weight: 600; white-space: nowrap; }
.is-style-meny-rad > p:nth-child(n+3) { grid-column: 1 / -1; color: var(--wp--preset--color--accent-4); font-size: .9rem; font-style: italic; }
.snb-menu-cat { margin-top: 2rem !important; }
.is-style-meny-rad > p.snb-dish-note { font-style: normal !important; color: var(--wp--preset--color--accent-1) !important; font-size: .85rem !important; }

/* Catering menus: one line per menu that opens on click */
.snb-catering .wp-block-image { margin-bottom: 1rem; }
.snb-catering .wp-block-image img { border-radius: 14px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.snb-details { border-bottom: 1px solid var(--wp--preset--color--accent-5); margin: 0 !important; padding: 0; }
.snb-details summary { cursor: pointer; padding: 14px 0; font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.snb-details summary::-webkit-details-marker { display: none; }
.snb-details summary::after { content: "+"; color: var(--wp--preset--color--accent-1); font-family: var(--wp--preset--font-family--body); font-weight: 400; }
.snb-details[open] summary::after { content: "–"; }
.snb-details > p { margin: 0 0 14px !important; color: var(--wp--preset--color--accent-4); font-size: .95rem; }

/* Bar: 4 cards side by side on wide screens, 2 on tablets, 1 on phones (grid instead of the columns' flexbox) */
.wp-block-columns.snb-bar { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wp-block-columns.snb-bar > .wp-block-column { width: auto !important; flex-basis: auto !important; margin: 0 !important; }
@media (max-width: 1000px) { .wp-block-columns.snb-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wp-block-columns.snb-bar { grid-template-columns: 1fr; } }

/* Ornament (Separator → style "Ornament") */
.wp-block-separator.is-style-ornament { border: 0 !important; height: 24px; width: 180px; max-width: 100%; margin-inline: auto !important; background: var(--wp--preset--color--accent-1); opacity: 1;
	-webkit-mask: url("assets/images/ornament.svg") center / contain no-repeat; mask: url("assets/images/ornament.svg") center / contain no-repeat; }

/* Wine section: soft wine-red glow */
.snb-wine-section { background:
	radial-gradient(ellipse 70% 60% at 85% 0%, var(--snb-glow), transparent 70%),
	radial-gradient(ellipse 50% 50% at 0% 100%, var(--snb-glow), transparent 70%); }
.snb-rec { background: linear-gradient(110deg, color-mix(in srgb, var(--wp--preset--color--accent-6) 16%, var(--wp--preset--color--accent-2)), var(--wp--preset--color--accent-2) 60%) !important; margin-block: 48px !important; }
.snb-rec .snb-big { font: italic 600 3.2rem/1 var(--wp--preset--font-family--heading); color: var(--wp--preset--color--accent-1); }
.snb-bar .wp-block-list { list-style: none; padding: 0; }
.snb-bar .wp-block-list li { padding: .42rem 0; border-bottom: 1px dashed var(--wp--preset--color--accent-5); font-size: .93rem; }
.snb-bar .wp-block-list li:last-child { border: 0; }
.snb-small { font-size: .82rem !important; color: var(--wp--preset--color--accent-4); }

/* Gallery: 3 columns, the first photo twice as big; 2 columns on phones.
   WordPress lays galleries out with flexbox and very specific selectors, hence grid + !important. */
.wp-block-gallery.snb-gallery.has-nested-images {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: clamp(150px, 20vw, 250px);
	gap: 12px;
}
.wp-block-gallery.snb-gallery.has-nested-images figure.wp-block-image {
	width: auto !important; max-width: none !important; margin: 0 !important; height: 100%;
	border-radius: 12px; overflow: hidden;
}
.wp-block-gallery.snb-gallery.has-nested-images figure.wp-block-image:first-child { grid-column: span 2; grid-row: span 2; }
/* no hole in the last row: the big photo takes 4 cells, so with 3 columns the last photo is
   widened when the number of photos leaves 1 or 2 empty cells */
.wp-block-gallery.snb-gallery.has-nested-images figure.wp-block-image:last-child:nth-child(3n+2):not(:first-child) { grid-column: span 2; }
.wp-block-gallery.snb-gallery.has-nested-images figure.wp-block-image:last-child:nth-child(3n+1):not(:first-child) { grid-column: span 3; }
.wp-block-gallery.snb-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0;
	transition: transform .4s ease;
}
.wp-block-gallery.snb-gallery figure.wp-block-image:hover img { transform: scale(1.04); }
.wp-block-gallery.snb-gallery figure.wp-lightbox-container img { cursor: zoom-in; }
@media (max-width: 600px) {
	.wp-block-gallery.snb-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; gap: 8px; }
	/* 2 columns: the last photo is full width only when the count leaves a hole */
	.wp-block-gallery.snb-gallery.has-nested-images figure.wp-block-image:last-child:not(:first-child) { grid-column: auto; }
	.wp-block-gallery.snb-gallery.has-nested-images figure.wp-block-image:last-child:nth-child(2n):not(:first-child) { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) { .wp-block-gallery.snb-gallery figure.wp-block-image img { transition: none; } }
/* lightbox overlay in the site colours */
.wp-lightbox-overlay .scrim { background-color: var(--wp--preset--color--base) !important; }
.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button { fill: var(--wp--preset--color--contrast) !important; }

/* Map (block "Karta"): fill the column next to opening hours and contact */
.wp-block-column > .snb-map { height: 100%; }

/* Offer page */
.snb-offer-page .wp-block-post-featured-image img { border-radius: 14px; }