/*
Theme Name: Zoe Kägi (Variante 3)
Theme URI: https://zoekaegi.ch
Author: stic gmbh
Description: Block Theme für zoekaegi.ch (DE/EN mit Polylang). Variante 3: editorial (angelehnt an janniksinner.com / alex-zverev.com), Inter Tight + Instrument Serif, Schwarz/Weiss mit Sandplatz-Orange, schräge Farbflächen.
Version: 0.3.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-cut: var(--wp--custom--cut); }

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

/* Akzentschrift (Slug «playfair», weil die gemeinsamen Inhalte ihn verwenden, siehe README): Instrument Serif kursiv.
   Kennzahlen und Unterzeilen in den Inhalten sind fett gesetzt, die Schrift hat nur einen Schnitt. */
.has-playfair-font-family, [style*="font-family--playfair"], :is(h1, h2, h3, h4) em {
  font-family: var(--wp--preset--font-family--playfair); font-style: italic; font-weight: 400 !important;
  letter-spacing: -0.01em; text-transform: none;
}
:where(h1, h2, h3) { overflow-wrap: break-word; hyphens: auto; }

/* Header: schwarz; liegt die Seite mit einem Titelbild an (Startseite, Seiten), transparent über dem Bild */
.wp-site-blocks { position: relative; }
.wp-site-blocks > header.wp-block-template-part { background: var(--wp--preset--color--navy); }
body:has(main > .wp-block-cover:first-child, main > .wp-block-post-content > .wp-block-cover:first-child) .wp-site-blocks > header.wp-block-template-part {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: transparent;
}
.zk-header { padding: 1.25rem var(--wp--preset--spacing--gutter); }
.zk-header .wp-block-image img { filter: invert(1); }  /* Logo-PNG ist schwarz */
.zk-header a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--accent-light); }
.zk-header .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > a {
  text-decoration: underline 1px; text-underline-offset: .6em;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--xxl); font-weight: 300; letter-spacing: -0.02em; line-height: 1.15;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a {
  font-family: var(--wp--preset--font-family--playfair); font-style: italic; text-transform: none; color: var(--wp--preset--color--accent-light);
}

/* Sprachwechsel (Polylang-Block): «DE / EN» */
.zk-lang { display: flex; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; font-weight: 500; letter-spacing: .1em; }
.zk-lang li + li::before { content: "/"; margin: 0 .5em; opacity: .5; }
.zk-lang a { color: inherit; text-decoration: none; opacity: .6; }
.zk-lang .current-lang a { opacity: 1; }

/* Titelbilder schwarz-weiss, Farbe bleibt den Bildern im Inhalt */
.wp-block-cover__image-background { filter: grayscale(1) contrast(1.08); }

/* Buttons: eckig, mit Pfeil */
.wp-block-button__link::after { content: "→"; display: inline-block; margin-left: 1.25em; transition: transform .2s; }
.wp-block-button__link:hover::after { transform: translateX(.3em); }
.is-style-outline > .wp-block-button__link { border: 1px solid currentColor !important; background: transparent; }
.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--navy) !important; }
.zk-cut .wp-block-button__link:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--base); }

/* Label: feine Linie davor */
.is-style-label::before {
  content: ""; display: inline-block; width: 2rem; height: 1px; margin-right: .75em; background: currentColor; vertical-align: .3em;
}

/* Dunkle und farbige Flächen mit schrägem Anschnitt oben (überlappen die Sektion davor) */
.zk-cut,
.wp-block-post-content > .alignfull.has-navy-background-color {
  position: relative; z-index: 1;
  margin-top: calc(var(--zk-cut) * -1) !important;
  padding-top: calc(var(--zk-cut) + var(--wp--preset--spacing--l)) !important;
  clip-path: polygon(0 var(--zk-cut), 100% 0, 100% 100%, 0 100%);
}
.wp-site-blocks > .wp-block-template-part:has(> .zk-cut) { position: relative; z-index: 1; }

/* Feine Linien zwischen hellen Sektionen */
.wp-block-post-content > .alignfull:not(.has-background, .wp-block-cover) + .alignfull:not(.has-background, .wp-block-cover) {
  border-top: 1px solid var(--wp--preset--color--navy);
}

/* Eckige Karten statt der 4px aus den gemeinsamen Inhalten */
.wp-block-post-content .wp-block-group.has-background:not(.alignfull) { border-radius: 0 !important; }
.wp-block-post-content .wp-block-group.has-surface-background-color:not(.alignfull) { background: transparent !important; border: 1px solid var(--wp--preset--color--navy); }
/* Teaser-Karten: Bild zoomt leicht beim Überfahren */
.is-layout-grid > .wp-block-group > .wp-block-image { overflow: hidden; }
.is-layout-grid > .wp-block-group > .wp-block-image img { transition: transform .5s ease; }
.is-layout-grid > .wp-block-group:hover > .wp-block-image img { transform: scale(1.04); }

/* Footer: Spalten mit feinen Linien */
.zk-footer-cols > .wp-block-column { border-top: 1px solid var(--wp--preset--color--navy-light); padding-top: var(--wp--preset--spacing--s); }

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

/* Contact Form 7 (Formular-Markup kommt vom Plugin) */
.wpcf7 label { display: block; margin-bottom: 1.25rem; font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.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.5rem; }
.zk-hp { display: none; }
.wpcf7 input:not([type="submit"]), .wpcf7 textarea {
  box-sizing: border-box; width: 100%; margin-top: .35rem; padding: .6rem 0; font: inherit; font-size: var(--wp--preset--font-size--m);
  letter-spacing: 0; text-transform: none; color: inherit; border: 0; border-bottom: 1px solid var(--wp--preset--color--navy); border-radius: 0; background: transparent;
}
.wpcf7 input:not([type="submit"]):focus, .wpcf7 textarea:focus { outline: none; border-bottom-color: var(--wp--preset--color--accent); }
.wpcf7 input[type="submit"] {
  background: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--navy); border-radius: 0;
  padding: 1rem 1.5rem; font: inherit; font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }