/*
Theme Name: MHRI Sister to Sister
Theme URI: https://example.org/mhri
Author: Maternal Health Resilience Initiative
Description: A responsive WordPress theme for the Maternal Health Resilience Initiative (MHRI) and its Sister to Sister Maternal Support Network, an initiative of the National Health Fellows Cohort 2.0 representing Etsako East LGA, Edo State.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: mhri
*/

:root {
  --mhri-purple: #4b206f;
  --mhri-purple-dark: #2f1248;
  --mhri-green: #087a3f;
  --mhri-green-dark: #07542f;
  --mhri-orange: #ef7f1a;
  --mhri-cream: #fffaf4;
  --mhri-ink: #17202a;
  --mhri-muted: #667085;
  --mhri-border: #e6e8ec;
  --mhri-white: #ffffff;
  --mhri-shadow: 0 18px 45px rgba(31, 24, 48, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--mhri-ink);
  background: var(--mhri-white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
a { color: var(--mhri-purple); text-decoration: none; }
a:hover { color: var(--mhri-orange); }
img { max-width: 100%; height: auto; }
.container { width: min(1160px, calc(100% - 36px)); margin-inline: auto; }
.site-main { min-height: 60vh; }
.section { padding: 76px 0; }
.section-sm { padding: 48px 0; }
.section-alt { background: #f7f8fa; }
.section-cream { background: var(--mhri-cream); }
.section-kicker { color: var(--mhri-orange); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; }
.section-title { margin: 8px 0 16px; color: var(--mhri-purple-dark); font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.08; }
.section-intro { max-width: 760px; color: var(--mhri-muted); font-size: 1.08rem; }

.topbar { background: var(--mhri-green-dark); color: #fff; font-size: .9rem; }
.topbar-inner { min-height: 38px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.topbar a { color: #fff; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--mhri-border); backdrop-filter: blur(12px); }
.header-inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand img { width: 70px; height: 54px; object-fit: cover; border-radius: 7px; border: 1px solid #dfe6e2; }
.brand-copy strong { display: block; color: var(--mhri-purple-dark); font-size: 1rem; line-height: 1.2; }
.brand-copy span { display: block; color: var(--mhri-green); font-size: .78rem; font-weight: 700; line-height: 1.35; }
.primary-nav ul { list-style: none; display: flex; align-items: center; gap: 23px; padding: 0; margin: 0; }
.primary-nav a { color: var(--mhri-ink); font-weight: 700; font-size: .94rem; }
.primary-nav .menu-item-cta a { display: inline-flex; align-items: center; padding: 11px 18px; color: #fff; background: var(--mhri-orange); border-radius: 999px; }
.menu-toggle { display: none; border: 0; background: transparent; font-size: 1.7rem; cursor: pointer; }

.hero { position: relative; min-height: 700px; display: grid; align-items: center; overflow: hidden; color: #fff; background: linear-gradient(90deg, rgba(36,13,57,.95) 0%, rgba(48,19,75,.86) 44%, rgba(6,84,47,.35) 100%), url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=1800&q=85') center/cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 150px; background: linear-gradient(transparent, rgba(0,0,0,.2)); }
.hero-content { position: relative; z-index: 2; max-width: 850px; padding: 90px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.36); background: rgba(255,255,255,.11); border-radius: 999px; font-weight: 800; font-size: .84rem; letter-spacing: .03em; }
.hero h1 { margin: 22px 0 16px; font-size: clamp(3rem, 7vw, 6.2rem); line-height: .98; letter-spacing: -.045em; }
.hero h1 span { color: #ffc17f; }
.hero-subtitle { max-width: 780px; font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.9); }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 48px; padding: 12px 21px; border-radius: 999px; font-weight: 800; border: 2px solid transparent; transition: .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--mhri-orange); color: #fff; }
.btn-secondary { color: #fff; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); }
.btn-green { color: #fff; background: var(--mhri-green); }

.identity-strip { margin-top: -46px; position: relative; z-index: 5; }
.identity-card { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; padding: 24px; background: #fff; box-shadow: var(--mhri-shadow); border-radius: 18px; }
.identity-card img { border-radius: 12px; }
.identity-card h2 { margin: 0 0 6px; color: var(--mhri-purple-dark); font-size: 1.4rem; }
.identity-card p { margin: 0; color: var(--mhri-muted); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.card { background: #fff; border: 1px solid var(--mhri-border); border-radius: 18px; padding: 26px; box-shadow: 0 8px 30px rgba(16,24,40,.05); }
.card h3 { margin-top: 0; color: var(--mhri-purple-dark); }
.icon-badge { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #edf8f1; color: var(--mhri-green); font-size: 1.35rem; font-weight: 900; margin-bottom: 16px; border: 3px solid #d1eddc; }
.photo-panel { min-height: 490px; border-radius: 24px; box-shadow: var(--mhri-shadow); background: url('https://images.unsplash.com/photo-1538108149393-fbbd81895907?auto=format&fit=crop&w=1200&q=85') center/cover no-repeat; }

.stat-band { background: var(--mhri-purple-dark); color: #fff; }
.stat { text-align: center; padding: 12px; }
.stat strong { display: block; font-size: clamp(2rem, 4vw, 3.2rem); color: #ffc17f; line-height: 1; }
.stat span { display: block; margin-top: 8px; color: rgba(255,255,255,.82); font-weight: 700; }

.steps { counter-reset: step; }
.step { position: relative; padding-left: 82px; min-height: 74px; }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--mhri-green); font-size: 1.35rem; font-weight: 900; box-shadow: 0 0 0 7px #e6f5ed; }
.step h3 { margin-bottom: 6px; }

.facility-list { columns: 2; column-gap: 30px; padding-left: 0; list-style: none; }
.facility-list li { break-inside: avoid; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--mhri-border); border-left: 4px solid var(--mhri-green); border-radius: 8px; background: #fff; }

.cta { border-radius: 26px; padding: 50px; color: #fff; background: linear-gradient(125deg, var(--mhri-purple-dark), var(--mhri-purple) 55%, var(--mhri-green)); box-shadow: var(--mhri-shadow); }
.cta h2 { margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3.3rem); }

.page-hero { padding: 82px 0; color: #fff; background: linear-gradient(120deg, var(--mhri-purple-dark), var(--mhri-green-dark)); }
.page-hero h1 { margin: 0; font-size: clamp(2.5rem, 5vw, 4.7rem); line-height: 1.05; }
.content-area { padding: 68px 0; }
.entry-content { max-width: 850px; margin: auto; }
.entry-content h2, .entry-content h3 { color: var(--mhri-purple-dark); }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: 13px; border: 1px solid var(--mhri-border); vertical-align: top; }
.entry-content th { color: #fff; background: var(--mhri-purple); }

.site-footer { color: rgba(255,255,255,.82); background: #17101d; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding: 62px 0 38px; }
.site-footer h3, .site-footer h4 { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(255,255,255,.82); }
.footer-bottom { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .9rem; }

.notice { padding: 14px 16px; border-left: 5px solid var(--mhri-orange); background: #fff6ed; border-radius: 8px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .primary-nav { display: none; position: absolute; inset: 86px 0 auto; background: #fff; border-bottom: 1px solid var(--mhri-border); box-shadow: var(--mhri-shadow); }
  .primary-nav.open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; padding: 20px; gap: 8px; }
  .primary-nav a { display: block; padding: 10px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .topbar-inner { flex-direction: column; justify-content: center; padding: 8px 0; text-align: center; }
  .brand-copy strong { font-size: .88rem; }
  .brand-copy span { display: none; }
  .hero { min-height: 640px; }
  .identity-card { grid-template-columns: 1fr; }
  .identity-card img { max-width: 240px; }
  .grid-2, .grid-3, .grid-4, .footer-grid { grid-template-columns: 1fr; }
  .facility-list { columns: 1; }
  .cta { padding: 34px 24px; }
  .section { padding: 58px 0; }
}

/* Administrator access */
.admin-access {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-left: .75rem;
  white-space: nowrap;
}

.admin-login-link,
.admin-logout-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .6rem .9rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.admin-login-link {
  background: var(--mhri-purple, #51246f);
  color: #fff;
}

.admin-logout-link {
  border: 1px solid currentColor;
  color: var(--mhri-purple, #51246f);
}

.mhri-login-panel {
  width: min(100%, 560px);
  margin: 3rem auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: #fff;
  border: 1px solid #e6e6ea;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(30, 25, 45, .09);
}

.mhri-login-panel h2 {
  margin-top: .25rem;
}

.mhri-login-panel label {
  display: block;
  margin-bottom: .35rem;
  font-weight: 700;
}

.mhri-login-panel input[type="text"],
.mhri-login-panel input[type="password"] {
  width: 100%;
  min-height: 48px;
  padding: .7rem .8rem;
  border: 1px solid #cfd2d8;
  border-radius: 9px;
}

.mhri-login-panel .login-remember label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 500;
}

.mhri-login-panel .login-submit input {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 9px;
  background: var(--mhri-orange, #ef7d22);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.mhri-login-help,
.mhri-security-note {
  margin-bottom: 0;
}

.mhri-security-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ececf0;
  color: #5d6470;
  font-size: .92rem;
}

.mhri-login-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

@media (max-width: 980px) {
  .admin-access {
    margin: .75rem 0 0;
  }
}