/* ============================================================
   SHARED STYLES — Kalkulatory SztukaRadości.pl
   Fraunces (display serif) + Manrope (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Manrope", system-ui, sans-serif;
  color: #23242b;
  line-height: 1.65;
  font-size: 17px;
  background: #fffdf6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Variables (per-page can override --accent etc.) ── */
:root {
  --navy:        #1B1F3B;
  --plum:        #2C003E;
  --cream:       #FFF8E1;
  --bg:          #fffdf6;
  --white:       #ffffff;
  --ink:         #23242b;
  --muted:       #5c5d6e;
  --border:      rgba(27,31,59,.10);
  --card-shadow: 0 16px 56px -22px rgba(27,31,59,.28);
  --r:           20px;
  --maxw:        720px;
  --accent:      #FF8C00;
  --accent2:     #ff6a00;
  --accent-light:rgba(255,140,0,.12);
}

/* ── Layout ── */
.wrap      { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: 1100px;      margin: 0 auto; padding: 0 20px; }

/* ── Typography ── */
h1, h2, h3, h4, .serif {
  font-family: "Fraunces", Georgia, serif;
  line-height: 1.08;
  letter-spacing: -.01em;
}
a       { color: inherit; text-decoration: none; }
strong  { font-weight: 700; }
p       { text-wrap: pretty; }

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.sitenav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 14px rgba(27,31,59,.06);
}
.sitenav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 62px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-sun {
  display: block;
  flex-shrink: 0;
  animation: logo-spin 22s linear infinite;
}
@keyframes logo-spin { to { transform: rotate(360deg); } }
.logo-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-sz { font-family: "Manrope", sans-serif; font-size: 9.5px; font-weight: 700; color: var(--muted); }
.logo-rd { font-family: "Fraunces", serif; font-weight: 900; font-size: 15px; color: var(--navy); }
.logo-pl { font-family: "Manrope", sans-serif; font-size: 9.5px; font-weight: 600; color: var(--muted); }

/* Separator */
.nav-sep { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }

/* Back link */
.nav-back {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: background .12s, color .12s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-back:hover { background: var(--cream); color: var(--navy); }

/* Calc links */
.calc-nav {
  display: flex;
  gap: 3px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  justify-content: flex-end;
}
.calc-nav::-webkit-scrollbar { display: none; }
.cn-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 5px 9px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .12s, color .12s;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cn-link:hover { background: var(--cream); color: var(--navy); }
.cn-link[aria-current="page"] {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

/* ══════════════════════════════════════
   SECTION LABELS
══════════════════════════════════════ */
.sec-tag  { font-size: 11.5px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); display: block; }
.sec-sub  { font-size: 12px;   font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);  display: block; margin-top: 4px; }
h2.sec-h  { font-family: "Fraunces", serif; font-weight: 900; font-size: clamp(24px,5vw,36px); color: var(--navy); margin-top: 10px; }
.sec-lead { font-size: 17.5px; color: var(--muted); margin-top: 12px; max-width: 54ch; }

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn {
  display: block;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  padding: 15px 20px;
  border-radius: 13px;
  font-size: 15.5px;
  cursor: pointer;
  border: none;
  transition: transform .12s, box-shadow .12s;
  line-height: 1.3;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold  { background: linear-gradient(135deg,#FFD700,#f2b705); color: var(--navy);  box-shadow: 0 8px 24px -8px rgba(255,215,0,.55); }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.38); }

/* ══════════════════════════════════════
   TILES (cross-sell)
══════════════════════════════════════ */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}
.tile {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 18px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 8px 28px -20px rgba(27,31,59,.42);
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(27,31,59,.5); }
.tile .ico  { font-size: 26px; display: block; }
.tile h4    { font-family: "Fraunces", serif; font-weight: 900; color: var(--navy); font-size: 16px; margin-top: 10px; line-height: 1.2; }
.tile p     { color: var(--muted); font-size: 13.5px; margin-top: 7px; line-height: 1.5; }
.tile .go   { margin-top: 13px; font-weight: 800; color: var(--accent); font-size: 13.5px; display: block; }

/* ══════════════════════════════════════
   SOCIAL PROOF
══════════════════════════════════════ */
.quote {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 8px 28px -22px rgba(27,31,59,.38);
}
.stars { color: #f5b301; letter-spacing: 2px; font-size: 17px; }
.quote blockquote { font-family: "Fraunces", serif; font-style: italic; font-weight: 500; font-size: 17.5px; color: var(--navy); margin-top: 9px; line-height: 1.5; }
.quote cite       { display: block; margin-top: 10px; font-weight: 700; color: var(--muted); font-size: 13.5px; font-style: normal; }
.count-line       { font-weight: 800; color: var(--navy); font-size: 16px; display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.count-line .big  { font-family: "Fraunces", serif; font-weight: 900; color: var(--accent); font-size: 22px; }

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
details { background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 0 18px; margin-top: 11px; }
details summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 0;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content:"+"; font-family:"Fraunces",serif; font-weight:900; font-size:22px; color:var(--accent); transition:transform .18s; flex-shrink:0; }
details[open] summary::after { transform: rotate(45deg); }
.d-ans { padding: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ══════════════════════════════════════
   SCIENCE / SEO
══════════════════════════════════════ */
.science { background: linear-gradient(180deg,#fffdf6,#fff9e8); padding: 52px 0; }
.ntable  { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; background: #fff; border-radius: 13px; overflow: hidden; box-shadow: 0 8px 24px -20px rgba(27,31,59,.38); }
.ntable th, .ntable td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.ntable th { background: var(--navy); color: #FFD700; font-size: 12px; letter-spacing: .04em; font-family: "Manrope", sans-serif; font-weight: 700; }
.ntable tr:last-child td { border-bottom: none; }
.sci-h3 { font-family: "Fraunces", serif; font-size: 19px; color: var(--navy); margin-top: 28px; font-weight: 900; }
.sci-p  { margin-top: 10px; color: #3e3f4a; font-size: 16px; line-height: 1.7; }
.sources { margin-top: 26px; font-size: 12.5px; color: var(--muted); line-height: 1.8; border-top: 1px solid var(--border); padding-top: 20px; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer { background: var(--navy); color: #bdc0d8; padding: 44px 0 56px; }
.f-inner   { display: flex; flex-direction: column; gap: 16px; }
.f-logo    { display: flex; align-items: center; gap: 10px; }
.f-wm      { font-family: "Fraunces", serif; font-weight: 900; color: #fff; font-size: 18px; }
.f-nav     { display: flex; flex-wrap: wrap; gap: 6px; }
.f-nav a   { font-size: 13px; font-weight: 600; color: #9da0bc; padding: 5px 10px; border-radius: 7px; text-decoration: none; border: 1px solid rgba(255,255,255,.08); transition: background .12s, color .12s; }
.f-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.f-home    { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,215,0,.1); border: 1px solid rgba(255,215,0,.28); color: #FFD700; font-weight: 800; font-size: 14px; padding: 10px 16px; border-radius: 10px; text-decoration: none; transition: background .12s; }
.f-home:hover { background: rgba(255,215,0,.18); }
.f-crisis  { background: rgba(255,215,0,.07); border: 1px solid rgba(255,215,0,.18); border-radius: 11px; padding: 13px 15px; color: #fbe9a8; font-size: 13px; line-height: 1.65; }
.f-crisis strong { color: #FFD700; }
.f-copy    { font-size: 12px; opacity: .55; }

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
.rev { opacity: 0; transform: translateY(14px); animation: rise .65s ease-out forwards; }
@keyframes rise       { to { opacity: 1; transform: translateY(0); } }
@keyframes bob        { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
@keyframes slideDown  { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════
   MOBILE
══════════════════════════════════════ */
@media(max-width:620px) {
  .tiles { grid-template-columns: 1fr; }
  .cn-link .cn-text { display: none; }
}
@media(max-width:480px) {
  .logo-sz, .logo-pl { display: none; }
  .nav-sep { display: none; }
  .nav-back .back-text { display: none; }
}