/* ============================= */
/* VARIABLES */
/* ============================= */

:root{
  --beige:#f6efe6;
  --beige-soft:#faf7f2;
  --brown:#8b6b4f;
  --brown-dark:#6f523c;
  --text:#2f2f2f;
}

/* ============================= */
/* BASE */
/* ============================= */

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  line-height:1.7;
  color:var(--text);
  background:#fff;
}

h1,h2,h3{
  font-family:'Playfair Display',serif;
  color:var(--brown-dark);
  letter-spacing:.4px;
}

p{
  letter-spacing:.2px;
}

/* płynność */
*{
  transition:
    background-color .3s ease,
    color .3s ease,
    border-color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

/* ============================= */
/* NAVIGATION */
/* ============================= */

.center-nav{
  position:absolute;
  top:-10;
  left:0;
  width:100%;
  padding-top: 0.5%;
  z-index:1000;
  background:transparent; 
}

.nav-inner{
  width:100%;
  padding:0.5rem 3rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
}

.nav-logo{
  justify-self:start;
}

.nav-logo img{
  height: 80px;
}

.menu-center{
  justify-self:center;
  display:flex;
  gap:3rem;
}

.menu-center a{
  text-decoration:none;
  color:var(--brown);
  position:relative;
  font-weight:400;
}

.menu-center a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:var(--brown);
  transition:.3s ease;
}

/* hover działa tylko gdy NIE active */
.menu-center a:hover:not(.active)::after{
  width:100%;
}

/* active */
.menu-center a.active::after{
  width:100%;
}

.menu-center a.active{
  font-weight:600;
}

/* ============================= */
/* HERO */
/* ============================= */

.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
}

.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.96);
}

.hero-overlay{
  background:linear-gradient(
    to right,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.85) 30%,
    rgba(255,255,255,0.5) 45%,
    rgba(255,255,255,0.2) 55%,
    transparent 60%
  );
}

.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
}

.hero-inner{
  margin-left:10%;
  max-width:520px;
}

/* ============================= */
/* BUTTONS */
/* ============================= */

button,
.btn,
.btn-primary{
  border-radius:999px;
  background:var(--brown);
  color:#fff;
  border:2px solid var(--brown);
  padding:.8rem 1.8rem;
  cursor:pointer;
}

button:hover,
.btn:hover,
.btn-primary:hover{
  background:var(--brown-dark);
  border-color:var(--brown-dark);
  transform:translateY(-3px);
}

.btn-secondary{
  background:transparent;
  border:2px solid var(--brown);
  color:var(--brown);
}

.btn-secondary:hover{
  background:var(--brown);
  color:#fff;
}

/* ============================= */
/* SECTIONS */
/* ============================= */

section{
  padding:6rem 0;
}

.wrap{
  max-width:1200px;
  margin:auto;
  padding:0 1.5rem;
}

/* ============================= */
/* INTRO */
/* ============================= */

.intro,
.intro2{
  background:var(--beige);
  text-align:center;
}

.intro-text{
  max-width:800px;
  margin:0 auto;
}

.intro2-text{
  font-style:italic;
  max-width:900px;
  margin:0 auto;
}

/* ============================= */
/* HELP */
/* ============================= */

.help{
  background:var(--beige-soft);
}

.help-grid{
  margin-top:4rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem;
}

.help-card{
  background:#fff;
  border-radius:2rem;
  padding:3rem 2.5rem;
  text-align:center;
  cursor:pointer;
  box-shadow:0 20px 60px rgba(0,0,0,.06);
}

.help-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 80px rgba(0,0,0,.08);
}

.help-icon img{
  width:110px;
  height:110px;
}

.help-content{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .4s ease, opacity .3s ease;
}

.help-card.active .help-content{
  max-height:1000px;
  opacity:1;
  margin-top:1rem;
}

/* ============================= */
/* ABOUT & CONTACT */
/* ============================= */

.about{
  background:var(--beige);
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:4rem;
  align-items:center;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:4rem;
}

.contact-box{
  background:var(--beige-soft);
  padding:3rem;
  border-radius:2rem;
}

.form-box{
  background:#fff;
  padding:3rem;
  border-radius:2rem;
  box-shadow:0 20px 60px rgba(0,0,0,.06);
}

/* ============================= */
/* BLOG */
/* ============================= */

.hero-sub{
   padding: 120px 20px 60px;
  text-align:center;
  background:var(--beige);
}

.hero-sub h1{
  font-size:3rem;
}

.section-light{
  background:#fff;
  padding:100px 0;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(380px, 1fr));
  gap:3rem;
  max-width:1200px;
  margin:0 auto;
}
.blog-card h3{
  font-size:1.35rem;
  line-height:1.4;
}
.blog-card{
  background:#fff;
  padding:2.5rem;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.06);
}

.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 80px rgba(0,0,0,.08);
}

/* ============================= */
/* GALLERY */
/* ============================= */

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}

.gallery-grid img{
  width:100%;
  border-radius:18px;
}

.gallery-grid img:hover{
  transform:scale(1.03);
}

/* ============================= */
/* FOOTER */
/* ============================= */

.footer{
  background:#eee7df;
  padding:3rem 0 2rem;
  font-size:.9rem;
}

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 1.5rem;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
}

.footer-center{
  justify-self:center;
  display:flex;
  gap:2rem;
}

.footer-center a{
  color:var(--brown);
  text-decoration:none;
}

.footer-center a:hover{
  text-decoration:underline;
}

.footer-right{
  font-size:.75rem;
  color:#6a5a4a;
  text-align:right;
}

/* ============================= */
/* COOKIE */
/* ============================= */

.cookie-banner{
  position:fixed;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%);
  max-width:960px;
  width:calc(100% - 3rem);
  background:var(--beige-soft);
  box-shadow:0 20px 50px rgba(0,0,0,.15);
  border-radius:16px;
  z-index:9999;
}

.cookie-banner.hidden{
  display:none;
}

.cookie-content{
  display:flex;
  gap:1.5rem;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 2rem;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media(max-width:900px){
  .help-grid,
  .about-grid,
  .contact-grid,
  .gallery-grid{
    grid-template-columns:1fr;
  }

  .footer-inner{
    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .footer-right{
    text-align:center;
  }

  .menu-center{
    gap:1.5rem;
  }
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
}

.blog-card{
  display:block;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:#2f2f2f;
  box-shadow:0 20px 60px rgba(0,0,0,.06);
  transition:.3s ease;
}

.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 80px rgba(0,0,0,.08);
}

.blog-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.blog-card-content{
  padding:1.8rem;
}

.blog-card h3{
  margin-bottom:.8rem;
  color:#6f523c;
}

.blog-card p{
  font-size:.9rem;
  color:#555;
}

/* ============================= */
/* BLOG – ARTYKUŁ */
/* ============================= */

.reading-block{
  max-width:720px;
  margin:0 auto;
}

.reading-block img{
  width:100%;
  border-radius:18px;
  margin-bottom:2rem;
}

.reading-block h2{
  margin-top:3rem;
  margin-bottom:1rem;
}

.reading-block h3{
  margin-top:2rem;
  margin-bottom:.8rem;
}

.reading-block p{
  margin-bottom:1.2rem;
}

.reading-block ul{
  margin:1rem 0 2rem 1.2rem;
}

@media(max-width:900px){

  .blog-grid{
    grid-template-columns:1fr;
  }

  .blog-card img{
    height:200px;
  }

}
/* ============================= */
/* MOBILE */
/* ============================= */



  /* NAV */
 @media (max-width: 768px){
  .nav-inner{
    padding:1rem;
  }

  .menu-center{
    flex-wrap: wrap;
    gap:1rem;
    justify-content:center;
  }

  .nav-logo img{
    height:80px;
    margin:auto;
    display:block;
  }

  /* HERO */
  .hero-inner{
    margin-left:0;
    padding:1rem;
    text-align:center;
  }

  .hero h1{
    font-size:2rem;
  }

  /* GRIDY */
  .help-grid,
  .about-grid,
  .contact-grid,
  .gallery-grid{
    grid-template-columns:1fr;
  }

  /* BLOG */
  .blog-grid{
    grid-template-columns:1fr;
  }

  /* SEKCJE */
  section{
    padding:3rem 0;
  }

  /* KARTY */
  .help-card,
  .blog-card,
  .form-box,
  .contact-box{
    padding:1.5rem;
  }

}
.hero h1,
.hero p{
  color:#3a2e24;
}

.reading-block p{
  color:#333;
}

.reading-block h1,
.reading-block h2,
.reading-block h3{
  color:#4a3728;
}
.reading-block{
  max-width:800px;
  margin:auto;
}
/* ============================= */
/* FORM – LIGHT STYLE */
/* ============================= */

.form-box input,
.form-box select,
.form-box textarea{
  background:#fff !important;
  color:#2f2f2f !important;
  border:1px solid #ddd !important;
  border-radius:12px;
  padding:0.9rem;
}

/* placeholder */
.form-box input::placeholder,
.form-box textarea::placeholder{
  color:#999;
}

/* focus */
.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus{
  border-color:#8b6b4f;
  box-shadow:0 0 0 2px rgba(139,107,79,0.15);
}
/* ============================= */
/* TEXT FIX */
/* ============================= */

body{
  color:#2b2b2b;
}

.about-text p,
.intro-text,
.intro2-text,
.reading-block p{
  color:#3a3a3a;
}

h1,h2,h3{
  color:#5a4332;
}
.consent-text{
  color:#555;
  font-size:0.9rem;
}

.consent input{
  accent-color:#8b6b4f;
}

/* ============================= */
/* GLOBAL TEXT FIX */
/* ============================= */

body{
  color:#2b2b2b;
}

/* wszystkie paragrafy */
p{
  color:#3a3a3a;
}

/* listy (MEGA ważne – u Ciebie są prawie niewidoczne) */
li{
  color:#3a3a3a;
}

/* nagłówki */
h1,h2,h3{
  color:#5a4332;
}

/* sekcja "o mnie" */
.about-text p{
  color:#3a3a3a;
}

/* blog artykuły */
.reading-block p,
.reading-block li{
  color:#3a3a3a;
}

/* pierwszy akapit (lead) */
.reading-block p:first-of-type{
  color:#2f2f2f;
  font-weight:500;
}
.reading-block{
  font-size:1.05rem;
  line-height:1.8;
}


/* ============================= */
/* MOBILE MENU – FINAL SAFE FIX */
/* ============================= */

.menu-toggle{
  display:none;
  font-size:2rem;
  background:none !important;
  border:none !important;
  padding:0 !important;
  color:#5a4332;
}
@media (max-width: 768px){

  .menu-center{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;

    background:#faf7f2;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2rem;

    transform:translateY(-100%);
    transition:0.3s ease;

    z-index:10000;
  }

  .menu-center.active{
    transform:translateY(0);
  }

}


.menu-toggle{
  background:rgba(255,255,255,0.7);
}


body.menu-open{
  overflow:hidden;
}

@media (max-width: 768px){

  .menu-toggle{
    display:block;
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    z-index:10001;
    font-size:2rem;
    cursor:pointer;
  }

}

.contact-box iframe{
  margin:20px 0;
  border-radius:16px;
}

.contact-box .btn{
  margin-top:15px;
}


/* przycisk */
dialog button{
  width:100%;
  margin-top:1rem;
}
/* ============================= */
/* MODAL – LIGHT (zgodny ze stroną) */
/* ============================= */

dialog{
  background:#fff;
  border:none;
  border-radius:20px;
  max-width:520px;
  width:90%;
  padding:0;
}

dialog article{
  padding:2rem;
  color:#2f2f2f;
}

dialog::backdrop{
  background:rgba(0,0,0,0.3);
}

/* nagłówki */
dialog h1,
dialog h2,
dialog h3{
  color:#6f523c;
}

/* tekst */
dialog p,
dialog li{
  color:#3a3a3a;
}

/* linia */
dialog hr{
  border-color:#ddd;
}

/* button */
dialog button{
  width:100%;
  margin-top:1rem;
}

:root{
  color-scheme: light;
}