/*
Theme Name: Velo Peter
Theme URI: https://velopeter.ch
Author: stic gmbh
Description: Block Theme für velopeter.ch. Variante 2: Klar & modern (weiss, Navy und Blau aus dem Logo, Inter, runde Ecken, Einstieg mit Bild und Sortiment-Kacheln).
Version: 0.1.0
Requires at least: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: velopeter
Icons (im Inhalt, Icon Block): Font Awesome Free 5.15.4, https://fontawesome.com, CC BY 4.0
*/

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

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

/* Kopfleiste bleibt oben */
.wp-site-blocks > header { position: sticky; top: 0; z-index: 20; }

/* Menü: zwei Navigation-Blöcke (gleiches Menü). Die 7 Punkte brauchen rund 1080 px, Core klappt erst unter 600 px zu und
   blockVisibility kennt nur 480/782 px: darum hier die Umschaltung auf den Hamburger (vp-mobile) und die Social-Icons. */
@media (max-width: 1079px) { .vp-desktop { display: none !important; } }
@media (min-width: 1080px) { .vp-mobile { display: none !important; } }

.wp-block-navigation a, .wp-block-social-links a { transition: color .2s ease-in-out; }
.vp-desktop .has-child .wp-block-navigation__submenu-container { border: 0; box-shadow: var(--wp--preset--shadow--card); padding: .5rem 0; }
.vp-desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem 1.25rem; }
.vp-mobile .is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--l); }
.vp-mobile .is-menu-open :is(.wp-block-navigation__container, .has-child, .wp-block-navigation__submenu-container) { width: 100% !important; }
.vp-mobile .is-menu-open .has-child > .wp-block-navigation__submenu-container { padding: .25rem 0 0 1rem !important; }
.vp-mobile .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--m); }
.wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }

/* Spalten erst auf dem Handy untereinander (Core stapelt schon unter 782 px, Tablets hochkant sähen dann aus wie Handys) */
@media (min-width: 600px) and (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: nowrap !important; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 0 !important; flex-grow: 1; }
}

/* Kurze Linie unter Titeln mit Blockstil «Seitentitel» (Trennlinie direkt nach dem Titel) */
.is-style-titel + .wp-block-separator { width: 48px; margin-inline: auto; }

/* Liste mit Häkchen (Blockstil «Häkchen») */
.is-style-haken { list-style: none; }
.is-style-haken li::before { content: "✓"; font-weight: 700; color: var(--wp--preset--color--accent); margin-left: -1.5rem; width: 1.5rem; display: inline-block; }

/* Contact Form 7 (Formular-Markup kommt vom Plugin) */
.vp-hp { display: none; }
.vp-form-note { font-size: var(--wp--preset--font-size--s); text-align: center; }
.vp-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 .75rem; }
.wpcf7 input:not([type="submit"]), .wpcf7 textarea {
  box-sizing: border-box; width: 100%; margin-bottom: .75rem; padding: .8rem 1rem; font: inherit;
  border: 1px solid var(--wp--preset--color--muted); border-radius: var(--vp-radius); background: var(--wp--preset--color--base); color: var(--wp--preset--color--body);
}
.wpcf7 :is(input, textarea):focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; }
.wpcf7 p:has(> [type="submit"]), .wpcf7 .vp-submit { text-align: center; margin-top: 1rem; }
.wpcf7 input[type="submit"] {
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); border: 0; border-radius: var(--vp-btn-radius); cursor: pointer;
  padding: .8rem 1.75rem; font: inherit; font-weight: 600;
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--heading); }

/* Eckenradius für Formularfelder (Knöpfe: theme.json) */
:root { --vp-radius: 10px; --vp-btn-radius: 10px; }

/* Menü: Hover und aktiver Punkt in Akzentfarbe. Core setzt color: inherit mit doppelter Klasse (0,3,0). */
.wp-block-navigation :is(.current-menu-item, .has-child:hover, .wp-block-navigation-item:hover) > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--accent); text-decoration: none; }
.wp-block-social-links a:hover { color: var(--wp--preset--color--accent); }
.vp-desktop .has-child .wp-block-navigation__submenu-container { border-radius: 10px; }
.wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--heading); }

/* Bild in Karten (Sortiment) füllt die Karte bis zum Rand, Ecken oben wie die Karte */
.vp-card { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.vp-card:hover { transform: translateY(-3px); }
.vp-card > .wp-block-image img { border-radius: 0; }