/* ============================================================
   REDESIGN — Forest & Moss palette + Cormorant Garamond / Karla
   Loaded AFTER the original stylesheet to override tokens site-wide.
   ============================================================ */

:root {
  --forest-deep: #14301f;
  --forest: #1a3c2a;
  --forest-2: #2d5a3d;
  --moss: #5a8a5c;
  --sage: #a0c49d;
  --sage-soft: #cfe0cb;
  --cream: #f6f3ec;
  --cream-2: #eee9de;
  --ink: #1c2a20;
  --ink-soft: #3a4a3f;
  --line: rgba(26, 60, 42, 0.14);
  --shadow-elegant: 0 20px 45px -25px rgba(20, 48, 31, 0.35);
  --shadow-soft: 0 8px 24px -14px rgba(20, 48, 31, 0.25);
  --radius: 14px;
  --radius-lg: 22px;
}

/* ---------- Typography ---------- */
html, body {
  background-color: var(--cream) !important;
  color: var(--ink) !important;
  font-family: 'Karla', 'Segoe UI', system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.005em;
}

h1, h2, h3, h4, h5, h6,
.logo, .watermark {
  font-family: 'Cormorant Garamond', 'Georgia', serif !important;
  color: var(--forest-deep) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem) !important; font-weight: 500 !important; }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.25rem) !important; }
h3 { font-size: clamp(1.3rem, 2vw, 1.55rem) !important; }

p, li {
  color: var(--ink-soft);
  font-size: 1.02rem;
}

strong, b { color: var(--forest-deep); font-weight: 700; }

a {
  color: var(--forest-2) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
a:hover {
  color: var(--forest-deep) !important;
  text-decoration: none !important;
  border-bottom-color: var(--moss);
}

/* ---------- Header / Nav ---------- */
header .navbar {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%) !important;
  border-bottom: 1px solid var(--line);
  padding: 18px 32px !important;
  box-shadow: 0 1px 0 rgba(20,48,31,0.04);
}

.logo {
  color: var(--forest-deep) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  margin: 0 !important;
}
.logo::before {
  content: "❦ ";
  color: var(--moss);
  margin-right: 4px;
}

.menu ul { gap: 28px !important; }
.menu ul li a {
  color: var(--forest-deep) !important;
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 6px 2px;
  border-bottom: 2px solid transparent !important;
  text-shadow: none !important;
}
.menu ul li a:hover,
.menu ul li a.active {
  color: var(--forest-deep) !important;
  border-bottom-color: var(--moss) !important;
  text-shadow: none !important;
}

.hamburger { color: var(--forest-deep) !important; }

/* ---------- Split-screen hero ---------- */
.banner {
  position: relative;
  height: auto !important;
  min-height: 480px;
  background: var(--cream) !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
}
.banner::before {
  content: "";
  grid-column: 1;
  background:
    linear-gradient(135deg, rgba(20,48,31,0.35), rgba(20,48,31,0.15)),
    url('img/baner.webp') center/cover no-repeat;
  min-height: 480px;
}
.banner::after {
  content: "Profesjonalna opieka nad grobami w Warszawie od 1998 roku. Sprzątanie, mycie nagrobków, składanie kwiatów i zapalanie zniczy — z szacunkiem i troską.";
  grid-column: 2;
  display: flex;
  align-items: center;
  padding: 56px clamp(28px, 5vw, 72px);
  font-family: 'Karla', sans-serif;
  font-size: 1.08rem;
  color: var(--ink-soft);
  line-height: 1.75;
  background: var(--cream);
  border-left: 1px solid var(--line);
}
.banner .watermark {
  position: absolute;
  top: 48px;
  left: clamp(28px, 4vw, 56px);
  bottom: auto;
  right: auto;
  color: var(--cream) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.2rem, 4vw, 3.4rem) !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35) !important;
  max-width: 46%;
  line-height: 1.05;
}

@media (max-width: 900px) {
  .banner { grid-template-columns: 1fr; min-height: auto; }
  .banner::before { min-height: 300px; }
  .banner::after { border-left: none; border-top: 1px solid var(--line); padding: 36px 24px; }
  .banner .watermark { font-size: 2rem !important; max-width: 80%; }
}

/* ---------- Main content card ---------- */
main {
  background: #ffffff !important;
  max-width: 1100px !important;
  margin: -40px auto 60px !important;
  padding: clamp(28px, 4vw, 64px) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-elegant) !important;
  position: relative;
  z-index: 2;
  border: 1px solid var(--line);
}

section { margin-bottom: 56px !important; }

section h2 {
  position: relative;
  padding-bottom: 14px;
}
section h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 2px;
  background: var(--moss);
  border-radius: 2px;
}

/* ---------- Action buttons row ---------- */
.buttony-wrapper {
  max-width: 1100px;
  margin: 32px auto !important;
  padding: 0 20px;
  gap: 16px !important;
}
.custom-button {
  background: #ffffff !important;
  color: var(--forest-deep) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 20px 24px !important;
  font-family: 'Karla', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.custom-button:hover {
  transform: translateY(-2px);
  border-color: var(--moss) !important;
  background: var(--sage-soft) !important;
  color: var(--forest-deep) !important;
}
.custom-button svg,
.custom-button i,
.custom-button img { color: var(--moss); }

/* Give the first button (phone) forest treatment */
.buttony-wrapper .custom-button:first-child {
  background: var(--forest-deep) !important;
  color: var(--cream) !important;
  border-color: var(--forest-deep) !important;
}
.buttony-wrapper .custom-button:first-child:hover {
  background: var(--forest) !important;
  color: var(--cream) !important;
}

/* ---------- Generic button ---------- */
button, .btn {
  background: var(--forest-deep) !important;
  color: var(--cream) !important;
  border-radius: var(--radius) !important;
  padding: 0.8em 1.6em !important;
  font-family: 'Karla', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: background .2s ease, transform .2s ease;
}
button:hover, .btn:hover {
  background: var(--forest) !important;
  transform: translateY(-1px);
}

/* ---------- Lists ---------- */
ul li::marker { color: var(--moss); }

/* ---------- Gallery figures ---------- */
.gallery figure, figure.fade-in {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  background: #fff;
}
.gallery figure img, figure.fade-in img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s ease;
}
.gallery figure:hover img, figure.fade-in:hover img { transform: scale(1.04); }

figcaption {
  font-family: 'Karla', sans-serif;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 12px 16px;
  background: var(--cream-2);
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  background: var(--forest-deep) !important;
  color: var(--cream) !important;
  border-radius: var(--radius);
  border: 1px solid var(--forest-2);
  box-shadow: var(--shadow-elegant);
  font-family: 'Karla', sans-serif;
}
.cookie-banner button.accept {
  background: var(--sage) !important;
  color: var(--forest-deep) !important;
  border-radius: 8px !important;
}
.cookie-banner button.decline {
  background: transparent !important;
  color: var(--cream) !important;
  border: 1px solid var(--sage) !important;
  border-radius: 8px !important;
}

/* ---------- Footer ---------- */
footer {
  background: var(--forest-deep) !important;
  color: var(--sage-soft) !important;
  padding: 40px 20px !important;
  margin-top: 60px !important;
  font-family: 'Karla', sans-serif;
  border-top: 4px solid var(--moss);
}
footer a { color: var(--sage-soft) !important; }
footer a:hover { color: #fff !important; border-bottom-color: var(--sage); }

/* ---------- Tables (cennik) ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  font-family: 'Karla', sans-serif;
}
th {
  background: var(--forest-deep);
  color: var(--cream);
  font-weight: 600;
  text-align: left;
  padding: 14px 18px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}
td {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
tr:nth-child(even) td { background: var(--cream); }

/* ---------- Forms ---------- */
input, textarea, select {
  font-family: 'Karla', sans-serif !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  color: var(--ink) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--moss) !important;
  box-shadow: 0 0 0 3px rgba(90,138,92,0.18) !important;
}

label { font-weight: 600; color: var(--forest-deep); font-family: 'Karla', sans-serif; }

/* ---------- Mobile refinements ---------- */
@media (max-width: 768px) {
  header .navbar { padding: 14px 20px !important; }
  .menu { background: var(--cream) !important; border-top: 1px solid var(--line); }
  .menu ul li { border-bottom: 1px solid var(--line) !important; }
  .menu ul li a { color: var(--forest-deep) !important; }
  main { margin: 20px 12px 40px !important; padding: 24px !important; border-radius: var(--radius) !important; }
}