/* site.css — custom overrides on top of the prebuilt app.css.
   NOTE: the design's theme vars are FULL colors (e.g. --paper:#f4f2ec,
   --rust:#c8543b, --fg:#293f14) — use var(--x) directly, never hsl(var(--x)).
   For alpha use color-mix(in srgb, var(--x) N%, transparent). */

/* Header: transparent at the very top (homepage only), solid once scrolled. */
header.is-top {
  background: transparent !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Hero parallax headroom (transform driven by site.js). */
#start img.object-cover { will-change: transform; }

/* ---------- Subpage mini-hero ----------
   The fixed h-16 (64px) header overlaps content; pt-28/pt-36 were tree-shaken
   out of app.css. This band guarantees top clearance + a consistent hero. */
.subpage-hero {
  position: relative;
  padding-top: 7.5rem;
  padding-bottom: 2.75rem;
  /* Same hero photo as the homepage, behind a paper veil that fades to solid
     paper at the bottom so the title stays readable and blends into content. */
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 64%, transparent) 0%,
      color-mix(in srgb, var(--paper) 82%, transparent) 58%,
      var(--paper) 100%),
    url('../img/hero-wnetrze.jpg');
  background-size: cover;
  background-position: center 32%;
  border-bottom: 1px solid var(--edge);
}
@media (min-width: 640px) {
  .subpage-hero { padding-top: 9rem; padding-bottom: 3.5rem; }
}
.subpage-hero__back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 500; margin-bottom: 1rem;
  color: color-mix(in srgb, var(--fg) 60%, transparent); text-decoration: none;
}
.subpage-hero__back:hover { color: var(--rust); }

/* First content block on a subpage detail (article) still needs header clearance. */
main > article:first-child { padding-top: 6.5rem; }
@media (min-width: 640px) { main > article:first-child { padding-top: 7.5rem; } }

/* Guaranteed gap between the mini-hero band and the content below it
   (py-14/pb-28 utilities are tree-shaken out of app.css). */
.subpage-hero + section,
.subpage-hero + article { padding-top: 3.5rem; }
@media (min-width: 640px) {
  .subpage-hero + section,
  .subpage-hero + article { padding-top: 4rem; }
}

/* ---------- Main-nav dropdowns ---------- */
.nav-item { position: relative; display: inline-flex; }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: .4rem; min-width: 220px;
  background: var(--paper); border: 1px solid var(--edge);
  border-radius: 14px; padding: .4rem; z-index: 50;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown,
.nav-item.is-open > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
  display: block; padding: .55rem .7rem; border-radius: 9px; font-size: 13px;
  color: color-mix(in srgb, var(--fg) 80%, transparent); text-decoration: none; white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--surface); color: var(--fg); }
.nav-caret { transition: transform .16s ease; }
.nav-item:hover .nav-caret, .nav-item.is-open .nav-caret { transform: rotate(180deg); }

/* Rich dropdown (title + description + arrow) */
.nav-dropdown--rich { min-width: 340px; padding: .5rem; }
.nav-dd-item { display: block; padding: .65rem .85rem; border-radius: 11px; text-decoration: none; }
.nav-dd-item:hover { background: var(--surface); }
.nav-dd-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-dd-title { font-size: 14px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.nav-dd-arrow { color: color-mix(in srgb, var(--fg) 35%, transparent); transition: transform .15s ease, color .15s ease; }
.nav-dd-item:hover .nav-dd-arrow { color: var(--rust); transform: translateX(3px); }
.nav-dd-desc { display: block; margin-top: .15rem; font-size: 12.5px; color: color-mix(in srgb, var(--fg) 55%, transparent); white-space: normal; line-height: 1.35; }

/* ---------- GDPR cookie banner ---------- */
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60; display: flex; justify-content: center; }
.cookie-banner__inner {
  max-width: 680px; width: 100%; background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  border-radius: 16px; box-shadow: 0 16px 48px -16px rgba(0,0,0,.4);
  padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
}
.cookie-banner__text { margin: 0; flex: 1 1 280px; font-size: .92rem; line-height: 1.5; color: color-mix(in srgb, var(--fg) 85%, transparent); }
.cookie-banner__text a { color: var(--rust); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; margin-left: auto; }
.cc-btn { padding: 9px 18px; border-radius: 999px; font-size: .9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.cc-btn--ghost { background: transparent; border-color: color-mix(in srgb, var(--fg) 22%, transparent); color: color-mix(in srgb, var(--fg) 80%, transparent); }
.cc-btn--ghost:hover { border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
.cc-btn--primary { background: var(--rust); color: #fff; border-color: var(--rust); }
.cc-btn--primary:hover { filter: brightness(.94); }

/* Site banner modal */
.site-banner { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.site-banner__overlay { position: absolute; inset: 0; background: rgba(20,16,10,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.site-banner__box { position: relative; z-index: 1; width: 100%; max-width: 460px; background: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.site-banner__x { position: absolute; top: 10px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.site-banner__x:hover { background: rgba(0,0,0,.55); }
.site-banner__img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.site-banner__content { padding: 22px 24px 26px; }
.site-banner__title { font-family: var(--font-fraunces, Georgia, serif); font-weight: 600; font-size: 1.5rem; line-height: 1.15; margin: 0 0 .5rem; color: var(--fg); }
.site-banner__text { margin: 0 0 1.1rem; color: color-mix(in srgb, var(--fg) 75%, transparent); line-height: 1.55; }
.site-banner__btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--rust); color: #fff; padding: 11px 20px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.site-banner__btn:hover { filter: brightness(.94); }

/* ---------- Rich-text page bodies (.page-prose) ---------- */
.page-prose > :first-child { margin-top: 0; }
.page-prose p { margin: 0 0 1.1em; }
.page-prose h2 { font-family: var(--font-fraunces, Georgia, serif); font-weight: 600; font-size: 1.7rem; line-height: 1.15; margin: 1.8em 0 .6em; color: var(--fg); }
.page-prose h3 { font-family: var(--font-fraunces, Georgia, serif); font-weight: 600; font-size: 1.3rem; margin: 1.5em 0 .5em; color: var(--fg); }
.page-prose h4 { font-weight: 600; font-size: 1.1rem; margin: 1.3em 0 .4em; }
.page-prose ul, .page-prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.page-prose li { margin: .3em 0; }
.page-prose ul { list-style: disc; }
.page-prose ol { list-style: decimal; }
.page-prose blockquote { border-left: 3px solid var(--rust); padding-left: 1.1em; margin: 1.2em 0; font-style: italic; color: color-mix(in srgb, var(--fg) 75%, transparent); }
.page-prose a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.page-prose a:hover { opacity: .8; }
.page-prose hr { border: 0; border-top: 1px solid var(--edge); margin: 2em 0; }
.page-prose strong { font-weight: 600; color: var(--fg); }