/*
Theme Name:        Roter Faden
Theme URI:         https://example.com/roter-faden
Author:            Simon Kraft
Author URI:        https://simon.blog
Description:       A neubrutalist block theme for product & consulting sites. Thick outlines, hard offset shadows, square corners, and a signature red "thread" that runs down the page and ties every section together. Ships with block style variations, section patterns, bundled fonts, and an automatic CSS dark mode.
Requires at least: 6.5
Tested up to:      6.8
Requires PHP:      8.1
Version:           1.0.0-beta.5
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       roter-faden
Tags:              block-theme, full-site-editing, portfolio, business, blog, one-column, custom-colors, block-styles, wide-blocks, dark-mode-support
*/

/* ============================================================
   SEMANTIC TOKENS
   Everything decorative reads from these. Dark mode only has to
   re-declare the tokens once (see the media query at the bottom).
   ============================================================ */
:root {
  --rf-bg: var(--wp--preset--color--paper, #F7F3EA);   /* page background       */
  --rf-elevated: #ffffff;                               /* cards, chips, tags    */
  --rf-fg: var(--wp--preset--color--ink, #17140F);      /* primary text          */
  --rf-line: var(--wp--preset--color--ink, #17140F);    /* borders + hard shadow */
  --rf-thread: var(--wp--preset--color--red, #E23A2E);  /* the thread            */
  --rf-accent: var(--wp--preset--color--red-ink, #B81D24);
  --rf-dark-bg: #17140F;                                /* CTA band, dark card   */
  --rf-on-dark: #F3ECDD;                                /* text on dark surfaces */

  --rf-shadow-sm: 3px 3px 0 0 var(--rf-line);
  --rf-shadow: 6px 6px 0 0 var(--rf-line);
  --rf-shadow-lg: 10px 10px 0 0 var(--rf-line);
  --rf-border: 3px solid var(--rf-line);
}

/* ---- Buttons: border + hard shadow + neubrutalist "press" ---- */
.wp-element-button,
.wp-block-button__link {
  border: 3px solid var(--rf-line);
  border-radius: 0;
  box-shadow: var(--rf-shadow);
  transition: transform .1s ease, box-shadow .1s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--rf-line);
}
.wp-element-button:active,
.wp-block-button__link:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}
/* Ghost button variation */
.wp-block-button.is-style-rf-ghost .wp-block-button__link {
  background-color: transparent;
  color: var(--rf-fg);
}

/* ---- Eyebrow (mono label) ---- */
.is-style-rf-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rf-accent);
  margin: 0 0 .5rem;
}

/* ---- Chip (logo / station placeholder) ---- */
.is-style-rf-chip {
  display: inline-block;
  margin: 0;
  padding: 8px 16px;
  background: var(--rf-elevated);
  color: var(--rf-fg);
  border: var(--rf-border);
  box-shadow: var(--rf-shadow-sm);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: .95rem;
}
/* Slightly tilted, hand-placed look (matches the original design) */
.is-style-rf-chip:nth-child(3n) { transform: rotate(-1.5deg); }
.is-style-rf-chip:nth-child(3n+2) { transform: rotate(1deg); }

/* ---- Inline highlight (mark) — kill the browser's yellow, echo the
   original "thread word": coloured text with a matching underline. The
   inline colour set on the element wins, so unmarked defaults inherit. ---- */
mark {
  background-color: transparent;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.12em;
}

/* ---- Language switcher (MSLS) — header, right of the nav ---- */
.rf-lang-switch {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rf-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 5px 8px;
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 700;
  font-size: .78rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--rf-fg);
  background: var(--rf-elevated);
  border: 3px solid var(--rf-line);
  box-shadow: var(--rf-shadow-sm);
  text-decoration: none;
  transition: transform .1s ease, box-shadow .1s ease;
}
.rf-lang:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--rf-shadow);
  color: var(--rf-fg);
}
.rf-lang.is-current {
  background: var(--wp--preset--color--red-ink, #B81D24);
  color: #fff;
  box-shadow: none;
  cursor: default;
}
.rf-lang.is-current:hover { transform: none; box-shadow: none; }

/* ---- Footer social nav — bordered neubrutalist tiles ---- */
.wp-block-social-links.rf-social { gap: 10px; }
.wp-block-social-links.rf-social .wp-social-link {
  background: var(--rf-elevated);
  border: 3px solid var(--rf-line);
  box-shadow: var(--rf-shadow-sm);
  border-radius: 0;
  padding: 7px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.wp-block-social-links.rf-social .wp-social-link:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--rf-shadow);
}
.wp-block-social-links.rf-social .wp-social-link svg {
  width: 20px;
  height: 20px;
  fill: var(--rf-fg);
}

/* ---- Tag (mono meta inside cards) ---- */
.is-style-rf-tag {
  display: inline-block;
  margin: 0;
  padding: 5px 10px;
  border: 2px solid var(--rf-line);
  background: var(--rf-elevated);
  color: var(--rf-fg);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .74rem;
  letter-spacing: .03em;
}

/* ============================================================
   THE RED THREAD — signature element (Group style: Thread Section)
   ============================================================ */
.is-style-rf-thread-section { position: relative; }
.wp-block-group.is-style-rf-thread-section { padding-left: 74px; }
.is-style-rf-thread-section::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--rf-thread);
}

/* Numbered knot on the thread (Paragraph style: Thread Knot) */
.is-style-rf-knot {
  position: absolute !important;
  left: 14px;
  top: 4.2rem;
  width: 36px;
  height: 36px;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--rf-accent);
  color: #fff !important;
  border: var(--rf-border);
  box-shadow: var(--rf-shadow-sm);
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 700;
  font-size: .8rem;
  z-index: 2;
}

/* ---- Cards ---- */
.is-style-rf-card {
  background: var(--rf-elevated);
  border: var(--rf-border);
  box-shadow: var(--rf-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.is-style-rf-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--rf-shadow-lg);
}
.is-style-rf-card-dark {
  background: var(--rf-dark-bg);
  color: var(--rf-on-dark);
  border: var(--rf-border);
  box-shadow: var(--rf-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.is-style-rf-card-dark:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--rf-shadow-lg);
}
.is-style-rf-card-dark :where(h1, h2, h3, h4, p, li) { color: var(--rf-on-dark); }
.is-style-rf-card-dark .is-style-rf-tag {
  background: transparent;
  border-color: var(--rf-thread);
  color: var(--rf-thread);
}

/* ---- Focus tile ---- */
.is-style-rf-focus {
  background: var(--rf-elevated);
  border: var(--rf-border);
  box-shadow: var(--rf-shadow-sm);
}

/* ---- Reference card (dashed = placeholder) ---- */
.is-style-rf-ref {
  background: transparent;
  border: 3px dashed var(--rf-line);
}

/* ---- "Gleiche Höhe" — equal-height items in Columns (and Row) ----
   Columns are already equal height (flexbox), but the card *inside* each
   column only takes its content height. This makes that inner card fill the
   column, so a row of cards lines up. Apply to the Columns (or Row) block. */
.wp-block-columns.is-style-rf-equal-height { align-items: stretch; }
.wp-block-columns.is-style-rf-equal-height > .wp-block-column {
  display: flex;
  flex-direction: column;
}
.wp-block-columns.is-style-rf-equal-height > .wp-block-column > * {
  flex: 1 1 auto;
}
.wp-block-group.is-style-rf-equal-height { align-items: stretch; }
.wp-block-group.is-style-rf-equal-height > * { height: 100%; }

/* ---- Dark band (Group style: Dark Band) — used by the CTA ---- */
.is-style-rf-band-dark {
  background: var(--rf-dark-bg);
  color: var(--rf-on-dark);
}
.is-style-rf-band-dark :where(p, li) { color: var(--rf-on-dark); }
.is-style-rf-band-dark :where(h1, h2, h3, h4) { color: #fff; }
.is-style-rf-band-dark .is-style-rf-eyebrow { color: var(--rf-thread); }
.is-style-rf-band-dark .is-style-rf-ghost .wp-block-button__link {
  color: #fff;
  border-color: #fff;
  box-shadow: 6px 6px 0 0 var(--rf-thread);
}
.is-style-rf-band-dark .is-style-rf-ghost .wp-block-button__link:hover {
  box-shadow: 8px 8px 0 0 var(--rf-thread);
}

/* ---- Header / footer surfaces (they use the Paper background) ---- */
.wp-block-separator.has-ink-background-color { background-color: var(--rf-line); border-color: var(--rf-line); }

@media (max-width: 781px) {
  .wp-block-group.is-style-rf-thread-section { padding-left: 48px; }
  .is-style-rf-thread-section::before { left: 18px; }
  .is-style-rf-knot { left: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-element-button,
  .is-style-rf-card,
  .is-style-rf-card-dark { transition: none; }
}

/* ============================================================
   DARK MODE — CSS only, automatic via the OS/browser setting.
   Re-declare the tokens, remap the two muted text presets, and
   flip the page + Paper surfaces. Everything else follows.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --rf-bg: #151310;
    --rf-elevated: #211C16;
    --rf-fg: #F3ECDD;
    --rf-line: #EFE7D6;      /* light outlines & shadows on dark */
    --rf-dark-bg: #0E0C09;   /* deeper than page so bands separate */
    --rf-on-dark: #F3ECDD;

    /* Ink is used for text + all outlines/dividers. Flipping it light
       keeps section borders and the header/footer rules visible on dark.
       (Dark surfaces use the --rf-dark-bg token, not ink, so nothing
       that should stay dark gets inverted.) */
    --wp--preset--color--ink: #EFE7D6;

    /* muted / faint body text presets, remapped for dark */
    --wp--preset--color--muted: #C7BFAE;
    --wp--preset--color--faint: #9A9384;
  }

  body {
    background-color: var(--rf-bg);
    color: var(--rf-fg);
  }
  /* Headings inherit body colour; make sure default links stay legible */
  h1, h2, h3, h4, h5, h6 { color: var(--rf-fg); }

  /* Paper-backed surfaces (header, footer) become elevated dark */
  .has-paper-background-color { background-color: var(--rf-elevated) !important; }

  /* Filled primary button keeps its red; ensure its text stays white */
  .wp-element-button { color: #fff; }
  .is-style-rf-ghost .wp-block-button__link { color: var(--rf-fg); }
}