/* ================================
   KANU – Global Variables
================================ */
:root{
  --kanu-purple: #37251C;
  --kanu-purple-dark: #7f6ec8;
  --ink: #1a1a1a;
  --muted: #666;
  --bg: #ffffff;

  --footer-bg: #37251C;     /* deep “thick” purple */
  --footer-accent: #c8a2c8; /* light purple accent */

  --header-h: 120px;        /* fallback; JS keeps it accurate */
}

/* ================================
   Base / Resets
================================ */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ================================
   Header (Fixed)
================================ */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--kanu-purple);
  color: #fff;
  border-bottom: 1px solid color-mix(in oklab, var(--kanu-purple) 80%, #0000);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  width: 100%;
  height: 145px;
}
.nav-wrap{
  position: relative;
  max-width: none;
  margin: 0;
  width: 95%;
  padding: 2px clamp(16px, 4vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--header-h);
}
.logo{ width: 140px; min-width: 120px; }
.logo img{ border-radius: 5%; }

.right-cluster{ display: flex; align-items: center; gap: 18px; }

.menu{ display: flex; gap: 16px; flex-wrap: wrap; font-weight: 600; }
.menu a{ padding: 10px 12px; border-radius: 10px; color: #fff; }
.menu a:hover{ background: color-mix(in oklab, #ffffff 16%, var(--kanu-purple)); }
.menu a.active{
  background: #6a6969; /* Active menu item background */
  backdrop-filter: saturate(120%) blur(2px);
}

.lang{ display: flex; gap: 8px; align-items: center; }
.lang a{
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  font-size: 14px;
  color: #fff;
}
.lang a.active{ background: #fff; color: var(--kanu-purple); border-color: #fff; }

.hamburger{
  display: none;
  border: 1px solid rgba(255,255,255,.6);
  color: #fff;
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

/* Mobile nav */
@media (max-width:900px){
  .menu{
    display: none;
    position: absolute;
    right: 16px; left: 16px;
    top: calc(var(--header-h) + 8px);
    background: #fff; color: var(--ink);
    border: 1px solid #eee; border-radius: 14px; padding: 10px;
  }
  .menu a{ color: var(--ink); }
  .menu.open{ display: flex; flex-direction: column; }

  .hamburger{ display: inline-block; }
  .nav-wrap{ align-items: flex-start; }
  .logo{ width: 120px; }
  .right-cluster{ margin-left: auto; }
}

/* ================================
   Sections & Container
================================ */
section{
  width: 100%;
  padding: 64px 16px;            /* base padding */
  padding-block: 64px;           /* keep vertical rhythm explicit */
}
.container{
  max-width: 1200px;
  margin: 0 auto;
}
.muted{ color: var(--muted); }

/* Full-bleed override for all .container inside sections */
.container, section > .container, section .container{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: clamp(12px, 4vw, 48px);
  padding-right: clamp(12px, 4vw, 48px);
}

/* ================================
   Hero
================================ */
.hero{
  position: relative;
  min-height: 88vh;
  width: 100%;
  display: grid; place-items: center;
  text-align: center; color: #fff; overflow: hidden;
  z-index: 0;
}
.hero .bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}
.hero::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index: 1;
}
.hero-inner{ position: relative; z-index: 2; max-width: 1000px; padding: 0 16px; }
.hero h1{ font-size: clamp(28px,5vw,56px); margin: 0 0 10px; }
.hero p{ font-size: clamp(16px,2.2vw,22px); margin: 0 0 24px; color: #f4f4f4; }

.cta{
  display: inline-block; padding: 12px 20px; border-radius: 12px;
  background: var(--kanu-purple); color: #fff; font-weight: 700;
  border: 1px solid var(--kanu-purple-dark);
}
.cta:hover{ background: var(--kanu-purple-dark); }

.hero-curve{ position: absolute; left: 0; right: 0; bottom: -1px; height: 80px; width: 100%; }
.hero-curve svg{ width: 100%; height: 100%; display: block; }

/* ================================
   Strategic Pillars
================================ */
.pillars{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.card{
  border: 1px solid #eee; border-radius: 16px; padding: 18px; background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); }

/* Pillars background section (optional) */
.pillars-section{
  position: relative;
  background:
    /* light overlay for dark text */
    linear-gradient(0deg, rgba(255,255,255,.76), rgba(255,255,255,.76)),
    url('resources/images/bg-pillars.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ink);
}

/* Subtle lift for cards on image */
.pillars .card{
  backdrop-filter: blur(2px);
  background: rgba(255,255,255,.92);
}

/* ================================
   Publications
================================ */
.pubs{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.pub{ border: 1px solid #eee; border-radius: 16px; overflow: hidden; background: #fff; }
.pub .thumb{
  aspect-ratio: 16/9;
  background: #f0eaff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid #eee;
}
.pub .body{ padding: 14px; }
.pub h4{ margin: 0 0 8px; }
.pub a.btn{
  display: inline-block; margin-top: 6px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--kanu-purple); color: var(--kanu-purple);
}
.pub a.btn:hover{ background: #f7f4ff; }

/* action row helper (used in several sections) */
.section-actions{
  margin-top: 12px;
  text-align: right;
}

/* ================================
   Academy & Donate (panels/buttons)
================================ */
.cta-band{
  display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: stretch;
}
@media (max-width:900px){ .cta-band{ grid-template-columns: 1fr; } }

.panel{
  border: 1px solid #eee; border-radius: 16px; padding: 22px;
  background: linear-gradient(180deg,#fff, #fbfaff);
}
.panel h3{ margin: 0 0 10px; }
.actions{ display: flex; gap: 10px; flex-wrap: wrap; }

.btn-primary{
  padding: 10px 14px; border-radius: 12px; background: var(--kanu-purple); color: #fff;
  border: 1px solid var(--kanu-purple-dark); font-weight: 700;
}
.btn-primary:hover{ background: var(--kanu-purple-dark); }
.btn-outline{
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--kanu-purple);
  color: var(--kanu-purple); font-weight: 700; background: #fff;
}
.btn-outline:hover{ background: #f7f4ff; }

/* ================================
   Partners Logos Marquee
================================ */
.partners-strip{
  width: 100%;
  overflow: hidden;
  background: #f7f4ff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.partners-strip .track{
  display: inline-flex; align-items: center; gap: 48px;
  padding: 14px clamp(16px, 4vw, 48px);
  animation: partners-scroll 28s linear infinite;
  will-change: transform;
}
@keyframes partners-scroll{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Make partner logos natural color and ~2x bigger */
.partners-strip img{
  height: 100px;         /* was 80px */
  width: auto;
  filter: none;          /* remove grayscale */
}

/* Keep hover without changing color */
.partners-strip img:hover{
  filter: none;
}


/* ================================
   Enhanced Footer + Legacy Footer
================================ */
.site-footer{
  width: 100%;
  background: var(--footer-bg);
  color: #fff;
  padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 48px);
}
.site-footer .footer-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
  max-width: none;
}
@media (max-width:900px){
  .site-footer .footer-grid{ grid-template-columns: 1fr; }
}

.footer-brand img{ height: 56px; border-radius: 6%; display: block; margin-bottom: 10px; }
.footer-brand .note{ color: #efecf7; opacity: .9; margin-top: 6px; }

.footer-heading{ font-weight: 800; letter-spacing: .3px; margin: 0 0 10px; color: #fff; }
.footer-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-list a{ color: #fff; opacity: .9; }
.footer-list a:hover{ opacity: 1; text-decoration: underline; }

.contact-item{ display: flex; gap: 10px; align-items: flex-start; opacity: .95; }
.contact-item svg{ flex: 0 0 18px; margin-top: 4px; }

.footer-bottom{
  margin-top: clamp(18px, 3vw, 28px);
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, #ffffff 20%, transparent);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  color: #f5effa; opacity: .95;
}

.socials{ display: flex; gap: 12px; }
.socials a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: color-mix(in oklab, var(--footer-accent) 25%, #0000);
  color: #fff;
}
.socials a:hover{ background: var(--footer-accent); }

/* Simple legacy footer (kept for compatibility) */
footer{
  padding: 28px 16px;
  border-top: 1px solid #eee;
  color: #777;
  text-align: center;
  width: 100%;
}

/* ================================
   Academy & Events – Equal Split
   (Left: Recent Events, Right: Programs)
================================ */
.academy-events.equal-split{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr; /* equal halves */
  gap: 28px;
  align-items: start;
}

/* Center divider (desktop) */
.academy-events.equal-split::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(to bottom, transparent, #dddddd, transparent);
  pointer-events: none;
}

/* Prevent column overflow so items don't cross the divider */
.academy-events.equal-split > * { min-width: 0; }

/* Optional safety: clip any accidental overflow inside each column */
.events-col,
.programs-col { overflow: hidden; }

.academy-events .subhead{
  margin: 0 0 10px;
  font-weight: 800;
}

/* ============== Events ============== */
.events-grid{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.event-card{
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  display: grid;
  gap: 6px;
  position: relative;
}
.event-card:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.event-date{
  font-size: 13px;
  font-weight: 700;
  color: var(--kanu-purple);
  background: #f7f4ff;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
}
.event-title{ margin: 6px 0 2px; }
.event-meta{ margin: 0; }

/* Event item CTA — unify to KANU purple */
.event-link{
  position: absolute;
  right: 12px; bottom: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  color: var(--kanu-purple);
  border: 1px solid var(--kanu-purple-dark);
}
.event-link:hover{ background: var(--kanu-purple-dark); }

/* ============== Programs ============== */
/* Multi-row grid (replaces horizontal scroll) */
.programs-scroll{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  overflow: visible;
  padding: 0;
  max-width: 100%;
}
.program-card{
  min-width: 0;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(180deg, #fff, #fbfaff);
  display: grid;
  gap: 6px;
}
.program-title{ margin: 2px 0; }
.program-meta{ margin: 0; }

/* Program CTA — unify to KANU purple */
.program-cta{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  color: var(--kanu-purple);
  border: 1px solid var(--kanu-purple-dark);
}
.program-cta:hover{ background: var(--kanu-purple-dark); }

/* ============== Mobile ============== */
@media (max-width: 900px){
  .academy-events.equal-split{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* Divider becomes horizontal */
  .academy-events.equal-split::after{
    left: 0; right: 0;
    top: 50%; bottom: auto;
    height: 1px; width: auto;
    transform: none;
    background: linear-gradient(to right, transparent, #dddddd, transparent);
  }
}
section { width: 100% !important; }
/* === Academy & Events background (full-width, readable) === */
.academy-bg{
  position: relative;
  isolation: isolate;                 /* keeps overlays behind content */
  color: #fff;                        /* default text color over image */
}

.academy-bg::before{
  content:"";
  position:absolute; inset:0;
  z-index:-2;
  background: url('resources/images/bg-academy.jpg') center/cover no-repeat;
  /* Optional: parallax on large screens only (mobile browsers struggle with fixed) */
  /* @media (min-width: 1000px){ .academy-bg::before{ background-attachment: fixed; } } */
}

.academy-bg::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
}

/* Make the intro text readable on the image */
.academy-bg h2{ color:#fff; }
.academy-bg > .container > .muted{ color:#f2eef9; }

/* Keep cards bright and legible on the darkened background */
.academy-bg .event-card,
.academy-bg .program-card{
  background:#fff;
  color: var(--ink);
}

/* Divider visible on dark background */
.academy-bg .academy-events.equal-split::after{
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.5), transparent);
}

/* Buttons already unified to KANU purple — ensure contrast on dark bg */
.academy-bg .btn-primary,
.academy-bg .event-link,
.academy-bg .program-cta{
  background: var(--kanu-purple);
  color:#fff;
  border:1px solid var(--kanu-purple-dark);
}
.academy-bg .btn-primary:hover,
.academy-bg .event-link:hover,
.academy-bg .program-cta:hover{
  background: var(--kanu-purple-dark);
}
/* Scoped styles for the President section to avoid collisions */
  #president .title{ margin-bottom: 10px; }
  #president .pres-excerpt p{ margin: 0 0 10px; color:#083344; }
  #president .actions{ margin-top: 10px; }
  #president .btn.primary{ background:#0A6B4A; color:#fff; border-color:transparent; }
  /* Bigger, more readable excerpt */
#president .pres-excerpt{
  font-size: clamp(1.05rem, 1.1vw + 0.8rem, 1.35rem);
  line-height: 1.65;
}
/* Bigger section title (scoped to the President block) */
#president .title{
  font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Larger "Read full message" button */
#president .btn.primary{
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.15rem);
  padding: 12px 18px;          /* a bit more thumb-friendly */
  border-radius: 12px;         
  font-weight: 800;
}


  .pres-modal-backdrop{
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; z-index: 2000;
  }
  .pres-modal-backdrop[hidden]{ display: none; }

  .pres-modal{
    background:#fff; width: min(900px, 96vw);
    max-height: 90vh; overflow: auto;
    border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  }
  .pres-modal-header{
    padding: 12px 14px; border-bottom: 1px solid #eef6ff;
    display:flex; align-items:center; justify-content:space-between;
  }
  .pres-modal-body{ padding: 14px; }
  .pres-modal-body p{ margin: 0 0 10px; color:#083344; }
  .pres-modal-body ul{ margin: 8px 0 12px 18px; }
  .pres-modal-actions{
    padding: 12px 14px; border-top: 1px solid #eef6ff;
    display:flex; gap:10px; justify-content:flex-end;
  }
  .btn-close{ border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:#083344; }
  /* Two equal columns for the President section */
#president .pres-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr; /* equal parts */
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}

@media (max-width: 900px){
  #president .pres-wrap{ grid-template-columns: 1fr; }
  #president .pres-right{ order: -1; } /* optional: show photo first on mobile */
}

/* Right column (photo) */
#president .pres-right{
  margin: 0;
  text-align: center;
}
#president .pres-right img{
  width: 100%;
  max-width: 520px;        /* prevents overgrowth on very wide screens */
  aspect-ratio: 4 / 5;     /* tidy portrait shape */
  object-fit: cover;       /* graceful crop if needed */
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
#president .pres-right figcaption{
  margin-top: 8px;
  color:#0a3a4a;
  font-weight: 700;
  font-size: .95rem;
}

/* (Optional) tighten spacing inside the left column */
#president .title{ margin: 0 0 10px; }
#president .pres-excerpt p{ margin: 0 0 10px; color:#083344; }
#president .actions{ margin-top: 10px; }
#president .btn.primary{ background:#0A6B4A; color:#fff; border-color:transparent; }
/* Background image for the "Word from the President" section */
/* Dim the background image behind the content */
#president.light-1{
  position: relative;
  background-image: url('resources/images/president-background.jpg'); /* update path if needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#president.light-1::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.70); /* light overlay for dark text */
}
#president .container{
  position: relative; /* keep text above the overlay */
  z-index: 1;
}

/* ================================
   NON-DESTRUCTIVE LAYOUT HOTFIX
   (paste kept at the very end)
================================ */
html{ box-sizing: border-box !important; }
*, *::before, *::after{ box-sizing: inherit !important; }

/* Center the 95%-width header wrapper */
.nav-wrap{ margin: 0 auto !important; }

/* Be explicit for the full-bleed blocks that add padding */
section,
.container,
section > .container,
section .container,
.nav-wrap{
  box-sizing: border-box !important;
}
/* ==== Mobile dropdown: full-height, scrollable overlay (works for .menu / .site-nav / [data-nav]) ==== */
@media (max-width:900px){
  .menu, .site-nav, [data-nav]{
    /* force overlay behavior regardless of earlier rules */
    position: fixed !important;
    top: var(--header-h, 145px);
    left: 0; right: 0; bottom: 0;
    display: none;
    z-index: 1001;
    background: #fff; color: var(--ink);
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0));
    overflow-y: auto;                          /* <-- scroll here */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;              /* stop background from scrolling */
    max-height: calc(100svh - var(--header-h, 145px));
  }
  .menu.open, .site-nav.open, [data-nav].open{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* lock page scroll when menu is open (JS toggles this) */
html.nav-open, body.nav-open { overflow: hidden; }

/* ====== Speech block inside modal ====== */
.pres-modal .pres-modal-body { padding: 0; }

.speech { padding: 24px 28px 20px; line-height: 1.6; font-size: 16px; color: #1a1a1a; }
.speech-header {
  display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; margin-bottom: 16px;
}
.speech-header .portrait img { width: 120px; height: auto; border-radius: 6px; display: block; object-fit: cover; }
.speech-kicker .epigraph { margin: 0 0 8px; font-size: 18px; }
.speech-body p { margin: 0 0 12px; text-align: justify; }
.speech-body ul { margin: 8px 0 16px 22px; }
.speech-body li { margin: 6px 0; }
.speech-footer { display: flex; justify-content: flex-end; margin-top: 24px; }
.speech-footer .signature { text-align: right; }
.speech-footer .signature img { max-width: 220px; height: auto; display: block; margin-left: auto; margin-bottom: 6px; }
.speech-footer figcaption { font-size: 14px; line-height: 1.4; }

/* Small screens */
@media (max-width: 520px) {
  .speech { padding: 16px; font-size: 15px; }
  .speech-header { grid-template-columns: 90px 1fr; gap: 12px; }
  .speech-header .portrait img { width: 90px; }
}