/*
Theme Name:  ORTIGPS BeTheme Child
Description: OR Tambo Institute of Governance and Policy Studies - UNIVEN
Template:    betheme
Version:     2.0.0
Author:      Earlybirds Corporation
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================================
   ORTIGPS DESIGN SYSTEM v1.2
   Font: Inter (UNIVEN standard)
   Navy #1B2B5E · Gold #C9A84C
   ========================================================= */
:root {
  --navy:      #1B2B5E;
  --navy-d:    #111E45;
  --navy-l:    #2E4080;
  --navy-dim:  rgba(27,43,94,0.08);
  --gold:      #C9A84C;
  --gold-d:    #A07C2A;
  --gold-l:    #E2C97A;
  --gold-bg:   #FBF6EC;
  --ink:       #0A0A0A;
  --bg:        #FFFFFF;
  --bg2:       #FAFAFA;
  --tx:        #1A1A1A;
  --txm:       #4A4A4A;
  --txmu:      #6B6B6B;
  --txl:       #9A9A9A;
  --bd:        #E5E5E5;
  --sh-sm:     0 2px 12px rgba(0,0,0,0.05);
  --sh-md:     0 8px 32px rgba(0,0,0,0.10);
  --rad:       8px;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ortigps-page {
  font-family: 'Inter', sans-serif;
  color: var(--tx); background: var(--bg); margin: 0;
}
/* No italic on any heading — ever */
body.ortigps-page h1,
body.ortigps-page h2,
body.ortigps-page h3,
body.ortigps-page h4 {
  font-family: 'Inter', sans-serif;
  font-style: normal !important;
}

/* ── Topbar ─────────────────────────────────────────────── */
.fm-topbar {
  background: var(--navy-d);
  color: rgba(255,255,255,.7);
  font-size: 12px; padding: 7px 40px;
  display: flex; justify-content: space-between; align-items: center;
}
.fm-topbar a { color: rgba(255,255,255,.7); text-decoration: none; }
.fm-topbar a:hover { color: var(--gold-l); }
.topbar-right { display: flex; gap: 20px; }
.topbar-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 3px;
}

/* ── Nav ────────────────────────────────────────────────── */
#fm-nav {
  position: sticky; top: 0; z-index: 999;
  background: #fff; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 72px; box-shadow: var(--sh-sm);
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.ortigps-page .nav-logo img {
  display: block; height: 52px !important; width: auto !important;
  max-width: none !important; object-fit: contain;
  background: transparent; padding: 0; margin: 0; border: none;
}
.nav-links { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav-links a {
  font-size: 13px; font-weight: 500; color: var(--txm);
  text-decoration: none; padding: 8px 14px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--gold-bg); color: var(--navy); }
.live-btn {
  display: inline-block; font-size: 13px; font-weight: 700;
  padding: 9px 20px; border-radius: 6px; text-decoration: none;
  letter-spacing: .02em; transition: opacity .15s;
}
.live-btn:hover { opacity: .85; }

/* ── Hamburger ──────────────────────────────────────────── */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--navy); border-radius: 2px;
}

/* ── Mobile menu ────────────────────────────────────────── */
.fm-mobile-menu {
  display: none; position: fixed; inset: 72px 0 0;
  background: #fff; z-index: 998; padding: 24px;
  flex-direction: column; gap: 4px; overflow-y: auto;
}
.fm-mobile-menu.open { display: flex; }
.fm-mobile-menu a {
  font-size: 16px; font-weight: 600; color: var(--ink);
  text-decoration: none; padding: 14px 16px; border-radius: 8px;
  border-bottom: 1px solid var(--bd);
  display: flex; justify-content: space-between; align-items: center;
}
.fm-mobile-menu a:hover { background: var(--gold-bg); color: var(--navy); }

/* ── Layout helpers ─────────────────────────────────────── */
.sec { padding: 96px 0; }
.sec-in { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* Row = flex row on desktop, column on mobile — right col always drops below */
.em-row {
  display: flex;
  flex-direction: row;
  gap: 72px;
  align-items: center;
}
.em-row .em-col-text  { flex: 1.2; min-width: 0; }
.em-row .em-col-media { flex: 1;   min-width: 0; }
/* Image always on right by default; left variant swaps order */
.em-row.img-left .em-col-media { order: -1; }

/* Section image */
.em-sec-img {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sh-md);
  width: 100%;
  aspect-ratio: 3/2;
  position: relative;
}
.em-sec-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.slbl {
  font-family:'Inter',sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-d); margin-bottom: 12px;
}
.stit {
  font-size: clamp(26px,3.5vw,42px); font-weight: 800;
  font-style: normal !important;
  color: var(--ink); line-height: 1.15;
  letter-spacing: -.02em; margin-bottom: 24px;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: #fff; border: 1px solid var(--bd);
  border-radius: var(--rad); padding: 28px;
  box-shadow: var(--sh-sm); transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }

/* ── Hero ───────────────────────────────────────────────── */
.fm-hero { position: relative; overflow: hidden; padding: 100px 0 88px; }
.fm-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
}
/*
  HERO OVERLAY — adjust the rgba alpha values to control brightness.
  Left side (text area): 0.90 = quite dark. Right side: 0.55 = lighter.
  To make the whole hero darker, increase all three alpha values.
  To make it lighter, decrease them — minimum ~0.45 for readable text.
*/
.fm-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    120deg,
    rgba(17,30,69,0.90) 0%,
    rgba(27,43,94,0.82) 45%,
    rgba(27,43,94,0.55) 100%
  );
}
.fm-hero::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 80px; background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none; z-index: 2;
}

/* ── Buttons ────────────────────────────────────────────── */
a.bg, button.bg {
  display: inline-block; background: var(--gold);
  color: var(--navy-d) !important; font-size: 14px; font-weight: 700;
  padding: 13px 26px; border-radius: 6px; text-decoration: none;
  letter-spacing: .02em; border: none; cursor: pointer;
  transition: background .15s, transform .1s; font-style: normal !important;
}
a.bg:hover, button.bg:hover { background: var(--gold-l); transform: translateY(-1px); }
a.bo, button.bo {
  display: inline-block; background: transparent;
  font-size: 14px; font-weight: 700; padding: 12px 24px;
  border-radius: 6px; border: 1.5px solid currentColor;
  text-decoration: none; letter-spacing: .02em; cursor: pointer;
  transition: opacity .15s; font-style: normal !important;
}
a.bo:hover, button.bo:hover { opacity: .75; }

/* ── Footer ─────────────────────────────────────────────── */
.fm-footer {
  background: var(--navy-d); color: rgba(255,255,255,.75);
  padding: 64px 0 32px; font-size: 14px;
}
.fm-footer a { color: rgba(255,255,255,.6); text-decoration: none; }
.fm-footer a:hover { color: var(--gold-l); }
.fm-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 48px; padding-top: 24px;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: rgba(255,255,255,.4);
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 960px) {
  /* Nav */
  .nav-links, #fm-nav .live-btn { display: none; }
  .hamburger { display: flex; }
  #fm-nav { padding: 0 20px; }
  .fm-topbar { padding: 7px 20px; font-size: 11px; }
  .topbar-right { display: none; }

  /* Sections */
  .sec { padding: 56px 0; }
  .sec-in { padding: 0 20px; }

  /* em-row: stack vertically, media always goes BELOW text */
  .em-row {
    flex-direction: column;
    gap: 32px;
  }
  /* Reset img-left order on mobile — media still goes after text */
  .em-row.img-left .em-col-media { order: 0; }
  /* Both columns full width */
  .em-row .em-col-text,
  .em-row .em-col-media { flex: none; width: 100%; }

  /* Hero stacks too */
  .fm-hero { padding: 64px 0 56px; }
  .em-hero-grid {
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* 2-col grids become 1-col */
  .em-grid-2 { grid-template-columns: 1fr !important; }
  .em-grid-3 { grid-template-columns: 1fr 1fr !important; }
  .em-grid-4 { grid-template-columns: 1fr 1fr !important; }

  /* Vision/mission cards stack */
  .em-vm-grid { grid-template-columns: 1fr !important; }

  .stit { font-size: clamp(24px, 6vw, 34px); }
}

@media (max-width: 600px) {
  .em-grid-3,
  .em-grid-4 { grid-template-columns: 1fr !important; }
  .fm-footer .em-footer-grid { grid-template-columns: 1fr !important; }
}


/* =========================================================
   WORDPRESS MENUS + CONTENT EDITOR FRONTEND
   ========================================================= */
.nav-links > li{position:relative}
.nav-links .sub-menu{
  display:none;position:absolute;top:100%;left:0;min-width:230px;
  list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--bd);
  border-top:3px solid var(--gold);border-radius:0 0 8px 8px;box-shadow:var(--sh-md);z-index:1000;
}
.nav-links > li:hover > .sub-menu,.nav-links > li:focus-within > .sub-menu{display:block}
.nav-links .sub-menu li{margin:0;padding:0}
.nav-links .sub-menu a{display:block;white-space:nowrap;padding:10px 12px}
.nav-links .menu-item-has-children>a::after{content:'›';display:inline-block;margin-left:6px;transform:rotate(90deg)}
.fm-mobile-menu ul{list-style:none;margin:0;padding:0;width:100%}
.fm-mobile-menu .sub-menu{list-style:none;margin:0 0 4px 16px;padding:0;border-left:2px solid var(--bd)}
.fm-mobile-menu .sub-menu a{font-size:14px;padding:10px 14px;border-bottom:0}
.fm-mobile-menu .current-menu-item>a{background:var(--gold-bg);color:var(--navy)}
.ortigps-richtext{font-size:16px;color:var(--txm);line-height:1.85}
.ortigps-richtext p{margin:0 0 1em}
.ortigps-extra-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ortigps-extra-image img{width:100%;height:auto;border-radius:12px;display:block}
.ortigps-team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px}
.ortigps-person-photo{width:64px;height:64px;border-radius:50%;overflow:hidden;margin-bottom:14px}
.ortigps-person-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:960px){
  .ortigps-extra-grid,.ortigps-team-grid{grid-template-columns:1fr}
  .ortigps-extra-grid.image-left .ortigps-extra-image,.ortigps-extra-grid.image-right .ortigps-extra-image{order:0}
  .ortigps-extra-grid .ortigps-extra-copy{order:1}
}

.ortigps-footer-links{list-style:none;margin:0;padding:0}
.ortigps-footer-links li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07);margin:0}