/* ==========================================================================
   V4.0 NamWater brand alignment (Corporate Brand Identity Guidelines V1.1)
   Loaded last on every page. Colours, fonts and logo rules from the manual.
   ========================================================================== */
:root {
  --nw-blue: #333F96;      /* NamWater Blue, Pantone 2738 U */
  --nw-sky: #4BC0B2;       /* Sky Blue, Pantone 7465 U */
  --nw-grey: #444C63;      /* Pantone 289 U */
  --nw-ink: #14193C;       /* 60% shade of NamWater Blue */
  --nw-light-blue: #8BB8E8;
  --nw-avocado: #699138;
  --nw-light-green: #9EB356;
  --nw-orange: #F99D22;
  --nw-light-orange: #FBDD40;
  --nw-font: "Core Sans AR", "Rubik", Helvetica, Arial, sans-serif;
}
body, button, input, select, textarea { font-family: var(--nw-font); }

/* Headlines: no all-caps (manual p. 24-25) */
.hero-slide h1, .breadcrumb-area h1, .v2x-hero h1, .faq-point h5 { text-transform: none; }

/* Logo: always the full logo, never with effects; give it its clear space */
img[src*="namwater-logo-full"] { filter: none !important; box-shadow: none !important; max-width: none; }

/* Tagline lockup next to the footer logo (manual p. 14) */
.nw-tagline { display: block; margin: 10px 0 22px; font-family: var(--nw-font); font-style: italic; font-weight: 600; font-size: 15px; line-height: 1.2; color: #fff; letter-spacing: 0; text-transform: none; }
.nw-tagline span { color: var(--nw-sky); }
.nw-tagline.on-light { color: var(--nw-blue); }

/* Brand texture: the logo symbol as a faint watermark (manual p. 30) */
.nw-watermark { position: relative; overflow: hidden; }
.nw-watermark > * { position: relative; z-index: 1; }
.nw-watermark::after { content: ""; position: absolute; z-index: 0; right: -70px; bottom: -80px; width: 380px; height: 380px; background: url(../img/namwater-symbol-white.png) center / contain no-repeat; opacity: .06; pointer-events: none; }

/* Font Awesome icons that replaced inline SVG icons */
/* Tables: on phones each row becomes a card of label / value pairs (no sideways scrolling) */
table.nw-stack .nw-cell { display: contents; }
@media (max-width: 767px) {
  .nw-stack-wrap { overflow: visible !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
  table.nw-stack { min-width: 0 !important; width: 100%; border: 0 !important; background: transparent; }
  table.nw-stack thead { display: none; }
  table.nw-stack, table.nw-stack tbody, table.nw-stack tr { display: block; width: 100%; }
  table.nw-stack tbody tr { background: #fff !important; border: 1px solid #DADBE0; border-radius: 12px; padding: 6px 16px; margin: 0 0 12px; box-shadow: 0 6px 18px rgba(20, 25, 60, .06); }
  table.nw-stack td, table.nw-stack tbody th { display: grid; grid-template-columns: minmax(84px, 34%) 1fr; gap: 12px; align-items: baseline; width: 100%; height: auto !important; min-width: 0 !important; padding: 10px 0 !important; border: 0 !important; border-top: 1px solid #ECEDF1 !important; background: transparent !important; text-align: left !important; white-space: normal !important; font-size: 14px; }
  table.nw-stack td::before { content: attr(data-label); font-size: 11.5px; font-weight: 500; line-height: 1.5; text-transform: uppercase; letter-spacing: .05em; color: #444C63; }
  table.nw-stack .nw-cell { display: block; min-width: 0; overflow-wrap: anywhere; }
  table.nw-stack tr > :first-child { grid-template-columns: 1fr; border-top: 0 !important; padding-top: 12px !important; font-size: 16px; }
  table.nw-stack tr > td:first-child::before { margin-bottom: -8px; }
  table.nw-stack td[data-label=""] { grid-template-columns: 1fr; }
  table.nw-stack td[data-label=""]::before { display: none; }
  table.nw-stack td.nw-empty { display: none !important; }
  table.nw-stack .progress-line { width: 100%; }
  /* intake timetable: stream name as the card title, only months with intakes */
  table.v2s-tt.nw-stack tbody tr { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 14px; }
  table.v2s-tt.nw-stack tbody th { display: block; width: 100%; padding: 2px 0 4px !important; border: 0 !important; font-size: 16px; }
  table.v2s-tt.nw-stack td { display: inline-flex; width: auto; align-items: center; gap: 8px; padding: 4px 4px 4px 10px !important; border: 1px solid #DADBE0 !important; border-radius: 999px; }
  table.v2s-tt.nw-stack td::before { font-size: 11px; }
  table.v2s-tt.nw-stack td a { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; }
}
}

i.nw-ic { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-style: normal; flex: none; stroke: none; fill: none; }

.tp-btn:not(.navy):not(.dark):not(.border):not(.border-dark) { color: var(--nw-ink); }
.tp-btn:not(.navy):not(.dark):not(.border):not(.border-dark):hover { color: #fff; }
.theme-btn:not(.white):not(.navy):not(.outline):not(.outline-light) { color: var(--nw-ink); }
.theme-btn:not(.white):not(.navy):not(.outline):not(.outline-light):hover { color: #fff; }
.v2x-hero .stripe, .breadcrumb-area .slash { display: none; }
/* Long button labels wrap instead of spilling out of the button */
.tp-btn.w-100, .theme-btn.w-100 { white-space: normal; justify-content: center; text-align: center; }
@media (max-width: 575px) { .tp-btn, .theme-btn, .btn-main, .btn-ghost { white-space: normal; text-align: center; justify-content: center; max-width: 100%; } }

/* Small laptops: the menu and the header button do not fit side by side */
@media (min-width: 992px) and (max-width: 1199px) { .header-actions .btn-main { display: none; } nav.mainnav > ul > li > a { padding-left: 7px; padding-right: 7px; font-size: .88rem; } .logo img, .hrdc-lockup img { height: 56px; } header.site-header > .container { max-width: 100%; } .header-inner { gap: 12px; } }
@media (min-width: 992px) and (max-width: 1079px) { nav.mainnav > ul > li > a { font-size: .82rem; padding-left: 6px; padding-right: 6px; } }
/* Header: full logo with clear space */
.logo img { height: 66px; width: auto; }
.header-inner { min-height: 96px; }
@media (max-width: 767px) { .logo img { height: 56px; } .header-inner { min-height: 80px; } }
.footer-logo { height: 96px; width: auto; margin-bottom: 0; }
/* Sky Blue backgrounds take NamWater Blue text for contrast */
.faq details[open] summary .pm, .chip:hover, .btn-teal, .btn-teal:hover { color: var(--nw-ink); }
/* Icons in circles */
.qcard .qi, .q-ic, .unit-card .ic, .ic { border-radius: 50%; }
i.nw-ic { font-size: 1em; width: auto; height: auto; }