/* NiCFoST
 *
 * Keeps the original site's shape and palette, in clean markup.
 * Palette read from the site's own Astra settings in wp_options:
 *   #337629 brand green   #ffbd00 gold   #ad0000 red
 * Section tints (--bg) come from each Elementor section's own background_color,
 * so the page banding matches the original rather than being invented here.
 */
:root{
  --green:#337629;
  --green-d:#255819;
  --green-dd:#1a3f12;
  --gold:#ffbd00;
  --red:#ad0000;
  --ink:#1b2320;
  --body:#333c38;
  --muted:#667069;
  --line:#e2e8e4;
  --soft:#f6f9f7;
  --pale:#f1f6df;          /* the original header strip colour */
  --wrap:1180px;
  --radius:5px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Roboto is the typeface the site's own Elementor typography settings specify */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap");
body{
  margin:0;background:#fff;color:var(--body);
  font-family:Roboto,"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;
}

/* A widget carrying its own Elementor styling. Colour rules live further down,
   after the .col defaults, so they win on source order rather than weight. */
.w{display:block}
.w > :first-child{margin-top:0}
.w > :last-child{margin-bottom:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
a{color:var(--green);text-underline-offset:2px}
a:hover{color:var(--green-d)}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ------------------------------------------------- contact strip + masthead */
.topbar{background:var(--pale);color:#33402f;border-bottom:1px solid #e3ead0}
.topbar-inner{display:flex;gap:34px;flex-wrap:wrap;padding:12px 20px;align-items:center;
  font-size:.85rem}
.tb strong{display:block;color:var(--green-d);font-weight:700;font-size:.9rem}
.tb span,.tb a{color:#44513f;text-decoration:none}
.tb a:hover{color:var(--green)}

.masthead{background:#fff}
.masthead-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-width:0}
.logo{height:62px;width:auto;flex:none}
.arms{height:56px;width:auto;flex:none}
.brandtext{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brandtext b{font-size:1.55rem;color:var(--green);font-weight:700}
.brandtext em{font-style:normal;font-size:.78rem;color:var(--muted);max-width:40ch;margin-top:3px}

/* --------------------------------------------------------------------- nav */
.nav{background:var(--green);border-top:3px solid var(--gold)}
.nav ul{list-style:none;margin:0;padding:0}
.nav .menu{display:flex;flex-wrap:wrap}
/* the anchor is display:block, so the caret has to be a flex sibling or it
   drops onto a line of its own underneath the link */
.nav .menu > li{position:relative;display:flex;align-items:center}
.nav a{display:block;color:#eef6ef;text-decoration:none;padding:13px 15px;
  font-size:.88rem;font-weight:500;white-space:nowrap;
  border-bottom:3px solid transparent;transition:background .12s,border-color .12s}
/* tint the whole item, not just the anchor, so the caret sits on the same block */
.nav .menu > li:hover,.nav .menu > li:focus-within,
.nav .menu > li:has(> a.active){background:var(--green-d)}
.nav .menu > li:hover > a,.nav .menu > li:focus-within > a{color:#fff}
.nav a.active{background:var(--green-d);color:#fff;border-bottom-color:var(--gold)}
.caret{display:inline-block;margin-left:7px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;opacity:.75}
.nav .submenu{position:absolute;top:100%;left:0;min-width:250px;z-index:60;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:0 0 var(--radius) var(--radius);box-shadow:0 10px 26px rgba(20,40,25,.16);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s,transform .14s,visibility .14s}
.nav li:hover > .submenu,.nav li:focus-within > .submenu{opacity:1;visibility:visible;transform:none}
.nav .submenu a{color:var(--ink);padding:10px 15px;font-size:.85rem;font-weight:400;
  white-space:normal;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.nav .submenu li:last-child > a{border-bottom:0}
.nav .submenu a:hover,.nav .submenu a:focus{background:var(--soft);
  border-left-color:var(--green);color:var(--green-d)}
.nav .submenu li{position:relative}
.nav .submenu .submenu{top:-3px;left:100%;border-radius:0 var(--radius) var(--radius) 0}
.nav .submenu .caret{transform:rotate(-90deg)}

/* Desktop: the mobile controls are inert. The chevron label still shows the
   caret, so the markup is identical at both sizes. */
.burger,.drawerhead,.scrim{display:none}
.nav .has-kids > .chev{pointer-events:none}
/* the caret is drawn in currentColor, so each level has to name its own */
.nav .menu > li > .chev{display:flex;align-items:center;align-self:stretch;
  padding-right:14px;color:#fff}
.nav .menu > li.has-kids > a{padding-right:4px}
.nav .submenu .has-kids > .chev{display:flex;align-items:center;
  position:absolute;right:6px;top:0;bottom:0;padding:0 8px;color:var(--ink)}

/* ------------------------------------------------- page bands and columns
 * .band is an Elementor section, .col an Elementor column keeping its own
 * width. The original banded the page with full-bleed tints, so bands run
 * edge to edge and only their inner row is constrained. */
.band{width:100%;position:relative}
.band.tint{background:var(--bg,transparent)}
/* --minh is the section's own min-height from Elementor. Capped at 56vh: the
   data says 90vh for the home hero, which on a current screen is a full
   viewport of mostly empty band. This is a deliberate deviation from the
   source; every other height is used as declared. */
.row{max-width:var(--wrap);margin:0 auto;padding:0 20px;
  display:flex;flex-wrap:wrap;align-items:flex-start;
  min-height:min(var(--minh,0px),56vh)}
.band[style*="--minh"] > .row{align-items:center}
/* --minh is a custom property, so it inherits. Without this reset a nested
   section picks up its parent's min-height and silently claims the whole band. */
.band .band{--minh:0px}
/* Columns keep their original proportion, but may not squeeze below a legible
   width. The Downloads page has a ten-across row: at 10% each that is ~70px,
   which makes long document titles overlap. Allowing them to wrap fixes it
   without changing the wider pages. */
.col{flex:1 1 var(--w,100%);max-width:100%;min-width:min(100%,190px);
  padding:14px 14px;overflow-wrap:anywhere}
.col.tint{background:var(--bg,transparent)}
.band .band .row{padding:0}          /* nested sections should not re-indent */

.col > *:first-child{margin-top:0}
.col h1,.col h2,.col h3,.col h4,.col h5,.col h6{
  color:var(--green-d);line-height:1.3;margin:1.1em 0 .45em;font-weight:700}
.col h1{font-size:1.75rem}
.col h2{font-size:1.4rem}
.col h3{font-size:1.2rem}
.col h4{font-size:1.08rem}
.col h5{font-size:.95rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

/* A widget's own colour/alignment must beat the .col heading defaults above.
   Declared here so source order settles it without an !important. */
.col .w h1,.col .w h2,.col .w h3,.col .w h4,.col .w h5,.col .w h6,
.col .w .rte,.col .w .banner,.col .w p,.col .w a{color:inherit}
.col .w h1,.col .w h2,.col .w h3,.col .w h4,.col .w h5,.col .w h6{margin-top:0}
.col .w a{text-decoration:underline}

.rte p{margin:0 0 1em}
.rte ul,.rte ol{padding-left:1.35em;margin:0 0 1.1em}
.rte li{margin:.38em 0}
.rte li::marker{color:var(--green)}
.rte strong{color:var(--ink)}
.rte table{border-collapse:collapse;width:100%;margin:1.3em 0;font-size:.93rem}
.rte th{background:var(--green);color:#fff;text-align:left;padding:9px 12px}
.rte td{border:1px solid var(--line);padding:9px 12px;vertical-align:top}
.rte tr:nth-child(even) td{background:var(--soft)}
.rte a[href$=".pdf"],.rte a[href$=".docx"],.rte a[href$=".doc"],
.rte a[href$=".pptx"],.rte a[href$=".xlsx"]{
  display:inline-block;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--red);border-radius:4px;padding:6px 12px;margin:3px 0;
  text-decoration:none;font-weight:600;color:var(--ink)}
.rte a[href$=".pdf"]:hover{border-color:var(--green)}

/* Elementor "line_text" divider: the page's title banner. Sat on a coloured
   band in the original, so it inherits the band's contrast. */
/* The editor wraps its tables in <figure class="wp-block-table"> carrying
   overflow-x:auto, so a table wider than the column scrolls on its own. Make
   sure that is true even if the inline style is ever lost. */
.content figure.wp-block-table{overflow-x:auto;max-width:100%}
.banner{display:flex;align-items:center;gap:16px;margin:.2em 0 .6em;width:100%}
.banner::before,.banner::after{content:"";flex:1;height:2px;background:currentColor;opacity:.45}
.banner span{font-size:1.15rem;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;text-align:center;line-height:1.3}
.band.tint .banner{color:#fff}
.band.tint .banner span{color:#fff}
.col:not(.tint) > .banner{color:var(--green-d)}

figure{margin:0 0 1em}
figure img{display:block;margin:0 auto;border-radius:var(--radius)}
figcaption{font-size:.82rem;color:var(--muted);text-align:center;margin-top:6px}
hr{border:0;border-top:1px solid rgba(0,0,0,.12);margin:1.2em 0}
.sp{width:100%}
.btn{display:inline-block;background:var(--green);color:#fff;padding:10px 20px;
  border-radius:4px;text-decoration:none;font-weight:600}
.btn:hover{background:var(--green-d);color:#fff}
.vid{width:100%;border-radius:var(--radius);background:#000}
.embed{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.linklist{list-style:none;padding:0;margin:0}
.linklist li{border-bottom:1px solid var(--line)}
.linklist a{display:block;padding:7px 0;text-decoration:none;font-size:.9rem}

/* ------------------------------------------------------------------- hero
 * The original used an Elementor background slideshow, driven by Swiper JS.
 * These pages are static, so the rotation is a keyframe animation instead. */
/* Hard bound on the hero. The declared height is 90vh; min-height alone let the
   band grow past it, so the cap is enforced here rather than inferred. */
.band.hero{overflow:hidden;max-height:56vh}
/* height comes from --minh (90vh on the home hero), not a value invented here */
.band.hero > .row{position:relative;z-index:2;align-items:stretch;
  padding-top:0;padding-bottom:0}

/* Hero composition. The source pinned the heading and the portal links together
   in the middle of the band with two fixed spacers (64px and 46px). Those are
   replaced with a flex column so the title sits high and centred and the portal
   links sit low against the photograph. Deliberate deviation from the source. */
.band.hero > .row > .col{display:flex;flex-direction:column;
  justify-content:space-between;padding-top:38px;padding-bottom:34px}
.band.hero .sp{display:none}
.band.hero h2{text-align:center;margin:0}
/* the links section must not absorb the free space, or there is nothing left
   for justify-content to distribute and it stays pinned under the heading */
.band.hero > .row > .col > .band{flex:0 0 auto}
.slides{position:absolute;inset:0;z-index:0}
/* centre, not top: the slides are portrait images with empty space above the
   subject, so top-aligning a cover crop pushes the subject out of the band */
.slide{position:absolute;inset:0;background-size:cover;background-position:center center;
  opacity:0;animation:slidecycle calc(var(--n,4) * 6s) infinite;
  animation-delay:calc(var(--i,0) * 6s)}
/* the first slide is visible before the animation starts, so the band is never
   blank on first paint (or for anything that does not run CSS animations) */
.slide:first-child{opacity:1}
/* No overlay: the section declares none, and the slide PNGs are cut-outs with
   transparent surrounds, so any tint here shows through as a grey wash. The
   white heading stays legible on its own text-shadow (0 0 10px #000). */
.band.hero{background:#fff}
/* 4 slides at 25% each: hold to 23%, cross-fade out by 27%, so the next slide
   (which becomes visible at exactly 25%) always overlaps. Fading out at 20%
   with the next starting at 25% left a window where the band went blank. */
@keyframes slidecycle{0%,23%{opacity:1}27%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .slide{animation:none}.slide:first-child{opacity:1}
  .drawer,.scrim{transition:none}
}

/* -------------------------------------------------------- body + sidebar */
.withside{max-width:var(--wrap);margin:0 auto;padding:22px 20px 40px;
  display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:34px;align-items:start}
.content.home{padding:0}
.content.home .row{padding-left:20px;padding-right:20px}

.sidebar{border-left:1px solid var(--line);padding-left:22px}
.sidebar h5{font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--green);margin:0 0 10px;font-weight:700}
.sidebar h5 + *{margin-bottom:24px}
.social{display:flex;gap:8px;flex-wrap:wrap}
.social a{background:var(--green);color:#fff;text-decoration:none;padding:5px 12px;
  border-radius:3px;font-size:.78rem}
.social a:hover{background:var(--green-d);color:#fff}

/* ----------------------------------------------------------------- footer
 * Three rows, matching Astra's header/footer builder configuration. */
.foot{margin-top:0}
.foot-top{background:var(--green);border-top:3px solid var(--red);color:#fff;padding:30px 0}
.footgrid{max-width:var(--wrap);margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:1fr 2fr 1fr;gap:30px;align-items:center}
.footgrid img{max-width:195px;display:block;margin:0 auto}
.foot h5{color:#fff;margin:0 0 9px;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em}
.foot p{margin:.25em 0;font-size:.9rem;line-height:1.7}
.foot a{color:var(--gold);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-mid{text-align:center}
.foot-bottom{background:#000;color:#fff;border-top:3px solid var(--gold);
  padding:13px 0;text-align:center;font-size:.84rem}

/* ------------------------------------------------------------- responsive */
@media(max-width:980px){
  /* minmax(0,1fr), not 1fr: a plain 1fr track takes its minimum from the
     content, so one 790px table widens the whole page. */
  .withside{grid-template-columns:minmax(0,1fr);gap:26px}
  .sidebar{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:20px}
  .footgrid{grid-template-columns:1fr;text-align:center}
}
@media(max-width:820px){
  body{font-size:16px}
  .col{flex-basis:100%;max-width:100%}
  .brandtext em{display:none}
  .logo{height:48px}.arms{height:42px}
  .masthead-inner{padding:12px 20px}

  /* ---- mobile navigation: hamburger + collapsible sections, no JavaScript.
     A hidden checkbox holds the open state and a <label> is the control, so it
     works with keyboard and screen readers and needs no script. ---- */
  /* The toggles carry the hidden attribute so they are out of the tab order on
     desktop, where they do nothing. Here they come back as visually hidden but
     still focusable, so the menu opens with the keyboard. */
  .navtoggle[hidden],.subtoggle[hidden]{display:block;position:absolute;
    left:0;top:0;width:1px;height:1px;padding:0;border:0;overflow:hidden;
    opacity:0;clip-path:inset(50%);pointer-events:none}

  .burger{display:flex;align-items:center;gap:10px;cursor:pointer;
    padding:13px 4px;color:#fff;font-size:.9rem;-webkit-tap-highlight-color:transparent}
  /* the bars stack inside their own box; a flex row would sit them side by side */
  .burger .bars{position:relative;display:block;flex:0 0 auto;width:22px;height:16px}
  .burger .bars span{position:absolute;left:0;width:22px;height:2px;background:#fff;
    border-radius:2px;transition:transform .18s,opacity .18s}
  .burger .bars span:nth-child(1){top:0}
  .burger .bars span:nth-child(2){top:7px}
  .burger .bars span:nth-child(3){top:14px}
  .burger em{font-style:normal;font-weight:600;letter-spacing:.04em}
  .navtoggle:focus-visible ~ .navwrap .burger{outline:2px solid var(--gold);
    outline-offset:2px;border-radius:3px}
  .navwrap{display:block;padding:0 20px}
  .burger .bars span{transition:none}

  /* ---- the drawer itself: off-canvas, over the page, never pushing it ----
     visibility (not just transform) so the links are out of the tab order
     while it is shut. */
  .drawer{position:fixed;top:0;right:0;z-index:200;
    width:min(80vw,320px);height:100vh;height:100dvh;
    display:flex;flex-direction:column;
    background:var(--green-d);box-shadow:-14px 0 34px rgba(0,0,0,.34);
    transform:translateX(100%);visibility:hidden;
    transition:transform .26s ease,visibility .26s ease;
    overscroll-behavior:contain}
  .navtoggle:checked ~ .navwrap .drawer{transform:none;visibility:visible}

  .drawerhead{display:flex;align-items:center;justify-content:space-between;
    flex:0 0 auto;padding:10px 6px 10px 18px;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.2)}
  .drawertitle{font-weight:700;font-size:.95rem;letter-spacing:.06em;
    text-transform:uppercase}
  .drawerclose{display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;font-size:1.9rem;line-height:1;color:#fff;
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .navtoggle:focus-visible ~ .navwrap .drawerclose{outline:2px solid var(--gold);
    outline-offset:-4px;border-radius:4px}

  /* the list is the only scrolling part, so the header stays put */
  .nav .menu{display:block;flex:1 1 auto;min-height:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 18px 30px}

  /* tapping anywhere off the drawer closes it */
  .scrim{display:block;position:fixed;inset:0;z-index:190;
    background:rgba(8,22,12,.52);opacity:0;visibility:hidden;
    transition:opacity .26s ease,visibility .26s ease}
  .navtoggle:checked ~ .scrim{opacity:1;visibility:visible}

  /* hold the page still underneath instead of letting it scroll behind */
  html:has(.navtoggle:checked),body:has(.navtoggle:checked){overflow:hidden}

  .nav .menu > li{display:block;background:none;
    border-top:1px solid rgba(255,255,255,.16)}
  .nav .menu > li:first-child{border-top:0}   /* the drawer header is the rule */
  .nav li{position:relative}
  .nav a{padding:10px 44px 10px 2px;font-size:.92rem;white-space:normal;
    border-bottom:0}
  .nav .menu > li > a:hover,.nav .menu > li:focus-within > a{background:none}
  .nav a.active{background:none;color:var(--gold);border-bottom:0}

  /* each section collapses independently; the link still navigates */
  .nav .has-kids > .chev{display:flex;align-items:center;justify-content:center;
    position:absolute;right:0;top:0;bottom:auto;width:44px;height:42px;
    margin:0;padding:0;pointer-events:auto;cursor:pointer}
  .nav .menu > li.has-kids > a{padding-right:44px}
  .nav .caret{border-top-width:5px;border-left-width:5px;border-right-width:5px;
    opacity:1;transition:transform .18s}
  .nav .submenu .has-kids > .chev{color:var(--gold)}
  .nav .subtoggle:checked ~ .chev .caret{transform:rotate(180deg)}
  .nav .subtoggle:focus-visible ~ .chev{outline:2px solid var(--gold);
    outline-offset:-3px;border-radius:3px}

  .nav .submenu{position:static;display:none;opacity:1;visibility:visible;
    transform:none;box-shadow:none;background:none;border:0;
    border-left:3px solid var(--gold);min-width:0;margin:0 0 8px 10px}
  .nav .subtoggle:checked ~ .submenu{display:block}
  .nav .submenu a{color:#dcecdf;background:none;border-bottom:0;
    padding:9px 44px 9px 12px;font-size:.88rem}
  .nav .submenu .has-kids > .chev{height:38px}
  .nav .submenu .caret{transform:none}
  .nav .submenu .subtoggle:checked ~ .chev .caret{transform:rotate(180deg)}
  .nav .submenu .submenu{left:auto;top:auto;border-radius:0}

  /* a four-column fee table cannot usefully compress to a phone, so any table
     the editor did not wrap scrolls inside its own column instead */
  .content :not(.wp-block-table) > table{display:block;overflow-x:auto}
  .content :not(.wp-block-table) > table > tbody{display:table;width:100%}

  .band.hero > .row{min-height:auto}
  .band.hero{max-height:none}
  .band.hero > .row > .col{padding-top:26px;padding-bottom:24px}
  .band.hero h2{font-size:1.5rem!important;line-height:1.25}
  .slide{background-position:center top}
}
@media(max-width:560px){
  .topbar-inner{gap:4px 18px;font-size:.78rem;padding:10px 20px}
  .brandtext b{font-size:1.2rem}
  .row{padding:0 16px}
  .col{padding:10px 0}
  .withside{padding:18px 16px 30px}
  .band.hero h2{font-size:1.28rem!important}
  .content img,.content figure img{width:100%}
  /* ...except the downloads index, which is ten 10% columns. Stacking those one
     per screen turns a compact list into a mile of Adobe icons, so keep it
     two-up with the icon at thumbnail size. */
  .row > .col[style*="--w:10%"]{flex-basis:50%;max-width:50%;min-width:0;
    padding:10px 8px}
  .row > .col[style*="--w:10%"] h2{font-size:.82rem;line-height:1.3;margin:0}
  .row > .col[style*="--w:10%"] img{width:auto;max-width:100%;max-height:92px}
  .row > .col[style*="--w:10%"] figure{margin:6px 0 0;text-align:center}
  /* justified text reads fine in a 600px column; in a phone column it opens
     rivers of whitespace, so fall back to ragged right. The alignment is an
     inline style carried over from Elementor, hence !important. */
  [style*="justify"]{text-align:left!important}
}

@media print{
  .topbar,.nav,.foot,.sidebar{display:none}
  .withside{grid-template-columns:1fr}
  body{font-size:11pt;color:#000}
}