/* ── Kroghof – custom polish on top of Quark 2 ───────────────────────────── */

/* Brand logo: the inlined SVG wordmark renders in the (admin-configurable)
   accent colour instead of Quark's default text colour, and follows the
   theme's dark-mode accent automatically. Also sized up from the theme's
   default 28px — the wordmark reads better a touch larger in the header. */
.navbar-brand svg,
.navbar-brand svg * {
  fill: var(--q2-accent, #4f7a28);
}
.navbar-brand img,
.navbar-brand svg {
  height: 60px;
}

/* Round the photos used in text modules + the full-width potato banner */
.modular-text img,
.modular-hero img {
  border-radius: 18px;
}

/* Turn the .grid blocks inside text modules into soft, mode-adaptive cards */
.modular-text .grid > article {
  background: color-mix(in srgb, currentColor 4%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 18px;
  padding: 1.6rem 1.85rem;
  margin: 0;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.modular-text .grid > article:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, var(--accent, #4f7a28) 55%, transparent);
}
.modular-text .grid > article :is(h3, h4) {
  margin-top: 0;
}

/* Tidy the lists inside the potato cards into divided rows */
.modular-text .grid > article ul {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
}
.modular-text .grid > article li {
  list-style: none;
  padding: .5rem 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent);
}
.modular-text .grid > article li::marker {
  content: "";
}
.modular-text .grid > article li:last-child {
  border-bottom: 0;
}

/* A little breathing room + accent flourish for the hero call-to-action */
.modular-hero p a[role="button"] {
  margin: .4rem .5rem 0 0;
}

/* The hero sits on a dark photo, so the secondary ("outline") CTA must stay
   light in BOTH colour modes — Blades' default button is near-black in light
   mode and becomes invisible over the image. */
.modular-hero a[role="button"].outline {
  background: transparent;
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 75%, transparent);
}
.modular-hero a[role="button"].outline:hover,
.modular-hero a[role="button"].outline:focus {
  background: #fff;
  color: #1f1f1f;
  border-color: #fff;
}

/* Footer styling (markup lives in partials/footer.html.twig) */
#footer .footer-contact {
  margin-bottom: .4rem;
}
#footer .footer-legal {
  font-size: .85rem;
  opacity: .65;
  margin: 0;
}
#footer a {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
#footer a:hover {
  border-bottom-color: currentColor;
}

/* Hero carousel (Direktvermarktung _slider section).
   The slider uses swiffy's native `item-ratio item-ratio-2x1` mode (set on the
   shortcode), which establishes the height itself, absolutely-positions the
   image (no vertical overflow / scroll capture) and centers the nav buttons.
   The slide images are ~2:1, so 2x1 means virtually no cropping. Height is
   half the width, so we cap the width to the content width to keep it ~620px
   tall instead of letting a full-bleed slider become very tall. */
.modular-slider {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.modular-slider .swiffy-slider {
  max-width: 1280px;
  margin-inline: auto;
}
.modular-slider .slider-container > li img {
  border-radius: 0;
}
/* swiffy centers its nav arrows via `.slider-nav { display:flex; align-items:
   center }` (the nav spans top:0->bottom:0, minus the outside-indicator margin,
   so center == the image's vertical center). But Quark's Blades CSS has
   `a[role="button"] { display:inline-block }`, and since the nav anchors carry
   role="button" that selector (specificity 0,1,1) outranks swiffy's
   `.slider-nav` (0,1,0); being absolutely positioned it blockifies to `block`,
   so align-items is ignored and the arrows collapse to the top corners (and the
   next arrow's circle overflows the right edge). Just restore flex and swiffy's
   own native positioning handles both axes correctly. */
.modular-slider .slider-nav {
  display: flex;
}

/* OpenStreetMap embed in the "Anfahrt" text module */
.map-embed {
  margin-top: 1.25rem;
}
.map-embed iframe {
  display: block;
}
.map-embed .map-link {
  margin: .6rem 0 0;
  font-size: .9rem;
}