/*
Theme Name:   Duhaney Park Digital Political Office
Theme URI:    https://brandishmedia.com
Author:       Brandish Media
Author URI:   https://brandishmedia.com
Description:  Presentation layer for the Duhaney Park Division Digital Political Office. Built from the approved design. All resident data is registered by the Brandish Digital Constituency Office plugin, which this theme only displays.
Version:      1.6.1
Requires PHP: 7.4
License:      Proprietary — licensed to client, not transferred
Text Domain:  duhaney-park
*/

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

:root {
  --orange: #F5A623;
  --orange-dark: #D4890A;
  --orange-light: #FEF3DC;
  --black: #0D0D0D;
  --grey: #4A4A4A;
  --light-grey: #F8F8F8;
  --white: #FFFFFF;
  --border: #E8E8E8;
}

body {
  font-family: 'Manrope', sans-serif;
  background: var(--white);
  color: var(--black);
  overflow-x: hidden;
}

/* ACCESSIBILITY */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; word-wrap: normal !important;
}
.skip-link:focus {
  display: block; left: 8px; top: 8px; z-index: 300;
  background: var(--white); color: var(--black);
  padding: 12px 20px; font-weight: 700;
  clip: auto; clip-path: none; height: auto; width: auto;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* NAV */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--white);
  border-bottom: 2px solid var(--orange);
  padding: 0 48px;
  height: 80px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.nav-logo {
  width: 64px; height: 64px; object-fit: contain;
  background: transparent; border-radius: 0; padding: 0;
}
.nav-name {
  font-size: 13px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--black);
}
.nav-name span {
  color: var(--orange); display: block; font-weight: 500;
  text-transform: none; letter-spacing: 0; font-size: 12px;
}
.nav-links { display: flex; gap: 32px; list-style: none; align-items: center; }
.nav-links a {
  font-size: 13px; font-weight: 600; color: var(--grey);
  text-decoration: none; letter-spacing: 0.02em;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links .current-menu-item > a { color: var(--orange); }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 8px; color: var(--black);
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: currentColor;
  margin: 5px 0; transition: transform 0.2s, opacity 0.2s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* HERO */
.hero {
  min-height: 100vh;
  padding-top: 80px;
  background: url('assets/img/hero-bg.jpg') center center / cover no-repeat;
  display: flex; align-items: stretch;
  position: relative;
  overflow: hidden;
}
.hero-left {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 64px;
  position: relative; z-index: 2;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--white);
  margin-bottom: 24px;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 28px; height: 2px; background: var(--white);
}
.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 400; line-height: 1.0; letter-spacing: 0.02em;
  color: var(--white); margin-bottom: 24px; max-width: 520px;
}
.hero-title .highlight { color: var(--white); }
.hero-desc {
  font-size: 16px; line-height: 1.75;
  color: rgba(255,255,255,0.88); max-width: 460px;
  margin-bottom: 40px; font-weight: 400;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.btn-primary {
  background: var(--black); color: var(--white);
  font-size: 14px; font-weight: 700;
  padding: 16px 32px; border: 2px solid var(--black);
  cursor: pointer; letter-spacing: 0.04em; text-transform: uppercase;
  transition: all 0.2s; text-decoration: none;
  font-family: 'Manrope', sans-serif;
}
.btn-primary:hover { background: #333; border-color: #333; }
.btn-primary[disabled] { opacity: 0.6; cursor: wait; }
.btn-secondary {
  background: transparent; color: var(--white);
  font-size: 14px; font-weight: 700;
  padding: 16px 32px; border: 2px solid var(--white);
  cursor: pointer; letter-spacing: 0.04em; text-transform: uppercase;
  transition: all 0.2s; text-decoration: none;
  font-family: 'Manrope', sans-serif;
}
.btn-secondary:hover { background: rgba(255,255,255,0.15); }
.modal .btn-secondary, .dco-page .btn-secondary { color: var(--black); border-color: var(--black); }
.modal .btn-secondary:hover, .dco-page .btn-secondary:hover { background: rgba(0,0,0,0.06); }

.hero-right {
  width: 42%; position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.councillor-img { display: none; }
.hero-tag {
  position: absolute; bottom: 40px; left: 32px;
  background: rgba(0,0,0,0.65);
  border-left: 4px solid var(--orange);
  padding: 12px 18px; z-index: 3;
  backdrop-filter: blur(6px);
}
.hero-tag strong { display: block; font-size: 13px; font-weight: 800; color: var(--white); }
.hero-tag span { font-size: 11px; color: rgba(255,255,255,0.65); font-weight: 500; }

/* STATS BAR */
.stats-bar { background: var(--black); padding: 28px 64px; display: flex; gap: 0; }
.stat-item {
  flex: 1; padding: 0 40px;
  border-right: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}
.stat-item:first-child { padding-left: 0; text-align: left; }
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px; font-weight: 700; color: var(--orange); display: block;
}
.stat-label {
  font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* SECTIONS */
section { padding: 80px 64px; }
.page-header { padding-top: 160px; }

.section-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--orange);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.section-eyebrow::before {
  content: ''; display: block; width: 24px; height: 2px; background: var(--orange);
}
.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700; line-height: 1.2;
  margin-bottom: 48px; max-width: 560px;
}

/* SERVICES */
.services { background: var(--light-grey); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.service-card {
  background: var(--white); padding: 32px 28px;
  border-top: 4px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.service-card:hover {
  border-top-color: var(--orange);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.service-icon { display: block; margin-bottom: 16px; color: var(--orange); }
.service-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.service-card p { font-size: 14px; color: var(--grey); line-height: 1.65; }

/* ASSISTANCE HUB */
.hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hub-card {
  border: 1.5px solid var(--border); padding: 24px 20px;
  display: flex; flex-direction: column; gap: 8px;
  transition: all 0.2s; text-decoration: none; color: inherit;
}
.hub-card:hover { border-color: var(--orange); background: var(--orange-light); }
.hub-card .prog-name { font-size: 15px; font-weight: 700; }
.hub-card .prog-desc { font-size: 12px; color: var(--grey); line-height: 1.5; }
.hub-card .prog-tag {
  display: inline-block; margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--orange);
  background: var(--orange-light); padding: 3px 8px; align-self: flex-start;
}


/* Category filter pills on the programme archive */
.filter-pills {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 44px;
}
.filter-pill {
  display: inline-block;
  padding: 9px 16px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grey); background: var(--white);
  border: 1.5px solid var(--border);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.filter-pill:hover {
  border-color: var(--orange);
  color: var(--orange-dark);
  background: var(--orange-light);
}
.filter-pill.is-active {
  background: var(--black); border-color: var(--black); color: var(--white);
}
.filter-pill.is-active:hover { background: #333; border-color: #333; color: var(--white); }

/* COMMUNITY WORKS BOARD */
.works { background: var(--black); color: var(--white); }
.works .section-title { color: var(--white); }
.works-list { display: flex; flex-direction: column; gap: 0; }
.work-item {
  display: flex; align-items: center; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.work-item:last-child { border-bottom: none; }
.work-status {
  display: flex; align-items: center; gap: 8px;
  background: rgba(245,166,35,0.12); color: var(--orange);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 6px 12px;
  white-space: nowrap; border: 1px solid rgba(245,166,35,0.3);
  min-width: 124px; justify-content: center;
}
.work-status::before { content: '●'; font-size: 8px; }

/* Received: awaiting office action */
.work-status--received {
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.18);
}
/* In Progress: with the responsible agency */
.work-status--in_progress {
  background: rgba(245,166,35,0.12); color: var(--orange);
  border-color: rgba(245,166,35,0.35);
}
/* Resolved: work completed */
.work-status--resolved {
  background: rgba(74,222,128,0.10); color: #6EE7A0;
  border-color: rgba(110,231,160,0.30);
}
.work-info { flex: 1; }
.work-info h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.work-info p { font-size: 13px; color: rgba(255,255,255,0.5); }
.work-date { font-size: 12px; color: rgba(255,255,255,0.35); white-space: nowrap; }
.works .dco-empty { color: rgba(255,255,255,0.5); font-size: 14px; }


/* Works board on a light background (when the 'works' class is not used) */
.works-list:not(.works .works-list) .work-status--received { background:#F3F3F3; color:#666; border-color:#DDD; }
.works-list:not(.works .works-list) .work-status--resolved { background:#EAF7EE; color:#1a7f37; border-color:#BEE3C8; }
@media (max-width: 768px) {
  .work-status { min-width: 0; }
}

/* REPORT MODAL */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--white); width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto; position: relative;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.modal-header {
  background: var(--black); padding: 28px 32px;
  border-left: 6px solid var(--orange);
}
.modal-header h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; font-weight: 700; color: var(--white); margin-bottom: 4px;
}
.modal-header p { font-size: 13px; color: rgba(255,255,255,0.55); }
.modal-close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.6); font-size: 22px; line-height: 1;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--white); }
.modal-body { padding: 32px; }

/* FORMS */
.form-group { margin-bottom: 22px; }
.form-group label {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--black); margin-bottom: 8px;
}
.form-group select,
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="file"],
.form-group textarea {
  width: 100%; padding: 13px 16px;
  font-family: 'Manrope', sans-serif; font-size: 14px;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--black); outline: none;
  transition: border-color 0.2s; appearance: none;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus { border-color: var(--orange); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group.dco-consent label,
.dco-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: 13px; color: var(--grey); line-height: 1.5;
}
.dco-checkbox input { width: auto; margin-top: 2px; }
.modal-footer { padding: 0 32px 32px; display: flex; gap: 12px; }
.submit-note { font-size: 11px; color: var(--grey); margin-top: 8px; line-height: 1.5; }
.submit-note a { color: var(--orange-dark); }


/* Consent line: keep the privacy link visible at the point of agreement */
.dco-consent .dco-checkbox span { display: inline; }
.dco-consent a { color: var(--orange-dark); text-decoration: underline; }
.dco-consent a:hover { color: var(--orange); }
.modal .dco-consent a, .dco-page .dco-consent a { font-weight: 600; }

.dco-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.dco-form-message { display: none; padding: 14px 16px; margin-bottom: 20px; font-size: 13px; line-height: 1.5; }
.dco-form-message.is-error { display: block; background: #FDECEC; border-left: 4px solid #C0392B; color: #7B241C; }
.dco-form-message.is-success { display: block; background: var(--orange-light); border-left: 4px solid var(--orange); color: var(--black); }

/* SUCCESS STATE */
.modal-success { display: none; padding: 48px 32px; text-align: center; }
.modal-success.active { display: block; }
.success-icon { margin-bottom: 16px; display: block; }
.modal-success h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px; font-weight: 700; margin-bottom: 12px;
}
.modal-success p {
  font-size: 14px; color: var(--grey); line-height: 1.65;
  max-width: 340px; margin: 0 auto 24px;
}
.modal-success .dco-reference {
  display: inline-block; font-weight: 800; color: var(--black);
  background: var(--orange-light); padding: 2px 8px;
}

/* PROGRAMME DETAIL */
.dco-page { padding-top: 160px; }
.prose { max-width: 720px; font-size: 16px; line-height: 1.75; color: var(--grey); }
.prose h2, .prose h3 { color: var(--black); margin: 32px 0 12px; }
.prose h2 { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 0.01em; }
.prose h3 { font-size: 18px; font-weight: 700; }
.prose p, .prose ul, .prose ol { margin-bottom: 18px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--orange-dark); }
.prose img { max-width: 100%; height: auto; }
.prose blockquote {
  border-left: 4px solid var(--orange); padding-left: 20px;
  margin: 24px 0; font-style: italic;
}

.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.detail-aside {
  background: var(--light-grey); padding: 28px 24px;
  border-top: 4px solid var(--orange); position: sticky; top: 104px;
}
.detail-aside h3 {
  font-family: 'Bebas Neue', sans-serif; font-size: 20px; margin-bottom: 12px;
}
.detail-aside p { font-size: 13px; color: var(--grey); line-height: 1.6; margin-bottom: 16px; }
.detail-aside .btn-primary { display: inline-block; text-align: center; width: 100%; }

.meta-list { list-style: none; margin-bottom: 24px; }
.meta-list li {
  padding: 12px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--grey); line-height: 1.6;
}
.meta-list li:last-child { border-bottom: none; }


/* ============================================
   FEATURE PAGES — programme detail, bio
   White banner, orange headline, image right.
   Deliberately distinct from the home page hero.
   ============================================ */
.feature-page { padding-top: 80px; }

.feature-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 64px 64px 48px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.feature-banner--noimage { grid-template-columns: 1fr; }
.feature-banner--noimage .feature-banner__text { max-width: 760px; }

.feature-banner__text .section-eyebrow { margin-bottom: 14px; }

.feature-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--orange);
  margin-bottom: 18px;
}
.feature-lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--black);
  max-width: 520px;
  margin-bottom: 32px;
}

.feature-banner__image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-banner__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
}

.feature-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-orange {
  display: inline-block;
  background: var(--orange); color: var(--black);
  font-family: 'Manrope', sans-serif;
  font-size: 14px; font-weight: 700;
  padding: 16px 32px; border: 2px solid var(--orange);
  cursor: pointer; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; transition: background 0.2s, border-color 0.2s;
}
.btn-orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn-orange .ext-icon { font-size: 12px; margin-left: 4px; vertical-align: 1px; }

.btn-outline {
  display: inline-block;
  background: transparent; color: var(--black);
  font-family: 'Manrope', sans-serif;
  font-size: 14px; font-weight: 700;
  padding: 16px 32px; border: 2px solid var(--black);
  cursor: pointer; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; transition: background 0.2s;
}
.btn-outline:hover { background: rgba(0,0,0,0.06); }

/* Body: single column, one reading order on every device */
.feature-body {
  max-width: 760px;
  padding: 56px 64px 96px;
}
.feature-block { margin-bottom: 44px; }
.feature-block:last-child { margin-bottom: 0; }
.feature-block h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px; font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

/* Marked lists replace the old ruled rows */
.marker-list { list-style: none; }
.marker-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 16px; line-height: 1.65; color: var(--grey);
}
.marker-list li::before {
  content: '';
  position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px;
  background: var(--orange);
}
.marker-list--numbered li { padding-left: 42px; display: flex; gap: 14px; }
.marker-list--numbered li::before { display: none; }
.marker-list--numbered .marker-num {
  position: absolute; left: 0; top: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px; color: var(--orange);
  width: 28px;
}

.info-panel {
  background: var(--light-grey);
  border-top: 4px solid var(--orange);
  padding: 28px 26px;
}
.info-panel h2 { margin-bottom: 14px; }
.info-panel p { font-size: 15px; line-height: 1.65; color: var(--grey); margin-bottom: 16px; }
.info-panel p:last-child { margin-bottom: 0; }
.info-panel strong { color: var(--black); }
.info-panel a { color: var(--orange-dark); }

.text-link {
  font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile: the form download stays reachable from anywhere on the page */
.sticky-action { display: none; }

@media (max-width: 900px) {
  .feature-banner { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px 32px; }
  .feature-banner__image { order: -1; }
  .feature-banner__image img { max-height: 300px; }
  .feature-lede { max-width: 100%; }
  .feature-body { padding: 40px 24px 120px; }
  .feature-actions .btn-orange, .feature-actions .btn-outline { flex: 1; text-align: center; }

  .sticky-action {
    display: block;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: var(--white);
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  }
  .sticky-action .btn-orange { display: block; text-align: center; width: 100%; }
}

/* NEWS */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.post-card {
  border: 1.5px solid var(--border); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.post-card:hover { border-color: var(--orange); box-shadow: 0 8px 32px rgba(0,0,0,0.06); }
.post-card .post-date {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--orange);
}
.post-card h3 { font-size: 17px; font-weight: 700; line-height: 1.35; }
.post-card h3 a { color: var(--black); text-decoration: none; }
.post-card h3 a:hover { color: var(--orange-dark); }
.post-card p { font-size: 14px; color: var(--grey); line-height: 1.65; }
.post-card .read-more {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--black); text-decoration: none;
  margin-top: auto; padding-top: 8px;
}
.post-card .read-more:hover { color: var(--orange-dark); }

.pagination { display: flex; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pagination .page-numbers {
  padding: 10px 16px; border: 1.5px solid var(--border);
  text-decoration: none; color: var(--grey); font-size: 14px; font-weight: 600;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { border-color: var(--orange); color: var(--orange-dark); }

.dco-empty { font-size: 14px; color: var(--grey); }

/* FOOTER */
footer.site-footer {
  background: var(--black); border-top: 4px solid var(--orange);
  padding: 40px 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
footer.site-footer p { font-size: 12px; color: rgba(255,255,255,0.4); }
footer.site-footer strong { color: var(--orange); font-weight: 700; }
footer.site-footer a { color: rgba(255,255,255,0.6); }
.footer-links { list-style: none; display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-size: 12px; text-decoration: none; }
.footer-links a:hover { color: var(--orange); }



/* Site-wide submission confirmation (no-JavaScript path) */
.dco-global-notice {
  padding: 16px 48px;
  font-size: 14px; line-height: 1.6;
  position: relative; z-index: 105;
}
.dco-global-notice.is-success { background: var(--orange-light); border-bottom: 3px solid var(--orange); color: var(--black); }
.dco-global-notice.is-error { background: #FDECEC; border-bottom: 3px solid #C0392B; color: #7B241C; }
.dco-global-notice p { max-width: 900px; margin: 0 auto; }

/* The fixed navigation must not sit on top of it */
body:has(.dco-global-notice) nav.site-nav { position: static; }
body:has(.dco-global-notice) .hero { padding-top: 0; }

@media (max-width: 768px) {
  .dco-global-notice { padding: 14px 20px; font-size: 13px; }
}

/* ============================================
   COMMUNITY ALERT — urgent notices
   ============================================ */
.community-alert {
  background: var(--black);
  border-bottom: 3px solid var(--orange);
  position: relative; z-index: 110;
}
.community-alert__inner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 48px;
  max-width: 1400px; margin: 0 auto;
}
.community-alert__icon { color: var(--orange); flex-shrink: 0; margin-top: 1px; }
.community-alert p {
  font-size: 14px; line-height: 1.55; color: var(--white); font-weight: 500;
}
.community-alert a {
  color: var(--orange); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  margin-left: 6px;
}
/* The nav is fixed, so it and the page below must shift down when the alert
   bar is present. Height is approximate and the alert sits above it in flow. */
body.has-alert nav.site-nav { position: static; }
body.has-alert .hero { padding-top: 0; }
body.has-alert .page-header,
body.has-alert .dco-page,
body.has-alert .feature-page { padding-top: 24px; }

/* ============================================
   SITE DISCLAIMER
   ============================================ */
.site-disclaimer {
  flex-basis: 100%;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px; margin-top: 8px;
}
.site-disclaimer p {
  font-size: 11px; line-height: 1.7;
  color: rgba(255,255,255,0.42);
  max-width: 860px;
}

/* ============================================
   REPORT TRACKER
   ============================================ */
.dco-tracker { max-width: 560px; }
.track-row { display: flex; gap: 10px; }
.track-row input {
  flex: 1; padding: 13px 16px;
  font-family: 'Manrope', sans-serif; font-size: 15px;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1.5px solid var(--border); outline: none;
  transition: border-color 0.2s;
}
.track-row input:focus { border-color: var(--orange); }
.track-row .btn-primary { white-space: nowrap; }

.dco-track-message { display: none; padding: 14px 16px; margin-top: 18px; font-size: 13px; line-height: 1.55; }
.dco-track-message.is-error { display: block; background: #FDECEC; border-left: 4px solid #C0392B; color: #7B241C; }

.dco-track-result {
  margin-top: 28px;
  border: 1.5px solid var(--border);
  border-top: 4px solid var(--orange);
  padding: 24px 26px;
  background: var(--white);
}
.track-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.track-ref {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px; letter-spacing: 0.02em;
}
.track-status.work-status--received { background:#F3F3F3; color:#666; border-color:#DDD; }
.track-status.work-status--in_progress { background: var(--orange-light); color: var(--orange-dark); border-color: rgba(245,166,35,0.4); }
.track-status.work-status--resolved { background:#EAF7EE; color:#1a7f37; border-color:#BEE3C8; }

.track-detail > div {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.track-detail > div:last-child { border-bottom: none; }
.track-detail dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey); padding-top: 2px;
}
.track-detail dd { font-size: 15px; color: var(--black); }


/* Tracking panel on the works board page */
.board-intro { padding-bottom: 0; }
.board-track {
  max-width: 640px;
  background: var(--light-grey);
  border-top: 4px solid var(--orange);
  padding: 28px 28px 30px;
  margin-bottom: 8px;
}
.board-track__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px; margin-bottom: 6px;
}
.board-track__note { font-size: 14px; color: var(--grey); margin-bottom: 20px; line-height: 1.6; }
.board-track .dco-tracker { max-width: 100%; }
.board-track .form-group { margin-bottom: 0; }
.board-track .dco-track-result { background: var(--white); }

/* Board filters */
.board-filters {
  display: flex; flex-direction: column; gap: 18px;
  padding-bottom: 26px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.board-filter-label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
  margin-bottom: 10px;
}
.board-filters .filter-pills { margin-bottom: 0; }
.board-filters .filter-pill {
  background: transparent; color: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.22);
}
.board-filters .filter-pill:hover {
  border-color: var(--orange); color: var(--orange); background: rgba(245,166,35,0.08);
}
.board-filters .filter-pill.is-active {
  background: var(--orange); border-color: var(--orange); color: var(--black);
}
.board-filters .filter-pill.is-active:hover {
  background: var(--orange-dark); border-color: var(--orange-dark); color: var(--black);
}

@media (max-width: 768px) {
  .board-track { padding: 22px 20px 24px; }
}

/* ============================================
   EVENTS
   ============================================ */
.event-list { display: flex; flex-direction: column; gap: 0; }
.event-item {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.event-item:last-child { border-bottom: none; }
.event-date {
  flex-shrink: 0; width: 62px; text-align: center;
  background: var(--orange-light); border-top: 3px solid var(--orange);
  padding: 8px 0 10px;
}
.event-day {
  display: block; font-family: 'Bebas Neue', sans-serif;
  font-size: 28px; line-height: 1; color: var(--black);
}
.event-month {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-dark);
}
.event-info h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.event-info p { font-size: 13px; color: var(--grey); line-height: 1.6; }
.event-desc { margin-top: 6px; }

/* Events on the dark works section */
.works .event-item { border-bottom-color: rgba(255,255,255,0.08); }
.works .event-info h4 { color: var(--white); }
.works .event-info p { color: rgba(255,255,255,0.55); }



/* Event flyer + facts on the single event page */
.event-facts { list-style: none; margin-bottom: 8px; }
.event-facts li {
  display: grid; grid-template-columns: 92px 1fr;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 16px; color: var(--black);
}
.event-facts li:last-child { border-bottom: none; }
.event-fact-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey); padding-top: 3px;
}
.event-past-note {
  margin-top: 16px; padding: 12px 14px;
  background: var(--light-grey); border-left: 4px solid var(--grey);
  font-size: 14px; color: var(--grey);
}
.event-flyer { flex-direction: column; gap: 8px; }
.event-flyer img {
  max-height: 560px; width: 100%; height: auto;
  object-fit: contain; border: 1px solid var(--border);
}
.flyer-note { font-size: 11px; color: var(--grey); }

/* Flyer thumbnail in event lists */
.event-thumb {
  flex-shrink: 0; width: 96px; margin-left: auto;
  display: block; border: 1px solid var(--border);
}
.event-thumb img { display: block; width: 100%; height: auto; }
.event-info h4 a { color: inherit; text-decoration: none; }
.event-info h4 a:hover { color: var(--orange-dark); }
.works .event-info h4 a:hover { color: var(--orange); }

@media (max-width: 768px) {
  .event-facts li { grid-template-columns: 1fr; gap: 2px; }
  .event-thumb { width: 72px; }
}

/* ============================================
   EVENTS CALENDAR
   ============================================ */
.dco-calendar { max-width: 1000px; }

.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.cal-month {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px; letter-spacing: 0.02em;
}
.cal-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1.5px solid var(--border); color: var(--black);
  text-decoration: none; font-size: 18px;
  transition: border-color 0.2s, background 0.2s;
}
.cal-nav:hover { border-color: var(--orange); background: var(--orange-light); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
}
.cal-label {
  background: var(--black); color: rgba(255,255,255,0.7);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: center; padding: 10px 4px;
}
.cal-cell {
  background: var(--white); min-height: 96px;
  padding: 8px; position: relative;
}
.cal-cell--empty { background: var(--light-grey); }
.cal-day { font-size: 13px; font-weight: 700; color: var(--grey); }
.cal-cell--today { background: var(--orange-light); }
.cal-cell--today .cal-day { color: var(--orange-dark); }
.cal-cell--has-event { border-top: 3px solid var(--orange); }

.cal-event {
  display: block; margin-top: 6px;
  background: var(--black); color: var(--white);
  padding: 5px 7px; text-decoration: none;
  transition: background 0.2s;
}
.cal-event:hover { background: var(--orange-dark); }
.cal-event-title {
  display: block; font-size: 11px; font-weight: 700; line-height: 1.3;
}
.cal-event-time {
  display: block; font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 2px;
}

.cal-list { margin-top: 40px; }
.cal-list h4 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; margin-bottom: 12px;
}

/* On phones a 7-column grid is unreadable, so the month becomes a list */
@media (max-width: 700px) {
  .cal-grid { display: none; }
  .cal-list { margin-top: 8px; }
  .cal-head { justify-content: space-between; }
  .cal-month { font-size: 24px; }
}

/* ============================================
   MAP
   ============================================ */
.dpo-map {
  width: 100%; border: 1.5px solid var(--border);
  background: var(--light-grey); overflow: hidden;
  z-index: 1; /* keep tiles under the fixed navigation */
}
.dpo-map .leaflet-container { font-family: 'Manrope', sans-serif; }
.dpo-map .leaflet-tooltip {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.dpo-map-credit { font-size: 11px; color: var(--grey); margin-top: 8px; }

/* Councillor-led tag on the works board */
.work-tag {
  display: inline-block; margin-left: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--black);
  background: var(--orange); padding: 3px 8px;
  vertical-align: 2px;
}
.work-agency {
  display: inline-block; margin-left: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  border-left: 1px solid rgba(255,255,255,0.2); padding-left: 8px;
}

@media (max-width: 768px) {
  .community-alert__inner { padding: 12px 20px; }
  .community-alert p { font-size: 13px; }
  .track-row { flex-direction: column; }
  .track-row .btn-primary { width: 100%; }
  .track-detail > div { grid-template-columns: 1fr; gap: 2px; }
  .event-item { gap: 14px; }
  .work-agency { display: block; margin: 4px 0 0; border-left: none; padding-left: 0; }
}

/* WORDPRESS CORE CLASSES */
.alignleft { float: left; margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }
.aligncenter { display: block; margin: 0 auto 20px; }
.wp-caption-text { font-size: 12px; color: var(--grey); margin-top: 6px; }

@media (max-width: 900px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
}

@media (max-width: 768px) {
  nav.site-nav { padding: 0 20px; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 80px; left: 0; right: 0;
    background: var(--white); flex-direction: column; gap: 0;
    padding: 8px 20px 20px; border-bottom: 2px solid var(--orange);
  }
  .nav-open .nav-links { display: flex; }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--border); }
  .nav-links a { display: block; padding: 14px 0; font-size: 15px; }
  /* Mobile hero: the background is a wide image with the councillor on the
     right, so 'cover' on a narrow viewport crops her out entirely. Shift the
     focal point right to keep her in frame, and lay a gradient behind the text
     so the headline stays legible over the busier part of the photograph. */
  .hero {
    flex-direction: column;
    min-height: auto;
    background-position: 74% center;
    position: relative;
  }
  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 45%, rgba(0,0,0,0.05) 100%);
    z-index: 1;
    pointer-events: none;
  }
  .hero-left {
    padding: 40px 24px 32px;
    position: relative;
    z-index: 2;
  }
  .hero-right {
    width: 100%;
    height: 320px;
    position: relative;
    z-index: 2;
  }
  .hero-tag {
    bottom: 20px; left: 24px; right: 24px;
  }
  section { padding: 56px 24px; }
  .page-header, .dco-page { padding-top: 120px; }
  .stats-bar { padding: 24px; flex-wrap: wrap; gap: 20px; }
  .stat-item { flex: 1 1 40%; border-right: none; text-align: left; padding: 0; }
  .hub-grid { grid-template-columns: 1fr; }
  .work-item { flex-wrap: wrap; gap: 12px; }
  .work-date { width: 100%; }
  footer.site-footer { padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero { background-position: 78% center; }
  .hero-right { height: 280px; }
  .hero-title { font-size: clamp(38px, 11vw, 52px); }
}