/* Zmiany względem makiety C3 (2026-11-02). Tylko tokeny z :root w style.css. */

/* Skip-link: widoczny po fokusie z klawiatury */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--brand-d);color:#fff;padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px;color:#fff}

/* Menu główne: rozwijane „Masaże” (details/summary – działa bez JS i z klawiatury) */
.nav{align-items:center}
.nav-dd{position:relative}
.nav-dd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:8px 0;color:var(--ink)}
.nav-dd summary::-webkit-details-marker{display:none}
.nav-dd summary .ic{width:18px;height:18px;transition:transform 200ms var(--ease-out)}
.nav-dd[open] summary .ic{transform:rotate(180deg)}
.nav-dd summary.on,.nav a[aria-current="page"]{color:var(--cta);text-decoration:underline;text-underline-offset:6px}
.nav-dd-p{position:absolute;left:-16px;top:100%;z-index:60;min-width:250px;display:flex;flex-direction:column;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(18,48,45,.14)}
.nav .nav-dd-p a{padding:10px 12px;border-radius:8px;min-height:44px;display:flex;align-items:center}
.nav .nav-dd-p a[aria-current="page"]{background:var(--soft);text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .nav .nav-dd-p a:hover{background:var(--soft)}
  .nav-dd summary:hover{color:var(--cta)}
}

/* Menu na telefonie: grupa „Masaże” */
.menu-group{margin:18px 0 4px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cta)}
.menu-links a.menu-sub{min-height:48px;font-size:18px;font-weight:500;padding-left:12px}
.menu-links a[aria-current="page"]{color:var(--cta)}

/* Cennik: link z karty do podstrony zabiegu */
.card-more{align-self:flex-start;font-size:15px}

/* Podstrona zabiegu */
.hero-btns{margin-top:20px}
.usluga .post-hero-img{margin-top:28px}
.masaze .post-grid{margin-top:24px}

/* Fokus widoczny na każdym tle */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--quote);outline-offset:3px;border-radius:6px}

/* Długie słowa w H1 (np. „przeciwobrzękowy”) nie wychodzą poza ekran 320 px */
.page-hero h1{overflow-wrap:break-word;hyphens:auto}
@media (max-width:380px){.page-hero h1{font-size:29px}}

/* Przyciski w ciemnym nagłówku podstrony: reguła makiety .page-hero a nadpisywała kolor */
.page-hero .btn-hero{color:var(--hero-cta-fg)}
.page-hero .btn-ghost{color:#fff}

/* Linki do wszystkich opinii: cel dotyku ≥ 24 px */
.rev-src a{display:inline-flex;align-items:center;min-height:28px}

/* Strona główna: H1 = fraza kluczowa (mały nagłówek), hasło w akapicie z wyglądem dawnego H1 */
.hero h1.hero-h1{font-size:17px;font-weight:600;line-height:1.35;letter-spacing:.04em;text-transform:uppercase;opacity:.9;margin:0 0 8px}
.hero-tag{font-family:'Lexend',system-ui,sans-serif;font-size:38px;font-weight:600;line-height:1.08;letter-spacing:-.01em;margin:0}
@media (min-width:768px){.hero-tag{font-size:54px}}