/*
  Showy Hair — wspólne style strony głównej (index.html) i strony umawiania konsultacji (rezerwacja.html).
  Źródło: www-landing/design_handoff_showy_hair/README.md (tokeny, typografia, komponenty).
  Zasady projektu: paleta wyłącznie achromatyczna, brak zaokrągleń i cieni, jeden próg responsywny 900px,
  cele dotykowe min. 44px. Font Montserrat (zmienny, 300–700; bez pliku kursywy — hasło w hero pochyla przeglądarka) ładuje <link> w <head> każdej strony.

  Klasy wspólne (kontrakt dla obu stron):
    .kontener                         szerokość treści 1240px + boczne marginesy
    .kicker, .kicker--jasny           etykieta nad nagłówkiem (11px, 0.34em, wersaliki)
    .tytul-h1, .tytul-h2, .tytul-h3   nagłówki
    .akapit, .akapit--jasny           tekst 300
    .przycisk                         przycisk/odnośnik pełny; warianty:
      --jasny   biały na ciemnym tle      --ciemny  czarny na jasnym tle
      --obrys   ramka biała (ciemne tło)  --obrys-ciemny  ramka czarna (jasne tło)
    .naglowek (+ __wnetrze, __logo z __marka i __podpis, __nav, __nav-wiersz, __akcje)   sticky header
    .stopka   (+ __gora, __logo, __opis, __dol, __linki)
    .pole, .pole--jasne               etykieta + input/select/textarea z samą dolną linią
    .tylko-czytnik                    tekst tylko dla czytników ekranu
*/

:root {
  --ink: #1A1A1A;
  --ink-soft: #3A3A3A;
  --ink-muted: #6E6E6E;
  --paper: #F4F3F1;
  --paper-warm: #E8E6E2;
  --card: #F9F8F6;
  --line: #D6D4D0;
  --black: #0E0E0E;
  --black-deep: #141414;
  --black-hover: #1C1C1C;
  --white: #FFFFFF;
  --btn-hover: #C9C9C9;
  --btn-hover-cta: #BFBFBF;
  --hair-dark: rgba(255, 255, 255, 0.14);
  --hair-dark-strong: rgba(255, 255, 255, 0.3);

  /* Cała strona w Montserracie. Dwa tokeny zostają, bo nagłówki (--serif) i tekst (--sans) mogą się jeszcze rozejść. */
  --serif: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad-sekcji-y: clamp(72px, 13vw, 200px);
  --pad-sekcji-x: clamp(20px, 5vw, 32px);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  /* wygładzanie domyślne, jak w prototypie — „antialiased” odchudza jasny tekst na ciemnym tle */
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-muted); }
input, textarea, select, button { font-family: var(--sans); }
img { max-width: 100%; display: block; }
::selection { background: var(--ink); color: var(--white); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.tylko-czytnik {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- układ i typografia ------------------------------------------------------ */

.kontener { width: 100%; max-width: var(--max); margin: 0 auto; }

.kicker {
  font-size: 11px; font-weight: 400; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 20px;
}
.kicker--jasny { color: rgba(255, 255, 255, 0.6); }

.tytul-h1 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 7vw, 86px); line-height: 1.02;
  margin: 0; max-width: 14ch; text-wrap: balance;
}
.tytul-h2 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.1;
  margin: 0 0 26px; text-wrap: balance;
}
.tytul-h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0; }

.akapit {
  font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--ink-soft); margin: 0 0 18px;
  max-width: 52ch; text-wrap: pretty;
}
.akapit--jasny { color: rgba(255, 255, 255, 0.72); }

/* --- przyciski --------------------------------------------------------------- */

.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 17px clamp(22px, 6vw, 34px);
  font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1.2; text-align: center; border: 1px solid transparent; border-radius: 0; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.przycisk:disabled, .przycisk[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.przycisk--jasny { background: var(--white); color: var(--black); }
.przycisk--jasny:hover:not(:disabled) { background: var(--btn-hover); color: var(--black); }
.przycisk--ciemny { background: var(--black); color: var(--white); }
.przycisk--ciemny:hover:not(:disabled) { background: var(--ink-soft); color: var(--white); }
.przycisk--obrys { background: transparent; color: var(--white); border-color: var(--white); }
.przycisk--obrys:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); color: var(--white); }
.przycisk--obrys-ciemny { background: transparent; color: var(--ink); border-color: var(--ink); }
.przycisk--obrys-ciemny:hover:not(:disabled) { background: var(--ink); color: var(--white); }

/* --- nagłówek (sticky, ciemny) -------------------------------------------- */

.naglowek {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 14, 14, 0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair-dark);
}
.naglowek__wnetrze {
  max-width: var(--max); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Logo w dwóch wierszach: SHOWY HAIR, pod spodem mniejsze AKADEMIA WŁOSÓW na tę samą szerokość.
   Ujemny margines po prawej znosi odstęp za ostatnią literą, żeby wiersze były wyśrodkowane względem siebie. */
.naglowek__logo {
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--white); text-transform: uppercase; white-space: nowrap; line-height: 1;
}
.naglowek__marka { font-weight: 500; font-size: clamp(16px, 4vw, 20px); letter-spacing: 0.2em; margin-right: -0.2em; }
.naglowek__podpis {
  font-weight: 400; font-size: clamp(8px, 2vw, 10px); letter-spacing: 0.45em; margin-right: -0.45em;
  color: rgba(255, 255, 255, 0.75);
}
.naglowek__logo:hover { color: var(--white); }
.naglowek__nav {
  display: none; align-items: center; gap: 30px;
  font-size: 12px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
}
.naglowek__nav a, .naglowek__nav-wiersz a { color: rgba(255, 255, 255, 0.7); }
.naglowek__nav a:hover, .naglowek__nav-wiersz a:hover { color: var(--white); }
.naglowek__akcje { display: flex; align-items: center; gap: 10px; flex: none; }
.naglowek__cta {
  display: flex; align-items: center; min-height: 44px; padding: 12px 18px; white-space: nowrap;
  background: var(--white); color: var(--black);
  font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase;
}
.naglowek__cta:hover { background: var(--btn-hover-cta); color: var(--black); }
.naglowek__link {
  display: flex; align-items: center; min-height: 44px; padding: 0 4px; white-space: nowrap;
  color: rgba(255, 255, 255, 0.7); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
}
.naglowek__link:hover { color: var(--white); }
/* mobile: drugi rząd z linkami przewijany poziomo */
.naglowek__nav-wiersz {
  display: flex; gap: 18px; overflow-x: auto; padding: 0 20px; -webkit-overflow-scrolling: touch;
  font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; scrollbar-width: none;
}
.naglowek__nav-wiersz::-webkit-scrollbar { display: none; }
.naglowek__nav-wiersz a { white-space: nowrap; display: flex; align-items: center; min-height: 44px; padding: 0 4px; }
@media (min-width: 900px) {
  .naglowek__nav { display: flex; }
  .naglowek__nav-wiersz { display: none; }
}
/* bardzo wąski telefon: logo, przycisk i ikona Instagrama w jednym wierszu (bez tego ikona wychodzi poza ekran) */
@media (max-width: 419.98px) {
  .naglowek__wnetrze { gap: 10px; }
  .naglowek__akcje { gap: 4px; }
  .naglowek__marka { font-size: 14px; }
  .naglowek__podpis { font-size: 7px; }
  .naglowek__cta { padding: 12px 12px; letter-spacing: 0.12em; }
  .naglowek__akcje .ikona-ig { width: 40px; margin-right: -6px; }
}
/* od 900px ikona odsunięta od przycisku jak w projekcie */
@media (min-width: 900px) { .naglowek__akcje .ikona-ig { margin-left: 10px; } }

/* --- stopka ------------------------------------------------------------------ */

.stopka { background: var(--black-deep); color: rgba(255, 255, 255, 0.65); padding: clamp(48px, 6vw, 80px) 24px 40px; }
.stopka a { color: inherit; }
.stopka a:hover { color: var(--white); }
.stopka__gora {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; align-items: end;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
/* logo w stopce jak w nagłówku: SHOWY HAIR, pod spodem AKADEMIA WŁOSÓW na tę samą szerokość */
.stopka__logo {
  display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
  color: var(--white); text-transform: uppercase; white-space: nowrap; line-height: 1;
}
.stopka__logo-marka { font-weight: 500; font-size: 24px; letter-spacing: 0.2em; margin-right: -0.2em; }
.stopka__logo-podpis { font-weight: 400; font-size: 12px; letter-spacing: 0.45em; margin-right: -0.45em; color: rgba(255, 255, 255, 0.75); }
.stopka__opis { font-size: 13px; font-weight: 300; line-height: 1.8; margin: 16px 0 0; max-width: 34ch; }
.stopka__dol {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; padding-top: 26px;
  font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
}
.stopka__linki { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
/* ikona w stopce: pole dotyku 44px bez podnoszenia wiersza */
.stopka__linki .ikona-ig { margin: -12px -7px; }

/* --- ikona Instagrama (kolorowa jak w projekcie): gradient marki + biały znak, pole dotyku 44px --- */

.ikona-ig { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; }
.ikona-ig__znak {
  display: block; width: 30px; height: 30px; border-radius: 8px; color: #FFFFFF;
  background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}
.ikona-ig__znak svg { display: block; width: 100%; height: 100%; }
.ikona-ig:hover .ikona-ig__znak { filter: brightness(1.1); }

/* --- pola formularza (sama dolna linia) --------------------------------------- */

.pole { display: grid; gap: 8px; min-width: 0; }
.pole__etykieta {
  font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.pole input, .pole select, .pole textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.42); border-radius: 0;
  color: var(--white); font-size: 16px; font-weight: 300; padding: 10px 0; outline: none;
  -webkit-appearance: none; appearance: none;
}
.pole textarea { resize: vertical; min-height: 84px; }
.pole select option { color: var(--black); }
/* lista wyboru bez wyglądu systemowego: własna strzałka, wysokość jak pozostałe pola */
.pole select {
  padding-right: 28px; cursor: pointer; min-height: 44px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-opacity='.7' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 4px center;
}
.pole--jasne select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-opacity='.7' stroke-width='1.2'/%3E%3C/svg%3E");
}
.pole input:focus, .pole select:focus, .pole textarea:focus { border-bottom-color: var(--white); }
.pole input::placeholder, .pole textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
/* wariant na jasnym tle (strona rezerwacji) */
.pole--jasne .pole__etykieta { color: var(--ink-muted); }
.pole--jasne input, .pole--jasne select, .pole--jasne textarea { color: var(--ink); border-bottom-color: #8A8782; }   /* 3,2:1 */
.pole--jasne input:focus, .pole--jasne select:focus, .pole--jasne textarea:focus { border-bottom-color: var(--ink); }
.pole--jasne input::placeholder, .pole--jasne textarea::placeholder { color: #A5A29D; }
.pole__blad { font-size: 13px; line-height: 1.5; margin: 0; }
.pole__blad::before { content: "– "; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* =============================================================================
   BANER ZGODY NA STATYSTYKI (js/zgody.js)
   ============================================================================= */

/* Nad przyklejonym nagłówkiem (z-index 50), pod linkiem „przejdź do treści” (100). */
.baner-zgod {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--black-deep); color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.baner-zgod__wnetrze {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 20px clamp(20px, 5vw, 32px); display: grid; gap: 18px;
}
@media (min-width: 900px) {
  .baner-zgod__wnetrze { grid-template-columns: 1fr auto; align-items: center; gap: clamp(24px, 4vw, 56px); }
}
.baner-zgod__tytul {
  font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); margin: 0 0 8px;
}
.baner-zgod__opis { font-size: 14px; font-weight: 300; line-height: 1.6; margin: 0; max-width: 70ch; }
.baner-zgod__opis a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.baner-zgod__akcje { display: flex; flex-wrap: wrap; gap: 12px; }
/* Odmowa ma być równie łatwa jak zgoda: ten sam wygląd, ten sam rozmiar, jedno kliknięcie.
   Dlatego oba przyciski są jasne, a nie „zgoda na jasno, odmowa na szaro”. */
.baner-zgod__btn { flex: 1 1 auto; min-width: 168px; justify-content: center; }

/* Link w stopce, którym można zmienić zdanie. Chowa go zgody.js, gdy nie ma czym zarządzać. */
.stopka__zgody {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* =============================================================================
   LISTA ROZWIJANA „ZABIEGI” W NAGŁÓWKU (js/menu.js)
   ============================================================================= */

.zabiegi { position: relative; display: inline-flex; align-items: center; }

/* Przycisk udaje pozostałe pozycje menu. Przeglądarka narzuca przyciskowi „text-transform: none”,
   a skrót „font” gubi odstęp między literami, stąd dwie linie dziedziczenia. */
.naglowek__zabiegi {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  text-transform: inherit; letter-spacing: inherit;
  color: rgba(255, 255, 255, 0.7); display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.naglowek__zabiegi:hover, .naglowek__zabiegi[aria-expanded="true"] { color: var(--white); }
/* Strzałka obraca się po rozwinięciu: jedyny ruch, jaki tu jest. */
.naglowek__zabiegi::after {
  content: ""; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease;
}
.naglowek__zabiegi[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.naglowek__nav-wiersz .naglowek__zabiegi { min-height: 44px; padding: 0 4px; }

/* Lista opada spod przycisku. Nazwy usług zwykłymi literami: wersaliki z menu byłyby tu nieczytelne. */
.zabiegi__lista {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); z-index: 70;
  min-width: 232px; list-style: none; margin: 0; padding: 8px 0;
  background: var(--black-deep); border: 1px solid rgba(255, 255, 255, 0.16);
}
.zabiegi__lista a {
  display: flex; align-items: center; min-height: 44px; padding: 0 20px; white-space: nowrap;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px; font-weight: 300; letter-spacing: 0.02em; text-transform: none;
}
.zabiegi__lista a:hover { color: var(--white); background: rgba(255, 255, 255, 0.07); }

/* Na telefonie rząd menu przewija się poziomo i przyciąłby listę wystającą poza niego.
   „position: fixed” wychodzi poza to przycięcie i przypina listę pod nagłówkiem. */
@media (max-width: 899px) {
  .naglowek__nav-wiersz .zabiegi__lista {
    position: fixed; top: var(--hdr); left: 0; right: 0; transform: none;
    min-width: 0; border-left: 0; border-right: 0;
    max-height: calc(100vh - var(--hdr)); overflow-y: auto;
  }
}