/* ============================================================================
   PPSSC ANAMBRA  ·  ppssc.css
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   PALETTE   Anambra State identity: yellow field, black stripe.
             sun #FFC20E · sun-2 #FFD44A · amber #C98600 (edges only)
             ink #14120A · slate #26221A · wash #FDF9EE · line #E7DFC9

   CONTRAST RULE, and it is the whole design system:
             Yellow is a SURFACE, never a text colour on white.
             Black type on yellow, yellow type on black. Nothing between.

   HOUSE RULES ENFORCED HERE
     - border-radius never exceeds 8px. Badges are square (radius 0).
     - No pill shapes anywhere. No border-radius:999px.
     - No left-edge colour bars on list rows.
     - Every class is prefixed 'aps-' so nothing collides with Bootstrap
       should it ever be added to a sub-application.
   ============================================================================ */

/* ===================== TOKENS ===================== */
:root{
  --sun:#FFC20E;
  --sun-2:#FFD44A;
  --sun-3:#FFE9A8;
  --amber:#C98600;
  --ink:#14120A;
  --slate:#26221A;
  --slate-2:#3A342A;
  --wash:#FDF9EE;
  --paper:#FFFFFF;
  --line:#E7DFC9;
  --muted:#6B6355;
  --fd:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
  --r:8px;
  --max:1240px;
  --hdrH:96px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fb);font-size:16px;line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--fd);margin:0;line-height:1.16;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.aps-wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.aps-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.aps-eyebrow{
  font-family:var(--fd);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:10px;
}
.aps-eyebrow::after{content:"";height:1px;flex:1;background:var(--line)}
.aps-eyebrow--on-dark{color:var(--sun)}
.aps-eyebrow--on-dark::after{background:rgba(255,255,255,.18)}
.aps-eyebrow--on-sun{color:var(--ink)}
.aps-eyebrow--on-sun::after{background:rgba(20,18,10,.25)}

/* square. never a pill. */
.aps-badge{
  display:inline-block;border-radius:0;padding:3px 9px;
  font-family:var(--fd);font-size:.66rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.5;white-space:nowrap;
}
.aps-badge--sun{background:var(--sun);color:var(--ink)}
.aps-badge--ink{background:var(--ink);color:var(--sun)}
.aps-badge--line{border:1px solid var(--line);color:var(--muted);background:#fff}
.aps-badge--line-dark{border:1px solid rgba(20,18,10,.3);color:var(--ink);background:transparent}

.aps-btn{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  font-family:var(--fd);font-weight:700;font-size:.9rem;
  padding:13px 22px;border-radius:var(--r);text-decoration:none;
  transition:transform .16s,background .16s,box-shadow .16s;
}
.aps-btn:hover{transform:translateY(-2px)}
.aps-btn--sun{background:var(--sun);color:var(--ink);box-shadow:0 10px 26px -16px rgba(201,134,0,.95)}
.aps-btn--sun:hover{background:var(--sun-2)}
.aps-btn--ink{background:var(--ink);color:var(--sun)}
.aps-btn--ink:hover{background:var(--slate)}
.aps-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.aps-btn--ghost:hover{background:rgba(255,255,255,.14)}
.aps-btn--quiet{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.aps-btn--quiet:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ===================== TOP BAR ===================== */
.aps-top{
  position:relative;z-index:130;background:var(--ink);color:#CFC7B4;
  font-size:.78rem;border-bottom:1px solid rgba(255,194,14,.22);
}
.aps-top__in{display:flex;align-items:center;gap:18px;min-height:38px;flex-wrap:wrap}
.aps-top__gov{font-family:var(--fd);font-weight:600;color:#fff;white-space:nowrap}
.aps-top__gov span{color:var(--sun)}
.aps-top__sp{margin-left:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.aps-top a{color:#CFC7B4;text-decoration:none;white-space:nowrap}
.aps-top a:hover{color:var(--sun)}

/* ===================== HEADER (overlays hero) ===================== */
/* FIX 3: min-width:0 guards, nowrap on nav, burger at 1180px. */
.aps-hdr{
  position:absolute;top:38px;left:0;right:0;z-index:120;background:transparent;
  transition:background .25s,box-shadow .25s,top .25s;
}
.aps-hdr.is-stuck{
  position:fixed;top:0;background:var(--sun);
  box-shadow:0 10px 30px -22px rgba(20,18,10,.8);border-bottom:1px solid var(--amber);
}
.aps-hdr__in{display:flex;align-items:center;gap:18px;min-height:var(--hdrH);transition:min-height .25s}
.aps-hdr.is-stuck .aps-hdr__in{min-height:70px}

.aps-brand{display:flex;align-items:center;gap:13px;text-decoration:none;margin-right:auto;min-width:0}
.aps-seal{
  width:54px;height:54px;flex:0 0 54px;border-radius:50%;
  background:var(--sun);display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px rgba(20,18,10,.55),0 0 0 3px rgba(255,255,255,.35);
  transition:width .25s,height .25s,flex-basis .25s,box-shadow .25s,background .25s;
}
.aps-hdr.is-stuck .aps-seal{
  width:44px;height:44px;flex-basis:44px;background:var(--ink);
  box-shadow:inset 0 0 0 2px rgba(255,194,14,.6),0 0 0 3px rgba(255,255,255,.45);
}
.aps-seal svg{width:29px;height:29px;stroke:var(--ink);transition:width .25s,height .25s,stroke .25s}
.aps-hdr.is-stuck .aps-seal svg{width:24px;height:24px;stroke:var(--sun)}
.aps-brand__t{line-height:1.18;min-width:0}
.aps-brand__t b{
  display:block;font-family:var(--fd);font-weight:800;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sun);
}
.aps-brand__t i{
  display:block;font-style:normal;font-family:var(--fd);font-weight:700;
  font-size:1.02rem;color:#fff;letter-spacing:-.015em;
}
.aps-brand__t em{display:block;font-style:normal;font-size:.73rem;color:rgba(255,255,255,.72)}
.aps-hdr.is-stuck .aps-brand__t b{color:var(--slate)}
.aps-hdr.is-stuck .aps-brand__t i,
.aps-hdr.is-stuck .aps-brand__t em{color:var(--ink)}

.aps-nav{display:flex;align-items:center;gap:1px;flex:0 0 auto}
.aps-nav__i{position:relative}
.aps-nav__i>a{
  display:block;text-decoration:none;color:#fff;font-family:var(--fd);
  font-weight:600;font-size:.86rem;padding:11px 13px;border-radius:var(--r);
  position:relative;white-space:nowrap;transition:color .18s,background .18s;
}
.aps-hdr.is-stuck .aps-nav__i>a{color:var(--ink)}
.aps-nav__i>a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;
  background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .22s;
}
.aps-hdr.is-stuck .aps-nav__i>a::after{background:var(--ink)}
.aps-nav__i:hover>a::after,.aps-nav__i:focus-within>a::after{transform:scaleX(1)}
.aps-nav__i.is-on>a{background:var(--sun);color:var(--ink)}
.aps-nav__i.is-on>a::after{display:none}
.aps-hdr.is-stuck .aps-nav__i.is-on>a{background:var(--ink);color:var(--sun)}

.aps-drop{
  position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:7px;
  box-shadow:0 26px 54px -30px rgba(20,18,10,.55);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;
}
.aps-nav__i:hover .aps-drop,.aps-nav__i:focus-within .aps-drop{opacity:1;visibility:visible;transform:none}
.aps-drop a{display:block;padding:9px 12px;border-radius:6px;text-decoration:none;font-size:.87rem;color:var(--ink);font-weight:500}
.aps-drop a:hover{background:var(--wash)}

.aps-hdr__cta{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.aps-hdr__ph{text-decoration:none;line-height:1.2;text-align:right;white-space:nowrap}
.aps-hdr__ph small{display:block;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.aps-hdr__ph b{font-family:var(--fd);font-size:.92rem;color:#fff}
.aps-hdr.is-stuck .aps-hdr__ph small{color:var(--slate)}
.aps-hdr.is-stuck .aps-hdr__ph b{color:var(--ink)}
.aps-burger{
  display:none;width:46px;height:46px;border:0;border-radius:var(--r);cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;place-items:center;
}
.aps-hdr.is-stuck .aps-burger{background:var(--ink);color:var(--sun)}
.aps-burger svg{width:22px;height:22px}

/* drawer */
.aps-scrim{position:fixed;inset:0;background:rgba(20,18,10,.6);opacity:0;visibility:hidden;transition:.25s;z-index:190}
.aps-scrim.is-open{opacity:1;visibility:visible}
.aps-draw{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:#fff;z-index:200;
  transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-20px 0 60px -30px rgba(20,18,10,.7);
}
.aps-draw.is-open{transform:none}
.aps-draw__h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--sun);border-bottom:1px solid var(--amber)}
.aps-draw__h b{font-family:var(--fd);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.aps-draw__x{width:40px;height:40px;border:1px solid rgba(20,18,10,.3);background:transparent;border-radius:var(--r);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.aps-draw__b{padding:12px;overflow-y:auto;flex:1}
.aps-draw__b a{display:block;padding:12px 14px;text-decoration:none;color:var(--ink);font-family:var(--fd);font-weight:600;font-size:.94rem;border-radius:6px}
.aps-draw__b a:hover{background:var(--wash)}
.aps-draw__b .aps-sub{padding-left:26px;font-weight:500;font-family:var(--fb);font-size:.88rem;color:var(--muted)}

/* ===================== HERO ===================== */
/* FIX 8: stage reserves header height; caption clears the control row. */
.aps-hero{position:relative;background:var(--ink);isolation:isolate}
.aps-stage{position:relative;height:clamp(560px,80vh,780px);overflow:hidden}
.aps-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .9s ease;
  background-image:var(--img);background-size:cover;background-position:center;
  transform:scale(1.06);
}
.aps-slide.is-on{opacity:1;animation:apsKen 9s linear forwards}
@keyframes apsKen{from{transform:scale(1.06)}to{transform:scale(1)}}
.aps-stage::before{
  content:"";position:absolute;inset:0 0 auto;height:230px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,10,.78),rgba(20,18,10,0));
}
.aps-stage::after{
  content:"";position:absolute;inset:auto 0 0;height:62%;z-index:5;pointer-events:none;
  background:linear-gradient(0deg,rgba(20,18,10,.95) 8%,rgba(20,18,10,.6) 45%,rgba(20,18,10,0));
}
.aps-cap{position:absolute;left:0;right:0;bottom:0;z-index:8;padding-bottom:112px}
.aps-cap__in{max-width:640px}
.aps-cap .aps-badge{margin-bottom:14px}
.aps-cap h1{font-size:clamp(1.75rem,3.6vw,2.75rem);color:#fff;font-weight:800;margin-bottom:12px}
.aps-cap p{color:rgba(255,255,255,.85);font-size:1rem;max-width:540px;margin-bottom:22px}
.aps-cap__btns{display:flex;gap:12px;flex-wrap:wrap}
.aps-slide__body{opacity:0;transform:translateY(18px);transition:opacity .55s .2s,transform .55s .2s}
.aps-slide__body.is-on{opacity:1;transform:none}

/* FIX 2: controls live in one row inside the container. No mid-height arrows. */
.aps-ctrl{position:absolute;left:0;right:0;bottom:30px;z-index:9}
.aps-ctrl__in{display:flex;align-items:center;gap:14px}
.aps-dots{display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:wrap}
.aps-dot{width:52px;height:4px;background:rgba(255,255,255,.3);border:0;padding:0;cursor:pointer;border-radius:0;position:relative;overflow:hidden}
.aps-dot i{position:absolute;inset:0 100% 0 0;background:var(--sun);transition:right 0s}
.aps-dot.is-on i{right:0;transition:right 6.5s linear}
.aps-count{font-family:var(--fd);font-size:.78rem;color:rgba(255,255,255,.78);letter-spacing:.08em;white-space:nowrap}
.aps-count b{color:var(--sun)}
.aps-arrs{margin-left:auto;display:flex;gap:8px;flex:0 0 auto}
.aps-arr{
  width:46px;height:46px;border:0;border-radius:var(--r);cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,color .2s;
}
.aps-arr:hover{background:var(--sun);color:var(--ink)}
.aps-arr svg{width:21px;height:21px}

/* ===================== PLEDGE STRIP ===================== */
/* FIX 4: text block is a flex column. */
.aps-pledge{background:var(--ink);color:var(--sun-3)}
.aps-pledge__in{display:flex;align-items:center;gap:18px;padding:18px 0;flex-wrap:wrap}
.aps-pledge__ico{width:28px;height:28px;flex:0 0 28px;color:var(--sun)}
.aps-pledge__t{display:flex;flex-direction:column;min-width:240px;flex:1 1 340px}
.aps-pledge__t b{display:block;font-family:var(--fd);font-size:1rem;color:var(--sun);line-height:1.35}
.aps-pledge__t span{display:block;font-size:.9rem;color:rgba(255,255,255,.7);line-height:1.45;margin-top:2px}
.aps-pledge a{
  flex:0 0 auto;text-decoration:none;font-family:var(--fd);font-weight:700;font-size:.86rem;
  background:var(--sun);color:var(--ink);padding:11px 18px;border-radius:var(--r);
  display:inline-flex;gap:8px;align-items:center;white-space:nowrap;
}
.aps-pledge a:hover{background:var(--sun-2)}

/* ===================== SECTION SHELL ===================== */
.aps-sec{padding:84px 0}
.aps-sec--wash{background:var(--wash)}
.aps-sec__h{display:flex;align-items:flex-end;gap:28px;margin-bottom:34px;flex-wrap:wrap}
.aps-sec__h>div:first-child{flex:1 1 320px;min-width:0}
.aps-sec__h h2{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:700;margin-top:12px}
.aps-sec__h p{color:var(--muted);max-width:430px;font-size:.95rem;flex:0 1 430px}

/* ===================== SERVICES ===================== */
.aps-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.aps-tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  text-decoration:none;display:flex;flex-direction:column;gap:10px;min-height:178px;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.aps-tile:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 22px 46px -34px rgba(20,18,10,.75)}
.aps-tile__ico{width:42px;height:42px;border-radius:6px;background:var(--wash);color:var(--ink);display:grid;place-items:center;border:1px solid var(--line)}
.aps-tile:hover .aps-tile__ico{background:var(--sun);border-color:var(--sun)}
.aps-tile__ico svg{width:21px;height:21px}
.aps-tile h3{font-size:1rem;font-weight:700}
.aps-tile p{font-size:.86rem;color:var(--muted);line-height:1.5}
.aps-tile__go{margin-top:auto;font-family:var(--fd);font-size:.78rem;font-weight:700;letter-spacing:.03em;display:flex;align-items:center;gap:6px;transition:gap .18s}
.aps-tile:hover .aps-tile__go{gap:11px}
.aps-tile--wide{grid-column:span 2}
/* featured card: solid Anambra yellow, black type. */
.aps-tile--sun{background:var(--sun);border-color:var(--sun)}
.aps-tile--sun p{color:rgba(20,18,10,.72)}
.aps-tile--sun .aps-tile__ico{background:var(--ink);color:var(--sun);border-color:var(--ink)}
.aps-tile--sun:hover{border-color:var(--ink);background:var(--sun-2)}
.aps-tile--sun:hover .aps-tile__ico{background:var(--ink);color:var(--sun)}

/* ===================== LEDGER + 21 CURRENTS ===================== */
/* FIX 5: smaller clamp, tabular figures, earlier column steps. */
.aps-ledger{background:var(--ink);color:#fff;padding:62px 0 0}
.aps-ledger__g{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.aps-cell{background:var(--ink);padding:22px 16px;min-width:0}
.aps-cell b{
  display:block;font-family:var(--fd);font-weight:800;
  font-size:clamp(1.35rem,2vw,1.8rem);color:var(--sun);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.1;
}
.aps-cell span{display:block;font-size:.77rem;color:rgba(255,255,255,.6);margin-top:5px;line-height:1.35}
.aps-ledger__note{font-size:.76rem;color:rgba(255,255,255,.4);margin-top:14px}

.aps-band{margin-top:36px;padding-bottom:36px}
.aps-band__lbl{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.aps-band__lbl>span{font-family:var(--fd);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
/* FIX 1: lit LGA names live here and wrap. No absolute labels on the strokes. */
.aps-band__lit{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;max-width:640px}
.aps-band__lit span{
  font-family:var(--fd);font-size:.68rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink);background:var(--sun);padding:3px 8px;border-radius:0;white-space:nowrap;
}
.aps-strokes{display:flex;gap:5px;height:56px;align-items:flex-end}
.aps-stroke{
  flex:1;min-width:0;background:rgba(255,255,255,.14);height:34%;position:relative;
  border:0;padding:0;cursor:pointer;border-radius:0;
  transition:height .5s cubic-bezier(.4,0,.2,1),background .35s;
}
.aps-stroke.is-on{background:var(--sun);height:100%}
.aps-stroke:hover{background:var(--sun-2)}
/* hover label only, one at a time, so nothing can collide */
.aps-stroke::after{
  content:attr(data-lga);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%);white-space:nowrap;font-family:var(--fd);
  font-size:.68rem;font-weight:700;color:var(--ink);background:var(--sun);
  padding:4px 9px;opacity:0;pointer-events:none;transition:opacity .18s;z-index:4;
}
.aps-stroke:hover::after,.aps-stroke:focus-visible::after{opacity:1}

/* ===================== ZONES ===================== */
.aps-ztabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.aps-ztab{
  border:1px solid var(--line);background:#fff;cursor:pointer;border-radius:var(--r);
  padding:12px 18px;font-family:var(--fd);font-weight:700;font-size:.9rem;color:var(--ink);
  display:flex;align-items:center;gap:9px;transition:.18s;white-space:nowrap;
}
.aps-ztab small{font-weight:600;font-size:.71rem;color:var(--muted)}
.aps-ztab:hover{border-color:var(--ink)}
.aps-ztab.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.aps-ztab.is-on small{color:var(--sun)}

.aps-zpanel{display:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;grid-template-columns:1.15fr .85fr}
.aps-zpanel.is-on{display:grid}
.aps-zpanel__l{padding:34px;min-width:0}
.aps-zpanel__l h3{font-size:1.55rem;font-weight:700;margin-bottom:6px}
.aps-zpanel__l>p{color:var(--muted);font-size:.93rem;margin-bottom:22px}
.aps-zmeta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:22px}
.aps-zmeta div{background:#fff;padding:15px 16px;min-width:0}
.aps-zmeta small{display:block;font-size:.69rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.aps-zmeta b{font-family:var(--fd);font-size:.97rem;font-weight:700;font-variant-numeric:tabular-nums}
.aps-zlga{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.aps-zbtns{display:flex;gap:10px;flex-wrap:wrap}
/* right column is the yellow field */
.aps-zpanel__r{background:var(--sun);color:var(--ink);padding:34px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.aps-zpanel__r .aps-eyebrow{margin-bottom:18px}
.aps-mic{display:flex;gap:16px;align-items:center;min-width:0}
.aps-mic__av{
  width:68px;height:68px;flex:0 0 68px;border-radius:var(--r);background:var(--ink);
  display:grid;place-items:center;font-family:var(--fd);font-weight:800;font-size:1.3rem;color:var(--sun);
}
.aps-mic__t{min-width:0}
.aps-mic__t b{display:block;font-family:var(--fd);font-size:1.04rem;line-height:1.3}
.aps-mic__t span{display:block;font-size:.84rem;color:rgba(20,18,10,.68);margin-top:2px}
.aps-zpanel__r hr{border:0;border-top:1px solid rgba(20,18,10,.22);margin:24px 0}
.aps-zcontact{font-size:.89rem;color:rgba(20,18,10,.78);line-height:1.8}
.aps-zcontact b{color:var(--ink);font-family:var(--fd)}

/* ===================== MANDATE ===================== */
.aps-mandate{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.aps-mrow{background:#fff;padding:28px 26px;transition:background .2s;min-width:0}
.aps-mrow:hover{background:var(--wash)}
.aps-mrow__k{display:block;font-family:var(--fd);font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--amber);margin-bottom:12px}
.aps-mrow b{display:block;font-family:var(--fd);font-size:1rem;font-weight:700;margin-bottom:8px;line-height:1.35}
.aps-mrow p{font-size:.88rem;color:var(--muted);line-height:1.6}

/* ===================== LEADERSHIP ===================== */
.aps-leads{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.aps-lead{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.aps-lead__ph{aspect-ratio:4/3.4;background:var(--wash) var(--img) center/cover no-repeat;position:relative}
.aps-lead__ph .aps-badge{position:absolute;left:12px;bottom:12px}
.aps-lead__b{padding:16px 18px 20px;min-width:0}
.aps-lead__b b{display:block;font-family:var(--fd);font-size:.98rem;font-weight:700;line-height:1.32}
.aps-lead__b span{display:block;font-size:.82rem;color:var(--muted);margin-top:4px;line-height:1.4}

/* ===================== NEWS ===================== */
.aps-split{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.aps-nlist{border-top:1px solid var(--line)}
.aps-nitem{display:flex;gap:18px;padding:20px 4px;border-bottom:1px solid var(--line);text-decoration:none;align-items:flex-start;transition:background .18s}
.aps-nitem:hover{background:var(--wash)}
/* FIX 6: fixed square, clipped, reduced tracking. */
.aps-date{
  flex:0 0 62px;width:62px;height:62px;border-radius:0;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;line-height:1;
}
.aps-date b{font-family:var(--fd);font-size:1.3rem;font-weight:800;line-height:1}
.aps-date span{font-size:.63rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sun);margin-top:4px;line-height:1}
.aps-nitem__t{min-width:0}
.aps-nitem__t h4{font-size:1rem;font-weight:700;margin:7px 0 5px;line-height:1.36}
.aps-nitem__t p{font-size:.86rem;color:var(--muted);line-height:1.55}

.aps-pager{display:flex;align-items:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.aps-pager button{min-width:38px;height:38px;border:1px solid var(--line);background:#fff;cursor:pointer;border-radius:6px;font-family:var(--fd);font-weight:600;font-size:.85rem;color:var(--ink)}
.aps-pager button:hover:not(:disabled){border-color:var(--ink)}
.aps-pager button.is-on{background:var(--ink);border-color:var(--ink);color:var(--sun)}
.aps-pager button:disabled{opacity:.4;cursor:not-allowed}
.aps-pager span{margin-left:auto;font-size:.81rem;color:var(--muted);white-space:nowrap}

.aps-side{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.aps-side h3{font-size:1.04rem;font-weight:700;margin-bottom:4px}
.aps-side>p{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.aps-circ{border-top:1px solid var(--line)}
.aps-circ a{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none}
.aps-circ a:hover b{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.aps-circ svg{width:18px;height:18px;color:var(--amber);flex:0 0 18px;margin-top:2px}
.aps-circ span{min-width:0}
.aps-circ b{display:block;font-family:var(--fb);font-weight:600;font-size:.88rem;line-height:1.4}
.aps-circ small{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}

/* inline note panel - this is what replaces alert() */
.aps-note{display:none;margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--wash);padding:14px 16px;font-size:.86rem}
.aps-note.is-on{display:block}
.aps-note b{font-family:var(--fd);display:block;margin-bottom:3px;font-size:.89rem}

/* ===================== EXEC STRIP ===================== */
/* FIX 7: .aps-exec__t is a flex column. */
.aps-exec{background:var(--ink);color:#fff}
.aps-exec__in{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.14)}
.aps-exec__c{background:var(--ink);padding:32px 32px 32px 0;display:flex;gap:20px;align-items:center;min-width:0}
.aps-exec__c:last-child{padding-left:32px}
.aps-exec__ph{width:86px;height:86px;flex:0 0 86px;border-radius:var(--r);background:var(--slate) var(--img) center/cover no-repeat}
.aps-exec__t{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.aps-exec__t b{font-family:var(--fd);font-size:1.12rem;font-weight:700;line-height:1.3}
.aps-exec__t>span:last-child{font-size:.86rem;color:rgba(255,255,255,.66)}

/* ===================== FOOTER ===================== */
.aps-foot{background:var(--ink);color:#B6AF9E;padding:64px 0 0;font-size:.88rem;border-top:3px solid var(--sun)}
.aps-foot__g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px}
.aps-foot h5{font-family:var(--fd);font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sun);margin:0 0 16px}
.aps-foot a{display:block;color:#B6AF9E;text-decoration:none;padding:5px 0}
.aps-foot a:hover{color:var(--sun)}
.aps-foot__b{display:flex;gap:13px;align-items:center;margin-bottom:18px}
.aps-foot__b .aps-brand__t i{color:#fff}
.aps-foot p{line-height:1.75;color:#8D8676;font-size:.85rem}
.aps-foot__sub{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.81rem;color:#7D7767}
.aps-foot__sub a{display:inline;color:var(--sun)}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1280px){
  .aps-hdr__ph{display:none}            /* FIX 3 */
}
@media (max-width:1180px){
  .aps-nav{display:none}                /* FIX 3 */
  .aps-burger{display:grid}
  .aps-svc{grid-template-columns:repeat(2,1fr)}
  .aps-tile--wide{grid-column:span 2}
  .aps-leads{grid-template-columns:repeat(2,1fr)}
  .aps-mandate{grid-template-columns:repeat(2,1fr)}
  .aps-ledger__g{grid-template-columns:repeat(3,1fr)}   /* FIX 5 */
  .aps-split{grid-template-columns:1fr}
  .aps-foot__g{grid-template-columns:1fr 1fr}
  .aps-band__lit{justify-content:flex-start;max-width:none}
}
@media (max-width:900px){
  .aps-zpanel.is-on{grid-template-columns:1fr}
  .aps-exec__in{grid-template-columns:1fr}
  .aps-exec__c{padding:26px 0}
  .aps-exec__c:last-child{padding-left:0;border-top:1px solid rgba(255,255,255,.14)}
}
@media (max-width:680px){
  :root{--hdrH:78px}
  .aps-wrap{padding:0 18px}
  .aps-sec{padding:56px 0}
  .aps-svc{grid-template-columns:1fr}
  .aps-tile--wide{grid-column:span 1}
  .aps-leads,.aps-mandate{grid-template-columns:1fr}
  .aps-ledger__g{grid-template-columns:repeat(2,1fr)}   /* FIX 5 */
  .aps-cap{padding-bottom:104px}
  .aps-dot{width:30px}
  .aps-count{display:none}
  .aps-top__sp{display:none}
  .aps-zpanel__l,.aps-zpanel__r{padding:24px}
  .aps-zmeta{grid-template-columns:1fr}
  .aps-foot__g{grid-template-columns:1fr}
  .aps-brand__t i{font-size:.92rem}
  .aps-brand__t em{display:none}
  .aps-strokes{height:44px}
}
@media (max-width:480px){
  .aps-strokes{gap:3px;height:38px}
  .aps-band__lit span{font-size:.63rem;padding:2px 6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .aps-slide.is-on{animation:none;transform:none}
}/* ============================================================================
   PPSSC ANAMBRA  ·  ADDITIONS FOR THE ASP.NET BUILD
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   Everything above this point is the approved v2 demo stylesheet, unchanged.
   Below are the components that only exist once the site is real: the inner
   page hero, breadcrumbs, CMS prose, the accordion and card templates, the
   notice ticker, empty states, and the anchor-based pager (the demo used
   buttons; the server pager emits links so pages are crawlable and shareable).
   ========================================================================== */

/* ------------------------------------------------- header state per page */
/* On the home page the header overlays the hero. On every inner page it is
   solid from the first paint, so .is-stuck is applied server-side and the
   scroll handler only manages the home page. */
.aps-hdr--solid{position:sticky;top:0}
.aps-hdr--solid.is-stuck{position:sticky}
.aps-body--inner{padding-top:0}

/* ------------------------------------------------------------ page hero */
.aps-phero{
  background:var(--ink);color:#fff;padding:44px 0 52px;
  border-bottom:3px solid var(--sun);
}
.aps-phero h1{
  font-size:clamp(1.65rem,3.4vw,2.6rem);font-weight:800;color:#fff;
  max-width:900px;margin-top:14px;
}
.aps-phero__sub{
  color:rgba(255,255,255,.72);font-size:1rem;max-width:640px;margin-top:12px;line-height:1.6;
}
.aps-phero .aps-eyebrow{margin-top:16px}

.aps-crumb{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.55)}
.aps-crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.aps-crumb a:hover{color:var(--sun)}
.aps-crumb .is-on{color:var(--sun);font-weight:600}

/* ---------------------------------------------------------------- prose */
/* CMS body content. Every element an editor can produce is styled here so a
   page written in the rich-text editor cannot render unstyled. */
.aps-prose{max-width:74ch;font-size:1.02rem;line-height:1.75;color:#2E2A21}
.aps-prose--wide{max-width:none}
.aps-prose>*+*{margin-top:1.05em}
.aps-prose h2{font-size:1.5rem;font-weight:700;margin-top:1.8em;letter-spacing:-.02em}
.aps-prose h3{font-size:1.2rem;font-weight:700;margin-top:1.7em}
.aps-prose h4{font-size:1.03rem;font-weight:700;margin-top:1.5em}
.aps-prose h2:first-child,.aps-prose h3:first-child{margin-top:0}
.aps-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.aps-prose a:hover{background:var(--sun-3)}
.aps-prose ul,.aps-prose ol{padding-left:1.35em}
.aps-prose li+li{margin-top:.45em}
.aps-prose ul{list-style:none;padding-left:0}
.aps-prose ul li{position:relative;padding-left:1.5em}
.aps-prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--sun);border-radius:0;
}
.aps-prose blockquote{
  border:1px solid var(--line);border-radius:var(--r);background:var(--wash);
  padding:20px 24px;font-size:1.02rem;color:#3A3428;
}
.aps-prose blockquote p+p{margin-top:.8em}
.aps-prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.aps-prose img{border-radius:var(--r);border:1px solid var(--line);margin:1.4em 0}
.aps-prose figure{margin:1.6em 0}
.aps-prose figcaption{font-size:.85rem;color:var(--muted);margin-top:8px}
.aps-prose table{width:100%;border-collapse:collapse;font-size:.92rem;display:block;overflow-x:auto}
.aps-prose th,.aps-prose td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.aps-prose th{background:var(--wash);font-family:var(--fd);font-weight:700;font-size:.84rem;letter-spacing:.02em}
.aps-prose caption{caption-side:bottom;font-size:.82rem;color:var(--muted);padding-top:8px;text-align:left}

/* prose + sidebar template */
.aps-psplit{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start}

/* -------------------------------------------------------- accordion tpl */
.aps-acc{max-width:860px;border-top:1px solid var(--line)}
.aps-acc__i{border-bottom:1px solid var(--line)}
.aps-acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:0;cursor:pointer;padding:20px 4px;text-align:left;
  font-family:var(--fd);font-weight:700;font-size:1.02rem;color:var(--ink);
}
.aps-acc__q:hover{color:var(--amber)}
.aps-acc__q svg{width:20px;height:20px;flex:0 0 20px;transition:transform .24s}
.aps-acc__q[aria-expanded="true"] svg{transform:rotate(180deg)}
.aps-acc__a{display:none;padding:0 4px 24px}
.aps-acc__a.is-on{display:block}

/* ------------------------------------------------------------ cards tpl */
.aps-pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.aps-pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.aps-pcard h3{font-size:1.05rem;font-weight:700;margin-bottom:10px}
.aps-pcard .aps-prose{font-size:.92rem;line-height:1.65}

/* --------------------------------------------------- sibling page links */
.aps-plist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.aps-plist__i{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  text-decoration:none;display:block;transition:border-color .2s,transform .2s;
}
.aps-plist__i:hover{border-color:var(--ink);transform:translateY(-2px)}
.aps-plist__i b{display:block;font-family:var(--fd);font-size:.98rem;font-weight:700;line-height:1.35}
.aps-plist__i span{display:block;font-size:.85rem;color:var(--muted);margin-top:5px;line-height:1.5}

/* --------------------------------------------------------- notice ticker */
.aps-ticker{background:var(--sun);border-bottom:1px solid var(--amber)}
.aps-ticker__in{display:flex;align-items:center;gap:16px;padding:11px 0;min-width:0}
.aps-ticker__track{
  display:flex;align-items:center;gap:14px;overflow-x:auto;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.aps-ticker__track::-webkit-scrollbar{display:none}
.aps-ticker__track a{
  color:var(--ink);font-size:.89rem;font-weight:500;white-space:nowrap;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
.aps-ticker__dot{color:rgba(20,18,10,.4);flex:0 0 auto}

/* --------------------------------- tile variant used by "Report a levy" */
.aps-tile--ink{background:var(--ink);border-color:var(--ink);color:#fff}
.aps-tile--ink h3{color:#fff}
.aps-tile--ink p{color:rgba(255,255,255,.74)}
.aps-tile--ink .aps-tile__ico{background:rgba(255,255,255,.12);border-color:transparent;color:var(--sun)}
.aps-tile--ink .aps-tile__go{color:var(--sun)}
.aps-tile--ink:hover{border-color:var(--sun)}
.aps-tile--ink:hover .aps-tile__ico{background:var(--sun);color:var(--ink)}
.aps-tile--ink .aps-badge--line{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.8);background:transparent}

/* ------------------------- leadership card with no photograph uploaded */
/* Renders the person's initials rather than a broken image or a grey box
   that reads as a missing asset. */
.aps-lead__ph[data-initials]::after{
  content:attr(data-initials);position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:var(--fd);font-weight:800;font-size:2.2rem;
  color:var(--amber);background:var(--wash);
}

/* ------------------------------------------------------------ pager (a) */
/* The server pager emits anchors and spans, not buttons, so each page has a
   real crawlable URL. Shapes match the demo exactly. */
.aps-pager a,
.aps-pager span.is-on,
.aps-pager span.is-off,
.aps-pager span.is-gap{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;border-radius:6px;
  font-family:var(--fd);font-weight:600;font-size:.85rem;color:var(--ink);
  text-decoration:none;padding:0 10px;
}
.aps-pager a:hover{border-color:var(--ink)}
.aps-pager span.is-on{background:var(--ink);border-color:var(--ink);color:var(--sun)}
.aps-pager span.is-off{opacity:.4}
.aps-pager span.is-gap{border-color:transparent;background:transparent}
.aps-pager .aps-pager__c{
  margin-left:auto;border:0;background:none;min-width:0;height:auto;padding:0;
  font-family:var(--fb);font-weight:400;font-size:.81rem;color:var(--muted);white-space:nowrap;
}

/* ------------------------------------------------------------ empty state */
/* An empty screen is an invitation to act, not an apology. */
.aps-empty{
  border:1px solid var(--line);border-radius:var(--r);background:var(--wash);
  padding:26px;text-align:left;
}
.aps-empty b{display:block;font-family:var(--fd);font-size:1rem;font-weight:700;margin-bottom:5px}
.aps-empty span{display:block;font-size:.9rem;color:var(--muted);line-height:1.55}
.aps-empty--lg{padding:44px;max-width:640px}

/* -------------------------------------------------------------- helpers */
.aps-more{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.aps-gap-22{height:22px}

/* ---------------------------------------------------------- forms (P4) */
.aps-field{margin-bottom:18px}
.aps-field label{display:block;font-family:var(--fd);font-weight:600;font-size:.87rem;margin-bottom:7px}
.aps-field .hint{display:block;font-size:.8rem;color:var(--muted);margin-bottom:7px;font-weight:400}
.aps-input,.aps-select,.aps-textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:12px 14px;font-family:var(--fb);font-size:.95rem;color:var(--ink);
}
.aps-input:focus,.aps-select:focus,.aps-textarea:focus{outline:3px solid var(--sun);outline-offset:1px;border-color:var(--ink)}
.aps-textarea{min-height:150px;resize:vertical}
.aps-err{display:block;font-size:.83rem;color:#A11B1B;margin-top:6px;font-weight:600}
.aps-input.has-err,.aps-select.has-err,.aps-textarea.has-err{border-color:#A11B1B}

/* result panel shown after a form posts. never an alert(). */
.aps-result{border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:24px}
.aps-result--ok{background:var(--wash);border-color:var(--amber)}
.aps-result--bad{background:#FDF2F2;border-color:#E0B4B4}
.aps-result b{display:block;font-family:var(--fd);font-size:1.02rem;margin-bottom:5px}
.aps-result span{display:block;font-size:.92rem;color:var(--muted);line-height:1.6}
.aps-result .aps-ref{
  display:inline-block;margin-top:12px;background:var(--ink);color:var(--sun);
  font-family:var(--fd);font-weight:700;letter-spacing:.08em;padding:9px 14px;border-radius:0;
}

/* ---------------------------------------------------------- responsive */
@media (max-width:1180px){
  .aps-pcards{grid-template-columns:repeat(2,1fr)}
  .aps-plist{grid-template-columns:repeat(2,1fr)}
  .aps-psplit{grid-template-columns:1fr;gap:34px}
}
@media (max-width:680px){
  .aps-phero{padding:32px 0 38px}
  .aps-pcards,.aps-plist{grid-template-columns:1fr}
  .aps-prose{font-size:.98rem}
  .aps-empty--lg{padding:28px}
}

/* ============================================================================
   PHASE 2  ·  PUBLIC INNER PAGES
   Bronzebit Consult Ltd
   Filter bars, the school register table, article layout, zone cards,
   department cards, download rows and search results.
   ========================================================================== */

/* ------------------------------------------------------------- filter bar */
.aps-filter{
  display:grid;grid-template-columns:1.6fr 1fr auto;gap:14px;align-items:end;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin-bottom:20px;
}
.aps-filter--4{grid-template-columns:1.5fr 1fr 1fr 1fr auto}
.aps-filter__f{min-width:0}
.aps-filter__f--wide{grid-column:span 1}
.aps-filter__f label{
  display:block;font-family:var(--fd);font-weight:600;font-size:.78rem;
  letter-spacing:.04em;margin-bottom:7px;color:var(--muted);
}
.aps-filter__a{display:flex;gap:9px;align-items:end;flex-wrap:wrap}
.aps-filter__a .aps-btn{padding:12px 20px}

/* active filter chips. square, per house rule. */
.aps-chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.aps-chips__l{font-size:.8rem;color:var(--muted);font-family:var(--fd);font-weight:600}
.aps-chip{
  display:inline-flex;align-items:center;gap:7px;border-radius:0;
  background:var(--sun);color:var(--ink);text-decoration:none;
  font-family:var(--fd);font-weight:700;font-size:.78rem;padding:6px 10px;
}
.aps-chip:hover{background:var(--ink);color:var(--sun)}
.aps-chip svg{width:13px;height:13px}

/* --------------------------------------------------- school register table */
/* Real table on desktop, stacked cards below 860px, one set of markup.
   data-label on each cell supplies the row heading in the stacked view. */
.aps-tablewrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.aps-stable{width:100%;border-collapse:collapse;font-size:.92rem}
.aps-stable thead th{
  background:var(--ink);color:var(--sun);text-align:left;
  font-family:var(--fd);font-weight:700;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;padding:14px 16px;white-space:nowrap;
}
.aps-stable tbody td{padding:15px 16px;border-top:1px solid var(--line);vertical-align:top}
.aps-stable tbody tr:hover{background:var(--wash)}
.aps-stable__n{
  font-family:var(--fd);font-weight:700;color:var(--ink);text-decoration:none;
  display:block;line-height:1.35;
}
.aps-stable__n:hover{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.aps-stable__s{display:block;font-size:.79rem;color:var(--muted);margin-top:3px}
.aps-stable a{color:var(--ink)}

@media (max-width:860px){
  .aps-tablewrap{border:0;background:none;overflow:visible}
  .aps-stable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .aps-stable,.aps-stable tbody,.aps-stable tr,.aps-stable td{display:block;width:100%}
  .aps-stable tr{
    background:#fff;border:1px solid var(--line);border-radius:var(--r);
    margin-bottom:12px;padding:6px 0;
  }
  .aps-stable tbody td{border-top:0;padding:9px 18px;display:flex;gap:14px;align-items:baseline}
  .aps-stable tbody td:first-child{
    padding-top:16px;padding-bottom:12px;border-bottom:1px solid var(--line);
    margin-bottom:8px;display:block;
  }
  .aps-stable tbody td::before{
    content:attr(data-label);flex:0 0 40%;font-family:var(--fd);font-weight:600;
    font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  }
  .aps-stable tbody td:first-child::before{display:none}
  .aps-stable tbody td:last-child{padding-bottom:16px}
}

/* ------------------------------------------------------------- article page */
.aps-artmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.aps-artmeta__d{font-size:.85rem;color:rgba(255,255,255,.7)}
.aps-artimg{margin-bottom:28px}
.aps-artimg img{width:100%;border-radius:var(--r);border:1px solid var(--line)}

.aps-nitem__d{display:block;font-size:.78rem;color:var(--muted);margin-top:7px}

.aps-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px}
.aps-prevnext__i{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  text-decoration:none;display:block;transition:border-color .2s,transform .2s;
}
.aps-prevnext__i:hover{border-color:var(--ink);transform:translateY(-2px)}
.aps-prevnext__i small{
  display:block;font-family:var(--fd);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);margin-bottom:6px;
}
.aps-prevnext__i b{display:block;font-family:var(--fd);font-size:.94rem;font-weight:700;line-height:1.4}
.aps-prevnext__i.is-next{text-align:right}
.aps-prevnext__i.is-off{border:0;background:none}

.aps-share{display:flex;gap:8px;flex-wrap:wrap}
.aps-share__b{
  border:1px solid var(--line);background:#fff;border-radius:var(--r);cursor:pointer;
  padding:10px 16px;font-family:var(--fd);font-weight:600;font-size:.85rem;
  color:var(--ink);text-decoration:none;
}
.aps-share__b:hover{border-color:var(--ink);background:var(--wash)}

/* --------------------------------------------------------- sidebar pieces */
.aps-sidebreak{border-top:1px solid var(--line);margin:26px 0 22px}
.aps-catlist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.aps-catlist__i{
  padding:12px 2px;border-bottom:1px solid var(--line);text-decoration:none;
  font-size:.89rem;color:var(--ink);line-height:1.45;
}
.aps-catlist__i:hover{color:var(--amber)}
.aps-catlist__i.is-on{font-weight:700;color:var(--amber)}

/* ---------------------------------------------------------- zone cards */
.aps-zcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 32px;margin-bottom:16px;scroll-margin-top:110px;
}
.aps-zcard__h{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.aps-zcard__h h2{font-size:1.5rem;font-weight:700;margin-top:8px}
.aps-zcard__av{
  width:62px;height:62px;flex:0 0 62px;border-radius:var(--r);background:var(--sun);
  display:grid;place-items:center;font-family:var(--fd);font-weight:800;
  font-size:1.2rem;color:var(--ink);
}
.aps-zcard__g{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:20px;
}
.aps-zcard__g div{background:#fff;padding:15px 16px;min-width:0}
.aps-zcard__g small{
  display:block;font-size:.69rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;
}
.aps-zcard__g b{font-family:var(--fd);font-size:.95rem;font-weight:700;line-height:1.35;display:block}
.aps-zcard__a{font-size:.9rem;color:var(--muted);line-height:1.7;margin-bottom:18px}
.aps-zcard__a b{color:var(--ink);font-family:var(--fd);font-size:.85rem}
.aps-zcontact--light{color:var(--muted);font-size:.89rem;line-height:1.75}
.aps-zcontact--light b{color:var(--ink);font-family:var(--fd)}

/* ------------------------------------------------------- department cards */
.aps-pcard__s{font-size:.9rem;color:var(--muted);line-height:1.6;margin-bottom:12px}
.aps-pcard__h{display:flex;gap:12px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.aps-pcard__av{
  width:40px;height:40px;flex:0 0 40px;border-radius:var(--r);background:var(--ink);
  display:grid;place-items:center;font-family:var(--fd);font-weight:800;
  font-size:.85rem;color:var(--sun);
}
.aps-pcard__h b{display:block;font-family:var(--fd);font-size:.9rem;font-weight:700;line-height:1.3}
.aps-pcard__h small{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}

/* --------------------------------------------------------- download rows */
.aps-dlist{border-top:1px solid var(--line)}
.aps-dfile{
  display:flex;gap:18px;align-items:flex-start;padding:20px 4px;
  border-bottom:1px solid var(--line);text-decoration:none;transition:background .18s;
}
.aps-dfile:hover{background:var(--wash)}
.aps-dfile__x{
  flex:0 0 58px;width:58px;height:58px;border-radius:var(--r);background:var(--ink);
  color:var(--sun);display:grid;place-items:center;
  font-family:var(--fd);font-weight:800;font-size:.72rem;letter-spacing:.04em;
}
.aps-dfile__t{min-width:0;flex:1}
.aps-dfile__t b{display:block;font-family:var(--fd);font-size:1rem;font-weight:700;line-height:1.35;margin:7px 0 4px}
.aps-dfile__t p{font-size:.87rem;color:var(--muted);line-height:1.55;margin-bottom:5px}
.aps-dfile__t small{display:block;font-size:.78rem;color:var(--muted)}
.aps-dfile__g{
  flex:0 0 42px;width:42px;height:42px;border-radius:var(--r);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);
  align-self:center;transition:.18s;
}
.aps-dfile:hover .aps-dfile__g{background:var(--sun);border-color:var(--sun)}
.aps-dfile__g svg{width:19px;height:19px}

/* ---------------------------------------------------------- search results */
.aps-searchcount{font-size:.92rem;color:var(--muted);margin-bottom:18px}
.aps-searchcount b{color:var(--ink)}
.aps-slist{border-top:1px solid var(--line)}
.aps-sitem{
  display:block;padding:20px 4px;border-bottom:1px solid var(--line);
  text-decoration:none;transition:background .18s;
}
.aps-sitem:hover{background:var(--wash)}
.aps-sitem b{display:block;font-family:var(--fd);font-size:1.02rem;font-weight:700;line-height:1.35;margin:8px 0 5px}
.aps-sitem p{font-size:.88rem;color:var(--muted);line-height:1.55}
.aps-sitem small{display:block;font-size:.78rem;color:var(--muted);margin-top:6px}

/* ------------------------------------------------------ definition record */
.aps-dl dl{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.aps-dl__r{display:grid;grid-template-columns:200px 1fr;gap:0;border-bottom:1px solid var(--line)}
.aps-dl__r:last-child{border-bottom:0}
.aps-dl dt{
  padding:14px 18px;background:var(--wash);font-family:var(--fd);font-weight:600;
  font-size:.82rem;color:var(--muted);
}
.aps-dl dd{margin:0;padding:14px 18px;font-size:.94rem}
.aps-dl dd a{color:var(--ink)}
@media (max-width:640px){
  .aps-dl__r{grid-template-columns:1fr}
  .aps-dl dt{padding-bottom:4px}
  .aps-dl dd{padding-top:4px}
}

/* ------------------------------------------------------------- misc phase 2 */
.aps-h2{font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:700;margin-top:10px}
.aps-leads--2{grid-template-columns:repeat(2,1fr);max-width:660px}

@media (max-width:1180px){
  .aps-filter,.aps-filter--4{grid-template-columns:1fr 1fr}
  .aps-filter__a{grid-column:1 / -1}
  .aps-zcard__g{grid-template-columns:repeat(2,1fr)}
  .aps-leads--2{grid-template-columns:repeat(2,1fr);max-width:none}
}
@media (max-width:680px){
  .aps-filter,.aps-filter--4{grid-template-columns:1fr;padding:18px}
  .aps-prevnext{grid-template-columns:1fr}
  .aps-prevnext__i.is-next{text-align:left}
  .aps-prevnext__i.is-off{display:none}
  .aps-zcard{padding:24px}
  .aps-zcard__g{grid-template-columns:1fr}
  .aps-leads--2{grid-template-columns:1fr}
  .aps-dfile{gap:14px}
  .aps-dfile__x{flex:0 0 48px;width:48px;height:48px;font-size:.66rem}
  .aps-dfile__g{display:none}
}

/* ============================================================================
   PHASE 3  ·  INTERACTIVE PAGES
   Bronzebit Consult Ltd
   Form groups, the honeypot, the school autocomplete, FAQ groups, events,
   the gallery grid and the lightbox.
   ========================================================================== */

/* ------------------------------------------------------------ form layout */
.aps-fgroup{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;margin-bottom:16px;
}
.aps-fgroup h2{font-size:1.15rem;font-weight:700;margin-bottom:6px}
.aps-fgroup__h{font-size:.9rem;color:var(--muted);line-height:1.55;margin-bottom:20px}
.aps-frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.aps-req{
  display:inline-block;background:var(--sun);color:var(--ink);border-radius:0;
  font-family:var(--fd);font-size:.6rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 6px;margin-left:6px;vertical-align:middle;
}
.aps-input--ref{
  font-family:var(--fd);font-size:1.15rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
}
.aps-errlist{margin:8px 0 0;padding-left:1.2em;font-size:.9rem;line-height:1.6}
.aps-errlist li+li{margin-top:5px}

/* checkbox with a full explanation beside it, not a bare label */
.aps-check{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.aps-check input[type="checkbox"]{
  width:22px;height:22px;flex:0 0 22px;margin-top:2px;accent-color:var(--ink);cursor:pointer;
}
.aps-check label{cursor:pointer;min-width:0}
.aps-check label b{display:block;font-family:var(--fd);font-size:.95rem;font-weight:700}
.aps-check label span{display:block;font-size:.86rem;color:var(--muted);line-height:1.55;margin-top:4px}

/* block revealed by the anonymity toggle */
.aps-reveal{overflow:hidden}
.aps-reveal.is-hidden{display:none}

/* HONEYPOT.
   Off-screen rather than display:none. Bots increasingly skip fields hidden
   with display:none or visibility:hidden, so those defeat the trap. */
.aps-hp{position:absolute!important;left:-9999px!important;top:auto!important;
        width:1px!important;height:1px!important;overflow:hidden!important}

/* -------------------------------------------------- school autocomplete */
.aps-ac{position:relative}
.aps-ac__list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:#fff;border:1px solid var(--ink);border-radius:var(--r);
  box-shadow:0 24px 48px -28px rgba(20,18,10,.6);
  max-height:290px;overflow-y:auto;display:none;
}
.aps-ac__list.is-open{display:block}
.aps-ac__i{
  display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:12px 15px;border-bottom:1px solid var(--line);font-family:var(--fb);
}
.aps-ac__i:last-child{border-bottom:0}
.aps-ac__i:hover,.aps-ac__i.is-on{background:var(--sun)}
.aps-ac__i b{display:block;font-family:var(--fd);font-size:.92rem;font-weight:700;line-height:1.35}
.aps-ac__i small{display:block;font-size:.79rem;color:var(--muted);margin-top:2px}
.aps-ac__i.is-on small{color:rgba(20,18,10,.7)}
.aps-ac__none{padding:13px 15px;font-size:.87rem;color:var(--muted)}

/* ---------------------------------------------------------- status legend */
.aps-statuskey{display:flex;flex-direction:column;gap:11px}
.aps-statuskey>div{display:flex;gap:11px;align-items:flex-start}
.aps-statuskey>div>span:last-child{font-size:.85rem;color:var(--muted);line-height:1.45}
.aps-catlist__s{display:block;font-size:.79rem;color:var(--muted);margin-top:2px}

/* ---------------------------------------------------------------- FAQ */
.aps-faqgroup{margin-bottom:38px}
.aps-faqgroup:last-child{margin-bottom:0}
.aps-faqgroup .aps-acc{margin-top:14px}

/* -------------------------------------------------------------- events */
.aps-elist{border-top:1px solid var(--line)}
.aps-eitem{display:flex;gap:20px;padding:22px 4px;border-bottom:1px solid var(--line);align-items:flex-start}
.aps-elist--past .aps-eitem{opacity:.72}
.aps-date--lg{flex:0 0 72px;width:72px;height:72px}
.aps-date--lg b{font-size:1.5rem}
.aps-eitem__t{min-width:0}
.aps-eitem__t h3{font-size:1.06rem;font-weight:700;line-height:1.35;margin-bottom:6px}
.aps-eitem__t p{font-size:.89rem;color:var(--muted);line-height:1.55;margin-bottom:8px}
.aps-eitem__m{
  display:block;font-family:var(--fd);font-size:.8rem;font-weight:600;color:var(--amber);
}

/* -------------------------------------------------------------- gallery */
.aps-agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.aps-album{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  text-decoration:none;display:block;transition:border-color .2s,transform .2s;
}
.aps-album:hover{border-color:var(--ink);transform:translateY(-3px)}
.aps-album__c{
  display:block;aspect-ratio:4/3;background:var(--wash) var(--img) center/cover no-repeat;
  position:relative;
}
.aps-album__c .aps-badge{position:absolute;left:12px;bottom:12px}
.aps-album__t{display:block;padding:16px 18px 20px}
.aps-album__t b{display:block;font-family:var(--fd);font-size:1rem;font-weight:700;line-height:1.35}
.aps-album__t p{font-size:.85rem;color:var(--muted);line-height:1.5;margin-top:5px}
.aps-album__t small{display:block;font-size:.78rem;color:var(--muted);margin-top:7px}

.aps-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.aps-photo{
  display:block;position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--wash);aspect-ratio:1/1;
}
.aps-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.aps-photo:hover img{transform:scale(1.05)}
.aps-photo__c{
  position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;
  background:linear-gradient(0deg,rgba(20,18,10,.85),transparent);
  color:#fff;font-size:.78rem;line-height:1.35;
  opacity:0;transition:opacity .22s;
}
.aps-photo:hover .aps-photo__c,.aps-photo:focus-visible .aps-photo__c{opacity:1}

/* ------------------------------------------------------------- lightbox */
.aps-lb{
  position:fixed;inset:0;z-index:300;background:rgba(20,18,10,.94);
  display:flex;align-items:center;justify-content:center;padding:64px 24px;
}
.aps-lb[hidden]{display:none}
.aps-lb__f{margin:0;max-width:1100px;max-height:100%;display:flex;flex-direction:column;gap:14px}
.aps-lb__f img{
  max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;
  border-radius:var(--r);display:block;margin:0 auto;
}
.aps-lb__f figcaption{color:rgba(255,255,255,.82);font-size:.88rem;text-align:center;line-height:1.5}
.aps-lb__x,.aps-lb__p,.aps-lb__n{
  position:absolute;border:0;border-radius:var(--r);cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;
  width:50px;height:50px;transition:background .2s,color .2s;
}
.aps-lb__x:hover,.aps-lb__p:hover,.aps-lb__n:hover{background:var(--sun);color:var(--ink)}
.aps-lb__x{top:18px;right:18px}
.aps-lb__p{left:18px;top:50%;transform:translateY(-50%)}
.aps-lb__n{right:18px;top:50%;transform:translateY(-50%)}
.aps-lb__x svg,.aps-lb__p svg,.aps-lb__n svg{width:22px;height:22px}

/* ---------------------------------------------------------- responsive */
@media (max-width:1180px){
  .aps-agrid{grid-template-columns:repeat(2,1fr)}
  .aps-pgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .aps-fgroup{padding:20px}
  .aps-frow{grid-template-columns:1fr;gap:0}
  .aps-agrid{grid-template-columns:1fr}
  .aps-pgrid{grid-template-columns:repeat(2,1fr)}
  .aps-eitem{gap:14px}
  .aps-date--lg{flex:0 0 58px;width:58px;height:58px}
  .aps-date--lg b{font-size:1.2rem}
  .aps-lb{padding:70px 12px}
  .aps-lb__p,.aps-lb__n{width:42px;height:42px}
  .aps-lb__p{left:8px}
  .aps-lb__n{right:8px}
  .aps-input--ref{font-size:1rem;letter-spacing:.08em}
}

/* ============================================================================
   FIELD ORDER  ·  label, then control, then the note
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   THE PROBLEM THIS FIXES

   Two fields side by side, one with a hint line and one without, do not line
   up: the hint pushes its input down and the row reads as a staircase. The
   levy report showed it clearly - "Type of charge" had its select directly
   under the label while "Amount in naira" had a hint in between, so the two
   controls sat at different heights.

   THE FIX IS FLEXBOX ORDER, NOT MARKUP

   Making .aps-field a flex column and reordering the children puts the control
   immediately under the label everywhere, with the note beneath it. Doing it
   in CSS rather than by editing forty .aspx files means it also applies to any
   field added later, and to the ones built dynamically at runtime.

   A note on screen readers: they follow DOM order, so they still read
   label, then hint, then control - which is the better order for someone who
   cannot see the layout. Sighted users get label, control, note. Both orders
   are correct for their audience, which is a happy accident of doing this the
   lazy way.
   ========================================================================== */

.aps-field{display:flex;flex-direction:column;align-items:stretch}

.aps-field > label            { order:1 }
.aps-field > .aps-input,
.aps-field > .aps-select,
.aps-field > .aps-textarea,
.aps-field > .aps-ac,
.aps-field > input,
.aps-field > select,
.aps-field > textarea         { order:2 }
.aps-field > .hint            { order:3; margin:7px 0 0 }
.aps-field > .aps-err         { order:4 }

/* Rows: tops aligned, and each column is itself a column so the rule above
   keeps working inside them. */
.aps-frow{align-items:start}

/* The checkbox blocks are label-on-the-right, so they must not be reordered. */
.aps-check{display:flex;flex-direction:row}

/* ============================================================================
   TINTED SERVICE TILES  ·  the softer, colourful treatment
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   Modelled on the card grid the Commission pointed at (waeconline.org.ng):
   a soft gradient wash, a solid icon chip in a stronger shade of the same hue,
   black type.

   TWO THINGS HELD BACK DELIBERATELY

   1. THE TYPE STAYS BLACK ON EVERY TINT. That is the same contrast rule the
      whole site runs on. Coloured headings on a coloured wash is where these
      grids usually stop being readable in sunlight on a cheap phone screen.

   2. THE CORNER RADIUS STAYS AT 8px. The reference cards use roughly double
      that. Matching it here would leave these six tiles softer than the fifty
      other cards on the site, which reads as an inconsistency rather than a
      style. Say the word and it is one token change across the whole thing.

   Each wash is a pair: a pale gradient for the card, a saturated flat for the
   icon chip. They are tuned to sit beside Anambra yellow without competing
   with it, which is why none of them is a strong blue or a true red.
   ========================================================================== */

.aps-tile{position:relative;overflow:hidden}

/* the wash */
/* sun and ink are already defined above and keep their existing treatment:
   sun is the flat Anambra yellow for the primary action, ink is black for
   the serious one. Only the six new washes are declared here. */
.aps-tile--mint  { background:linear-gradient(150deg,#E4F6EC,#C8EBDA); border-color:#BCE3D0 }
.aps-tile--sky   { background:linear-gradient(150deg,#E6F1FB,#CBE2F7); border-color:#BFD8F0 }
.aps-tile--lilac { background:linear-gradient(150deg,#EFE8FA,#DCCEF5); border-color:#D0C0EE }
.aps-tile--rose  { background:linear-gradient(150deg,#FCE9EF,#F8D2DE); border-color:#F0C4D3 }
.aps-tile--sand  { background:linear-gradient(150deg,#FBF1DF,#F4E2C2); border-color:#EBD6B2 }
.aps-tile--teal  { background:linear-gradient(150deg,#E2F4F4,#C4E8E8); border-color:#B6DEDE }

/* the icon chip */
.aps-tile--mint  .aps-tile__ico{background:#1F9D6B;border-color:#1F9D6B;color:#fff}
.aps-tile--sky   .aps-tile__ico{background:#2E7FD4;border-color:#2E7FD4;color:#fff}
.aps-tile--lilac .aps-tile__ico{background:#7B54C9;border-color:#7B54C9;color:#fff}
.aps-tile--rose  .aps-tile__ico{background:#D24C7B;border-color:#D24C7B;color:#fff}
.aps-tile--sand  .aps-tile__ico{background:#C08A2E;border-color:#C08A2E;color:#fff}
.aps-tile--teal  .aps-tile__ico{background:#1B8C90;border-color:#1B8C90;color:#fff}

/* type and affordances on a wash */
.aps-tile--mint  p,.aps-tile--sky p,.aps-tile--lilac p,
.aps-tile--rose  p,.aps-tile--sand p,.aps-tile--teal p{color:rgba(20,18,10,.68)}

.aps-tile--mint  .aps-tile__go,.aps-tile--sky .aps-tile__go,.aps-tile--lilac .aps-tile__go,
.aps-tile--rose  .aps-tile__go,.aps-tile--sand .aps-tile__go,.aps-tile--teal .aps-tile__go{color:var(--ink)}

.aps-tile--mint  .aps-badge--line,.aps-tile--sky .aps-badge--line,
.aps-tile--lilac .aps-badge--line,.aps-tile--rose .aps-badge--line,
.aps-tile--sand  .aps-badge--line,.aps-tile--teal .aps-badge--line{
  background:rgba(255,255,255,.7);border-color:rgba(20,18,10,.18);color:rgba(20,18,10,.72);
}

/* hover: lift, and darken the border rather than the fill, so the wash stays
   the same colour the eye first registered */
.aps-tile--mint:hover,.aps-tile--sky:hover,.aps-tile--lilac:hover,
.aps-tile--rose:hover,.aps-tile--sand:hover,.aps-tile--teal:hover{
  border-color:var(--ink);
}

@media (prefers-contrast:more){
  /* On a high-contrast setting the washes flatten to white so the black type
     keeps its full ratio. */
  .aps-tile--mint,.aps-tile--sky,.aps-tile--lilac,
  .aps-tile--rose,.aps-tile--sand,.aps-tile--teal{background:#fff}
}

/* ============================================================================
   DOWNLOADS AS A CARD GRID
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   The list gave every document the same weight and the page read as a
   spreadsheet. A grid of covers lets someone find the school calendar by
   recognising it rather than by reading nine titles.

   Cards with no uploaded cover draw one from the category wash plus the file
   type in large figures. Consistency matters more than fidelity here: a grid
   where some cards have artwork and the rest have a grey box looks broken.
   ========================================================================== */

.aps-dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px}

.aps-dcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.aps-dcard:hover{
  border-color:var(--ink);transform:translateY(-3px);
  box-shadow:0 22px 46px -32px rgba(20,18,10,.6);
}

/* ---- the cover ---- */
.aps-dcard__c{
  position:relative;display:block;aspect-ratio:16/10;
  background-image:var(--img);background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.aps-dcard__c--sun  { background-color:#FFE9A8; color:#8A6200 }
.aps-dcard__c--sky  { background-color:#E6F1FB; color:#2E7FD4 }
.aps-dcard__c--mint { background-color:#E4F6EC; color:#1F9D6B }
.aps-dcard__c--lilac{ background-color:#EFE8FA; color:#7B54C9 }
.aps-dcard__c--rose { background-color:#FCE9EF; color:#D24C7B }
.aps-dcard__c--teal { background-color:#E2F4F4; color:#1B8C90 }
.aps-dcard__c--sand { background-color:#FBF1DF; color:#C08A2E }

.aps-dcard__glyph{position:absolute;inset:0;display:grid;place-items:center;opacity:.24}
.aps-dcard__glyph svg{width:74px;height:74px}
.aps-dcard__ext{
  position:relative;font-family:var(--fd);font-weight:800;font-size:1.55rem;
  letter-spacing:.1em;
}
/* When a real cover is present the type moves to a corner tag so it never
   sits on top of the artwork. */
.aps-dcard__tag{
  position:absolute;left:12px;bottom:12px;background:var(--ink);color:var(--sun);
  font-family:var(--fd);font-weight:700;font-size:.66rem;letter-spacing:.1em;
  padding:3px 8px;border-radius:0;
}

/* ---- the body ---- */
.aps-dcard__b{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;min-width:0}
.aps-dcard__b b{
  display:block;font-family:var(--fd);font-size:1rem;font-weight:700;
  line-height:1.35;margin:8px 0 6px;color:var(--ink);
}
.aps-dcard__b p{font-size:.86rem;color:var(--muted);line-height:1.55}
.aps-dcard__m{display:block;font-size:.77rem;color:var(--muted);margin-top:10px}
.aps-dcard__go{
  margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:7px;
  font-family:var(--fd);font-weight:700;font-size:.82rem;color:var(--ink);
  transition:gap .18s;
}
.aps-dcard:hover .aps-dcard__go{gap:12px}

@media (max-width:1080px){ .aps-dgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){  .aps-dgrid{grid-template-columns:1fr} }

/* ============================================================================
   IN-BROWSER DOCUMENT READER
   ----------------------------------------------------------------------------
   The browser's own PDF viewer in a frame, with the Commission's chrome around
   it. Not a flipbook: see the note at the top of Read.aspx.cs for why.
   ========================================================================== */

.aps-readbar{background:var(--ink);padding:16px 0;position:sticky;top:0;z-index:60}
.aps-readbar__in{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.aps-readbar__t{flex:1;min-width:220px}
.aps-readbar__t b{
  display:block;font-family:var(--fd);font-size:1.02rem;font-weight:700;
  color:#fff;line-height:1.3;margin-top:6px;
}
.aps-readbar__t small{display:block;font-size:.78rem;color:rgba(255,255,255,.55);margin-top:3px}
.aps-readbar__a{display:flex;gap:9px;flex-wrap:wrap}
.aps-readbar .aps-btn--ghost{
  background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);
}
.aps-readbar .aps-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--sun);color:var(--sun)}

.aps-reader{background:#3A3630;padding:0}
.aps-reader__f{
  display:block;width:100%;height:82vh;min-height:520px;border:0;background:#3A3630;
}
.aps-reader__none{
  max-width:520px;margin:0 auto;padding:60px 24px;text-align:center;color:#fff;
}
.aps-reader__none b{display:block;font-family:var(--fd);font-size:1.05rem;margin-bottom:8px}
.aps-reader__none span{
  display:block;font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:20px;
}

.aps-catlist{display:flex;flex-direction:column}
.aps-catlist__i{
  display:block;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.45;
}
.aps-catlist__i:last-child{border-bottom:0}
.aps-catlist__i:hover{color:var(--amber)}

@media (max-width:760px){
  /* A PDF frame on a phone is a poor experience in every browser, so it gets
     less of the screen and the Download button carries more of the weight. */
  .aps-reader__f{height:60vh;min-height:360px}
  .aps-readbar{position:static}
}

/* ============================================================================
   HOME PAGE REVISIONS
   ----------------------------------------------------------------------------
   The ledger band was removed and the Igwebuike band now stands alone, so it
   needs the vertical breathing room the ledger used to give it.
   ========================================================================== */

.aps-band--solo{margin-top:0;padding:38px 0}

/* ---- notice strip: continuous scroll, no underline ----
   Two identical tracks translated by -50% loop with no gap and no jump. The
   animation is on the viewport's inner flex row, not on each track, so both
   move as one piece.

   It pauses on hover and on keyboard focus: a notice that will not hold still
   long enough to be read or clicked is decoration, not information.          */

.aps-ticker__vp{
  flex:1;min-width:0;overflow:hidden;position:relative;
  display:flex;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}
.aps-ticker__track{
  display:flex;align-items:center;gap:0;flex:0 0 auto;
  white-space:nowrap;padding-right:0;
  animation:aps-tick 42s linear infinite;
}
.aps-ticker__vp:hover .aps-ticker__track,
.aps-ticker__vp:focus-within .aps-ticker__track{animation-play-state:paused}

@keyframes aps-tick{
  from{transform:translateX(0)}
  to  {transform:translateX(-100%)}
}

/* no underline, on any state */
.aps-ticker__track a{
  text-decoration:none;border-bottom:0;padding:0 4px;white-space:nowrap;
}
.aps-ticker__track a:hover,
.aps-ticker__track a:focus{text-decoration:none;border-bottom:0;color:var(--ink)}
.aps-ticker__dot{padding:0 14px;opacity:.45}

@media (prefers-reduced-motion:reduce){
  /* Do not move it at all for anyone who has asked for that. The strip becomes
     a normal scrollable row instead of an animated one. */
  .aps-ticker__track{animation:none}
  .aps-ticker__vp{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .aps-ticker__track + .aps-ticker__track{display:none}
}

/* ---- uploaded logo ----
   The built-in seal is a 54px yellow disc with a ring, which is right for the
   inline SVG emblem it was drawn for. An uploaded logo is a different problem:
   the Anambra mark supplied is 133x177, i.e. PORTRAIT, and forcing that into a
   circle letterboxes it to 41x54 with dead space either side and a ring
   cropping the corners of the map.

   So when a real image is present the container drops the disc entirely: no
   circle, no yellow fill, no ring, and the width is free to follow the image's
   own aspect ratio up to a sensible cap. Height stays fixed so the header does
   not change height when the logo is swapped.

   The result is that a portrait crest, a square coat of arms and a wide
   wordmark all render correctly without anyone editing CSS. */
.aps-seal--img{
  background:transparent;border-radius:0;box-shadow:none;padding:0;
  width:auto;flex:0 0 auto;max-width:96px;height:54px;
  display:flex;align-items:center;justify-content:flex-start;
  transition:height .25s;
}
.aps-seal--img img{
  width:auto;height:100%;max-width:96px;object-fit:contain;display:block;
}

/* ---- the stuck header must not re-apply the disc ----
   .aps-hdr.is-stuck .aps-seal sets a black fill and a gold ring, which is right
   for the inline SVG emblem and wrong for an uploaded logo: it puts the client's
   map inside a dark bordered box on a yellow bar, which is what the "logo on
   other pages" screenshot showed.

   That rule has two classes and therefore beats a single .aps-seal--img. These
   selectors match its specificity so the plain image treatment holds in every
   header state. */
.aps-hdr .aps-seal--img,
.aps-hdr.is-stuck .aps-seal--img{
  background:transparent;box-shadow:none;border-radius:0;
  width:auto;flex:0 0 auto;
}
.aps-hdr.is-stuck .aps-seal--img{height:38px}
.aps-hdr .aps-seal--img img,
.aps-hdr.is-stuck .aps-seal--img img{width:auto;height:100%}

.aps-foot .aps-seal--img{height:44px;background:transparent;box-shadow:none}

@media (max-width:760px){
  .aps-seal--img{height:42px;max-width:76px}
  .aps-seal--img img{max-width:76px}
}

/* ============================================================================
   TYPEFACE
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   Sora out, Plus Jakarta Sans in, at the client's request after comparing the
   site against waeconline.org.ng.

   The complaint was correct and worth naming precisely rather than treating as
   taste. Sora is a display face with tight sidebearings and idiosyncratic
   letterforms - the single-storey 'a', the flat-sided 'e' - which read as
   deliberate at 60px and as cramped and slightly odd at 16px. Set across a
   whole government site it made the headings feel narrow and the running text
   feel crowded, which is exactly the difference visible between the two
   screenshots.

   Plus Jakarta Sans is more open, rounder in the bowls, and holds its shape
   from 12px to 72px. It carries the same friendly geometric feel as the
   reference site without Poppins' problem, which is that Poppins' near-circular
   letterforms are lovely in a heading and tiring in a paragraph.

   Inter stays for body copy. It is the most legible screen face available for
   small sizes and its tabular numerals matter on a site full of dates, file
   sizes and reference numbers.

   TO CHANGE IT AGAIN: one line. The --fd token at the top of this file and the
   same token in admin.css, plus the Google Fonts href in the four master and
   standalone pages. Nothing else names a typeface.
   ========================================================================== */

:root{
  /* Plus Jakarta Sans sits slightly wider than Sora at the same size, so the
     display sizes come down a touch to keep the same measure per line. */
  --fd:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
}

h1,h2,h3,h4,.aps-btn,.aps-eyebrow{letter-spacing:-.01em}
.aps-hero__h{letter-spacing:-.025em}

/* ---- four-column document grid ----
   Three columns left each card around 400px wide, which is far more than a
   title and two lines of metadata need; the cards read as oversized and the
   page as sparse. Four brings each card to roughly 300px, which is about the
   width of the cover image at its natural size.

   The breakpoints step down 4 -> 3 -> 2 -> 1 rather than jumping, so there is
   never a row with one card stranded on its own. */

.aps-dgrid--4{grid-template-columns:repeat(4,1fr);gap:14px}

@media (max-width:1320px){ .aps-dgrid--4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1020px){ .aps-dgrid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){  .aps-dgrid--4{grid-template-columns:1fr} }

/* Narrower cards need tighter interiors or the text runs out of room. */
.aps-dgrid--4 .aps-dcard__b{padding:15px 16px 17px}
.aps-dgrid--4 .aps-dcard__b b{font-size:.94rem;margin:7px 0 5px}
.aps-dgrid--4 .aps-dcard__b p{font-size:.82rem}
.aps-dgrid--4 .aps-dcard__m{font-size:.74rem}
.aps-dgrid--4 .aps-dcard__ext{font-size:1.3rem}
.aps-dgrid--4 .aps-dcard__glyph svg{width:60px;height:60px}

/* ============================================================================
   PROSE  ·  justification and measure
   Bronzebit Consult Ltd
   ----------------------------------------------------------------------------
   Two changes, and the second matters more than the one that was asked for.

   1. JUSTIFIED, AS REQUESTED - BUT ONLY WITH HYPHENATION ON.

      text-align:justify on its own is how you get rivers: the browser has no
      permission to break words, so it stretches the spaces instead, and on a
      line with two long words it stretches them a long way. hyphens:auto gives
      it somewhere else to go. The two belong together and justify without it
      looks worse than ragged-right, not better.

      Turned off below 760px. On a phone the measure is short enough that even
      with hyphenation the gaps become obvious, and ragged-right is cleaner.

   2. THE MEASURE WAS THE ACTUAL PROBLEM.

      The About page is on the Wide template, which sets max-width:none, so its
      paragraphs were running to roughly 134 characters a line. Comfortable is
      60-75; past about 90 the eye loses its place returning to the left margin,
      and the page reads as unfinished however it is aligned.

      "Wide" should mean wide TABLES and wide IMAGES, not wide paragraphs. So
      the wide template keeps its full width for everything else and its running
      text is capped at 86ch - generous, still visibly wider than Standard, and
      inside the range where justification behaves.
   ========================================================================== */

.aps-prose{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
     -moz-hyphens:auto;
          hyphens:auto;
  hyphenate-limit-chars:6 3 3;   /* no hyphenating short words */
}

/* Only running text is justified. A justified heading, list item or caption
   reads as a mistake, and a justified table cell is unreadable. */
.aps-prose h2,
.aps-prose h3,
.aps-prose h4,
.aps-prose li,
.aps-prose td,
.aps-prose th,
.aps-prose figcaption,
.aps-prose blockquote cite{
  text-align:left;
  -webkit-hyphens:manual;
     -moz-hyphens:manual;
          hyphens:manual;
}

/* The last line of a paragraph stays left, never stretched across the column. */
.aps-prose p{text-align-last:auto}

/* Wide template: full width for tables and images, readable measure for text. */
.aps-prose--wide{max-width:none}
.aps-prose--wide > p,
.aps-prose--wide > ul,
.aps-prose--wide > ol,
.aps-prose--wide > h2,
.aps-prose--wide > h3,
.aps-prose--wide > h4,
.aps-prose--wide > blockquote{max-width:86ch}
.aps-prose--wide > table,
.aps-prose--wide > figure,
.aps-prose--wide > img,
.aps-prose--wide > .aps-tablewrap{max-width:none;width:100%}

@media (max-width:760px){
  .aps-prose{
    text-align:left;
    -webkit-hyphens:manual;
       -moz-hyphens:manual;
            hyphens:manual;
  }
}

@media print{
  /* Hyphenation across a page break is a nuisance in a printed circular. */
  .aps-prose{-webkit-hyphens:manual;-moz-hyphens:manual;hyphens:manual}
}