/*
Theme Name: News at Winslow
Theme URI: https://news.winslow.com.au/
Description: Hand-written classic theme for News at Winslow, rebuilt from the
  live site's measured design tokens. No code is carried over from the Joomla
  source - only colours, type and licensed brand assets.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: newswinslow
*/

/* ------------------------------------------------------------------ tokens
 * Every value here was read from the live site's own stylesheet
 * (templates/yootheme/css/theme.9.css), not guessed. Where a value is a
 * literal declaration on live it is quoted in the comment beside it.
 */
:root {
    --nw-yellow:      #EAAB00;   /* --bs-primary */
    --nw-grey:        #706F6D;   /* --bs-secondary, .uk-text-meta colour */
    --nw-grey-700:    #646464;   /* .uk-card-default colour, pagination */
    --nw-grey-900:    #393939;   /* .uk-text-emphasis */
    --nw-black:       #000;      /* .uk-section-secondary, .uk-text-secondary */
    --nw-white:       #FFF;
    --nw-body:        #545860;   /* html colour */
    --nw-lead:        #757982;   /* .uk-text-lead colour */
    --nw-card-bg:     #fafafa;   /* .uk-card-default background */
    --nw-muted-bg:    #f2f2f2;
    --nw-border:      #e5e5e5;
    --nw-footer-bg:   rgba(117,121,130,.14);  /* footer upper band */

    --nw-font-body:   'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
    --nw-font-head:   'Oswald', 'Arial Narrow', Arial, sans-serif;

    /* .uk-container = 1200px, .uk-container-large = 1360px, both
       box-sizing:content-box with 15px side padding. */
    --nw-maxw:        1360px;
    --nw-maxw-narrow: 1200px;
    --nw-pad:         15px;
    --nw-gap:         30px;      /* uk-grid-small */
    --nw-section:     40px;      /* .uk-section padding-top/bottom */
    /* Live's navbar is a flat 100px with no padding. We add breathing room
       above/below the bar's contents; change this one value to tune it. */
    --nw-header-pad:  18px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    font-family: var(--nw-font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
    background: #fff;
    color: var(--nw-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-y: scroll;
}
body { margin: 0; }

/* Live: shared rule sets family/colour/margin; each element rule then sets
   its own size, line-height and weight 500. */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 20px 0;
    font-family: var(--nw-font-head);
    font-weight: 500;
    color: var(--nw-black);
    letter-spacing: .75px;
}
h1 { font-size: 40.8px; line-height: 1.1; text-transform: uppercase; }
h2 { font-size: 34px;   line-height: 1.1; }
h3 { font-size: 28px;   line-height: 1.3; text-transform: capitalize; }
h4 { font-size: 22px;   line-height: 1.3; }
h5 { font-size: 20px;   line-height: 1.3; }
h6 { font-size: 17px;   line-height: 1.4; }

a { color: var(--nw-grey-900); text-decoration: none; }
a:hover { color: var(--nw-yellow); }

img, video { max-width: 100%; height: auto; }

/* The site's signature: yellow text knocked out of a black block.
   Measured on live: background #000, colour #eaab00, padding 10px,
   display inline-block. */
mark {
    display: inline-block;
    background: var(--nw-black);
    color: var(--nw-yellow);
    padding: 10px;
}

.nw-container {
    max-width: var(--nw-maxw);
    margin: 0 auto;
    padding-left: var(--nw-pad);
    padding-right: var(--nw-pad);
}
/* Article templates sit in the narrower 1200px container on live. */
.nw-container-narrow { max-width: var(--nw-maxw-narrow); }

.nw-lead {
    font-size: 34px;
    line-height: 1.2;
    color: var(--nw-lead);
    font-weight: 300;
    letter-spacing: .5px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
}
.nw-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--nw-black); color: var(--nw-yellow); padding: 10px 16px;
}
.nw-skip-link:focus { left: 0; }

:where(a, button, input, [tabindex]):focus-visible {
    outline: 2px solid var(--nw-yellow);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ header
 * Live's navbar, measured from theme.9.css rather than inferred:
 *   .uk-navbar-item,.uk-navbar-nav>li>a,.uk-navbar-toggle
 *       { min-height:100px; display:flex; align-items:center }
 *   .uk-navbar-nav { gap:50px }            (>=960px; 10px is the base)
 *   .uk-navbar-nav>li>a { padding:0 } and 16px/500 as computed on live
 *       (the 22px/400 declarations later in the sheet lose to it)
 *   active link is #eaab00; active/hover draw a 20px yellow bar from the
 *   ::before (top:-20px, border-bottom:20px solid #eaab00).
 * The white-on-active variants in the sheet require a .uk-light /
 * .uk-section-secondary ancestor, which this header does not have.
 */
.nw-header { background: var(--nw-black); }
/* Live sticks only at @m (uk-sticky media="@m"). */
@media (min-width: 961px) {
    .nw-header { position: sticky; top: 0; z-index: 50; }
}
/* The header uses .uk-container (1200px); content and footer use
   .uk-container-large (1360px). */
.nw-header .nw-container { max-width: var(--nw-maxw-narrow); }
.nw-header-inner {
    display: flex;
    align-items: center;
    gap: 0;
    padding-top: var(--nw-header-pad);
    padding-bottom: var(--nw-header-pad);
    min-height: 100px;
}
.nw-logo { display: flex; align-items: center; flex: 0 0 auto; }
.nw-logo img { display: block; height: auto; }
.nw-logo img.nw-logo-mark { width: 130px; }
.nw-logo img.nw-logo-word { width: 240px; display: none; }

/* Stretch the nav to the full height of the padded bar: the active/hover
   marker is positioned off the link, so the link must reach the bar's top
   edge for the marker to sit flush against it. */
.nw-nav { margin-left: auto; align-self: stretch; display: flex; }
.nw-nav ul {
    list-style: none;
    display: flex;
    gap: 50px;
    margin: 0; padding: 0;
    align-items: stretch;
}
.nw-nav li { display: flex; align-items: stretch; }
.nw-nav a {
    position: relative;
    color: #fff;
    font-family: var(--nw-font-head);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 16px;          /* measured on live, not the 22px override */
    line-height: 1.1;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;      /* fill the padded row, don't define it */
    min-height: 0;
    flex: 1 1 auto;
    transition: color .1s ease-in-out;
}
/* The yellow bar that rides the top of the header on hover/active.
   The link is stretched to the padded row, so anchoring the bar to the
   link's own top keeps it flush with the header edge; on live (no padding)
   these are the same place. */
.nw-nav a::before {
    content: "";
    display: block;
    position: absolute;
    left: 0; right: 0;
    /* Sit flush against the top edge of the header bar, not above the
       label: the link is inset by the bar's padding, so pull back by it. */
    top: calc(-1 * var(--nw-header-pad));
    height: 10px;
    background: transparent;
    transition: background-color .1s ease-in-out;
}
.nw-nav a:hover::before,
.nw-nav .current-menu-item > a::before { background: var(--nw-yellow); }
.nw-nav .current-menu-item > a { color: var(--nw-yellow); }

/* "Mental Health / first aiders" - live stacks a subtitle under the label. */
.nw-nav-label { display: block; line-height: 1.1; }
.nw-nav-subtitle {
    display: block;
    font-size: 16px;
    font-family: var(--nw-font-head);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 16px;
}

/* .uk-navbar-toggle is yellow and turns white on hover. */
/* .uk-navbar-toggle: padding 0, yellow, white on hover. The space before it
   comes from the nav list's 50px gap, not from padding. */
.nw-search-toggle,
.nw-nav-toggle {
    background: none; border: 0; cursor: pointer;
    color: var(--nw-yellow);
    padding: 0;
    margin-left: 50px;
    line-height: 0;
    align-self: stretch;
    min-height: 0;
    display: flex; align-items: center;
    transition: color .1s ease-in-out;
}
.nw-search-toggle:hover, .nw-nav-toggle:hover { color: #fff; }
.nw-nav-toggle { display: none; }

/* Desktop search is a centred modal on live. */
.nw-search-modal {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,.6);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 15vh 20px 20px;
}
.nw-search-modal[hidden] { display: none; }
.nw-search-modal-dialog {
    background: #fff; width: 100%; max-width: 600px; padding: 30px;
}
.nw-search-modal form { display: flex; align-items: center; gap: 10px; }
.nw-search-modal input[type=search] {
    flex: 1; min-width: 0;
    padding: 10px 0;
    border: 0; border-bottom: 1px solid var(--nw-border);
    font-family: var(--nw-font-body); font-size: 24px;
    background: none; color: var(--nw-body);
}
.nw-search-modal input[type=search]:focus { outline: none; border-bottom-color: var(--nw-yellow); }
.nw-search-modal button {
    background: none; border: 0; cursor: pointer;
    color: var(--nw-grey); padding: 6px; line-height: 0;
}
.nw-search-modal button:hover { color: var(--nw-yellow); }

/* -------------------------------------------------------------------- hero
 * Live: .uk-section-primary (#EAAB00) with the contour SVG at centre-right.
 */
.nw-hero {
    background: var(--nw-yellow) url(assets/topographic-map-contour-lines-white-25PC.svg)
        no-repeat center right;
    color: #fff;
    padding: var(--nw-section) 0;
}
.nw-hero h1, .nw-hero h2 { color: #fff; }
/* Live's hero headline is a .uk-h2: 40px and NOT uppercased, unlike a
   bare h1 (which the sheet does uppercase). */
.nw-hero h1 { font-size: 40px; text-transform: none; }
/* The hero body copy runs at the base 18px, not the 34px lead size. */
.nw-hero .nw-lead { color: #fff; font-size: 18px; line-height: 1.7; font-weight: 500; }
.nw-hero .nw-lead p { margin: 0 0 20px; }
.nw-hero .nw-lead p:last-child { margin-bottom: 0; }
.nw-hero h1 { max-width: 30em; }
.nw-hero .nw-lead { max-width: 750px; }

.nw-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nw-gap);
    align-items: center;
}

/* Featured card in the hero's right column: solid black tile, bottom-right. */
.nw-hero-feature { position: relative; display: block; }
.nw-hero-feature img { width: 100%; display: block; }
.nw-hero-feature-body {
    position: absolute; right: 0; bottom: 0;
    background: var(--nw-black);
    color: #fff;
    padding: 15px;
    width: 300px;                 /* uk-width-medium */
    max-width: 100%;
}
.nw-hero-feature-date {
    font-size: 15px; line-height: 1.4; letter-spacing: 0;
    text-transform: uppercase; color: #fff;
    margin-bottom: 5px;
}
.nw-hero-feature-title {
    font-family: var(--nw-font-head); font-weight: 500;
    font-size: 20px; line-height: 1.3; margin: 0; color: #fff;
    letter-spacing: .75px;
}
.nw-hero-feature:hover .nw-hero-feature-title { color: var(--nw-yellow); }

/* Live hides the hero image column below @m and shows the same article as a
   black card at the top of the list instead. */
.nw-hero-col { display: block; }
.nw-feature-mobile { display: none; }

/* ------------------------------------------------------- listing sidebar */
.nw-layout {
    display: grid;
    grid-template-columns: 20% 1fr;   /* uk-width-1-5@m / 4-5@m */
    gap: var(--nw-gap);
    align-items: start;
}
/* Live's sidebar search (.uk-search-default), measured: a 40px filled
   #fafafa box with no border, 18px #646464 text, and the icon absolutely
   positioned in a 40x40 area at the left with the input padded clear of it. */
.nw-sidebar-search { margin-bottom: 20px; margin-left: 20px; }
.nw-sidebar-search form {
    position: relative;
    display: block;
}
.nw-sidebar-search input[type=search] {
    width: 100%;
    height: 40px;
    border: 0;
    background: var(--nw-card-bg);
    padding: 0 10px 0 40px;
    font-family: var(--nw-font-body);
    font-size: 18px;
    color: var(--nw-grey-700);
    -webkit-appearance: none;
    appearance: none;
}
.nw-sidebar-search input[type=search]::placeholder { color: var(--nw-grey-700); }
.nw-sidebar-search input[type=search]:focus { outline: none; }
.nw-sidebar-search button {
    position: absolute;
    left: 0; top: 0;
    width: 40px; height: 40px;
    border: 0; background: none; cursor: pointer; padding: 0;
    color: var(--nw-black); line-height: 0;
    display: flex; align-items: center; justify-content: center;
}
.nw-sidebar-search button:hover { color: var(--nw-yellow); }

/* Pillars sit in a uk-card-default (#fafafa) card on live. */
.nw-pillars {
    background: var(--nw-card-bg);
    color: var(--nw-grey-700);
    padding: 30px;
    padding-left: 80px;
}
.nw-pillars ul { list-style: none; margin: 0; padding: 0; }
.nw-pillars li + li { margin-top: 10px; }
/* Measured on live: resting #EAAB00 at 18px/700; hover goes to rgb(38,38,38)
   with an underline. (This theme previously had the two states inverted.) */
.nw-pillars a {
    font-family: var(--nw-font-body);
    font-weight: 700;
    font-size: 18px;
    color: var(--nw-yellow);
    letter-spacing: 0;
    transition: color .1s ease-in-out;
}
.nw-pillars a:hover {
    color: #262626;
    text-decoration: underline;
}
/* The current pillar reads as the hovered/selected state. */
.nw-pillars .is-active a { color: #262626; text-decoration: underline; }

/* -------------------------------------------------------------- card grid */
.nw-main { padding: var(--nw-section) 0; }
.nw-page-title { margin-bottom: 20px; }

.nw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* uk-child-width-1-4@l */
    gap: var(--nw-gap);
    align-items: stretch;                     /* uk-grid-match */
}
.nw-card {
    background: var(--nw-card-bg);            /* uk-card-default */
    color: var(--nw-grey-700);
    display: flex; flex-direction: column;
    height: 100%;
    transition: box-shadow .1s ease-in-out;
}
.nw-card:hover { box-shadow: 0 14px 25px rgba(0,0,0,.16); }
.nw-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.nw-card-media { aspect-ratio: 610 / 319; overflow: hidden; background: var(--nw-muted-bg); }
.nw-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-card-body { padding: 15px; }
/* .uk-text-meta: 15px/1.4, uppercase, no tracking, #706f6d. */
.nw-card-meta {
    font-size: 15px; line-height: 1.4; color: var(--nw-grey);
    text-transform: uppercase; letter-spacing: 0;
    margin-bottom: 5px;
}
/* Grid titles use .uk-text-meta sizing with .uk-text-secondary (#000). */
.nw-card-title {
    font-size: 15px; line-height: 1.4; margin: 0;
    font-family: var(--nw-font-body); font-weight: 500;
    color: var(--nw-black);
    text-transform: uppercase; letter-spacing: 0;
}
.nw-card:hover .nw-card-title { color: var(--nw-yellow); }

/* Text-only cards (no featured image): yellow meta, #393939 title. */
.nw-card-text .nw-card-body { display: flex; flex-direction: column; height: 100%; }
.nw-card-text .nw-card-meta { color: var(--nw-yellow); }
.nw-card-text .nw-card-title { color: var(--nw-grey-900); }

/* The mobile-only featured card is the black variant. */
.nw-feature-mobile .nw-card { background: var(--nw-black); color: #fff; }
.nw-feature-mobile .nw-card-meta,
.nw-feature-mobile .nw-card-title { color: #fff; }

/* ------------------------------------------------------------ single post
 * Live: a thin yellow sliver, then the hero image with the black title tile
 * overlaid bottom-left inside it, then body + rail split by a divider.
 */
.nw-band { background: var(--nw-yellow); height: 25px; }

.nw-article-figure { margin: 0 0 var(--nw-section); position: relative; overflow: hidden; }
.nw-article-figure img { width: 100%; display: block; }
.nw-article-titleblock {
    background: var(--nw-black);
    color: #fff;
    padding: 30px;
}
/* Overlay the title tile inside the image only when there is an image to
   sit on; the standalone block keeps its own full-width treatment. */
.nw-article-figure .nw-article-titleblock {
    position: absolute; left: 0; bottom: 0;
    max-width: 70%;
}
.nw-article-titleblock h1 {
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    font-size: 40.8px;
    line-height: 1.1;
}
/* Posts with no featured image: no black tile, no inset, and the title in
   #393939 Oswald rather than reversed out of black. */
.nw-article-titleblock-plain {
    background: none;
    padding: 0;
}
.nw-article-titleblock-plain h1 {
    color: var(--nw-grey-900);
    font-family: var(--nw-font-head);
    font-weight: 300;   /* Oswald Light; the theme loads 300-700 */
}

.nw-article-titleblock .nw-article-meta {
    color: #fff; margin: 0;
    font-size: 15px; text-transform: none; letter-spacing: 0;
}

.nw-article-meta {
    color: var(--nw-grey); text-transform: uppercase;
    letter-spacing: 0; font-size: 15px; margin-bottom: 10px;
}

/* uk-width-3-5@m / 2-5@m with uk-grid-divider between them. */
.nw-article-cols {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--nw-gap);
    align-items: start;
}
.nw-article-cols > .nw-entry { min-width: 0; }
/* Without the rail there is no second column to divide against. */
.nw-article-cols-single { grid-template-columns: 1fr; }
.nw-article-cols > .nw-rail {
    border-left: 1px solid var(--nw-border);
    padding-left: var(--nw-gap);
}

.nw-entry > * + * { margin-top: 1.1em; }
.nw-entry img { height: auto; }
.nw-entry figure { margin: 1.6em 0; }
.nw-entry ul, .nw-entry ol { padding-left: 1.3em; }
.nw-entry blockquote {
    border-left: 4px solid var(--nw-yellow);
    margin: 1.6em 0; padding: .2em 0 .2em 1.2em; color: var(--nw-grey-900);
}
.nw-entry table { width: 100%; border-collapse: collapse; }
.nw-entry th, .nw-entry td {
    border: 1px solid var(--nw-border); padding: 10px 12px; text-align: left;
}
.nw-entry th { background: var(--nw-muted-bg); font-family: var(--nw-font-head); }
.nw-table-wrap { overflow-x: auto; }

.nw-embed { margin: 1.6em 0; }
.nw-embed iframe, .nw-embed video { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; display: block; }

.nw-docs, .nw-links { margin: 2em 0; padding: 22px 24px; background: var(--nw-muted-bg); }
.nw-docs h3, .nw-links h3 { margin-bottom: 12px; font-size: 20px; }
.nw-docs ul, .nw-links ul { margin: 0; padding-left: 1.2em; }
.nw-form-closed {
    background: var(--nw-muted-bg); border-left: 4px solid var(--nw-yellow);
    padding: 16px 20px;
}

.nw-post-pillars { margin: 2em 0 0; }
.nw-post-pillars a {
    display: inline-block; margin: 0 6px 6px 0;
    padding: 5px 14px; background: var(--nw-card-bg);
    font-family: var(--nw-font-body); text-transform: uppercase;
    letter-spacing: 0; font-size: 15px;
}
.nw-post-pillars a:hover { background: var(--nw-yellow); color: #fff; }

/* "Latest Articles" rail - uk-heading-divider under the title. */
.nw-rail { background: var(--nw-card-bg); padding: 25px 20px; }
/* .uk-heading-divider: padding-bottom calc(5px + .1em), 3.25px solid #f1f1f1 */
.nw-rail h2 {
    font-size: 22px; margin: 0 0 15px;
    padding-bottom: calc(5px + .1em);
    border-bottom: 3.25px solid #f1f1f1;
    font-family: var(--nw-font-head); font-weight: 500;
    text-transform: none;
}
.nw-rail ul { list-style: none; margin: 0; padding: 0; }
.nw-rail li { padding: 8px 0; }
.nw-rail a {
    color: var(--nw-grey-700); font-size: 16px; line-height: 1.4; display: block;
}
.nw-rail a:hover { color: var(--nw-yellow); }
.nw-rail a.is-active { color: var(--nw-yellow); }

/* ------------------------------------------------------------ landing pages
 * "Tell your story" and "Mental Health Kit" are bespoke builder layouts on
 * live rather than articles. Accent gold #C7AA5E is read from live's own
 * inline <style> on those pages.
 */
:root { --nw-gold: #C7AA5E; }

.nw-landing { padding: 0; }
.nw-landing-article { max-width: none; margin: 0; }

/* ---- Tell your story ----
 * Three stacked sections, measured from live at 1440px:
 *   dark #000 (70px padding) | gold #C7AA5E | white notice.
 *   Full-width container, 40px sides. Media 288px square at x=40.
 *   Inner split 650px + 433px with an 80px gutter and a divider.
 */
.nw-landing-tys { padding: 0; }
.nw-landing-tys .nw-landing-article { max-width: none; margin: 0; }
.nw-landing-tys .nw-landing-inner {
    padding-left: 40px;
    padding-right: 40px;
}

/* -- 1. dark band -- */
.nw-landing-dark {
    background: var(--nw-black);
    color: #fff;
    padding: 70px 0;
}
/* Live's grid uses UIkit negative margins, so the band runs edge to edge:
   media column starts at x=40, the content column at x=318 and runs to
   x=1401 (1083px at a 1440 viewport). Reproduce that with a narrow left
   gutter rather than the theme's usual 40px container padding. */
/* 288px image track + a 30px gutter puts the content column at x=318,
   matching live, without the image overlapping the headline. */
.nw-landing-cols {
    display: grid;
    grid-template-columns: 288px 1fr;
    gap: 0;
    align-items: start;
}
.nw-landing-tys .nw-landing-cols.nw-landing-inner {
    padding-left: 30px;   /* 30 + 288 track = content column at x=318 */
    padding-right: 39px;
    column-gap: 0;
}
/* The content column starts hard against the image track; live's own gap is
   absorbed by the panel padding inside it. */
.nw-landing-main { padding-left: 0; }
.nw-landing-media { position: sticky; top: 150px; }
.nw-landing-media figure { margin: 0; }
/* The image fills its 288px track exactly, so it can never overlap the
   content column (a wider image drawn over the headline clipped its first
   glyph). The track starts at x=30; a 10px inset lands it at live's x=40. */
.nw-landing-media img {
    width: 278px; max-width: 100%; height: auto; display: block;
    margin-left: 10px;
}

.nw-landing-dark .nw-entry { color: #fff; }
.nw-landing-dark .nw-entry > * + * { margin-top: 1.1em; }

.nw-landing-intro > p:first-child {
    color: var(--nw-gold);
    font-family: var(--nw-font-head);
    font-weight: 500;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: .75px;
    margin: 0 0 20px;
}
.nw-landing-intro > p:first-child + p {
    font-size: 34px;
    line-height: 40.8px;
    font-weight: 300;
    letter-spacing: .5px;
    margin-top: 0;
}

/* Live: 650px body + 433px terms, 80px gutter, divider between. */
/* Live: body 650px at x=318, terms 433px at x=967 - the columns abut and the
   80px breathing room is padding inside the terms column, not a grid gap. */
.nw-landing-split {
    display: grid;
    grid-template-columns: 650fr 433fr;
    gap: 0;
    margin-top: 54px;
    align-items: start;
}
.nw-landing-terms {
    border-left: 1px solid rgba(255,255,255,.2);
    padding-left: 80px;
}
.nw-landing-body { padding-right: 80px; }
.nw-landing-terms > p:first-child {
    color: var(--nw-gold);
    font-family: var(--nw-font-head);
    font-weight: 500;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: .75px;
    margin: 0 0 10px;
}
.nw-landing-terms > p + p {
    border-top: 1px solid rgba(255,255,255,.2);
    padding-top: 1.1em;
}

.nw-landing-dark h2,
.nw-landing-dark h3,
.nw-landing-dark h4,
.nw-landing-dark h5 {
    color: var(--nw-gold);
    font-family: var(--nw-font-head);
    font-weight: 500;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: .4em;
}
.nw-landing-dark a { color: var(--nw-gold); text-decoration: underline; }
.nw-landing-dark a:hover { color: #fff; }
.nw-landing-dark strong { color: #fff; }

/* -- 2. gold band: Allenby Foundation -- */
.nw-landing-gold {
    background: var(--nw-gold);
    color: #fff;
    padding: 70px 0;
    text-align: center;
}
.nw-landing-gold figure { margin: 0 0 30px; }
.nw-landing-gold img { max-width: 300px; height: auto; }
.nw-landing-gold p {
    font-size: 34px;
    line-height: 40.8px;
    font-weight: 300;
    letter-spacing: .5px;
    color: #fff;
    max-width: 1000px;
    margin: 0 auto;
}
.nw-landing-gold p + p { margin-top: 1.1em; }
.nw-landing-gold strong { color: #fff; }

/* -- 3. white band: closed-form notice -- */
.nw-landing-notice {
    background: #fff;
    padding: 70px 0;
    text-align: center;
}
.nw-landing-notice p {
    font-family: var(--nw-font-head);
    font-weight: 500;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: .75px;
    color: var(--nw-black);
    margin: 0;
}
/* ---- Mental Health Kit: centred narrow column on white ---- */
.nw-landing-mhk { padding: var(--nw-section) 0; }
.nw-landing-mhk .nw-landing-title {
    text-align: center;
    margin-bottom: 30px;
}
.nw-landing-mhk .nw-landing-body {
    max-width: 750px;      /* live: uk-width-2xlarge, centred */
    margin: 0 auto;
}
.nw-landing-mhk .nw-landing-body figure,
.nw-landing-mhk .nw-landing-body p > img {
    display: block;
    margin: 0 auto 30px;
    text-align: center;
}
.nw-landing-mhk .nw-landing-body img { max-width: 800px; width: 100%; height: auto; }
/* The stored content opens with a centred "Mental Health Tools" line that
   duplicates the title; live shows it as the heading, so hide the echo. */
.nw-landing-mhk .nw-landing-body > div:first-child[style*="center"] { display: none; }

/* ------------------------------------------------------------- pagination
 * Live: borderless, uppercase, bottom-rule marks the active page.
 */
.nw-pagination { margin-top: var(--nw-section); display: flex; justify-content: center; }
.nw-pagination .page-numbers {
    display: inline-flex; align-items: center;
    height: 30px; padding: 3px 12px; margin: 0;
    font-family: var(--nw-font-body); font-weight: 500;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--nw-grey-700);
    border-bottom: 2px solid transparent;
    transition: color .1s ease-in-out, border-color .1s ease-in-out;
}
.nw-pagination .page-numbers:hover { color: var(--nw-yellow); }
.nw-pagination .page-numbers.current {
    color: var(--nw-yellow); border-bottom-color: var(--nw-yellow);
}
.nw-pagination .page-numbers.dots { color: var(--nw-grey); }

/* ------------------------------------------------------------------ footer
 * Two bands, measured from live:
 *  1. uk-section-small (40px) over a flat rgba(117,121,130,.14) ground.
 *     Left 3/4 holds a 4px #797582 <hr>; right 1/4 the grey wordmark at
 *     300x32, right-aligned.
 *  2. uk-section-secondary (#000) uk-section-small. The copy sits in a
 *     uk-width-large@m (450px) column at uk-text-small (18px/1.5) and
 *     uk-text-muted (#706f6d); the to-top control is a uk-width-small@m
 *     (150px) column, and .uk-totop itself is padding:15px, colour #fff on a
 *     black ground.
 */
.nw-footer { margin-top: var(--nw-section); }

/* Live declares the wall_light texture via UIkit's lazy `uk-img`, which only
   swaps it in on scroll - the painted footer shows background-image:none over
   the flat rgba(117,121,130,.14) ground, so we match the flat ground. */
.nw-footer-upper {
    background: var(--nw-footer-bg);
    padding: 40px 0;
}
.nw-footer-upper-inner {
    display: flex; align-items: center; gap: 40px;
}
/* Measured on live: 4px solid rgb(121,117,130). */
.nw-footer-rule {
    flex: 1 1 auto;
    border: 0; border-top: 4px solid #797582;
    margin: 0;
}
.nw-footer-upper img { width: 300px; height: auto; display: block; }

.nw-footer-lower { background: var(--nw-black); padding: 40px 0; }
/* Live's footer bands run to the viewport edge (measured 1440px at a 1440
   viewport), with a 40px gutter between the two columns. */
.nw-footer .nw-container { max-width: none; padding-left: 40px; padding-right: 40px; }
.nw-footer-lower-inner { display: flex; align-items: center; gap: 40px; }
/* The two lower-band columns are flex:1 1 auto on a 450px / 150px basis, so
   they settle at roughly 850 / 550 of the row (measured on live at 1440px). */
.nw-footer-meta {
    flex: 1 1 450px;
    min-width: 0;
    color: var(--nw-grey);
    font-size: 18px; line-height: 1.5;
}
.nw-footer-meta a { color: var(--nw-yellow); text-decoration: none; }
.nw-footer-meta a:hover { color: #fff; }

/* Lives in a uk-width-small@m (150px basis) column that also grows; the
   button itself is 15px padding around an 18x10 icon, right-aligned. */
.nw-totop-col {
    flex: 1 1 150px;
    display: flex; justify-content: flex-end;
}
.nw-totop {
    background: var(--nw-black); border: 0; cursor: pointer;
    color: #fff; padding: 15px; line-height: 0;
    transition: color .1s ease-in-out;
}
.nw-totop:hover { color: var(--nw-yellow); }

/* Search form inside the mobile menu only (shown in the <=960px block).
   Without the base `display:none` this sits in the desktop nav row and
   makes the 100px bar 131px tall. */
.nw-nav-search { display: none; }
.nw-nav-search form {
    display: flex; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.3);
}
.nw-nav-search input[type=search] {
    flex: 1; min-width: 0; background: none; border: 0;
    color: #fff; padding: 8px 0;
    font-family: var(--nw-font-body); font-size: 16px;
}
.nw-nav-search input[type=search]::placeholder { color: rgba(255,255,255,.6); }
.nw-nav-search input[type=search]:focus { outline: none; }
.nw-nav-search button {
    background: none; border: 0; cursor: pointer; color: #fff;
    padding: 0 6px; line-height: 0;
}

/* ------------------------------------------------------------ responsive
 * One ordered cascade, largest breakpoint first.
 */
@media (max-width: 1200px) {
    .nw-grid { grid-template-columns: repeat(3, 1fr); }  /* uk-child-width-1-3@m */
}
@media (max-width: 960px) {
    .nw-layout { grid-template-columns: 1fr; }
    .nw-grid { grid-template-columns: repeat(2, 1fr); }  /* uk-child-width-1-2@s */
    .nw-hero-grid { grid-template-columns: 1fr; }
    .nw-hero { background-size: cover; }

    /* Live hides the hero image at @m and promotes it into the list. */
    .nw-hero-col { display: none; }
    .nw-feature-mobile { display: block; margin-bottom: var(--nw-gap); }

    .nw-article-cols { grid-template-columns: 1fr; }
    .nw-article-cols > .nw-rail { border-left: 0; padding-left: 0; }

    /* Landing pages: live hides the sticky header image below @m and
       collapses the body/terms split to one column. */
    .nw-landing-dark,
    .nw-landing-gold,
    .nw-landing-notice { padding: 40px 0; }
    .nw-landing-tys .nw-landing-inner { padding-left: 18px; padding-right: 18px; }
    .nw-landing-cols { grid-template-columns: 1fr; gap: 0; }
    .nw-landing-media { display: none; }
    .nw-landing-split { grid-template-columns: 1fr; gap: 40px; margin-top: 34px; }
    .nw-landing-terms { border-left: 0; padding-left: 0; }
    .nw-landing-intro > p:first-child { font-size: 30px; line-height: 1.15; }
    .nw-landing-intro > p:first-child + p,
    .nw-landing-gold p,
    .nw-landing-notice p { font-size: 24px; line-height: 1.3; }

    /* The overlay would swamp a small image - drop it back below the frame. */
    .nw-article-figure .nw-article-titleblock {
        position: static; max-width: 100%;
    }
    .nw-article-titleblock h1 { font-size: 30px; }
    h1 { font-size: 34px; }
    .nw-lead { font-size: 26px; }

    /* Mobile header: hamburger left, wordmark centred, no square mark.
       Live keeps the same 100px bar height below @m (the min-height rule is
       top-level with no mobile override). */
    .nw-nav-toggle {
        display: flex; order: -1;
        padding: 0; margin-left: 0;
        align-self: stretch; min-height: 0;
    }
    /* Live left-aligns the wordmark next to the hamburger (it is not
       centred - measured from the live mobile header). */
    .nw-logo { margin: 0 0 0 15px; }
    .nw-logo img.nw-logo-mark { display: none; }
    .nw-logo img.nw-logo-word { display: block; }
    .nw-search-toggle { display: none; }   /* search lives in the menu */

    .nw-header-inner { position: relative; min-height: 100px; gap: 10px; }
    /* The logo is the tallest item on mobile (17px wordmark), so the bar
       there is driven by min-height, not content - keep the padding from
       stacking on top of it. */
    .nw-header-inner { padding-top: 0; padding-bottom: 0; }
    .nw-nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        background: var(--nw-black); padding: 10px 15px 20px;
        margin-left: 0; z-index: 60;
    }
    .nw-nav.is-open { display: block; }
    .nw-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
    .nw-nav li { display: block; width: 100%; }
    .nw-nav a {
        padding: 10px 0; min-height: 0; display: block;
        font-size: 16px;
    }
    /* The top bar belongs to the desktop navbar only. */
    .nw-nav a::before { display: none; }
    .nw-nav-search { display: block; margin-top: 15px; }
}
@media (max-width: 640px) {
    html { font-size: 17px; }
    .nw-grid { grid-template-columns: 1fr; }             /* uk-child-width-1-1 */
    .nw-article-titleblock { padding: 20px; }
    .nw-article-titleblock h1 { font-size: 25px; }
    h1 { font-size: 30px; }
    .nw-lead { font-size: 22px; }

    .nw-logo img.nw-logo-word { width: 190px; }
    .nw-footer-upper-inner { justify-content: center; }
    .nw-footer-rule { display: none; }
    .nw-footer-upper img { width: 220px; margin: 0 auto; }
    .nw-footer-lower-inner { flex-direction: column; gap: 15px; text-align: center; }
    .nw-footer-meta { flex: 0 0 auto; }
    .nw-totop-col { flex: 0 0 auto; justify-content: center; }
}