/*
Theme Name: Borogodó
Theme URI: https://borogodo.nl
Author: KNG Dev
Description: Block theme for Borogodó — Food & Celebration. Built from the Claude Design redesign (2026-10-16).
Version: 0.1.0
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: borogodo
*/

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
img { height: auto; max-width: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.wp-site-blocks > * { margin-block: 0; }
.is-sections > * { margin-block: 0; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }
.has-display-font-size, .has-display-xl-font-size { letter-spacing: -0.015em; line-height: 0.95; }
.has-display-xl-font-size { line-height: 0.92; }
:where(h1, h2, h3, .wp-block-heading) em { color: var(--wp--preset--color--urucum); font-style: italic; }
:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--urucum);
	outline-offset: 3px;
}
/* WPForms sets outline: none on its fields (its own cue is a faint shadow, nothing on radios): keep the ring. */
.wpforms-container .wpforms-form :is(input, select, textarea, button):focus-visible {
	outline: 2px solid var(--wp--preset--color--urucum) !important;
	outline-offset: 3px !important;
}
.screen-reader-text-visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Block styles ---------- */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.35; /* the design's labels sit at line-height: normal */
	text-transform: uppercase;
	color: var(--wp--preset--color--urucum);
}

.wp-block-button.is-style-text-link .wp-block-button__link {
	background: none;
	border-radius: 0;
	border-bottom: 1px solid currentColor;
	color: var(--wp--preset--color--espresso);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	padding: 0 0 3px;
	text-transform: none;
}
.wp-block-button.is-style-text-link .wp-block-button__link:hover { background: none; color: var(--wp--preset--color--urucum); }
.wp-block-button.is-style-on-dark .wp-block-button__link { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--espresso); }
.wp-block-button.is-style-on-dark .wp-block-button__link:hover { background: var(--wp--preset--color--urucum); color: var(--wp--preset--color--paper); }

.wp-block-image.is-style-ring {
	aspect-ratio: 1;
	background: var(--wp--preset--color--paper);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--clay);
	padding: 8px;
}
.wp-block-image.is-style-ring img { aspect-ratio: 1; border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }

.wp-block-group.is-style-dark { background: var(--wp--preset--color--ember); color: var(--wp--custom--color--linen); }
.wp-block-group.is-style-dark :where(h1, h2, h3, h4, blockquote) { color: var(--wp--preset--color--paper); }
.wp-block-group.is-style-dark :where(h1, h2, h3) em { color: var(--wp--custom--color--blush); }
.wp-block-group.is-style-dark a:not(.wp-element-button) { color: var(--wp--preset--color--paper); }
.wp-block-group.is-style-dark .is-style-eyebrow { color: var(--wp--custom--color--blush); }
.wp-block-group.is-style-dark .wp-block-button.is-style-text-link .wp-block-button__link { color: var(--wp--preset--color--paper); }
.wp-block-group.is-style-dark .wp-block-button.is-style-text-link .wp-block-button__link:hover { color: var(--wp--custom--color--blush); }
.wp-block-group.is-style-dark :focus-visible { outline-color: var(--wp--custom--color--blush); }

.wp-block-group.is-style-ruled { border-top: 1px solid var(--wp--preset--color--espresso); padding-top: 22px; }
.wp-block-group.is-style-dark .wp-block-group.is-style-ruled { border-top-color: var(--wp--preset--color--ink-soft); }
.wp-block-group.is-style-ruled-rows { border-top: 1px solid var(--wp--custom--color--line-strong); }
.wp-block-group.is-style-ruled-rows > * { border-bottom: 1px solid var(--wp--custom--color--line-strong); margin-block: 0; padding-block: 20px; }

/* ---------- Header ---------- */
.site-header {
	border-bottom: 1px solid var(--wp--custom--color--line);
	position: sticky;
	top: 0;
	z-index: 20;
}
/* The design's translucent, blurred bar lives on a layer behind the content: backdrop-filter on the header itself
   would make it the containing block of the phone menu's fixed overlay, squeezing the overlay into the bar. */
.site-header::before {
	backdrop-filter: blur(8px);
	background: rgb(248 243 236 / 0.94);
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } } /* WP's admin bar scrolls away at this width */
.site-header__inner { gap: 28px; padding-block: 14px; }
.site-brand { flex-shrink: 0; margin: 0; }
.site-brand a { align-items: center; display: flex; gap: 12px; }
.site-brand .site-brand__mark { height: 40px; width: 40px; } /* parent-scoped: beats WooCommerce's .woocommerce-page img { height: auto } */
.site-brand .site-brand__wordmark { height: 20px; width: auto; }
.site-header__actions { gap: 28px; min-width: 0; }
.site-nav { font-weight: 500; gap: clamp(14px, 2vw, 26px); white-space: nowrap; }
/* Menu links inherit their colour (core's doubled .wp-block-navigation-item__content rule out-specifies any class on
   the link), so hover and the current page colour the item. The open phone overlay forces inherit (!important): there
   every item stays espresso, which the design leaves open. */
.site-nav .wp-block-navigation-item:hover,
.site-nav .current-menu-item { color: var(--wp--preset--color--urucum); }
.site-header__cta { flex-shrink: 0; }
.site-header__cta .wp-block-button__link { font-size: 12px; padding: 12px 20px; }
.site-header__basket .wp-block-button__link { background: none; box-shadow: inset 0 0 0 1px var(--wp--preset--color--espresso); color: var(--wp--preset--color--espresso); }
.site-header__basket .wp-block-button__link:hover { background: var(--wp--preset--color--espresso); color: var(--wp--preset--color--paper); }
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { /* the list re-gets theme.json's 14px navigation size */
	font-family: var(--wp--preset--font-family--display);
	font-size: 30px;
}
/* Inline nav from 900px; below that the menu button (core's own switch is fixed at 600px, too narrow for 5 links + CTA). */
@media (min-width: 900px) {
	.site-nav .wp-block-navigation__responsive-container-open { display: none; }
	.site-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		background-color: inherit; display: block; position: relative; width: 100%; z-index: auto;
	}
	.site-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
}
@media (max-width: 600px) {
	.site-brand__wordmark { display: none; }
	.site-header__inner, .site-header__actions { gap: 16px; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--wp--custom--color--line); padding-block: clamp(56px, 7vw, 88px) 32px; }
.site-footer p { font-size: 15px; line-height: 1.55; margin: 0; }
.site-footer__grid > .wp-block-group { gap: 10px; }
.site-footer__brand { gap: 16px !important; }
.site-footer__logo { display: flex; flex-direction: column; gap: 16px; }
.site-footer .site-footer__mark { height: 64px; width: 64px; }
.site-footer .site-footer__wordmark { height: 20px; width: auto; }
.site-footer .is-style-eyebrow { font-size: 12px; letter-spacing: 0.2em; }
.site-footer__links a { color: var(--wp--preset--color--espresso); }
.site-footer__links a:hover { color: var(--wp--preset--color--urucum); }
.site-footer__fineprint { font-size: 13px !important; }
.site-footer__bottom {
	border-top: 1px solid var(--wp--custom--color--line-strong);
	color: var(--wp--preset--color--ink-soft);
	gap: 12px;
	margin-top: 56px !important;
	padding-top: 24px;
}
.site-footer__bottom p { font-size: 13px; }

/* Footer signup (WPForms 952) styled as the design's underlined field + text button */
.site-footer .wpforms-container { margin: 0 !important; width: 100%; }
.site-footer .wpforms-form { align-items: center; border-bottom: 1px solid var(--wp--preset--color--espresso); display: flex; }
.site-footer .wpforms-field-container { flex: 1; min-width: 0; }
.site-footer .wpforms-form .wpforms-field { padding: 0 !important; }
.site-footer .wpforms-form .wpforms-field-label {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.site-footer .wpforms-form input[type="email"] {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--espresso) !important;
	font: inherit !important;
	font-size: 15px !important;
	height: auto !important;
	max-width: none !important;
	padding: 10px 0 !important;
}
.site-footer .wpforms-submit-container { margin: 0 !important; padding: 0 !important; }
.site-footer .wpforms-form button.wpforms-submit {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--urucum) !important;
	font: 600 14px/1 var(--wp--preset--font-family--body) !important;
	height: auto !important;
	letter-spacing: 0 !important;
	padding: 10px 0 10px 12px !important;
	text-transform: none !important;
}
.site-footer .wpforms-form button.wpforms-submit::after { content: " →"; }
.site-footer .wpforms-form button.wpforms-submit:hover { color: var(--wp--preset--color--espresso) !important; }

/* ---------- Templates ---------- */
.site-main--text { padding-block: clamp(56px, 7vw, 104px) clamp(72px, 10vw, 140px); }
.site-main--text .wp-block-post-date { margin-top: 8px; }
.site-main--text .wp-block-post-featured-image { margin-block: 40px; }
/* Long-form text (Privacy, journal): headings one step down, so the page title stays the largest. */
.site-main--text .wp-block-post-content h2 { font-size: var(--wp--preset--font-size--subheading); }
.site-main--text .wp-block-post-content h3 { font-size: var(--wp--preset--font-size--x-large); }
/* Gallery (core gallery, e.g. the Gallery page): every photo the same 4:5 shape, its caption below it instead of over it. */
.site-main--text:has(.wp-block-gallery.alignwide) .wp-block-post-title { max-width: var(--wp--style--global--wide-size); } /* the title lines up with a wide gallery */
.wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; justify-content: flex-start; }
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { aspect-ratio: 4 / 5; flex: none; height: auto; }
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { content: none; }
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: none;
	color: var(--wp--preset--color--ink-soft);
	font-size: 14px;
	line-height: 1.45;
	margin-top: 10px;
	max-height: none;
	overflow: visible;
	padding: 0;
	position: static;
	text-align: left;
	text-shadow: none;
}
.statement { text-align: center; }
.statement__mark img { display: inline-block; height: 56px; width: 56px; }
.wp-block-query .is-style-ruled { gap: 10px; margin-block: 0 32px; }
.wp-block-post-excerpt__more-link { font-weight: 500; }