/*
Theme Name: Makurat Audi
Description: Motyw potomny Twenty Twenty-Five dla audi.makuratserwis.pl — build 1:1 z wzorca Audi (audi.pl/strefa-klienta/twoje-korzysci). Tokeny designu: theme.json. (kolaboracja.com)
Template: twentytwentyfive
Version: 1.1.0
Requires at least: 6.6
Requires PHP: 7.4
Author: kolaboracja.com
Text Domain: makurat-audi
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 bloki no-build.
   ================================================================ */
:root {
  --brand-ink: #020203;          /* tło główne */
  --brand-ink-soft: #101319;     /* tło pośrednie */
  --brand-surface: #181D25;      /* tło sekcji + przycisk */
  --brand-surface-top: #2C343F;  /* pasek nagłówka */
  --brand-black: #000000;
  --brand-base: #FCFCFD;         /* tekst na ciemnym */
  --brand-muted: rgba(252, 252, 253, 0.7);
  --brand-steel: #657081;        /* CTA na obrazie */
  --brand-silver: #C9D0D9;
  --brand-line: rgba(252, 252, 253, 0.2);
  --brand-error: #C4122F;        /* czerwień Audi — odczytana z logo Audi Serwis */
  --brand-radius-pill: 999px;
  --brand-radius-media: 20px;    /* zaokrąglenie obrazów — wyróżnik wzorca Audi */
  --brand-header-h: 96px;
}

/* ================================================================
   CHROME MINIMALNE (§5.7 / §9) — tylko to, czego nie da się
   ustawić z paska bocznego edytora.
   ================================================================ */

/* Zabezpieczenie przed poziomym scrollem przy alignfull. */
html, body {
  overflow-x: clip;
}

/* Płynne przewijanie do kotwic menu; margines = wysokość przyklejonego
   nagłówka, żeby tytuł sekcji nie chował się pod paskiem. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--brand-header-h) + 8px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Nagłówek przyklejony — jak we wzorcu (position:sticky).
   z-index i sticky są poza zasięgiem paska bocznego. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Akordeony (core/details) — styl <summary> jest poza zasięgiem
   paska bocznego; kolory i 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);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 400;
  color: var(--brand-base);
}
.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-base);
  border-bottom: 2px solid var(--brand-base);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
  margin-left: 1rem;
}
.wp-block-details[open] > summary::after { transform: rotate(225deg); }

/* Delikatne, przerywane zaznaczenie fokusa (zamiast grubej ramki UA).
   Widoczne tylko przy nawigacji klawiaturą. */
: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 wyłącznie dla map):
   pełna szerokość kolumny + zaokrąglenie jak obrazy wzorca. */
main iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--brand-radius-media);
}

/* Poniżej progu składania kolumn WP (782px) atrybuty height map są
   desktopowe — po złożeniu kolumn mapa dostaje stałą wysokość. */
@media (max-width: 781px) {
  main iframe { height: 320px; }
}

/* Zdjęcia w jednym kadrze. Źródła są niejednorodne: bloki ofert, gwarancji
   i programów mają 16:9, a wszystkie 9 zdjęć w sekcji Serwis jest kwadratowych.
   Wymuszamy wspólny prostokąt i przycinamy nadmiar (object-fit) zamiast
   przerabiać pliki w bibliotece — dzięki temu klient może podmienić zdjęcie
   o dowolnych proporcjach, a kadr dalej zostanie spójny. */
.wp-block-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

/* Widget ocen car.advisor w sekcji z mapą — własna biała karta, odsuwamy ją
   od danych adresowych pod spodem.
   PUŁAPKA: komponent renderuje się w shadow DOM, ale części napisów („Ocena
   ogólna", „(83 Opinie)") nie ustawia własnego koloru — dziedziczą go z hosta.
   Na naszej ciemnej stronie schodził tam --brand-base (#FCFCFD), czyli biały
   tekst na białej karcie. Dlatego host dostaje jawny ciemny kolor (ten sam,
   którego używa strona VW, skąd pochodzi widget). */
#mapa banner-web-component {
  display: block;
  margin-bottom: 24px;
  color: #212529;
}

/* Nagłówek na telefonie: burger WP przełącza się sztywno na 600px.
   Poniżej tego progu CTA obok burgera się nie mieści — chowamy je
   (kotwica „Kontakt" jest w menu burgera). */
@media (max-width: 599px) {
  .wp-site-blocks > header .wp-block-buttons { display: none; }
  :root { --brand-header-h: 72px; }
}