/* ============================================
   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) + env(safe-area-inset-top, 0px));
  --masthead-text-color: #ffffff;
  --header-details: rgba(255, 255, 255, 0.92)
}

/* Landscape iPhones: keep page content clear of the notch under viewport-fit=cover. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* =============================================
   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;
  /* viewport-fit=cover puts the page under the iPhone notch / Dynamic Island; the red
     fills that strip and the controls sit below it. env() is 0 on other devices. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  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);
}

/* --- Header auth state --- */
.authIn,
.authOut                              { display: none; }
#masthead[data-auth="in"]  .authIn    { display: flex; }
#masthead[data-auth="out"] .authOut   { display: inline-flex; }

.mastheadTopRight                             { min-height: 34px; }
#masthead[data-auth="pending"] .subscribeLink { visibility: hidden; }

.subscribeLink > span                                { display: none; }
.subscribeLink[data-pill="join"] .pillJoin,
.subscribeLink[data-pill="renew"] .pillRenew,
.subscribeLink[data-pill="subscribe"] .pillSubscribe { display: inline; }
.subscribeLink[data-pill="none"]                     { display: none; }

/* #masthead-scoped to outrank the panel-link rule below. */
#masthead .authMenuPanel a.authMenuRenew { display: none; }
#masthead:has(.subscribeLink[data-pill="renew"]) .authMenuPanel a.authMenuRenew { display: block; }

.authSignIn {
  align-items: center;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.78rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.authSignInIcon    { display: none; width: 22px; height: 22px; }
.authSignIn:hover  { background: rgba(255, 255, 255, 0.16); }
.authSignIn:active { transform: translateY(1px); }

.authMenu { position: relative; }
.authMenuTrigger {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--masthead-text-color);
  cursor: pointer;
  transition: background 0.15s ease;
}
.authMenuTrigger:hover  { background: rgba(255, 255, 255, 0.16); }
.authMenuTrigger:active { transform: translateY(1px); }
.authMenuTrigger svg          { width: 22px; height: 22px; }
.authMenuTrigger .authCaret   { width: 14px; height: 14px; }

/* fixed, not absolute: .mastheadTop's overflow:hidden clips an absolute panel. */
.authMenuPanel {
  position: fixed;
  z-index: 1100;
  min-width: 200px;
  padding: 8px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  text-align: left;
}
/* #masthead-scoped: `#masthead a` would paint these white on white. */
#masthead .authMenuPanel a,
.authMenuSignOut {
  display: block;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: 0;
  font-family: var(--font-furniture);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: normal;
  color: #222;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
#masthead .authMenuPanel a:hover,
.authMenuSignOut:hover { background: #f2f2f2; color: #222; }
.authMenuName {
  margin: 0;
  padding: 4px 16px 10px;
  font-weight: 700;
  color: #111;
}
.authMenuPanel hr {
  margin: 6px 0;
  border: 0;
  border-top: 1px solid #e6e6e6;
}
.authMenuPanel form { margin: 0; }

/* =============================================
   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. */
/* Closed panels are display:none, not just off-screen or transparent: iOS Safari tints
   its toolbar from any fixed box touching the bottom edge, visible or not. They hide
   instantly (no exit transition): Safari re-samples as close starts, and a panel still
   animating out leaves the bar stuck in its colour. */
ul.navigation {
  display: none;
  left: -280px;
  right: auto;
  padding-top: calc(var(--spacing-lg) + env(safe-area-inset-top, 0px));
  transition: left var(--transition-medium), box-shadow var(--transition-medium);
}
ul.navigation #menuClose { top: calc(10px + env(safe-area-inset-top, 0px)); }

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

.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; }

/* Drawer auth items: block, not the flex the masthead controls use. */
#masthead[data-auth="in"]  li.authIn  { display: block; }
#masthead[data-auth="out"] li.authOut { display: block; }

.nav-item .authSignIn {
  display: block;
  padding: 0.85em 0;
  border: 0;
  border-radius: 0;
  font-size: 0.95rem;
}
.nav-item .authSignIn:hover { background: none; }

.menuAuthName {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 400;
  color: #777;
}
.menuAuthName:empty { display: none; }

.menuSignOut {
  display: block;
  width: 100%;
  padding: 0.85em 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #222;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
}
.menuSignOut:hover { color: var(--masthead-bg); }
.nav-item form     { margin: 0; }

/* =============================================
   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;
  z-index: 1010;
  color: #333;
}
/* No backdrop fade-in: iOS Safari samples the bar tint as the panel appears, and a
   panel fading in from opacity 0 leaves the bar red after close. The card still animates. */
#searchPanel:not(.open) { display: none; }

/* 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: calc(var(--masthead-top-height) + env(safe-area-inset-top, 0px));
  }

  /* 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; }

  /* 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 .authMenuTrigger,
  .mastheadTopRight .authSignIn {
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 999px !important;  /* beats the #masthead rule below */
    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 .authMenuTrigger:active,
  .mastheadTopRight .authSignIn:active {
    background: rgba(255, 255, 255, 0.18);
    transform: none;   /* cancel the desktop translateY nudge */
  }
  .mastheadTopRight .headerSearchBtn--mobile svg,
  .mastheadTopRight .authMenuTrigger svg {
    width: 22px;
    height: 22px;
    opacity: 1;
  }

  /* Icon-only: "Sign in" as text overflows a 44px target. Label kept for a11y. */
  .mastheadTopRight .authSignInIcon { display: block; }
  .mastheadTopRight .authSignInLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .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 .authMenuTrigger,
#masthead .authSignIn         { 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;
  }
}

/* --- Login page: sign-in link request --- */
.loginAlt {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.5;
}
.loginLinkBtn {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--masthead-bg);
  text-decoration: underline;
  cursor: pointer;
}
.loginLinkBtn:hover { text-decoration: none; }
.loginNotice {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #eef7ee;
  border-left: 3px solid #2e7d32;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #1b4d1f;
}