/*
 * Glow To Go: wygląd strony (Unit 5, AC-24, AC-26). Najpierw telefon, potem szersze ekrany.
 * Marka z szyldu w salonie, ale spokojnie (GTG-10, uwaga właścicielki „zbyt różowo”): tło białe i ciepła kość słoniowa,
 * co druga sekcja jasny neutralny beż, karty białe z cienką neutralną ramką. Róż tylko w przyciskach, linkach i drobnych
 * akcentach; neonowy błękit tylko jako cienkie detale; stopka ciemna, ciepła szarość.
 * Kontrast WCAG 2.1 AA (tło --tlo / --tlo-sekcji): --tekst #2B1B24 15,5:1 / 14,6:1, --roz #B0237E 5,9:1 / 5,5:1,
 * --tekst-cichy #6B5562 6,4:1 / 6,1:1, --blekit #1F6FA8 5,1:1; stopka #2E2826: tekst #EDE6E2 11,8:1, linki #F4B9DC 8,9:1.
 * Czcionki tylko z własnego serwera (AC-25), licencje w /fonts/LICENCJE.md.
 */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/fonts/quicksand-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/fonts/quicksand-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/sacramento-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/sacramento-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --neon-roz: #F25AC6;
  --neon-blekit: #5BC0F8;
  --roz: #B0237E;
  --roz-ciemny: #8A1A62;
  --blekit: #1F6FA8;
  --tlo: #FBF8F6;
  --tlo-sekcji: #F6F1EF;
  --tlo-mocniejsze: #ECE4E0;
  --ramka: #E9E1DD;
  --stopka: #2E2826;
  --stopka-tekst: #EDE6E2;
  --stopka-link: #F4B9DC;
  --bialy: #FFFFFF;
  --zloto: #C9A45C;
  --tekst: #2B1B24;
  --tekst-cichy: #6B5562;
  --cien: 0 0.25rem 1rem rgb(43 35 38 / 0.06);
  --promien: 1.25rem;
  --pasek: 4.5rem;
  --szerokosc: 72rem;
  --pismo: 'Quicksand', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --pismo-ozdobne: 'Sacramento', 'Segoe Script', cursive;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-bottom: var(--pasek);
}

body {
  margin: 0;
  font-family: var(--pismo);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--tlo);
  /* Miejsce na pasek "Umów wizytę", żeby nie zasłaniał końca stopki (AC-13). */
  padding-bottom: var(--pasek);
  /* Powitanie wychodzi na całą szerokość okna (100vw z paskiem przewijania). */
  overflow-x: clip;
}

img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--roz);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--roz-ciemny);
}

:focus-visible {
  outline: 3px solid var(--blekit);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

h1,
h2,
h3 {
  line-height: 1.25;
  color: var(--tekst);
  font-weight: 700;
  margin: 1.5em 0 0.5em;
  overflow-wrap: anywhere;
}

h1 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  margin-top: 0.75em;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.2rem;
  color: var(--tekst);
}

/* Ozdobne pismo z neonu tylko dla krótkich nagłówków sekcji. */
.o-salonie > h2,
.grupy > h2,
.opinie > h2,
.uslugi > h2,
.faq > h2,
.inne-grupy > h2 {
  font-family: var(--pismo-ozdobne);
  font-weight: 400;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
  line-height: 1.1;
}

p,
ul,
dl,
address {
  margin: 0 0 1em;
}

address {
  font-style: normal;
}

.wizualnie-ukryte {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Pomiń do treści: widoczny dopiero po przejściu klawiaturą. */
.pomin {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 30;
  padding: 0.75rem 1.25rem;
  background: var(--bialy);
  color: var(--blekit);
  border-radius: 0 0 0.75rem 0.75rem;
  box-shadow: var(--cien);
}

.pomin:focus {
  top: 0;
}

/* Przyciski rezerwacji (AC-13). */
.przycisk-rezerwacji {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--roz);
  color: var(--bialy);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s;
}

.przycisk-rezerwacji:hover,
.przycisk-rezerwacji:focus-visible {
  background: var(--roz-ciemny);
  color: var(--bialy);
}

/* Nagłówek: logo, menu (przycisk na telefonie), przełącznik języka, rezerwacja. */
.naglowek {
  /* Białe tło nagłówka na całą szerokość okna (treść nagłówka nadal w --szerokosc). */
  background: var(--bialy);
  box-shadow: 0 0 0 100vmax var(--bialy);
  clip-path: inset(0 -100vmax);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  max-width: var(--szerokosc);
  margin: 0 auto;
  padding: 0.5rem 1rem;
}

.logo {
  margin-right: auto;
  border-radius: 50%;
}

.logo img {
  width: 3.75rem;
  height: 3.75rem;
}

.przelacznik {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0 0.75rem;
  border: 1px solid var(--neon-blekit);
  border-radius: 999px;
  background: var(--bialy);
  font-weight: 700;
  text-decoration: none;
}

.menu-przycisk {
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--ramka);
  border-radius: 50%;
  background: var(--bialy);
  color: var(--tekst);
  cursor: pointer;
}

.menu-ikona,
.menu-ikona::before,
.menu-ikona::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s;
}

.menu-ikona {
  position: relative;
}

.menu-ikona::before,
.menu-ikona::after {
  content: '';
  position: absolute;
  left: 0;
}

.menu-ikona::before {
  top: -6px;
}

.menu-ikona::after {
  top: 6px;
}

.menu-przycisk[aria-expanded='true'] .menu-ikona {
  background: transparent;
}

.menu-przycisk[aria-expanded='true'] .menu-ikona::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-przycisk[aria-expanded='true'] .menu-ikona::after {
  transform: translateY(-6px) rotate(-45deg);
}

.menu {
  order: 4;
  flex-basis: 100%;
}

.menu-przycisk[aria-expanded='false'] + .menu {
  display: none;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.menu a {
  display: block;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--tlo-mocniejsze);
  color: var(--tekst);
  font-weight: 600;
  text-decoration: none;
}

.menu a[aria-current='page'] {
  color: var(--roz);
}

.naglowek .przycisk-rezerwacji {
  display: none;
}

/* Pasek "Umów wizytę" na dole ekranu telefonu (AC-13). */
.pasek-rezerwacji {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--pasek);
  padding: 0.75rem 1rem;
  background: rgb(255 255 255 / 0.97);
  border-top: 1px solid var(--ramka);
  box-shadow: 0 -0.25rem 1rem rgb(43 35 38 / 0.08);
}

.pasek-rezerwacji .przycisk-rezerwacji {
  width: 100%;
  max-width: 24rem;
  text-align: center;
}

main {
  display: block;
  max-width: var(--szerokosc);
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

/* Zdjęcia (Unit 5): wymiary z atrybutów, zaokrąglenie i neonowa poświata. */
.grupa-zdjecie img {
  width: 100%;
  border-radius: var(--promien);
  border: 1px solid var(--neon-blekit);
}

/*
 * Powitanie: zdjęcie wnętrza z neonem na całą szerokość, przyciemnione od dołu, żeby biały tekst miał kontrast AA
 * (tło sekcji ciemne także zanim wczyta się zdjęcie). Neon na górze kadru, tekst pod nim.
 */
.powitanie {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 70svh;
  margin: 0 calc(50% - 50vw) 1rem;
  padding: 15.5rem 1rem 2rem;
  overflow: hidden;
  background: #241820;
  color: var(--bialy);
}

.powitanie-zdjecie {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.powitanie-zdjecie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Neon jest w 41% szerokości zdjęcia: na wąskim ekranie kadr przesunięty tak, żeby został w środku. Na telefonie
     zdjęcie wypełnia wysokość, więc jest ok. 3 razy szersze od ekranu (sizes 300vw w szablonie). */
  object-position: 37% 28%;
}

.powitanie::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(28 16 24 / 0.9) 0%, rgb(28 16 24 / 0.8) 42%, rgb(28 16 24 / 0.2) 62%, rgb(28 16 24 / 0) 100%);
}

.powitanie-tekst {
  width: 100%;
  max-width: var(--szerokosc);
  margin: 0 auto;
  text-shadow: 0 1px 0.6rem rgb(0 0 0 / 0.45);
}

/* Na ciemnym zdjęciu niebieska obwódka fokusu ma tylko ok. 3:1; biała jak w stopce. */
.powitanie :focus-visible {
  outline-color: var(--bialy);
}

.powitanie h1 {
  max-width: 20ch;
  margin: 0.15em 0 0.35em;
  color: var(--bialy);
}

.powitanie-linia {
  margin: 0;
  font-family: var(--pismo-ozdobne);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.2;
}

.powitanie-zdanie {
  max-width: 36rem;
  font-size: 1.125rem;
}

.powitanie-odznaka {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 999px;
  background: rgb(28 16 24 / 0.55);
  font-weight: 700;
  text-shadow: none;
}

.powitanie-odznaka span {
  color: #FFD27A;
}

.powitanie-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0;
  text-shadow: none;
}

.przycisk-drugi {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: 2px solid var(--bialy);
  border-radius: 999px;
  color: var(--bialy);
  font-weight: 700;
  text-decoration: none;
}

.przycisk-drugi:hover,
.przycisk-drugi:focus-visible {
  background: var(--bialy);
  color: var(--tekst);
}

.grupa-naglowek {
  display: grid;
  gap: 1rem 2.5rem;
  align-items: center;
}

.grupa-zdjecie {
  justify-self: center;
  width: 100%;
  max-width: 22rem;
}

/* Co druga sekcja na jasnym neutralnym tle na całą szerokość okna. */
.grupy,
.faq {
  margin: 2rem calc(50% - 50vw);
  padding: 0.5rem max(1rem, calc(50vw - 35rem)) 1.5rem;
  background: var(--tlo-sekcji);
}

/* Grupy zabiegów na stronie głównej. */
.grupy ul,
.inne-grupy ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.grupa-karta a {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-content: center;
  gap: 0.25rem 1rem;
  height: 100%;
  padding: 0.75rem;
  border-radius: var(--promien);
  background: var(--bialy);
  box-shadow: var(--cien);
  border: 1px solid var(--ramka);
  text-decoration: none;
  color: var(--tekst);
}

.grupa-karta a:hover .grupa-tytul {
  color: var(--roz);
}

.grupa-miniatura {
  grid-row: span 2;
  align-self: center;
}

.grupa-tytul,
.od {
  grid-column: 2;
}

.grupa-miniatura img {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  border-radius: 1rem;
}

.grupa-tytul {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
}

.od {
  display: block;
  color: var(--roz);
  font-weight: 700;
}

.inne-grupy a {
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ramka);
  border-radius: 999px;
  background: var(--bialy);
  box-shadow: var(--cien);
  font-weight: 600;
  text-decoration: none;
}

/* Usługi i ceny (AC-02, AC-06). */
.usluga,
.cennik-usluga {
  margin: 1rem 0;
  padding: 1.25rem;
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  background: var(--bialy);
  box-shadow: var(--cien);
}

.usluga h3,
.cennik-usluga h3 {
  margin-top: 0;
}

.opis {
  color: var(--tekst);
}

.cennik-uslugi {
  list-style: none;
  padding: 0;
}

.warianty {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
}

.wariant {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0;
  border-top: 1px dashed var(--tlo-mocniejsze);
}

.wariant-etykieta {
  flex-basis: 100%;
  font-weight: 700;
}

.czas,
.omnibus {
  color: var(--tekst-cichy);
}

.omnibus {
  flex-basis: 100%;
  font-size: 0.95rem;
}

.cena {
  margin-left: auto;
  font-weight: 700;
  font-size: 1.15rem;
}

.cena-promocyjna {
  color: var(--roz);
}

.cena-regularna {
  font-size: 1rem;
  color: var(--tekst-cichy);
}

.etykieta-ceny {
  font-weight: 500;
}

.cena .etykieta-ceny {
  font-size: 0.9rem;
}

.dodatki,
.po-polsku,
.opinie-po-polsku {
  color: var(--tekst-cichy);
  font-size: 0.95rem;
}

.umow {
  display: inline-block;
  padding: 0.45rem 1.25rem;
  border: 2px solid var(--roz);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.umow:hover {
  border-color: var(--roz-ciemny);
}

.aktualnosc {
  color: var(--tekst-cichy);
  font-size: 0.95rem;
}

.pusta-grupa {
  font-weight: 700;
}

/* Opinie z Booksy (AC-17). */
.opinie-lista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.opinia {
  margin: 0;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  background: var(--bialy);
  box-shadow: var(--cien);
}

.opinia blockquote {
  margin: 0 0 0.75rem;
}

.opinia blockquote::before {
  content: '\201C';
  display: block;
  height: 1.5rem;
  font-family: var(--pismo-ozdobne);
  font-size: 3rem;
  line-height: 1;
  color: var(--roz);
}

.opinia figcaption {
  color: var(--tekst-cichy);
  font-size: 0.95rem;
}

.opinia-imie {
  color: var(--tekst);
  font-weight: 700;
}

.opinie-srednia {
  font-weight: 700;
}

.opinie-dopisek {
  color: var(--tekst-cichy);
  font-size: 0.95rem;
}

/* FAQ. */
.faq h3,
.pytanie h2 {
  font-size: 1.15rem;
  color: var(--tekst);
}

.rezerwacja {
  padding: 1.5rem 0;
  text-align: center;
}

/* Stopka: kontakt (AC-14) i dane firmy (AC-15). */
.stopka {
  display: grid;
  gap: 0 2rem;
  margin: 0;
  padding: 1.5rem max(1rem, calc(50% - 35rem)) 1rem;
  background: var(--stopka);
  color: var(--stopka-tekst);
}

.stopka h2,
.stopka h3 {
  font-size: 1.1rem;
  margin-top: 1rem;
  color: var(--bialy);
}

.stopka a {
  color: var(--stopka-link);
}

.stopka a:hover {
  color: var(--bialy);
}

.stopka :focus-visible {
  outline-color: var(--stopka-link);
}

.kontakt {
  display: grid;
  gap: 0 2rem;
}

.godziny,
.wyjatki {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 1rem;
}

.godziny dd,
.wyjatki dd {
  margin: 0;
}

.media {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

@media (min-width: 40rem) {
  .grupy ul,
  .opinie-lista,
  .inne-grupy ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .kontakt {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  body {
    padding-bottom: 0;
  }

  .pasek-rezerwacji,
  .menu-przycisk {
    display: none;
  }

  .naglowek .przycisk-rezerwacji {
    display: inline-block;
    order: 3;
  }

  .menu-przycisk[aria-expanded='false'] + .menu {
    display: block;
  }

  .menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    padding: 0.25rem 0 0.5rem;
  }

  .menu a {
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
  }

  .menu a:hover,
  .menu a[aria-current='page'] {
    border-bottom-color: var(--neon-roz);
  }

  /* Na szerokim ekranie neon zostaje po lewej, tekst na ciemniejszej prawej części (lustro). */
  .logo img {
    width: 4.75rem;
    height: 4.75rem;
  }

  .powitanie {
    align-items: center;
    min-height: 80vh;
    padding: 3rem max(2rem, calc(50vw - 36rem));
  }

  .powitanie-zdjecie img {
    object-position: 50% 32%;
  }

  .powitanie::after {
    background: linear-gradient(to left, rgb(28 16 24 / 0.88) 0%, rgb(28 16 24 / 0.78) 38%, rgb(28 16 24 / 0.15) 58%, rgb(28 16 24 / 0) 75%);
  }

  .powitanie-tekst {
    max-width: 32rem;
    margin: 0 0 0 auto;
  }

  .grupa-naglowek {
    grid-template-columns: 1fr 24rem;
  }

  .grupy ul,
  .opinie-lista,
  .inne-grupy ul {
    grid-template-columns: repeat(3, 1fr);
  }

  .stopka {
    grid-template-columns: 2fr 1fr;
  }

  .stopka > p {
    grid-column: 1 / -1;
  }
}

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