/* ============================================================
   shared.css — Alicja Wiatrowska · wiatrowska.pro
   Wspólne style: zmienne, reset, belka menu (sticky-header),
   stopka (new-footer), reveal, dostępność.
   Ładowany PRZED stylami inline strony — strona może nadpisywać.
   ============================================================ */
:root {
  --cream: #fdfbf7;
  --card-cream: #f2ede4;
  --deep-green: #1a3d35;
  --deep-green-darker: #122e27;
  --card-green: #23473c;
  --gold: #d4af37;
  --gold-light: #e6c875;
  --aw-gold-light: #e6c875;
  --white: #ffffff;
  --text-dark: #1a2e25;
  --text-soft: #3d4f47;
  --gold-gradient: linear-gradient(135deg, #f4e08a 0%, #d4af37 45%, #b8912a 60%, #f4e08a 100%);
  --line: rgba(212,175,55,0.35);
  --aw-header-h: 72px;

  /* ── SKALA TYPOGRAFICZNA (5 rozmiarów, proporcja ~1.3×) ── */
  --fs-sm:   1rem;                              /* etykiety, nav, przyciski, drobny tekst */
  --fs-base: 1.2rem;                            /* tekst czytany, akapity, opisy */
  --fs-lg:   1.6rem;                            /* drobne nagłówki, wyróżnienia */
  --fs-xl:   clamp(1.9rem, 3.4vw, 2.6rem);      /* nagłówki sekcji */
  --fs-hero: clamp(3rem, 8vw, 7rem);            /* imię na hero, największe napisy */
  --fs-cta:  clamp(1.5rem, 2.7vw, 2.08rem);     /* tekst CTA "Masz wątpliwości" — 20% mniej niż xl */
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Cormorant Garamond',serif;
  font-size:19px;
  background-color:var(--cream);
  color:var(--text-dark);
  line-height:1.75;
  overflow-x:clip;
}
img { max-width:100%; height:auto; }

a:focus-visible, button:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ── PŁYNNE PRZEJŚCIA MIĘDZY PODSTRONAMI ──
   View Transitions API (Chrome/Edge/Safari): miękki cross-fade przy nawigacji.
   Fallback (Firefox): delikatne pojawienie strony po załadowaniu. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: awPageOut 0.22s ease both; }
::view-transition-new(root) { animation: awPageIn 0.34s ease both; }
@keyframes awPageOut { to { opacity: 0; } }
@keyframes awPageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@supports not (view-transition-name: root) {
  body { animation: awPageIn 0.34s ease both; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── SKIP LINK (wstrzykiwany przez layout.js, cel: #tresc) ── */
.skip-link {
  position:absolute; top:-999px; left:0;
  background:var(--deep-green); color:var(--gold-light);
  padding:8px 18px; font-family:'Cinzel',serif; font-size: var(--fs-sm);
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  z-index:9000; border-radius:0 0 6px 0;
}
.skip-link:focus { top:0; }

/* ── SHARED SECTION ── */
section { padding:90px clamp(20px,5vw,60px); }
.section-inner { max-width:1140px; margin:0 auto; }
.section-head { text-align:center; max-width:640px; margin:0 auto 56px; }
.section-head h2 {
  font-family:'Playfair Display',serif;
  font-size: var(--fs-xl); font-weight:500; color:var(--deep-green);
}

.eyebrow {
  font-family:'Cinzel',serif; font-size: var(--fs-sm);
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}

/* ── BUTTONS ── */
.btn {
  display:inline-block; font-family:'Cinzel',serif;
  font-size: var(--fs-sm); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
  padding:16px 40px; border-radius:50px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s;
  cursor:pointer;
}
.btn-gold {
  background:var(--gold-gradient); color:var(--deep-green);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.45); }
.btn-outline {
  border:1px solid var(--gold); color:var(--gold-light); background:transparent;
}
.btn-outline:hover { background:rgba(212,175,55,.12); transform:translateY(-3px); }

/* ══ SCROLL REVEAL — pojawianie się przy przewijaniu ══ */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
.reveal-on .reveal.in-view { opacity: 1; transform: none; }
.reveal-on .reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-on .reveal-stagger.in-view > * { opacity: 1; transform: none; }
.reveal-on .reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-on .reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-on .reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-on .reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-on .reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-on .reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.48s; }
.reveal-on .reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.56s; }

/* ── OGRANICZONY RUCH: wyłącz animacje, ale NIE chowaj treści ──
   Klasy startujące z opacity:0 muszą tu dostać opacity:1,
   inaczej treść byłaby niewidoczna na zawsze. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; }
  .reveal, .reveal-stagger > * { opacity:1; transform:none; }
  .fade-in-up { opacity:1!important; }
  .tagline-text { width:auto!important; opacity:1!important; white-space:normal!important; }
  .tagline-sub { max-width:none!important; opacity:1!important; white-space:normal!important; }
}

/* ═══════════════════════════════════════════════════════════
   WSPÓLNA BELKA Z MONETĄ 3D (wstrzykiwana przez layout.js)
   Identyczna na wszystkich stronach
   ═══════════════════════════════════════════════════════════ */
.sticky-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 72px;
  background: rgba(10, 43, 33, 0.96);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201,162,75,0.2);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 60px);
}
.sticky-header-left { display: flex; align-items: center; gap: 16px; text-decoration: none; }

/* Moneta 3D */
.sticky-coin { perspective: 800px; width: 46px; height: 46px; flex-shrink: 0; }
.coin-3d {
  position: relative; transform-style: preserve-3d;
  animation: spinVertical 15s linear infinite;
}
.coin-3d:hover { animation-play-state: paused; }
.coin-3d img { height: 46px; width: auto; }
.coin-3d img.front { position: relative; transform: translateZ(5px); display: block; }
.coin-3d img.abs { position: absolute; top: 0; left: 0; }
.coin-3d img.back { transform: translateZ(-5px) rotateY(180deg); }
.coin-3d img.layer { filter: brightness(0.35) sepia(1) drop-shadow(0 0 2px rgba(212,175,55,0.8)); }
.coin-3d img.l1 { transform: translateZ(4px); }
.coin-3d img.l2 { transform: translateZ(3px); }
.coin-3d img.l3 { transform: translateZ(2px); }
.coin-3d img.l4 { transform: translateZ(1px); }
.coin-3d img.l5 { transform: translateZ(0px); }
.coin-3d img.l6 { transform: translateZ(-1px); }
.coin-3d img.l7 { transform: translateZ(-2px); }
.coin-3d img.l8 { transform: translateZ(-3px); }
.coin-3d img.l9 { transform: translateZ(-4px); }
@keyframes spinVertical { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }

.sticky-name { display: flex; flex-direction: column; gap: 1px; }
.sticky-name strong { font-family: 'Cinzel', serif; font-size: 1.18rem; letter-spacing: 0.12em; color: #fff; font-weight: 600; text-transform: uppercase; line-height: 1.2; }
.sticky-name em { font-family: 'Cinzel', serif; font-size: 0.88rem; letter-spacing: 0.1em; color: var(--gold-light); font-style: normal; text-transform: lowercase; line-height: 1.2; }

.sticky-nav-links { display: flex; align-items: center; gap: 40px; }
.sticky-nav-link {
  font-family: 'Cinzel', serif; color: rgba(255,255,255,0.85); text-decoration: none;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 1.02rem;
  border-bottom: 2px solid transparent; padding-bottom: 3px;
  transition: color 0.3s ease, border-color 0.3s ease; white-space: nowrap;
}
.sticky-nav-link:hover, .sticky-nav-link.active { color: var(--gold-light); border-bottom-color: var(--gold-light); }
.sticky-nav-link.btn-kontakt {
  color: var(--gold-light); border: 1px solid var(--gold-light); border-radius: 30px;
  padding: 8px 22px; border-bottom: 1px solid var(--gold-light);
  transition: background 0.3s ease, color 0.3s ease;
}
.sticky-nav-link.btn-kontakt:hover { background: var(--gold-light); color: var(--deep-green); border-color: var(--gold-light); }

.idx-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; }
.idx-burger span { display: block; width: 24px; height: 2px; background: var(--gold-light); border-radius: 2px; }

@media (max-width: 1150px) {
  .sticky-nav-links { gap: 26px; }
  .sticky-nav-link { font-size: 0.95rem; }
}
@media (max-width: 980px) {
  .sticky-nav-links { gap: 22px; }
  .sticky-nav-link { font-size: var(--fs-sm); letter-spacing: 0.1em; }
}
@media (max-width: 860px) {
  .idx-burger { display: flex; }
  .sticky-name { display: none; }
  .sticky-nav-links {
    display: none;
    position: fixed; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: #0a2b21; padding: 20px 24px 28px; gap: 4px;
    border-bottom: 1px solid rgba(212,175,55,0.18);
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .sticky-nav-links.aw-open { display: flex; }
  .sticky-nav-links .sticky-nav-link { padding: 14px 4px; border-bottom: 1px solid rgba(212,175,55,0.12); font-size: var(--fs-sm); letter-spacing: 0.1em; }
  .sticky-nav-links .sticky-nav-link.btn-kontakt { border: 1px solid var(--gold-light); border-radius: 30px; text-align: center; margin-top: 12px; padding: 12px 22px; }
}

/* ═══════════════════════════════════════════════════════
   UNIWERSALNA STOPKA (new-footer) — minimalistyczna, pełna szerokość
   Jeden pas: marka · linki w linii · ikony SM, pod spodem drobny druk
   ═══════════════════════════════════════════════════════ */
.new-footer { background:#0a2b21; color:rgba(253,251,247,.75); }
.new-footer-inner {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 24px; padding:16px clamp(20px,4vw,60px) 12px;
}
.new-footer-contact { flex:1 1 auto; min-width:0; text-align:center; font-family:'Cormorant Garamond',serif; font-size:1.05rem; line-height:1.5; color:rgba(253,251,247,.78); }
.new-footer-contact a { color:#e6c875; text-decoration:none; }
.new-brand { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.new-brand img { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.new-brand-name { display:flex; flex-direction:column; }
.nb1 { font-family:'Cinzel',serif; font-size:0.92rem; letter-spacing:.1em; color:#fff; font-weight:600; text-transform:uppercase; line-height:1.3; }
.nb2 { font-family:'Cinzel',serif; font-size:0.78rem; letter-spacing:.08em; color:#e6c875; text-transform:lowercase; line-height:1.3; }
.new-footer-nav { flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px 22px; }
.new-footer-nav a { font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:rgba(253,251,247,.8); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; white-space:nowrap; }
.new-footer-nav a:hover { color:#e6c875; border-bottom-color:rgba(212,175,55,.4); }
.new-footer-social { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.new-footer-social a {
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(212,175,55,.45); color:#e6c875;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.new-footer-social a:hover { background:var(--gold-light); color:#0a2b21; border-color:var(--gold-light); transform:translateY(-2px); }
.new-footer-fine { padding:0 clamp(20px,4vw,60px) 10px; text-align:center; font-size:0.82rem; color:rgba(253,251,247,.5); line-height:1.45; }
.new-footer-bottom { border-top:1px solid rgba(212,175,55,.15); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 24px; padding:10px clamp(20px,4vw,60px); font-family:'Cinzel',serif; font-size:0.8rem; letter-spacing:.08em; color:rgba(253,251,247,.58); }
.new-footer-bottom a { color:#e6c875; text-decoration:none; }
@media (max-width: 1080px) {
  .new-footer-inner { flex-direction:column; justify-content:center; gap:14px; padding-top:20px; text-align:center; }
  .new-footer-nav { justify-content:center; }
  .new-footer-bottom { flex-direction:column; text-align:center; }
}

/* ── Odstęp treści od stałej belki (72px) — działa po wstrzyknięciu przez layout.js ── */
.sticky-header + .page-hero, .sticky-header ~ .page-hero,
.sticky-header ~ .hero,
.sticky-header ~ main,
.sticky-header ~ section:first-of-type,
.sticky-header + .page-header,
.sticky-header ~ .contact-header,
.sticky-header + .policy-header, .sticky-header ~ .policy-header { margin-top: 72px; }