/*
  Wellona Pharm website main stylesheet
  This stylesheet defines a clean, modern aesthetic for the Wellona Pharm site.
  It includes responsive grid layouts, typography settings, navigation styles,
  cards, buttons and utility classes. Colours and spacing are derived from
  variables defined at the top of the file to ensure easy customisation.
*/

:root{
  --bg:#f7f9ff;
  --soft:#f2f6ff;
  --text:#24324a;
  --muted:#6c778b;
  --primary:#4da3ff;
  --primary-2:#3c8fe0;
  --ring:#cfe4ff;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute;left:-9999px}
.container{
  width:min(1100px,92vw);
  margin-inline:auto;
}

/* Header and navigation */
.header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid #eef2f7;
  z-index:50;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
}
.brand-img{
  /* Further increase the header logo size for better visibility */
  height:80px;
}
.brand-icon{
  height:28px;
  vertical-align:-4px;
  margin-right:6px;
}
.menu{
  display:flex;
  gap:16px;
  align-items:center;
}
.menu a{
  padding:8px 10px;
  border-radius:10px;
  font-weight:500;
}
.menu a.active{
  background:var(--bg);
}
.menu .lang{
  font-weight:600;
}
.mobile-toggle{
  display:none;
}

@media (max-width:820px){
  .mobile-toggle{display:inline-flex}
  .menu{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:14px;
    padding:10px;
    position:absolute;
    right:4vw;
    top:64px;
  }
  .menu.open{display:flex}
}

/* Hero section */
.hero{
  position:relative;
  overflow:hidden;
  /* Ensure enough vertical space in hero to avoid large empty areas */
  min-height:480px;
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.18;
  pointer-events:none;
}
.hero .container{
  /* Increase vertical padding to balance text and image */
  padding:60px 0;
}

/* Two‑column hero layout: image + text */
.hero-inner{
  display:grid;
  /* Allocate more space to the text column compared to image */
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  align-items:center;
}

/* Text container in hero */
.hero-text{
  z-index:1;
}

/* Image container in hero */
.hero-image img{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  border:1px solid #eef2f7;
  box-shadow:0 12px 40px rgba(0,0,0,.05);
}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-image{
    margin-top:20px;
  }
}
.badge{
  display:inline-block;
  background:#ecf4ff;
  border:1px solid var(--ring);
  color:#225;
  padding:6px 10px;
  border-radius:999px;
  font-size:.9rem;
}
h1{
  margin:.6rem 0 0.4rem;
  font-size:clamp(1.6rem,2.6vw,2.4rem);
}
h2{
  margin:0 0 .6rem;
}
.lead{
  color:var(--muted);
  max-width:65ch;
}
.hero-cta{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.btn{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  font-weight:500;
}
.btn:hover{
  background:var(--primary-2);
  text-decoration:none;
}
.btn.btn-secondary{
  background:#eef3ff;
  color:#274;
}

/* Sections */
.section{
  padding:36px 0;
}
.section-soft{
  background:var(--soft);
}
.grid{
  display:grid;
  gap:16px;
}
.grid-2{
  grid-template-columns:repeat(2,1fr);
}
.grid-3{
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}
.card{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 8px 30px rgba(20,40,80,.05);
}
.small{
  color:var(--muted);
  font-size:.9rem;
}

/* Promo/feature blocks */
.promo{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
  align-items:center;
}
.promo img{
  border-radius:16px;
  border:1px solid #eef2f7;
}
@media (max-width:900px){
  .promo{grid-template-columns:1fr}
}

.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
}

/* Footer */
.footer{
  background:#0c1a2a;
  color:#eaf1ff;
  padding:28px 0;
}
.footer a{color:#cfe4ff}
.footer .cols{
  display:grid;
  gap:16px;
  grid-template-columns:2fr 1fr 1fr;
}
@media (max-width:820px){
  .footer .cols{grid-template-columns:1fr}
}

/* Product page cards */
.product-card{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:1.2rem;
  align-items:center;
}
.product-card .product-media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.product-card .bullets{
  margin:.5rem 0 1rem;
  padding-left:1rem;
}
.product-card .bullets li{
  margin:.25rem 0;
}
.cta-row{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.cta-slab{
  background:var(--soft);
  padding:1.6rem;
  border-radius:1rem;
  text-align:center;
}

@media (max-width:900px){
  .product-card{grid-template-columns:1fr}
  .product-card .product-media{order:-1}
}