@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/*
 * Accessibility Note: Card hover effects have been removed to prevent misleading
 * visual feedback. Only actual links now have hover effects and visual indicators
 * (arrow →) to clearly show which elements are clickable.
 */

:root {
  --brand-green: #0B7D5B;
  --brand-green-dark: #094C3B;
  --brand-green-light: #10B981;
  --brand-green-lighter: #34D399;
  --brand-amber: #F2B705;
  --brand-brick: #C24C33;
  --brand-teal: #14b8a6;
  --brand-teal-dark: #134e4a;
  --brand-blue: #3b82f6;
  --brand-blue-dark: #1e3a8a;
  --brand-purple: #a855f7;
  --brand-purple-dark: #581c87;
  --brand-orange: #f97316;
  --brand-orange-dark: #7c2d12;
  --ink: #1F2937;
  --slate: #475569;
  --mist: #E5E7EB;
  --chalk: #F8FAFC;
  --radius: 12px;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin: 0;
  padding: 0;
  background: var(--chalk);
  color: var(--ink);
  font-display: swap;
  line-height: 1.6;
}

.content article {
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.container {
  max-width: 720px;
  margin: auto;
  padding: 2rem;
}

.hero {
  text-align: center;
  padding: 3rem 0 1.5rem;
  position: relative;
  overflow: hidden;
}



.profile-img-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.profile-img-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, var(--brand-green) 0%, transparent 70%);
  opacity: 0.2;
  z-index: -1;
  border-radius: 50%;
}

.profile-img {
  width: 180px;
  height: 180px;
  border-radius: 90px;
  object-fit: cover;
  background-color: var(--mist);
  border: 4px solid white;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
  position: relative;
  z-index: 1;
}



.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-lighter) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 1.25rem;
  margin: 0 0 2rem;
  font-weight: 500;
}

.button-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.button-secondary {
  background: white !important;
  color: var(--brand-green) !important;
  border: 2px solid var(--brand-green);
}

.button-secondary:hover {
  background: var(--brand-green) !important;
  color: white !important;
}

.ward-coverage {
  text-align: center;
  margin-bottom: 2rem;
}

.ward-coverage p {
  font-size: 0.875rem;
  margin: 0;
}

.ward-coverage a {
  color: var(--brand-green);
  text-decoration: none;
  font-weight: 500;
}

.ward-coverage a:hover {
  text-decoration: underline;
}

/* Journey Navigator */
.journey-navigator {
  padding: 2rem 0;
}

.journey-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.journey-header h2 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--brand-green);
}

.journey-header p {
  font-size: 1.125rem;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}



.journey-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .journey-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 100%;
  }
  
  .journey-card {
    padding: 1.25rem;
  }
}

.journey-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  background: white;
  height: 100%;
  cursor: pointer;
  box-sizing: border-box;
}

.journey-card .card-content {
  /* Remove flex: 1 to prevent excessive spacing */
}

.work-area-card .card-content,
.community-card .card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1.5rem; /* Ensure content doesn't overlap with absolutely positioned button */
}

.journey-card .card-actions {
  margin-top: auto;
  text-align: right;
  padding-top: 0.5rem;
  /* Position buttons in bottom right */
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

/* Journey card button styling is handled by the container class when used as containers */

/* Get Involved button styling for content sections */
.content-section .card-actions {
  text-align: right;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Reduce spacing between text and Get Involved button */
.content-section p:last-of-type {
  margin-bottom: 0.5rem;
}

.journey-card {
  /* Enable absolute positioning for buttons and arrow */
  position: relative;
}

.journey-card:hover {
  border-color: var(--brand-green);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  background: var(--chalk);
}

.journey-card::after {
  content: '→';
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brand-green);
  opacity: 0;
  transition: var(--transition);
  transform: translateX(-10px);
}

.journey-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.journey-card h3 {
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--brand-green);
}

/* Journey card links are handled by the container class when used as containers */

.journey-card p {
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

/* Work area and community cards used as containers (e.g., on work ahead and communities pages) */
.work-area-card, .community-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  background: white;
  height: 100%;
  /* No cursor pointer or hover effects to avoid misleading visual feedback */
  cursor: default;
  box-sizing: border-box;
  /* Enable absolute positioning for buttons */
  position: relative;
}

.work-area-card h3,
.community-card h3 {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.work-area-card .card-content p,
.community-card .card-content p {
  margin: 0;
  line-height: 1.4;
}

.work-area-card h3 a, .community-card h3 a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
  /* Add visual indicators to show this is clickable */
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  /* Add subtle visual cue that this is clickable */
  position: relative;
}

.work-area-card h3 a::after, .community-card h3 a::after {
  content: ' →';
  opacity: 0;
  transition: var(--transition);
  color: var(--brand-green);
  font-weight: 600;
  position: absolute;
  left: 100%;
  margin-left: 0.25rem;
}

.work-area-card h3 a:hover, .community-card h3 a:hover {
  color: var(--brand-green-dark);
  border-bottom-color: var(--brand-green-dark);
}

.work-area-card h3 a:hover::after, .community-card h3 a:hover::after {
  opacity: 1;
}

.work-area-card .card-actions, .community-card .card-actions {
  /* Position buttons in bottom right */
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.work-area-card .card-actions .button, .community-card .card-actions .button {
  /* Ensure buttons maintain their interactive styling */
  cursor: pointer;
  transition: var(--transition);
}

.work-area-card .card-actions .button:hover, .community-card .card-actions .button:hover {
  /* Maintain button hover effects */
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}



/* Update Highlight */
.update-highlight {
  padding: 2.5rem 0;
}

.update-highlight h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-align: center;
}

.update-card {
  max-width: 600px;
  margin: 0 auto;
  padding: 1.25rem;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  background: white;
}

.update-card h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--brand-green);
}

.update-summary {
  font-size: 0.875rem;
  color: var(--slate);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.update-date {
  font-size: 0.75rem;
  color: var(--slate);
  margin-bottom: 0.75rem;
}

.update-link {
  color: var(--brand-green);
  text-decoration: underline;
  font-size: 0.875rem;
  font-weight: 500;
}

.update-note {
  font-size: 0.75rem;
  color: var(--slate);
  margin-top: 0.5rem;
}

.update-card-next {
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
  opacity: 0.8;
  max-height: 50px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
}

.update-card-next::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0), var(--chalk) 100%);
  pointer-events: none;
}

.update-card-next:hover {
  transform: none;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
}

.update-card-next .update-link {
  opacity: 0.6;
}

.update-continues {
  font-size: 0.875rem;
  color: var(--slate);
  font-style: italic;
  margin: 0.5rem 0;
  opacity: 0.8;
}

.update-actions {
  text-align: center;
  margin-top: 1.5rem;
}

.button-outline {
  background: transparent;
  border: 1px solid var(--brand-green);
  color: var(--brand-green);
}

.button-outline:hover {
  background: var(--brand-green);
  color: white;
}

/* Quick Actions */
.quick-actions {
  width: 100%;
  padding: 1.5rem 0;
  background: var(--mist);
}

.quick-actions-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

@media (min-width: 640px) {
  .quick-actions-container {
    flex-direction: row;
    justify-content: center;
  }
}

.quick-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--slate);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  background: white;
  transition: var(--transition);
}

.quick-action-button:hover {
  background: var(--brand-green);
  color: white;
  border-color: var(--brand-green);
}

/* Endorsement */
.endorsement {
  padding: 2rem 0;
}

.endorsement-card {
  max-width: 600px;
  margin: 0 auto;
  padding: 1.5rem;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  background: white;
}

.endorsement-quote {
  font-size: 1rem;
  margin: 0;
  font-style: italic;
  color: var(--ink);
}

.endorsement-cite {
  font-size: 0.875rem;
  color: var(--slate);
  margin-top: 0.5rem;
  text-align: right;
}

.button {
  display: inline-block;
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.button:hover::before {
  left: 100%;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.button:active {
  transform: translateY(0);
}

.button.outline {
  background: transparent;
  color: var(--brand-green);
  border: 2px solid var(--brand-green);
  box-shadow: none;
}

.button.outline:hover {
  background: var(--brand-green);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.button.outline:hover::before {
  display: none;
}

/* Enhanced content sections */
.content-section {
  background: white;
  border-radius: var(--radius);
  padding: 1rem 2rem 2rem;
  margin: 2rem 0;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--mist);
}

/* Reduce bottom margin when content-section is followed by priority sections */
.content-section.priorities-content {
  margin-bottom: 0;
}

.content-section:hover {
  box-shadow: var(--shadow-lg);
}

.content-section h2 {
  color: var(--brand-green);
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

/* Account for sticky header when scrolling to anchor links */
.content-section h2[id] {
  scroll-margin-top: 100px;
}

.content-section p {
  margin-bottom: 1.5rem;
}

/* Enhanced navigation */
nav {
  text-align: center;
  margin-bottom: 2rem;
}

/* Journey navigation override - remove bottom margin when used at bottom of content */
nav.journey {
  margin-bottom: 0;
}

nav a {
  margin: 0 0.75rem;
  text-decoration: none;
  color: var(--brand-green);
  font-weight: 600;
  transition: var(--transition);
  position: relative;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand-green);
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

nav a:hover {
  color: var(--brand-green-dark);
}

nav a:focus-visible {
  outline: 3px solid var(--brand-green-light);
  outline-offset: 2px;
}

/* Enhanced footer */
footer {
  text-align: center;
  margin-top: 4rem;
  padding-top: 2rem;
  padding-bottom: 3rem; /* Space for fixed FAB and back-to-top buttons */
  border-top: 1px solid var(--mist);
  font-size: 0.9rem;
  color: var(--slate);
}

/* Enhanced sections */
section {
  margin-top: 3rem;
}

section h2 {
  color: var(--brand-green);
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Enhanced contact card */
.contact-card {
  border: 1px solid var(--mist);
  padding: 1.5rem;
  border-radius: var(--radius);
  margin: 1.5rem 0;
  background: white;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.contact-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Enhanced badges - base class for status tags */
.badge {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  min-height: 1.2em;
  box-sizing: border-box;
  font-weight: 500;
  transition: var(--transition);
}

.badge:hover {
  transform: scale(1.05);
}

/* Note: Status-specific styling uses .status-tag--* classes (see below) */

/* Enhanced imprint */
.imprint {
  font-size: 0.9rem;
  color: var(--slate);
  margin-top: 0.5rem;
  padding: 1rem;
  background: var(--mist);
  border-radius: var(--radius);
  text-align: center;
}

/* Enhanced brand elements */
.brand-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  transition: var(--transition);
}

.brand-link:hover {
  transform: translateY(-1px);
}

.brand-avatar {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  object-fit: cover;
  background-color: var(--mist);
  transition: var(--transition);
}

.brand-link:hover .brand-avatar {
  transform: scale(1.05);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  max-width: 200px;
  word-wrap: break-word;
}

.brand-name {
  font-weight: 700;
  font-size: 1.125rem;
  color: #111;
}

.brand-tagline {
  font-size: .95rem;
  color: var(--slate);
  hyphens: none;
}

/* Enhanced top navigation */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px solid #eee;
  min-height: 80px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 101;
  position: relative;
  align-self: center;
  flex-shrink: 0;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background: var(--brand-green);
  border-radius: 2px;
  transition: var(--transition);
  transform-origin: center;
}

/* Mobile menu toggle animation */
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.nav-right {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.topnav .nav-links {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.topnav .nav-links a {
  text-decoration: none;
  color: var(--brand-green);
  font-weight: 600;
  transition: var(--transition);
  position: relative;
  white-space: nowrap;
  font-size: 0.95rem;
}

.topnav .nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand-green);
  transition: width 0.3s ease;
}

.topnav .nav-links a:hover::after {
  width: 100%;
}

.topnav .nav-links a:hover {
  color: var(--brand-green-dark);
}

.topnav .nav-links a:focus-visible {
  outline: 3px solid var(--brand-green-light);
  outline-offset: 2px;
}

.topnav--home {
  justify-content: center;
}

.topnav--home .nav-right {
  align-items: center;
}

.nav-cta {
  display: flex;
  justify-content: center;
  width: 100%;
}

.nav-button {
  padding: .3rem .8rem;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.nav-button:hover {
  transform: translateY(-1px);
}

.nav-button-spacer {
  height: 2rem;
  width: 106px; /* Approximate width of "Get involved" button */
  display: inline-block;
}

/* Enhanced article cards */
article {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--mist);
}

article:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

article h3 {
  margin-top: 0;
  color: var(--brand-green);
}

article h3 a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

article h3 a:hover {
  color: var(--brand-green-dark);
}

/* Progress indicators */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--mist);
  border-radius: 4px;
  overflow: hidden;
  margin: 1rem 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-green-lighter));
  border-radius: 4px;
  transition: width 1s ease-in-out;
}

/* Progress indicator component */
.progress-indicator {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--mist);
}

.progress-indicator:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.progress-header h3 {
  margin: 0;
  color: var(--brand-green);
  font-size: 1.25rem;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-planning {
  background: color-mix(in srgb, #3B82F6 12%, white);
  color: #1E40AF;
}

.status-active {
  background: color-mix(in srgb, var(--brand-green) 12%, white);
  color: var(--brand-green-dark);
}

.status-ongoing {
  background: color-mix(in srgb, var(--slate) 8%, white);
  color: var(--slate);
}

.status-delivered {
  background: color-mix(in srgb, var(--brand-green) 12%, white);
  color: var(--brand-green);
}

.status-on-hold {
  background: color-mix(in srgb, var(--brand-amber) 15%, white);
  color: #92400E;
}

.next-milestone {
  color: var(--brand-green-lighter);
  font-weight: 500;
  margin: 1rem 0;
}

.progress-text {
  color: var(--slate);
  font-weight: 500;
  margin: 0.5rem 0;
}

.last-updated {
  color: var(--slate);
  margin: 1rem 0 0;
  font-style: italic;
}

/* Enhanced mobile responsiveness */
@media (max-width:900px) {
  .brand-text {
    max-width: 160px;
  }
}

@media (max-width:768px) {
  .brand-text {
    max-width: 180px;
  }

  .brand-tagline {
    font-size: .9rem;
  }

  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: flex;
  }

  /* Hide regular navigation on mobile */
  .nav-right {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #eee;
    box-shadow: var(--shadow);
    padding: 1rem;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  /* Show mobile menu when expanded */
  .nav-right.mobile-open {
    display: flex;
  }

  /* Mobile menu navigation styles */
  .nav-right .nav-links {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    text-align: center;
  }

  .nav-right .nav-links a {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    transition: var(--transition);
  }

  .nav-right .nav-links a:hover {
    background: var(--mist);
  }

  .nav-right .nav-cta {
    width: 100%;
    justify-content: center;
  }

  .nav-right .nav-button {
    width: 100%;
    max-width: 200px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  .topnav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    padding: 0.5rem 1rem;
  }

  /* Ensure brand link doesn't take up too much space */
  .brand-link {
    flex-shrink: 0;
    max-width: 60%;
  }

  /* Position mobile menu toggle properly */
  .mobile-menu-toggle {
    flex-shrink: 0;
    margin-left: auto;
    position: relative;
    right: 0;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1.1rem;
  }

  .profile-img {
    width: 120px;
    height: 120px;
    border-radius: 60px;
  }
}

@media (max-width:600px) {
  .brand-text {
    max-width: 140px;
  }

  .brand-tagline {
    font-size: .85rem;
  }

  .container {
    padding: 1rem;
  }

  .content-section {
    padding: 1.5rem;
    /* Keep all other card styles from the main rule */
    background: white;
    border-radius: var(--radius);
    margin: 2rem 0;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--mist);
  }

  /* Additional mobile navigation adjustments */
  .topnav {
    padding: 0.5rem 0.75rem;
  }

  .brand-link {
    max-width: 65%;
  }

  .brand-text {
    max-width: 140px;
  }
}

@media (max-width:480px) {
  .brand-text {
    max-width: 120px;
  }

  .brand-tagline {
    font-size: .8rem;
  }

  .brand-avatar {
    width: 48px;
    height: 48px;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .hero p {
    font-size: 1rem;
  }

  /* Very small screen navigation adjustments */
  .topnav {
    padding: 0.5rem 0.5rem;
    min-height: 70px;
  }

  .brand-link {
    max-width: 70%;
  }

  .brand-text {
    max-width: 120px;
  }

  .mobile-menu-toggle {
    width: 28px;
    height: 28px;
  }

  .hamburger-line {
    height: 2.5px;
  }
}

@media (min-width:901px) {
  .brand-text {
    max-width: 240px;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus styles for accessibility */
*:focus-visible {
  outline: 2px solid var(--brand-green-light);
  outline-offset: 2px;
}

/* Loading animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation only when content is ready to prevent flickering */
.content-section, article, .contact-card {
  /* Start with opacity 1 to prevent flickering */
  opacity: 1;
  transform: translateY(0);
  /* Only animate if user prefers reduced motion */
  animation: none;
}

/* Apply animation only when user prefers reduced motion is false */
@media (prefers-reduced-motion: no-preference) {
  .content-section, article, .contact-card {
    animation: fadeInUp 0.4s ease-out;
  }
}

/* Enhanced button group */
.button-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.5rem 0;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  background: var(--brand-green);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  z-index: 1000;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Timeline component */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--brand-green), var(--brand-green-lighter));
}

.timeline-item {
  position: relative;
  margin-bottom: 2rem;
}

.timeline-marker {
  position: absolute;
  left: -1.5rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  background: var(--brand-green);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.timeline-item:hover .timeline-marker {
  transform: scale(1.2);
  background: var(--brand-green-lighter);
}

.timeline-content {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  /* Remove box-shadow and hover effects to avoid making entire content appear clickable */
  border: 1px solid var(--mist);
  /* Ensure cursor doesn't suggest entire content is clickable */
  cursor: default;
}

.timeline-date {
  color: var(--brand-green-dark);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.timeline-title {
  color: var(--brand-green);
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.timeline-title a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

.timeline-title a:hover,
.timeline-title a:focus {
  color: var(--brand-green-dark);
  text-decoration: underline;
}

.timeline-tags {
  margin-bottom: 1rem;
}

.tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: color-mix(in srgb, var(--brand-green) 10%, white);
  color: var(--brand-green);
  border-radius: 9999px;
  font-size: 0.8rem;
  margin-right: 0;
  margin-bottom: 0;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.4;
}

/* Tags outside taxonomy-group still need spacing */
:not(.taxonomy-group) > .tag {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Clickable tag links */
a.tag {
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
}

a.tag:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

a.tag:active {
  transform: translateY(0);
}

.timeline-summary {
  color: var(--slate);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.timeline-link {
  color: var(--brand-green);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
  /* Add visual indicators to show this is clickable */
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  /* Add subtle visual cue that this is clickable */
  position: relative;
}

.timeline-link::after {
  content: ' →';
  opacity: 0;
  transition: var(--transition);
  color: var(--brand-green);
  font-weight: 600;
}

.timeline-link:hover {
  color: var(--brand-green-dark);
  border-bottom-color: var(--brand-green-dark);
}

.timeline-link:hover::after {
  opacity: 1;
}

/* Page header */
.page-header {
  text-align: center;
  padding: 3rem 0 2rem;
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem;
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-lighter) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-header p {
  font-size: 1.25rem;
  color: var(--slate);
  margin: 0;
  font-weight: 500;
  max-width: 600px;
  margin: 0 auto;
}

/* Priorities grid */
.priorities-grid {
  display: grid;
  gap: 2rem;
  margin: 2rem 0;
}

@media (min-width: 768px) {
  .priorities-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
}

.priority-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--mist);
  overflow: hidden;
}

.priority-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.priority-actions {
  padding: 1rem 1.5rem 1.5rem;
  text-align: center;
}

/* Floating action button speed dial */
.fab-speed-dial {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
}

/* Main FAB button */
.fab-main {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-lighter));
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
  z-index: 1002;
  position: relative;
  color: white;
}

.fab-speed-dial:not(.fab-expanded) .fab-main:hover {
  transform: scale(1.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.fab-main:focus-visible {
  outline: 2px solid var(--brand-green-light);
  outline-offset: 2px;
}

/* Megaphone icon - SVG */
.fab-icon {
  width: 30px;
  height: 30px;
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 640 640' fill='white'%3E%3Cpath d='M525.2 82.9C536.7 88 544 99.4 544 112L544 528C544 540.6 536.7 552 525.2 557.1C513.7 562.2 500.4 560.3 490.9 552L444.3 511.3C400.7 473.2 345.6 451 287.9 448.3L287.9 544C287.9 561.7 273.6 576 255.9 576L223.9 576C206.2 576 191.9 561.7 191.9 544L191.9 448C121.3 448 64 390.7 64 320C64 249.3 121.3 192 192 192L276.5 192C338.3 191.8 397.9 169.3 444.4 128.7L491 88C500.4 79.7 513.9 77.8 525.3 82.9zM288 384L288 384.2C358.3 386.9 425.8 412.7 480 457.6L480 182.3C425.8 227.2 358.3 253 288 255.7L288 384z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: var(--transition);
}

/* Rotate to X when expanded */
.fab-speed-dial.fab-expanded .fab-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath stroke='white' stroke-width='3' stroke-linecap='round' d='M5 5l14 14M19 5l-14 14'/%3E%3C/svg%3E");
}

/* Action menu container */
.fab-menu {
  position: absolute;
  bottom: 70px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: var(--transition);
  z-index: 1001;
  pointer-events: none;
}

.fab-speed-dial.fab-expanded .fab-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Action items */
.fab-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  min-width: 60px;
  min-height: 60px;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  color: var(--ink);
  transition: var(--transition);
  opacity: 0;
  transform: translateY(10px);
}

.fab-speed-dial.fab-expanded .fab-action {
  opacity: 1;
  transform: translateY(0);
}

.fab-action:nth-child(1) {
  transition-delay: 0.1s;
}

.fab-action:nth-child(2) {
  transition-delay: 0.2s;
}

.fab-action:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-lg);
  background: var(--mist);
}

.fab-action:focus-visible {
  outline: 2px solid var(--brand-green-light);
  outline-offset: 2px;
}

.fab-action-label {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.fab-action-icon {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Get Involved icon (handshake/people) - SVG */
.fab-action[href="/get-involved/"] .fab-action-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230B7D5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.fab-action[href="/get-involved/"] .fab-action-icon::before,
.fab-action[href="/get-involved/"] .fab-action-icon::after {
  display: none;
}

/* Contact icon (envelope) - SVG */
.fab-action[href="/contact/"] .fab-action-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230B7D5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.fab-action[href="/contact/"] .fab-action-icon::before,
.fab-action[href="/contact/"] .fab-action-icon::after {
  display: none;
}

/* Backdrop */
.fab-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 999;
  pointer-events: none;
}

.fab-speed-dial.fab-expanded .fab-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .fab-action {
    min-width: 56px;
    min-height: 56px;
    padding: 0.625rem;
  }
  
  .fab-action-label {
    font-size: 0.7rem;
  }
}

/* Enhanced navigation animations */
/* Removed conflicting .nav-links a rules that were preventing underline effect */

/* Enhanced button animations */
.button {
  position: relative;
  overflow: hidden;
}

.button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.button:hover::after {
  width: 300px;
  height: 300px;
}

/* Enhanced card interactions */
.content-section, .priority-card, .timeline-content {
  position: relative;
  overflow: hidden;
}



/* Enhanced mobile menu */
@media (max-width: 768px) {
  .nav-links {
    position: relative;
    gap: .25rem;
  }
  
  .nav-links a {
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
    transition: var(--transition);
    font-size: 0.9rem;
  }
  
  .nav-links a:hover {
    background: color-mix(in srgb, var(--brand-green) 10%, white);
    transform: translateX(4px);
  }
}

/* Medium screen adjustments for navigation */
@media (max-width: 1024px) and (min-width: 769px) {
  .topnav .nav-links {
    gap: .4rem;
  }
  
  .topnav .nav-links a {
    font-size: 0.9rem;
  }
}

/* Large screen optimizations */
@media (min-width: 1025px) {
  .topnav .nav-links {
    gap: .6rem;
  }
  
  .topnav .nav-links a {
    font-size: 1rem;
  }
}

/* Page layout consistency */
main {
  min-height: calc(100vh - 200px); /* Ensure minimum content height */
}

/* Ensure consistent page structure */
.content {
  min-height: 400px; /* Minimum height for content areas */
}

/* Fix for pages with minimal content */
.content-section:last-child {
  margin-bottom: 2rem;
}

/* Work items within content sections */
.work-item {
  background: var(--mist);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-left: 4px solid var(--brand-green);
  border: 1px solid var(--mist);
  /* Remove transition and hover effects to avoid misleading visual feedback */
  /* Ensure cursor doesn't suggest entire card is clickable */
  cursor: default;
}

.work-item h3 {
  margin: 0 0 0.5rem 0;
  color: var(--brand-green);
}

.work-item h3 a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
  /* Add visual indicators to show this is clickable */
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  /* Add subtle visual cue that this is clickable */
  position: relative;
}

.work-item h3 a::after {
  content: ' →';
  opacity: 0;
  transition: var(--transition);
  color: var(--brand-green);
  font-weight: 600;
}

.work-item h3 a:hover {
  color: var(--brand-green-dark);
  border-bottom-color: var(--brand-green-dark);
}

.work-item h3 a:hover::after {
  opacity: 1;
}

.work-item p {
  margin: 0.5rem 0 0 0;
}

/* Connected Content Styles */
.cards {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.card {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
  /* Remove box-shadow and hover effects to avoid making entire card appear clickable */
  border: 1px solid var(--mist);
  /* Ensure cursor doesn't suggest entire card is clickable */
  cursor: default;
}

.card h3 {
  margin: 0 0 0.5rem;
}

.card h3 a {
  color: var(--brand-green);
  text-decoration: none;
  /* Add visual indicators to show this is clickable */
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: var(--transition);
  /* Add subtle visual cue that this is clickable */
  position: relative;
}

.card h3 a::after {
  content: ' →';
  opacity: 0;
  transition: var(--transition);
  color: var(--brand-green);
  font-weight: 600;
}

.card h3 a:hover {
  color: var(--brand-green-dark);
  border-bottom-color: var(--brand-green-dark);
}

.card h3 a:hover::after {
  opacity: 1;
}

.chip {
  display: inline-block;
  background: var(--brand-green-light);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0.25rem 0.5rem 0.25rem 0;
}

.updates {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.update {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
  /* Remove box-shadow to avoid making entire card appear clickable */
  border: 1px solid var(--mist);
  border-left: 4px solid var(--brand-green);
  /* Ensure cursor doesn't suggest entire card is clickable */
  cursor: default;
}

.update a {
  color: var(--brand-green);
  text-decoration: none;
  font-weight: 600;
  /* Add visual indicators to show this is clickable */
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: var(--transition);
  /* Add subtle visual cue that this is clickable */
  position: relative;
}

.update a::after {
  content: ' →';
  opacity: 0;
  transition: var(--transition);
  color: var(--brand-green);
  font-weight: 600;
}

.update a:hover {
  color: var(--brand-green-dark);
  border-bottom-color: var(--brand-green-dark);
}

.update a:hover::after {
  opacity: 1;
}

.update .meta {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--slate);
}

.update .meta em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}

/* General markdown content link styling */
/* Style links in content sections and prose - component-specific styles will override via higher specificity */
.content-section a:not(.button):not(.tag):not(.timeline-link):not(.update-link),
.prose a:not(.button):not(.tag):not(.timeline-link):not(.update-link),
article p a:not(.button):not(.tag):not(.timeline-link):not(.update-link),
article li a:not(.button):not(.tag):not(.timeline-link):not(.update-link) {
  color: var(--brand-green);
  text-decoration: underline;
  text-decoration-color: var(--brand-green);
  text-underline-offset: 2px;
  font-weight: 500;
  transition: var(--transition);
}

.content-section a:not(.button):not(.tag):not(.timeline-link):not(.update-link):hover,
.prose a:not(.button):not(.tag):not(.timeline-link):not(.update-link):hover,
article p a:not(.button):not(.tag):not(.timeline-link):not(.update-link):hover,
article li a:not(.button):not(.tag):not(.timeline-link):not(.update-link):hover {
  color: var(--brand-green-dark);
  text-decoration-color: var(--brand-green-dark);
}

.content-section a:not(.button):not(.tag):not(.timeline-link):not(.update-link):focus-visible,
.prose a:not(.button):not(.tag):not(.timeline-link):not(.update-link):focus-visible,
article p a:not(.button):not(.tag):not(.timeline-link):not(.update-link):focus-visible,
article li a:not(.button):not(.tag):not(.timeline-link):not(.update-link):focus-visible {
  outline: 3px solid var(--brand-green-light);
  outline-offset: 2px;
  border-radius: 2px;
}

.filter-section {
  margin-bottom: 2rem;
}

.filter-container {
  margin: 1rem 0 0 0;
  padding: 0;
}

.filter {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 0;
  box-shadow: var(--shadow);
  border: 1px solid var(--mist);
}

.filter label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 500;
}

.filter input {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  font-size: 1rem;
  margin-top: 0.25rem;
  background: white;
}

.filter select {
  display: block;
  width: 100%;
  padding: 0.75rem;
  padding-right: 2.5rem;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  font-size: 1rem;
  margin-top: 0.25rem;
  background: white;
  cursor: pointer;
  transition: var(--transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.filter select:hover {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 10%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230B7D5B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.filter select:focus {
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 20%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230B7D5B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.filter-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  align-items: center;
}

.filter-buttons .button,
.filter-buttons button,
.filter-buttons a.button {
  margin: 0 !important;
  margin-right: 0 !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  height: 44px !important;
  min-height: 44px !important;
  min-width: 100px !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-align: center !important;
  text-decoration: none !important;
  line-height: 1 !important;
  border: 2px solid transparent !important;
  border-radius: var(--radius) !important;
}

.filter-buttons .button:not(.outline),
.filter-buttons button:not(.outline) {
  background: var(--brand-green) !important;
  color: white !important;
  border: 2px solid transparent !important;
}

.filter-buttons .button.outline,
.filter-buttons a.button.outline {
  background: transparent !important;
  color: var(--brand-green) !important;
  border: 2px solid var(--brand-green) !important;
}

.filter button {
  background: var(--brand-green);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-right: 1rem;
  transition: var(--transition);
}

.filter button:hover {
  background: var(--brand-green-dark);
}

.timeline-taxonomies {
  margin-bottom: 1rem;
}

.taxonomy-group {
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.taxonomy-group em {
  font-style: normal;
  font-weight: 500;
  color: var(--slate);
  margin-right: 0;
}

.community-tag {
  background: color-mix(in srgb, var(--brand-green) 12%, white);
  color: var(--brand-green-dark);
}

.work-area-tag {
  background: color-mix(in srgb, var(--brand-amber) 15%, white);
  color: var(--ink);
}

/* Status tags - using only existing theme colors for accessible combinations */
.status-tag--planning {
  /* Using brick for planning (attention-getting, preparatory) - all theme colors */
  background: color-mix(in srgb, var(--brand-brick) 12%, white);
  color: var(--ink); /* Dark ink on light brick - accessible, high contrast, distinctive */
}

.status-tag--active {
  background: color-mix(in srgb, var(--brand-green-light) 12%, white);
  color: var(--brand-green-dark); /* Lighter green background distinguishes from Delivered */
}

.status-tag--ongoing {
  background: color-mix(in srgb, var(--slate) 8%, white);
  color: var(--ink); /* Dark ink on light slate - accessible, high contrast */
}

.status-tag--delivered {
  background: color-mix(in srgb, var(--brand-green) 12%, white);
  color: var(--brand-green-dark); /* Standard green background - darker than Active */
}

.status-tag--on-hold {
  background: color-mix(in srgb, var(--brand-amber) 15%, white);
  color: var(--ink); /* Dark ink on light amber - accessible, high contrast */
}

/* Priority tags - distinct colors for each priority */
.priority-tag {
  /* Inherits font-size, padding, border-radius, font-weight from .tag */
  transition: var(--transition);
}

/* Priority tags - distinct colors for each priority */
/* Accessibility: All combinations tested for WCAG AA compliance (4.5:1 contrast ratio) */
.priority-tag--better-roads {
  background: color-mix(in srgb, var(--brand-blue) 12%, white); /* Blue tint - approx #E8EFFB */
  color: var(--brand-blue-dark); /* Darker blue for better contrast - 4.5:1+ */
}

.priority-tag--green-spaces {
  background: color-mix(in srgb, var(--brand-teal) 12%, white); /* Teal tint - distinct from community tags, nature-themed */
  color: var(--brand-teal-dark); /* Darker teal for better contrast - 4.5:1+ */
}

.priority-tag--sustainable-development {
  background: color-mix(in srgb, var(--brand-amber) 15%, white); /* Amber tint - matches status tags */
  color: var(--ink); /* #1F2937 - tested accessible, matches status-tag--on-hold */
}

.priority-tag--community-wellbeing {
  background: color-mix(in srgb, var(--brand-purple) 12%, white); /* Purple tint - approx #F3EBFC */
  color: var(--brand-purple-dark); /* Darker purple for better contrast - 4.5:1+ */
}

.priority-tag--housing {
  background: color-mix(in srgb, var(--brand-orange) 12%, white); /* Orange tint - approx #FDF3EB */
  color: var(--brand-orange-dark); /* Darker orange for better contrast - 4.5:1+ */
}

a.priority-tag:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

a.priority-tag:active {
  transform: translateY(0);
}

/* Filter section styles */
.filter-section {
  margin: 2rem 0;
}

.filter-container {
  margin-top: 1rem;
  padding: 0;
  background: transparent;
  border-radius: var(--radius);
}

.filter-container .filter {
  background: white;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.filter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.filter label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-weight: 500;
}

.filter select {
  padding: 0.5rem;
  padding-right: 2.5rem;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  font-size: 1rem;
  background: white;
  cursor: pointer;
  transition: var(--transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.filter select:hover {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 10%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230B7D5B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.filter select:focus {
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-green) 20%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230B7D5B' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.filter-buttons {
  display: flex;
  gap: 0.5rem;
}

.filter-state-indicator {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--brand-green) 10%, white);
  border-left: 3px solid var(--brand-green);
  border-radius: var(--radius);
}

.filter-state-indicator p {
  margin: 0;
}

.filter-state-indicator a {
  color: var(--brand-green-dark);
  text-decoration: underline;
}

.filter-empty-message {
  text-align: center;
  padding: 2rem;
  color: var(--slate);
  font-style: italic;
}

/* Status legend for The Work Ahead page */
.status-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.status-legend-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.status-legend-item .tag {
  align-self: flex-start;
}

.status-legend-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.5;
}

/* Status explanation card - wide card for individual status sections */
.status-explanation-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--brand-green);
}

.status-explanation-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.status-explanation-content .tag {
  flex-shrink: 0;
}

.status-explanation-content p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  flex: 1;
  min-width: 200px;
}

/* Work Areas heading - matches content-section h2 styling */
.work-areas-heading {
  color: var(--brand-green);
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  scroll-margin-top: 100px; /* Account for sticky header when scrolling */
}

/* Ensure all priority sections get consistent larger top margin */
.priority-work-areas {
  margin-top: 3rem;
}

/* Add extra spacing for priority sections that come after another priority section 
   to account for cards/grid content above */
.priority-work-areas + .priority-work-areas {
  margin-top: 4rem;
}

/* Add spacing between status sections */
.work-areas-heading:not(:first-of-type) {
  margin-top: 3rem;
  padding-top: 1rem;
}

/* Parish Council Info Box */
.parish-council-info {
  background: white;
  border: 1px solid var(--mist);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.parish-council-info:hover {
  box-shadow: var(--shadow-lg);
  border-left-color: var(--brand-green-dark);
}

.parish-council-info h3 {
  color: var(--brand-green);
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.parish-council-info p {
  margin: 0 0 1rem;
  line-height: 1.6;
}

.parish-council-info .button {
  margin-top: 0;
}

/* FAQ page styling - indent answers below question headings */
.faq-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  margin-left: 0;
  font-size: 1.25rem;
  color: var(--brand-green);
}

.faq-content h2:first-child {
  margin-top: 0;
}

/* Indent all paragraphs and lists by default (they're answers) */
.faq-content p,
.faq-content ul {
  margin-left: 2rem;
}

/* Reset indentation for paragraphs that directly follow headings (they'll be handled above) */
.faq-content h2 + p {
  margin-left: 2rem;
  margin-top: 0;
}

/* Indent lists that follow headings */
.faq-content h2 + ul {
  margin-left: 2rem;
  padding-left: 1.5rem;
  margin-top: 0;
}

/* Ensure proper list styling */
.faq-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Priorities page styling - indent text under priority headings */
.priorities-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  margin-left: 0;
  font-size: 1.25rem;
  color: var(--brand-green);
}

.priorities-content h2:first-child {
  margin-top: 0;
}

/* Only indent paragraphs and lists that come after an H2 heading */
.priorities-content h2 ~ p,
.priorities-content h2 ~ ul {
  margin-left: 2rem;
}

/* Reset indentation for paragraphs in the conclusion section */
.priorities-content .priorities-conclusion {
  margin-top: 2rem;
  padding-top: 0;
}

.priorities-content .priorities-conclusion p {
  margin-left: 0;
}

/* Ensure conclusion starts with normal paragraph spacing */
.priorities-content .priorities-conclusion p:first-child {
  margin-top: 0;
}

/* Indent paragraphs that directly follow headings */
.priorities-content h2 + p {
  margin-left: 2rem;
  margin-top: 0;
}

/* Indent lists that follow headings */
.priorities-content h2 + ul {
  margin-left: 2rem;
  padding-left: 1.5rem;
  margin-top: 0;
}

/* Ensure proper list styling for lists after headings */
.priorities-content h2 ~ ul {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Contact Form Styles */
.contact-form-section {
  margin: 2rem 0;
  width: 100%;
  box-sizing: border-box;
  scroll-margin-top: 100px; /* Account for sticky header when scrolling */
}

.contact-form-section h2 {
  color: var(--brand-green);
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: left;
}

#contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field label {
  font-weight: 500;
  color: var(--ink);
  font-size: 0.9375rem;
}

.form-field label span[aria-label="required"] {
  color: var(--brand-brick);
  margin-left: 0.25rem;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--mist);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: white;
  transition: var(--transition);
  box-sizing: border-box;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(11, 125, 91, 0.1);
}

.form-field input.error,
.form-field textarea.error,
.form-field select.error {
  border-color: var(--brand-brick);
}

.form-field input.error:focus,
.form-field textarea.error:focus,
.form-field select.error:focus {
  border-color: var(--brand-brick);
  box-shadow: 0 0 0 3px rgba(194, 76, 51, 0.1);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
  line-height: 1.6;
}

.form-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231F2937' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

.field-error {
  color: var(--brand-brick);
  font-size: 0.875rem;
  margin-top: -0.25rem;
  display: block;
}

.field-error[hidden] {
  display: none;
}

.form-error-summary {
  background: #fef2f2;
  border: 2px solid var(--brand-brick);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
  color: var(--brand-brick);
}

.form-error-summary[hidden] {
  display: none;
}

.form-error-summary p {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.form-error-summary ul {
  margin: 0;
  padding-left: 1.5rem;
  list-style: disc;
}

.form-error-summary li {
  margin: 0.25rem 0;
}

.form-success-message {
  background: #f0fdf4;
  border: 2px solid var(--brand-green);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
  color: var(--brand-green-dark);
}

.form-success-message[hidden] {
  display: none;
}

.form-success-message p {
  margin: 0;
  font-weight: 500;
}

.form-actions {
  margin-top: 0.5rem;
}

.form-actions .button {
  width: 100%;
  text-align: center;
  justify-content: center;
  margin-top: 0;
}

.form-actions .button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-actions .button:disabled:hover {
  transform: none;
  box-shadow: var(--shadow);
}

.button-loading {
  display: inline-block;
}

.button-loading[hidden] {
  display: none;
}

/* Responsive form styles */
@media (min-width: 640px) {
  .form-actions .button {
    width: auto;
    min-width: 200px;
  }
}

/* Focus visible styles for better accessibility */
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

/* Loading state */
.form-actions .button[aria-busy="true"] {
  position: relative;
  color: transparent;
}

.form-actions .button[aria-busy="true"]::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}