/* ================================================================
   WEBLIUM CHARITY CLONE — ternozor2/css/style.css
   Fonts: Oswald (headings) + Lato (body)
   Colors: yellow #f5c518 | blue #1a6fa8 | red #c0392b | dark #1a1a2a | bg #f2f0eb
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Lato',sans-serif;font-size:17px;line-height:1.5;color:#333;background:#fff}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}

/* ---- VARIABLES ---- */
:root{
  --y:#f5c518; --b:#1a6fa8; --r:#c0392b;
  --dk:#1a1a2a; --bg:#f2f0eb;
  --h:'Oswald',sans-serif; --t:'Lato',sans-serif;
  --max:1280px; --nav:80px;
}

/* ---- HEADER ---- */
.wl-header{
  position:fixed;top:0;left:0;right:0;z-index:999;
  height:var(--nav);
  display:flex;align-items:center;
  padding:0 48px;
  background:transparent;
  transition:background .3s,box-shadow .3s;
}
.wl-header.solid{background:#fff;box-shadow:0 2px 20px rgba(0,0,0,.1)}
.wl-header.solid .wl-nav__link{color:#333}
.wl-header.solid .wl-logo__name{color:#333}
.wl-header__inner{width:100%;max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:32px}
.wl-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.wl-logo__img{width:72px;height:72px;object-fit:contain}
.wl-logo__wrap{display:flex;flex-direction:column;align-items:flex-start}
.wl-logo__name{font-family:var(--h);font-size:21px;font-weight:700;letter-spacing:.05em;color:#fff;line-height:1}
.wl-logo__sub{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:2px}
.wl-header.solid .wl-logo__sub{color:#999}
.wl-nav{flex:1;display:flex;justify-content:center}
.wl-nav__list{display:flex;gap:4px}
.wl-nav__link{
  font-family:var(--h);font-size:13px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
  padding:8px 18px;
  transition:color .15s;
}
.wl-nav__link:hover{color:var(--y)}
.wl-header__social{display:flex;align-items:center;gap:8px;flex-shrink:0}
.wl-social-icon{
  width:32px;height:32px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;font-family:var(--h);
  color:#fff;transition:opacity .15s;
}
.wl-social-icon:hover{opacity:.8}
.si-fb{background:#1877f2}
.si-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.si-tw{background:#1da1f2}
.si-yt{background:#ff0000}

/* ---- HERO ---- */
.wl-hero{
  position:relative;height:100vh;min-height:600px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--dk);
}
.wl-hero__bg{
  position:absolute;inset:0;
  
  background-size:cover;background-position:center;
  filter:grayscale(100%) brightness(.55);
}
.wl-hero__content{
  position:relative;z-index:2;
  text-align:center;padding:0 24px;max-width:960px;
}
.wl-hero__title{
  font-family:var(--h);font-size:clamp(48px,7.5vw,98px);
  font-weight:700;line-height:1.31;letter-spacing:-.01em;
  color:var(--y);text-transform:uppercase;
  margin-bottom:24px;
}
.wl-hero__sub{
  font-size:clamp(15px,1.6vw,18px);color:rgba(255,255,255,.9);
  max-width:540px;margin:0 auto 40px;
}
.wl-hero__btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---- BUTTONS ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;
  font-family:var(--h);font-size:13px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;border:2px solid transparent;
}
.btn-primary{background:var(--b);color:#fff;border-color:var(--b)}
.btn-primary:hover{background:#155e8e;border-color:#155e8e}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-yellow{background:var(--y);color:var(--dk);border-color:var(--y)}
.btn-yellow:hover{background:#e0b000}
.btn-outline-yellow{background:transparent;color:var(--y);border-color:var(--y)}
.btn-outline-yellow:hover{background:var(--y);color:var(--dk)}

/* ---- 3 ACTION CARDS ---- */
.wl-cards{display:grid;grid-template-columns:repeat(3,1fr)}
.wl-card{
  position:relative;padding:56px 40px 48px;
  min-height:320px;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;
}
.wl-card__bg{
  position:absolute;inset:0;background-size:cover;
  background-position:center;transition:transform .6s;
}
.wl-card:hover .wl-card__bg{transform:scale(1.06)}
.wl-card__overlay{position:absolute;inset:0;z-index:1}
.wl-card--red .wl-card__overlay{background:rgba(192,57,43,.78)}
.wl-card--blue .wl-card__overlay{background:rgba(26,111,168,.78)}
.wl-card--dark .wl-card__overlay{background:rgba(26,26,42,.82)}
.wl-card__body{position:relative;z-index:2;color:#fff;text-align:center}
.wl-card__title{
  font-family:var(--h);font-size:clamp(22px,2.2vw,28px);
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:16px;
}
.wl-card__text{font-size:14px;line-height:1.6;opacity:.9;margin-bottom:28px;max-width:320px;margin-left:auto;margin-right:auto}
.wl-card__link{
  font-family:var(--h);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;
  color:#fff;border-bottom:2px solid rgba(255,255,255,.5);
  padding-bottom:3px;transition:border-color .15s,color .15s;
  display:inline-block;
}
.wl-card__link:hover{border-color:var(--y);color:var(--y)}

/* ---- SECTION BASE ---- */
.wl-section{padding:90px 24px}
.wl-section--bg{background:var(--bg)}
.wl-section--dark{background:var(--dk);color:#fff}
.wl-section--blue{background:var(--b);color:#fff}
.wl-container{max-width:var(--max);margin:0 auto}
.wl-section-head{text-align:center;margin-bottom:56px}
.wl-label{
  font-family:var(--h);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--b);margin-bottom:12px;
}
.wl-section--dark .wl-label,.wl-section--blue .wl-label{color:var(--y)}
.wl-section-head .wl-label{display:block}
.wl-title{
  font-family:var(--h);font-size:clamp(28px,4vw,46px);
  font-weight:700;text-transform:uppercase;line-height:1.1;
  color:var(--dk);margin-bottom:16px;
}
.wl-section--dark .wl-title,.wl-section--blue .wl-title{color:#fff}
.wl-subtitle{font-size:17px;color:#666;max-width:640px;margin:0 auto}
.wl-section--dark .wl-subtitle{color:rgba(255,255,255,.7)}

/* ---- CAMPAIGN CARDS ---- */
.wl-campaigns{
  display:none;grid-template-columns:repeat(3,1fr);
  gap:24px;position:relative;
}
.wl-campaign{background:#fff;box-shadow:0 2px 20px rgba(0,0,0,.08)}
.wl-campaign__img{height:200px;overflow:hidden}
.wl-campaign__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:filter .3s}
.wl-campaign:hover .wl-campaign__img img{filter:grayscale(0%)}
.wl-campaign__body{padding:24px}
.wl-campaign__cat{
  font-family:var(--h);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--b);margin-bottom:8px;
}
.wl-campaign__title{
  font-family:var(--h);font-size:20px;font-weight:700;
  text-transform:uppercase;line-height:1.2;
  color:var(--dk);margin-bottom:12px;
}
.wl-campaign__text{font-size:14px;color:#666;line-height:1.6;margin-bottom:20px}
.wl-campaign__footer{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:16px;border-top:1px solid #eee;
}
.wl-campaign__link{
  font-family:var(--h);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--r);font-weight:500;
}
.wl-campaign__target{font-size:13px;color:#333;font-weight:700}
.wl-campaign__target span{color:var(--b)}
.wl-campaigns__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;background:#fff;border:1px solid #ddd;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;color:#333;z-index:2;
  transition:background .15s;
}
.wl-campaigns__nav:hover{background:var(--y)}
.wl-campaigns__nav--prev{left:-20px}
.wl-campaigns__nav--next{right:-20px}

/* ---- CTA BANNER ---- */
.wl-cta{
  position:relative;padding:100px 24px;text-align:center;overflow:hidden;
}
.wl-cta__bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(20%) brightness(.4);
}
.wl-cta__content{position:relative;z-index:2;max-width:760px;margin:0 auto;color:#fff}
.wl-cta__label{font-family:var(--h);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--y);margin-bottom:20px;display:block}
.wl-cta__title{font-family:var(--h);font-size:clamp(28px,4vw,56px);font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:16px}
.wl-cta__sub{font-size:17px;opacity:.85;margin-bottom:40px}

/* ---- ABOUT SECTION ---- */
.wl-about{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;align-items:start}
.wl-about__text .wl-title{text-align:left;font-size:clamp(26px,3vw,38px)}
.wl-about__text p{color:#555;line-height:1.7;margin-bottom:16px}
.wl-about__text em{font-style:italic;font-weight:700}
.wl-stats{display:flex;flex-direction:column;gap:32px;padding-top:8px}
.wl-stat__icon{width:48px;height:48px;object-fit:contain;margin-bottom:10px}
.wl-stat__num{font-family:var(--h);font-size:28px;font-weight:700;color:var(--dk)}
.wl-stat__text{font-size:14px;color:#666;line-height:1.4}
.wl-about__cta{background:var(--bg);padding:32px}
.wl-about__cta img{width:100%;margin-bottom:20px;object-fit:cover;max-height:200px}
.wl-about__cta .wl-title{font-size:22px;margin-bottom:12px}

/* ---- DARK CAMPAIGN ---- */
.wl-dark-campaign{
  position:relative;min-height:400px;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
}
.wl-dark-campaign__bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center 20%;
  filter:grayscale(100%) brightness(.3);
}
.wl-dark-campaign__side{
  position:relative;z-index:2;padding:80px 60px;color:#fff;
}
.wl-dark-campaign__label{font-family:var(--h);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--y);margin-bottom:16px;display:block}
.wl-dark-campaign__title{font-family:var(--h);font-size:clamp(28px,4vw,52px);font-weight:700;text-transform:uppercase;line-height:1.05;margin-bottom:12px}
.wl-dark-campaign__goal{font-family:var(--h);font-size:clamp(28px,4vw,52px);font-weight:700}
.wl-dark-campaign__goal span{color:var(--y)}

/* ---- WHERE WE WORK ---- */
.wl-map{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.wl-map__text .wl-title{text-align:left}
.wl-map__text p{color:#555;line-height:1.7;margin-bottom:12px}
.wl-map__img img{width:100%;filter:opacity(.4)}

/* ---- SERVICES ---- */
.wl-services-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.wl-services{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e0e0e0}
.wl-service{
  background:#fff;padding:40px 32px;
  transition:background .2s;
}
.wl-service:hover{background:var(--bg)}
.wl-service__icon{width:56px;height:56px;object-fit:contain;margin-bottom:20px}
.wl-service__title{
  font-family:var(--h);font-size:18px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--dk);margin-bottom:10px;
}
.wl-service__text{font-size:14px;color:#666;line-height:1.6}
.wl-help-form{background:var(--bg);padding:40px 32px}
.wl-help-form .wl-label{display:block;margin-bottom:8px}
.wl-help-form__title{font-family:var(--h);font-size:clamp(22px,3vw,32px);font-weight:700;text-transform:uppercase;line-height:1.1;color:var(--dk);margin-bottom:12px}
.wl-help-form p{font-size:14px;color:#555;margin-bottom:20px}
.wl-help-form textarea{width:100%;height:120px;padding:12px;border:1px solid #ccc;resize:none;font-family:var(--t);font-size:14px;margin-bottom:12px}
.wl-help-form__email{font-family:var(--h);font-size:16px;color:var(--r);font-weight:700;letter-spacing:.05em}

/* ---- CONTACT ---- */
.wl-contact{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.wl-contact__title{font-family:var(--h);font-size:clamp(26px,3vw,40px);font-weight:700;text-transform:uppercase;line-height:1.1;margin-bottom:20px}
.wl-contact__text{font-size:15px;color:rgba(255,255,255,.75);line-height:1.7;margin-bottom:20px}
.wl-contact__socials{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.wl-contact__socials a{font-family:var(--h);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--y);font-weight:500}
.wl-contact__socials a:hover{text-decoration:underline}
.wl-contact__info{display:flex;flex-direction:column;gap:28px}
.wl-contact__item-label{font-family:var(--h);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--y);margin-bottom:6px}
.wl-contact__item-value{font-family:var(--h);font-size:clamp(18px,2vw,26px);font-weight:700;text-transform:uppercase;line-height:1.1}

/* ---- FOOTER ---- */
.wl-footer{background:var(--dk);color:#fff;padding:64px 24px 0}
.wl-footer__inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:48px}
.wl-footer__brand .wl-logo{margin-bottom:16px}
.wl-footer__brand p{font-size:14px;color:rgba(255,255,255,.55);line-height:1.6;margin-bottom:16px}
.wl-footer__brand a.btn{font-size:11px;padding:10px 20px}
.wl-footer__col h4{font-family:var(--h);font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:20px;color:#fff}
.wl-footer__col h4::after{content:'';display:block;width:32px;height:2px;background:var(--y);margin-top:8px}
.wl-footer__col ul{display:flex;flex-direction:column;gap:10px}
.wl-footer__col a{font-size:14px;color:rgba(255,255,255,.6);transition:color .15s}
.wl-footer__col a:hover{color:var(--y)}
.wl-footer__newsletter input{
  width:100%;padding:12px 16px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);color:#fff;
  font-family:var(--t);font-size:14px;margin-bottom:12px;
}
.wl-footer__newsletter input::placeholder{color:rgba(255,255,255,.45)}
.wl-footer__bottom{
  max-width:var(--max);margin:0 auto;
  padding:20px 0;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;align-items:center;
}
.wl-footer__bottom p{font-size:13px;color:rgba(255,255,255,.35)}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
  .wl-about{grid-template-columns:1fr 1fr}
  .wl-about__cta{display:none}
  .wl-footer__inner{grid-template-columns:1fr 1fr 1fr}
  .wl-dark-campaign{grid-template-columns:1fr}
}
@media(max-width:768px){
  .wl-header{padding:0 20px}
  .wl-nav{display:none}
  .wl-cards{grid-template-columns:1fr}
  .wl-campaigns{grid-template-columns:1fr}
  .wl-campaigns__nav{display:none}
  .wl-about{grid-template-columns:1fr}
  .wl-map{grid-template-columns:1fr}
  .wl-services-wrap{grid-template-columns:1fr}
  .wl-services{grid-template-columns:1fr}
  .wl-contact{grid-template-columns:1fr}
  .wl-footer__inner{grid-template-columns:1fr 1fr}
  .wl-footer__bottom{flex-direction:column;gap:8px;text-align:center}
}

/* ---- LOGO WRAP: center sub under name ---- */
.wl-logo__wrap { align-items: flex-start; }
.wl-logo__sub { display: block; }

/* ---- BURGER MENU ---- */
.wl-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.wl-burger span {
  display: block;
  width: 100%; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .25s;
}
.wl-header.solid .wl-burger span { background: #333; }
.wl-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wl-burger.open span:nth-child(2) { opacity: 0; }
.wl-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- MOBILE DRAWER ---- */
.wl-mobile-nav {
  display: none;
  position: fixed;
  top: 80px; left: 0; right: 0;
  background: #1a1a2a;
  z-index: 998;
  padding: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.wl-mobile-nav.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.wl-mobile-nav a {
  display: block;
  padding: 16px 24px;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .15s, color .15s;
}
.wl-mobile-nav a:hover { background: rgba(255,255,255,.06); color: #f5c518; }
.wl-mobile-nav .wl-mobile-social {
  display: flex; gap: 12px; padding: 16px 24px;
}

/* ---- MOBILE RESPONSIVE ---- */
@media(max-width:768px){
  .wl-burger { display: flex; }
  .wl-mobile-nav { display: block; }
  .wl-nav { display: none; }
  .wl-header__social { display: none; }

  /* Logo font smaller on mobile */
  .wl-logo__name {
    font-size: 15px !important;
    letter-spacing: .03em;
    line-height: 1.1;
  }
  .wl-logo__sub {
    font-size: 9px !important;
    letter-spacing: .06em;
  }
  .wl-logo__img { width: 52px !important; height: 52px !important; }
  .wl-header { padding: 0 16px; height: 68px; }
  .wl-mobile-nav { top: 68px; }

  /* Hero */
  .wl-hero__title { font-size: clamp(44px, 13vw, 80px); }

  /* Cards */
  .wl-cards { grid-template-columns: 1fr; }

  /* Campaigns */
  .wl-campaigns { grid-template-columns: 1fr; }
  .wl-campaigns__nav { display: none; }

  /* About */
  .wl-about { grid-template-columns: 1fr; }
  .wl-about__cta { display: none; }

  /* Dark campaign */
  .wl-dark-campaign { grid-template-columns: 1fr; }
  .wl-dark-campaign__side { padding: 48px 24px; }

  /* Map */
  .wl-map { grid-template-columns: 1fr; }

  /* Services */
  .wl-services-wrap { grid-template-columns: 1fr; }
  .wl-services { grid-template-columns: 1fr 1fr; }

  /* Contact */
  .wl-contact { grid-template-columns: 1fr; gap: 40px; }

  /* Footer */
  .wl-footer__inner { grid-template-columns: 1fr 1fr; }
  .wl-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
}

@media(max-width:480px){
  .wl-services { grid-template-columns: 1fr; }
  .wl-footer__inner { grid-template-columns: 1fr; }
}

/* Social icon SVG sizing & new colors */
.wl-social-icon svg { display:block; width:16px; height:16px; }
.si-tg { background:#229ED9; }
.si-wa { background:#25D366; }
.si-tk { background:#010101; }
/* Remove old text-based padding */
.wl-social-icon { font-size:0; }

.wl-logo__wrap { align-items: flex-start; }
.wl-logo__sub { text-align: center; width: 100%; }

/* Dark campaign — show top of image (drone) */
.wl-dark-campaign__bg {
  background-position: center top !important;
}

/* Stat SVG icons */
.wl-stat__icon { width:64px; height:64px; display:block; margin-bottom:12px; }

/* ---- LANG SWITCHER ---- */
#tz-lang-switcher {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  margin-right: 12px;
}
.tz-lang-btn {
  background: transparent;
  border: 2px solid transparent;
  padding: 2px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .2s;
  line-height: 0;
  opacity: .65;
}
.tz-lang-btn img { display:block; border-radius:2px; }
.tz-lang-btn:hover { opacity: 1; border-color: #f5c518; }
.tz-lang-btn.active { opacity: 1; border-color: #f5c518; box-shadow: 0 0 0 1px #f5c518; }
@media(max-width:768px) { #tz-lang-switcher { display: none; } }
#tz-lang-switcher { display: none !important; }

/* ---- ТИМЧАСОВО ПРИХОВАНО (очікуємо реєстр неприбуткових) ---- */
/* Зняти коментар /* та */ щоб відновити блоки */
.wl-campaigns { display:none !important; }       /* Слайдер проектів */
.wl-dark-campaign { display: none !important; }   /* Збір 1 000 000 грн */

/* ---- ТИМЧАСОВО ПРИХОВАНО (очікуємо реєстр неприбуткових) ---- */
.wl-services-wrap { display: none !important; }   /* Блок послуг + форма */
.wl-cta { display: none !important; }             /* "Нам потрібна ваша допомога" */


/* Hide campaigns section (НАМ ПОТРІБНА ВАША ДОПОМОГА) */
section.wl-section--bg { display: none !important; }
/* Hide map section (ДЕ МИ ПРАЦЮЄМО) */
section.wl-section:has(.wl-map) { display: none !important; }

/* Volunteer image - show face */
.wl-about__cta img { object-position: top !important; max-height: 320px !important; height: 320px !important; }