/*
Theme Name: Zoe Kägi (Variante 2)
Theme URI: https://zoekaegi.ch
Author: stic gmbh
Description: Block Theme für zoekaegi.ch (DE/EN mit Polylang). Variante 2: sportlich-modern, Archivo/Manrope, Tinte/Kreide/Ballgelb, abgerundete Flächen.
Version: 0.2.0
Requires at least: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: zoekaegi
*/

/* Gestaltung steht in theme.json und in den Block-Einstellungen. Hier nur, was beides nicht kann. */

:root {
  --zk-inset: var(--wp--custom--inset);
  --zk-radius: var(--wp--custom--radius--l);
}

/* Keine Lücken zwischen Header, Inhalt, Footer und zwischen vollbreiten Sektionen */
.wp-site-blocks > *, .wp-block-post-content > .alignfull { margin-block: 0; }

/* Titelschrift Archivo breit laufen lassen (theme.json kennt kein font-stretch).
   Der Slug heisst «playfair», weil die gemeinsamen Inhalte ihn verwenden (siehe README). */
:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .has-playfair-font-family, [style*="font-family--playfair"]) { font-stretch: 112%; }
:where(h1, .has-hero-font-size) { font-stretch: 125%; }
:where(h1, h2, h3) { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 600px) { :where(h1, .has-hero-font-size) { font-stretch: 110%; } }

/* Flächen: farbige Sektionen (Inhalt, Seitenkopf, Partner-Aufruf, Footer) als abgerundete Karten mit schmalem Rand */
.zk-panel,
.wp-block-post-content > .alignfull.has-background,
.wp-block-post-content > .wp-block-cover.alignfull {
  border-radius: var(--zk-radius);
  overflow: hidden;
  margin-top: var(--zk-inset) !important;
}
/* in Layouts mit Seitenrand (main, Seiteninhalt): negativen Rand von alignfull bis auf den schmalen Rand zurücknehmen */
.has-global-padding > .zk-panel,
.wp-block-post-content > .alignfull.has-background,
.wp-block-post-content > .wp-block-cover.alignfull {
  margin-left: calc(var(--wp--style--root--padding-left) * -1 + var(--zk-inset)) !important;
  margin-right: calc(var(--wp--style--root--padding-right) * -1 + var(--zk-inset)) !important;
}
/* Template Parts (Partner-Aufruf, Footer) liegen direkt in .wp-site-blocks */
.wp-site-blocks > .wp-block-template-part > .zk-panel,
.wp-site-blocks > footer > .zk-panel { margin: var(--zk-inset); }

/* Karten und Bilder im Inhalt runder als die 4px aus den gemeinsamen Inhalten */
.wp-block-post-content .wp-block-group.has-background:not(.alignfull) { border-radius: var(--wp--custom--radius--m) !important; }
.wp-block-media-text__media img { border-radius: var(--zk-radius); }
/* Teaser-Karten in hellen Flächen (Startseite): weisse Karte, Bild innen abgerundet */
.has-surface-background-color > .is-layout-grid > .wp-block-group:not(.has-background) {
  padding: 0.625rem 0.625rem 1.5rem; border-radius: var(--wp--custom--radius--m); background: var(--wp--preset--color--base);
}
.has-surface-background-color > .is-layout-grid > .wp-block-group:not(.has-background) > :not(.wp-block-image) { margin-inline: 0.875rem; }
.has-surface-background-color > .is-layout-grid > .wp-block-group:not(.has-background) img { border-radius: var(--wp--custom--radius--s); }

/* Header: schwebende Leiste, bleibt beim Scrollen oben */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; padding: var(--zk-inset) var(--zk-inset) 0; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
.zk-header {
  position: relative; isolation: isolate;
  max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--gutter));
  margin-inline: auto; padding: 0.5rem 0.625rem 0.5rem 1.25rem;
}
/* Hintergrund mit Unschärfe auf einem Pseudo-Element: backdrop-filter direkt auf .zk-header
   würde das Mobil-Menü (position: fixed) in der Leiste einsperren */
.zk-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--wp--preset--color--line);
}

/* Menü: Pillen, aktiver Punkt gefüllt (nicht im geöffneten Mobil-Menü) */
.zk-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
  padding: 0.45em 0.95em; border-radius: 999px; transition: background-color .15s, color .15s;
}
.zk-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--surface); }
.zk-header .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content {
  background: var(--wp--preset--color--navy); color: var(--wp--preset--color--base);
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a { color: var(--wp--preset--color--accent-light); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--playfair); font-size: var(--wp--preset--font-size--xxl);
  font-weight: 800; font-stretch: 112%; text-transform: uppercase; line-height: 1.2;
}

/* Tastatur-Fokus gut sichtbar */
:where(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* Label: Ball als Punkt davor */
.is-style-label::before {
  content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.6em;
  border-radius: 50%; background: currentColor; vertical-align: 0.05em;
}

/* Sprachwechsel (Polylang-Block): Umschalter «DE EN» */
.zk-lang {
  display: flex; gap: 2px; margin: 0; padding: 3px; list-style: none; border-radius: 999px;
  background: var(--wp--preset--color--surface); font-size: 0.8125rem; font-weight: 700; letter-spacing: .04em;
}
.zk-lang a { display: block; padding: .3em .75em; border-radius: 999px; color: inherit; text-decoration: none; opacity: .6; }
.zk-lang .current-lang a { opacity: 1; background: var(--wp--preset--color--base); box-shadow: 0 1px 2px rgb(15 20 25 / .12); }

/* Social Icons im Footer: runde Knöpfe */
.zk-social.is-style-logos-only .wp-social-link { border-radius: 50%; background: var(--wp--preset--color--navy-light); transition: background-color .15s; }
.zk-social.is-style-logos-only .wp-social-link a { padding: .6em; }
.zk-social.is-style-logos-only .wp-social-link:hover { background: var(--wp--preset--color--accent-light); color: var(--wp--preset--color--navy) !important; }

/* Contact Form 7 (Formular-Markup kommt vom Plugin) */
.wpcf7 label { display: block; margin-bottom: 1rem; font-weight: 600; }
.zk-req { color: var(--wp--preset--color--accent); }
.zk-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1.25rem; }
.zk-hp { display: none; }
.wpcf7 input:not([type="submit"]), .wpcf7 textarea {
  box-sizing: border-box; width: 100%; margin-top: .35rem; padding: .75rem 1rem; font: inherit;
  color: inherit; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--s); background: #fff;
}
.wpcf7 input:not([type="submit"]):focus, .wpcf7 textarea:focus { border-color: var(--wp--preset--color--accent); }
.wpcf7 input[type="submit"] {
  background: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); border: 0; border-radius: 999px;
  padding: .85rem 1.75rem; font: inherit; font-size: var(--wp--preset--font-size--s); font-weight: 700; cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--accent); }