/* ============================================================
   Weingut Fleck — design tokens + baseline
   Palette taken from the ORIGINAL fleck-wein.at site (2004,
   main_.css + wordmark m_w.gif + the watercolor bottle labels):
   deep wine red #821625 on warm cream #fff5ef, dusty rose
   #a2525c, soft mauve #745379 / lilac #ded2e0, watercolor gold.
   Playfair Display (display) + Public Sans (body). All rules
   scope under #wrapwrap.o-fleck; element resets use :where() to
   keep bare-element specificity (we still beat Bootstrap because
   these links load after the bundle).
   ============================================================ */

:root {
  /* palette — from the old site */
  --fl-paper: #fff5ef;       /* the 2004 page background — kept verbatim */
  --fl-card: #fffdfb;        /* raised cards on cream */
  --fl-blush: #f8e9e2;       /* alternating sections, rose-tinted cream */
  --fl-wine: #821625;        /* the old scrollbar/heading wine red — primary */
  --fl-wine-dark: #6a111f;   /* hover / small text on cream (AA) */
  --fl-wine-deep: #4d0c17;
  --fl-gold: #d9a441;        /* watercolor-label ochre — accents on dark */
  --fl-mauve: #745379;       /* the old link mauve — rules, frame outlines */
  --fl-aubergine: #341019;   /* dark sections/footer — wine-black */
  --fl-aubergine-2: #481f2a; /* raised panels on dark */
  --fl-aubergine-3: #5e3140; /* borders / hairlines on dark */
  --fl-lilac: #ded2e0;       /* the old lilac — rare soft accents on dark */
  --fl-rose: #a2525c;        /* the old dusty rose — prices, highlights */
  --fl-line: rgba(96, 41, 52, 0.16);   /* hairlines on cream (warm) */
  --fl-ink: #2e2226;         /* body text on light */
  --fl-muted: #6f5a61;       /* secondary text on light */
  --fl-cream: #f9ede8;       /* text on dark */
  --fl-cream-dim: #d6bcbe;   /* secondary text on dark */
  --fl-open: #4caf6d;        /* open-status dot */

  /* type */
  --fl-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fl-font-body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;

  /* layout — crisper corners than the sibling demos: the old site was all
     fine straight rules, we keep that language */
  --fl-wrap: 1160px;
  --fl-radius: 6px;
  --fl-radius-lg: 10px;
  --fl-header-h: 84px;
  --fl-shadow: 0 10px 30px rgba(77, 12, 23, 0.10);
  --fl-shadow-lg: 0 18px 50px rgba(77, 12, 23, 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-fleck),
body:has(#wrapwrap.o-fleck) {
  overflow-x: clip;
}

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

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

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

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

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

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

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

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

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

/* ---------- buttons ----------
   Squared with a fine 1.5px rule — the old site's language of thin straight
   frames (no pills, that's the Krail look). */

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

.o-fleck .btn--primary {
  background: var(--fl-wine);
  color: #fff;
}
.o-fleck .btn--primary:hover {
  background: var(--fl-wine-dark);
  color: #fff;
}

.o-fleck .btn--ghost {
  border-color: currentColor;
  color: var(--fl-wine-dark);
  background: transparent;
}
.o-fleck .btn--ghost:hover { color: var(--fl-mauve); }

.o-fleck .btn--ghost-light {
  border-color: rgba(249, 237, 232, 0.45);
  color: var(--fl-cream);
  background: transparent;
}
.o-fleck .btn--ghost-light:hover {
  border-color: var(--fl-gold);
  color: #fff;
}

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

.o-fleck .section { padding: 5.5rem 0; }
.o-fleck .section--tight { padding: 3.5rem 0; }
.o-fleck .section--blush { background: var(--fl-blush); }
.o-fleck .section--dark {
  background: var(--fl-aubergine);
  color: var(--fl-cream);
}

.o-fleck .kicker {
  font-family: var(--fl-font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fl-wine);
  margin: 0 0 0.9rem;
}
.o-fleck .section--dark .kicker { color: var(--fl-gold); }

.o-fleck .section-title {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  letter-spacing: 0.01em;
  margin: 0 0 1.2rem;
}

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

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

/* double rule under titles — wine red over mauve, the fine double
   hairlines of the 2004 tables reborn */
.o-fleck .rule {
  width: 72px;
  height: 7px;
  border: 0;
  border-top: 2px solid var(--fl-wine);
  border-bottom: 1px solid var(--fl-mauve);
  background: transparent;
  margin: 1.3rem 0;
}
.o-fleck .section-head--center .rule { margin-inline: auto; }
.o-fleck .section--dark .rule {
  border-top-color: var(--fl-gold);
  border-bottom-color: var(--fl-aubergine-3);
}

/* watercolor stripe — nod to the hand-painted Fleck labels: a soft
   multi-tone wash, pure CSS */
.o-fleck .aqua-stripe {
  width: 120px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  margin: 1.3rem 0;
  background:
    radial-gradient(24px 12px at 12% 50%, rgba(130, 22, 37, 0.85), transparent 70%),
    radial-gradient(30px 12px at 38% 40%, rgba(217, 164, 65, 0.75), transparent 72%),
    radial-gradient(28px 12px at 64% 60%, rgba(116, 83, 121, 0.7), transparent 70%),
    radial-gradient(26px 12px at 88% 45%, rgba(162, 82, 92, 0.8), transparent 72%);
  filter: blur(0.4px);
}
.o-fleck .section-head--center .aqua-stripe { margin-inline: auto; }

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

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

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

/* ---------- demo notice (invented content is always labelled) ---------- */

.o-fleck .demo-note {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fl-mauve);
  border: 1px dashed var(--fl-mauve);
  border-radius: 4px;
  padding: 0.25em 0.7em;
  margin-bottom: 1rem;
}
.o-fleck .section--dark .demo-note { color: var(--fl-lilac); border-color: var(--fl-lilac); }

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

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