@import url("readable.css");

/* ============================================================================
   Site chrome, as a stylesheet.

   Every page on the site inlines these rules inside its own <style> block. That
   is fine for pages the chrome tool generated from the same template, and wrong
   for the grants pages, which were written self-contained and have their own
   type scale, their own --mw, and their own .btn. Rather than paste four
   hundred lines into each of them and let the two sets of rules argue, the
   chrome's own CSS lives here and they link it.

   TWO RULES THIS FILE FOLLOWS, and both exist because of collisions found while
   migrating the grants pages:

   1. Every chrome rule is scoped to a chrome container (.ubar, .hdr, .ftr,
      .m-drawer). A page's own .btn, .wrap and .card keep their meaning.
   2. Every custom property has a fallback. A page that never declared --navy
      still gets a navy utility bar.
   ========================================================================== */

/* ---------------------------------------------------------- utility bar */
.ubar{background:var(--blue,#1E3EAF);color:#fff;font-size:.8125rem;padding:6px 0;border-top:3px solid var(--accent,#1C88ED)}
.ubar .wrap{max-width:var(--chrome-mw,1200px);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;min-height:40px;flex-wrap:nowrap}
.ubar a{color:#D2E9FF;margin-right:20px;transition:color .2s;letter-spacing:.02em;text-decoration:none}
.ubar a:hover{color:#fff}
.ubar .usocial{display:flex;gap:14px}
.ubar .usocial a{color:#D2E9FF;margin-right:0}
.ubar .usocial a:hover{color:#fff}
.ub-promo{background:#B49355!important;color:#100A4A!important;padding:4px 13px!important;border-radius:20px;font-weight:600;transition:opacity .2s;white-space:nowrap}
.ub-promo:hover{opacity:.88;color:#100A4A!important}

/* -------------------------------------------------------------- header */
.hdr{background:#fff;border-bottom:1px solid #E2E8F0;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hdr-in{max-width:var(--chrome-mw,1200px);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:32px;height:76px}
.hdr .logo img{height:52px;display:block;max-width:100%}
.hdr .nav{flex:1}
.hdr .nav ul{display:flex;gap:4px;justify-content:flex-end;list-style:none;margin:0;padding:0}
.hdr .nav li{position:relative}
.hdr .nav a{display:block;padding:8px 14px;font-family:var(--font-display);font-size:.9063rem;font-weight:500;color:var(--text,#2D3748);border-radius:8px;text-decoration:none;transition:background .15s,color .15s}
.hdr .nav a:hover,.hdr .nav a.act{background:var(--bg,#EDF2F7);color:var(--blue,#1E3EAF)}
.hdr .nav li.dd>a::after{content:'';display:inline-block;margin-left:7px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);vertical-align:middle}
.hdr .dd-menu{position:absolute;top:100%;left:0;background:#fff;border:1px solid #E2E8F0;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.13);padding:8px;min-width:215px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease .3s,transform .18s ease .3s,visibility 0s linear .5s;z-index:200}
.hdr .dd-menu::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.hdr .nav li.dd:hover .dd-menu,.hdr .nav li.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translateY(2px);transition:opacity .15s ease,transform .15s ease,visibility 0s}
.hdr .dd-menu a{white-space:nowrap}

/* The header's own buttons, scoped so a page's .btn keeps its own look. */
.hdr .hctas{display:flex;gap:10px;flex-shrink:0}
.hdr .hctas .btn{display:inline-block;padding:10px 22px;border-radius:8px;font-family:var(--font-display);font-weight:600;font-size:.9375rem;border:2px solid transparent;text-decoration:none;transition:opacity .2s,transform .15s;white-space:nowrap}
.hdr .hctas .btn:hover{opacity:.88;transform:translateY(-1px)}
.hdr .hctas .btn-primary{background:var(--blue,#1E3EAF);color:#fff;border-color:var(--blue,#1E3EAF)}
.hdr .hctas .btn-outline{background:transparent;color:var(--blue,#1E3EAF);border-color:var(--blue,#1E3EAF)}

/* ------------------------------------------------------- mobile drawer */
.m-actions{display:none}
.m-burger{width:44px;height:44px;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:10px}
.m-burger span{display:block;height:2px;width:22px;background:#1E3EAF;border-radius:2px;transition:transform .25s,opacity .2s}
body.m-open .m-burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.m-open .m-burger span:nth-child(2){opacity:0}
body.m-open .m-burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.m-donate{background:#1E3EAF;color:#fff;padding:9px 16px;border-radius:8px;font-family:var(--font-display);font-weight:700;font-size:.875rem;text-decoration:none;white-space:nowrap}
.m-overlay{position:fixed;inset:0;background:rgba(16,10,74,.55);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:998}
.m-drawer{position:fixed;top:0;right:0;height:100%;width:min(85vw,340px);background:#fff;transform:translateX(100%);transition:transform .28s ease;z-index:999;padding:20px 22px 32px;overflow-y:auto;box-shadow:-8px 0 34px rgba(0,0,0,.20);display:flex;flex-direction:column}
body.m-open .m-overlay{opacity:1;visibility:visible}
body.m-open .m-drawer{transform:translateX(0)}
body.m-open{overflow:hidden}
.m-close{align-self:flex-end;font-size:1.875rem;line-height:1;background:none;border:none;color:#1E3EAF;cursor:pointer;width:44px;height:44px}
.m-drawer .m-nav{display:flex;flex-direction:column;margin:6px 0 0;list-style:none;padding:0}
.m-link{display:block;padding:15px 4px;border-bottom:1px solid #EDF2F7;font-family:var(--font-display);font-weight:600;font-size:1.125rem;color:#1E3EAF;text-decoration:none}
.m-acc{border-bottom:1px solid #EDF2F7}
.m-acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:none;cursor:pointer;padding:15px 4px;font-family:var(--font-display);font-weight:600;font-size:1.125rem;color:#1E3EAF;text-align:left}
.m-chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s;flex-shrink:0;margin-right:6px}
.m-acc.open{border-bottom:none;margin-bottom:4px}
.m-acc.open .m-acc-head{background:#1E3EAF;color:#fff;border-radius:10px 10px 0 0}
.m-acc.open .m-chev{transform:rotate(-135deg)}
.m-acc-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#1E3EAF}
.m-acc.open .m-acc-panel{max-height:640px;border-radius:0 0 10px 10px}
.m-acc-panel a{display:block;padding:12px 18px;color:#fff;text-decoration:none;font-family:var(--font-body);font-size:.9688rem;border-top:1px solid rgba(255,255,255,.14)}
.m-acc-panel a:hover{background:rgba(255,255,255,.10)}
.m-drawer-donate{margin-top:20px;background:#1E3EAF;color:#fff;text-align:center;padding:15px;border-radius:8px;font-family:var(--font-display);font-weight:700;font-size:1rem;text-decoration:none}
.m-util{margin-top:22px;display:flex;flex-direction:column;gap:4px;border-top:1px solid #EDF2F7;padding-top:16px}
.m-util a{color:#475569;font-size:.875rem;text-decoration:none;padding:7px 4px}

/* ------------------------------------------------------------ responsive
   Below 880 the desktop nav gives way to the drawer, and the wordmark gives
   way to the bug so the header still fits a 320px phone. */
@media(max-width:880px){
  .m-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
  .ubar{display:none!important}
  .hdr .nav,.hdr .hctas{display:none!important}
  .hdr-in{gap:16px;height:66px;padding:0 16px}
  .hdr .logo{background:url('logos/bug_dual-192.png') left center/contain no-repeat;width:48px;height:48px;flex:0 0 48px;overflow:hidden;display:inline-block}
  .hdr .logo img{display:none!important}
}

/* --------------------------------------------------------------- footer
   Scoped to footer.ftr. The grants pages already use a .ftr class of their
   own for a small legal line, and an unscoped rule turned that into a navy
   slab. The chrome footer is always a <footer>; theirs is a <div>. */
footer.ftr{background:var(--brand-navy,#0F1C3F);color:#fff}
footer.ftr a{text-decoration:none}
footer.ftr .ftr-main{max-width:var(--chrome-mw,1200px);margin:0 auto;padding:52px 24px 36px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:36px}
footer.ftr .ftr-brand p{font-size:.8438rem;color:var(--muted,#A0AEC0);line-height:1.65;margin:14px 0 18px}
footer.ftr .ftr-logo img{height:42px;width:auto;max-width:100%;display:block}
footer.ftr .fsoc{display:flex;gap:12px}
footer.ftr .fsoc a{width:34px;height:34px;background:rgba(255,255,255,.1);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;color:var(--muted,#A0AEC0);transition:background .2s,color .2s}
footer.ftr .fsoc a:hover{background:var(--accent,#1C88ED);color:#fff}
footer.ftr .fcol h4{font-family:var(--font-display);font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted,#A0AEC0);margin-bottom:18px}
footer.ftr .fcol ul{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
footer.ftr .fcol ul li a{font-size:.875rem;color:rgba(255,255,255,.65);transition:color .15s}
footer.ftr .fcol ul li a:hover{color:#fff}
footer.ftr .fbot{border-top:1px solid rgba(255,255,255,.1);max-width:var(--chrome-mw,1200px);margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.ftr .fbot p{font-size:.7813rem;color:var(--muted,#A0AEC0)}
footer.ftr .fbadges{display:flex;gap:12px;flex-wrap:wrap}
footer.ftr .fbadge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:6px 12px;font-size:.6875rem;color:var(--muted,#A0AEC0);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:1024px){footer.ftr .ftr-main{grid-template-columns:1fr 1fr 1fr;gap:32px}}
@media(max-width:860px){footer.ftr .ftr-main{grid-template-columns:1fr 1fr}}
@media(max-width:768px){footer.ftr .ftr-main{grid-template-columns:1fr}}

/* An unconstrained logo in a page with no img base rule is 3000px wide and
   drags a horizontal scrollbar across every screen. */
.hdr img,footer.ftr img,.m-drawer img{max-width:100%;height:auto}

/* The chrome footer states its own box, so a page that happens to define .ftr
   for something else of its own cannot squeeze, centre or shrink it. */
footer.ftr{max-width:none;margin:0;padding:0;text-align:left;font-size:1rem;line-height:1.6;width:100%}