/* ==========================================================================
   NSFAS 2027 Applications — Marketing Material Download Center
   v1.0 · a standalone page SECTION for www.nsfas.org.za

   Namespaced the same way as the 2027 landing block, so both can sit on one
   page without clashing: every selector is scoped under the .nsfas27dc
   wrapper, every class carries the nsfas27dc- prefix, and every custom
   property the --n27dc- prefix (declared on the wrapper, never on :root).

   Nothing here can match an element outside the block, and nothing the host
   site declares globally — resets, tag styles, utility classes — reaches in.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
.nsfas27dc{
  --n27dc-gold:#EAAD21;
  --n27dc-gold-soft:#FBF0D2;
  /* #D36E26 is the brand orange and is used wherever contrast allows: the
     large "Download Center" heading (3.48:1, clears the 3:1 large-text bar),
     the eyebrow rule and the decorative shapes.
     White text on it is only 3.48:1, below the 4.5:1 this brief also asks
     for, so filled controls use --n27dc-orange-ui — the same hue darkened
     until white text clears AA (4.58:1) — and small orange text uses
     --n27dc-orange-text. */
  --n27dc-orange:#D36E26;        /* brand, large text and graphics only  */
  --n27dc-orange-ui:#B55E20;     /* filled buttons/pills, white text 4.58:1 */
  --n27dc-orange-ui-dark:#984E19;/* their hover                           */
  --n27dc-orange-dark:#A4500F;   /* small orange text, 5.24:1 on light    */
  --n27dc-orange-soft:#FBEADC;
  --n27dc-black:#111111;
  --n27dc-white:#FFFFFF;
  --n27dc-light:#F7F7F5;

  --n27dc-ink:#1A1713;          /* headings            */
  --n27dc-body:#4A443C;         /* body copy, 7.4:1 on white */
  --n27dc-muted:#6A6258;        /* metadata, 5.3:1 on white  */
  --n27dc-line:#E6E3DC;
  --n27dc-line-soft:#F0EEE8;

  --n27dc-max:1440px;
  --n27dc-gutter:clamp(20px,calc(4 * var(--n27dc-u)),64px);
  --n27dc-r:14px;               /* card radius   */
  --n27dc-r-sm:10px;            /* control radius */
  --n27dc-tap:44px;             /* WCAG 2.2 target size */
  --n27dc-font:Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --n27dc-shadow:0 1px 2px rgba(26,19,8,.04), 0 8px 22px rgba(26,19,8,.06);
  --n27dc-shadow-lift:0 2px 6px rgba(26,19,8,.07), 0 18px 38px rgba(26,19,8,.12);

  /* Fluid unit. Written against the BLOCK's width (cqi) rather than the
     viewport, so the section behaves the same full-bleed or in a narrow CMS
     column. Falls back to vw where container queries are unsupported. */
  --n27dc-u:1vw;

  container-type:inline-size;
  container-name:nsfas27dc;

  /* re-establish a predictable baseline inside the block */
  font-family:var(--n27dc-font);
  font-size:16px;line-height:1.5;color:var(--n27dc-body);
  text-align:start;letter-spacing:normal;word-spacing:normal;
  font-style:normal;text-transform:none;
  background:var(--n27dc-light);
}
@supports (container-type:inline-size){
  .nsfas27dc{--n27dc-u:1cqi}
}

/* --------------------------------------------------------------------------
   2. Scoped reset — replaces a global `*` reset, which would otherwise change
      box-sizing for the entire host page
   -------------------------------------------------------------------------- */
.nsfas27dc,
.nsfas27dc *,
.nsfas27dc *::before,
.nsfas27dc *::after{box-sizing:border-box}

.nsfas27dc :where(section,div,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,span,form){
  margin:0;padding:0;border:0;background:none;
  font-family:inherit;font-style:normal;
  text-align:inherit;letter-spacing:inherit;
}
.nsfas27dc :where(ul,ol,li){list-style:none}
.nsfas27dc :where(a){
  text-decoration:none;color:inherit;background:none;border:0;
  font-family:inherit;font-style:normal;font-weight:inherit;
  font-size:inherit;line-height:inherit;
}
.nsfas27dc :where(button,input){
  font:inherit;color:inherit;background:none;border:0;margin:0;
  letter-spacing:inherit;text-transform:none;border-radius:0;appearance:none;
}
.nsfas27dc :where(img,video){width:auto;height:auto;max-width:100%;border:0;display:block}
.nsfas27dc :where(svg){width:auto;height:auto;max-width:100%;border:0;flex-shrink:0}
.nsfas27dc :where(b,strong){font-weight:800;font-style:normal}
.nsfas27dc :where(h1,h2,h3,h4){font-weight:900;line-height:1.15;letter-spacing:normal;text-transform:none}
.nsfas27dc :where(section){display:block;border:0}

.nsfas27dc .nsfas27dc-sr{
  position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* a single visible focus treatment, used everywhere */
.nsfas27dc :where(a,button,input,[tabindex]):focus-visible{
  outline:3px solid var(--n27dc-black);
  outline-offset:3px;border-radius:var(--n27dc-r-sm);
}

.nsfas27dc .nsfas27dc-wrap{
  max-width:var(--n27dc-max);margin-inline:auto;
  padding-inline:var(--n27dc-gutter);
}
.nsfas27dc .nsfas27dc-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(10.5px,calc(.82 * var(--n27dc-u)),12px);
  font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--n27dc-orange-dark);
}
.nsfas27dc .nsfas27dc-eyebrow::before{
  content:"";width:24px;height:3px;border-radius:2px;
  background:var(--n27dc-orange);flex-shrink:0;
}

/* --------------------------------------------------------------------------
   3. Intro / campaign header
   -------------------------------------------------------------------------- */
.nsfas27dc .nsfas27dc-intro{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--n27dc-white);
  padding-block:clamp(40px,calc(4.4 * var(--n27dc-u)),74px);
  border-bottom:1px solid var(--n27dc-line);
}
/* flowing campaign shapes — kept faint so the type stays the loudest thing */
.nsfas27dc .nsfas27dc-intro::before,
.nsfas27dc .nsfas27dc-intro::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
}
.nsfas27dc .nsfas27dc-intro::before{
  inset-inline-end:-10%;inset-block-start:-55%;
  width:min(620px,58cqi);aspect-ratio:1;
  background:radial-gradient(circle at 36% 62%,rgba(234,173,33,.20),rgba(234,173,33,0) 68%);
}
.nsfas27dc .nsfas27dc-intro::after{
  inset-inline-end:4%;inset-block-end:-48%;
  width:min(460px,42cqi);aspect-ratio:1;
  background:radial-gradient(circle at 48% 36%,rgba(211,110,38,.16),rgba(211,110,38,0) 66%);
}

.nsfas27dc .nsfas27dc-intro__grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,400px);
  gap:clamp(26px,calc(3.2 * var(--n27dc-u)),56px);align-items:center;
}
.nsfas27dc .nsfas27dc-intro__title{
  margin:clamp(12px,calc(1.3 * var(--n27dc-u)),18px) 0 0;
  font-size:clamp(30px,calc(3.6 * var(--n27dc-u)),54px);line-height:1.02;
  font-weight:900;letter-spacing:-.02em;color:var(--n27dc-ink);text-wrap:balance;
}
.nsfas27dc .nsfas27dc-intro__title em{font-style:normal;color:var(--n27dc-orange)}
.nsfas27dc .nsfas27dc-intro__lede{
  margin:clamp(12px,calc(1.3 * var(--n27dc-u)),18px) 0 0;max-width:58ch;
  font-size:clamp(15px,calc(1.15 * var(--n27dc-u)),18px);line-height:1.6;
  font-weight:400;color:var(--n27dc-body);
}

/* dates panel */
.nsfas27dc .nsfas27dc-dates{
  background:var(--n27dc-black);color:var(--n27dc-white);
  border-radius:var(--n27dc-r);padding:clamp(20px,calc(2 * var(--n27dc-u)),30px);
  box-shadow:var(--n27dc-shadow);
}
.nsfas27dc .nsfas27dc-dates__row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,calc(1.6 * var(--n27dc-u)),24px);
}
.nsfas27dc .nsfas27dc-dates dt{
  font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n27dc-gold);
}
.nsfas27dc .nsfas27dc-dates dd{
  margin:5px 0 0;font-size:clamp(17px,calc(1.45 * var(--n27dc-u)),22px);
  font-weight:900;line-height:1.15;color:var(--n27dc-white);
}
.nsfas27dc .nsfas27dc-dates__rule{
  height:1px;background:rgba(255,255,255,.18);
  margin-block:clamp(16px,calc(1.7 * var(--n27dc-u)),22px);
}
.nsfas27dc .nsfas27dc-dates__msg{
  font-size:clamp(15px,calc(1.2 * var(--n27dc-u)),18px);font-weight:900;
  color:var(--n27dc-white);
}
.nsfas27dc .nsfas27dc-dates__msg span{color:var(--n27dc-gold)}
.nsfas27dc .nsfas27dc-dates__tag{
  margin-top:5px;font-size:clamp(11.5px,calc(.9 * var(--n27dc-u)),13px);
  font-weight:500;color:#C9C2B6;
}

/* --------------------------------------------------------------------------
   4. Directory — search + filters
   -------------------------------------------------------------------------- */
.nsfas27dc .nsfas27dc-directory{
  padding-block:clamp(36px,calc(4 * var(--n27dc-u)),68px)
               clamp(44px,calc(5 * var(--n27dc-u)),84px);
}
.nsfas27dc .nsfas27dc-directory__head{max-width:62ch}
.nsfas27dc .nsfas27dc-h2{
  margin:clamp(10px,calc(1.1 * var(--n27dc-u)),16px) 0 0;
  font-size:clamp(24px,calc(2.6 * var(--n27dc-u)),40px);line-height:1.1;
  font-weight:900;letter-spacing:-.018em;color:var(--n27dc-ink);
}
.nsfas27dc .nsfas27dc-directory__note{
  margin:10px 0 0;font-size:clamp(14px,calc(1.1 * var(--n27dc-u)),17px);
  line-height:1.6;color:var(--n27dc-body);
}

.nsfas27dc .nsfas27dc-controls{
  margin-top:clamp(20px,calc(2.2 * var(--n27dc-u)),34px);
  display:flex;flex-wrap:wrap;gap:clamp(12px,calc(1.3 * var(--n27dc-u)),20px);
  align-items:center;
}
.nsfas27dc .nsfas27dc-search{position:relative;flex:1 1 320px;min-width:0;max-width:460px}
.nsfas27dc .nsfas27dc-search__icon{
  position:absolute;inset-inline-start:15px;inset-block-start:50%;
  transform:translateY(-50%);color:var(--n27dc-muted);pointer-events:none;
}
.nsfas27dc .nsfas27dc-search input{
  width:100%;min-height:var(--n27dc-tap);
  padding:10px 42px 10px 44px;
  background:var(--n27dc-white);border:1px solid var(--n27dc-line);
  border-radius:var(--n27dc-r-sm);
  font-size:15px;color:var(--n27dc-ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.nsfas27dc .nsfas27dc-search input::placeholder{color:var(--n27dc-muted);opacity:1}
.nsfas27dc .nsfas27dc-search input:hover{border-color:#D6D1C7}
.nsfas27dc .nsfas27dc-search input:focus{
  outline:none;border-color:var(--n27dc-orange);
  box-shadow:0 0 0 3px rgba(181,94,32,.22);
}
.nsfas27dc .nsfas27dc-search input:focus-visible{outline:none}
.nsfas27dc .nsfas27dc-search__clear{
  position:absolute;inset-inline-end:6px;inset-block-start:50%;transform:translateY(-50%);
  width:32px;height:32px;display:none;place-items:center;cursor:pointer;
  color:var(--n27dc-muted);border-radius:50%;
}
.nsfas27dc .nsfas27dc-search__clear:hover{background:var(--n27dc-line-soft);color:var(--n27dc-ink)}
.nsfas27dc .nsfas27dc-search[data-n27dc-filled="yes"] .nsfas27dc-search__clear{display:grid}

.nsfas27dc .nsfas27dc-filters{
  display:flex;gap:9px;flex-wrap:wrap;list-style:none;margin:0;padding:0;
}
.nsfas27dc .nsfas27dc-filter{
  min-height:var(--n27dc-tap);padding:9px 17px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:var(--n27dc-white);border:1px solid var(--n27dc-line);
  border-radius:999px;
  font-size:14px;font-weight:700;color:var(--n27dc-body);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.nsfas27dc .nsfas27dc-filter:hover{border-color:var(--n27dc-orange-ui);color:var(--n27dc-orange-dark)}
.nsfas27dc .nsfas27dc-filter__n{
  font-size:12px;font-weight:900;color:var(--n27dc-muted);
  font-variant-numeric:tabular-nums;
}
/* selected state carries a tick as well as colour, so it never relies on hue */
.nsfas27dc .nsfas27dc-filter[aria-pressed="true"]{
  background:var(--n27dc-orange-ui);border-color:var(--n27dc-orange-ui);color:var(--n27dc-white);
}
.nsfas27dc .nsfas27dc-filter[aria-pressed="true"] .nsfas27dc-filter__n{color:rgba(255,255,255,.88)}
.nsfas27dc .nsfas27dc-filter[aria-pressed="true"]::before{
  content:"";width:13px;height:13px;flex-shrink:0;
  background:currentColor;
  -webkit-mask:var(--n27dc-tick) center/contain no-repeat;
          mask:var(--n27dc-tick) center/contain no-repeat;
}
.nsfas27dc{
  --n27dc-tick:url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.nsfas27dc .nsfas27dc-status{
  margin-top:clamp(16px,calc(1.6 * var(--n27dc-u)),24px);
  font-size:14px;color:var(--n27dc-muted);
}
.nsfas27dc .nsfas27dc-status b{color:var(--n27dc-ink);font-weight:900}

/* --------------------------------------------------------------------------
   5. Resource cards
   -------------------------------------------------------------------------- */
.nsfas27dc .nsfas27dc-grid{
  margin-top:clamp(16px,calc(1.8 * var(--n27dc-u)),26px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,calc(1.8 * var(--n27dc-u)),28px);
  list-style:none;padding:0;
}
.nsfas27dc .nsfas27dc-card{
  display:flex;flex-direction:column;
  background:var(--n27dc-white);border-radius:var(--n27dc-r);
  box-shadow:var(--n27dc-shadow);overflow:hidden;
  transition:box-shadow .2s ease,transform .2s ease;
}
.nsfas27dc .nsfas27dc-card:hover{transform:translateY(-2px);box-shadow:var(--n27dc-shadow-lift)}
.nsfas27dc .nsfas27dc-card[hidden]{display:none}

/* cover: documents are mixed portrait and landscape, so the page is contained
   on a soft ground rather than cropped — a cropped cover stops reading as a
   document */
.nsfas27dc .nsfas27dc-card__cover{
  position:relative;aspect-ratio:4/3;background:var(--n27dc-light);
  border-bottom:1px solid var(--n27dc-line-soft);overflow:hidden;
  --n27dc-cover-pad:clamp(14px,calc(1.5 * var(--n27dc-u)),22px);
}
/* The page is absolutely positioned rather than a centred grid item: a
   percentage max-height cannot resolve against an aspect-ratio box, so a
   portrait cover would overflow its frame. Against an absolutely positioned
   containing block the percentages are definite, and margin:auto centres it.
   object-fit is avoided on purpose — it would letterbox inside the element
   box and the page shadow would then draw around empty space. */
.nsfas27dc .nsfas27dc-card__cover img{
  position:absolute;inset:var(--n27dc-cover-pad);margin:auto;
  width:auto;height:auto;
  max-width:calc(100% - 2 * var(--n27dc-cover-pad));
  max-height:calc(100% - 2 * var(--n27dc-cover-pad));
  border-radius:3px;box-shadow:0 2px 5px rgba(26,19,8,.13),0 10px 22px rgba(26,19,8,.13);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.nsfas27dc .nsfas27dc-card:hover .nsfas27dc-card__cover img{transform:scale(1.025)}
.nsfas27dc .nsfas27dc-card__badge{
  position:absolute;inset-block-start:12px;inset-inline-start:12px;
  padding:5px 10px;border-radius:6px;
  background:var(--n27dc-black);color:var(--n27dc-white);
  font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}

.nsfas27dc .nsfas27dc-card__body{
  padding:clamp(16px,calc(1.7 * var(--n27dc-u)),24px);
  display:flex;flex-direction:column;flex:1;
}
.nsfas27dc .nsfas27dc-card__title{
  margin:0;font-size:clamp(16px,calc(1.3 * var(--n27dc-u)),19px);line-height:1.25;
  font-weight:900;letter-spacing:-.008em;color:var(--n27dc-ink);
}
.nsfas27dc .nsfas27dc-card__desc{
  margin:8px 0 0;font-size:clamp(13.5px,calc(1.02 * var(--n27dc-u)),15px);
  line-height:1.55;color:var(--n27dc-body);
}
.nsfas27dc .nsfas27dc-card__meta{
  margin-top:auto;padding-block-start:clamp(12px,calc(1.3 * var(--n27dc-u)),18px);
  border-top:1px solid var(--n27dc-line-soft);
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;color:var(--n27dc-muted);
}
.nsfas27dc .nsfas27dc-card__pdf{
  display:inline-grid;place-items:center;flex-shrink:0;
  width:26px;height:30px;border-radius:4px;
  background:var(--n27dc-orange-soft);color:var(--n27dc-orange-dark);
  font-size:8px;font-weight:900;letter-spacing:.04em;
}
.nsfas27dc .nsfas27dc-card__actions{
  margin-top:clamp(14px,calc(1.4 * var(--n27dc-u)),18px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;
}

/* ---- buttons ---- */
.nsfas27dc .nsfas27dc-btn{
  min-height:var(--n27dc-tap);padding:10px 18px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--n27dc-r-sm);
  font-size:14.5px;font-weight:900;text-align:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease;
}
.nsfas27dc .nsfas27dc-btn:active{transform:translateY(1px)}
.nsfas27dc .nsfas27dc-btn--ghost{
  background:var(--n27dc-white);border:1px solid var(--n27dc-line);color:var(--n27dc-ink);
}
.nsfas27dc .nsfas27dc-btn--ghost:hover{border-color:var(--n27dc-black);background:var(--n27dc-light)}
.nsfas27dc .nsfas27dc-btn--primary{
  background:var(--n27dc-orange-ui);color:var(--n27dc-white);border:1px solid var(--n27dc-orange-ui);
}
.nsfas27dc .nsfas27dc-btn--primary:hover{
  background:var(--n27dc-orange-ui-dark);border-color:var(--n27dc-orange-ui-dark);color:var(--n27dc-white);
}
/* a download whose URL has not been wired yet: visibly unavailable, never a
   dead link that looks live */
.nsfas27dc .nsfas27dc-btn--primary[disabled],
.nsfas27dc .nsfas27dc-btn--primary[aria-disabled="true"]{
  background:var(--n27dc-line-soft);border-color:var(--n27dc-line);
  color:var(--n27dc-muted);cursor:not-allowed;transform:none;
}

.nsfas27dc .nsfas27dc-empty{
  margin-top:clamp(20px,calc(2 * var(--n27dc-u)),30px);
  padding:clamp(28px,calc(3 * var(--n27dc-u)),48px);
  background:var(--n27dc-white);border:1px dashed var(--n27dc-line);
  border-radius:var(--n27dc-r);text-align:center;
}
.nsfas27dc .nsfas27dc-empty h3{
  margin:0;font-size:18px;font-weight:900;color:var(--n27dc-ink);
}
.nsfas27dc .nsfas27dc-empty p{margin:7px 0 0;font-size:15px;color:var(--n27dc-body)}
.nsfas27dc .nsfas27dc-empty button{margin-top:16px}
.nsfas27dc .nsfas27dc-empty[hidden]{display:none}

/* --------------------------------------------------------------------------
   6. Preview modal
   -------------------------------------------------------------------------- */
.nsfas27dc .nsfas27dc-modal{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  padding:clamp(12px,3vw,40px);
  background:rgba(17,17,17,.68);
  opacity:0;visibility:hidden;
  /* visibility is stepped, not eased: on close it waits for the fade, on open
     it flips in the same frame — otherwise the panel is still
     visibility:hidden when we try to move focus into it, and focus silently
     fails */
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.nsfas27dc .nsfas27dc-modal[data-n27dc-open="yes"]{
  opacity:1;visibility:visible;
  transition:opacity .2s ease, visibility 0s linear 0s;
}
.nsfas27dc .nsfas27dc-modal__panel{
  width:min(980px,100%);max-height:100%;
  display:flex;flex-direction:column;
  background:var(--n27dc-white);border-radius:var(--n27dc-r);
  box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;
  transform:translateY(10px);transition:transform .2s ease;
}
.nsfas27dc .nsfas27dc-modal[data-n27dc-open="yes"] .nsfas27dc-modal__panel{transform:none}
.nsfas27dc .nsfas27dc-modal__head{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px clamp(16px,2vw,24px);border-bottom:1px solid var(--n27dc-line);
}
.nsfas27dc .nsfas27dc-modal__title{
  margin:0;font-size:clamp(16px,1.4vw,20px);line-height:1.25;
  font-weight:900;color:var(--n27dc-ink);
}
.nsfas27dc .nsfas27dc-modal__sub{
  margin:4px 0 0;font-size:13px;font-weight:700;color:var(--n27dc-muted);
}
.nsfas27dc .nsfas27dc-modal__close{
  margin-inline-start:auto;flex-shrink:0;cursor:pointer;
  width:var(--n27dc-tap);height:var(--n27dc-tap);
  display:grid;place-items:center;border-radius:50%;
  color:var(--n27dc-ink);transition:background .15s ease;
}
.nsfas27dc .nsfas27dc-modal__close:hover{background:var(--n27dc-light)}
.nsfas27dc .nsfas27dc-modal__body{
  flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--n27dc-light);
  padding:clamp(14px,2vw,26px);
  display:grid;place-items:center;
}
.nsfas27dc .nsfas27dc-modal__body img{
  max-width:100%;height:auto;border-radius:4px;
  box-shadow:0 2px 6px rgba(26,19,8,.14),0 16px 36px rgba(26,19,8,.16);
}
.nsfas27dc .nsfas27dc-modal__foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px clamp(16px,2vw,24px);border-top:1px solid var(--n27dc-line);
}
.nsfas27dc .nsfas27dc-modal__pager{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--n27dc-muted);
}
.nsfas27dc .nsfas27dc-modal__pager button{
  width:var(--n27dc-tap);height:var(--n27dc-tap);cursor:pointer;
  display:grid;place-items:center;border-radius:var(--n27dc-r-sm);
  border:1px solid var(--n27dc-line);background:var(--n27dc-white);color:var(--n27dc-ink);
}
.nsfas27dc .nsfas27dc-modal__pager button:hover:not([disabled]){
  border-color:var(--n27dc-black);background:var(--n27dc-light);
}
.nsfas27dc .nsfas27dc-modal__pager button[disabled]{opacity:.4;cursor:not-allowed}
.nsfas27dc .nsfas27dc-modal__foot .nsfas27dc-btn{margin-inline-start:auto}
.nsfas27dc .nsfas27dc-modal__hint{
  flex:1 0 100%;order:9;margin:0;font-size:12.5px;color:var(--n27dc-muted);
}

/* ==========================================================================
   7. Responsive — driven by the BLOCK's width, not the viewport
   ========================================================================== */
@container nsfas27dc (max-width:1080px){
  .nsfas27dc .nsfas27dc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container nsfas27dc (max-width:900px){
  .nsfas27dc .nsfas27dc-intro,
  .nsfas27dc .nsfas27dc-directory{--n27dc-stacked:1}
  .nsfas27dc .nsfas27dc-intro__grid{grid-template-columns:minmax(0,1fr)}
}
@container nsfas27dc (max-width:680px){
  .nsfas27dc .nsfas27dc-grid{grid-template-columns:minmax(0,1fr)}
  .nsfas27dc .nsfas27dc-dates__row{grid-template-columns:minmax(0,1fr)}
  .nsfas27dc .nsfas27dc-search{flex:1 1 100%;max-width:none}
  /* pills scroll sideways rather than wrapping into a tall stack */
  .nsfas27dc .nsfas27dc-filters{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding-block:2px;margin-inline:calc(-1 * var(--n27dc-gutter));
    padding-inline:var(--n27dc-gutter);
    scrollbar-width:thin;
  }
  .nsfas27dc .nsfas27dc-filter{scroll-snap-align:start}
  .nsfas27dc .nsfas27dc-card__actions{grid-template-columns:minmax(0,1fr)}
}
@container nsfas27dc (max-width:420px){
  .nsfas27dc{--n27dc-gutter:18px}
  .nsfas27dc .nsfas27dc-intro,
  .nsfas27dc .nsfas27dc-directory{--n27dc-gutter:18px}
}

/* ---- fallback for browsers without container queries (pre-2023) ---------- */
@supports not (container-type:inline-size){
  @media (max-width:1080px){
    .nsfas27dc .nsfas27dc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:900px){
    .nsfas27dc .nsfas27dc-intro__grid{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:680px){
    .nsfas27dc .nsfas27dc-grid{grid-template-columns:minmax(0,1fr)}
    .nsfas27dc .nsfas27dc-dates__row{grid-template-columns:minmax(0,1fr)}
    .nsfas27dc .nsfas27dc-search{flex:1 1 100%;max-width:none}
    .nsfas27dc .nsfas27dc-filters{
      flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
      scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
      padding-block:2px;margin-inline:calc(-1 * var(--n27dc-gutter));
      padding-inline:var(--n27dc-gutter);scrollbar-width:thin;
    }
    .nsfas27dc .nsfas27dc-filter{scroll-snap-align:start}
    .nsfas27dc .nsfas27dc-card__actions{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:420px){
    .nsfas27dc .nsfas27dc-intro,
    .nsfas27dc .nsfas27dc-directory{--n27dc-gutter:18px}
  }
}

/* scoped: a global version of this would kill animation across the whole site */
@media (prefers-reduced-motion:reduce){
  .nsfas27dc *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .nsfas27dc .nsfas27dc-card:hover{transform:none}
  .nsfas27dc .nsfas27dc-card:hover .nsfas27dc-card__cover img{transform:none}
}

/* ==========================================================================
   8. Armour (optional)
   Some CMS themes ship !important content rules — `.content p{…!important}`
   and the like — which a normal declaration can never outrank. This layer
   re-asserts only the properties that would visibly break if a host forced
   them. The tripled class is the same element written three times, purely to
   raise specificity to 0,4,0. Delete this section if nsfas.org.za does not
   use !important in its content styles; the block looks identical without it.
   ========================================================================== */
.nsfas27dc.nsfas27dc.nsfas27dc,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-intro__title,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-h2,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card__title,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-btn{font-family:var(--n27dc-font) !important}

.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-intro__title,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-h2,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card__title{color:var(--n27dc-ink) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-intro__title{font-size:clamp(30px,calc(3.6 * var(--n27dc-u)),54px) !important;line-height:1.02 !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-h2{font-size:clamp(24px,calc(2.6 * var(--n27dc-u)),40px) !important;line-height:1.1 !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card__title{font-size:clamp(16px,calc(1.3 * var(--n27dc-u)),19px) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-intro__lede{font-size:clamp(15px,calc(1.15 * var(--n27dc-u)),18px) !important;color:var(--n27dc-body) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card__desc{font-size:clamp(13.5px,calc(1.02 * var(--n27dc-u)),15px) !important;color:var(--n27dc-body) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-directory__note{color:var(--n27dc-body) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-dates dd,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-dates__msg{color:var(--n27dc-white) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-dates dt{color:var(--n27dc-gold) !important}

.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-btn{text-decoration:none !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-btn--primary{background:var(--n27dc-orange-ui) !important;color:var(--n27dc-white) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-btn--primary[aria-disabled="true"]{background:var(--n27dc-line-soft) !important;color:var(--n27dc-muted) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-btn--ghost{background:var(--n27dc-white) !important;color:var(--n27dc-ink) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-filter[aria-pressed="true"]{background:var(--n27dc-orange-ui) !important;color:var(--n27dc-white) !important}

.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-intro,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-directory{padding-inline:0 !important;border-inline:0 !important;margin:0 !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-grid,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-filters{list-style:none !important;padding-left:0 !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-grid{display:grid !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card{display:flex !important;flex-direction:column !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card[hidden]{display:none !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-empty[hidden]{display:none !important}
.nsfas27dc.nsfas27dc.nsfas27dc img,
.nsfas27dc.nsfas27dc.nsfas27dc svg{border:0 !important;filter:none !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card__cover img{
  position:absolute !important;width:auto !important;height:auto !important;
  max-width:calc(100% - 2 * var(--n27dc-cover-pad)) !important;
  max-height:calc(100% - 2 * var(--n27dc-cover-pad)) !important;
  object-fit:fill !important;
}

/* --- armour, continued: the remaining text sizes and control geometry.
       A theme's `p{font-size:11px!important}` and `button{border:3px;
       padding:20px;border-radius:0}` reach every <p> and <button> in here. --- */
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-eyebrow{
  font-size:clamp(10.5px,calc(.82 * var(--n27dc-u)),12px) !important;
  line-height:1.5 !important;color:var(--n27dc-orange-dark) !important;
  display:flex !important;
}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-directory__note{font-size:clamp(14px,calc(1.1 * var(--n27dc-u)),17px) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-dates__msg{font-size:clamp(15px,calc(1.2 * var(--n27dc-u)),18px) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-dates__tag{font-size:clamp(11.5px,calc(.9 * var(--n27dc-u)),13px) !important;color:#C9C2B6 !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-status{font-size:14px !important;color:var(--n27dc-muted) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-status b{color:var(--n27dc-ink) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card__meta{font-size:12.5px !important;color:var(--n27dc-muted) !important;display:flex !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-modal__sub{font-size:13px !important;color:var(--n27dc-muted) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-modal__hint{font-size:12.5px !important;color:var(--n27dc-muted) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-empty p{font-size:15px !important;color:var(--n27dc-body) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-empty h3{font-size:18px !important;color:var(--n27dc-ink) !important}

/* controls keep their own geometry, not the theme's */
.nsfas27dc.nsfas27dc.nsfas27dc button,
.nsfas27dc.nsfas27dc.nsfas27dc input{
  font-family:var(--n27dc-font) !important;letter-spacing:normal !important;
}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-btn{
  font-size:14.5px !important;padding:10px 18px !important;
  border-radius:var(--n27dc-r-sm) !important;min-height:var(--n27dc-tap) !important;
  display:inline-flex !important;
}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-btn--ghost{border:1px solid var(--n27dc-line) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-filter{
  font-size:14px !important;padding:9px 17px !important;border-radius:999px !important;
  min-height:var(--n27dc-tap) !important;border:1px solid var(--n27dc-line) !important;
  background:var(--n27dc-white) !important;color:var(--n27dc-body) !important;
  display:inline-flex !important;
}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-filter[aria-pressed="true"]{
  border-color:var(--n27dc-orange-ui) !important;
}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-filter__n{font-size:12px !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-search input{
  font-size:15px !important;padding:10px 42px 10px 44px !important;
  border-radius:var(--n27dc-r-sm) !important;min-height:var(--n27dc-tap) !important;
  border:1px solid var(--n27dc-line) !important;background:var(--n27dc-white) !important;
  color:var(--n27dc-ink) !important;width:100% !important;
}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-search__clear,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-modal__close,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-modal__pager button{
  padding:0 !important;background:none !important;border:0 !important;
}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-modal__pager button{
  border:1px solid var(--n27dc-line) !important;background:var(--n27dc-white) !important;
  border-radius:var(--n27dc-r-sm) !important;
}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card__badge{font-size:10px !important;padding:5px 10px !important;border-radius:6px !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card__pdf{font-size:8px !important;border-radius:4px !important;display:inline-grid !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-dates{border-radius:var(--n27dc-r) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card{border-radius:var(--n27dc-r) !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card__cover img{border-radius:3px !important}
/* list items too, not just the lists: `.content ul li{list-style:square!important}`
   targets the item, and a rule on the parent cannot outrank it */
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-filters > li,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-grid > li,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card{
  list-style:none !important;display:block !important;margin:0 !important;
}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-card{display:flex !important}
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-filters > li::marker,
.nsfas27dc.nsfas27dc.nsfas27dc .nsfas27dc-grid > li::marker{content:"" !important}