/* ============================================================
   Winzerfamilie Artner — design tokens + baseline
   Taken from the customer's CURRENT logo (logo-botanical.png):
   pine-green botanical line art + letterspaced geometric caps
   ("Winzerfamilie ARTNER JOSEF") on white. The legacy site adds
   the wine-red (#a03636, the "Rauchkuchl" script) used here as
   the single warm accent. Josefin Sans (display — the logo's
   letterforms) + Mulish (body). All rules scope under
   #wrapwrap.o-artner; element resets use :where() to keep
   bare-element specificity (we still beat Bootstrap because
   these links load after the bundle).
   ============================================================ */

:root {
  /* palette — pine sampled from the logo lettering (#285f58) */
  --ar-paper: #fcfbf7;       /* warm white — page background */
  --ar-card: #ffffff;        /* raised cards */
  --ar-sage: #eff2e7;        /* alternating sections, soft sage */
  --ar-cream: #f4edda;       /* legacy-site cream — warm highlight panels */
  --ar-pine: #285f58;        /* the logo green — primary */
  --ar-pine-dark: #1d4a44;   /* hover / small text on light (AA) */
  --ar-pine-deep: #10312d;   /* dark sections — deep pine */
  --ar-pine-2: #1a453f;      /* raised panels on dark */
  --ar-pine-3: #2e5c54;      /* borders / hairlines on dark */
  --ar-wine: #a03636;        /* legacy wine red — Rauchkuchl, tags, accents */
  --ar-wine-dark: #8a2b2b;
  --ar-line: rgba(36, 58, 50, 0.14);  /* hairlines on light */
  --ar-ink: #22312c;         /* body text on light */
  --ar-muted: #5c6a63;       /* secondary text on light */
  --ar-mist: #f6f8f2;        /* text on dark */
  --ar-mist-dim: #adc4bc;    /* secondary text on dark */
  --ar-open: #4caf6d;        /* open-status dot */

  /* type */
  --ar-font-display: 'Josefin Sans', 'Avenir Next', sans-serif;
  --ar-font-body: 'Mulish', -apple-system, 'Segoe UI', sans-serif;

  /* layout */
  --ar-wrap: 1160px;
  --ar-radius: 10px;
  --ar-radius-lg: 16px;
  --ar-header-h: 84px;
  --ar-shadow: 0 10px 30px rgba(24, 46, 40, 0.09);
  --ar-shadow-lg: 0 18px 50px rgba(24, 46, 40, 0.15);
}

/* ---------- 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-artner),
body:has(#wrapwrap.o-artner) {
  overflow-x: clip;
}

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

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

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

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

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

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

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

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

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

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

/* rectangular, letterspaced — the wordmark's precision, not Krail's pills */
.o-artner .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--ar-font-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95em 1.9em 0.8em; /* Josefin sits high — pad the bottom less */
  border-radius: 3px;
  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-artner .btn:hover { transform: translateY(-1px); }

.o-artner .btn--primary {
  background: var(--ar-pine);
  color: #fff;
}
.o-artner .btn--primary:hover {
  background: var(--ar-pine-dark);
  color: #fff;
}

.o-artner .btn--wine {
  background: var(--ar-wine);
  color: #fff;
}
.o-artner .btn--wine:hover {
  background: var(--ar-wine-dark);
  color: #fff;
}

.o-artner .btn--ghost {
  border-color: currentColor;
  color: var(--ar-pine-dark);
  background: transparent;
}
.o-artner .btn--ghost:hover { color: var(--ar-wine); }

.o-artner .btn--ghost-light {
  border-color: rgba(246, 248, 242, 0.45);
  color: var(--ar-mist);
  background: transparent;
}
.o-artner .btn--ghost-light:hover {
  border-color: var(--ar-mist);
  color: #fff;
}

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

.o-artner .section { padding: 5.5rem 0; }
.o-artner .section--tight { padding: 3.5rem 0; }
.o-artner .section--sage { background: var(--ar-sage); }
.o-artner .section--cream { background: var(--ar-cream); }
.o-artner .section--dark {
  background: var(--ar-pine-deep);
  color: var(--ar-mist);
}

.o-artner .kicker {
  font-family: var(--ar-font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ar-pine);
  margin: 0 0 1rem;
}
.o-artner .section--dark .kicker { color: var(--ar-mist-dim); }
.o-artner .kicker--wine { color: var(--ar-wine); }

.o-artner .section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  letter-spacing: 0.04em;
  margin: 0 0 1.2rem;
}

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

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

/* rule under titles — a fine line with a leaf-diamond, echoing the
   botanical engravings around the wordmark */
.o-artner .rule {
  position: relative;
  width: 88px;
  height: 9px;
  border: 0;
  background:
    linear-gradient(var(--ar-pine), var(--ar-pine)) left center / 34px 1px no-repeat,
    linear-gradient(var(--ar-pine), var(--ar-pine)) right center / 34px 1px no-repeat;
  margin: 1.3rem 0;
}
.o-artner .rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--ar-wine);
  transform: translate(-50%, -50%) rotate(45deg);
}
.o-artner .section-head--center .rule { margin-inline: auto; }
.o-artner .section--dark .rule {
  background:
    linear-gradient(var(--ar-mist-dim), var(--ar-mist-dim)) left center / 34px 1px no-repeat,
    linear-gradient(var(--ar-mist-dim), var(--ar-mist-dim)) right center / 34px 1px no-repeat;
}

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

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

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

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

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