/* ============================================
   MODERN HEADER STYLES — SMH-style layout, PIF red theme
   Overrides and additions to responsive.css
   ============================================ */


:root {
  --masthead-bg: #BD2701;
  --masthead-bg-dark: #9e2100;   /* slightly darker for tools/nav rows */
  /* Row 1 must keep an explicit height (not `auto`) so it can transition to 0 on
     collapse — CSS cannot animate to or from `auto`. Value = 12px padding × 2 +
     the tallest child, .mastheadBrand, at 85.4px. */
  --masthead-top-height: 112px;
  --masthead-tools-height: 55px;
  --masthead-nav-height: 36px;
  /* Height of the masthead AT REST, driving #mastheadSpacer and .navDropdown — both
     sit outside #masthead and so can't read a variable scoped to .masthead--compact.
     The tools row is collapsed at rest on desktop so contributes nothing; on mobile
     the section nav is hidden and the tools row is permanent, so the two swap places
     (see the responsive block).
     This calc is the pre-JS fallback: the masthead script overwrites --masthead-rest
     with the measured height, so a mistuned --masthead-top-height costs a cramped
     row rather than content sliding under the fixed header. */
  --masthead-rest: calc(var(--masthead-top-height) + var(--masthead-nav-height));
  --masthead-text-color: #ffffff;
  --header-details: rgba(255, 255, 255, 0.92)
}

/* =============================================
   MASTHEAD SHELL
   ============================================= */

#masthead {
  font-family: var(--font-furniture);
  background: var(--masthead-bg);
  /* The !important flags these two carried are gone: they existed only to beat
     responsive.css's competing #masthead rules (padding, and a
     `margin-bottom: 20px !important` inside its mobile breakpoints), which have
     been removed. This file is now the sole owner of the masthead. */
  padding: 0;
  margin-bottom: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  border-bottom: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}


#mastheadSpacer {
  height: var(--masthead-rest);
}

/* Inner width constraint — 1168px centred */
.mastheadInner {
  max-width: 1168px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* =============================================
   ROW 1: 3-column — date | centred brand | utility
   ============================================= */

/* NB: the vertical padding must stay a fixed unit. It was previously `5% 4%`, and
   percentage padding resolves against the CONTAINER'S WIDTH — ~58px top and bottom at
   1168px — which, under the global border-box, consumed the whole declared height and
   left the content box at zero. The logo and date only rendered by overflowing. */
.mastheadTop {
  display: flex;
  align-items: center;
  height: var(--masthead-top-height);
  padding: 12px 4%;
  flex-shrink: 0;
}

/* Stacks the date with the search pill beneath it. On mobile this whole cell is
   hidden (see responsive) — the tools row carries search there instead. */
.mastheadTopLeft {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.mastheadTopLeft .searchPill { flex: none; }

.mastheadBrand {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.mastheadTopRight {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* --- Logo --- */
#piflogoImg {
  height: 62px;
  display: block;
  transition: height 0.3s ease;  /* drives the mobile condense-on-scroll */
  /* White logo on red bg — replace pifLogo.png with a white version when available */
}

/* --- Tagline --- */
.mastheadTagline {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 5px 0 0;
  white-space: nowrap;
  font-family: var(--font-furniture);
}

/* --- Date --- */
.date {
  color: var(--header-details);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Subscribe pill (white on red) --- */
.btn-subscribe-pill {
  background: #fff;
  color: var(--masthead-bg);
  font-weight: 800;
  font-size: 0.68rem;
  padding: 4px 12px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  line-height: 1.6;
}
.btn-subscribe-pill:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* --- Login / Logout control — ghost pill, sibling to the solid "Join" pill --- */
.utilityLogin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: none;                       /* bare, matching .headerSearchBtn */
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.utilityLogin:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
.utilityLogin:active { background: rgba(255, 255, 255, 0.2); }
.utilityLogin:active { transform: translateY(1px); }

/* Crisp line icons that inherit the text colour. .--in = person (logged out),
   .--out = exit-door (logged in). Swapped in CSS via :has() — no JS required. */
.loginIcon {
  width: 18px;   /* matches .headerSearchBtn svg; mobile scales both to 22px */
  height: 18px;
  flex-shrink: 0;
  display: block;
  transition: transform 0.18s ease;
}
.loginIcon--out { display: none; }
.utilityLogin:has(.loggedInUser:not(:empty)) .loginIcon--in  { display: none; }
.utilityLogin:has(.loggedInUser:not(:empty)) .loginIcon--out { display: block; }
/* subtle "leaving" cue: nudge the exit arrow on hover */
.utilityLogin:hover .loginIcon--out { transform: translateX(2px); }

/* Login/Logout label + account line. Label mirrors the "Join" pill's treatment. */
.loginStack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  min-width: 0;
}
#masthead #btn_login {
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Logged in: the exit-door icon already carries the meaning, so the word "Logout"
   is redundant beside the email and made the pill look crowded.
   Clipped rather than display:none for two reasons — mobile_full.js reads this
   span's TEXT as the login/logout state flag (it gates logout at :197 and the
   logged-in test at :273, so the string must stay in the DOM), and clipping keeps
   it in the accessibility tree so the control is still announced as "Logout".
   Scoped to #btn_login only: #menu_login in the drawer has no email beside it,
   so its label is the sole affordance there and must stay visible. */
.utilityLogin:has(.loggedInUser:not(:empty)) #btn_login {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The account line. Populated by mobile.js; empty (logged out) = hidden.
   With the "Logout" label clipped above, this is now the pill's only text rather
   than a secondary line under a heading — hence the larger, less dimmed treatment. */
#masthead .loggedInUser {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--header-details);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#masthead .loggedInUser:empty { display: none; }
.utilityLogin:hover .loggedInUser { color: #fff; }

@media screen and (max-width: 560px) {
  #masthead .loggedInUser {
    max-width: 110px;
    font-size: 0.66rem;  /* scaled with the 0.6 → 0.72rem bump above */
  }
  .utilityLogin { gap: 6px; padding-left: 8px; padding-right: 10px; }
}

/* =============================================
   ROW 2: Tools row — search icon
   ============================================= */

/* Three slots: search left | compact logo centred | hamburger right.
   Collapsed to zero height at rest — see the compact section below. */
.mastheadTools {
  position: relative;          /* centring context for .compactLogo */
  height: 0;
  padding: 0 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background: var(--masthead-bg-dark); */
  flex-shrink: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: height 0.3s ease, opacity 0.25s ease;
}

/* Search control — bare icon in a square target, matching the mobile treatment.
   No border or fill at rest; the background appears on hover/press only. Mobile
   overrides the size to 44px and the glyph to 22px inside the mobile block. */
.headerSearchBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.88);
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.headerSearchBtn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.headerSearchBtn:active { background: rgba(255, 255, 255, 0.2); }
.headerSearchBtn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.9;
}
/* The tools-row button still carries a "Search" text label in the markup. Hidden so
   both desktop search controls read as bare icons like the mobile one. */
.searchBtnLabel { display: none; }

/* Mobile-only search control — revealed in the mobile masthead block below. */
.headerSearchBtn--mobile { display: none; }

/* =============================================
   ROW 3: Section nav
   ============================================= */

.sectionNav {
  height: var(--masthead-nav-height);
  /* background: var(--masthead-bg-dark); */
  border-top: none;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 4%,
    rgba(255, 255, 255, 0.5) 96%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 60% 1px;
  background-position: top center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0 4%;
  flex-shrink: 0;
  color: var(--masthead-text-color) !important;
}
.sectionNav::-webkit-scrollbar { display: none; }

/* The search pill lives in row 1 (under the date), so row 3 holds nothing but the
   link group and can simply centre it — no flex-spacer balancing needed. */
.searchPill {
  display: flex;
  align-items: center;
}

.navLinks {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.sectionNav a {
  white-space: nowrap;
  padding: 0 14px;
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  position: relative;
  transition: color 0.15s;
}
/* Animated white underline on hover */
.sectionNav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  background: #fff;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
/* ── Nav item wrapper (for dropdown trigger) ── */
.sectionNav .navItem {
  display: flex;
  align-items: stretch;
}


/* Caret arrow pointing down into the open dropdown */
.sectionNav .hasDropdown > a::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 999;
}
.sectionNav .hasDropdown.dropActive > a::before { opacity: 1; }

.sectionNav a:hover,
.sectionNav a.active { color: #fff; }

.sectionNav a:hover::after,
.sectionNav a.active::after { transform: scaleX(1); }

/* =============================================
   COMPACT / COLLAPSED MASTHEAD ON SCROLL
   ============================================= */

/* Smooth transitions for the collapse */
.mastheadTop {
  transition: height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
  overflow: hidden;
}
.sectionNav {
  transition: height 0.3s ease, opacity 0.25s ease;
  overflow: hidden;
}

/* When scrolled: hide Row 1 (logo/brand) and Row 3 (section nav) */
#masthead.masthead--compact .mastheadTop {
  height: 0 !important;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}
#masthead.masthead--compact .sectionNav {
  height: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* Compact logo — visible only in compact mode. Absolutely centred so it sits at the
   true midpoint of the row regardless of the search pill and hamburger widths
   (auto margins would only equalise the gaps, which isn't the same thing).
   The width 0 → 95px reveal still animates, growing outwards from the centre. */
.compactLogo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 40px;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.25s ease, width 0.25s ease;
  pointer-events: none;
}
#masthead.masthead--compact .compactLogo {
  opacity: 1;
  pointer-events: auto;
  width: auto;
}

.compactLogo img {
  display: block;
  height: 40px;
  width: auto;
}

/* Reveal the tools row in compact mode (mobile keeps it open at rest — see responsive) */
#masthead.masthead--compact .mastheadTools {
  height: var(--masthead-tools-height);
  opacity: 1;
  pointer-events: auto;
}

/* =============================================
   HAMBURGER LABEL (hidden by default on desktop)
   ============================================= */

label.hamburgerLabel {
  display: none;        /* hidden on desktop — beats responsive.css [0,1,1] specificity */
  cursor: pointer;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.15s;
  background-image: none; /* cancel the hamburger.svg bg from responsive.css */
  transform: none;
}
label.hamburgerLabel:hover { background: rgba(255, 255, 255, 0.14); background-image: none; }
label.hamburgerLabel svg {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.9);
}

/* Show hamburger on desktop when masthead is compact */
#masthead.masthead--compact label.hamburgerLabel {
  display: flex;
}

/* =============================================
   NAV DRAWER — slide from left
   ============================================= */

/* The drawer box (size, colour, z-index, closed offset) still lives in
   responsive.css under `.navigation`; these rules only flip it from the right
   edge to the left. `ul.navigation` (0,1,1) out-specifies `.navigation` (0,1,0),
   and the :checked selector below is identical to responsive.css's but loads
   later — so no !important is required on either side. */
ul.navigation {
  left: -280px;
  right: auto;
  transition: left var(--transition-medium), box-shadow var(--transition-medium);
}

.nav-trigger:checked ~ ul.navigation {
  left: 0;
  right: auto;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25);
}

.nav-trigger:checked ~ #menuoverlay {
  display: block;
}

/* Drawer header "MENU" label */
ul.navigation::before {
  content: 'MENU';
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--masthead-bg);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--masthead-bg);
  margin-bottom: 4px;
  margin-top: -8px;
}

.nav-item { border-bottom: 1px solid #f2f2f2; }
#navigation .nav-item a {
  font-size: 0.95rem;
  font-weight: 600;
  color: #222;
  letter-spacing: 0.01em;
  padding: 0.85em 0;
}
.nav-item a:hover { color: var(--masthead-bg); background: none; }

/* =============================================
   SEARCH PANEL — full-screen popup / modal
   ============================================= */

/* The panel itself IS the dark backdrop */
#searchPanel,
#searchPanel.long {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  background: rgba(15, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: min(10vh, 100px) 2% 5%;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  z-index: 1010;
  color: #333;
}

#searchPanel.open {
  opacity: 1;
  visibility: visible;
}

/* White card inside the backdrop */
.searchCard {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px 18px;
  width: 100%;
  min-width: min(560px, 96vw);
  max-width: 780px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  animation: searchCardIn 0.22s ease both;
}

#searchPanel.open .searchCard {
  animation: searchCardIn 0.22s ease both;
}

@keyframes searchCardIn {
  from { transform: translateY(-12px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}

/* Card header: "Search" title + close X */
.searchCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.searchCardTitle {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--masthead-bg);
}

.searchCloseBtn {
  width: 30px;
  height: 30px;
  border: none;
  background: #f4f4f4;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
  flex-shrink: 0;
}
.searchCloseBtn:hover { background: #e8e8e8; }
.searchCloseBtn svg { width: 14px; height: 14px; color: #555; }

/* Search input row: icon + text input + submit */
.searchInputRow {
  display: flex;
  align-items: center;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.searchInputRow:focus-within {
  border-color: var(--masthead-bg);
}

.searchInputIcon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0 10px 0 14px;
  color: #999;
  pointer-events: none;
}
.searchInputRow:focus-within .searchInputIcon { color: var(--masthead-bg); }

#searchPanel #fld_search,
#searchPanel input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 11px 8px;
  font-size: 1rem;
  color: #222;
  background: transparent;
  margin: 0;
}

#searchPanel button.btn_search {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  background: var(--masthead-bg) url("/assets/img/mobile-search.png") no-repeat center;
  background-size: 18px;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s;
}
#searchPanel button.btn_search:hover { opacity: 1; }

/* Quick links below input */
.searchQuickLinks {
  margin-top: 10px;
  font-size: 0.8rem;
}

/* ── Specificity fix ─────────────────────────────────────────────────────────
   responsive.css sets:
     #searchPanel          { color: #fff }   [1,0,0]
     #searchPanel a        { color: #fff }   [1,0,1]
   Those ID selectors beat plain class selectors regardless of load order.
   Prefix with #searchPanel here to win on specificity [1,1,x] > [1,0,x].
   ─────────────────────────────────────────────────────────────────────────── */

/* Reset inherited white colour for the whole card interior [1,1,0] > [1,0,0] */
#searchPanel .searchCard { color: #1a1a1a; }

/* Reset white links inside the card            [1,1,1] > [1,0,1] */
#searchPanel .searchCard a { color: #1a1a1a; }

#searchPanel .searchQuickLinks a {
  color: #888;
  text-decoration: none;
  border-bottom: 1px dotted #ccc;
  transition: color 0.15s;
}
#searchPanel .searchQuickLinks a:hover { color: var(--masthead-bg); }

/* Results area — populated by live search JS */
.searchResults {
  margin-top: 12px;
  min-height: 0;
  border-top: 0 solid #eee;
  transition: min-height 0.2s ease, border-top-width 0.2s;
}

.searchResults.hasResults {
  border-top-width: 1px;
  padding-top: 10px;
}

/* Live result list */
.searchResultList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.searchResultList li {
  border-bottom: 1px solid #f0f0f0;
}
.searchResultList li:last-child {
  border-bottom: none;
}

#searchPanel .searchResultList a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 9px 4px;
  text-decoration: none;
  color: #1a1a1a;
  transition: background 0.12s;
  border-radius: 6px;
}
#searchPanel .searchResultList a:hover {
  background: #fdf3f1;
  color: var(--masthead-bg);
}

.srTitle {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  min-width: 0;
}

.srDate {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: #999;
  white-space: nowrap;
}

/* "View all results" link below the list */
#searchPanel .searchViewAll {
  display: block;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--masthead-bg);
  text-decoration: none;
  text-align: right;
  letter-spacing: 0.02em;
}
#searchPanel .searchViewAll:hover { text-decoration: underline; }

/* "No results" message */
.searchNoResults {
  font-size: 0.85rem;
  color: #888;
  margin: 6px 0 4px;
}

/* ============================================
   SEARCH RESULTS PAGE (/search.php)
   ============================================ */

.searchPageMeta {
  font-size: 0.85rem;
  color: #666;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
  margin-bottom: 2px;
  background: #fafafa;
}
.searchPageMeta strong { color: #222; }
.searchPageMeta a {
  color: var(--masthead-bg);
  font-weight: 600;
  transition: opacity 0.15s;
}
.searchPageMeta a:hover { opacity: 0.75; }

.searchPageCount {
  display: inline-block;
  background: var(--masthead-bg);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 6px;
  vertical-align: middle;
}

.searchPageEmpty {
  padding: 48px 20px;
  color: #888;
  font-size: 0.95rem;
  text-align: center;
}
.searchPageEmpty p { margin: 8px 0; }
.searchPageEmpty .searchEmptyIcon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
  opacity: 0.35;
}

.searchPageList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.searchPageItem {
  display: flex;
  gap: 14px;
  padding: 14px 12px;
  border-bottom: 1px solid #eee;
  transition: background 0.15s, transform 0.15s;
  border-radius: 6px;
  margin: 2px 0;
}
.searchPageItem:hover {
  background: #f8f5f3;
  transform: translateX(3px);
}
.searchPageItem:last-child { border-bottom: none; }

.searchPageThumbLink {
  flex-shrink: 0;
}
.searchPageThumb {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  background: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.searchPageItem:hover .searchPageThumb {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.searchPageText {
  flex: 1;
  min-width: 0;
}

.searchPageTitle {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 4px;
  transition: color 0.15s;
}
.searchPageTitle:hover { color: var(--masthead-bg); }

.searchPageTeaser {
  font-size: 0.85rem;
  color: #555;
  margin: 0 0 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.searchPageDate {
  font-size: 0.72rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media screen and (max-width: 480px) {
  .searchPageThumb { width: 70px; height: 70px; }
  .searchPageItem { gap: 10px; padding: 12px 8px; }
  .searchPageTitle { font-size: 0.92rem; }
  .searchPageItem:hover { transform: none; }
}

/* =============================================
   MOBILE MASTHEAD
   Applies below 650px AND in landscape below 768px. ONE definition, not two:
   these conditions previously carried near-identical duplicated rule sets, and the
   drift between them is what produced the landscape double-search-button bug.
   Value-only overrides follow in their own blocks below, in cascade order:
   ≤560 → ≤420 → landscape (landscape last, so it wins wherever it applies).
   ============================================= */
@media screen and (max-width: 650px),
       screen and (orientation: landscape) and (max-width: 768px) {
  :root {
    --masthead-top-height: 80px;
    --masthead-top-compact: 48px;  /* condensed height on scroll */
    --masthead-nav-height: 0px;
    --masthead-rest: var(--masthead-top-height);
  }

  /* Row 1 IS the mobile masthead. The tools row and section nav are desktop-only
     here, which is the inverse of the previous arrangement. */
  .mastheadTools,
  .sectionNav,
  .navDropdown { display: none !important; }

  .mastheadTop {
    position: relative;              /* centring context for the brand */
    justify-content: space-between;  /* left cluster | right cluster */
    padding: 12px 4%;
    height: var(--masthead-top-height);
  }

  /* --- Left cluster: hamburger only --- */
  .mastheadTopLeft {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .mastheadTopLeft .date,
  .mastheadTopLeft .searchPill { display: none; }  /* desktop-only contents */
  label.hamburgerLabel { display: flex; }

  /* --- Centre: the brand ---
     Absolutely positioned, not flex-centred: the flanking clusters are unequal
     widths (~44px vs ~92px), so flex centring would sit the logo visibly off-centre. */
  .mastheadBrand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: none;
    align-items: center;
    text-align: center;
  }
  .mastheadTagline { display: none; }
  #piflogoImg { height: 56px; }

  /* --- Right cluster: search + login --- */
  .mastheadTopRight {
    flex: 0 0 auto;
    gap: 4px;
  }
  .btn-subscribe-pill { display: none; }   /* "Subscribe" lives in the drawer */
  .headerSearchBtn--mobile { display: flex; }

  /* Login is icon-only here. #btn_login is clipped rather than removed so the control
     keeps its accessible name AND so mobile_full.js can still read its text as the
     login/logout state flag. .loggedInUser may use display:none safely —
     :has(.loggedInUser:not(:empty)) is structural and still matches, so the
     person/exit-door icon swap keeps working. */
  #masthead .loggedInUser { display: none; }
  .utilityLogin #btn_login {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Compact on mobile CONDENSES rather than collapses — the row stays put and the
     logo and height shrink. The desktop rule sets height:0 !important along with
     opacity:0, zeroed padding and pointer-events:none, so each has to be undone
     explicitly. Same specificity, later in the file, so source order decides. */
  #masthead.masthead--compact .mastheadTop {
    height: var(--masthead-top-compact) !important;
    opacity: 1;
    padding-top: 8px;
    padding-bottom: 8px;
    pointer-events: auto;
  }
  #masthead.masthead--compact #piflogoImg { height: 32px; }

  /* Controls are deliberately quiet — the brand is the hero. Bare glyphs in 44px tap
     targets (the iOS minimum), with a press state only. The pill borders and fills
     that read well on desktop would compete with the logo at this size. */
  .mastheadTopLeft label.hamburgerLabel,
  .mastheadTopRight .headerSearchBtn--mobile,
  .mastheadTopRight .utilityLogin {
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 999px !important;  /* beats #masthead .utilityLogin's !important */
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    transition: background 0.15s ease;
  }
  .mastheadTopLeft label.hamburgerLabel:active,
  .mastheadTopRight .headerSearchBtn--mobile:active,
  .mastheadTopRight .utilityLogin:active {
    background: rgba(255, 255, 255, 0.18);
    transform: none;   /* cancel .utilityLogin:active's translateY nudge */
  }
  .mastheadTopRight .headerSearchBtn--mobile svg,
  .mastheadTopRight .utilityLogin .loginIcon {
    width: 22px;
    height: 22px;
    opacity: 1;
  }
  .mastheadTopLeft label.hamburgerLabel svg {
    width: 24px;
    height: 24px;
  }
}

/* Narrow phones: the logo steps down when half its width would otherwise reach the
   wider (right) cluster, whose left edge sits at
   `viewport − padding − 92px`. The previous 420px threshold was wrong — at 420px a
   56px logo still has ample clearance; the squeeze only begins around 380px.
   Both steps are measured, not derived — see the sweep in the plan. */
@media screen and (max-width: 380px) {
  :root { --masthead-top-height: 68px; }
  #piflogoImg { height: 44px; }
}

/* Smallest supported phones (320px). A 44px logo overlaps the right cluster by ~2px
   here; 36px restores clearance. */
@media screen and (max-width: 330px) {
  :root { --masthead-top-height: 60px; }
  #piflogoImg { height: 36px; }
}

/* Landscape-only value overrides. Vertical space is the scarce axis at 768×400.
   Last of the mobile blocks so it wins wherever it applies. */
@media screen and (orientation: landscape) and (max-width: 768px) {
  :root {
    --masthead-top-height: 56px;
    --masthead-top-compact: 44px;
  }
  #piflogoImg { height: 40px; }
}

/* ============================================================
   NEWS HOVER MEGA-MENU DROPDOWN
   ============================================================ */

.navDropdown {
  position: fixed;
  top: var(--masthead-rest);
  left: 0;
  right: 0;
  z-index: 998;
  background: #fff;
  border-top: 3px solid var(--masthead-bg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  padding: 20px 4%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}
#newsDropdown .ndViewAll {
  color: var(--ink);
}

.navDropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Loading spinner shown while nav_news.php's fetch is in flight */
#ndSpinner.lds-ellipsis {
  display: block;
  margin: 24px auto;
}

/* 4-column article grid */
.ndGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1168px;
  margin: 0 auto 16px;
}

/* Article card */
.ndCard a {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.ndCard a:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }

/* Thumbnail — 16:9 from background-image */
.ndImg {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #f0f0f0;
  border-radius: 6px 6px 0 0;
}

.ndBody { padding: 10px 2px 4px; }

.ndTitle {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
  margin: 0 0 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-display);
  letter-spacing: normal;
}
.ndCard a:hover .ndTitle { color: var(--masthead-bg); }

.ndTeaser {
  font-size: 0.75rem;
  color: #666;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-body);
  letter-spacing: normal;
}

/* "View all news →" footer link */
.ndViewAll {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--masthead-bg);
  text-decoration: none;
  letter-spacing: 0.04em;
  max-width: 1168px;
  margin: 0 auto;
  padding: 4px 0;
}
.ndViewAll:hover { text-decoration: underline; }

/* =============================================
   EDITORIAL PAGE ISOLATION
   Prevent body.home / body.article resets from
   bleeding into the masthead.
   ============================================= */

/* Restore pill border-radii overridden by body.home * { border-radius: 0 !important } */
#masthead .btn-subscribe-pill { 
  border-radius: 999px !important;
  color: var(--ink);
}

#masthead .headerSearchBtn    { border-radius: 999px !important; }
#masthead .utilityLogin       { border-radius: 999px !important; }

/* Restore white link/text colour overridden by body.home a { color: var(--ink) } */
#masthead a,
#masthead .sectionNav a { 
  color: var(--masthead-text-color);
  letter-spacing: 1.6px;
  font-family: var(--font-furniture);
  font-weight: 600;
  font-size: 0.70rem;
}

#masthead .navigation a {
  color: var(--ink);
  font-size: 0.83rem;
}

.navigation a {
  color: var(--ink);
}

/* Responsive: 2 columns on narrower desktop */
@media screen and (max-width: 900px) {
  .ndGrid { grid-template-columns: repeat(2, 1fr); }
}

/* .navDropdown is hidden by the mobile masthead block above, which covers both the
   ≤650px and landscape ≤768px conditions — no separate hides needed here. */
@media screen and (max-width: 650px) {
  #masthead a {
    align-self: baseline;
  }
}