/*
Theme Name: anders
Theme URI: https://anders-lueneburg.de/
Author: Anselm Peischl
Description: Block theme for the anders restaurant, hotel & event venue in Lüneburg. Rebuild of the original Contao site as a Gutenberg block theme. Sage/dark palette, self-hosted Copperplate Gothic throughout (no external fonts).
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anders
*/

/* ---------------------------------------------------------------------------
   Light front-end refinements. Design tokens live in theme.json; this file
   only carries things theme.json can't express (logo link, nav underlines,
   the "✳" section divider glyph used on the original site).
   --------------------------------------------------------------------------- */

.anders-logo {
	margin: 0;
}

.anders-logo a {
	text-decoration: none;
	display: inline-block;
}

.anders-logo img {
	display: block;
	height: auto;
}

.anders-toplinks a,
.anders-footer a {
	text-decoration: none;
}

/* Footer sits on the dark panel — links must be light, not the global dark link colour. */
.anders-footer a {
	color: #ffffff;
}

.anders-footer a:hover {
	color: var(--wp--preset--color--sage);
}

.anders-toplinks a:hover {
	text-decoration: underline;
}

/* Centered "✳" divider that sits under section headings (is-style-divider). */
.anders-divider {
	text-align: center;
	color: var(--wp--preset--color--sage);
	letter-spacing: 0;
	line-height: 1;
}

/* Make the wp:navigation current item subtly marked. */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a {
	color: var(--wp--preset--color--sage);
}

/* Header chrome (top links + main nav) uses the Copperplate heading face, as on
   the original site whose whole chrome is set in Copperplate. The navigation
   block doesn't always cascade font-family to its link items, so set it here. */
.anders-header .wp-block-navigation,
.anders-header .wp-block-navigation a,
.anders-toplinks,
.anders-toplinks a {
	font-family: var(--wp--preset--font-family--heading);
}

/* Headings inside the narrow media-text / cover columns: long German compound
   words ("Sonnenterrasse", "Kontorhaus", "Wohlfühloase") were breaking
   mid-word because the letter-spaced heading outgrew the ~half-width column.
   Tighten spacing, cap the fluid size, and let the browser hyphenate (de_DE)
   so words break at syllable boundaries instead. */
.wp-block-media-text__content :where(h1, h2),
.wp-block-cover__inner-container :where(h1, h2) {
	letter-spacing: 0.03em;
	font-size: clamp(1.4rem, 1rem + 1.7vw, 2.1rem);
	overflow-wrap: break-word;
	hyphens: auto;
}

/* OpenTable reservation widget — GDPR click-to-load consent gate.
   The third-party loader is only injected after the visitor consents, so no
   data reaches OpenTable on page load. The widget renders ~288px wide (tall). */
.anders-opentable {
	max-width: 320px;
	margin: 2rem auto 0;
}

.anders-consent {
	border: 1px solid var(--wp--preset--color--sage);
	background: #ffffff;
	padding: 1.5rem;
	text-align: center;
}

.anders-consent__text {
	font-size: 0.85rem;
	line-height: 1.6;
	margin: 0 0 1.25rem;
}

.anders-consent__btn {
	display: inline-block;
	background: var(--wp--preset--color--sage);
	color: #ffffff;
	border: 0;
	padding: 0.75rem 1.5rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.anders-consent__btn:hover {
	background: var(--wp--preset--color--dark);
}

.anders-opentable__widget {
	display: flex;
	justify-content: center;
}

.anders-opentable__widget[hidden] {
	display: none;
}

/* Fixed header with shadow divider, as on the original Contao site
   (.header.is--position--fixed). The header template part renders as a
   <header> directly inside .wp-site-blocks (sibling of <main>/<footer>), so
   `sticky` here pins it to the top on scroll while keeping it in flow — no
   content slides underneath, unlike the original's `position: fixed`. The
   soft drop shadow is the divider (original: 0 3px 11px rgba(0,0,0,0.31)). */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.anders-header {
	box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.31);
}

/* Sub-page content (page.html / page-no-title.html) spans the full width to
   match its ancestor — the full-bleed header/footer chrome — instead of the
   1140px article column. The post-content keeps its global side padding so
   text stays off the viewport edges. Scoped to .anders-page-main so the
   deliberately constrained homepage (front-page.html) is unaffected. The core
   constrained-layout cap is a zero-specificity :where() rule, so these plain
   class selectors override it without !important. */
.anders-page-main > .wp-block-post-content,
.anders-page-main .wp-block-post-content > * {
	max-width: none;
}