/*
 * Heeno International — UI modernization layer.
 * Loaded last (imported by styles.css). Layers polish over the preserved
 * styles; removing the import in styles.css reverts to the original look.
 * Identity preserved: #195ea0 primary, #aadcff accent, Fredoka One headings.
 */

/* ---------- Navigation: full-width sticky bar + active section + hover ---------- */
/* The header is a full-width white bar that sticks to the top; an inner
   container centers the logo + nav to the 960px content width. */
#header.header_bg {
  position: sticky; top: 0; z-index: 1000;
  width: 100%; max-width: none; height: auto; margin: 0; padding: 0;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.header-inner {
  max-width: 960px; margin: 0 auto; padding: 0 16px;
  height: 110px; position: relative; box-sizing: border-box;
}
/* Nav was positioned relative to #header; now relative to .header-inner */
#main_nav {right: 16px;}

#main_nav .sf-menu > li > a {transition: color .15s ease, border-color .15s ease; border-bottom: 3px solid transparent; padding-bottom: 4px;}
#main_nav .sf-menu > li > a:hover {color: #195ea0; border-bottom-color: #195ea0;}

body.our-mission-section      #main_nav a[href="/mission-and-objectives.html"],
body.projects-section         #main_nav a[href="/projects.html"],
body.governance-section       #main_nav a[href="/board-of-directors.html"],
body.whats-new-section        #main_nav a[href="/whats-new.html"],
body.support-our-work-section #main_nav a[href="/support-our-work.html"],
body.reflections-section      #main_nav a[href="/Reflections.html"] {
  color: #195ea0; border-bottom-color: #195ea0; font-weight: bold;
}

/* ---------- Buttons / calls-to-action ---------- */
.btn, a.btn {
  display: inline-block; background: #195ea0; color: #fff !important;
  font-weight: bold; text-decoration: none; padding: 10px 20px;
  border-radius: 6px; line-height: 1.2; transition: background .15s ease;
}
.btn:hover, a.btn:hover {background: #134a7e;}

/* ---------- Image treatment ---------- */
#page img {max-width: 100%; height: auto;}
#page figure.img img, #page p > img, #page p > a > img {
  border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
#page figcaption {font-size: 11px; color: #9a9a9a; font-style: italic; margin-top: 5px;}

/* Sidebar links jump to a project on its country page; offset the anchor so
   the targeted item clears the sticky header instead of hiding beneath it. */
#page .item {scroll-margin-top: 124px;}

/* ---------- Heading accent (keep Fredoka, add short underline) ---------- */
#content #titles .page_header {position: relative; padding-bottom: 10px;}
#content #titles .page_header::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 4px; background: #aadcff; border-radius: 2px;
}

/* ---------- Readability: comfortable measure + line-height on body copy ---------- */
#page p, #page li {line-height: 1.7;}
#page .item p, #page .media_format p, #page .list p {max-width: 680px;}

/* ---------- What's New: card feed ---------- */
.whats-new-section #page {padding-top: 5px;}
.whats-new-section #page .item {
  background: #fff; border: 1px solid #e4e9ef; border-radius: 10px;
  box-shadow: 0 1px 4px rgba(25,94,160,.08);
  padding: 22px 26px; margin: 0 0 22px 0; overflow: hidden;
}
.whats-new-section #page .item summary {display: block; list-style: none;}
.whats-new-section #page .item summary::-webkit-details-marker {display: none;}
.whats-new-section #page .item p > strong:only-child {
  display: block; font-size: 16px; line-height: 22px; color: #195ea0;
  text-transform: none; margin: 6px 0;
}
.whats-new-section #page .item img {border-radius: 8px;}

/* ---------- Reflections: editorial layout ---------- */
.reflections-section #page .media_format {padding: 6px 0 4px;}
.reflections-section #page .media_format h2 {
  font-family: 'Fredoka One', Arial, sans-serif;
  font-size: 26px; line-height: 32px; color: #195ea0;
  text-transform: none; margin: 4px 0 10px;
}
.reflections-section #page .media_format p {
  max-width: 640px; line-height: 1.75; color: #444; font-size: 14px;
}
.reflections-section #page .media_format img {
  border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.reflections-section #page div[style*="border-bottom"] {
  border-bottom: none !important; border-top: 1px solid #e0e0e0 !important;
  margin: 30px 0 !important; height: 0 !important;
}

/* ---------- Cards: governance bios + country projects ---------- */
.governance-section #page .mgmt_format .list,
.governance-section #page .item,
.projects-section #page .item {
  background: #fff; border: 1px solid #e4e9ef; border-radius: 10px;
  box-shadow: 0 1px 4px rgba(25,94,160,.08);
  padding: 18px 22px; margin: 0 0 18px 0; overflow: hidden;
}
.governance-section #page .mgmt_format .list h2,
.governance-section #page .item h2,
.projects-section #page .item header h3 {
  color: #195ea0; margin-top: 0;
}
.governance-section #page .list h3:empty {display: none;}

/* ---------- Typography: consistent body content ---------- */
#page ul {list-style: disc; padding-left: 1.5em; margin: 0 0 14px;}
#page ol {list-style: decimal; padding-left: 1.8em; margin: 0 0 14px;}
#page li {line-height: 1.7; margin: .4em 0; max-width: 680px;}
#page li > ul, #page li > ol {margin: .4em 0;}

#page p {margin: 0 0 14px;}
#page em, #page i {font-style: italic;}
#page strong, #page b {color: inherit;}

#page blockquote {
  margin: 18px 0; padding: 6px 0 6px 18px;
  border-left: 3px solid #195ea0; color: #444;
  font-style: italic; max-width: 660px;
}
#page blockquote p {margin: 0 0 8px;}
#page blockquote p:last-child {margin-bottom: 0;}

.byline {font-style: italic; color: #9a9a9a; font-size: 12px; margin: 0 0 14px;}

/* ---------- What's New: teaser listing ---------- */
.teaser-list {display: flex; flex-direction: column; gap: 16px;}
.teaser {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid #e4e9ef; border-radius: 10px;
  box-shadow: 0 1px 4px rgba(25,94,160,.08); padding: 16px;
  text-decoration: none; color: inherit; transition: box-shadow .15s ease;
}
.teaser:hover {box-shadow: 0 3px 12px rgba(25,94,160,.16);}
.teaser-thumb {flex: 0 0 130px;}
.teaser-thumb img {width: 130px; height: 95px; object-fit: cover; border-radius: 8px; display: block;}
.teaser-body {display: block;}
.teaser-date {display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #195ea0; font-weight: bold;}
.teaser-title {display: block; color: #195ea0; font-weight: bold; font-size: 16px; line-height: 21px; margin: 3px 0;}
.teaser-excerpt {display: block; color: #6e6d6d; line-height: 1.6; font-size: 13px;}
.read-more {color: #195ea0; font-weight: bold; white-space: nowrap;}

/* ---------- Post detail: prev/next/back nav ---------- */
.post-nav {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid #e0e0e0;
}
.post-nav a {color: #195ea0; font-weight: bold; text-decoration: none;}
.post-nav a:hover {text-decoration: underline;}
.post-nav .back {margin-left: auto;}

@media (max-width: 560px) {
  .teaser {flex-direction: column;}
  .teaser-thumb, .teaser-thumb img {width: 100%; flex-basis: auto; height: auto;}
  .post-nav .back {margin-left: 0;}
}

/* ============================================================
   Responsive layout (desktop >=960px unchanged)
   ============================================================ */

/* Fluid shell — identical to current at >=960, prevents overflow below */
.container, #header {
  max-width: 960px; width: auto; margin-left: auto; margin-right: auto;
  padding-left: 16px; padding-right: 16px; box-sizing: border-box;
}

/* Hamburger button — hidden on desktop, shown on mobile.
   Drawn as three CSS bars (no glyph-font dependency); the ☰ text is
   kept for accessibility but hidden visually via font-size:0. */
#nav-toggle {
  display: none; width: 34px; height: 28px; padding: 0; border: 0;
  background-color: transparent; cursor: pointer; font-size: 0; line-height: 0;
  background-image:
    linear-gradient(#195ea0, #195ea0),
    linear-gradient(#195ea0, #195ea0),
    linear-gradient(#195ea0, #195ea0);
  background-size: 26px 3px; background-repeat: no-repeat;
  background-position: center 6px, center 14px, center 22px;
}

@media (max-width: 960px) {
  /* Logo as a block (scaled down) so the menu stacks cleanly below it;
     hamburger pinned top-right of the inner container. */
  #header {height: auto;}
  .header-inner {position: relative; height: auto; padding: 14px 16px;}
  #logo {float: none; margin: 0; width: 190px; height: 44px;}
  #logo h1 {margin: 0; width: 190px; height: 44px; background-size: 190px auto;}
  #nav-toggle {display: block; position: absolute; top: 18px; right: 16px;}
  #main_nav {position: static; width: 100%; height: auto; clear: both;}
  #main_nav .sf-menu {float: none; width: 100%; margin: 14px 0 0;}
  #main_nav .sf-menu > li {display: block; float: none; width: 100%; margin: 0; border-top: 1px solid #eee;}
  #main_nav .sf-menu > li > a, #main_nav .sf-menu > li > a:visited {display: block; padding: 12px 4px; text-align: left;}
  html.js #main_nav .sf-menu {display: none;}
  html.js body.nav-open #main_nav .sf-menu {display: block;}

  /* Stack the two columns */
  #body {width: auto; padding-bottom: 40px;}
  .aside_bg {background: none;}
  aside, #content {float: none; width: 100%;}
  aside {min-height: 0; margin: 0 0 18px;}
  #content {width: 100% !important;}

  /* Hide empty asides (Mission, Reflections, What's New listing, support) */
  aside:not(:has(ul.sub)) {display: none;}

  /* Article images: stop floating on narrow screens so body text isn't
     squeezed into a sliver beside the image. Full-width, centred, stacked. */
  #page figure.img, #page figure.img.fl, #page figure.img.fr,
  #page .item .fl, #page .item .fr {float: none;}
  #page figure.img {
    display: block; width: auto; max-width: 100%;
    margin: 12px auto; text-align: center; box-sizing: border-box;
  }
  #page figure.img img {max-width: 100%; height: auto; display: inline-block;}
  #page .item img {max-width: 100%; height: auto;}
  /* tighter anchor offset for the shorter mobile header */
  #page .item {scroll-margin-top: 88px;}

  /* Sidebar heading becomes a collapse toggle */
  aside .section_header {cursor: pointer; margin-bottom: 0;}
  aside:has(ul.sub) .section_header::after {content: " \25BE"; font-size: .7em; vertical-align: middle;}
  aside.open .section_header::after {content: " \25B4";}
  html.js aside .sub {display: none;}
  html.js aside.open .sub {display: block; margin-top: 12px;}

  /* Section-header band: in-flow, left-aligned, fluid size.
     Solid blue background so the white title is readable even where the
     repeating header image doesn't cover the now-auto height. */
  #header_section {height: auto; min-height: 0;}
  .header_section_bg {background-color: #2c79c6;}
  #header_section h2.section_header {
    position: static; right: auto; top: auto; width: auto; opacity: 1 !important;
    padding: 18px 0; font-size: clamp(22px, 6vw, 40px); line-height: 1.15;
  }
  h2.page_header {margin-left: 0;}

  /* Home hero */
  #header_section.front {height: auto; padding-bottom: 24px;}
  #tagline {padding-top: 24px;}
  #tagline h1, #tagline h1.no_anim {font-size: clamp(20px, 6vw, 44px); line-height: 1.1;}
  .circ_img {right: -120px; transform: scale(.6); transform-origin: top right;}

  /* Home content columns stack */
  .home-section .welcome, .home-section .examples, .home-section .support {width: 100%; float: none; margin: 0;}
  .home-section .examples {margin-top: 24px;}
  #body.row1, #body.row2, #body.row2B, #body.row3 {padding-left: 0; padding-right: 0;}
  #body.row2 {padding-bottom: 60px;}
  #page iframe, .welcome iframe {max-width: 100%;}
  .row3_insert h2, .footer_insert h2 {padding-left: 0;}
  .row3_insert p {margin-left: 0;}

  /* Contact circle → in-flow, no oversized circle background */
  #circ_contact.circ_bg, #circ_contact {
    position: static; width: auto; height: auto;
    background: none; padding: 24px 0 0; margin-top: 24px; border-top: 1px solid #d8e6f5;
  }

  /* Footer: relax the fixed-height sticky technique */
  #footer, #footerB {height: auto; margin: 0; overflow: visible;}
  .footer_bg {height: auto; padding: 24px 0; background-position: center top; background-size: cover;}
  .footer_insert figure {position: static; width: auto; height: auto; margin: 0 auto 16px;}
  /* #legal is absolutely positioned (left/top) on desktop; reset it so the
     copyright line actually renders inside the auto-height mobile footer. */
  #legal {position: static; left: auto; top: auto; text-align: center; color: #fff; padding: 4px 16px;}
}

@media (max-width: 560px) {
  .circ_img {display: none;} /* decorative hero circle off on phones */
  #header_section h2.section_header {font-size: clamp(24px, 8vw, 32px);}
}

/* ---------- Home: in-memoriam section ---------- */
.memorial {background: #eef4fb; padding: 48px 0; border-bottom: 1px solid #dce7f3;}
.memorial-grid {display: flex; gap: 36px; align-items: center;}
.memorial-photo {flex: 0 0 320px; width: 320px; max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.20);}
.memorial-text {flex: 1; min-width: 0;}
.memorial-kicker {text-transform: uppercase; letter-spacing: .14em; color: #195ea0; font-weight: bold; font-size: 13px; margin: 0 0 6px;}
.memorial-text h2 {font-family: 'Fredoka One', Arial, sans-serif; color: #195ea0; font-size: 30px; line-height: 1.15; margin: 0 0 4px; visibility: visible;}
.memorial-dates {color: #6e6d6d; font-style: italic; margin: 0 0 16px;}
.memorial-text p {line-height: 1.8; color: #444; margin: 0 0 14px; max-width: 62ch;}
@media (max-width: 760px) {
  .memorial {padding: 32px 0;}
  .memorial-grid {flex-direction: column; gap: 24px; text-align: center;}
  .memorial-photo {flex-basis: auto; width: 260px;}
  .memorial-text p {text-align: left;}
}