/*
Theme Name: Nutrition Division
Description: Custom theme for the Nutrition Division, Ministry of Health, Sri Lanka. Built from the approved HTML design specification.
Version: 2.4.0
Author: Nutrition Division
Text Domain: nutrition-division
*/

body{margin:0;background:#faf7f0;font-family:'Public Sans',system-ui,sans-serif;color:#17221b;-webkit-font-smoothing:antialiased}
a{color:#1c6b43;text-decoration:none}
a:hover{color:#e07b2a}
input,textarea,select,button{font-family:'Public Sans',system-ui,sans-serif}
img{max-width:100%}

/* --- Page width ---
   The reading column stays capped; the header and footer run edge to edge, so a
   wide monitor is not left with 350px of dead margin either side of the lockup.
   .nd-inner is the section-level cap, previously repeated as an inline
   max-width:1180px in every template — one knob now, not seventeen. */
.nd-wrap{max-width:1320px;margin:0 auto;padding-left:32px;padding-right:32px}
.nd-wrap--fluid{max-width:none;padding-left:clamp(20px,2.5vw,72px);padding-right:clamp(20px,2.5vw,72px)}
/* Edge-to-edge background, but the row itself still stops. Fully fluid left the
   brand lockup and the nav 570px apart on a 1920px monitor, which reads as a
   hole rather than as generous spacing. Capping alone was not enough — .nd-nav
   has margin-left:auto, so every spare pixel piled into that one gap; the
   matching margin-right below splits the slack evenly on both sides instead.
   At 1920px that is 88px each rather than 308px and 28px. */
.nd-wrap--wide{max-width:1400px;margin-left:auto;margin-right:auto}
.nd-wrap--wide .nd-nav{margin-right:auto}
.nd-inner{max-width:1320px;margin:0 auto}
.nd-display{font-family:'Bricolage Grotesque',sans-serif}

/* --- Section eyebrows ---
   The small tracked label above a section heading. It was repeated inline in
   every template, which left no hook to retune it for scripts that need
   different sizing — see the Sinhala/Tamil block at the foot of this file.
   Colour and any off-default margin stay inline at the call site. */
.nd-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.1em;margin-bottom:12px}
.nd-eyebrow--sm{font-size:12px;letter-spacing:.08em}
.nd-eyebrow--lg{font-size:14px;font-weight:800;letter-spacing:.08em}
.nd-hero-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;padding:6px 14px;border-radius:99px;margin-bottom:22px}

/* --- Header / nav --- */
.nd-nav{display:flex;gap:24px;margin-left:auto;font-size:14.5px;font-weight:500}
.nd-nav>ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nd-nav a{color:#17221b;transition:color .2s ease}
.nd-nav a:hover{color:#1c6b43}
.nd-nav .current-menu-item>a,.nd-nav .current_page_item>a{color:#1c6b43;font-weight:700}

/* --- Header dropdown --- */
/* The header is sticky with overflow visible, so the panel can hang out of it.
   The parent keeps a transparent bridge on its underside so the pointer can
   travel from the label into the panel without crossing dead space. */
.nd-nav li{position:relative}
.nd-nav li.menu-item-has-children>a{display:inline-flex;align-items:center;gap:5px}
.nd-nav li.menu-item-has-children>a::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.nd-nav li.menu-item-has-children:hover>a::after,.nd-nav li.menu-item-has-children:focus-within>a::after{transform:translateY(1px) rotate(225deg)}
.nd-nav li.menu-item-has-children::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}

.nd-nav .sub-menu{position:absolute;top:calc(100% + 12px);left:-16px;z-index:60;display:flex;flex-direction:column;gap:2px;min-width:230px;margin:0;padding:8px;list-style:none;background:#fff;border:1px solid #e5dfd2;border-radius:14px;box-shadow:0 22px 44px -22px rgba(14,43,28,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.nd-nav li:hover>.sub-menu,.nd-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nd-nav .sub-menu li{position:static}
.nd-nav .sub-menu a{display:block;padding:9px 14px;border-radius:9px;font-size:14px;font-weight:500;white-space:nowrap;color:#17221b;transition:background .18s ease,color .18s ease}
.nd-nav .sub-menu a:hover{background:#e8f2ea;color:#1c6b43}
@media (prefers-reduced-motion:reduce){.nd-nav .sub-menu{transition:none}}
.nd-lang-pill{color:#9dbfab;padding:4px 10px;border-radius:99px}
.nd-lang-pill.is-active{color:#0e2b1c;background:#faf7f0;padding:4px 12px;font-weight:600}

/* --- Mobile navigation --- */
/* The burger and the drawer only exist below 980px, where .nd-nav is hidden. */
.nd-burger{display:none;width:44px;height:44px;flex-shrink:0;margin-left:auto;padding:0;border:1px solid #d8d0be;border-radius:12px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nd-burger span{display:block;width:20px;height:2px;border-radius:2px;background:#17221b;transition:transform .25s ease,opacity .2s ease}
.nd-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nd-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nd-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nd-mobile-nav{display:none;border-top:1px solid #e5dfd2;background:#faf7f0;padding:14px clamp(20px,2.5vw,72px) 22px;max-height:calc(100vh - 120px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.nd-mobile-menu ul{list-style:none;margin:0;padding:0}
.nd-mobile-menu>ul>li{border-bottom:1px solid #e5dfd2}
.nd-mobile-menu>ul>li:last-child{border-bottom:none}
.nd-mobile-menu a{display:block;padding:14px 0;font-size:16px;font-weight:600;color:#17221b}
.nd-mobile-menu .current-menu-item>a,.nd-mobile-menu .current_page_item>a{color:#1c6b43}
/* Parent row becomes label + toggle; the toggle button is added by main.js. */
.nd-mobile-menu li.menu-item-has-children>a{display:inline-block;width:calc(100% - 52px)}
.nd-mobile-sub-toggle{width:44px;height:44px;float:right;margin-top:4px;padding:0;border:1px solid #d8d0be;border-radius:10px;background:#fff;color:#1c6b43;font-size:20px;line-height:1;cursor:pointer}
.nd-mobile-sub-toggle[aria-expanded="true"]{background:#1c6b43;border-color:#1c6b43;color:#fff}
.nd-mobile-menu .sub-menu{clear:both;margin:0 0 10px;padding:4px 0 4px 14px;border-left:2px solid #e5dfd2}
.nd-mobile-menu .sub-menu[hidden]{display:none}
.nd-mobile-menu .sub-menu a{padding:10px 0;font-size:14.5px;font-weight:500;color:#4a564d}
/* Scoped past .nd-btn{display:inline-block}, which is declared later. */
.nd-mobile-nav .nd-mobile-cta{display:block;margin-top:18px;padding:14px 22px;text-align:center}

/* --- Buttons --- */
.nd-btn{display:inline-block;font-weight:600;border-radius:99px;transition:transform .25s ease,background .25s ease,box-shadow .25s ease,color .25s ease;cursor:pointer}
.nd-btn-orange{background:#e07b2a;color:#fff;font-size:14px;padding:10px 18px}
.nd-btn-orange:hover{background:#c96a1f;color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(224,123,42,.6)}
.nd-btn-green{background:#1c6b43;color:#fff;font-size:15px;padding:14px 26px}
.nd-btn-green:hover{background:#14532d;color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(28,107,67,.6)}
.nd-btn-green-sm{background:#1c6b43;color:#fff;font-size:14.5px;padding:12px 22px}
.nd-btn-green-sm:hover{background:#14532d;color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(28,107,67,.6)}
.nd-btn-outline{background:transparent;color:#1c6b43;font-size:15px;padding:14px 26px;border:1.5px solid #1c6b43}
.nd-btn-outline:hover{background:#e8f2ea;color:#1c6b43;transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(28,107,67,.5)}
.nd-btn-amber-outline{color:#f0a04b;font-weight:600;font-size:14.5px;border:1.5px solid rgba(240,160,75,.5);padding:11px 20px;border-radius:99px;transition:transform .25s ease,background .25s ease}
.nd-btn-amber-outline:hover{background:rgba(240,160,75,.18);color:#f0a04b;transform:translateY(-2px)}

/* --- Cards & links --- */
.nd-unit-card{display:block;background:#fff;border:1px solid #e5dfd2;border-radius:18px;padding:24px;color:#17221b;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease}
.nd-unit-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -20px rgba(14,43,28,.4);border-color:#1c6b43;background:#e9e7d9;color:#17221b}
.nd-program-card{background:#fff;border:1px solid #e5dfd2;border-radius:16px;padding:20px 24px;display:flex;gap:20px;align-items:center;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.nd-program-card:hover{transform:translateX(6px);box-shadow:0 14px 32px -18px rgba(14,43,28,.4);border-color:#bcd8c5}
.nd-doc-link{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#faf7f0;border:1px solid #e5dfd2;border-radius:14px;padding:16px 20px;color:#17221b;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.nd-doc-link:hover{border-color:#1c6b43;color:#17221b;transform:translateY(-3px);box-shadow:0 12px 28px -18px rgba(14,43,28,.35)}
.nd-doc-link-white{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid #e5dfd2;border-radius:14px;padding:18px 22px;color:#17221b;transition:border-color .28s ease}
.nd-doc-link-white:hover{border-color:#1c6b43;color:#17221b}

/* --- Campaign page --- */
.nd-campaign-layout{display:grid;grid-template-columns:1.5fr .85fr;gap:48px;align-items:start}
.nd-prose{font-size:16.5px;line-height:1.75;color:#4a564d;max-width:70ch}
.nd-prose p{margin:0 0 20px}
.nd-prose p:last-child{margin-bottom:0}
.nd-prose h2,.nd-prose h3{font-family:'Bricolage Grotesque',sans-serif;color:#17221b;letter-spacing:-.4px;margin:32px 0 12px}
.nd-prose h2{font-size:24px;font-weight:800}
.nd-prose h3{font-size:19px;font-weight:700}
.nd-prose ul,.nd-prose ol{margin:0 0 20px;padding-left:22px}
.nd-prose li{margin-bottom:8px}
.nd-prose strong{color:#17221b}
.nd-campaign-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:110px}
.nd-campaign-photo{border-radius:18px;overflow:hidden;border:1px solid #e5dfd2}
.nd-campaign-photo img{display:block;width:100%;height:auto}
.nd-campaign-box{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid #e5dfd2;border-radius:18px;padding:22px 24px}
.nd-campaign-box-head{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#6b7a6f}

/* --- Resources: category filter over a single grid --- */
.nd-res-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.nd-res-filter{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:99px;border:1px solid #d8d0be;background:#fff;color:#4a564d;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .22s ease,border-color .22s ease,color .22s ease}
.nd-res-filter:hover{border-color:#1c6b43;color:#1c6b43}
.nd-res-filter.is-active{background:#1c6b43;border-color:#1c6b43;color:#fff}
.nd-res-filter em{font-style:normal;font-size:11.5px;font-weight:700;color:#6b7a6f}
.nd-res-filter.is-active em{color:#9dbfab}
.nd-res-list{display:flex;flex-direction:column;gap:10px}
.nd-res-empty{margin:28px 0 0;font-size:14px;color:#6b7a6f}

/* One publication per row: thumbnail, title and kind, then a download chip per
   language it was published in. */
.nd-doc-card{display:flex;align-items:center;gap:18px;padding:14px 20px;background:#fff;border:1px solid #e5dfd2;border-radius:14px;transition:border-color .28s ease,box-shadow .28s ease}
.nd-doc-card:hover{border-color:#1c6b43;box-shadow:0 12px 28px -20px rgba(14,43,28,.35)}
.nd-doc-card[hidden]{display:none}
.nd-doc-card-body{flex:1;min-width:0}
/* Artwork is portrait, landscape and square in the same list; a fixed box with a
   contained image keeps the rows aligned without cropping anyone's poster. */
.nd-doc-card-cover{width:76px;height:76px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:6px;background:#f2ecdd;border:1px solid #e5dfd2;border-radius:10px}
.nd-doc-card-cover img{max-width:100%;max-height:100%;width:auto;object-fit:contain;border-radius:4px}
.nd-doc-card-title{font-weight:600;font-size:15px;line-height:1.4}
.nd-doc-card-meta{font-size:12.5px;color:#6b7a6f;margin-top:3px}
.nd-doc-card-files{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;justify-content:flex-end;max-width:46%}
.nd-doc-chip{display:inline-flex;align-items:baseline;gap:7px;padding:7px 14px;border-radius:99px;border:1px solid #d8d0be;background:#faf7f0;font-size:12.5px;font-weight:700;color:#1c6b43;transition:background .22s ease,border-color .22s ease,color .22s ease}
.nd-doc-chip:hover{background:#1c6b43;border-color:#1c6b43;color:#fff}
.nd-doc-chip em{font-style:normal;font-weight:600;font-size:11px;color:#6b7a6f}
.nd-doc-chip:hover em{color:#cfe3d6}
.nd-partner-link{background:#faf7f0;border:1px solid #e5dfd2;border-radius:14px;padding:18px 20px;font-weight:600;font-size:14px;color:#17221b;transition:border-color .28s ease}
.nd-partner-link:hover{border-color:#1c6b43;color:#17221b}
.nd-arrow-link{display:inline-block;color:#1c6b43;font-weight:600;font-size:14.5px;transition:transform .25s ease,color .25s ease}
.nd-arrow-link:hover{color:#e07b2a;transform:translateX(4px)}
.nd-tu-card{scroll-margin-top:96px;background:#fff;border:1px solid #e5dfd2;border-radius:20px;padding:36px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;transition:box-shadow .28s ease,border-color .28s ease}
.nd-tu-card.nd-tu-green:hover{box-shadow:0 18px 40px -20px rgba(14,43,28,.35);border-color:#bcd8c5}
.nd-tu-card.nd-tu-amber:hover{box-shadow:0 18px 40px -20px rgba(14,43,28,.35);border-color:#f0cfa0}
.nd-footer a{color:#cfe3d6}
.nd-footer a:hover{color:#f0a04b}
/* Light plate so the division logo's black lettering reads on the dark footer. */
.nd-footer-mark{width:56px;height:56px;flex-shrink:0;border-radius:50%;background:#faf7f0;color:#1c6b43;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.nd-footer-mark img{width:46px;height:46px;object-fit:contain;display:block}
.nd-social{display:flex;gap:10px}
.nd-social-link{width:36px;height:36px;border-radius:50%;border:1px solid rgba(250,247,240,.22);display:inline-flex;align-items:center;justify-content:center;color:#cfe3d6;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.nd-social-link:hover{color:#0e2b1c;background:#f0a04b;border-color:#f0a04b}
.nd-social-link svg{display:block}

/* --- Image slot placeholder --- */
.nd-slot-placeholder{width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center;border:1.5px dashed #cfc8b8;border-radius:inherit;background:#f2ecdd;color:#6b7a6f;font-size:13px;text-align:center;padding:12px;box-sizing:border-box}
.nd-slot-img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Hero carousel --- */
.nd-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;transition:opacity .7s ease,transform .7s ease;opacity:0;transform:translateX(24px);pointer-events:none}
.nd-slide.is-active{opacity:1;transform:translateX(0);pointer-events:auto}
.nd-slide-img{position:absolute;inset:0;transition:opacity .7s ease;opacity:0;pointer-events:none}
.nd-slide-img.is-active{opacity:1;pointer-events:auto}
.nd-dot{width:10px;height:10px;border-radius:99px;border:none;cursor:pointer;padding:0;background:#cfc8b8;transition:all .3s}
.nd-dot.is-active{width:28px;background:#1c6b43}

/* --- BMI tool --- */
.nd-bmi-tab{flex:1;border:none;cursor:pointer;font-weight:700;font-size:13px;padding:9px 0;border-radius:99px;background:transparent;color:#9dbfab}
.nd-bmi-tab.is-active{background:#faf7f0;color:#0e2b1c}
.nd-bmi-input{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:10px;border:none;font-size:16px;background:#faf7f0;color:#17221b}
.nd-bmi-label{font-size:12px;font-weight:600;color:#cfe3d6;display:block;margin-bottom:6px}

/* Category table. Colours come from nd_bmi_bands() in functions.php. */
.nd-bmi-table{background:rgba(250,247,240,.07);border:1px solid rgba(250,247,240,.14);border-radius:14px;overflow:hidden}
.nd-bmi-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 18px;font-size:13.5px;border-bottom:1px solid rgba(250,247,240,.1)}
.nd-bmi-row:last-child{border-bottom:none}
.nd-bmi-row>span:first-child{display:flex;align-items:center;gap:10px}
.nd-bmi-row--head{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:#9dbfab;border-bottom-color:rgba(250,247,240,.14)}
.nd-bmi-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.nd-bmi-range{font-weight:700;white-space:nowrap}

/* The body silhouette for the result — same artwork as the printed poster. */
.nd-bmi-figure{height:88px;width:auto;flex-shrink:0;display:block;opacity:0;transition:opacity .3s ease}
.nd-bmi-figure.is-in{opacity:1}

.nd-bmi-ticks{position:relative;height:14px;margin-top:6px;font-size:10.5px;color:#9dbfab}
.nd-bmi-ticks span{position:absolute;top:0;transform:translateX(-50%)}
.nd-bmi-ticks span:first-child{transform:none}
.nd-bmi-ticks span:last-child{transform:translateX(-100%)}

/* --- BMI poster: teaser card --- */
.nd-poster-card{display:flex;align-items:center;gap:14px;width:100%;margin-top:16px;padding:12px;text-align:left;cursor:pointer;border:1px solid rgba(250,247,240,.18);border-radius:14px;background:rgba(250,247,240,.07);color:inherit;font:inherit;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.nd-poster-card:hover{background:rgba(250,247,240,.13);border-color:rgba(240,160,75,.55);transform:translateY(-2px)}
.nd-poster-thumb{width:88px;height:66px;flex-shrink:0;object-fit:cover;object-position:left center;border-radius:9px;background:#faf7f0}
.nd-poster-body{display:block;min-width:0}
.nd-poster-title{display:block;font-weight:700;font-size:14px;color:#faf7f0}
.nd-poster-sub{display:block;font-size:12px;line-height:1.45;color:#9dbfab;margin-top:2px}
.nd-poster-cta{display:block;font-size:12.5px;font-weight:700;color:#f0a04b;margin-top:6px}
.nd-poster-card:hover .nd-poster-cta{color:#ffb96b}

/* --- BMI poster: full-screen viewer --- */
/* The panel is given a definite height so the stage below it can be flex:1 and
   the chart's max-height:100% resolves against something real. */
.nd-lightbox{position:fixed;inset:0;z-index:9999;display:flex;justify-content:center;padding:20px;box-sizing:border-box}
.nd-lightbox[hidden]{display:none}
.nd-lightbox-backdrop{position:absolute;inset:0;background:rgba(14,43,28,.88);backdrop-filter:blur(3px)}
.nd-lightbox-panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:1400px;height:100%;background:#0e2b1c;border:1px solid rgba(250,247,240,.16);border-radius:18px;overflow:hidden;color:#faf7f0;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.nd-lightbox-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid rgba(250,247,240,.14)}
.nd-lightbox-heading{margin-right:auto}
.nd-lightbox-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#f0a04b}
.nd-lightbox-title{font-weight:800;font-size:17px;letter-spacing:-.3px}
.nd-lightbox-langs{display:flex;gap:5px;padding:4px;border-radius:99px;background:rgba(250,247,240,.08)}
.nd-lightbox-lang{border:none;cursor:pointer;padding:6px 14px;border-radius:99px;background:transparent;color:#9dbfab;font:inherit;font-size:12.5px;font-weight:700;transition:background .2s ease,color .2s ease}
.nd-lightbox-lang:hover{color:#faf7f0}
.nd-lightbox-lang.is-active{background:#faf7f0;color:#0e2b1c}
.nd-lightbox-tools{display:flex;align-items:center;gap:10px}
.nd-lightbox-zoom{display:flex;align-items:center;gap:2px;padding:3px;border-radius:99px;background:rgba(250,247,240,.08)}
.nd-lightbox-zoom button{width:28px;height:28px;border:none;border-radius:50%;cursor:pointer;background:transparent;color:#faf7f0;font:inherit;font-size:16px;line-height:1;transition:background .2s ease}
.nd-lightbox-zoom button:hover{background:rgba(250,247,240,.18)}
.nd-lightbox-zoom span{min-width:44px;text-align:center;font-size:12px;font-weight:700;color:#9dbfab;font-variant-numeric:tabular-nums}
.nd-lightbox-download{padding:8px 16px;border-radius:99px;background:#e07b2a;color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;transition:background .25s ease}
.nd-lightbox-download:hover{background:#b05e14}
.nd-lightbox-close{width:34px;height:34px;border:none;border-radius:50%;cursor:pointer;background:rgba(250,247,240,.1);color:#faf7f0;font-size:14px;line-height:1;transition:background .2s ease}
.nd-lightbox-close:hover{background:rgba(250,247,240,.22)}

/* touch-action:none so a drag pans the chart instead of scrolling the page. */
.nd-lightbox-stage{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#08160e;touch-action:none;cursor:zoom-in}
.nd-lightbox-stage.is-zoomed{cursor:grab}
.nd-lightbox-stage.is-zoomed:active{cursor:grabbing}
.nd-lightbox-img{max-width:100%;max-height:100%;display:block;user-select:none;-webkit-user-drag:none;transform-origin:center center;transition:transform .12s ease-out}
.nd-lightbox-stage.is-dragging .nd-lightbox-img{transition:none}
.nd-lightbox-stage.is-loading .nd-lightbox-img{visibility:hidden}
.nd-lightbox-status{position:absolute;font-size:13px;color:#9dbfab;pointer-events:none;opacity:0}
.nd-lightbox-stage.is-loading .nd-lightbox-status{opacity:1}
.nd-lightbox-hint{margin:0;padding:9px 18px;font-size:11.5px;color:#9dbfab;text-align:center;border-top:1px solid rgba(250,247,240,.14)}

/* --- Contact Form 7 styling to match design --- */
.nd-cf7 .wpcf7-form label{display:block;margin-bottom:16px}
.nd-cf7 .wpcf7-form label>span:first-child,.nd-cf7 .wpcf7-form b{font-size:12.5px;font-weight:600;color:#4a564d;display:block;margin-bottom:6px}
.nd-cf7 .wpcf7-form input[type=text],.nd-cf7 .wpcf7-form input[type=email],.nd-cf7 .wpcf7-form textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #d8d0be;border-radius:10px;font-size:15px;background:#faf7f0}
.nd-cf7 .wpcf7-form input[type=submit]{background:#1c6b43;color:#fff;font-weight:600;font-size:15px;padding:14px 28px;border:none;border-radius:99px;cursor:pointer;transition:background .25s ease}
.nd-cf7 .wpcf7-form input[type=submit]:hover{background:#14532d}

/* --- Header logos --- */
/* Box heights differ so the artwork inside reads at the same size: the national
   emblem occupies ~62% of its canvas, the Division logo ~96%. */
/* min-width:0 lets the lockup shrink instead of forcing the header wider than
   the viewport, which would push the burger off-screen. */
.nd-brand{flex-shrink:1;min-width:0}
.nd-brand-text{display:block;min-width:0}
.nd-brand-name{display:block;font-weight:700;font-size:22px;line-height:1.15}
.nd-brand-sub{display:block;font-size:13px;color:#6b7a6f;letter-spacing:.04em}
.nd-header-logo{width:auto;display:block;flex-shrink:0}
.nd-header-logo--gov{height:72px}
.nd-header-logo--nd{height:46px}

/* --- Responsive --- */
@media (max-width:980px){
  .nd-grid-2,.nd-grid-3,.nd-grid-4,.nd-hero-grid,.nd-footer-grid{grid-template-columns:1fr !important}
  .nd-campaign-layout{grid-template-columns:1fr;gap:32px}
  .nd-campaign-aside{position:static}
  .nd-nav{display:none}
  /* The burger replaces both the nav and the header's BMI button, which moves
     to the bottom of the drawer. */
  .nd-burger{display:flex}
  .nd-bmi-cta{display:none}
  .nd-mobile-nav{display:block}
  .nd-mobile-nav[hidden]{display:none}
  .nd-gallery-grid{grid-template-columns:1fr 1fr !important}
  .nd-header-logo--gov{height:56px}
  .nd-header-logo--nd{height:36px}
  h1{font-size:38px !important}
  /* Rows keep the thumbnail beside the title; the chips drop to their own line
     rather than being squeezed against the right edge. */
  .nd-doc-card{align-items:flex-start;flex-wrap:wrap;gap:14px}
  .nd-doc-card-body{flex:1 1 60%;min-width:170px}
  .nd-doc-card-files{flex:1 1 100%;max-width:none;justify-content:flex-start}
}
@media (max-width:640px){
  .nd-gallery-grid{grid-template-columns:1fr !important}
  /* Reclaim the gutters, and shrink the lockup so the burger stays on screen. */
  .nd-wrap{padding-left:20px;padding-right:20px}
  .nd-header-row{gap:12px !important}
  .nd-brand{gap:8px !important}
  .nd-brand-name{font-size:17px}
  .nd-brand-sub{font-size:10.5px;letter-spacing:.02em}
  .nd-header-logo--gov{height:44px}
  .nd-header-logo--nd{display:none}
  .nd-mobile-nav{padding-left:20px;padding-right:20px}
  /* Edge-to-edge viewer: the chart needs every pixel on a phone. */
  .nd-lightbox{padding:0}
  .nd-lightbox-panel{border:none;border-radius:0}
  .nd-lightbox-bar{gap:10px;padding:12px 14px}
  .nd-lightbox-heading{width:100%;margin-right:0}
  .nd-lightbox-langs{order:2}
  .nd-lightbox-tools{order:3;margin-left:auto}
  .nd-lightbox-download{padding:8px 12px}
  .nd-lightbox-hint{font-size:11px;padding:8px 14px}
  .nd-bmi-figure{height:72px}
}

/* --- Sinhala and Tamil ---
   The Latin type scale does not transfer to either script. Two reasons:

   1. Noto Sans Sinhala and Noto Sans Tamil put less ink on the em than Public
      Sans does, so an identical px value reads a size or two smaller.
   2. The small sizes here were drawn for Latin ALL-CAPS labels. Neither script
      has capitals, and both stack vowel signs above and below the base glyph,
      so at 11–13px those marks collapse into the letterform.

   Positive tracking is a caps device and pulls conjuncts apart; the negative
   tracking on the display headings crushes them together. Both go to normal.
   The !important is unavoidable — the heading tracking is inline in the
   templates. Scoped on the lang attribute, which header.php emits as si-LK /
   ta-LK via language_attributes(). */
html[lang^="si"] :is(body,input,textarea,select,button){font-family:'Noto Sans Sinhala','Public Sans',system-ui,sans-serif}
html[lang^="ta"] :is(body,input,textarea,select,button){font-family:'Noto Sans Tamil','Public Sans',system-ui,sans-serif}
:is(html[lang^="si"],html[lang^="ta"]) .nd-display{font-family:inherit}
:is(html[lang^="si"],html[lang^="ta"]) :is(h1,h2,h3,h4,.nd-display,.nd-eyebrow,.nd-brand-name){letter-spacing:normal !important}

/* Labels and chips, the sizes that actually broke. */
:is(html[lang^="si"],html[lang^="ta"]) .nd-eyebrow{font-size:15px;line-height:1.55}
:is(html[lang^="si"],html[lang^="ta"]) .nd-eyebrow--sm{font-size:14px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-eyebrow--lg{font-size:16.5px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-campaign-box-head{font-size:13.5px;letter-spacing:normal}
:is(html[lang^="si"],html[lang^="ta"]) .nd-doc-chip{font-size:13.5px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-doc-chip em{font-size:12px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-doc-card-title{font-size:16px;line-height:1.55}
:is(html[lang^="si"],html[lang^="ta"]) .nd-doc-card-meta{font-size:13.5px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-res-filter{font-size:14.5px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-res-filter em{font-size:12.5px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-bmi-row{font-size:14.5px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-bmi-row--head{font-size:13px;letter-spacing:normal}
:is(html[lang^="si"],html[lang^="ta"]) .nd-bmi-label{font-size:13px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-bmi-tab{font-size:14px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-lightbox-eyebrow{font-size:12.5px;letter-spacing:.04em}
:is(html[lang^="si"],html[lang^="ta"]) .nd-lightbox-title{font-size:18px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-poster-title{font-size:15px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-poster-sub{font-size:13px;line-height:1.6}
:is(html[lang^="si"],html[lang^="ta"]) .nd-brand-sub{font-size:14px;letter-spacing:normal}
:is(html[lang^="si"],html[lang^="ta"]) .nd-nav{font-size:15.5px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-nav .sub-menu a{font-size:15px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-mobile-menu .sub-menu a{font-size:15.5px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-arrow-link{font-size:15.5px}
:is(html[lang^="si"],html[lang^="ta"]) .nd-partner-link{font-size:15px;line-height:1.55}
:is(html[lang^="si"],html[lang^="ta"]) .nd-hero-badge{font-size:13.5px;letter-spacing:normal}

/* Stacked marks need the extra leading or the top ones clip. The display
   headings carry inline line-heights as tight as 1.02, drawn for Latin caps
   with nothing above the cap line and nothing below the baseline; Sinhala and
   Tamil have both, so at 1.02 consecutive lines literally touch. The templates
   set it inline, hence !important, same as the tracking reset above. */
:is(html[lang^="si"],html[lang^="ta"]) .nd-prose{line-height:1.9}
:is(html[lang^="si"],html[lang^="ta"]) :is(h1,h2,h3){line-height:1.4 !important}

/* 56px Tamil overflowed its hero column outright. clamp() rather than a flat px
   so this still holds on a phone without fighting the h1 rule in the 980px
   block below, which these selectors would otherwise always outrank. */
:is(html[lang^="si"],html[lang^="ta"]) h1{font-size:clamp(26px,3vw,38px) !important}
:is(html[lang^="si"],html[lang^="ta"]) #nd-hero-slides h1{font-size:clamp(28px,3.2vw,44px) !important}

/* --- Scroll reveal ---
   Gated on html.nd-anim, which the inline script in header.php sets before the
   first paint. Without JavaScript the class never lands, so nothing is ever
   left at opacity:0 — the page just renders static. .nd-reveal on its own is
   inert, which is also what makes it safe to put on a template and forget.
   The stagger delay is set per element by main.js. */
html.nd-anim .nd-reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
html.nd-anim .nd-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.nd-anim .nd-reveal{opacity:1;transform:none;transition:none}
}

/* --- Header nav width ---
   Only the sub-menu links carried nowrap, so a top-level label that ran out of
   room broke mid-word inside the fixed-height header row and collided with the
   row below it. Nothing in this menu should ever wrap. */
.nd-nav>ul>li>a{white-space:nowrap}

/* Sinhala and Tamil set wider than English at the same px, and the labels are
   longer to begin with. Measured against Noto at 15.5px, the header row needs
   roughly 1032px in Sinhala and 1074px in Tamil — both past the 980px where the
   Latin header hands over to the burger. Give those two scripts the drawer
   earlier instead of letting the row overrun. Shortening the menu labels alone
   did not close this; it only brought Tamil down from ~1570px. */
:is(html[lang^="si"],html[lang^="ta"]) :is(.nd-nav,.nd-nav>ul){gap:20px}

@media (max-width:1150px){
  :is(html[lang^="si"],html[lang^="ta"]) .nd-nav{display:none}
  :is(html[lang^="si"],html[lang^="ta"]) .nd-burger{display:flex}
  :is(html[lang^="si"],html[lang^="ta"]) .nd-bmi-cta{display:none}
  :is(html[lang^="si"],html[lang^="ta"]) .nd-mobile-nav{display:block}
  :is(html[lang^="si"],html[lang^="ta"]) .nd-mobile-nav[hidden]{display:none}
}

@media (max-width:640px){
  :is(html[lang^="si"],html[lang^="ta"]) .nd-brand-sub{font-size:11.5px}
}