/* ============================================================
   Digital Peacebuilding, site stylesheet.
   ONE file for every page, so the header can never drift apart
   between pages. Change the masthead here and it changes
   everywhere at once.

   TYPE: one font family for the whole site, the same native
   system stack her Bootstrap site uses. No web fonts are
   loaded and there is no serif anywhere. Headings are simply
   bolder and bigger. Her sizes are kept: nameplate 60, page
   titles 35 bold, card titles 25, body copy 18.

   COLOUR: her navy #222B61 and her cream #FFF1C3, unchanged.
   ============================================================ */

:root{
  --navy:#222B61;
  --cream:#FFF1C3;
  --ink:#212529;          /* Bootstrap's body colour */
  --muted:#6c757d;        /* Bootstrap's muted grey */
  --rule:#dee2e6;         /* Bootstrap's border grey */
  --accent:#3d54b5;
  --accent-ink:#34439a;
  --maxw:1200px;
  /* her Bootstrap 4 native font stack, used for everything */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);font-size:16px;line-height:1.5;
  color:var(--ink);background:#fff;
  display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased;
}
/* nothing on the site may pick its own font */
h1,h2,h3,h4,h5,h6,p,a,li,input,button,figcaption,td,th{font-family:var(--sans)}
main{flex:1}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;
}
.skip{position:absolute;left:8px;top:-48px;z-index:1100;background:var(--navy);color:#fff;
      padding:9px 15px;border-radius:0 0 6px 6px;font-size:13px;font-weight:600;text-decoration:none}
.skip:focus{top:0}

/* ============================================================
   MASTHEAD, shared by every page
   ============================================================ */

/* Navy nameplate band. Her 60px uppercase wordmark, unchanged. */
.band{background:var(--navy);padding:14px 20px}
.band h1{
  margin:0;text-align:center;font-weight:500;
  font-size:clamp(30px,6.2vw,60px);line-height:1.05;
  text-transform:uppercase;
}
.band h1 a{color:aliceblue;text-decoration:none}
.band h1 a:hover{color:#fff}

/* Cream utility bar: hamburger on the left, search on the right.
   This replaces her old six-item nav row and the subtitle line. */
.util{background:var(--cream);border-bottom:1px solid rgba(34,43,97,.16)}
/* Three columns with equal 1fr sides, so the middle one lands on exact page
   centre while the hamburger and search stay on the same single line. A grid
   also cannot overlap, unlike centring the tagline with absolute positioning. */
.util .inner{max-width:var(--maxw);margin:0 auto;padding:8px 20px;
             display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px 16px}
.burger{flex:none;justify-self:start;width:42px;height:34px;display:flex;flex-direction:column;
        justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:0 4px}
.burger span{display:block;height:4px;background:#1b1b1b;border-radius:1px;transition:background .12s}
.burger:hover span{background:var(--navy)}
/* Her tagline: 22px, weight 500, centred. Same values her Bootstrap h4 computes to.
   It sits in the middle grid column so it is centred on the page rather than in the
   leftover space between the two controls, which would push it left of centre. */
.tagline{grid-column:2;text-align:center;margin:0;
         font-size:22px;font-weight:500;line-height:1.3;color:var(--ink)}
.util form{justify-self:end;display:flex;align-items:center}
.util input{
  font-size:16px;padding:5px 9px;width:210px;
  border:1px solid #9aa0b4;border-right:0;background:#fff;color:var(--ink);
}
.util .go{border:1px solid #9aa0b4;background:#eef1f8;cursor:pointer;padding:5px 11px;font-size:16px;line-height:1.35}
.util .go:hover{background:#e2e7f5}

/* Hamburger panel. Her nav links were plain black Bootstrap links. */
.menu{background:#fff;border-bottom:1px solid var(--rule);display:none}
.menu[data-open]{display:block}
.menu .inner{max-width:var(--maxw);margin:0 auto;padding:6px 20px 12px}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 30px}
.menu a{display:block;padding:7px 0;font-size:18px;color:#000;text-decoration:none}
.menu a:hover{color:var(--navy);text-decoration:underline}
.menu a[aria-current]{font-weight:700}
/* ---- Briefs topic pulldown, the same behaviour as the IPS site ----
   Opens on hover and on keyboard focus, driven purely by CSS. */
.menu .has-sub{position:relative}
/* IPS uses a 9px caret against 13px tab text. These links are 18px, so this is
   the same proportion. inline-block keeps the link's hover underline off it. */
.menu .caret{display:inline-block;font-size:13px;margin-left:6px;
             text-decoration:none;transform:translateY(-1px)}
.menu .sub{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;
  display:block;                      /* not the flex row the top level uses */
  min-width:252px;
  background:#fff;border:1px solid var(--rule);border-radius:6px;
  box-shadow:0 10px 26px rgba(20,24,45,.15);
  padding:7px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease;
}
.menu .has-sub:hover .sub,
.menu .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
/* an invisible bridge across the gap, so moving the pointer down to the list
   does not pass through dead space and close it */
.menu .has-sub:hover::after,
.menu .has-sub:focus-within::after{
  content:"";position:absolute;left:0;top:100%;width:max(100%,252px);height:10px;
}
.menu .sub li{width:100%}
.menu .sub a{display:block;padding:8px 12px;border-radius:4px;font-size:16px;color:var(--ink)}
.menu .sub a:hover{background:#eef1f8;color:var(--navy);text-decoration:none}

/* Search results panel, drops open under the bar on any page */
.results{display:none;border-bottom:1px solid var(--rule);background:#f8f9fa}
.results[data-open]{display:block}
.results .inner{max-width:var(--maxw);margin:0 auto;padding:14px 20px 18px}
.results h2{font-size:20px;font-weight:700;color:var(--navy);margin:0 0 10px}
.results ul{list-style:none;margin:0;padding:0;max-height:60vh;overflow-y:auto}
.results li{padding:8px 0;border-top:1px solid var(--rule)}
.results a{font-size:18px;font-weight:600;color:var(--ink);text-decoration:none}
.results a:hover{color:var(--accent);text-decoration:underline}
.results .by{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.results .kind{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;
               text-transform:uppercase;color:#fff;background:var(--navy);
               padding:1px 6px;border-radius:2px;margin-right:8px;vertical-align:2px}
.results .none{font-size:16px;color:var(--muted);margin:0}

/* ============================================================
   FOOTER, shared by every page. Her 18px centred navy footer.
   ============================================================ */
footer{background:var(--navy);color:aliceblue;padding:20px;text-align:center;
       font-size:18px;line-height:1.5;margin-top:auto}
footer a{color:#cfd8f5}
footer a:hover{color:#fff}

/* ============================================================
   PAGE FURNITURE. Her .page-title was 35px bold.
   ============================================================ */
.page-title{font-size:35px;font-weight:700;margin:22px 0 6px}
.head-rule{border:0;border-top:1px solid var(--rule);max-width:var(--maxw);margin:0 auto}
.prose{font-size:18px;line-height:1.6;max-width:80ch}
.prose p{margin:0 0 16px;text-align:justify}
/* Underlined, not just blue: at 1.77:1 against the body text the colour
   alone is not enough to tell a link from a word (WCAG 1.4.1). */
.prose a{color:var(--accent-ink);text-decoration:underline}

/* ============================================================
   HOME: Recent Briefs (text left, one photo right)
   ============================================================ */
.recent{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:26px 0 8px;align-items:start}
.recent h2,.featured h2{font-size:35px;font-weight:700;color:var(--ink);margin:0 0 18px}
.rb{margin:0 0 26px;padding-left:28px}
.rb .t{font-size:19px;font-weight:700;line-height:1.3;color:var(--ink);text-decoration:none}
.rb .t:hover{color:var(--accent);text-decoration:underline}
.rb .au{font-size:18px;color:var(--ink);margin:2px 0 0}
.rb .sum{font-size:18px;line-height:1.5;color:var(--ink);margin:12px 0 0}
.rb-rule{border:0;border-top:1px solid #555;width:56%;margin:0 0 0 28px}
.recent .pic{border:1px solid var(--rule);padding:9px;background:#fff;margin:0}
.recent .pic img{display:block;width:100%;height:auto}
/* her photo credits were 10px */
.cred{font-size:10px;color:#444;margin:6px 0 0}

/* ============================================================
   HOME: Featured Briefs carousel.

   HER CODE. The markup on the home page is Dawn's own Bootstrap
   carousel, so these are HER rules, copied from the <style> block
   of her live site unchanged. Bootstrap 4.4.1 supplies the sliding
   and the arrows; these supply the card look. Do not "tidy" them.
   ============================================================ */
.featured{padding:22px 0 40px}

/* --- verbatim from her site --- */
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.col-size{
  flex: 0 0 50%;          /* Half width on medium and larger screens */
  max-width: 50%;
  padding-right: 1%;
  padding-left: 1%;
}
.news-item {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 10px;
}
.news-item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.news-item h4 {
  font-size: 25px;
  font-weight: 600;
  margin-top: 10px;
}
.news-item p {
  font-size: 18px;
  margin-bottom: 5px;
}
#news-carousel .news-item {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 10px;
}
#news-carousel .news-item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
#news-carousel .news-item h3 {
  font-size: 25px;
  font-weight: 600;
  margin-top: 10px;
}
#news-carousel .news-item p {
  font-size: 18px;
  margin-bottom: 5px;
}
.news-link {
  text-decoration: none;
  color: inherit;
}
.issue-info{
  text-align: right;
}
/* --- end of her rules --- */

/* Every card the same size, whatever its title says.
   Her cards each sized themselves to their own text, so a one-line title made a
   box 30px shorter than a two-line one and the row read as ragged. The three
   pieces below fix it at any width without anyone having to measure anything:
   the column stretches to the full height of its row, the card fills the column,
   and the title always reserves two lines even when it only needs one. The issue
   line is then pushed to the bottom of the card, so the baselines agree across a
   row instead of floating wherever the text happens to end.
   min-height, not height: a title that genuinely needs three lines on a narrow
   screen still grows rather than being clipped. */
#news-carousel .row{align-items:stretch}
#news-carousel .col-size{display:flex}
#news-carousel .news-item{display:flex;flex-direction:column;width:100%;min-height:450px}
#news-carousel .news-item h3{min-height:60px}
#news-carousel .news-item .issue-info{margin-top:auto;padding-top:6px}

/* Bootstrap paints the arrow icons white, which vanishes against the page. Her
   site has the same issue; a dark disc behind them keeps them visible without
   touching her markup. */
#news-carousel .carousel-control-prev,
#news-carousel .carousel-control-next{width:8%;opacity:1}
#news-carousel .carousel-control-prev-icon,
#news-carousel .carousel-control-next-icon{
  background-color:rgba(20,24,31,.55);border-radius:50%;padding:14px;
  background-size:55% 55%;
}
#news-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
#news-carousel .carousel-control-next:hover .carousel-control-next-icon{background-color:rgba(20,24,31,.8)}

/* ============================================================
   BRIEFS INDEX (grouped by topic, with the topic filter)
   ============================================================ */
.index{max-width:900px}
.index .jump{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 22px;padding:0;list-style:none}
.index .jump a{font-size:16px;color:var(--accent-ink);text-decoration:none;padding-bottom:2px}
.index .jump a:hover{color:var(--navy);text-decoration:underline}
.index .jump a[aria-current]{color:var(--navy);font-weight:700;border-bottom:2px solid var(--accent)}
.topic{margin:0 0 28px}
.topic h2{font-size:24px;font-weight:700;color:var(--navy);margin:0 0 2px;scroll-margin-top:16px}
.topic hr{border:0;border-top:1px solid var(--rule);margin:6px 0 14px}
.topic ul{list-style:none;margin:0;padding:0}
.topic li{margin:0 0 14px;display:flex;align-items:center;gap:14px}
.topic li .th{flex:none;width:96px;height:64px;object-fit:cover;background:#e9ecef}
.topic li .tx{min-width:0}
.topic li a{font-size:18px;font-weight:600;line-height:1.3;color:var(--ink);text-decoration:none}
.topic li a:hover{color:var(--accent-ink);text-decoration:underline}
.topic li .by{display:block;font-size:15px;color:var(--muted);margin-top:2px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding:8px 0 44px;align-items:start}
.contact-grid .who{font-size:18px;line-height:1.6}
.contact-grid .who a{color:var(--accent-ink)}
.contact-grid .social{display:inline-flex;align-items:center;gap:8px;margin-top:6px;
                      font-size:18px;color:var(--accent-ink);text-decoration:none}
.contact-grid .social:hover{text-decoration:underline}
.contact-grid .social img{width:30px;height:30px}
.contact-grid figure{margin:0}
.contact-grid figure img{display:block;width:100%;height:auto;border:1px solid var(--rule)}

/* ============================================================
   PHONES AND SMALL TABLETS
   ============================================================ */
@media(max-width:820px){
  .recent{grid-template-columns:1fr;gap:22px}
  .rb{padding-left:0}
  .rb-rule{margin-left:0;width:100%}
  .recent h2,.featured h2{font-size:28px}
  .page-title{font-size:28px}
  .contact-grid{grid-template-columns:1fr;gap:24px}
  footer{font-size:16px}
}
/* The 450px above is measured for a wide window. Narrower ones wrap the longest
   title and the longest photo credit onto extra lines, and a Bootstrap carousel
   is only as tall as the slide currently showing, so without this the second
   slide arrives taller than the first and the page jumps. One height per band,
   each taken from the tallest the cards actually reach in that band. The worst
   case is between about 500 and 660px, where the cards are still side by side
   but only around 270px wide, so the longest title runs to four lines. */
@media (max-width: 900px){#news-carousel .news-item{min-height:480px}}
@media (max-width: 660px){#news-carousel .news-item{min-height:540px}}

/* her own breakpoint: the two carousel cards stack on a phone */
@media (max-width: 500px) {
  .col-size{
    flex: 1;
    min-width: 100%;
    padding-right: 0.5%;
    padding-left: 0.5%;
  }
  /* full width again, so the titles fit back onto two or three lines */
  #news-carousel .news-item{min-height:495px}
}
/* Below this the three columns genuinely cannot share a line without the tagline
   wrapping to a stack of short lines, so it takes its own centred row instead. */
@media(max-width:900px){
  .util .inner{display:flex;flex-wrap:wrap;gap:4px 16px}
  .tagline{order:-1;flex-basis:100%;font-size:18px}
  .util form{margin-left:auto}
}
@media(max-width:620px){
  .util input{width:min(46vw,210px)}
  .card h3{font-size:22px}
  .tagline{font-size:16px}
  /* A visibility:hidden dropdown still counts toward the page's scroll width, so
     without this cap its 252px pushes a 320px phone sideways while closed. This
     is the same overflow the IPS audit caught. */
  .menu .sub{min-width:0;max-width:calc(100vw - 40px)}
  .menu .has-sub:hover::after,
  .menu .has-sub:focus-within::after{width:100%}
}