/* header.css - safe header-only overrides */
:root{
  --header-overlay: rgba(0,0,0,0.12);
  --title-color: #5b2b12;
  --panel-bg: rgba(255,255,255,0.92);
}

/* Only touch header related selectors */
.top.site-top {
  background-image: -webkit-image-set(
    url('obrazy_header/bg_hero_bronze_2560x900.webp') 1x,
    url('obrazy_header/bg_hero_bronze_5120x1800.webp') 2x
  );
  background-image: image-set(
    url('obrazy_header/bg_hero_bronze_2560x900.webp') 1x,
    url('obrazy_header/bg_hero_bronze_5120x1800.webp') 2x
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 160px;
  position: relative;
  color: var(--title-color);
}

.top.site-top::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--header-overlay);
  pointer-events: none;
  z-index: 0;
}

.top.site-top .container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.brand { display:flex; gap:12px; align-items:center; }
.brand-text { display:flex; flex-direction:column; gap:6px; justify-content:center; }

.brand-logo.site-logo { height: 110px; max-width: 220px; width: auto; object-fit: contain; display:block; }

.site-title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 40px);
  line-height: 1.05;
  color: var(--title-color);
  text-wrap: balance;
}

.title-panel {
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 12px 18px;
  border-radius: 4px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Mobile */
@media (max-width: 900px) {
  .top.site-top { padding: 12px 0; min-height: auto; }
  .brand { flex-direction: column; align-items: center; gap:8px; }
  .brand-logo.site-logo { height: 72px; max-width: 160px; }
  .site-title { text-align:center; font-size: clamp(18px, 5.2vw, 28px); }
  .title-panel { width: 92%; padding: 10px; }
}
/* ===== Centered hero title + bottom fade overlay (safe header-only) ===== */

/* 1) gradient-on-top of the image to fade bottom to near-white for contrast */
.top.site-top {
  /* gradient first (top layer), then image */
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(255,255,250,0.95) 100%),
    -webkit-image-set(
      url('obrazy_header/bg_hero_bronze_2560x900.webp') 1x,
      url('obrazy_header/bg_hero_bronze_5120x1800.webp') 2x
    );
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(255,255,250,0.95) 100%),
    image-set(
      url('obrazy_header/bg_hero_bronze_2560x900.webp') 1x,
      url('obrazy_header/bg_hero_bronze_5120x1800.webp') 2x
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 140px;
}

/* 2) centered overlay title block (absolute, centered horizontally, slightly down from top) */
.hero-title-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 22px;                 /* adjust vertical position as needed */
  z-index: 3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* style same title to be visible on texture */
.site-title.centered {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  color: #23120b; /* deep brown for contrast */
  font-size: clamp(20px, 3.6vw, 48px);
  line-height: 1.02;
  text-align:center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.12), 0 3px 8px rgba(0,0,0,0.16);
}

/* subtitle */
.hero-title-center .hint.small.centered {
  margin: 0;
  color: #5b6b75;
  font-size: 14px;
  text-align:center;
}

/* 3) make sure logo doesn't overlap centered title badly:
   shrink logo a bit and give header left padding for breathing room */
.brand-logo.site-logo {
  height: 88px;
  max-width: 220px;
  margin-left: 18px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* 4) responsive: stack on mobile (logo above title) and adapt sizes */
@media (max-width:900px) {
  .hero-title-center { position: static; transform:none; margin: 8px auto 0; top:auto; }
  .brand { flex-direction: column; gap:8px; align-items:center; }
  .brand-logo.site-logo { height: 64px; margin-left:0; }
  .site-title.centered { font-size: clamp(16px, 6.6vw, 28px); }
  .top.site-top { min-height: auto; padding-bottom: 12px; }
}

/* 5) safety: if you can't/ don't want to add HTML, you can also center existing .title-panel:
   uncomment below to center the existing title panel horizontally */
/*
.top.site-top .container { display:flex; justify-content:center; align-items:flex-start; }
.title-panel { margin-top: 10px; }
*/
/* SIMPLE CENTERING: remove absolute positioning and center title safely */
.top.site-top .title-panel {
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;

  margin: 12px auto !important;   /* center horizontally */
  display: inline-block !important;
  text-align: center;
  width: calc(100% - 48px);       /* leave some page gutters */
  max-width: 860px;               /* don't let it grow forever on ultra-wide screens */
  box-sizing: border-box;
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(255,255,250,0.95);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  z-index: 3;
  overflow: visible;
}

/* container: keep block flow and center children */
.top.site-top .container {
  position: relative;
  display: block;
  text-align: center;   /* helps center inline-block .title-panel */
  padding: 16px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Make sure heading wraps nicely */
.top.site-top .site-title {
  white-space: normal;
  word-break: break-word;
  margin: 0;
  font-size: clamp(18px, 3.2vw, 36px); /* cap the max size so it won't explode */
  line-height: 1.05;
}

/* Keep header-controls (menu/buttons) visible on the right on desktop,
   but move into flow on small screens */
.header-controls {
  position: absolute;
  right: 20px;
  top: 18px;
  z-index: 4;
}

/* Mobile: header-controls move below, title-panel full-width */
@media (max-width: 900px) {
  .top.site-top .container { text-align: center; padding: 12px; }
  .header-controls { position: static; margin-top: 10px; display: flex; justify-content: center; }
  .top.site-top .title-panel { width: 92%; max-width: none; display: block; margin: 10px auto; }
  .top.site-top .site-title { font-size: clamp(16px, 6.0vw, 28px); }
}
/* Drobne dopracowanie nagłówka: mniejszy panel, subtelniejszy cień, łagodniejszy fade */
.top.site-top {
  /* łagodniejszy fade (start wyżej niż wcześniej) */
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 48%, rgba(255,255,250,0.94) 100%),
    image-set(
      url('obrazy_header/bg_hero_bronze_2560x900.webp') 1x,
      url('obrazy_header/bg_hero_bronze_5120x1800.webp') 2x
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding-bottom: 28px; /* daje przestrzeń przed galerią */
}

/* mniejszy, bardziej stonowany panel tytułowy */
.top.site-top .title-panel {
  position: static !important;
  transform: none !important;
  margin: 12px auto !important;
  display: inline-block !important;
  text-align: center;
  width: calc(100% - 80px);
  max-width: 760px;      /* zmniejszony max */
  padding: 10px 14px;    /* mniejszy padding niż wcześniej */
  border-radius: 8px;    /* delikatne zaokrąglenie */
  background: rgba(255,255,250,0.94);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); /* subtelniejszy cień */
  box-sizing: border-box;
}

/* tytuł: mniejszy maksymalny rozmiar czcionki, ciemniejszy brąz */
.top.site-top .site-title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  color: #2a140a; /* nieco ciemniejszy brąz dla lepszego kontrastu */
  font-size: clamp(18px, 2.6vw, 36px); /* niższy max */
  line-height: 1.04;
}

/* podtytuł (opis) — delikatniejsze, mniejsze */
.top.site-top .hint.small {
  margin: 6px 0 0;
  color: #5b6b75;
  font-size: 13px;
  text-align:center;
}

/* Mobile: zmniejszamy padding i maks rozmiar */
@media (max-width: 900px) {
  .top.site-top .title-panel {
    width: 94%;
    padding: 8px 10px;
    margin: 10px auto;
    display:block;
  }
  .top.site-top .site-title { font-size: clamp(16px, 5.2vw, 28px); }
  .top.site-top { padding-bottom: 18px; }
}

/* Opcjonalnie: lekko ocieplenie tła galerii (zamiast bieli) — usuń jeśli nie chcesz */
#gallery { background: #f6f7f9; padding-top: 18px; }
/* FINALNY OVERRIDE: mniejszy panel + łagodniejszy fade pod nagłówkiem */
.top.site-top {
  /* łagodniejszy, wyższy start gradientu (mniej dużej szarej prążki) */
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 62%, rgba(255,255,250,0.96) 100%),
    url('obrazy_header/bg_hero_bronze_2560x900.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding-bottom: 12px !important; /* mniej miejsca pod headerem */
}

/* mniejszy, kompaktowy panel tytułu */
.top.site-top .title-panel {
  position: static !important;
  transform: none !important;
  margin: 12px auto !important;
  display: inline-block !important;
  text-align: center !important;
  width: calc(100% - 80px) !important;
  max-width: 720px !important;      /* zmniejszony max - panel już nie dominuje */
  padding: 8px 12px !important;     /* mniejszy padding */
  border-radius: 6px !important;
  background: rgba(255,255,250,0.96) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important; /* jeszcze łagodniejszy cień */
  box-sizing: border-box !important;
}

/* mniejsza maksymalna wielkość fontu nagłówka */
.top.site-top .site-title {
  margin: 0 !important;
  font-size: clamp(16px, 3.0vw, 30px) !important; /* <=30px max */
  color: #2b140b !important;
  line-height: 1.02 !important;
}

/* subtelne dopracowanie podtytułu */
.top.site-top .hint.small {
  margin-top: 6px !important;
  color: #5b6b75 !important;
  font-size: 13px !important;
}

/* jeśli chcesz całkowicie usunąć ten szary pas pod panelem, odkomentuj poniższą regułę */
/*
.top.site-top { background-image: url('obrazy_header/bg_hero_bronze_2560x900.webp') !important; }
*/

/* Mobile: jeszcze bardziej kompaktowy panel */
@media (max-width: 900px) {
  .top.site-top .title-panel {
    width: 94% !important;
    padding: 8px 10px !important;
    margin: 8px auto !important;
    display: block !important;
  }
  .top.site-top .site-title { font-size: clamp(15px, 6.0vw, 22px) !important; }
  .top.site-top { padding-bottom: 10px !important; }
}
/* ---- header: drobne usprawnienia wizualne i responsywne (wklej na końcu header.css) ---- */

/* łatwa zmiana przeźroczystości panelu: ustaw tu wartość od 0.82 do 0.98 */
:root { --title-panel-alpha: 0.90; }

/* subtelniejsze tło i cień panelu tytułowego */
.top.site-top .title-panel {
  background: rgba(255,255,250,var(--title-panel-alpha)) !important; /* mniejszy kontrast */
  box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;                 /* łagodniejszy cień */
  border-radius: 8px !important;
  padding: 10px 14px !important;
  max-width: 760px !important;
  width: calc(100% - 80px) !important;
  margin: 12px auto !important;
  text-align: center !important;
}

/* kontrola rozmiaru nagłówka: zapobiega "wybuchaniu" tekstu na ultra-wide */
.top.site-top .site-title {
  font-size: clamp(18px, 3.0vw, 34px) !important;  /* maks ~34px - bez przesadnego wzrostu */
  line-height: 1.03 !important;
  color: #2b140b !important;
  margin: 0 auto !important;
  white-space: normal;
  word-break: break-word;
}

/* subtelniejszy podtytuł */
.top.site-top .hint.small {
  color: #566568 !important;
  font-size: 13px !important;
  margin-top: 6px !important;
}

/* upewnij się, że header nie generuje poziomego scrolla */
.top.site-top, .top.site-top .container, .top.site-top .title-panel {
  box-sizing: border-box;
  min-width: 0; /* ważne: zapobiega overflow spowodowanemu dziećmi */
}

/* logo: zmniejsz i daj margines — oraz schowaj na małych ekranach */
.brand-logo.site-logo {
  height: 84px;
  max-width: 180px;
  margin-left: 18px;
  object-fit: contain;
}

/* mobile tweaks: logo nad tytułem lub całkowicie schowane, panel pełnej szerokości */
@media (max-width: 900px) {
  .brand { flex-direction: column; align-items: center; gap: 8px; }
  .brand-logo.site-logo { height: 64px; margin-left: 0; }
  .top.site-top .title-panel { width: 92% !important; padding: 10px !important; margin: 8px auto !important; }
  .top.site-top .site-title { font-size: clamp(16px, 6.2vw, 28px) !important; }
}

/* jeśli chcesz ukryć logo na telefonach (odkomentuj) */
/*
@media (max-width: 520px) {
  .brand-logo.site-logo { display: none !important; }
}
*/

/* opcjonalne — delikatne przyciemnienie tła pod panelem, aby tekst był jeszcze czytelniejszy */
.top.site-top {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(255,255,250,0.96) 100%),
    url('obrazy_header/bg_hero_bronze_2560x900.webp') !important;
  background-size: cover !important;
  background-position: center !important;
}

/* koniec: drobne bezpieczeństwa wizualne */
.top.site-top * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* --- quick fix when logo was removed: center title cleanly --- */
.brand-logo.site-logo { display: none !important; }

.top.site-top .container {
  text-align: center !important;   /* centrum dla inline-block title-panel */
  padding-left: 16px;
  padding-right: 16px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  min-width: 0;
}

.top.site-top .title-panel {
  display: inline-block !important;
  margin: 12px auto !important;
  text-align: center !important;
  width: calc(100% - 80px) !important;
  max-width: 720px !important;
  padding: 8px 12px !important;
  box-sizing: border-box;
}

/* remove leftover left margin reserved for logo (safety) */
.brand { justify-content: center !important; gap: 8px !important; }

/* Mobile: pełna szerokość panelu */
@media (max-width: 900px) {
  .top.site-top .title-panel {
    width: 92% !important;
    padding: 8px 10px !important;
    margin: 10px auto !important;
    display: block !important;
  }
}