/*
Theme Name: OM Sahu Educational Trust Pro
Theme URI: https://example.com
Author: You
Description: A clean, modern WordPress theme inspired by NGO/charity layouts (Akshaya Patra style) for OM SAHU EDUCATIONAL TRUST.
Version: 1.0.0
Text Domain: ost-pro
*/

:root {
  --primary: #f4a300; /* warm highlight */
  --secondary: #1a4d8f; /* deep blue */
  --nav-bg: #0c294d;
  --text: #222;
  --muted: #666;
  --bg: #ffffff;
}

* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); line-height:1.6; }

/* Top bar */
.topbar { background: var(--secondary); color: #fff; font-size: 14px; }
.topbar .container { display:flex; justify-content:space-between; align-items:center; padding: 6px 16px; }
.topbar a { color:#fff; text-decoration:none; margin-left:12px; opacity:.9; }
.topbar a:hover { opacity:1; }

/* Header */
.site-header { background:#fff; border-bottom:1px solid #eee; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; gap: 16px; }
.site-branding { display:flex; align-items:center; gap:12px; }
.site-title { margin:0; font-size: clamp(18px, 2.4vw, 26px); font-weight: 700; color: var(--secondary); letter-spacing:.3px; }
.site-description { margin:0; font-size: 13px; color: var(--muted); }

.custom-logo { max-height: 56px; height:auto; width:auto; }

/* Donate button */
.btn { display:inline-block; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:600; }
.btn-primary { background: var(--primary); color:#111; }
.btn-primary:hover { filter: brightness(0.95); }

/* Navigation */
.primary-nav { background: var(--nav-bg); }
.primary-nav .container { display:flex; align-items:center; justify-content:center; }
.primary-nav ul { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; }
.primary-nav li { margin:0; }
.primary-nav a { color:#fff; text-decoration:none; padding:12px 18px; display:block; font-weight:600; }
.primary-nav a:hover, .primary-nav .current-menu-item > a { background: rgba(255,255,255,.1); }

/* Hero */
.hero { position:relative; background:#eee; min-height: 54vh; display:grid; place-items:center; text-align:center; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background: var(--secondary); opacity:.45; }
.hero-inner { position:relative; z-index:1; padding: 48px 16px; color:#fff; max-width: 960px; }
.hero h1 { margin:0 0 10px; font-size: clamp(28px, 5vw, 56px); line-height:1.1; }
.hero p { margin: 0 0 24px; font-size: clamp(16px, 2.1vw, 20px); opacity:.95; }
.hero .cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Sections */
.section { padding: 48px 16px; }
.container { max-width: 1140px; margin: 0 auto; }
.section h2 { text-align:center; margin:0 0 24px; font-size: clamp(22px, 3vw, 32px); }
.grid { display:grid; gap:16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Cards */
.card { background:#fff; border:1px solid #eee; border-radius:16px; overflow:hidden; box-shadow: 0 2px 10px rgba(0,0,0,.04); display:flex; flex-direction:column; }
.card img { width:100%; height:200px; object-fit:cover; }
.card-body { padding:16px; }
.card h3 { margin:0 0 6px; font-size: 18px; }
.card p { margin:0 0 10px; color: var(--muted); }
.card .meta { font-size: 13px; color: var(--muted); margin-top:auto; padding-top:10px; }

/* Impact counters */
.counters { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; }
.counter { background:#fff; border:1px solid #eee; border-radius:16px; padding:22px; text-align:center; }
.counter .num { font-weight:800; font-size: clamp(22px, 3.6vw, 40px); color: var(--secondary); }
.counter .label { color: var(--muted); font-size:14px; }

/* Footer */
.site-footer { background:#0b1c33; color:#cfd6e4; }
.site-footer .widgets { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:22px; padding: 36px 16px; }
.site-footer a { color:#e6ecff; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.site-footer .copyright { border-top:1px solid rgba(255,255,255,.1); text-align:center; padding:14px; font-size:14px; color:#aab3c7; }
@media (max-width: 900px) { .site-footer .widgets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .site-footer .widgets { grid-template-columns: 1fr; } }

/* Gutenberg tweaks */
.wp-block-button__link { background: var(--primary); border-radius:999px; }
.alignwide { max-width: 1200px; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }