/*
Theme Name: Makurat VW
Description: Motyw potomny Twenty Twenty-Five dla vw.makuratserwis.pl — build 1:1 z wzorca serwisowego VW. Tokeny designu: theme.json. (kolaboracja.com)
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Author: kolaboracja.com
Text Domain: makurat-vw
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ================================================================
   TOKENY DLA WŁASNYCH BLOKÓW (lustro presetów z theme.json — §6)
   Źródło prawdy dla edytora: theme.json. Te zmienne konsumuje
   wyłącznie „chrome" i przyszłe bloki no-build.
   ================================================================ */
:root {
  --brand-primary: #001E50;
  --brand-primary-soft: #00437A;
  --brand-accent: #00B0F0;
  --brand-error: #E4002C;
  --brand-ink: #000000;
  --brand-foreground: #212529;
  --brand-gray-dark: #3C484D;
  --brand-muted: #6A767D;
  --brand-silver: #C2CACF;
  --brand-line: #DFE4E8;
  --brand-surface: #F0F0F0;
  --brand-surface-soft: #F3F5F6;
  --brand-base: #FFFFFF;
  --brand-gradient-navy: radial-gradient(circle at 50% 85%, var(--brand-primary-soft) 0%, var(--brand-primary) 100%);
  --brand-radius-pill: 999px;
}

/* ================================================================
   CHROME MINIMALNE (handoff §5.7 / §9) — tylko nieredukowalne:
   zabezpieczenie przed poziomym scrollem przy alignfull.
   ================================================================ */
html, body {
  overflow-x: clip;
}

/* Płynne przewijanie do kotwic (menu #sekcje); wyłączone przy preferencji
   ograniczonego ruchu. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Akordeony działów (core/details) — styl <summary> jest poza zasięgiem
   paska bocznego, stąd minimalny chrome; kolory/typografia z presetów. */
.wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--wp--preset--font-family--brand-head);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 700;
  color: var(--brand-ink);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
  margin-left: 1rem;
}
.wp-block-details[open] > summary::after { transform: rotate(225deg); }

/* Header jako overlay nad hero — z-index poza zasięgiem paska bocznego. */
.wp-site-blocks > header {
  position: relative;
  z-index: 20;
}

/* Delikatne, przerywane zaznaczenie fokusa (zamiast grubej ramki UA).
   Widoczne tylko przy nawigacji klawiaturą / :focus-visible. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 1px dashed currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}
:where(a, button, summary):focus:not(:focus-visible) {
  outline: none;
}

/* Osadzone mapy (core/html — dozwolone tylko dla map): pełna szerokość kolumny. */
main iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Mobile/tablet (poniżej progu składania kolumn WP = 782px): atrybuty height
   map (720/460) są desktopowe — po złożeniu kolumn mapa nad kartą dostaje
   stałą, ekranową wysokość jak na wzorcu. */
@media (max-width: 781px) {
  main iframe {
    height: 320px;
  }
}

/* Mobile (tryb burgera, <600px): prawy tekst headera wyjmujemy z przepływu
   segmentu — segment jest za wąski (tekst łamał się na 4 wiersze). Absolut
   nie zmienia geometrii kreski ani centrowania logo; <br> w treści daje
   naturalne 2 wiersze. */
@media (max-width: 599px) {
  .wp-site-blocks > header .wp-block-group.alignfull > .wp-block-group:last-child {
    position: relative;
  }
  .wp-site-blocks > header .wp-block-group.alignfull > .wp-block-group:last-child > p {
    position: absolute;
    top: 4px;
    right: 0;
    width: max-content;
    max-width: calc(100vw - 96px);
  }
  /* Desktopowe przesunięcie logo (padding w lewym segmencie) na mobile
     zerujemy — logo ma stać centralnie, kreski symetrycznie po obu stronach. */
  .wp-site-blocks > header .wp-block-group.alignfull > .wp-block-group:first-child {
    padding-right: 0 !important;
  }
  /* Logo mniejsze na telefonie (rondel nie może wjeżdżać w tekst u góry);
     zanurzenie tak, by kreska przechodziła między rondlem VW a napisem
     SERWIS (24,85% wysokości pod kreską). */
  .wp-site-blocks > header .wp-block-site-logo img {
    width: 56px !important;
    height: auto !important;
  }
  .wp-site-blocks > header .wp-block-site-logo {
    margin-bottom: -17px !important;
  }
}