/* Style sekcji ofertowych (front i edytor).

   Podstawa: szablon higienizacji (~/Desktop/higienizacja/*.html, <style>).
   Tu są tylko tokeny i klasy wspólne dla kilku sekcji. CSS konkretnych
   sekcji przychodzi razem z blokami (M3).

   Każdy blok-sekcja nosi klasę .of-page na swoim korzeniu, więc tokeny
   i reguły bazowe są zawężone do .of-page. Dzięki temu nie gryzą się
   z motywem (motyw też może mieć klasy btn czy wrap albo własne h2). */

/* --- Tokeny ----------------------------------------------------------- */
.of-page {
  /* kolory z :root szablonu: presety Gutenberga z inc/tokens.php,
     wartość po przecinku na wypadek braku presetu */
  --ink: var(--wp--preset--color--ink, #262626);
  --muted: var(--wp--preset--color--muted, #5e5c58);
  --gold: var(--wp--preset--color--gold, #d0b991);
  --gold-dark: var(--wp--preset--color--gold-dark, #78603c);
  --cream: var(--wp--preset--color--cream, #f6f3ed);
  --line: var(--wp--preset--color--line, #e5dfd5);
  --white: var(--wp--preset--color--white, #fff);

  /* kolory użyte w szablonie wprost, zebrane tu, żeby sekcje
     nie wpisywały ich na sztywno */
  --gold-hover: #c3a87d;     /* .of-btn-primary:hover */
  --on-gold: #26231e;        /* tekst na złotym przycisku */
  --outline: #b9b4ab;        /* ramka .of-btn-outline */
  --outline-hover: #fff9;    /* tło .of-btn-outline:hover */
  --ink-hover: #444;         /* .of-btn-dark:hover */
  --sand: #f3eee5;           /* tło hero */
  --sand-line: #c7b495;      /* linie kroków, kółka listy */
  --sand-line-soft: #d4c7b4; /* łącznik listy wizyty */
  --sand-line-muted: #d9d0c1;/* linia nad adresem */
  --ivory: #faf8f4;          /* drugi wiersz cennika */
  --stone: #d6d1c9;          /* tło pod zdjęciem kontaktu */
  --brown: #655b4c;          /* okruszki, meta hero */
  --brown-text: #575047;     /* lead hero */
  --header-line: #e9e5dd;    /* dolna linia nagłówka */
  --footer-bg: #181818;
  --footer-text: #ddd;
  --footer-muted: #b8b8b8;
  --footer-line: #393939;
  --focus: #355e7d;

  /* układ */
  --max: 1160px;
  --gutter: 32px;            /* .wrap: calc(100% - 64px) */
  --section-y: 88px;
  --section-head-gap: 42px;

  /* promienie */
  --radius: 4px;             /* przyciski, przycisk menu */
  --radius-photo: 5px;       /* zdjęcia redakcyjne */
  --radius-card: 6px;        /* karta cennika */

  /* cienie */
  --shadow-btn: 0 5px 16px #3b301415;

  /* ruch: FAQ, rozwijanie odpowiedzi (wysokość + opacity, oferty.js)
     i obrót znacznika „+”. Szablon nie animuje, wartości są nasze. */
  --of-faq-duration: 0.35s;
  --of-faq-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --of-faq-marker-duration: var(--of-faq-duration);
  --of-faq-marker-easing: var(--of-faq-easing);
  /* znacznik FAQ odwzorowuje glif „+” Montserrat 400 z szablonu (24px):
     pudełko = szerokość znaku, kreski = obrys glifu, reszta to światło
     znaku, które odsuwa go od prawej krawędzi jak w szablonie */
  --of-faq-marker-size: 24px;
  --of-faq-marker-box: 0.575em;
  --of-faq-marker-bar: 0.44em;
  --of-faq-marker-stroke: 0.0625em;

  /* typografia */
  --font: Montserrat, Arial, sans-serif;
  --h1: var(--wp--preset--font-size--heading-1, clamp(38px, 4.3vw, 60px));
  --h2: var(--wp--preset--font-size--heading-2, clamp(30px, 3vw, 40px));
  --h3: var(--wp--preset--font-size--heading-3, 22px);

  /* stary arkusz edytora czyta --of-font-head */
  --of-font-head: var(--font);

  box-sizing: border-box;
  color: var(--ink);
  font: 400 16px/1.75 var(--font);
}

@media (max-width: 800px) {
  .of-page {
    --gutter: 20px;
    --section-y: 60px;
    --section-head-gap: 30px;
  }
}

/* --- Pasek „Umów wizytę” (M14.2) ----------------------------------------
   Biała pigułka ze złotą ramką przy dolnej krawędzi, tylko na mobile.
   Markup z src/hero/render.php (raz na stronę), widoczność z oferty.js:
   .is-visible, gdy przyciski hero są nad ekranem, bez niej zjazd w dół.
   Boczny zapas zostawia miejsce na ikonę ciasteczek (lewo) i słuchawkę
   (prawo), obie spoza wtyczki. z-index ponad subnav (10). */
.of-cta-bar {
  display: none;
}

@media (max-width: 800px) {
  .of-page.of-cta-bar {
    --of-cta-side: 96px;
    --of-cta-bottom: 16px;
    --of-cta-duration: 0.3s;
    display: flex;
    justify-content: center;
    position: fixed;
    left: var(--of-cta-side);
    right: var(--of-cta-side);
    bottom: calc(var(--of-cta-bottom) + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    margin: 0;
    padding: 0;
    pointer-events: none;
    transform: translateY(calc(100% + var(--of-cta-bottom) + env(safe-area-inset-bottom, 0px)));
    visibility: hidden;
    transition: transform var(--of-cta-duration) cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear var(--of-cta-duration);
  }

  .of-page.of-cta-bar[hidden] {
    display: none;
  }

  .of-page.of-cta-bar.is-visible {
    pointer-events: auto;
    transform: none;
    visibility: visible;
    transition: transform var(--of-cta-duration) cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s;
  }

  .of-page.of-cta-bar .of-cta-bar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    min-height: 52px;
    padding: 12px 20px;
    border: 3px solid var(--gold);
    border-radius: 999px;
    background: var(--white);
    box-shadow: var(--shadow-btn);
    color: var(--gold-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }

  .of-page.of-cta-bar .of-cta-bar__link:is(:hover, :focus) {
    color: var(--gold-dark);
  }
}

@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .of-page.of-cta-bar,
  .of-page.of-cta-bar.is-visible {
    transition: none;
  }
}

@media (max-width: 480px) {
  .of-page {
    --section-y: 48px;
    --h2: 29px;
  }
}

/* --- Baza ------------------------------------------------------------- */
.of-page *,
.of-page *::before,
.of-page *::after {
  box-sizing: border-box;
}

.of-page a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Motywy klasyczne (Bootstrap, Kallyas) zdejmują podkreślenie i malują
   hover własnym kolorem (a:hover 0,1,1, ładowane po wtyczce). */
.of-page a:is(:hover, :focus) {
  color: inherit;
}

.of-page button {
  font: inherit;
}

.of-page :is(a, button, summary) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.of-page :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 5px;
}

.of-page img {
  max-width: 100%;
  display: block;
}

.of-page :is(h1, h2, h3, p) {
  margin: 0;
}

.of-page :is(h1, h2, h3) {
  color: inherit;
  font-family: var(--font);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.of-page h1 { font-size: var(--h1); }
.of-page h2 { font-size: var(--h2); }
.of-page h3 { font-size: var(--h3); letter-spacing: -0.025em; }

.of-page p {
  color: var(--muted);
}

.of-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Sekcja na całą szerokość ---------------------------------------
   Korzeń bloku (alignfull) daje tło od krawędzi do krawędzi, treść
   siedzi w .wrap o szerokości --max. Zerujemy odstęp blockGap motywu,
   żeby sekcje stykały się jak w szablonie. */
.of-page.alignfull {
  max-width: none;
}

.of-page + .of-page {
  margin-block-start: 0;
}

.of-page.section,
.of-page .section {
  padding: var(--section-y) 0;
}

.of-page.cream,
.of-page .cream {
  background: var(--cream);
}

.of-page .wrap {
  max-width: var(--max);
  width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* --- Nagłówek sekcji -------------------------------------------------- */
.of-page .eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 700;
  margin-bottom: 16px;
}

.of-page .section-head {
  max-width: 700px;
  margin-bottom: var(--section-head-gap);
}

.of-page .section-head p {
  margin-top: 20px;
}

.of-page .text-link {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .of-page .eyebrow {
    font-size: 10px;
    margin-bottom: 13px;
  }
}

/* --- Bloki core w sekcjach --------------------------------------------
   Treść sekcji to core/heading, core/paragraph, core/image, core/buttons…
   Rozmiary, kolory i odstępy treści ustawiają ich atrybuty (presety
   z inc/tokens.php). Tu jest tylko zerowanie tego, co dokłada motyw
   i układ WP: blockGap między dziećmi, margines figure i podpisu. */
.of-page :is(.is-layout-flow, .is-layout-constrained) > * {
  margin-block-start: 0;
}

.of-page :where(figure) {
  margin: 0;
}

.of-page .wp-element-caption {
  margin: 0;
}

.of-page .wp-block-image img {
  display: block;
}

/* Odstęp przycisków. Motyw klasyczny bez theme.json nie emituje
   wp-container-* z blockGap, zostaje core'owe 0.5em. Gap ustawiony
   w edytorze (z klasą wp-container-*) ma pierwszeństwo. */
.of-page .wp-block-buttons:not([class*="wp-container-"]) {
  gap: var(--wp--preset--spacing--of-2);
}

/* --- Przyciski --------------------------------------------------------
   core/button z className "of-btn of-btn-primary" (albo of-btn-outline,
   of-btn-dark)
   na <div class="wp-block-button">; wygląd dostaje <a> w środku.
   Kolory i rozmiar pisma idą z atrybutów bloku (backgroundColor,
   textColor, fontSize). Klasy presetów mają !important na
   background-color, więc hover maluje warstwą background-image.
   Dopisek "of-has-arrow" daje ↗ za etykietą. Ikonę przed etykietą wstawia
   się jako obrazek inline w tekście przycisku (sekcja Ikony niżej).
   Stare a.of-btn (bloki jeszcze na atrybutach) łapie ta sama reguła.
   Treść zapisana z gołymi btn* dostaje of-btn* z inc/classes.php. */
.of-page :is(:is(.of-btn, .btn):not(.wp-block-button), .wp-block-button:is(.of-btn, .btn) > .wp-block-button__link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 52px;
  padding: 13px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  font-family: var(--font);
  font-size: var(--wp--preset--font-size--text-s, 13px);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: normal;
  transition: background 0.2s, box-shadow 0.2s;
}

.of-page :is(:is(.of-btn-primary, .btn-primary):not(.wp-block-button), .wp-block-button:is(.of-btn-primary, .btn-primary) > .wp-block-button__link) {
  background-color: var(--gold);
  color: var(--on-gold);
}

.of-page :is(:is(.of-btn-primary, .btn-primary):not(.wp-block-button), .wp-block-button:is(.of-btn-primary, .btn-primary) > .wp-block-button__link):hover {
  background-image: linear-gradient(var(--gold-hover), var(--gold-hover));
  box-shadow: var(--shadow-btn);
}

.of-page :is(:is(.of-btn-outline, .btn-outline):not(.wp-block-button), .wp-block-button:is(.of-btn-outline, .btn-outline) > .wp-block-button__link) {
  border-color: var(--outline);
  background-color: transparent;
  color: var(--ink);
}

.of-page :is(:is(.of-btn-outline, .btn-outline):not(.wp-block-button), .wp-block-button:is(.of-btn-outline, .btn-outline) > .wp-block-button__link):hover {
  background-image: linear-gradient(var(--outline-hover), var(--outline-hover));
}

.of-page :is(:is(.of-btn-dark, .btn-dark):not(.wp-block-button), .wp-block-button:is(.of-btn-dark, .btn-dark) > .wp-block-button__link) {
  color: var(--white);
  background-color: var(--ink);
}

.of-page :is(:is(.of-btn-dark, .btn-dark):not(.wp-block-button), .wp-block-button:is(.of-btn-dark, .btn-dark) > .wp-block-button__link):hover {
  background-image: linear-gradient(var(--ink-hover), var(--ink-hover));
}

.of-page .wp-block-button:is(.of-has-arrow, .has-arrow) > .wp-block-button__link::after {
  content: "↗";
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
}

/* --- Ikony ------------------------------------------------------------
   Ikony to bloki core/image z klasą of-icon i plikiem SVG z
   assets/img/icons (kolor w pliku), podmieniane jak każde zdjęcie.
   Rozmiar z --icon-size, sekcja może go nadpisać. */
.of-page {
  --icon-size: 19px;
}

.of-page .wp-block-image.of-icon {
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  margin: 0;
}

.of-page .wp-block-image.of-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ikona w core/button. Przycisk nie przyjmuje bloku obrazka, więc ikona
   to obrazek inline w etykiecie (format core/image, w edytorze "Zastąp
   obraz"). Po podmianie edytor daje klasę wp-image-N i inline width,
   stąd selektor po img i !important na rozmiarze. */
.of-page .wp-block-button:is(.of-btn, .btn) > .wp-block-button__link > img {
  flex-shrink: 0;
  width: var(--icon-size) !important;
  height: var(--icon-size);
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .of-page * {
    transition: none !important;
  }
}