/*
Theme Name: HAPEI
Theme URI: https://hapeiglobal.org
Author: Megaone (Geeaig Digital Services)
Author URI: https://geeaig.com
Description: A purpose built WordPress platform for the Humanitarian Advocacy Peace and Education Initiative. Content architecture for programs, events, jobs, volunteering, team members and ambassadors, with member logins, no-code admin, and Nigerian payment and SMS integrations.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hapei
*/

/* =========================================================
   HAPEI DESIGN TOKENS
   Brand: Humanitarian Advocacy Peace and Education Initiative
   ========================================================= */
:root{
  /* Brand */
  --hp-red:#E10D0D;
  --hp-flame:#FF4B2B;
  --hp-deep:#A40000;
  --hp-ink:#1A0B0B;
  --hp-slate:#5A4B4B;
  --hp-line:#EadFdF;
  --hp-mist:#FBF6F5;
  --hp-cream:#FFFFFF;
  --hp-gold:#F5A623;

  /* Type */
  --hp-display:"Outfit", system-ui, sans-serif;
  --hp-body:"Inter", system-ui, sans-serif;

  /* Scale */
  --hp-step--1:clamp(.82rem,.78rem + .2vw,.9rem);
  --hp-step-0:clamp(1rem,.95rem + .25vw,1.12rem);
  --hp-step-1:clamp(1.25rem,1.1rem + .6vw,1.6rem);
  --hp-step-2:clamp(1.6rem,1.3rem + 1.2vw,2.4rem);
  --hp-step-3:clamp(2.1rem,1.6rem + 2.2vw,3.6rem);
  --hp-step-4:clamp(2.8rem,1.9rem + 4vw,5.4rem);

  /* Space */
  --hp-gap:clamp(1rem,2vw,1.6rem);
  --hp-pad:clamp(1.4rem,4vw,4rem);
  --hp-section:clamp(3.5rem,7vw,7rem);
  --hp-wrap:1200px;
  --hp-radius:14px;
  --hp-shadow:0 18px 50px -28px rgba(164,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--hp-body);
  font-size:var(--hp-step-0);
  line-height:1.65;
  color:var(--hp-ink);
  background:var(--hp-cream);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.hp-display{font-family:var(--hp-display);line-height:1.08;font-weight:700;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:var(--hp-step-4)}
h2{font-size:var(--hp-step-3)}
h3{font-size:var(--hp-step-2)}
p{margin:0 0 1.1em}
a{color:var(--hp-red);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

.hp-wrap{max-width:var(--hp-wrap);margin-inline:auto;padding-inline:var(--hp-pad)}
.hp-section{padding-block:var(--hp-section)}
.hp-eyebrow{
  font-family:var(--hp-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:var(--hp-step--1);color:var(--hp-red);
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem
}
.hp-eyebrow::before{content:"";width:26px;height:2px;background:var(--hp-red);display:inline-block}

/* Buttons */
.hp-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--hp-display);font-weight:600;font-size:var(--hp-step-0);
  padding:.85rem 1.6rem;border-radius:100px;border:2px solid var(--hp-red);
  background:var(--hp-red);color:#fff;cursor:pointer;transition:.25s;text-decoration:none
}
.hp-btn:hover{background:var(--hp-deep);border-color:var(--hp-deep);text-decoration:none;transform:translateY(-2px)}
.hp-btn--ghost{background:transparent;color:var(--hp-red)}
.hp-btn--ghost:hover{background:var(--hp-red);color:#fff}
.hp-btn--light{background:#fff;color:var(--hp-red);border-color:#fff}
.hp-btn--light:hover{background:transparent;color:#fff;border-color:#fff}

/* The signature heart-line motif echoes the HAPEI logo */
.hp-heartline{display:block;width:100%;height:auto;color:var(--hp-flame);opacity:.9}

/* Grid helpers */
.hp-grid{display:grid;gap:var(--hp-gap)}
@media(min-width:720px){.hp-grid--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.hp-grid--3{grid-template-columns:repeat(3,1fr)}.hp-grid--4{grid-template-columns:repeat(4,1fr)}}

/* Cards */
.hp-card{
  background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-radius);
  overflow:hidden;transition:.28s;display:flex;flex-direction:column;height:100%
}
.hp-card:hover{transform:translateY(-4px);box-shadow:var(--hp-shadow);border-color:transparent}
.hp-card__media{aspect-ratio:16/10;background:var(--hp-mist);overflow:hidden}
.hp-card__media img{width:100%;height:100%;object-fit:cover;transition:.4s}
.hp-card:hover .hp-card__media img{transform:scale(1.05)}
.hp-card__body{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.hp-card__title{font-family:var(--hp-display);font-weight:700;font-size:var(--hp-step-1);margin:0}
.hp-tag{
  display:inline-block;font-family:var(--hp-display);font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--hp-red);
  background:var(--hp-mist);padding:.3rem .7rem;border-radius:100px;width:fit-content
}

/* Accessibility */
:focus-visible{outline:3px solid var(--hp-flame);outline-offset:3px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}