/*
Theme Name: Psychologische Numerologie
Theme URI: https://www.psychologischenumerologie.eu/
Description: Schlankes Block-Theme (nur Gutenberg, mehrsprachig mit Polylang) als Zwischenlösung bis zum Neubau mit Astro. Look nah an der bisherigen Seite.
Author: akademie bios
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: numerologie
*/

:root {
  --nl-brand: #00a5c3;
  --nl-brand-text: #00788f;
  --nl-brand-deep: #005a6a;
  --nl-on-brand: #ffffff;           /* Schrift auf Türkis: #ffffff (Original) oder #00232b (besserer Kontrast) */
  --nl-gray: #f2f2f2;
  --nl-gold: #c6af6e;
  --nl-gold-text: #9a7f2e;           /* nur große Schrift (Hero-Kursiv) */
  --nl-gold-small: #6b5818;          /* kleine Schrift in Gold */
  --nl-green: #8ebe31;
  --nl-ink: #333333;
  --nl-muted: #666666;
  --nl-line: #d9d9d9;
  --nl-logo-h: 64px;                /* Logo-Höhe am Desktop, klein gehalten */
  --nl-wide: 72rem;
}
html { scroll-behavior: smooth; }
img { height: auto; }
.screen-reader-text, .skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; color: var(--nl-ink); padding: .75rem 1rem; }
:where(a, button, input, textarea, summary):focus-visible { outline: 3px solid var(--nl-ink); outline-offset: 3px; }

/* Kopf */
.site-header { background: var(--nl-brand); color: var(--nl-on-brand); }
.site-header__inner { max-width: 80rem; margin-inline: auto; padding: .5rem 1rem; display: flex; align-items: center; gap: 1.25rem; min-height: 4.5rem; flex-wrap: wrap; }
.site-logo { display: block; flex: none; }
.site-logo img { height: var(--nl-logo-h); width: auto; display: block; }
.nav-toggle { display: none; margin-left: auto; min-height: 2.75rem; padding: .4rem 1rem; background: transparent; color: var(--nl-on-brand); border: 2px solid currentColor; border-radius: 5px; font: inherit; font-weight: 500; cursor: pointer; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.site-nav__list, .site-nav__list ul { list-style: none; margin: 0; padding: 0; }
.site-nav__list { display: flex; gap: clamp(.7rem, 1.2vw, 1.3rem); flex-wrap: nowrap; }
.site-nav__list > li { position: relative; }
.site-nav a { color: var(--nl-on-brand); text-decoration: none; font-weight: 500; font-size: .9375rem; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; display: block; padding: .5rem 0; border-bottom: 2px solid transparent; }
.site-nav__list > li > a:hover, .site-nav__list > li.current-menu-item > a, .site-nav__list > li.current-menu-ancestor > a { border-bottom-color: currentColor; }
.site-nav .sub-menu { display: none; position: absolute; left: -1rem; top: 100%; min-width: 16rem; background: #fff; box-shadow: 0 6px 18px rgb(0 0 0 / .15); padding: .5rem 1rem; z-index: 50; border-radius: 0 0 5px 5px; }
.site-nav .sub-menu a { color: var(--nl-brand-text); text-transform: none; font-size: 1rem; padding: .4rem 0; }
.site-nav .sub-menu a:hover { color: var(--nl-brand-deep); text-decoration: underline; }
.site-nav li:hover > .sub-menu, .site-nav li:focus-within > .sub-menu { display: block; }
.site-search { display: flex; background: #fff; border-radius: 999px; overflow: hidden; border: 2px solid #fff; }
.site-search input { border: 0; padding: .35rem .8rem; font: inherit; font-size: .95rem; width: 6rem; color: var(--nl-ink); background: transparent; }
.site-search button { border: 0; background: transparent; color: var(--nl-brand-text); padding: 0 .75rem; font: inherit; font-weight: 600; cursor: pointer; }
.lang-switch { list-style: none; margin: 0; padding: 0; display: flex; gap: .6rem; }
.lang-switch a { font-size: .9375rem; padding: .25rem 0; }
.lang-switch .current-lang a { border-bottom-color: currentColor; font-weight: 700; }

/* Inhalt */
.site-main { max-width: var(--nl-wide); margin: 0 auto; background: #fff; padding: 2rem 1rem 3rem; }
.site-main > .wp-block-post-title, .content-head { max-width: 44rem; }
.entry-meta { color: var(--nl-muted); font-size: 1rem; }
.entry-meta a { color: var(--nl-brand-text); }
.crumbs { font-size: .95rem; color: var(--nl-muted); margin-bottom: 1rem; }
.crumbs a { color: var(--nl-muted); }
.wp-block-post-terms a { display: inline-block; background: #fff; border: 1px solid var(--nl-line); color: var(--nl-muted); text-decoration: none; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 999px; }
.wp-block-post-featured-image img { border-radius: 5px; }

/* Bausteine (Muster) */
em.gold, .has-gold-text { font-style: italic; color: var(--nl-gold-text); }
.eyebrow { font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nl-gold-small); margin: 0; }
.is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--nl-gold-small); border: 1px solid var(--nl-gold); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgb(198 175 110 / .15); color: var(--nl-gold-small); }
.card { background: rgb(198 175 110 / .12); border: 1px solid var(--nl-gold); border-radius: 5px; padding: 1.25rem 1.5rem; }
.card h3 { margin-top: 0; }
.card, .card * { overflow-wrap: anywhere; hyphens: auto; }
.wp-block-post-terms__separator { display: none; }
.wp-block-post-terms a { margin: 0 .35rem .35rem 0; }
.wp-block-post-template.is-layout-grid { gap: 1.5rem; }
.card.is-white { background: #fff; }
.num { font-weight: 700; color: var(--nl-gold-small); letter-spacing: .08em; margin: 0; }
.band-gray { background: var(--nl-gray); }
.compare-no li { list-style: none; color: var(--nl-muted); }
.compare-no li::before { content: "\2715\00a0"; }
.compare-yes li { list-style: none; }
.compare-yes li::before { content: "\2713\00a0"; color: #46691a; font-weight: 700; }
.compare-no, .compare-yes { padding-left: 0; }

/* Beitragslisten */
.wp-block-post-template .card h2, .wp-block-post-template .card h3 { font-size: 1.2rem; }
.wp-block-post-template .card .wp-block-post-title a { text-decoration: none; }
.wp-block-query-pagination { margin-top: 2rem; }

/* Fuß */
.site-footer { background: var(--nl-brand); color: var(--nl-on-brand); font-size: 1rem; }
.site-footer__strip { height: 6px; background: var(--nl-green); }
.site-footer__inner { max-width: var(--nl-wide); margin-inline: auto; padding: 2.5rem 1rem 1.5rem; }
.site-footer a { color: var(--nl-on-brand); }
.site-footer h2 { color: inherit; font-size: 1.05rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .75rem; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .35rem; }
.site-footer__legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .4); font-size: .875rem; }

/* Mobil: Menü einklappen */
@media (max-width: 78rem) {
  :root { --nl-logo-h: 56px; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; margin: 0 0 1rem; gap: 1rem; }
  .site-header.is-open .site-nav { display: flex; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list > li > a { padding: .75rem 0; border-bottom: 1px solid rgb(255 255 255 / .35); }
  .site-nav .sub-menu { display: block; position: static; box-shadow: none; background: transparent; padding: 0 0 .5rem 1rem; }
  .site-nav .sub-menu a { color: var(--nl-on-brand); }
  .site-search, .site-search input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Startseite und Abschnitte */
.section { padding-block: 1.5rem; }
.hero { padding-block: 1rem 2rem; }
.hero h1 { margin-bottom: 1.25rem; }
.hero > p { font-size: 1.25rem; }
.section > h2 { margin-top: .25rem; }
.cta { border-radius: 5px; padding: 2.5rem 1.5rem; text-align: center; margin-block: 2.5rem 1rem; }
.cta h2 { color: #fff; }
.cta p { margin-inline: auto; max-width: 36rem; }
.cta .wp-block-buttons { justify-content: center; }
.cta .wp-block-button__link { background: #fff; color: var(--nl-brand-text); }
.cta .wp-block-button__link:hover { background: var(--nl-gray); color: var(--nl-brand-deep); }
.wp-block-columns img { border-radius: 5px; }
.grid-2, .grid-3 { gap: 1.25rem; }