/* ====================================================================
   Events category navigation band — scoped styles
   --------------------------------------------------------------------
   HARD RULES (same as the rest of this theme's scoped CSS):
   • Every selector is scoped under .pe-cat-nav.
   • Custom properties live ONLY on the wrapper — never on :root.
   • No --gs-* (GreenShift) or Kadence global variable is read or written,
     so nothing here can leak into the rest of the site.
   • Body font is inherited (Inter, site-wide) — we don't set a family.

   SPECIFICITY NOTE
   The band renders INSIDE The Events Calendar's `.tribe-common` container
   (so the Filter Bar AJAX can't duplicate it). `.tribe-common` ships
   aggressive element resets — `.tribe-common ul`, `.tribe-common li`,
   `.tribe-common a` (specificity 0,1,1–0,1,3) — that beat plain single-class
   selectors and stripped the pills/cards. Every inner rule below is therefore
   written as `.pe-cat-nav .pe-cat-nav__x` (0,2,0), which out-specifies all of
   TEC's element resets (our elements carry no `.tribe-*` classes, so no TEC
   two-class rule can match them). No !important needed.
   ==================================================================== */


/* ── Display font: self-hosted Zilla Slab Bold (card titles only) ────
   The card titles run at ~22px, and the landing page's Fraunces Black is cut
   for headline sizes: measured off the files, it has the lowest x-height of
   the faces we compared (0.69 of cap height) and 3.03x stroke contrast, so its
   hairlines thin out and the titles read soft. Zilla Slab Bold measures 1.38x
   contrast — the flattest of the set — and sets only ~5% wider, so line breaks
   barely move.

   Note this deliberately breaks the shared face with the Action Painting
   landing page, which stays on Fraunces; the band now carries its own 26KB
   file (OFL, licence alongside). Registered under our OWN family name and
   applied only inside .pe-cat-nav, so it cannot leak a style anywhere else on
   the site. The src path is CSS-relative, so it resolves identically for the
   static dev preview and the WP-enqueued copy.

   Declared at 700 (the weight the file actually is) and requested at 700 in
   the title rule below — asking for 900 off a 700 file invites the browser to
   synthesise a faux-bold and smear the very letterforms we picked this for. */
@font-face {
  font-family: 'PE Display';
  src: url('fonts/ZillaSlab-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.pe-cat-nav {
  /* Brand */
  --pe-ink: #373e48;          /* slate text (matches --gs-colorone) */
  --pe-pink: #df4c7d;         /* brand pink (matches --gs-colortwo) */
  --pe-muted: #6b7280;
  --pe-card-bg: #ffffff;
  --pe-line: #ececf0;
  --pe-chip-bg: #f6f6f8;

  /* Per-group accent — re-pointed by the .pe-cat-nav__group--* modifiers.
     TWO tokens, because the landing page's accents are neon values tuned for
     its near-black surface and several of them are invisible on white:
       --pe-accent      the exact landing-page colour. DECORATIVE ONLY — the top
                        stripe and the pale chip tints (which carry dark text).
       --pe-accent-ink  the same hue darkened until it clears WCAG AA (4.5:1) on
                        white. Everything that must be perceivable: borders,
                        the active dot.
     Raw on white the landing accents measure magenta 3.5:1, cyan 1.5:1, lime
     1.2:1 — a lime border at 1.2:1 is simply not there. Keep that split when
     adding a group; never put the bare accent on text or a hairline. */
  --pe-accent: var(--pe-pink);
  --pe-accent-ink: var(--pe-pink);

  /* Rhythm — radius matches the landing page's .ap-card. */
  --pe-wrap: var(--wp--style--global--wide-size, 1200px);
  --pe-pad: clamp(1rem, 4vw, 2rem);
  --pe-radius: 18px;
  --pe-gap: clamp(0.75rem, 1.5vw, 1.25rem);

  /* Display type stack: Zilla Slab Bold, serif fallbacks. Body text keeps
     inheriting the site font (Inter) — same display/body split as the landing
     page, though the two no longer share the display face. */
  --pe-display: 'PE Display', Georgia, 'Times New Roman', serif;

  box-sizing: border-box;
  width: 100%;
  margin: 0 auto clamp(1.25rem, 3vw, 2.25rem);
  padding-top: clamp(1rem, 2.5vw, 1.75rem);
}

.pe-cat-nav *,
.pe-cat-nav *::before,
.pe-cat-nav *::after { box-sizing: border-box; }

.pe-cat-nav .pe-cat-nav__inner {
  width: 100%;
  max-width: var(--pe-wrap);
  margin-inline: auto;
  padding-inline: var(--pe-pad);
}

/* ── Heading row: intro text + "Show all events" ───────────────────── */
.pe-cat-nav .pe-cat-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.1rem);
}

.pe-cat-nav .pe-cat-nav__heading {
  margin: 0;
  padding: 0;
  color: var(--pe-ink);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
}

/* "Show all events" — a white outline pill so it reads as a distinct action,
   not one of the coloured category pills.
   IMPORTANT: the background is an explicit #fff, never `transparent`. A
   transparent background rendered dark/near-black on some Android Chrome builds
   (auto-dark-theme treating the empty background as canvas), hiding the text;
   the cards never had that problem because they use an explicit #fff too. All
   states stay light for the same reason. */
.pe-cat-nav .pe-cat-nav__all {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 1em;
  border-radius: 999px;
  border: 1.5px solid var(--pe-ink);
  background: #fff;
  color: var(--pe-ink);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pe-cat-nav .pe-cat-nav__all::after { content: " \2192"; }
.pe-cat-nav .pe-cat-nav__all:hover,
.pe-cat-nav .pe-cat-nav__all:focus-visible {
  background: var(--pe-chip-bg);
  color: var(--pe-ink);
}
/* Active = "you're viewing all". Same treatment as an active category pill:
   the brand pink (= the Abstract accent) as a LIGHT tint with a pink border and
   DARK text. No white-on-dark anywhere, so Android Chrome's auto-dark can't turn
   it into black-on-black. */
.pe-cat-nav .pe-cat-nav__all--active {
  background: color-mix(in srgb, var(--pe-pink) 22%, #fff);
  border-color: var(--pe-pink);
  color: var(--pe-ink);
  font-weight: 800;
}
.pe-cat-nav .pe-cat-nav__all:focus-visible {
  outline: 2px solid var(--pe-ink);
  outline-offset: 2px;
}

/* ── Groups row ────────────────────────────────────────────────────── */
.pe-cat-nav .pe-cat-nav__groups {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* Each card hugs its own content instead of stretching to the tallest in the
     row — short groups (e.g. Keramik) don't get a big empty bottom. */
  align-items: start;
  gap: var(--pe-gap);
}

/* ── Group card ──────────────────────────────────────────────────────
   Same construction as the landing page's .ap-card — accent stripe across the
   TOP edge, rounded, hover lift — but on white instead of ink. */
.pe-cat-nav .pe-cat-nav__group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  background: var(--pe-card-bg);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  /* Extra top padding so the content clears the accent stripe. */
  padding: clamp(1.1rem, 1.9vw, 1.45rem) clamp(0.9rem, 1.6vw, 1.25rem) clamp(0.9rem, 1.6vw, 1.25rem);
  /* Clips the stripe's ends to the card's rounded corners. */
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* Accent stripe along the top edge — the card's group colour. */
.pe-cat-nav .pe-cat-nav__group::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--pe-accent);
}

.pe-cat-nav .pe-cat-nav__group:hover {
  border-color: color-mix(in srgb, var(--pe-accent-ink) 45%, var(--pe-line));
  box-shadow: 0 8px 24px rgba(55, 62, 72, 0.08);
  transform: translateY(-2px);
}

/* Display-serif title in the site's slate — same ink as the band heading and
   the body copy around it. Colour identity is carried by the top stripe alone,
   which is how the landing page's cards do it too: there the titles are
   neutral and only the big "01/02/03" numerals take the accent. */
.pe-cat-nav .pe-cat-nav__title {
  margin: 0;
  padding: 0;
  color: var(--pe-ink);
  font-family: var(--pe-display);
  font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.4rem);
  font-weight: 700;
  /* No extra tracking: the 0.012em here was propping up Fraunces Black, which
     is spaced for display sizes. Zilla Slab is spaced for text and only tightens
     up if you add to it. */
  letter-spacing: 0;
  line-height: 1.12;
}

.pe-cat-nav .pe-cat-nav__desc {
  margin: 0;
  color: var(--pe-muted);
  font-size: 0.83rem;
  line-height: 1.45;
}

/* Optional title link (when a group points at a landing page). */
.pe-cat-nav .pe-cat-nav__title-link {
  color: inherit;
  text-decoration: none;
}
.pe-cat-nav .pe-cat-nav__title-link::after {
  content: " \2192"; /* → */
  color: var(--pe-accent-ink);
}
.pe-cat-nav .pe-cat-nav__title-link:hover { color: var(--pe-accent-ink); }

/* ── Chips ─────────────────────────────────────────────────────────── */
.pe-cat-nav .pe-cat-nav__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pe-cat-nav .pe-cat-nav__chip-wrap { margin: 0; padding: 0; }

.pe-cat-nav .pe-cat-nav__chip {
  display: inline-block;
  padding: 0.4em 0.85em;
  border-radius: 999px;
  background: var(--pe-chip-bg);
  border: 1px solid transparent;
  color: var(--pe-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  /* Wrap long category names (e.g. "Acrylic Pouring (Acryl-Giessen)") instead
     of overflowing the card. Short chips still sit on one line. */
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Hover/focus: light accent-tinted pill + accent border, text stays dark slate.
   Solid-accent-fill-with-white failed WCAG AA on the lighter accents (amber
   ~2.5:1, teal/green ~3.0:1); a tint with dark text is well above 4.5:1 and
   keeps each group's colour identity. (color-mix degrades gracefully: if a
   browser ignores it, the accent border + dark text still signal hover.) */
.pe-cat-nav .pe-cat-nav__chip:hover,
.pe-cat-nav .pe-cat-nav__chip:focus-visible {
  background: color-mix(in srgb, var(--pe-accent) 16%, #fff);
  border-color: var(--pe-accent-ink);
  color: var(--pe-ink);
}

/* Clear keyboard focus ring (kept even when hover styles change colour). */
.pe-cat-nav .pe-cat-nav__chip:focus-visible,
.pe-cat-nav .pe-cat-nav__title-link:focus-visible {
  outline: 2px solid var(--pe-ink);
  outline-offset: 2px;
}

/* Active chip = the category you're currently viewing. Stronger than hover:
   bolder, accent border, a leading accent dot — dark text on a light accent
   tint, so it stays WCAG-AA on every group colour. */
.pe-cat-nav .pe-cat-nav__chip--active {
  background: color-mix(in srgb, var(--pe-accent) 22%, #fff);
  border-color: var(--pe-accent-ink);
  color: var(--pe-ink);
  font-weight: 800;
}
.pe-cat-nav .pe-cat-nav__chip--active::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--pe-accent-ink);
  vertical-align: 0.05em;
}

/* ── Per-group accent colours ────────────────────────────────────────
   The three stripe colours are the Action Painting landing page's first three
   card accents verbatim (--ap-magenta / --ap-cyan / --ap-lime). The paired ink
   is the same hue darkened onto white; measured contrast is noted per line. */
.pe-cat-nav .pe-cat-nav__group--abstract {
  --pe-accent: #FF2D95;      /* ap-magenta */
  --pe-accent-ink: #B82069;  /* 6.1:1 on white */
}
.pe-cat-nav .pe-cat-nav__group--figurative {
  --pe-accent: #00E5FF;      /* ap-cyan */
  --pe-accent-ink: #00707F;  /* 5.8:1 on white */
}
.pe-cat-nav .pe-cat-nav__group--more {
  --pe-accent: #C6FF00;      /* ap-lime */
  --pe-accent-ink: #5C7000;  /* 5.6:1 on white */
}

/* ── Mobile: turn the grid into a horizontal swipe rail ────────────── */
@media (max-width: 781px) {
  /* Breathing room before the calendar header ("Anstehend"/"Upcoming") on
     mobile. We push the TEC header itself down — band padding/margin was being
     overlapped by the header's own margins, and on mobile TEC omits the top-bar
     spacing it adds on desktop. Scoped to views that contain our band and
     forced past TEC's own header margins. */
  .pe-cat-nav { padding-bottom: 0.5rem; }
  .tribe-common-l-container:has(.pe-cat-nav) .tribe-events-header {
    margin-top: 1.75rem !important;
  }

  /* The rail scrolls WITHIN the inner's padding (no negative-margin bleed), so
     the first card always starts a comfortable --pe-pad in from the screen edge
     — accent rail and all — instead of being clipped off the left. Cards are
     wider than the viewport so the next one still peeks in. */
  .pe-cat-nav .pe-cat-nav__groups {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(76vw, 300px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .pe-cat-nav .pe-cat-nav__group { scroll-snap-align: start; }
}

/* ── Respect reduced-motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pe-cat-nav .pe-cat-nav__group,
  .pe-cat-nav .pe-cat-nav__chip { transition: none; }
  .pe-cat-nav .pe-cat-nav__group:hover { transform: none; }
}

/* ====================================================================
   Layout glue + whitespace
   ==================================================================== */

/* The band renders INSIDE TEC's .tribe-common-l-container. On desktop, drop its
   own horizontal inset so it lines up exactly with the event cards below.
   DESKTOP ONLY — on mobile the inner keeps its --pe-pad padding so the swipe
   rail's first card has edge clearance (see the mobile block above). */
@media (min-width: 782px) {
  .tribe-common-l-container .pe-cat-nav__inner {
    max-width: none;
    padding-inline: 0;
  }
}

/* Whitespace under the menu: collapse the Kadence content-area top padding to a
   comfortable (not huge) value. Targeted by containment (:has) so it only ever
   matches event-archive pages — it cannot touch any other page. Bump/lower the
   clamp to taste. */
.content-container:has(.pe-cat-nav),
.entry-content-wrap:has(.pe-cat-nav),
.entry-content:has(.pe-cat-nav),
#primary:has(.pe-cat-nav),
.site-main:has(.pe-cat-nav) {
  padding-top: clamp(1rem, 2.75vw, 2.25rem) !important;
  margin-top: 0 !important;
}

/* ====================================================================
   Category-archive header — hide the redundant title + breadcrumb
   --------------------------------------------------------------------
   On /events/category/<slug>/ TEC prints the category name as a big H1 AND a
   "Veranstaltungen › <Category>" breadcrumb just above the calendar — redundant
   now that the pills give the same context. Confirmed live DOM:
     header.tribe-events-header
       └ div.tribe-events-header__title > h1.tribe-events-header__title-text
       └ nav.tribe-events-header__breadcrumbs.tribe-events-c-breadcrumbs

   Scoped via :has(.pe-cat-nav) — i.e. only inside a view where our band is
   present — so it needs no body class and can't affect anything else. (The
   title is empty on the main /events/ archive, so hiding it there is a no-op.)
   ==================================================================== */
.tribe-common-l-container:has(.pe-cat-nav) .tribe-events-header__title,
.tribe-common-l-container:has(.pe-cat-nav) .tribe-events-header__breadcrumbs {
  display: none !important;
}

/* SEO note: the title is the page's H1. If you'd rather KEEP it for crawlers
   but hide it visually, swap the title selector above out of this rule and into
   this visually-hidden one instead:
.tribe-common-l-container:has(.pe-cat-nav) .tribe-events-header__title {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
*/