/* ============================================================
   Weingut Hafner & Tschank — design tokens + baseline
   Derived from the customer's REAL branding:
     · the logo wordmark — brick-red brush script "Hafner" with a
       hard BLACK offset shadow, black rough-brush "TSCHANK"
     · the old site's chrome — olive/sand nav (#c7c290), slate-
       teal link colour (#455e60), leaf green headings (#68a94a)
   The logo's offset shadow becomes the site's structural motif:
   .offset-frame puts a solid ink block behind every photo.
   Playfair Display (display, a didone in the lineage of the old
   site's Abril Fatface) + Inter (body). All rules scope under
   #wrapwrap.o-hafner; element resets use :where() to keep bare-
   element specificity low (we still beat Bootstrap because these
   links load after the bundle).
   ============================================================ */

:root {
  /* palette — sampled from the logo + the legacy site chrome */
  --hf-paper: #faf8f2;        /* warm paper — page background */
  --hf-card: #ffffff;         /* raised cards */
  --hf-linen: #f1ede1;        /* alternating sections */
  --hf-sand: #c7c290;         /* the old site's nav olive — bands, rules */
  --hf-sand-dim: #ded9b8;     /* soft olive tint */
  --hf-red: #c03a44;          /* the logo script red — primary accent */
  --hf-red-dark: #9c2a34;     /* hover / text-on-paper (AA) */
  --hf-red-deep: #7d1f28;
  --hf-ink: #241f1d;          /* the logo's black — headings, offset blocks */
  --hf-slate: #2e4547;        /* deep slate-teal — dark sections, footer */
  --hf-slate-2: #3a5457;      /* raised panels on dark */
  --hf-slate-3: #4d686b;      /* hairlines on dark */
  --hf-green: #6d9e46;        /* the old site's heading green — status only */
  --hf-gold: #b08a2e;         /* medals / awards */
  --hf-line: rgba(36, 31, 29, 0.14);  /* hairlines on paper */
  --hf-body: #4a4440;         /* body text on light */
  --hf-muted: #756d67;        /* secondary text on light */
  --hf-cream: #f3efe4;        /* text on dark */
  --hf-cream-dim: #bcc7c4;    /* secondary text on dark */

  /* type */
  --hf-font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --hf-font-body: 'Inter', -apple-system, 'Segoe UI', Helvetica, sans-serif;

  /* layout — squarer and more editorial than the sibling demos */
  --hf-wrap: 1180px;
  --hf-radius: 4px;
  --hf-radius-lg: 8px;
  --hf-header-h: 84px;
  --hf-shadow: 0 8px 26px rgba(36, 31, 29, 0.09);
  --hf-shadow-lg: 0 18px 48px rgba(36, 31, 29, 0.16);
}

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

/* the mobile drawer waits off-canvas via translateX(100%); transformed boxes
   count as scrollable overflow, so clip horizontal overflow at the root */
html:has(#wrapwrap.o-hafner),
body:has(#wrapwrap.o-hafner) {
  overflow-x: clip;
}

#wrapwrap.o-hafner {
  background: var(--hf-paper);
  color: var(--hf-body);
  font-family: var(--hf-font-body);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

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

:where(#wrapwrap.o-hafner) h1,
:where(#wrapwrap.o-hafner) h2,
:where(#wrapwrap.o-hafner) h3,
:where(#wrapwrap.o-hafner) h4 {
  font-family: var(--hf-font-display);
  font-weight: 600;
  line-height: 1.14;
  color: var(--hf-ink);
  margin: 0;
}

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

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

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

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

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

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

/* ---------- buttons — squared and letterspaced, not pills ---------- */

.o-hafner .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--hf-font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1em 1.9em;
  border-radius: var(--hf-radius);
  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-hafner .btn:hover { transform: translateY(-1px); }

.o-hafner .btn--primary { background: var(--hf-red); color: #fff; }
.o-hafner .btn--primary:hover { background: var(--hf-red-dark); color: #fff; }

.o-hafner .btn--ink { background: var(--hf-ink); color: #fff; }
.o-hafner .btn--ink:hover { background: var(--hf-slate); color: #fff; }

.o-hafner .btn--ghost {
  border-color: var(--hf-ink);
  color: var(--hf-ink);
  background: transparent;
}
.o-hafner .btn--ghost:hover {
  background: var(--hf-ink);
  color: var(--hf-paper);
}

.o-hafner .btn--ghost-light {
  border-color: rgba(243, 239, 228, 0.45);
  color: var(--hf-cream);
  background: transparent;
}
.o-hafner .btn--ghost-light:hover {
  background: var(--hf-cream);
  color: var(--hf-slate);
  border-color: var(--hf-cream);
}

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

.o-hafner .section { padding: 5.5rem 0; }
.o-hafner .section--tight { padding: 3.5rem 0; }
.o-hafner .section--linen { background: var(--hf-linen); }
.o-hafner .section--dark {
  background: var(--hf-slate);
  color: var(--hf-cream);
}
.o-hafner .section--dark h1,
.o-hafner .section--dark h2,
.o-hafner .section--dark h3,
.o-hafner .section--dark h4 { color: var(--hf-cream); }

/* the kicker carries a short olive rule — the logo's underline stroke */
.o-hafner .kicker {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-family: var(--hf-font-body);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hf-red-dark);
  margin: 0 0 1rem;
}
.o-hafner .kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--hf-sand);
  flex-shrink: 0;
}
.o-hafner .section--dark .kicker { color: var(--hf-sand); }
.o-hafner .section-head--center .kicker { justify-content: center; }

.o-hafner .section-title {
  font-size: clamp(2rem, 3.7vw, 2.95rem);
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
}

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

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

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

/* ---------- the offset frame — THE brand motif ----------
   The logo sets its red script on a hard black offset shadow.
   Every photo on the site repeats that: a solid ink block sits
   down-right behind the image. */
.o-hafner .offset-frame {
  position: relative;
  display: block;
}
.o-hafner .offset-frame::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: var(--hf-ink);
  border-radius: var(--hf-radius-lg);
  z-index: 0;
}
.o-hafner .offset-frame--red::before { background: var(--hf-red); }
.o-hafner .offset-frame--sand::before { background: var(--hf-sand); }
.o-hafner .offset-frame > img,
.o-hafner .offset-frame > picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--hf-radius-lg);
}
@media (max-width: 700px) {
  .o-hafner .offset-frame::before { inset: 12px -12px -12px 12px; }
}

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

.o-hafner .prose p { margin-bottom: 1.1em; }
.o-hafner .prose p:last-child { margin-bottom: 0; }
.o-hafner .prose--lg p { font-size: 1.06rem; }

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

.o-hafner [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.o-hafner [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .o-hafner [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-hafner.qa-noanim [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}