/*
Theme Name: Velo Peter
Theme URI: https://velopeter.ch
Author: stic gmbh
Description: Block Theme für velopeter.ch. Variante 1: wie die bisherige Site (Layout, Farben, Schriften), ohne Page Builder.
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 (wie bisher) */
.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; } }

/* Menü wie bisher: Hover und aktiver Punkt in Akzentfarbe mit Übergang, Untermenü als Box mit Schatten */
.wp-block-navigation a, .wp-block-social-links a { transition: color .3s ease-in-out; }
/* Core setzt color: inherit mit .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content (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: 0; box-shadow: var(--wp--preset--shadow--card); padding: .75rem 0; }
.vp-desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .6rem 1.5rem; }
/* Hamburger-Menü wie bisher: dunkel, Grossbuchstaben, Untermenü abgesetzt */
.vp-mobile .is-menu-open .wp-block-navigation-item__content { text-transform: uppercase; font-weight: 600; }
.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 { margin-top: .5rem; padding: 0 1rem !important; background: rgba(255, 255, 255, .06) !important; }
/* Blau auf Dunkel hätte nur rund 2.3:1 Kontrast: aktiver Punkt im Overlay weiss mit Unterstrich */
.vp-mobile .is-menu-open .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit; text-decoration: underline 2px var(--wp--preset--color--accent); text-underline-offset: .4em; }
.vp-mobile .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; padding: .6rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.vp-mobile .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child { border-bottom: 0; }
.vp-mobile .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { text-transform: none; }
.wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--accent); }
.wp-block-navigation__responsive-container-open svg { width: 34px; height: 34px; stroke: currentColor; stroke-width: .6px; }

/* Spalten wie bisher 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; }
}

/* Seitentitel wie bisher: Punkt in Akzentfarbe, kurze Linie darunter (Trennlinie direkt nach dem Titel) */
.is-style-titel::after { content: " ."; color: var(--wp--preset--color--accent); }
.is-style-titel + .wp-block-separator { width: 55px; 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): blaue Felder wie bisher */
.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 .6rem; }
.wpcf7 input:not([type="submit"]), .wpcf7 textarea {
  box-sizing: border-box; width: 100%; margin-bottom: .6rem; padding: .9rem 1.25rem; font: inherit; font-size: var(--wp--preset--font-size--s);
  border: 0; border-radius: 0; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base);
}
.wpcf7 ::placeholder { color: var(--wp--preset--color--base); opacity: 1; }
.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: 999px; cursor: pointer;
  padding: .8rem 2.25rem; font: inherit; font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--heading); }