/*
Theme Name: ARDO Relief
Theme URI: https://ardoorganisation.org
Author: ARDO
Description: A responsive WordPress theme for Aayatin Relief and Development Organization (ARDO), Somalia.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: ardo-relief
Tags: nonprofit, charity, education, health, one-column, two-columns, custom-logo, custom-menu, featured-images, translation-ready
*/

:root {
  --ardo-blue: #0b63c4;
  --ardo-blue-dark: #074b96;
  --ardo-blue-soft: #eaf4ff;
  --ardo-gold: #d99a2b;
  --ardo-gold-dark: #a87314;
  --ardo-red: #ef2f2f;
  --ardo-ink: #172033;
  --ardo-muted: #5f6b7a;
  --ardo-line: #dbe4ee;
  --ardo-surface: #ffffff;
  --ardo-surface-soft: #f6f8fb;
  --ardo-radius: 22px;
  --ardo-shadow: 0 18px 45px rgba(12, 48, 88, 0.12);
  --ardo-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ardo-ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--ardo-blue); text-decoration: none; }
a:hover { color: var(--ardo-blue-dark); }
button, input, textarea, select { font: inherit; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 12px; left: 12px;
  width: auto; height: auto;
  padding: 12px 16px;
  clip: auto;
  background: #fff;
  color: #000;
  z-index: 99999;
  border-radius: 8px;
  box-shadow: var(--ardo-shadow);
}

.ardo-container { width: min(calc(100% - 40px), var(--ardo-width)); margin-inline: auto; }
.ardo-narrow { width: min(calc(100% - 40px), 820px); margin-inline: auto; }
.ardo-section { padding: 88px 0; }
.ardo-section--soft { background: var(--ardo-surface-soft); }
.ardo-section--blue { color: #fff; background: linear-gradient(135deg, var(--ardo-blue-dark), var(--ardo-blue)); }
.ardo-section-title { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; letter-spacing: -0.035em; }
.ardo-section-intro { max-width: 720px; margin: 0 0 36px; color: var(--ardo-muted); font-size: 1.08rem; }
.ardo-section--blue .ardo-section-intro { color: rgba(255,255,255,.82); }
.ardo-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--ardo-blue); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.ardo-eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 99px; background: var(--ardo-gold); }
.ardo-section--blue .ardo-eyebrow { color: #fff; }

.ardo-topbar { background: var(--ardo-blue-dark); color: #fff; font-size: .86rem; }
.ardo-topbar__inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ardo-topbar__contacts, .ardo-topbar__links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ardo-topbar a { color: #fff; opacity: .92; }
.ardo-topbar a:hover { opacity: 1; }

.ardo-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(219,228,238,.85); }
.ardo-header__inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ardo-brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ardo-ink); }
.ardo-brand:hover { color: var(--ardo-ink); }
.ardo-brand__logo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 5px 18px rgba(12,48,88,.14); }
.ardo-brand__text { display: grid; line-height: 1.2; }
.ardo-brand__name { font-weight: 900; font-size: .98rem; letter-spacing: -.01em; }
.ardo-brand__tag { margin-top: 4px; color: var(--ardo-muted); font-size: .75rem; }
.ardo-nav { display: flex; align-items: center; gap: 22px; }
.ardo-menu { display: flex; align-items: center; gap: 6px; padding: 0; margin: 0; list-style: none; }
.ardo-menu li { position: relative; }
.ardo-menu a { display: block; padding: 10px 12px; color: var(--ardo-ink); font-weight: 750; font-size: .94rem; border-radius: 10px; }
.ardo-menu a:hover, .ardo-menu .current-menu-item > a { color: var(--ardo-blue); background: var(--ardo-blue-soft); }
.ardo-menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--ardo-line); border-radius: 12px; background: #fff; cursor: pointer; }
.ardo-menu-toggle span, .ardo-menu-toggle span::before, .ardo-menu-toggle span::after { width: 20px; height: 2px; background: var(--ardo-ink); display: block; position: relative; transition: .2s ease; }
.ardo-menu-toggle span::before, .ardo-menu-toggle span::after { content: ""; position: absolute; left: 0; }
.ardo-menu-toggle span::before { top: -6px; }
.ardo-menu-toggle span::after { top: 6px; }

.ardo-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 20px; border: 1px solid transparent; border-radius: 13px; background: var(--ardo-blue); color: #fff; font-weight: 850; box-shadow: 0 10px 24px rgba(11,99,196,.18); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.ardo-button:hover { color: #fff; background: var(--ardo-blue-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11,99,196,.25); }
.ardo-button--gold { background: var(--ardo-gold); color: #fff; box-shadow: 0 10px 24px rgba(217,154,43,.22); }
.ardo-button--gold:hover { background: var(--ardo-gold-dark); }
.ardo-button--ghost { background: transparent; color: var(--ardo-blue); border-color: var(--ardo-blue); box-shadow: none; }
.ardo-button--ghost:hover { color: #fff; }
.ardo-button--white { background: #fff; color: var(--ardo-blue-dark); box-shadow: none; }
.ardo-button--white:hover { background: #eef6ff; color: var(--ardo-blue-dark); }

.ardo-hero { position: relative; overflow: hidden; padding: 88px 0 72px; background:
  radial-gradient(circle at 80% 20%, rgba(217,154,43,.20), transparent 30%),
  radial-gradient(circle at 8% 70%, rgba(11,99,196,.18), transparent 34%),
  linear-gradient(135deg, #fafdff 0%, #f3f8fe 55%, #fff8eb 100%);
}
.ardo-hero::before, .ardo-hero::after { content: ""; position: absolute; border-radius: 999px; border: 28px solid rgba(11,99,196,.08); }
.ardo-hero::before { width: 340px; height: 340px; right: -140px; top: -120px; }
.ardo-hero::after { width: 240px; height: 240px; left: -130px; bottom: -120px; border-color: rgba(217,154,43,.12); }
.ardo-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 64px; }
.ardo-hero h1 { margin: 0 0 22px; font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: .98; letter-spacing: -.055em; }
.ardo-hero h1 span { color: var(--ardo-blue); }
.ardo-hero__lead { max-width: 710px; margin: 0 0 30px; color: var(--ardo-muted); font-size: clamp(1.05rem, 1.8vw, 1.28rem); }
.ardo-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ardo-hero__visual { position: relative; display: grid; place-items: center; min-height: 430px; }
.ardo-hero__logo-wrap { width: min(100%, 420px); aspect-ratio: 1; padding: 20px; border-radius: 50%; background: rgba(255,255,255,.86); box-shadow: var(--ardo-shadow); border: 1px solid rgba(255,255,255,.9); }
.ardo-hero__logo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ardo-float-card { position: absolute; left: -16px; bottom: 30px; max-width: 250px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: var(--ardo-shadow); border: 1px solid var(--ardo-line); }
.ardo-float-card strong { display: block; color: var(--ardo-blue); font-size: 1.1rem; }
.ardo-float-card span { color: var(--ardo-muted); font-size: .9rem; }

.ardo-statbar { position: relative; z-index: 3; margin-top: -28px; }
.ardo-statbar__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--ardo-shadow); border: 1px solid var(--ardo-line); }
.ardo-stat { padding: 24px 28px; text-align: center; }
.ardo-stat + .ardo-stat { border-left: 1px solid var(--ardo-line); }
.ardo-stat strong { display: block; color: var(--ardo-blue); font-size: 1.35rem; }
.ardo-stat span { color: var(--ardo-muted); font-size: .9rem; }

.ardo-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.ardo-profile-card { position: relative; max-width: 410px; margin-inline: auto; }
.ardo-profile-card img { display: block; width: 100%; border-radius: 26px; box-shadow: var(--ardo-shadow); }
.ardo-profile-card::after { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 3px solid var(--ardo-gold); border-radius: 26px; z-index: -1; }
.ardo-checklist { display: grid; gap: 13px; margin: 26px 0 0; padding: 0; list-style: none; }
.ardo-checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.ardo-checklist li::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ardo-blue-soft); color: var(--ardo-blue); font-weight: 900; }

.ardo-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ardo-card { padding: 28px; border-radius: var(--ardo-radius); background: #fff; border: 1px solid var(--ardo-line); box-shadow: 0 10px 30px rgba(12,48,88,.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ardo-card:hover { transform: translateY(-5px); box-shadow: var(--ardo-shadow); border-color: rgba(11,99,196,.30); }
.ardo-card__icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 16px; background: var(--ardo-blue-soft); color: var(--ardo-blue); font-size: 1.65rem; }
.ardo-card h3 { margin: 0 0 10px; font-size: 1.22rem; }
.ardo-card p { margin: 0; color: var(--ardo-muted); }

.ardo-duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ardo-feature-panel { padding: 34px; border-radius: 24px; background: #fff; border: 1px solid var(--ardo-line); box-shadow: 0 10px 30px rgba(12,48,88,.06); }
.ardo-feature-panel h3 { margin: 0 0 14px; font-size: 1.65rem; }
.ardo-feature-panel p:last-child { margin-bottom: 0; }

.ardo-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ardo-value { padding: 22px; border-radius: 18px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); }
.ardo-value strong { display: block; margin-bottom: 6px; font-size: 1.08rem; }
.ardo-value p { margin: 0; color: rgba(255,255,255,.78); }

.ardo-download { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: center; padding: 48px; border-radius: 28px; color: #fff; background: linear-gradient(135deg, var(--ardo-blue-dark), var(--ardo-blue)); box-shadow: var(--ardo-shadow); overflow: hidden; position: relative; }
.ardo-download::after { content: ""; position: absolute; width: 240px; height: 240px; right: -80px; top: -90px; border: 30px solid rgba(255,255,255,.09); border-radius: 50%; }
.ardo-download h2 { margin: 0 0 12px; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.ardo-download p { margin: 0; color: rgba(255,255,255,.82); }
.ardo-download__actions { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }

.ardo-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ardo-post-card { overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--ardo-line); box-shadow: 0 10px 28px rgba(12,48,88,.06); }
.ardo-post-card__thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--ardo-blue-soft), #fff4da); overflow: hidden; }
.ardo-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ardo-post-card:hover img { transform: scale(1.04); }
.ardo-post-card__body { padding: 22px; }
.ardo-post-card__meta { margin-bottom: 8px; color: var(--ardo-blue); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.ardo-post-card h3 { margin: 0 0 10px; font-size: 1.2rem; line-height: 1.35; }
.ardo-post-card p { margin: 0; color: var(--ardo-muted); }

.ardo-page-hero { padding: 74px 0 56px; color: #fff; background:
  radial-gradient(circle at 85% 20%, rgba(217,154,43,.32), transparent 28%),
  linear-gradient(135deg, var(--ardo-blue-dark), var(--ardo-blue)); }
.ardo-page-hero h1 { max-width: 850px; margin: 0; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: 1.05; letter-spacing: -.045em; }
.ardo-page-hero p { max-width: 720px; margin: 16px 0 0; color: rgba(255,255,255,.82); font-size: 1.12rem; }
.ardo-content { padding: 68px 0; }
.ardo-content article { max-width: 900px; margin: 0 auto; }
.ardo-content h2 { margin-top: 2.3em; font-size: 2rem; line-height: 1.2; }
.ardo-content h3 { margin-top: 1.8em; font-size: 1.35rem; }
.ardo-content p, .ardo-content li { color: #374356; }
.ardo-content ul, .ardo-content ol { padding-left: 1.35rem; }
.ardo-content blockquote { margin: 2rem 0; padding: 22px 28px; border-left: 5px solid var(--ardo-gold); background: var(--ardo-surface-soft); border-radius: 0 16px 16px 0; }
.ardo-content img { border-radius: 18px; }
.ardo-content .ardo-card-grid, .ardo-content .ardo-duo-grid { max-width: none; }
.ardo-content .ardo-card h3, .ardo-content .ardo-feature-panel h3 { margin-top: 0; }

.ardo-structure { padding: 26px; border-radius: 20px; background: #fff; border: 1px solid var(--ardo-line); box-shadow: var(--ardo-shadow); }
.ardo-structure img { width: 100%; border-radius: 12px; }

.ardo-contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 38px; align-items: start; }
.ardo-contact-list { display: grid; gap: 14px; }
.ardo-contact-item { padding: 18px; border-radius: 16px; background: var(--ardo-surface-soft); border: 1px solid var(--ardo-line); }
.ardo-contact-item strong { display: block; margin-bottom: 4px; }
.ardo-form { padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--ardo-line); box-shadow: 0 12px 34px rgba(12,48,88,.08); }
.ardo-form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ardo-field { margin-bottom: 16px; }
.ardo-field label { display: block; margin-bottom: 7px; font-weight: 800; }
.ardo-field input, .ardo-field textarea { width: 100%; padding: 13px 14px; border: 1px solid #cbd7e5; border-radius: 11px; background: #fff; color: var(--ardo-ink); }
.ardo-field input:focus, .ardo-field textarea:focus { outline: 3px solid rgba(11,99,196,.13); border-color: var(--ardo-blue); }
.ardo-field textarea { min-height: 160px; resize: vertical; }
.ardo-notice { margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; }
.ardo-notice--success { color: #14532d; background: #dcfce7; border: 1px solid #86efac; }
.ardo-notice--error { color: #7f1d1d; background: #fee2e2; border: 1px solid #fca5a5; }

.ardo-footer { margin-top: 0; color: rgba(255,255,255,.82); background: #0a2240; }
.ardo-footer__main { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 46px; padding: 62px 0 40px; }
.ardo-footer h3 { margin: 0 0 15px; color: #fff; font-size: 1.05rem; }
.ardo-footer p { margin: 0 0 12px; }
.ardo-footer a { color: rgba(255,255,255,.82); }
.ardo-footer a:hover { color: #fff; }
.ardo-footer__brand { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; color: #fff; }
.ardo-footer__brand img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #fff; }
.ardo-footer__brand strong { display: block; }
.ardo-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ardo-footer__bottom { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; }
.ardo-footer__bottom-inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

.navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; background: var(--ardo-surface-soft); border: 1px solid var(--ardo-line); }
.page-numbers.current { color: #fff; background: var(--ardo-blue); border-color: var(--ardo-blue); }

@media (max-width: 980px) {
  .ardo-topbar__links { display: none; }
  .ardo-menu-toggle { display: inline-flex; }
  .ardo-nav { position: fixed; inset: 120px 20px auto; display: none; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--ardo-line); box-shadow: var(--ardo-shadow); }
  .ardo-nav.is-open { display: block; }
  .ardo-menu { display: grid; gap: 4px; }
  .ardo-header .ardo-button { display: none; }
  .ardo-hero__grid, .ardo-split, .ardo-download, .ardo-contact-grid { grid-template-columns: 1fr; }
  .ardo-hero__grid { gap: 34px; }
  .ardo-hero__visual { min-height: 360px; }
  .ardo-float-card { left: 0; }
  .ardo-card-grid, .ardo-post-grid { grid-template-columns: repeat(2, 1fr); }
  .ardo-values { grid-template-columns: repeat(2, 1fr); }
  .ardo-download__actions { justify-content: flex-start; }
  .ardo-footer__main { grid-template-columns: 1fr 1fr; }
  .ardo-footer__main > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .ardo-container, .ardo-narrow { width: min(calc(100% - 28px), var(--ardo-width)); }
  .ardo-section { padding: 64px 0; }
  .ardo-topbar__inner { min-height: 44px; }
  .ardo-topbar__contacts { gap: 10px; }
  .ardo-topbar__contacts span:nth-child(n+2) { display: none; }
  .ardo-header__inner { min-height: 72px; }
  .ardo-brand__logo { width: 52px; height: 52px; }
  .ardo-brand__tag { display: none; }
  .ardo-brand__name { max-width: 190px; font-size: .86rem; }
  .ardo-nav { inset: 116px 14px auto; }
  .ardo-hero { padding: 64px 0 52px; }
  .ardo-hero__visual { min-height: 310px; }
  .ardo-float-card { position: static; margin-top: 14px; }
  .ardo-statbar { margin-top: 16px; }
  .ardo-statbar__grid { grid-template-columns: 1fr; }
  .ardo-stat + .ardo-stat { border-left: 0; border-top: 1px solid var(--ardo-line); }
  .ardo-card-grid, .ardo-post-grid, .ardo-duo-grid, .ardo-values, .ardo-footer__main, .ardo-form-row { grid-template-columns: 1fr; }
  .ardo-footer__main > :first-child { grid-column: auto; }
  .ardo-download { padding: 32px 24px; }
  .ardo-profile-card::after { inset: 10px -8px -8px 10px; }
  .ardo-page-hero { padding: 58px 0 44px; }
}