/* =========================================================
   HIHU 2026 — Modern visual system
   Final override layer. Keeps the existing EJS/content model.
   ========================================================= */
:root{
  --primary-color:#075aa8;
  --primary-dark:#08233f;
  --primary-light:#2f8fd8;
  --accent-color:#f28c18;
  --accent-hover:#d87508;
  --accent-soft:rgba(242,140,24,.12);
  --gold-color:#18a879;
  --gold-soft:rgba(24,168,121,.12);
  --text-color:#142033;
  --text-light:#5b6878;
  --text-muted:#8793a3;
  --bg-light:#f5f8fb;
  --bg-white:#fff;
  --bg-card:#fff;
  --border:#e6edf4;
  --container-width:1240px;
  --border-radius:16px;
  --border-radius-sm:11px;
  --border-radius-lg:26px;
  --shadow-xs:0 1px 2px rgba(8,35,63,.04);
  --shadow-sm:0 8px 28px rgba(8,35,63,.07);
  --shadow-md:0 16px 40px rgba(8,35,63,.10);
  --shadow-lg:0 24px 70px rgba(8,35,63,.15);
  --gradient-primary:linear-gradient(135deg,#075aa8 0%,#0d76c5 55%,#2f8fd8 100%);
  --gradient-accent:linear-gradient(135deg,#f28c18 0%,#f7aa3d 100%);
}

html{scroll-padding-top:112px}
body{background:#fff;color:var(--text-color);font-size:16px;line-height:1.75;letter-spacing:-.005em}
body::selection{background:#dceeff;color:var(--primary-dark)}
.container{width:min(100% - 40px,var(--container-width));padding:0;margin-inline:auto}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.025em;color:var(--primary-dark)}
p{color:var(--text-light)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(242,140,24,.45);outline-offset:3px}

/* Header */
.site-header{z-index:1000;transition:background .3s ease,box-shadow .3s ease,transform .3s ease}
.top-bar{background:#071d34 !important;padding:8px 0;border:0;color:#d7e4ef}
.top-bar .container{min-height:30px}
.contact-info{display:flex;align-items:center;gap:20px}
.contact-info span{margin:0!important;font-size:.79rem;font-weight:500}
.contact-info i,.social-icons i{color:#8bc9f4!important}
.social-icons{display:flex;align-items:center;gap:5px}
.social-icons a{margin:0!important;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:.78rem}
.social-icons a:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.main-header-inner{padding:13px 0!important;background:rgba(7,29,52,.82)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.09)}
.site-header.header-solid{position:relative;background:#071d34}
.site-header.is-sticky{box-shadow:0 12px 34px rgba(5,24,43,.2)}
.site-header.is-sticky .top-bar{display:none}
.site-header.is-sticky .main-header-inner{background:rgba(7,29,52,.96)!important}
.header-flex{gap:28px}
.logo img{height:54px!important;width:auto;object-fit:contain}
.main-nav>ul{gap:5px!important}
.main-nav a{font-size:.78rem!important;letter-spacing:.035em;text-transform:none!important;font-weight:650!important;padding:10px 9px;border-radius:9px;color:#f7fbff!important;white-space:nowrap}
.main-nav>ul>li:not(.has-submenu)>a:not(.btn-donate):hover,.main-nav>ul>li.has-submenu>a:hover,.main-nav>ul>li>a.active:not(.btn-donate){background:rgba(255,255,255,.08);color:#fff!important}
.main-nav a.btn-donate{padding:11px 18px!important;background:var(--gradient-accent)!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.16);text-transform:none!important}
.main-nav a.btn-donate:hover{transform:translateY(-1px)!important;box-shadow:0 10px 24px rgba(242,140,24,.25)!important}
.dropdown-menu{border:1px solid var(--border)!important;border-radius:14px!important;padding:8px!important;box-shadow:var(--shadow-lg)!important;min-width:230px!important;background:#fff!important}
.dropdown-menu a{color:var(--text-color)!important;padding:10px 12px!important;border-radius:8px!important;font-size:.84rem!important;text-transform:none!important}
.dropdown-menu a:hover{background:#f2f7fb!important;color:var(--primary-color)!important;transform:none!important}
.mobile-toggle{border:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.08)!important;border-radius:10px!important;width:44px;height:44px;color:#fff!important}

/* Hero */
#heroSection{height:min(82vh,820px)!important;min-height:610px!important;background:#0a365c!important}
#heroSection .slide-overlay{background:linear-gradient(90deg,rgba(5,28,51,.88) 0%,rgba(5,42,76,.67) 46%,rgba(5,42,76,.25) 100%)!important}
#heroSection .slide-body{align-items:flex-start!important;text-align:left!important;padding:90px max(24px,calc((100vw - 1240px)/2)) 60px!important}
#heroSection .slide-body>*{max-width:760px}
#heroSection .slide-tag{background:rgba(255,255,255,.11)!important;border-color:rgba(255,255,255,.24)!important;color:#fff!important;letter-spacing:.12em!important;padding:7px 14px!important;font-size:.72rem!important}
#heroSection .slide-title{font-size:clamp(2.75rem,5.8vw,5.2rem)!important;line-height:1.01!important;letter-spacing:-.045em!important;margin:20px 0 18px!important;text-wrap:balance}
#heroSection .slide-sub{font-size:clamp(1rem,1.45vw,1.22rem)!important;line-height:1.75!important;color:rgba(255,255,255,.84)!important;max-width:650px!important;margin:0 0 30px!important}
#heroSection .slide-btns{justify-content:flex-start!important;gap:12px!important}
#heroSection .btn-hero-main,#heroSection .btn-hero-ghost{padding:14px 23px!important;border-radius:11px!important;font-size:.92rem!important;font-weight:700!important;letter-spacing:0!important;box-shadow:none!important}
#heroSection .btn-hero-main{background:var(--gradient-accent)!important;animation:none!important}
#heroSection .btn-hero-main:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(242,140,24,.25)!important}
#heroSection .btn-hero-ghost{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.34)!important;backdrop-filter:blur(7px)}
#heroSection .swiper-button-next,#heroSection .swiper-button-prev{width:44px!important;height:44px!important;border-radius:12px!important;background:rgba(5,25,45,.3)!important;border-color:rgba(255,255,255,.2)!important}
#heroSection .swiper-button-prev{left:22px!important}#heroSection .swiper-button-next{right:22px!important}
#heroSection .swiper-pagination{bottom:30px!important}
#heroSection .wave-bottom{display:none}

/* Sections */
.section,.video-section,.urgent-needs-section,.voices-section{padding:94px 0!important}
.section-gray,.urgent-needs-section{background:var(--bg-light)!important}
.section-title{margin-bottom:48px!important}
.section-title h2{font-size:clamp(2rem,3.4vw,3rem)!important;line-height:1.12!important;padding-bottom:0!important;margin-bottom:14px!important}
.section-title h2::after{display:none!important}
.section-title p{max-width:700px;margin-inline:auto!important;font-size:1.02rem;line-height:1.75;color:var(--text-light)}
.section-title::before{content:"";display:block;width:44px;height:4px;border-radius:99px;background:var(--accent-color);margin:0 auto 16px}

/* Welcome / split feature */
.split-feature-grid{gap:64px!important;align-items:center!important}
.split-content .badge-charity{background:var(--accent-soft)!important;color:var(--accent-hover)!important;border:1px solid rgba(242,140,24,.15);padding:7px 12px!important;font-size:.72rem!important;letter-spacing:.08em;border-radius:8px!important}
.split-content h2{font-size:clamp(2.1rem,3.5vw,3.35rem)!important;line-height:1.12!important;margin:18px 0!important}
.split-content p{font-size:1rem!important;line-height:1.85!important}
.split-features{gap:14px!important}
.feature-item{border:1px solid var(--border)!important;border-radius:16px!important;padding:22px!important;box-shadow:none!important;background:#fff!important;align-items:flex-start!important}
.feature-item:hover{transform:translateY(-3px)!important;box-shadow:var(--shadow-sm)!important;border-color:#d9e6f0!important}
.feature-icon,.grid-icon-box{width:50px!important;height:50px!important;min-width:50px!important;border-radius:14px!important;background:#edf7fe!important;color:var(--primary-color)!important;box-shadow:none!important;font-size:1.15rem!important}
.feature-text h3{font-size:1.02rem!important;margin-bottom:5px!important}.feature-text p{font-size:.91rem!important;line-height:1.6!important;margin:0!important}

/* Buttons */
.btn-primary-solid,.btn-primary,.btn-submit,.btn-amount.active{background:var(--gradient-primary)!important;border:0!important;color:#fff!important;border-radius:11px!important;padding:12px 20px!important;font-weight:700!important;box-shadow:0 8px 20px rgba(7,90,168,.15)!important}
.btn-primary-solid:hover,.btn-primary:hover,.btn-submit:hover{transform:translateY(-2px)!important;box-shadow:0 14px 28px rgba(7,90,168,.22)!important}
.btn-text{color:var(--primary-color)!important;font-weight:700!important}
.btn-text i{transition:transform .2s ease}.btn-text:hover i{transform:translateX(4px)}
.btn-outline-white{border-radius:11px!important;padding:12px 20px!important}

/* Cards */
.mission-grid,.cards-grid,.news-grid,.donation-tiers-grid{gap:22px!important}
.mission-card,.info-card,.need-card,.home-news-card,.news-card,.contact-card,.objective-category-card,.bank-card,.payment-card,.report-column{border:1px solid var(--border)!important;border-radius:18px!important;box-shadow:none!important;background:#fff!important;overflow:hidden}
.mission-card,.contact-card,.objective-category-card{padding:28px!important}
.mission-card:hover,.info-card:hover,.home-news-card:hover,.news-card:hover,.contact-card:hover,.objective-category-card:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow-md)!important;border-color:#d7e4ee!important}
.info-card .card-img,.news-img-wrap,.news-img{overflow:hidden}
.info-card .card-img img,.home-news-card img,.news-card img{transition:transform .55s ease!important}
.info-card:hover .card-img img,.home-news-card:hover img,.news-card:hover img{transform:scale(1.04)!important}
.card-body,.news-body,.news-content{padding:24px!important}
.card-body h3,.news-body h3,.news-title{font-size:1.17rem!important;line-height:1.4!important}

/* Urgent needs */
#pressing-needs{padding-top:92px!important;padding-bottom:92px!important}
#pressing-needs .need-card{padding:28px!important;border-top:0!important;box-shadow:none!important}
#pressing-needs .need-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent-color)}
#pressing-needs .need-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:#edf7fe;font-size:1.2rem!important;color:var(--primary-color)!important}

/* Impact strip */
#impact-stats{padding:80px 0!important;background:linear-gradient(135deg,#061e37 0%,#075aa8 100%)!important}
#impact-stats .section-title::before{background:#72bff2}
#impact-stats .stat-card{padding:25px!important;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.055);backdrop-filter:blur(7px)}
#impact-stats .stat-card>div:first-child{color:#fff!important;font-size:3rem!important}
#impact-stats .stat-card p{color:rgba(255,255,255,.72)!important}

/* Partner logos */
.partners-section{padding:48px 0!important;border:0!important;background:#fff!important}
.partners-section h3{font-size:.72rem!important;letter-spacing:.14em!important;color:#8a98a7!important;margin-bottom:28px!important}
.partners-track img{height:48px!important;margin:0 34px!important;filter:grayscale(100%) opacity(.55)!important}.partners-track img:hover{filter:none!important}

/* Team / people */
.team-card{border:1px solid var(--border)!important;border-radius:18px!important;box-shadow:none!important;overflow:hidden;background:#fff!important}
.team-img-wrapper{background:#edf4f8!important}.team-img-wrapper img{width:100%;height:290px!important;object-fit:cover!important;object-position:top center}
.team-info{padding:19px!important}.team-name{font-size:1rem!important;margin-bottom:4px!important}.team-role{font-size:.82rem!important;color:var(--text-light)!important}
.carousel-btn{width:42px!important;height:42px!important;border-radius:11px!important;background:#fff!important;color:var(--primary-color)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-sm)!important}

/* Voices */
.voices-section{background:linear-gradient(135deg,#071d34,#0b4f88)!important}
.voices-section .section-title::before{background:var(--accent-color)}
.voice-card{margin:0!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:18px!important;padding:26px!important}
.voice-card p{color:rgba(255,255,255,.8)!important}.voice-card h4{color:#fff!important}

/* Generic inner page polish */
.page-hero,.inner-hero,.subpage-hero{background:linear-gradient(135deg,#071d34,#075aa8)!important}
.content-section{padding-top:76px!important;padding-bottom:76px!important}
.text-content p,.activities-intro p,.contact-intro p,.donate-intro p{line-height:1.85!important}
.activity-card-row{border:1px solid var(--border)!important;border-radius:20px!important;overflow:hidden;background:#fff!important;box-shadow:none!important;margin-bottom:26px!important}
.activity-image img{min-height:280px;object-fit:cover}
.activity-content{padding:34px!important}
.counter-box{background:#fff!important;color:var(--primary-dark)!important;border:1px solid var(--border)!important;box-shadow:none!important;border-radius:16px!important}
.counter-box h3{color:var(--primary-color)!important;font-size:2.15rem!important}
.counter-box p{color:var(--text-light)!important}
.gallery-item{border-radius:16px!important;overflow:hidden;box-shadow:none!important;border:1px solid var(--border)!important}
.gallery-item img{transition:transform .5s ease!important}.gallery-item:hover img{transform:scale(1.04)!important}
.gallery-tabs,.filter-grid{gap:8px!important}.gallery-tabs button,.btn-tab{border-radius:9px!important}
.form-control,input[type=text],input[type=email],input[type=tel],input[type=number],textarea,select{border:1px solid #dbe5ee!important;border-radius:11px!important;background:#fff!important;min-height:46px;padding:11px 13px!important;box-shadow:none!important}
.form-control:focus,input:focus,textarea:focus,select:focus{border-color:#7cbce9!important;box-shadow:0 0 0 4px rgba(47,143,216,.10)!important}

/* Donation */
.donation-card{border:1px solid var(--border)!important;border-radius:18px!important;box-shadow:none!important;background:#fff!important;padding:28px!important}
.donation-card:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow-md)!important}
.donation-icon{font-size:2rem!important}.donation-name{font-size:1.1rem!important}.donation-range{font-size:.9rem!important}
.btn-donate-tier{border-radius:10px!important;padding:11px 16px!important;color:#fff!important}
.gateway-option,.mobile-card,.bank-details-box{border-color:var(--border)!important;border-radius:14px!important}

/* Footer */
.site-footer,footer{background:#06192d!important}
.site-footer>div:first-child,footer>div:first-child{padding-top:64px!important;padding-bottom:52px!important}
footer .footer-col h3{font-size:.95rem!important;letter-spacing:.01em!important;border-bottom:0!important;padding-bottom:0!important;margin-bottom:18px!important}
footer .footer-col h3::after{content:"";display:block;width:28px;height:3px;border-radius:20px;background:var(--accent-color);margin-top:9px}
footer .footer-col p,footer .footer-col a,footer .footer-col span{color:#9fb0c0!important}
footer .footer-col a:hover{color:#fff!important}
footer .footer-col>a[href="/donate"]{color:#fff!important;background:var(--gradient-accent)!important;border-radius:10px!important;box-shadow:none!important}
.back-to-top{right:22px!important;bottom:22px!important;width:44px!important;height:44px!important;border-radius:12px!important;background:var(--primary-color)!important;box-shadow:var(--shadow-md)!important}
.scroll-progress-bar{height:3px!important;background:var(--accent-color)!important}

/* Motion: calmer and more professional */
.animate-float{animation:none!important}.hero-btn-large{animation:none!important}
.scroll-reveal{transition:opacity .55s ease,transform .55s ease!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media(max-width:1100px){
  .main-nav a{font-size:.73rem!important;padding:9px 6px!important}.main-nav>ul{gap:1px!important}.logo img{height:49px!important}
}
@media(max-width:992px){
  .top-bar{display:none!important}.main-header-inner{padding:11px 0!important}.logo img{height:48px!important}
  .main-nav{top:70px!important;background:#071d34!important;border-top:1px solid rgba(255,255,255,.08)!important;box-shadow:0 20px 50px rgba(0,0,0,.18)!important}
  .main-nav>ul{padding:14px!important;gap:3px!important}.main-nav a{font-size:.9rem!important;padding:12px 13px!important;border-radius:9px!important}.dropdown-menu{border:0!important;box-shadow:none!important;background:rgba(255,255,255,.05)!important;margin:4px 0 7px!important}.dropdown-menu a{color:#dce8f2!important;background:transparent!important}
  #heroSection{min-height:620px!important;height:78vh!important}#heroSection .slide-body{padding:80px 26px 50px!important}#heroSection .slide-body>*{max-width:680px}#heroSection .swiper-button-next,#heroSection .swiper-button-prev{display:none!important}
  .split-feature-grid{gap:38px!important}
}
@media(max-width:768px){
  .container{width:min(100% - 30px,var(--container-width))}.section,.video-section,.urgent-needs-section,.voices-section{padding:70px 0!important}.section-title{margin-bottom:34px!important}
  #heroSection{min-height:590px!important;height:74vh!important}#heroSection .slide-title{font-size:clamp(2.35rem,12vw,3.7rem)!important}#heroSection .slide-sub{font-size:.98rem!important;line-height:1.65!important}#heroSection .slide-btns{width:100%;flex-wrap:wrap!important}#heroSection .btn-hero-main,#heroSection .btn-hero-ghost{padding:12px 17px!important}
  #impact-stats>div.container>div:last-child{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}#impact-stats .stat-card{padding:20px 10px!important}#impact-stats .stat-card>div:first-child{font-size:2.25rem!important}
  .feature-item{padding:18px!important}.activity-content{padding:25px!important}.team-img-wrapper img{height:260px!important}
  .voice-card{flex-basis:86%!important;min-width:280px!important}
}
@media(max-width:520px){
  .logo img{height:42px!important}.mobile-toggle{width:41px;height:41px}
  #heroSection{min-height:610px!important;height:78vh!important}#heroSection .slide-body{padding:74px 20px 45px!important}#heroSection .slide-title{font-size:2.55rem!important}#heroSection .slide-tag{font-size:.64rem!important;letter-spacing:.08em!important}
  #impact-stats>div.container>div:last-child{grid-template-columns:1fr 1fr!important}.partners-track img{height:38px!important;margin:0 20px!important}
  .section-title h2{font-size:2rem!important}.mission-card,.contact-card,.objective-category-card{padding:22px!important}
}