/* ============================================================================
   Apollo: contact page (/ansprechpartner-2/, page 1361) and the contact form.
   ----------------------------------------------------------------------------
   Two parts:
   1. Management cards -- the psl-text-blocks of the management row, restyled
      by CSS only (no content change), scoped to body.ap-restyle, which
      functions.php sets on this page in the frontend AND in the editor.
   2. woogency/kontakt-bereiche in Apollo's look. The block ships the circus
      palette as custom properties; this file only re-points them.

   Every selector exists twice: the frontend renders ".psl-text-block" inside
   ".col__container", the editor renders the same blocks as inner blocks
   (".wp-block-parasol-island-psl-text-block" in a block list), and its heading
   carries no class at all -- the block's editor markup writes "className=" as
   a raw HTML attribute.
   ========================================================================== */

body.ap-restyle {
  --ap-card: #6e000a;
  --ap-gold: var(--gold, #c4a65f);
  --ap-text: rgba(255, 255, 255, 0.86);
}

/* ---------- 1. Management cards ---------- */

/* 4 across on desktop, 2 on tablets, 1 on phones. Flex rather than grid so an
   incomplete last row (five cards) sits centred under the row above instead
   of starting at the left edge. The editor's column block sets its list to
   flex with space-around (two classes), which is what pushed the cards apart. */
body.ap-restyle .col__container:has(> .psl-text-block),
body.ap-restyle .wp-block-parasol-island-psl-columns-block .block-editor-block-list__layout {
  --ap-card-gap: 24px;
  --ap-cards-per-row: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-card-gap);
  justify-content: center;
  margin-inline: auto;
  max-inline-size: 1216px;
  padding-block: 0 clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 600px) {
  body.ap-restyle .col__container:has(> .psl-text-block),
  body.ap-restyle .wp-block-parasol-island-psl-columns-block .block-editor-block-list__layout {
    --ap-cards-per-row: 2;
  }
}
@media (min-width: 1100px) {
  body.ap-restyle .col__container:has(> .psl-text-block),
  body.ap-restyle .wp-block-parasol-island-psl-columns-block .block-editor-block-list__layout {
    --ap-cards-per-row: 4;
  }
}

/* Column widths come from the Parasol grid classes and carry !important in
   places; inside the row every card takes its share. */
body.ap-restyle .col__container > .psl-text-block,
body.ap-restyle .wp-block-parasol-island-psl-columns-block .wp-block-parasol-island-psl-text-block {
  flex: 0 0 calc((100% - (var(--ap-cards-per-row) - 1) * var(--ap-card-gap)) / var(--ap-cards-per-row));
  background: var(--ap-card);
  border-block-start: 3px solid var(--ap-gold);
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--ap-text);
  inline-size: auto !important;
  margin: 0 !important;
  max-inline-size: none !important;
  padding: 24px 24px 22px;
  text-align: start !important;
}

/* The editor draws its own block frames around every inner block, and the
   darker card red alone is barely distinguishable from the section there --
   a full gold hairline makes each card read as one. */
body.ap-restyle .block-editor-block-list__layout .wp-block-parasol-island-psl-text-block.editor-psl-column {
  background: var(--ap-card);
  border: 1px solid color-mix(in srgb, var(--ap-gold) 55%, transparent);
  border-block-start: 3px solid var(--ap-gold);
  padding: 24px 24px 22px;
}

/* Section headlines ("Anschrift", "Geschäftsführung & Direktion"): Apollo's
   headline block brings bottom spacing only; inside a section that starts
   flush it needs air above as well. */
body.ap-restyle .section__content > .section__contain.bg__red {
  padding-block-start: clamp(2.5rem, 6vw, 4.5rem);
}

/* The theme's ".h2" is a hero size (up to 80px) and dwarfed the one-line
   address and the cards below it (client feedback 2026-09-28). Same size as
   the form title, so every section headline on the page reads as one level. */
body.ap-restyle .title__custom--row > h2.h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
}

/* Function: small gold label. Explicit size, because the editor inherits a
   display size for bare headings and broke "GESCHÄFTSFÜHRER" mid-word. */
body.ap-restyle .col__container > .psl-text-block > h3,
body.ap-restyle .wp-block-parasol-island-psl-text-block .entry-content h3 {
  color: var(--ap-gold);
  font-family: var(--font-extra-condensed, "Arial Narrow", sans-serif);
  font-size: 15px;
  font-weight: 700;
  hyphens: manual;
  letter-spacing: 0.08em;
  line-height: 1.25;
  margin: 0 0 14px;
  overflow-wrap: normal;
  text-transform: uppercase;
}

body.ap-restyle .col__container > .psl-text-block p,
body.ap-restyle .wp-block-parasol-island-psl-text-block .entry-content p {
  font-family: var(--font-main, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* Name: the first line after the function, in Apollo's display serif. */
body.ap-restyle .col__container > .psl-text-block > h3 + p,
body.ap-restyle .wp-block-parasol-island-psl-text-block .entry-content h3 + p {
  color: #fff;
  font-family: var(--font-headline, serif);
  font-size: 22px;
  line-height: 1.2;
  margin-block-end: 12px;
}

body.ap-restyle .col__container > .psl-text-block a,
body.ap-restyle .wp-block-parasol-island-psl-text-block .entry-content a {
  color: var(--ap-gold);
  overflow-wrap: anywhere;
  text-decoration: none;
}
body.ap-restyle .col__container > .psl-text-block a:hover,
body.ap-restyle .col__container > .psl-text-block a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* ---------- 2. Contact form in Apollo's palette ---------- */

/* "body" in front: the block defines the same properties on .woogency-kontakt,
   and the load order of block and theme styles is not guaranteed. */
body .woogency-kontakt {
  --wgc-red: var(--red, #80000d);
  --wgc-red-dark: #6e000a;
  --wgc-dark-blue: var(--night-blue, #0a0e30);
  --wgc-dark-beige: var(--gold, #c4a65f);
  --wgc-radius-card: 8px;
  --wgc-shadow-card: 0 14px 36px rgba(0, 0, 0, 0.28);
  --wgc-font-display: var(--font-extra-condensed, "Arial Narrow", sans-serif);
}

/* Section titles on Apollo are the display serif in mixed case. */
body .woogency-kontakt .woogency-kontakt__title {
  font-family: var(--font-headline, serif);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  text-transform: none;
}