/* ============================================================
   Haydnbräu — design tokens + baseline
   Dark-malt / amber brewery look. Oswald (condensed display) +
   Inter (body). All rules scope under #wrapwrap.o-haydn; element
   resets use :where() to keep bare-element specificity (we still
   beat Bootstrap because these links load after the bundle).
   ============================================================ */

:root {
  /* palette */
  --hb-dark: #171310;        /* near-black malt — hero, header, footer */
  --hb-dark-2: #221b15;      /* raised panels on dark */
  --hb-dark-3: #2e251c;      /* borders / hairlines on dark */
  --hb-amber: #ffe600;       /* brand yellow — the original site's .gelb #FFE600 */
  --hb-amber-soft: #fff45c;  /* hover / highlights on dark */
  --hb-copper: #cc0000;      /* on-light accent — the original site's link red
                                (bright yellow is unreadable as text on cream) */
  --hb-paper: #ffe600;       /* content background — the ORIGINAL site yellow,
                                same as the logo banner (user request) */
  --hb-card: #fffdf0;        /* card / surface color so content pops on yellow */
  --hb-sand: #fae7a3;        /* alternating sections — the site's .braun straw */
  --hb-line: rgba(38, 32, 26, 0.18);  /* borders on yellow */
  --hb-ink: #26201a;         /* body text on light */
  --hb-muted: #5d5243;       /* secondary text on light (dark enough for the
                                yellow background) */
  --hb-cream: #f5efe3;       /* text on dark */
  --hb-cream-dim: #bfb4a2;   /* secondary text on dark */
  --hb-green: #4caf6d;       /* open-status dot */

  /* type */
  --hb-font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --hb-font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* layout */
  --hb-wrap: 1160px;
  --hb-radius: 10px;
  --hb-radius-lg: 16px;
  --hb-header-h: 76px;
  --hb-shadow: 0 10px 30px rgba(23, 19, 16, 0.10);
  --hb-shadow-lg: 0 18px 50px rgba(23, 19, 16, 0.16);
}

/* ---------- baseline ---------- */

#wrapwrap.o-haydn {
  background: var(--hb-paper);
  color: var(--hb-ink);
  font-family: var(--hb-font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

:where(#wrapwrap.o-haydn) img {
  max-width: 100%;
  height: auto;
}

:where(#wrapwrap.o-haydn) h1,
:where(#wrapwrap.o-haydn) h2,
:where(#wrapwrap.o-haydn) h3,
:where(#wrapwrap.o-haydn) h4 {
  font-family: var(--hb-font-display);
  font-weight: 600;
  line-height: 1.15;
  color: inherit;
  margin: 0;
}

:where(#wrapwrap.o-haydn) p {
  margin: 0 0 1em;
}

:where(#wrapwrap.o-haydn) a {
  color: var(--hb-copper);
  text-decoration: none;
}
:where(#wrapwrap.o-haydn) a:hover {
  color: #a30000;
}
/* real specificity, all states: Odoo/Bootstrap underlines hovered links,
   which doubled up with the nav's border-bottom "current page" line */
.o-haydn a,
.o-haydn a:hover,
.o-haydn a:focus {
  text-decoration: none;
}

:where(#wrapwrap.o-haydn) ul,
:where(#wrapwrap.o-haydn) ol {
  margin: 0;
  padding: 0;
}

:where(#wrapwrap.o-haydn) address {
  font-style: normal;
  margin: 0;
}

.o-haydn .wrap {
  width: min(100% - 2.5rem, var(--hb-wrap));
  margin-inline: auto;
}

.o-haydn .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.o-haydn .skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  width: auto;
  height: auto;
  clip: auto;
  background: var(--hb-amber);
  color: var(--hb-dark);
  padding: 0.6em 1em;
  border-radius: 6px;
  font-weight: 600;
}

/* ---------- buttons ---------- */

.o-haydn .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--hb-font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.o-haydn .btn:hover { transform: translateY(-1px); }

.o-haydn .btn--primary {
  background: var(--hb-amber);
  color: var(--hb-dark);
}
.o-haydn .btn--primary:hover {
  background: var(--hb-amber-soft);
  color: var(--hb-dark);
}

.o-haydn .btn--ghost {
  border-color: currentColor;
  color: var(--hb-ink);
  background: transparent;
}
.o-haydn .btn--ghost:hover { color: var(--hb-copper); }

/* On yellow (non-dark) sections a yellow primary button would vanish —
   flip it to the logo's black-ribbon style: dark plate, yellow type. */
.o-haydn .section:not(.section--dark) .btn--primary {
  background: var(--hb-dark);
  color: var(--hb-amber);
}
.o-haydn .section:not(.section--dark) .btn--primary:hover {
  background: var(--hb-dark-3);
  color: var(--hb-amber-soft);
}

.o-haydn .btn--ghost-light {
  border-color: rgba(245, 239, 227, 0.45);
  color: var(--hb-cream);
  background: transparent;
}
.o-haydn .btn--ghost-light:hover {
  border-color: var(--hb-amber);
  color: var(--hb-amber-soft);
}

/* ---------- section scaffolding ---------- */

.o-haydn .section { padding: 5.5rem 0; }
.o-haydn .section--tight { padding: 3.5rem 0; }
.o-haydn .section--sand { background: var(--hb-sand); }
.o-haydn .section--dark {
  background: var(--hb-dark);
  color: var(--hb-cream);
}

.o-haydn .kicker {
  font-family: var(--hb-font-display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hb-copper);
  margin: 0 0 0.9rem;
}
.o-haydn .section--dark .kicker { color: var(--hb-amber); }

.o-haydn .section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 1.2rem;
}

.o-haydn .section-lede {
  max-width: 46em;
  color: var(--hb-muted);
  font-size: 1.06rem;
}
.o-haydn .section--dark .section-lede { color: var(--hb-cream-dim); }

.o-haydn .section-head { margin-bottom: 2.6rem; }
.o-haydn .section-head--center { text-align: center; }
.o-haydn .section-head--center .section-lede { margin-inline: auto; }

/* accent rule under titles — red: yellow would vanish on the yellow bg */
.o-haydn .rule {
  width: 64px;
  height: 3px;
  background: var(--hb-copper);
  border: 0;
  border-radius: 2px;
  margin: 1.4rem 0;
}
.o-haydn .section-head--center .rule { margin-inline: auto; }

/* anchor targets must clear the sticky header when jumped to */
.o-haydn [id] {
  scroll-margin-top: calc(var(--hb-header-h) + 16px);
}

/* ---------- prose ---------- */

.o-haydn .prose p { margin-bottom: 1.1em; }
.o-haydn .prose p:last-child { margin-bottom: 0; }

/* ---------- reveal on scroll ---------- */

.o-haydn [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.o-haydn [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .o-haydn [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* QA switch: ?noanim=1 (main.js sets the class) — screenshots in the hidden
   browser pane freeze mid-transition, this renders everything instantly. */
#wrapwrap.o-haydn.qa-noanim [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}