/*
Theme Name: HFS AID Charity
Theme URI: https://hfsaid.org
Author: HFS AID
Author URI: https://hfsaid.org
Description: A fast, Elementor-ready WordPress theme for HFS AID — built for humanitarian and charity organizations. Navy blue & gold design, donation-ready pages, and easy visual editing with Elementor. Replace all placeholder text and images with your real content.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hfsaid
Tags: charity, nonprofit, donation, elementor, blue, gold, one-column
*/

/* ==========================================================================
   Design tokens — edit these to restyle the whole site
   ========================================================================== */
:root{
  --hfs-navy-deep:   #071233;
  --hfs-navy:        #0B1E4D;
  --hfs-navy-light:  #14265E;
  --hfs-gold:        #D9A63E;
  --hfs-gold-bright: #F2C94C;
  --hfs-gold-soft:   #E9CE8C;
  --hfs-silver:      #C9D2E0;
  --hfs-cream:       #F7F5EF;
  --hfs-ink:         #1B2130;
  --hfs-muted:       #5B6478;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 50px -20px rgba(7,18,51,0.35);
  --container: 1180px;
}

/* Base resets are also present in assets/css/main.css — this file must exist
   for WordPress to recognize the theme, and carries the primary tokens. */
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-body); color:var(--hfs-ink); background:var(--hfs-cream); }
a{ color:var(--hfs-navy); }
img{ max-width:100%; height:auto; display:block; }
.screen-reader-text{ position:absolute!important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }


/* HFS AID mobile + performance upgrades */
.site-header { position:relative; z-index:1000; }
.menu-toggle { display:none; background:transparent; border:0; cursor:pointer; color:white; }
.primary-nav { display:flex; align-items:center; gap:24px; }

.focus-3d-card {
  background:linear-gradient(145deg,#162d68,#081535);
  border-radius:28px;
  padding:28px;
  box-shadow:20px 25px 45px rgba(0,0,0,.25), inset 0 1px 20px rgba(255,255,255,.08);
  transform:translateZ(0);
  transition:.35s ease;
}
.focus-3d-card:hover { transform:translateY(-8px) rotateX(4deg); }
.focus-3d-icon {
 width:80px;height:80px;border-radius:50%;
 display:grid;place-items:center;
 background:linear-gradient(145deg,#f7d35a,#b87b12);
 color:#071233;font-size:36px;
 box-shadow:0 20px 35px rgba(242,201,76,.25);
 margin-bottom:18px;
}

.modern-image-card {
 border-radius:32px;
 overflow:hidden;
 position:relative;
 box-shadow:var(--shadow-soft);
}
.modern-image-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.modern-image-card:after {
 content:""; position:absolute; inset:0;
 background:linear-gradient(transparent,rgba(7,18,51,.75));
}

@media(max-width: 850px){
 .site-header .container { padding:12px 20px; }
 .menu-toggle { display:block; }
 .primary-nav {
   display:none;
   position:absolute;
   top:72px; left:20px; right:20px;
   background:#081535;
   padding:25px;
   border-radius:20px;
   flex-direction:column;
   align-items:stretch;
   box-shadow:0 25px 50px rgba(0,0,0,.35);
 }
 .primary-nav.is-open { display:flex; }
 .primary-nav ul { flex-direction:column; width:100%; gap:15px; }
 .nav-donate-btn { text-align:center; }
 .hero .container { grid-template-columns:1fr; }
 h1 { font-size:42px!important; }
 .hero-showcase { margin-top:35px; }
}