/* =================================================================
   Malowana Chatka — motyw marki
   Kolory zaczerpnięte z logo: miętowa zieleń, róż, szałwia, krem.
   ================================================================= */

/* Czcionki ozdobne (tekst podstawowy = Nunito Sans ładowany przez theme.font) */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400&family=Caveat:wght@500;600&display=swap");

:root {
  /* Paleta marki */
  --mc-teal:        #4fb3a2;   /* drzwi / filiżanka */
  --mc-teal-dark:   #3c9183;
  --mc-teal-soft:   #e3f2ee;
  --mc-pink:        #e38fac;   /* kwiaty */
  --mc-pink-dark:   #cf6f90;
  --mc-sage:        #9fb79a;   /* listki */
  --mc-cream:       #faf6ef;   /* tło */
  --mc-cream-deep:  #f3ece0;
  --mc-ink:         #33302e;   /* napis CHATKA */
  --mc-muted:       #6f6a66;

  /* Mapowanie na zmienne Material */
  --md-primary-fg-color:        var(--mc-teal);
  --md-primary-fg-color--light: var(--mc-teal);
  --md-primary-fg-color--dark:  var(--mc-teal-dark);
  --md-accent-fg-color:         var(--mc-pink-dark);
  --md-default-bg-color:        var(--mc-cream);
  --md-typeset-a-color:         var(--mc-teal-dark);
}

/* ---- Nagłówki ozdobnym krojem ---------------------------------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__topic .md-ellipsis {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--mc-ink);
}
.md-typeset h1 { font-size: 2.2rem; line-height: 1.15; }

/* ---- Kremowy nagłówek + zakładki ------------------------------- */
.md-header {
  background-color: var(--mc-cream);
  color: var(--mc-ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
}
.md-header__title { font-weight: 600; }
.md-header .md-logo img { height: 2.1rem; width: auto; border-radius: 6px; }
.md-tabs {
  background-color: var(--mc-cream);
  color: var(--mc-ink);
  border-top: 1px solid var(--mc-cream-deep);
}
.md-tabs__link { opacity: .8; font-weight: 600; }
.md-tabs__link:hover,
.md-tabs__link--active { opacity: 1; color: var(--mc-teal-dark); }
/* ikony w kremowym pasku mają być ciemne, nie białe */
.md-header [class*="md-icon"],
.md-search__input + .md-search__icon,
.md-header__button { color: var(--mc-ink); }
.md-search__input { background-color: rgba(0,0,0,.05); }
.md-search__input::placeholder { color: var(--mc-muted); }

/* ---- Poziome menu w nagłówku ----------------------------------- */
.mc-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;        /* wypchnij menu do prawej */
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mc-nav__link {
  color: var(--mc-ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: .4rem .85rem;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease;
}

/* Ikony social w nagłówku */
.mc-social {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin-left: .5rem;
}
.mc-social a {
  display: inline-flex;
  padding: .4rem;
  color: var(--mc-ink);
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.mc-social a:hover { background: var(--mc-teal-soft); color: var(--mc-teal-dark); }
.mc-social svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.mc-nav__link:hover {
  background: var(--mc-teal-soft);
  color: var(--mc-teal-dark);
}
.mc-nav__link--active {
  color: var(--mc-teal-dark);
  background: var(--mc-teal-soft);
}

/* Menu zastępuje hamburger i lewy panel — chowamy je */
.md-header__button[for="__drawer"] { display: none; }

/* Na wąskich ekranach: logo zostaje, nazwę chowamy, menu zawija się */
@media screen and (max-width: 48em) {
  .md-header__title { display: none; }
  .mc-nav { justify-content: center; width: 100%; padding: .2rem 0 .4rem; }
  .mc-nav__link { padding: .35rem .6rem; font-size: .9rem; }
}

/* ---- Przyciski (pigułki) --------------------------------------- */
.md-typeset .md-button {
  border-radius: 999px;
  padding: .5em 1.4em;
  font-weight: 700;
  border: 2px solid var(--mc-teal);
  color: var(--mc-teal-dark);
  transition: all .15s ease;
}
.md-typeset .md-button:hover {
  background: var(--mc-teal-soft);
  border-color: var(--mc-teal-dark);
  color: var(--mc-teal-dark);
}
.md-typeset .md-button--primary {
  background: var(--mc-teal);
  border-color: var(--mc-teal);
  color: #fff;
}
.md-typeset .md-button--primary:hover {
  background: var(--mc-teal-dark);
  border-color: var(--mc-teal-dark);
  color: #fff;
}

/* ---- Sekcja hero (strona startowa) ----------------------------- */
.mc-hero {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
  background:
    radial-gradient(1200px 400px at 50% -120px, var(--mc-teal-soft), transparent 70%);
  border-radius: 24px;
  margin-bottom: 2rem;
}
.mc-hero img {
  width: 260px; max-width: 60vw; height: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.12));
}
/* Panoramiczne zdjęcie w hero (zamiast logo) */
.mc-hero .mc-hero-img {
  width: 100%;
  max-width: 820px;
  border-radius: 20px;
  filter: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.mc-hero h1 { font-size: 2.8rem; margin: .4rem 0 .2rem; }
.mc-hero .mc-script {
  font-family: "Caveat", cursive;
  font-size: 2rem;
  color: var(--mc-pink-dark);
  display: block;
  margin-bottom: .6rem;
}
.mc-hero p.mc-lead {
  max-width: 620px; margin: 0 auto 1.4rem;
  font-size: 1.05rem; color: var(--mc-muted);
}
.mc-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---- Przewijanie do sekcji (one-page) -------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 3.6rem; }

/* Wyśrodkowany akapit (np. zaproszenie w sekcji Kontakt) */
.md-typeset .mc-center { text-align: center; }

/* ---- Sekcje strony one-page ------------------------------------ */
.mc-section {
  padding: 2.4rem 0 1.2rem;
  scroll-margin-top: 3.6rem;
}
.mc-section > h2:first-child {
  text-align: center;
  margin-bottom: 1.4rem;
}
.mc-section--alt {
  background: var(--mc-cream-deep);
  border-radius: 24px;
  padding: 2.4rem 1.6rem 1.6rem;
  margin: 1.6rem 0;
}

/* Wyśrodkowana zawartość kart w sekcji Menu (tytuł, opis, przycisk) */
#menu .grid.cards > :is(ul, ol) > li { text-align: center; }
#menu .grid.cards .md-button {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: .4rem auto 0;
  text-align: center;
}

/* ---- Pigułki: udogodnienia i płatności ------------------------- */
.mc-feats {
  text-align: center;          /* centruje też ostatni, niepełny rząd */
}
.mc-feats p { margin: 0; }
.mc-feats .mc-feat {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: .3rem;
  background: #fff;
  border: 1px solid var(--mc-cream-deep);
  border-radius: 999px;
  padding: .5rem 1rem;
  font-weight: 600;
  color: var(--mc-ink);
  box-shadow: 0 3px 10px rgba(0,0,0,.04);
}
.mc-feats .mc-feat .twemoji { color: var(--mc-teal-dark); }
.mc-feats .mc-feat svg { width: 1.1em; height: 1.1em; }

/* Udogodnienia (7 pozycji): szerokość dobrana tak, by był układ 4 + 3 wyśrodkowany */
#udogodnienia .mc-feats {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Baner ze zdjęciem chatki ---------------------------------- */
.mc-banner {
  margin: 0 0 2.2rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  position: relative;
}
.mc-banner img { display: block; width: 100%; height: auto; }
.mc-banner figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.2rem .9rem;
  font-family: "Fraunces", serif; font-size: 1.15rem; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}

/* ---- Karty (siatka .grid.cards) -------------------------------- */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border: 1px solid var(--mc-cream-deep);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,.09);
  border-color: var(--mc-teal);
}

/* ---- Nadchodzące wydarzenia ------------------------------------ */
.mc-events {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  max-width: 680px;
  margin: 0 auto;
}
.mc-event {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--mc-cream-deep);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mc-event:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,.09);
}
.mc-event__date {
  flex: 0 0 auto;
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--mc-teal-soft);
  color: var(--mc-teal-dark);
  padding: .6rem;
}
.mc-event__day {
  font-family: "Fraunces", serif;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}
.mc-event__mon {
  text-transform: uppercase;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
}
.mc-event__body {
  padding: .8rem 1rem .8rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mc-event__title {
  font-family: "Fraunces", serif;
  margin: 0 0 .2rem;
  color: var(--mc-ink);
}
.mc-event__meta {
  margin: 0 0 .15rem;
  font-weight: 600;
  color: var(--mc-teal-dark);
}
.mc-event__desc { margin: 0; color: var(--mc-muted); }
.mc-event__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .55rem;
}
.mc-event__cost {
  display: inline-block;
  background: var(--mc-teal-soft);
  color: var(--mc-teal-dark);
  font-weight: 700;
  font-size: .85rem;
  border-radius: 999px;
  padding: .2rem .7rem;
}
.mc-event__signup {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 700;
  color: var(--mc-teal-dark);
  text-decoration: none;
}
.mc-event__signup:hover { text-decoration: underline; }
.mc-events__empty {
  text-align: center;
  color: var(--mc-muted);
  font-style: italic;
}

/* ---- Galeria (siatka miniatur + lightbox) ---------------------- */
.mc-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* telefon: 2 w rzędzie */
  gap: .6rem;
  margin: 1.2rem 0;
}
@media (min-width: 30em) { .mc-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 48em) { .mc-gallery { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 64em) { .mc-gallery { grid-template-columns: repeat(5, 1fr); } }  /* max 5 */
.mc-gallery a { display: block; line-height: 0; }
.mc-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mc-gallery img:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* ---- Pasek informacyjny (godziny / adres) ---------------------- */
.mc-info {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  background: var(--mc-cream-deep);
  border-radius: 16px; padding: 1.1rem 1.3rem; margin: 2rem 0;
}
.mc-info div { text-align: center; min-width: 160px; }
.mc-info strong { display:block; font-family:"Fraunces",serif; color: var(--mc-ink); }

/* ---- Osadzona mapa Google -------------------------------------- */
.mc-map {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  margin: 1rem 0 1.5rem;
}
.mc-map iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* ---- Stopka ---------------------------------------------------- */
.md-footer { background: var(--mc-ink); }
.md-footer-meta { background: #26231f; }

/* ---- Menu kawiarni (listy cen) --------------------------------- */
.mc-menu dt { font-weight: 700; font-family: "Fraunces", serif; }
.mc-price { color: var(--mc-teal-dark); font-weight: 700; }