/*
Theme Name: Element Brauerei
Theme URI: https://elementbrauerei.ch/
Author: Element Brauerei AG
Description: Block-Theme der Element Brauerei AG, Pfyn TG. Vier Elemente – das fünfte ist Bier. Benötigt das Plugin „Element Brauerei – Funktionen“.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
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: element-brauerei
*/

/* ------------------------------------------------------------ Variablen für das Plugin */
:root {
	--eb-bg: var(--wp--preset--color--bg);
	--eb-surface: var(--wp--preset--color--surface);
	--eb-ink: var(--wp--preset--color--ink);
	--eb-muted: var(--wp--preset--color--muted);
	--eb-line: var(--wp--preset--color--line);
	--eb-amber: var(--wp--preset--color--amber);
	--eb-amber-ink: var(--wp--preset--color--amber-ink);
	--eb-hop: var(--wp--preset--color--hop);
	--eb-wasser: var(--wp--preset--color--wasser);
	--eb-feuer: var(--wp--preset--color--feuer);
	--eb-luft: var(--wp--preset--color--luft);
	--eb-erde: var(--wp--preset--color--erde);
	--eb-display: var(--wp--preset--font-family--display);
	--eb-mono: var(--wp--preset--font-family--mono);
}

/* ------------------------------------------------------------ Dark Mode (folgt dem System) */
@media (prefers-color-scheme: dark) {
	:root:root {
		color-scheme: dark;
		--wp--preset--color--bg: #111613;
		--wp--preset--color--surface: #18201B;
		--wp--preset--color--ink: #E6E8E0;
		--wp--preset--color--muted: #98A198;
		--wp--preset--color--line: #2B342E;
		--wp--preset--color--amber: #E6A357;
		--wp--preset--color--amber-ink: #EDB368;
		--wp--preset--color--hop: #A3B56E;
		--wp--preset--color--wasser: #6FB3D6;
		--wp--preset--color--feuer: #E77B52;
		--wp--preset--color--luft: #E2C052;
		--wp--preset--color--erde: #BFA57A;
	}
}

/* ------------------------------------------------------------ Grundlagen */
body { -webkit-text-size-adjust: 100%; }
p { max-width: 62ch; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--wp--preset--color--amber); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.eb-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0; }
.eb-eyebrow a { color: inherit; text-decoration: none; }
.eb-lede { font-size: 1.2rem; }
.eb-muted { color: var(--wp--preset--color--muted); }
.eb-mono { font-family: var(--wp--preset--font-family--mono); font-size: .92rem; }
.eb-note { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; color: var(--wp--preset--color--muted); }
.eb-go a { font-family: var(--wp--preset--font-family--mono); font-size: .8rem; color: var(--wp--preset--color--amber-ink); text-decoration: none; }

/* Buttons: Outline-Variante */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--wp--preset--color--amber-ink); border-color: var(--wp--preset--color--amber-ink); }
.wp-block-button__link:hover { transform: translateY(-1px); }

/* ------------------------------------------------------------ Kopfzeile */
.eb-site-header { position: sticky; top: 0; z-index: 50; background: var(--wp--preset--color--bg); border-bottom: 1px solid var(--wp--preset--color--line); }
.admin-bar .eb-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.eb-header { max-width: 1180px; margin-inline: auto; min-height: 68px; gap: 1rem; }
.eb-brand { gap: .6rem; }
.eb-brand .wp-block-site-title { margin: 0; }
.eb-brand .wp-block-site-title a { color: var(--wp--preset--color--ink); }
.eb-nav .wp-block-navigation-item__content { padding-block: .3rem; border-bottom: 2px solid transparent; text-decoration: none; }
.eb-nav .current-menu-item > .wp-block-navigation-item__content,
.eb-nav .wp-block-navigation-item__content[aria-current="page"] { border-bottom-color: var(--wp--preset--color--amber); }
.eb-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--bg); color: var(--wp--preset--color--ink); padding: var(--wp--custom--gutter); }
.eb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.2rem; font-size: 1.4rem; }
@media (max-width: 480px) { .eb-brand .wp-block-site-title { font-size: 1.05rem !important; } }

/* ------------------------------------------------------------ Hauptbereich & Abschnitte */
.eb-main { padding-bottom: 3rem; }
.eb-pagehead { padding-block: clamp(2.8rem, 7vw, 5rem) 1.4rem; }
.eb-page-title { margin: 0; }
.eb-intro { border-bottom: 1.5px solid var(--wp--preset--color--ink); padding-bottom: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: clamp(2rem, 5vw, 3rem); }
.eb-intro .eb-lede { margin: 0; }
.eb-section { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--wp--preset--color--line); margin-block: 0 !important; }
.eb-section--hero { border-top: 0; padding-top: clamp(2.5rem, 7vw, 5rem); }
.eb-sechead { align-items: end !important; margin-bottom: 1.6rem; }

/* Hero */
.eb-hero { align-items: center !important; gap: clamp(2rem, 5vw, 4.5rem) !important; }
.eb-hero-title { font-size: clamp(3.2rem, 9vw, 7rem) !important; margin-block: .6rem 0 !important; }
.eb-hero-title em { font-style: normal; color: var(--wp--preset--color--amber-ink); }
.eb-ingred { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.eb-ingred span { font-family: var(--wp--preset--font-family--mono); font-size: .85rem; }
.eb-ingred span::before { content: "+ "; color: var(--wp--preset--color--amber-ink); }

/* Karten */
.eb-paths { gap: 1rem !important; }
.eb-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); padding: 1.4rem; height: 100%; display: flex; flex-direction: column; gap: .6rem; }
.eb-card > * { margin: 0 !important; }
.eb-card h3 { font-size: 1.7rem; }
.eb-card p:not(.eb-eyebrow):not(.eb-go) { color: var(--wp--preset--color--muted); font-size: .98rem; }
.eb-card .eb-go { margin-top: auto !important; }
.eb-card ul { padding-left: 1.1rem; color: var(--wp--preset--color--muted); font-size: .96rem; }

.eb-newprod { border: 1.5px dashed var(--wp--preset--color--amber); background: color-mix(in srgb, var(--wp--preset--color--amber) 8%, var(--wp--preset--color--surface)); padding: 1.6rem; }
.eb-newprod h3 { font-size: 1.7rem; }

/* Brauerei */
.eb-facts { gap: 2rem !important; }
.eb-big { font-family: var(--wp--preset--font-family--mono); font-weight: 500; font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; color: var(--wp--preset--color--amber-ink); margin-bottom: .4rem; }
.eb-big small { font-size: .45em; margin-left: .1em; }
.eb-panel { margin-top: 3rem; padding: 1.6rem; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); }
.eb-panel h3 { font-size: 1.9rem; }
.eb-cycle { gap: 0 !important; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); }
.eb-cycle > .wp-block-column { padding: 1.4rem; border-right: 1px solid var(--wp--preset--color--line); }
.eb-cycle > .wp-block-column:last-child { border-right: 0; }
.eb-cycle h3 { font-size: 1.4rem; margin-block: .5rem; }
@media (max-width: 781px) { .eb-cycle > .wp-block-column { border-right: 0; border-bottom: 1px solid var(--wp--preset--color--line); } .eb-cycle > .wp-block-column:last-child { border-bottom: 0; } }
.eb-tag { display: inline-block; font-family: var(--wp--preset--font-family--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: .15em .55em; border: 1px solid currentColor; border-radius: 2px; margin: 0; }
.eb-tag--now { color: var(--wp--preset--color--hop); }
.eb-tag--soon { color: var(--wp--preset--color--amber-ink); }

/* Historisch */
.eb-herbs { list-style: none; padding: 0; margin: .8rem 0 0; border-top: 1.5px solid var(--wp--preset--color--ink); }
.eb-herbs li { padding-block: .9rem; border-bottom: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--muted); font-size: .96rem; }
.eb-herbs strong { font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--ink); margin-right: .4rem; }
.eb-herbs em { font-family: var(--wp--preset--font-family--mono); font-style: normal; font-size: .72rem; }
.eb-timeline { gap: 0 !important; border-top: 1.5px solid var(--wp--preset--color--ink); }
.eb-timeline > .wp-block-column { padding: 1.1rem 1.1rem 1.2rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.eb-yr { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 2.4rem; color: var(--wp--preset--color--amber-ink); line-height: 1; margin: 0; }
.eb-timeline .eb-muted { font-size: .95rem; margin-top: .4rem; }

/* Gastronomie */
.eb-steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.eb-steps li { counter-increment: s; display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--muted); font-size: .96rem; }
.eb-steps li:first-child { border-top: 1.5px solid var(--wp--preset--color--ink); }
.eb-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--wp--preset--font-family--mono); font-size: .9rem; color: var(--wp--preset--color--amber-ink); padding-top: .2rem; grid-row: span 2; }
.eb-steps strong { font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--ink); }
.eb-minbox { border: 1.5px solid var(--wp--preset--color--ink); padding: 1.4rem; background: var(--wp--preset--color--surface); }
.eb-minbox > * { margin-block: 0 .8rem !important; }
.eb-minbox__v { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 2.4rem; line-height: 1; }
.eb-minbox ul { padding-left: 1.1rem; font-size: .96rem; }

/* Kontakt / Datenschutz */
.eb-contact h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.eb-legal { gap: 3rem !important; }
.eb-legal > .wp-block-column:first-child { flex: 1 1 auto; }
.eb-legal > .wp-block-column:last-child { flex: 0 0 280px; }
.eb-legal > .wp-block-column:last-child .eb-ds-settings { position: sticky; top: 90px; }
.eb-legal h2 { font-size: 1.7rem; margin-top: 1.8rem; }
.eb-legal h2:first-child { margin-top: 0; }
@media (max-width: 781px) { .eb-legal > .wp-block-column:last-child { flex-basis: auto; } }

/* Bier-Einzelseite */
.eb-bier-text { font-size: 1.1rem; max-width: 760px; }
.eb-bier-cta { margin-top: 2rem; }

/* ------------------------------------------------------------ Fusszeile */
.eb-site-footer { margin-top: 2rem; }
.eb-footer { max-width: 1180px; margin-inline: auto; border-top: 1.5px solid var(--wp--preset--color--ink); padding-block: 2rem 2.6rem; font-family: var(--wp--preset--font-family--mono); font-size: .78rem; color: var(--wp--preset--color--muted); }
.eb-footer p { margin: .4rem 0; }
.eb-footer a { color: var(--wp--preset--color--ink); text-decoration: none; }
.eb-footer a:hover { color: var(--wp--preset--color--amber-ink); }
.eb-footer-nav { font-family: var(--wp--preset--font-family--mono) !important; font-size: .78rem !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; gap: .4rem 1.2rem; }