/* =============================================================================
   dcCMS — Achilles :: Site chrome (header + footer) + przyciski
   Wymaga wcześniej wpiętego tokens.css. Bez JS — interaktywność menu obsługuje
   moduł menu dcCMS (stan mobilny przez klasę .is-open na .site-mobile).
   ============================================================================= */

/* ---- Kontener --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (min-width: 1024px) { .container { padding-inline: var(--container-pad-lg); } }
@media (min-width: 1280px) { .container { padding-inline: var(--container-pad-xl); } }

/* =============================================================================
   Przyciski (reużywalne w całym projekcie – primary / secondary / outline)
   ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; }

.btn--primary   { background: var(--teal); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--deep-teal); }

.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: #fff; }

.btn--outline   { background: transparent; color: var(--navy); border-color: var(--color-border); }
.btn--outline:hover { border-color: var(--navy); }

.btn-umow-badanie .btn::before { content: ""; display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22/%3E%3Cpath%20d%3D%22M16%202v4%22/%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%2010h18%22/%3E%3Cpath%20d%3D%22m9%2016%202%202%204-4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22/%3E%3Cpath%20d%3D%22M16%202v4%22/%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%2010h18%22/%3E%3Cpath%20d%3D%22m9%2016%202%202%204-4%22/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

.btn-wkladki .btn::after { content: ""; display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22/%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22/%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* ---- Grupa przycisków obok siebie (caption slidera i podobne) ---- */
.dc-button-wrap--group { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 640px) { .dc-button-wrap--group { flex-direction: row; align-items: center; } }

.btn--hero { font-size: 16px; padding: 16px 40px; border-radius: var(--radius-lg); }
.btn--hero svg { width: 20px; height: 20px; }

.btn--primary.btn--hero { background: var(--mint); color: var(--navy); font-weight: var(--fw-bold); }
.btn--primary.btn--hero:hover { background: #a9d6d2; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--primary.btn--hero:active { transform: translateY(0); }

.btn--outline.btn--hero { border-width: 2px; border-color: rgba(255,255,255,.6); color: #fff; }
.btn--outline.btn--hero:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* =============================================================================
   HEADER
   ============================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--off-white) 95%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--navy-08);
}

/* ---- Topbar (desktop) ------------------------------------------------- */
.site-topbar {
  display: none;
  background: var(--navy);
  color: var(--white-85);
  border-bottom: 1px solid var(--navy-08);
}
@media (min-width: 1024px) { .site-topbar { display: block; } }
.site-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 6px;
  font-size: var(--fs-xs);
}
.site-topbar__salons { display: flex; align-items: center; gap: var(--space-6); }
.site-topbar__salon  { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-topbar__salon strong { color: #fff; font-weight: var(--fw-medium); }
.site-topbar__salon span    { color: var(--white-75); }
.site-topbar__email {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--white-80, rgba(255,255,255,0.8)); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-topbar__email:hover { color: var(--mint); }
.site-topbar svg { width: 14px; height: 14px; color: var(--mint); }

/* ---- Pasek główny ----------------------------------------------------- */
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 12px;
}
.site-header__logo { display: inline-flex; flex-shrink: 0; }
.site-header__logo .logo { height: 44px; width: auto; }
@media (min-width: 1024px) { .site-header__logo .logo { height: 48px; } }

/* ---- Nav desktop ------------------------------------------------------ */
.site-nav { display: none; align-items: center; gap: var(--space-8); }
@media (min-width: 1024px) { .site-nav { display: flex; } }

.site-nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body); font-size: 15px; font-weight: var(--fw-medium);
  color: var(--navy); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover { color: var(--teal); }
.site-nav__link svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }

.site-nav__item { position: relative; }
.site-nav__item--has-dropdown:hover .site-nav__link svg { transform: rotate(180deg); }

.site-nav__dropdown {
  position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  padding-top: 12px;
  width: 288px;
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.site-nav__item--has-dropdown:hover .site-nav__dropdown { visibility: visible; opacity: 1; }
.site-nav__dropdown ul {
  list-style: none; margin: 0; padding: 8px;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.site-nav__dropdown a {
  display: block; padding: 10px 16px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 14px; font-weight: var(--fw-medium);
  color: var(--navy); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.site-nav__dropdown a:hover { color: var(--teal); background: var(--ink-50); }

.site-header__cta { display: none; }
@media (min-width: 1024px) { .site-header__cta { display: inline-flex; } }

/* ---- Hamburger (mobile) ---------------------------------------------- */
.site-header__burger {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px; color: var(--navy);
  background: none; border: none; border-radius: var(--radius-sm); cursor: pointer;
}
.site-header__burger svg { width: 24px; height: 24px; }
@media (min-width: 1024px) { .site-header__burger { display: none; } }

/* ---- Menu mobilne (stan: .is-open podłącza moduł menu dcCMS) --------- */
.site-mobile {
  position: fixed; inset: 0; z-index: var(--z-mobile);
  display: flex; flex-direction: column;
  background: var(--off-white);
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease-out);
  pointer-events: none;
}
.site-mobile.is-open { transform: translateY(0); pointer-events: auto; }
@media (min-width: 1024px) { .site-mobile { display: none; } }

.site-mobile__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--navy-08);
}
.site-mobile__head .logo { height: 44px; width: auto; }
.site-mobile__close {
  background: none; border: none; padding: 8px; color: var(--navy);
  border-radius: var(--radius-sm); cursor: pointer;
}
.site-mobile__close svg { width: 24px; height: 24px; }

.site-mobile__nav { display: flex; flex-direction: column; gap: 4px; padding: 20px; overflow-y: auto; flex: 1; }
.site-mobile__link {
  padding: 12px 0; font-family: var(--font-body); font-size: 17px;
  font-weight: var(--fw-medium); color: var(--navy); text-decoration: none;
}
.site-mobile__link:hover { color: var(--teal); }
.site-mobile__sub { margin: 0 0 4px 4px; padding-left: 16px; border-left: 1px solid var(--color-border); list-style: none; }
.site-mobile__sub a {
  display: block; padding: 8px 0; font-family: var(--font-body); font-size: 15px;
  color: var(--color-text-secondary); text-decoration: none;
}
.site-mobile__sub a:hover { color: var(--teal); }
.site-mobile__nav .btn { margin-top: 16px; width: 100%; justify-content: center; }

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer { background: var(--navy); color: var(--white-70); }
.site-footer__inner { padding-block: 64px 112px; }
@media (min-width: 1024px) { .site-footer__inner { padding-block: 80px; } }

.site-footer__grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); } }

.site-footer .logo--full { height: 64px; width: auto; }
.site-footer__desc {
  margin-top: 20px; max-width: 20rem; text-align: left;
  font-family: var(--font-body); font-size: 14px; line-height: var(--lh-relaxed);
  color: var(--white-65);
}

.site-footer__heading {
  margin: 0; font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--white-50);
}
.site-footer__list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer__list a {
  font-family: var(--font-body); font-size: 14px; color: var(--white-70); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__list a:hover { color: #fff; }

.site-footer__address { margin-top: 20px; font-style: normal; }
.site-footer__row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; text-decoration: none; }
.site-footer__row + .site-footer__row { margin-top: 12px; }
.site-footer__row svg { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; color: var(--teal); }
.site-footer__row a, .site-footer__row span { color: #fff; text-decoration: none; }
.site-footer__row:hover span { color: var(--teal);}
.site-footer__row a:hover { color: var(--teal); }
.site-footer__phones { display: flex; flex-direction: column; }

.site-footer__hours { margin: 16px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--white-70); }
.site-footer__hours > div { display: flex; gap: 12px; }
.site-footer__hours dt { width: 36px; flex-shrink: 0; margin: 0; }
.site-footer__hours dd { margin: 0; }
.site-footer__hours .is-closed { color: var(--white-40); }

.site-footer__bottom {
  margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; font-size: 13px; color: var(--white-50);
}
.site-footer__bottom a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.site-footer__bottom a:hover { color: var(--teal); }
.site-footer__sep { display: none; }
@media (min-width: 640px) {
  .site-footer__bottom { flex-direction: row; justify-content: center; gap: 8px; }
  .site-footer__sep { display: inline; }
}

/* =============================================================================
   Logo – sterowanie kolorem przez currentColor + --logo-bg
   ============================================================================= */
.logo { display: block; }
.logo--dark  { color: var(--navy);      --logo-bg: var(--off-white); }
.logo--light { color: var(--off-white); --logo-bg: var(--navy); }