/* 
   Organize.directory Stylesheet
   
   CONSOLIDATED BASE CLASSES:
   -------------------------
   This stylesheet uses several base classes that can be combined with specific classes
   to reduce redundancy and improve maintainability:
   
   1. .btn-base - Base styling for all buttons
   2. .nav-link-base - Base styling for ALL navigation links (including locations)
   3. .location-link - Specific styling for location links (cities, states)
   4. .state-link - Extends location-link with state-specific styling
   5. .city-link - Extends location-link with city-specific styling
   6. .card-base - Base styling for card-like elements
   
   STANDARDIZED MEDIA QUERY BREAKPOINTS:
   ------------------------------------- 
   --breakpoint-xxl: 1400px
   --breakpoint-xl: 1200px 
   --breakpoint-lg: 1020px
   --breakpoint-md: 768px
   --breakpoint-sm: 480px
*/

/*------------------------------------*\
  #ROOT-VARIABLES
\*------------------------------------*/
:root {
     /* Core brand colors */
     --red-base: #c82525;
     --red-light: #de6b6b;
     --text-color: #4d0000;
     --dark-red: #a01818;
     --background-color: #fff7f7;
     --bg-medium: #ffd4d4;
     --color-white: #ffffff;

     /* Compound variables */
     --shadow-sm: 0 1px 2px rgba(192, 28, 28, 0.2);
     --red-base-alpha: rgba(192, 28, 28, 0.1);

     /* Layout variables */
     --sidebar-width: 240px;
     --content-padding: 3rem;
     --border-thick: 2px;

     /* Sidebar theme */
     --sidebar-bg: var(--bg-medium);
     --sidebar-color: var(--text-color);
     --border-color: #c01c1c;

     /* Base font sizes */
     --base-font-size: 16px;
     --mobile-font-size: 14px;
     --safari-mobile-font-size: 15px; /* Larger default for Safari mobile */

     /* Standard breakpoints - these are set but not used directly in @media */
     --breakpoint-xxl: 1400px;
     --breakpoint-xl: 1200px;
     --breakpoint-lg: 1020px;
     --breakpoint-md: 768px;
     --breakpoint-sm: 480px;

     /* Typography variables */
     --heading-font: "Saira Semi Condensed", sans-serif;
     --h1-size: 3.5rem;
     --h1-size-content: 3.5rem;
     --h1-size-mobile: 3rem;
     --h1-size-safari-mobile: 3.25rem; /* Safari specific adjustment */
     --h2-size: 1.75em;
     --h2-size-content: 1.7em;
     --h2-size-safari-mobile: 2em;

     /* Define tap/touch target sizes */
     --min-touch-target-size: 44px;
     --safe-touch-spacing: 8px;
}

/* ------------------------------------*\
  #RESET & BASE STYLES
\*------------------------------------ */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

/* Prevent text size issues on mobile */
html {
     -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     text-size-adjust: 100%;
     /* Ensure iOS Safari doesn't try to scale the page */
     max-width: 100vw;
     overflow-x: hidden;
     /* Force the root font size on mobile */
     font-size: 16px;
     scroll-behavior: smooth; /* Enable smooth scrolling sitewide */
}

@media (max-width: 768px) {
     html {
          font-size: 14px;
     }
}

/* Prefers-reduced-motion - disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
     * {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
     }

     html {
          scroll-behavior: auto !important;
     }
}

body {
     min-width: 320px;
     overflow-x: hidden;
     font-family:
          "Inter",
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          Oxygen,
          Ubuntu,
          Cantarell,
          sans-serif;
     line-height: 1.7;
     color: var(--text-color);
     background-color: var(--background-color);
     min-height: 100vh;
     font-size: var(--base-font-size);
     /* Optimize text rendering */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

/* Mobile-first layout approach to fix iOS Safari's viewport issues */
.layout {
     display: flex;
     min-height: 100vh;
     position: relative;
     gap: 0;
     background-color: var(--background-color);
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
     margin: 0;
     /* Remove padding that could cause overflow */
     padding-left: 0;
}

@media (min-width: 1020px) {
     .layout {
          max-width: 1400px;
          margin: 0 auto;
          padding-left: var(--sidebar-width);
     }
}

/* Safari-specific adjustments */
@supports (-webkit-touch-callout: none) {
     html,
     body {
          /* Force iOS Safari to use the viewport width */
          width: 100%;
          min-height: -webkit-fill-available;
          max-width: 100vw;
          overflow-x: hidden;
     }

     /* Apply mobile styling to ensure proper rendering in Safari */
     body {
          font-size: var(--safari-mobile-font-size);
     }

     /* Ensure Safari doesn't try to fit content outside the viewport */
     .layout {
          max-width: 100%;
          min-width: 100%;
          width: 100%;
          box-sizing: border-box;
     }

     .content {
          max-width: 100%;
          width: 100%;
          box-sizing: border-box;
          overflow-x: hidden;
     }
}

/* 
 * HEADING STYLES
 * Base styles for all headings across the site
 * More specific contexts (like .content) override these as needed
 */
h1 {
     font-family: var(--heading-font);
     font-size: var(--h1-size);
     color: var(--red-base);
     font-weight: 800;
     line-height: 1.1;
     text-align: left;
     margin-bottom: 1.5rem; /* Added bottom margin for better spacing */
}

h2 {
     font-size: var(--h2-size);
     margin-top: 40px;
     margin-bottom: 1.25rem; /* Added bottom margin for better spacing */
     color: var(--text-color);
     max-width: 1000px;
     text-align: left;
     margin-left: 0;
}

/* Center h1 only on the homepage and guides page */
body.page-home h1,
body.page-guides h1 {
     text-align: center;
     padding-top: 3rem;
     font-size: 5rem;
}

/* Special mobile styles for homepage h1 */
@media (max-width: 768px) {
     body.page-home h1 {
          font-size: 2.5rem;
          padding-top: 1.5rem;
          padding-bottom: 1rem;
          line-height: 1;
          margin-bottom: 0.5rem;
     }
}

/* Even smaller on very small screens */
@media (max-width: 480px) {
     a.city-link {
          font-size: 0.85rem;
          padding: 0.5rem 0.5rem;
          min-height: 38px;
     }

     .initiative a {
          font-size: 1rem;
     }

     .initiative p {
          font-size: 0.9rem;
     }

     .toc-link {
          font-size: 0.85rem;
     }
}

a {
     color: var(--red-base);
     text-decoration: none;
     transition: all 0.2s ease;
}

a:hover {
     color: var(--red-base);
     border-bottom: 2px solid var(--red-base);
}

hr {
     border-top: 1px solid var(--red-base);
     margin: 2rem 0;
}

/* Ensure clean spacing for list items */
li {
     margin-bottom: 0.5rem;
}

/*------------------------------------*\
  #CONSOLIDATED BASE CLASSES
\*------------------------------------*/
/* Consolidated Button Base Class */
.btn-base {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.75rem 1.5rem;
     border-radius: 6px;
     font-family: "Inter", sans-serif;
     font-weight: 600;
     cursor: pointer;
     background-color: var(--red-base);
     color: var(--color-white);
     transition: all 0.2s ease;
     text-decoration: none;
     border: 1px solid transparent;
     min-height: 44px; /* Accessibility - minimum touch target size */
     min-width: 44px;
     text-align: center;
}

.btn-base:hover {
     background-color: var(--dark-red);
     box-shadow: 0 3px 8px rgba(192, 28, 28, 0.15);
}

.btn-base:active {
     transform: translateY(1px);
}

/* Consolidated Navigation Link Base Class 
   This contains truly common styles for ALL navigation links */
.nav-link-base {
     display: block;
     padding: 0.75rem 1.5rem;
     text-decoration: none;
     transition: all 0.2s ease;
     opacity: 0.9;
     font-size: 0.95rem;
     width: 100%;
}

.nav-link-base:hover {
     opacity: 1;
}

/* Specific styling for standard navigation links */
.nav-link {
     /* Inherit all base styling */
     color: var(--text-color);
     background-color: var(--bg-medium);
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     font-weight: 500;
}

.nav-link:hover {
     color: var(--red-base);
     background: var(--bg-medium);
}

.nav-link.active {
     color: var(--red-base);
     opacity: 1;
     font-weight: 600;
     background: var(--color-white);
}

/* Location navigation links style - base for both city and state links */
.location-link {
     color: var(--text-color);
     padding: 0.25rem 0.5rem;
}

.location-link:hover {
     opacity: 1;
     color: var(--red-base);
     text-decoration: none;
}

/* State links - extends location-link with state-specific styling 
   HTML usage: class="nav-link-base location-link state-link" */
.state-link {
     font-size: 1.1rem;
     line-height: 1.4;
     border-radius: 6px;
}

.state-link:hover {
     color: var(--red-base);
     text-decoration: none;
     background-color: var(--bg-medium);
}

/* City links - extends location-link with city-specific styling 
   HTML usage: class="city-link location-link-base" or class="nav-link-base location-link city-link" */
.city-link {
     color: var(--red-base);
     font-size: 0.9rem;
     font-weight: 700;
     line-height: 1.2;
     width: 100%;
     border-bottom: none;
     padding: 0.75rem 1rem;
     display: flex;
     align-items: center;
     background-color: var(--background-color);
     border: 1px solid var(--red-base);
     border-radius: 4px;
     transition: all 0.2s ease;
     margin: 0;
     text-align: center;
     justify-content: center;
}

.city-link:hover {
     color: var(--red-base);
     background-color: var(--bg-medium);
     text-decoration: none;
     border-bottom: none;
     transform: translateY(-2px);
     box-shadow: 0 2px 4px rgba(200, 37, 37, 0.15);
}

/* Consolidated Card Base Class */
.card-base {
     background: var(--background-color);
     border: 1px solid var(--red-base);
     border-radius: 4px;
     padding: 1.5rem;
     transition: all 0.2s ease;
}

.card-base:hover {
     border-color: var(--red-base);
     box-shadow: var(--shadow-sm);
}

/*------------------------------------*\
  #LAYOUT
\*------------------------------------*/
/* Basic layout structure - updated for fixed sidebar */
.layout {
     display: flex;
     min-height: 100vh;
     position: relative;
     gap: 0;
     background-color: var(--background-color);
     max-width: 1400px;
     margin: 0 auto;
     padding-left: var(
          --sidebar-width
     ); /* Ensure consistent space for fixed sidebar */
}

.content {
     flex: 1;
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 5rem;
     position: relative;
     background: var(--background-color);
}

/* Updated sidebar rules to ensure consistent positioning */
.sidebar {
     background-color: var(--sidebar-bg);
     color: var(--sidebar-color);
     width: var(--sidebar-width);
     min-width: var(--sidebar-width);
     height: 100vh; /* Changed from min-height to height for consistency */
     display: flex;
     flex-direction: column;
     position: fixed; /* Changed from sticky to fixed */
     top: 0;
     left: 0;
     z-index: 100; /* Increased z-index to ensure it stays above other elements */
     border-right: 2px solid var(--border-color);
     overflow-y: auto; /* Changed from hidden to auto to allow scrolling */
}

.sidebar-header {
     padding: 1.5rem 1rem;
     text-align: center;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 120px; /* Fixed minimum height to prevent layout shifts */
     transition: min-height 0.2s ease;
     width: 100%;
}

.site-logo {
     max-width: 100%;
     height: auto;
     min-height: 80px; /* Ensures minimum height even before image loads */
     opacity: 1; /* Make logo visible by default */
     display: block; /* Ensure it's displayed as block */
     margin: 0 auto; /* Center the logo */
     visibility: visible; /* Ensure visibility is also set */
}

/* We no longer need the .loaded class since the logo is visible by default */
.site-logo.loaded {
     opacity: 1;
     visibility: visible; /* Ensure visibility is also set */
}

/* Add a placeholder while the image loads */
.sidebar-header::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80%;
     height: 60px;
     background-color: transparent;
     z-index: -1;
}

.sidebar-header h1 {
     margin: 0;
     padding: 0;
     font-size: 1.6rem;
     line-height: 1.2;
     display: flex;
     align-items: center;
     font-weight: 700;
     font-family: "Saira Semi Condensed", sans-serif;
}

.sidebar-header h1 a,
.sidebar-header h1 a:link,
.sidebar-header h1 a:visited,
.sidebar-header h1 a:hover,
.sidebar-header h1 a:active,
.sidebar-header h1 a.home-link {
     text-decoration: none;
     color: inherit;
     background-color: transparent;
     font-weight: inherit;
     margin: 0;
     padding: 0;
}

.sidebar nav {
     margin-bottom: 2rem;
}

/* Navigation */
.nav-group {
     display: flex;
     flex-direction: column;
     gap: 0;
     border: none;
     padding: 0;
     background: transparent;
     position: relative;
     margin: 0;
}

.nav-group:last-child {
     margin-bottom: 0;
}

.nav-group-title {
     display: none;
}

.sidebar-motto {
     /* padding: 1rem 1.5rem; */
     font-size: 0.85rem;
     color: var(--red-light);
     opacity: 0.9;
     text-align: center;
     line-height: 1.4;
     margin-top: auto;
     font-weight: 600;
     text-transform: lowercase;
}

/* Mobile Menu */
.mobile-menu-button {
     display: none;
     position: fixed;
     top: 1rem;
     left: 1rem;
     z-index: 110;
     background: var(--color-white);
     border: var(--border-thick) solid var(--red-base);
     border-radius: 6px;
     padding: 0.75rem;
     cursor: pointer;
}

.mobile-menu-button svg {
     width: 24px;
     height: 24px;
}

.mobile-menu-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.5);
     z-index: 90;
}

.mobile-menu-overlay.active {
     display: block;
}

/*------------------------------------*\
  #COMPONENTS
\*------------------------------------*/

/* Buttons */
.btn {
     display: inline-block;
     padding: 0.8rem 1.6rem;
     font-weight: 600;
     font-size: 1rem;
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.2s ease;
}

.btn-primary {
     background-color: var(--red-base);
     color: var(--color-white);
     border: 2px solid var(--red-base);
}

.btn-primary:hover {
     background-color: var(--dark-red);
     border-color: var(--dark-red);
}

.btn-secondary {
     background-color: transparent;
     color: var(--red-base);
     border: 2px solid var(--red-base);
}

.btn-secondary:hover {
     background-color: var(--background-color);
}

.action-buttons {
     display: flex;
     gap: 1rem;
     margin-bottom: 3rem;
}

/* Find Groups Buttons */
.find-groups-buttons {
     margin: 2.5rem auto;
     max-width: 800px;
}

.buttons-container {
     display: flex;
     flex-direction: row;
     gap: 1.5rem;
     justify-content: center;
}

.find-groups-button {
     background-color: var(--red-base);
     color: white;
     padding: 1rem 1.5rem;
     border-radius: 8px;
     text-decoration: none;
     font-weight: 600;
     font-size: 1.1rem;
     transition: all 0.2s ease;
     box-shadow: 0 4px 6px rgba(200, 37, 37, 0.2);
     border: 2px solid var(--red-base);
     flex: 1;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
}

.primary-button {
     background-color: var(--red-base);
     color: white;
}

.secondary-button {
     background-color: white;
     color: var(--red-base);
}

.button-icon {
     width: 20px;
     height: 20px;
}

.find-groups-button:hover {
     background-color: #e02e2e;
     transform: translateY(-2px);
     box-shadow: 0 6px 12px rgba(200, 37, 37, 0.25);
}

.find-groups-button:active {
     transform: translateY(0px);
     box-shadow: 0 2px 4px rgba(200, 37, 37, 0.3);
}

.button-text {
     font-family: var(--heading-font);
}

/* Statistics Container */
.stats-container {
     display: flex;
     justify-content: space-around;
     align-items: center;
     gap: 2rem;
     background-color: white;
     border-radius: 8px;
     max-width: 900px;
}

.stat-item {
     text-align: center;
     padding: 0.5rem 1rem;
     width: 33.33%;
     display: flex;
     flex-direction: column;
     align-items: center;
}

.stat-number {
     display: block;
     font-size: 5rem !important;
     font-weight: 800 !important;
     color: var(--red-base) !important;
     line-height: 1 !important;
     margin-bottom: 0.75rem !important;
     font-family: var(--heading-font) !important;
}

.stat-label {
     display: block !important;
     font-size: 1.1rem !important;
     font-weight: 700 !important;
     color: var(--red-base) !important;
     text-transform: uppercase !important;
     font-family: var(--heading-font) !important;
     letter-spacing: 0.05em !important;
}

/* Initiative Statistics Section */
.initiative-stats {
     background: white;
     border: 2px solid var(--red-base);
     border-radius: 15px;
     padding: 2rem;
     margin: 2rem auto 3rem;
     max-width: 800px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
}

.stats-container {
     display: flex;
     justify-content: space-around;
     align-items: center;
}

.stat-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 0.5rem 1rem;
     position: relative;
}

.stat-number {
     font-size: 4rem; /* Increased from 3.5rem */
     font-weight: 800;
     color: var(--red-base);
     line-height: 1;
     margin-bottom: 0.75rem;
     font-family: var(--heading-font);
     display: block; /* Ensure visibility */
}

.stat-label {
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--red-base);
     text-transform: uppercase;
     font-family: var(--heading-font);
     letter-spacing: 0.05em;
     display: block; /* Ensure visibility */
}

/* Mobile stats display */
.stat-mobile-label {
     display: none; /* Hidden by default */
     font-size: 1.4rem;
     font-weight: 700;
     text-align: left;
     font-family: var(--heading-font);
     color: var(--red-base);
     line-height: 1.2;
}

/* Desktop stats layout - always use this for non-mobile */
@media (min-width: 769px) {
     .stat-mobile-label {
          display: none;
     }

     .stat-number,
     .stat-label {
          display: block;
     }

     .stats-container {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
     }

     .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
     }

     /* Override any conflicting styles */
     body .stat-number,
     html .stat-number,
     .page-home .stat-number,
     body .stat-label,
     html .stat-label,
     .page-home .stat-label {
          display: block;
     }

     body .stats-container,
     html .stats-container,
     .page-home .stats-container {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
     }

     body .stat-item,
     html .stat-item,
     .page-home .stat-item {
          width: auto;
          text-align: center;
          padding: 0.5rem 1rem;
          margin: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
     }
}

/* Mobile styles - only apply these on mobile screens */
@media (max-width: 768px) {
     /* Mobile stats layout */
     body .stat-number,
     html .stat-number,
     .page-home .stat-number,
     .stat-number,
     body .stat-label,
     html .stat-label,
     .page-home .stat-label,
     .stat-label {
          display: none;
     }

     /* Mobile stats display */
     body .stat-mobile-label,
     html .stat-mobile-label,
     .page-home .stat-mobile-label,
     .stat-mobile-label {
          display: block;
          font-size: 1.3rem;
          line-height: 1.2;
          font-weight: 700;
          color: var(--red-base);
          font-family: "Saira Semi Condensed", sans-serif;
          text-align: left;
          margin: 0;
          padding: 0;
     }

     /* Mobile vertical stats layout */
     body .stats-container,
     html .stats-container,
     .page-home .stats-container,
     .stats-container {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 1rem;
          width: 100%;
     }

     body .stat-item,
     html .stat-item,
     .page-home .stat-item,
     .stat-item {
          width: 100%;
          text-align: left;
          padding: 0 0.5rem;
          margin: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          min-height: auto;
     }

     body .initiative-stats,
     html .initiative-stats,
     .page-home .initiative-stats,
     .initiative-stats {
          padding: 1.25rem;
          margin: 0.75rem auto 1.25rem;
          border-width: 1px;
     }
}

/* Even more compact on very small screens */

body .stats-container,
html .stats-container,
.page-home .stats-container,
.stats-container {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 1rem;
     width: 100%;
}

body .stat-item,
html .stat-item,
.page-home .stat-item,
.stat-item {
     width: 100%;
     text-align: left;
     padding: 0 0.5rem;
     margin: 0;
     display: flex;
     flex-direction: row;
     align-items: center;
     min-height: auto;
}

/* Force hide the regular number and label */
body .stat-number,
html .stat-number,
.page-home .stat-number,
.stat-number,
body .stat-label,
html .stat-label,
.page-home .stat-label,
.stat-label {
     display: none;
}

/* Force show the mobile labels */
body .stat-mobile-label,
html .stat-mobile-label,
.page-home .stat-mobile-label,
.stat-mobile-label {
     display: block;
     font-size: 1.3rem;
     line-height: 1.2;
     font-weight: 700;
     color: var(--red-base);
     font-family: "Saira Semi Condensed", sans-serif;
     text-align: left;
     margin: 0;
     padding: 0;
}

/* Make homepage h1 even smaller */
body.page-home h1 {
     font-size: 2rem;
     padding-top: 0.75rem;
     padding-bottom: 0.5rem;
     margin-bottom: 0.25rem;
}

/* Adjust buttons for better mobile layout */
.find-groups-buttons {
     margin-top: 0.5rem;
}

.buttons-container {
     flex-direction: column;
     gap: 0.75rem;
     width: 100%;
}

.find-groups-button {
     width: 100%;
     margin: 0;
     padding: 0.75rem 1rem;
     text-align: center;
     justify-content: center;
}

.button-text {
     font-size: 1.1rem;
}

.cities-list {
     grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.city-link {
     font-size: 0.95rem;
     width: 100%;
     padding: 0.4rem 0;
}

.stats-description {
     font-size: 1.1rem;
     max-width: 600px;
     margin: 1rem auto 0;
     color: var(--text-color);
}

/* Topic Cards */
.topics-page .topic-icon,
.topics-grid .topic-icon,
body .topic-icon,
html .topic-icon,
.topic-icon {
     font-size: 1.4rem;
     height: 1.4rem;
     width: 1.4rem;
     min-width: 1.4rem;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: var(--red-base);
     margin-right: 1.2rem;
     visibility: visible;
     opacity: 1;
     font-family:
          "Font Awesome 6 Free", "Font Awesome 6 Brands", FontAwesome,
          sans-serif;
}

.topics-page .topic-name,
.topics-grid .topic-name,
body .topic-name,
html .topic-name,
.topic-name {
     font-size: 0.85rem;
     font-weight: 600;
     margin: 0;
     padding: 0;
     line-height: 1.2;
     display: flex;
     align-items: center;
}

.topic-card {
     /* Use card-base in HTML */
     background: var(--background-color);
     padding: 0.65rem 1.25rem;
     gap: 0.5rem;
     height: auto;
     min-height: 3rem;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     text-align: left;
     width: 100%;
     border: 1px solid var(--red-base);
     border-radius: 4px;
}

.topic-card:hover {
     background: var(--bg-medium);
     border-color: var(--red-base);
     box-shadow: var(--shadow-sm);
}

.topic-card:hover .topic-name {
     color: var(--red-base);
}

/* Icon fallback */
.icon-fallback {
     display: none;
     /* Hide by default, shown via JS when FA fails */
}

/* Topics grid */
.topics-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.75rem;
     padding: 1.75rem 0;
     width: 100%;
     max-width: 100%;
     margin: 0;
     justify-content: start;
}

/* Topics container */
.topics-container {
     width: 100%;
     max-width: 1200px;
     margin-left: 0;
     box-sizing: border-box;
}

/* Post/Blog entries */
.post-entry {
     margin-bottom: 1.5rem;
     padding-bottom: 0;
     display: flex;
     flex-direction: column;
}

.post-entry-header {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     width: 100%;
     position: relative;
}

.post-entry-header::after {
     content: none;
}

.post-entry-title {
     font-weight: 600;
     font-size: 1.1rem;
     margin: 0;
     padding-right: 0;
     position: relative;
     z-index: 2;
     display: inline-block;
     color: var(--red-base);
}

.post-entry-title a {
     color: var(--red-base);
     text-decoration: none;
     border-bottom: none;
}

.post-entry-title a:hover {
     text-decoration: none;
     color: var(--red-base);
     border-bottom: none;
}

.post-entry time {
     font-size: 0.9rem;
     color: var(--text-color);
     padding-left: 0;
     position: relative;
     z-index: 2;
     white-space: nowrap;
     opacity: 0.7;
     text-align: right;
}

.post-entry-tagline {
     margin-top: 0.4rem;
     color: var(--text-color);
     font-size: 0.95rem;
     text-align: left;
     margin-left: 0;
     margin-right: auto;
     padding-left: 0;
     max-width: 100%;
     width: 100%;
     display: block;
     text-indent: 0;
     opacity: 0.7;
}

.post-entry:last-child {
     margin-bottom: 0;
}

/* Log section */
.daily-log {
     padding: 1rem 0 3rem;
     margin: 2rem auto;
     max-width: 800px;
}

#log-heading {
     color: var(--red-base);
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 2rem;
     font-family: "Saira Semi Condensed", sans-serif;
     text-align: left;
     margin-left: 0;
     padding-left: 0;
     display: block;
     width: 100%;
     max-width: 100%;
}

/*------------------------------------*\
  #PAGE-SPECIFIC-COMPONENTS
\*------------------------------------*/
/* Location Components */
.states-list {
     display: grid;
     grid-template-columns: 1fr;
     gap: 0.2rem;
     max-width: 600px;
     width: 100%;
}

.state-link {
     /* Use nav-link-base location-link in HTML */
     font-size: 1.1rem;
     line-height: 1.4;
     border-radius: 6px;
}

.state-link:hover {
     color: var(--red-base);
     text-decoration: underline;
     text-decoration-color: var(--red-base);
     background-color: var(--bg-medium);
}

.cities-section {
     margin: 1rem 0;
     overflow: hidden;
}

.cities-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     gap: 1rem;
     margin: 0;
}

.city-link {
     /* Use nav-link-base location-link in HTML */
     color: var(--red-base);
     font-size: 0.9rem;
     font-weight: 700;
     line-height: 1.2;
     width: 100%;
     border-bottom: none;
     padding: 0.75rem 1rem;
     display: flex;
     align-items: center;
     background-color: var(--background-color);
     border: 1px solid var(--red-base);
     border-radius: 4px;
     transition: all 0.2s ease;
     margin: 0;
     text-align: center;
     justify-content: center;
}

.city-link:hover {
     color: var(--red-base);
     background-color: var(--bg-medium);
     text-decoration: none;
     border-bottom: none;
     transform: translateY(-2px);
     box-shadow: 0 2px 4px rgba(200, 37, 37, 0.15);
}

.cities-section h2 {
     font-size: 1.4rem;
     margin-bottom: 1rem;
}

/* Table of Contents */
.toc {
     background-color: var(--bg-medium);
     border: 2px solid var(--red-base);
     border-radius: 8px;
     padding: 1.5rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     max-height: 85vh;
     overflow-y: auto;
     width: 280px;
     font-size: 0.9rem;
}

/* TOC container with explicit width */
.toc-container {
     position: absolute;
     top: 0;
     right: 1rem;
     width: 280px;
}

/* TOC in fixed mode */
.toc.toc-fixed {
     position: fixed;
     top: 20px;
     /* right will be set by JS */
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
     z-index: 100;
}

.toc-title {
     display: none; /* Hide the title as requested */
}

.toc-list {
     list-style-type: none;
     padding-left: 0.25rem;
     margin: 0;
}

.toc-item {
     margin: 0rem 0;
}

.toc-link {
     color: var(--red-base);
     text-decoration: none;
     display: block;
     padding: 0.5rem 0.8rem;
     border-radius: 4px;
     transition: all 0.2s ease;
}

.toc-link:hover,
.toc-link.active {
     background-color: rgba(200, 37, 37, 0.1);
     color: var(--dark-red);
     font-weight: 600;
     border: none;
}

.toc-number {
     opacity: 0.7;
     margin-right: 0.5rem;
}

/* Content container with proper positioning context */
.content-wrapper {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 1rem;
     position: relative;
     /* Positioning context for TOC */
}

/* Main content styling - with right margin for TOC */
.city-content {
     width: calc(100% - 350px);
     margin-right: 350px;
     margin-left: 30px;
     /* Space for TOC */
}

/* Mobile TOC toggle button */
.mobile-toc-toggle {
     display: none;
     width: 100%;
     background-color: var(--bg-medium);
     border: 2px solid var(--red-base);
     border-radius: 8px;
     padding: 0.8rem 1rem;
     margin: 0.5rem 0 1rem;
     font-weight: 600;
     color: var(--red-base);
     text-align: left;
     cursor: pointer;
     position: relative;
     transition: background-color 0.2s ease;
}

.mobile-toc-toggle:hover {
     background-color: #ffbfbf;
}

.mobile-toc-toggle::after {
     content: "+";
     position: absolute;
     right: 1rem;
     font-size: 1.2rem;
     transition: transform 0.3s ease;
}

.mobile-toc-toggle.open::after {
     content: "−";
}

/* Mobile styles */
@media (max-width: 1019px) {
     .city-content {
          width: 100%;
          margin: 0 auto;
          max-width: 1000px;
          order: 2; /* Change order in flexbox layout */
     }

     .toc-container {
          position: static;
          width: 100%;
          margin: 0 0 1.5rem;
          order: 1; /* Position before content in flexbox layout */
     }

     .toc {
          width: 100%;
          position: static !important;
          display: none;
          max-height: none;
          margin-top: 0.5rem;
          /* Add a nicer border and shadow when displayed on mobile */
          border: 1px solid var(--red-base);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }

     .toc.open {
          display: block;
     }

     .mobile-toc-toggle {
          display: block;
     }

     /* Make content wrapper a flex container on mobile */
     .content-wrapper {
          display: flex;
          flex-direction: column;
          padding-top: 0.5rem;
     }

     /* For smaller screens, add styling to first h2 heading */
     .city-content .city-section:first-child h2 {
          margin-top: 0.5rem;
     }

     /* Improve spacing between sections on mobile */
     .city-section {
          margin-bottom: 2rem;
     }
}

/* Responsive adjustments for even smaller screens */
@media (max-width: 480px) {
     .city-section h2 {
          padding: 0.7rem 0.8rem;
     }
}

/* City and Location page specific */
.city-page {
     width: 100%;
     max-width: 800px;
     margin: 0 auto;
     contain: content;
     will-change: auto;
     padding: 0; /* Remove container padding since we're handling it in children */
}

/* Fix city page h1 alignment */
.content > h1 {
     padding-left: 0; /* Remove left padding as we're adding it to the city-page container */
     margin-top: 1rem;
     margin-left: 0; /* Ensure no left margin */
}

/* Add specific styling for city pages */
.city-page h1 {
     margin-left: 0; /* Override any inherited margins */
     padding-left: 0; /* Override any inherited paddings */
     font-size: 2.5rem; /* Slightly larger font */
     color: var(--red-base); /* Use brand color */
}

@media (max-width: 768px) {
     .content > h1 {
          padding-left: 0; /* Remove left padding on mobile */
          text-align: center; /* Center the heading on mobile for better appearance */
     }

     .city-page {
          padding: 0; /* Remove padding on mobile */
     }

     .city-page h1 {
          text-align: center; /* Center on mobile */
          font-size: 2.2rem; /* Smaller font on mobile */
     }

     .page-header {
          padding: 1rem; /* Smaller padding on mobile */
     }

     .page-header h1 {
          font-size: 2.5rem; /* Smaller font on mobile */
          text-align: center !important;
     }
}

/* State page styling */
.state-page section {
     border: none;
     border-radius: 0;
     background: transparent;
     box-shadow: none;
     margin-bottom: 2rem;
     overflow: visible;
     padding: 0;
     position: relative;
     display: block;
     width: 100%;
     clear: both;
     float: none;
}

.state-page .cities-list {
     border: 1px solid var(--red-base);
     border-radius: 4px;
     background: var(--background-color);
     box-shadow: 0 1px 2px var(--red-base-alpha);
     overflow: hidden;
     padding: 0;
     margin: 0 0 1.5rem 0;
     position: relative;
     display: block;
     width: 100%;
     clear: both;
     float: none;
}

.state-page .cities-list > h2 {
     margin: 0;
     padding: 0.6rem 1.5rem;
     width: 100%;
     max-width: none;
     display: block;
     float: none;
     position: static;
     box-sizing: border-box;
     left: 0;
     right: 0;
     top: 0;
     clear: both;
     text-align: left;
     background-color: var(--bg-medium);
     color: var(--red-base);
     font-size: 1.1rem;
     font-weight: 500;
     text-transform: none;
     border-bottom: 1px solid var(--red-base);
     border-radius: 0;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     box-shadow: none;
}

/* City links container */
.state-page .city-links-container {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     gap: 1rem;
     margin: 1.5rem 0 2rem;
     will-change: auto;
     contain: layout;
     padding: 1rem 1.5rem 1rem 1.5rem;
}

/* Add specific styling for city links inside state pages */
.state-page .city-links-container .city-link {
     border: none;
     background-color: #fff7f7;
     box-shadow: none;
     transition: all 0.2s ease;
}

.state-page .city-links-container .city-link:hover {
     background-color: var(--bg-medium);
     transform: none;
     box-shadow: none;
     border: none;
}

/* Breadcrumb navigation */
.breadcrumb {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     margin-bottom: 0.75rem;
     font-size: 0.95rem;
}

.breadcrumb a {
     color: var(--red-base);
     text-decoration: none;
}

.breadcrumb a:hover {
     color: var(--red-base);
     text-decoration: underline;
     border-bottom: none;
}

.breadcrumb span {
     color: var(--text-color);
     opacity: 0.8;
}

/* Initiative styles */
.initiative {
     margin-bottom: 1.5rem;
     padding-bottom: 0.5rem;
     display: flex;
     flex-direction: column;
     position: relative;
     cursor: pointer;
}

.initiative:last-child {
     margin-bottom: 0;
}

.initiative h3 {
     font-size: 1.15rem;
     font-weight: 700;
     color: var(--red-base);
     margin-bottom: 0.3rem;
     padding-right: 100px;
}

.initiative a {
     font-size: 1.15rem;
     font-weight: 700;
     color: var(--text-color);
     border-bottom: none;
     margin-bottom: 0.3rem;
     text-decoration: none;
     padding-right: 100px;
     position: relative;
     display: inline-block;
     z-index: 2; /* Ensure the link is above other elements */
}

.initiative a:hover {
     color: var(--red-base);
     border-bottom: none;
     text-decoration: underline;
     text-decoration-color: var(--red-base);
}

.initiative a:hover::after {
     content: "→";
     position: absolute;
     margin-left: 5px;
     display: inline-block;
}

.initiative time {
     position: absolute;
     right: 0;
     top: 0;
     color: var(--text-color);
     font-size: 0.9rem;
}

.initiative p {
     margin: 0.3rem 0 0 0;
     padding: 0;
     color: var(--text-color);
     position: relative;
     z-index: 1;
     pointer-events: none; /* Allow clicks to pass through to the underlying wrapper */
}

/* Create a pseudo-element that covers the entire initiative container */
.initiative::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 0;
}

/* Make the initiative container act as a link wrapper */
.initiative {
     position: relative;
}

/* Extend the link to cover the whole container */
.initiative a::before {
     content: "";
     position: absolute;
     top: -10px; /* Extend beyond the anchor itself */
     left: -10px;
     right: -10px;
     bottom: -100%; /* Cover the entire container below */
     z-index: 1;
}

/* When hovering over the initiative container, style the anchor tag as if it was hovered */
.initiative:hover a {
     color: var(--red-base);
     text-decoration: underline;
     text-decoration-color: var(--red-base);
}

/* Show the arrow when hovering over the container */
.initiative:hover a::after {
     content: "→";
     position: absolute;
     margin-left: 5px;
     display: inline-block;
}

/* JavaScript will be used to make the container clickable */

/* New mobile initiative collapsible styles */
@media (max-width: 768px) {
     /* Initiative name wrapper */
     .initiative-name-wrapper {
          width: 100%;
          margin-bottom: 0.5rem;
     }

     /* Toggle button styling - looks like a link but better tap target */
     .initiative-name-toggle {
          background: none;
          border: none;
          padding: 0.5rem 0;
          margin: 0;
          font-size: 1.1rem;
          font-weight: 700;
          color: var(--text-color);
          text-align: left;
          width: 100%;
          position: relative;
          cursor: pointer;
          display: flex;
          align-items: center;
          transition: color 0.2s ease;
     }

     /* Add indicator for expandable content */
     .initiative-name-toggle::after {
          content: "+";
          position: absolute;
          right: 0.5rem;
          top: 50%;
          transform: translateY(-50%);
          font-size: 1.2rem;
          font-weight: 700;
          color: var(--red-base);
          transition: transform 0.2s ease;
     }

     /* Change indicator when expanded */
     .initiative-name-toggle.active::after {
          content: "−";
          transform: translateY(-50%);
     }

     /* Hover and active states */
     .initiative-name-toggle:hover,
     .initiative-name-toggle:focus {
          color: var(--red-base);
          outline: none;
     }

     .initiative-name-toggle.active {
          color: var(--red-base);
     }

     /* Hidden content container */
     .initiative-hidden-content {
          padding: 0.5rem 0;
          margin: 0;
          overflow: hidden;
          opacity: 1;
          max-height: 500px; /* Arbitrary large value */
          transition:
               max-height 0.3s ease,
               opacity 0.3s ease,
               margin 0.3s ease;
     }

     /* Collapsed state */
     .initiative-hidden-content.collapsed {
          max-height: 0;
          opacity: 0;
          padding-top: 0;
          padding-bottom: 0;
          margin: 0;
          pointer-events: none;
     }

     /* Container for the arrow link to help with alignment */
     .arrow-link-container {
          display: flex;
          justify-content: flex-start;
          margin-top: 0.75rem;
     }

     /* Link styling - just the icon */
     .initiative-arrow-link {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: var(--red-base);
          transition: all 0.2s ease;
          text-decoration: none;
          background: none;
          border: none;
          padding: 0;
     }

     /* Website icon styling */
     .website-icon {
          transition: transform 0.2s ease;
     }

     .initiative-arrow-link:hover,
     .initiative-arrow-link:focus {
          color: #a71d1d;
          text-decoration: none;
     }

     .initiative-arrow-link:hover .website-icon,
     .initiative-arrow-link:focus .website-icon {
          transform: scale(1.1);
     }

     /* Hide the old external link */
     .initiative-external-link {
          display: none;
     }

     /* Style for expanded initiatives */
     .initiative.expanded {
          margin-bottom: 1.5rem;
          padding: 0.75rem;
          background-color: rgba(255, 212, 212, 0.2);
          border-radius: 8px;
     }

     /* Spacing between initiatives */
     .initiative {
          margin-bottom: 0.5rem;
          padding-bottom: 0.5rem;
          border-bottom: 1px solid rgba(200, 37, 37, 0.1);
     }

     /* Paragraphs within the hidden content */
     .initiative-hidden-content p {
          margin: 0;
          font-size: 0.95rem;
          line-height: 1.5;
     }

     /* Improve city section heading layout */
     .city-page .city-section h2,
     .city-page h2,
     body[class*="page-cities-"] h2,
     .city-content h2 {
          font-size: 1.5rem;
          margin-top: 1.5rem;
          margin-bottom: 1rem;
          padding: 0.75rem;
          background-color: var(--bg-medium);
          border-radius: 8px;
          border-top: none;
          text-align: center;
          color: var(--red-base);
          font-weight: 600;
          box-shadow: 0 2px 4px rgba(200, 37, 37, 0.1);
     }
}

/* Even tighter spacing on very small screens */
.initiative-hidden-content p {
     font-size: 0.9rem;
}

/* Slightly smaller arrow button for very small screens */
.initiative-arrow-link {
     width: 36px;
     height: 36px;
}

.website-icon {
     width: 14px;
     height: 14px;
}

/* Even tighter spacing on very small screens for headings */
.city-page .city-section h2,
.city-page h2,
body[class*="page-cities-"] h2,
.city-content h2 {
     font-size: 1.3rem;
     padding: 0.6rem;
     margin-bottom: 0.75rem;
}

/* Thank You Page */
.thank-you-content {
     max-width: 600px;
     margin: 0 auto;
     padding: 2rem;
     text-align: center;
}

.thank-you-card {
     /* Use card-base in HTML */
     margin-top: 2rem;
     background: var(--color-white);
     padding: 3rem 2rem;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.thank-you-icon {
     font-size: 3rem;
     color: var(--red-base);
     margin-bottom: 1rem;
}

.thank-you-title {
     font-size: 1.8rem;
     margin-bottom: 1rem;
     color: var(--red-base);
}

.thank-you-message {
     font-size: 1.1rem;
     margin-bottom: 2rem;
     color: var(--text-color);
}

/*------------------------------------*\
  #CONTACT PAGE STYLES
\*------------------------------------*/
/* Basic layout for contact content */
.contact-content {
     max-width: 800px;
     margin: 0 auto;
}

/* Contact page header styling */
body.page-contact .page-header {
     max-width: 800px;
     margin: 0 auto 2rem;
     text-align: center;
}

body.page-contact .page-header h1 {
     text-align: center;
     margin-bottom: 1rem;
     font-family: "Saira Semi Condensed", sans-serif;
}

body.page-contact .page-header p {
     text-align: center;
     max-width: 600px;
     margin: 0 auto;
     font-size: 1rem;
     line-height: 1.5;
}

/* Contact form styles */
.contact-form {
     background-color: #fff;
     border-radius: 8px;
     border: 2px solid var(--red-base);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     padding: 2rem;
     margin: 1.5rem 0;
}

.form-group {
     margin-bottom: 1.5rem;
}

.form-group label {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
     color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
     width: 100%;
     padding: 0.75rem;
     border: 1px solid #ddd;
     border-radius: 4px;
     font-size: 1rem;
     font-family: inherit;
}

.form-group textarea {
     min-height: 150px;
     resize: vertical;
}

.form-helper {
     display: block;
     margin-top: 0.25rem;
     font-size: 0.875rem;
     color: #666;
}

/* Status message */
.status-message {
     padding: 1rem;
     border-radius: 4px;
     margin-top: 1rem;
     text-align: center;
     font-weight: 500;
     display: none;
}

.status-message.success {
     background-color: #dcfce7;
     color: #15803d;
     border: 1px solid #86efac;
}

.status-message.error {
     background-color: #fee2e2;
     color: #b91c1c;
     border: 1px solid #fca5a5;
}

.status-message.sending {
     background-color: #dbeafe;
     color: #1e40af;
     border: 1px solid #93c5fd;
}

/* Error styles */
.error-text {
     color: #dc2626;
     font-size: 0.875rem;
     margin-top: 0.25rem;
     display: none;
}

input.error,
select.error,
textarea.error {
     border-color: #dc2626;
}

/* Captcha styles */
.captcha-challenge {
     display: flex;
     align-items: center;
     gap: 1rem;
     flex-wrap: wrap;
}

.captcha-challenge span {
     font-size: 1.1rem;
     font-weight: 500;
     min-width: 120px;
}

.captcha-challenge input {
     flex: 1;
     min-width: 100px;
     max-width: 200px;
}

.captcha-refresh {
     background-color: var(--bg-medium);
     border: 1px solid var(--red-base);
     border-radius: 4px;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--red-base);
     font-size: 1rem;
     padding: 0;
     transition: all 0.2s ease;
}

.captcha-refresh:hover {
     background-color: var(--red-light);
     color: white;
}

.required {
     color: var(--red-base);
     font-weight: 500;
}

/* Alternative contact section p */
.alternative-contact p {
     text-align: center;
     margin: 0 auto;
     max-width: 600px;
     font-size: 1rem; /* Match the page header paragraph size */
}

/* Form failure help */
#formFailureHelp {
     margin-top: 2rem;
     padding: 1rem;
     border: 1px solid #f0f0f0;
     border-radius: 4px;
     background-color: #f9f9f9;
     display: none;
     text-align: center;
}

#formFailureHelp p {
     text-align: center;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
     .contact-content {
          padding: 1rem;
     }

     .contact-form {
          padding: 1.5rem;
     }

     body.page-contact .page-header {
          padding: 0 1rem;
     }
}

/*------------------------------------*\
  #PAGE-SPECIFIC-STYLES
\*------------------------------------*/
/* Topics Page */
.topics-page .content {
     display: block;
     text-align: left;
     width: 100%;
     box-sizing: border-box;
     padding: 2rem;
}

.topics-page .content h1 {
     text-align: left;
     margin-left: 0;
     margin-right: auto;
     width: auto;
     max-width: 100%;
     margin-bottom: 1.5rem;
     font-size: 2.5rem;
     color: var(--red-base);
}

/* Make "by topic" link active by default on topics page */
.topics-page .sidebar a[href="/topics"].nav-link {
     background-color: var(--color-white);
     color: var(--red-base);
     font-weight: 600;
}

/* Reduce prominence of "Find a group" heading when topics is active */
.topics-page .sidebar .nav-group-title {
     font-weight: 400;
     opacity: 0.7;
}

/* Location Page */
/* Make location link active by default on location page, but not the parent */
.location-page .sidebar a.location-link,
.location-page .sidebar a.location-link.active {
     background-color: var(--color-white);
     color: var(--red-base);
     font-weight: 600;
}

/* Ensure parent link (FIND A GROUP) is not highlighted on location pages */
.location-page .sidebar a.parent-link {
     background-color: transparent;
     color: inherit;
     font-weight: normal;
}

/* Location search container styling */
.location-search-container {
     position: relative;
     max-width: 800px;
     margin: 0 auto 1.5rem;
}

.location-search-input {
     width: 100%;
     padding: 12px 16px 12px 2.5rem;
     border: 2px solid #c82525;
     border-radius: 8px;
     font-size: 1rem;
     box-shadow: 0 2px 6px rgba(200, 37, 37, 0.1);
     transition: all 0.2s ease;
}

.location-search-input:focus {
     outline: none;
     box-shadow: 0 2px 10px rgba(200, 37, 37, 0.2);
     border-color: #e02e2e;
}

.location-search-container .search-icon {
     position: absolute;
     left: 0.85rem;
     top: 50%;
     transform: translateY(-50%);
     color: #c82525;
}

/* Mobile adjustments for location search */
@media (max-width: 768px) {
     .location-search-container .search-icon {
          width: 18px;
          height: 18px;
          left: 0.65rem;
     }
}

/* SIMPLER PATH-BASED SOLUTION - Highlight "by location" for all city and state pages */
body[class*="page-cities-"] .sidebar a.location-link,
body[class*="page-states-"] .sidebar a.location-link,
body.page-location .sidebar a.location-link {
     background-color: var(--color-white);
     color: var(--red-base);
     font-weight: 600;
}

/* Add more margin for state page h1 headings */
body[class*="page-states-"] h1 {
     margin-bottom: 2.5rem; /* Increased bottom margin specifically for state pages */
}

/* Ensure parent link (FIND A GROUP) is not highlighted on state/city pages */
body[class*="page-cities-"] .sidebar a.parent-link,
body[class*="page-states-"] .sidebar a.parent-link,
body.page-location .sidebar a.parent-link {
     background-color: transparent;
     color: inherit;
     font-weight: normal;
}

/* Ensure the sidebar header is not affected by active states */
.location-page .sidebar-header,
.location-page .sidebar-header h1 {
     background-color: transparent;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
     margin-bottom: 1.5rem;
     padding: 1.5rem 1rem;
     margin-top: 0;
}

/* Make sure topics link is active on topics page */
body.page-topics .sidebar a.topic-link {
     background-color: var(--color-white);
     color: var(--red-base);
     font-weight: 600;
}

/* Home Page */
/* Make Home link active by default */
body.page-home .sidebar a[href="/"].nav-link,
body.page-index .sidebar a[href="/"].nav-link {
     background-color: var(--color-white);
     color: var(--red-base);
     font-weight: 600;
}

/* Navigation Active State Fixes */
/* Base rule - Home link should not have active styling by default */
.sidebar a[href="/"].nav-link {
     background-color: transparent;
     color: inherit;
     font-weight: normal;
}

/* Override for specific pages to ensure Home isn't active */
body.page-subscribe .sidebar a[href="/"].nav-link,
body.page-contact .sidebar a[href="/"].nav-link,
body.page-guides .sidebar a[href="/"].nav-link,
body.page-location .sidebar a[href="/"].nav-link,
body.page-topics .sidebar a[href="/"].nav-link,
body[class*="page-cities-"] .sidebar a[href="/"].nav-link,
body[class*="page-states-"] .sidebar a[href="/"].nav-link {
     background-color: transparent;
     color: inherit;
     font-weight: normal;
}

/* Make sure subscribe link is active on subscribe page */
body.page-subscribe .sidebar a[href="/subscribe"].nav-link {
     background-color: var(--color-white);
     color: var(--red-base);
     font-weight: 600;
}

/* Make sure contact link is active on contact page */
body.page-contact .sidebar a[href="/contact"].nav-link {
     background-color: var(--color-white);
     color: var(--red-base);
     font-weight: 600;
}

/* Make sure guides link is active on guides page */
body.page-guides .sidebar a[href="/guides"].nav-link {
     background-color: var(--color-white);
     color: var(--red-base);
     font-weight: 600;
}

/* Critical fixes for inconsistent font weight across all pages */
html body div.sidebar-header h1,
html body .sidebar div.sidebar-header h1,
html body #sidebar div.sidebar-header h1,
.sidebar-header h1,
.sidebar h1 {
     font-weight: 700;
     font-family:
          "Inter",
          -apple-system,
          BlinkMacSystemFont,
          sans-serif;
}

html body div.sidebar-header h1 a,
html body .sidebar div.sidebar-header h1 a,
html body #sidebar div.sidebar-header h1 a,
.sidebar-header h1 a,
.sidebar h1 a {
     font-weight: inherit;
     font-family: inherit;
}

/* Classes for JavaScript Manipulation */
.reset-nav-group {
     background-color: transparent;
     color: inherit;
     font-weight: 600;
     opacity: 1;
}

/*------------------------------------*\
  #MEDIA-QUERIES
\*------------------------------------*/

/* XXL screens - 1400px and above */
@media (max-width: 1400px) {
     body .content,
     .layout .content,
     .content {
          max-width: 1000px;
          margin: 0 auto;
          padding: 3rem 2rem;
     }
}

/* XL screens - 1200px and below */
@media (max-width: 1200px) {
     body .content,
     .layout .content,
     .content {
          max-width: 900px;
          margin: 0 1rem;
          padding: 3rem 2rem;
     }
}

/* Large screens - 1020px and below */
@media (max-width: 1020px) {
     /* General Layout */
     .layout {
          flex-direction: column;
          padding-left: 0; /* Remove padding on mobile to avoid empty space */
     }

     h1 {
          font-size: 1rem;
     }

     body .content,
     .layout .content,
     .content {
          margin-left: 0;
     }

     /* Sidebar - position fixed needs specific transform treatment */
     .sidebar {
          position: fixed;
          top: 0;
          left: 0;
          transform: translateX(-100%);
          transition: transform 0.3s ease;
          height: 100vh;
          overflow-y: auto;
          width: var(--sidebar-width);
          box-shadow: none;
     }

     .sidebar.active {
          transform: translateX(0);
          box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
     }

     .mobile-menu-button {
          display: flex;
     }

     /* Topics and Cards */
     .topics-grid {
          grid-template-columns: repeat(2, 1fr);
     }

     /* Nav adjustments */
     .nav-link {
          padding: 0.85rem 1.5rem;
     }

     .city-link {
          padding: 0.4rem;
     }

     .nav-group-title {
          padding: 0.85rem 1.5rem;
     }

     /* Ensure sidebar header maintains proper layout */
     .sidebar-header {
          flex-direction: column;
          align-items: center;
          gap: 0.75rem;
     }

     .sidebar-header h1 {
          margin: 0;
          padding: 0;
          font-size: 1.4rem;
     }

     /* Table of Contents */
     .toc {
          float: none;
          width: 100%;
          margin: 2rem 0;
     }

     .city-page {
          width: 100%;
          margin: 0;
     }

     /* City lists */
     .cities-list {
          grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
          gap: 0.75rem;
     }

     /* State page adjustments */
     .state-page .cities-list > h2 {
          padding: 0.6rem 1.25rem;
     }

     .state-page section:not(.cities-list-container) > h2 {
          padding: 0.6rem 0;
     }

     .state-page .city-links-container {
          grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
          padding: 1rem 1.5rem 1rem 1.5rem;
     }
}

/* Medium screens - 768px and below - updated layout for clarity */
@media (max-width: 768px) {
     /* General Text Size Increases */
     body {
          font-size: var(--mobile-font-size);
     }

     body p,
     .content p {
          font-size: 14px;
          line-height: 1.5;
     }

     body li,
     .content li {
          font-size: 14px;
     }

     body a,
     .content a,
     body .nav-link,
     body .city-link,
     body .state-link {
          font-size: 14px;
     }

     body h1,
     .content h1 {
          font-size: 24px;
          line-height: 1.2;
     }

     /* Specifically target the homepage h1 to make it smaller and one line */
     body.page-home h1 {
          font-size: 22px;
          padding-top: 1.5rem;
          padding-bottom: 1rem;
          line-height: 1;
          margin-bottom: 0.5rem;
     }

     body h2,
     .content h2 {
          font-size: 20px;
          line-height: 1.3;
     }

     body h3,
     .content h3 {
          font-size: 18px;
          line-height: 1.3;
     }

     /* Touch Optimization */
     a,
     button,
     .nav-link,
     .city-link,
     .state-link {
          min-height: 44px;
          min-width: 44px;
          display: inline-flex;
          align-items: center;
     }

     .nav-link,
     .city-link,
     .state-link {
          padding: 0.9rem 1.2rem;
     }

     a.city-link {
          font-size: 14px;
          padding: 0.6rem 0.75rem;
          min-height: 44px;
          background-color: var(--background-color);
          box-shadow: none;
          transform: none;
     }

     /* Layout */
     body .content,
     .content {
          padding: 1rem;
          margin-left: 0;
          padding-top: 4rem; /* Add space for the menu button */
          width: 100%;
          box-sizing: border-box;
          /* Ensure content stays within viewport in Safari */
          max-width: 100vw;
          overflow-x: hidden;
     }

     /* Compact stats for mobile */
     .initiative-stats {
          padding: 1.25rem 1rem;
          margin: 1rem auto 2rem;
          border-width: 1px;
     }

     .stats-container {
          flex-direction: row;
          flex-wrap: wrap;
          gap: 1rem;
     }

     .stat-item {
          flex: 1;
          min-width: 90px;
     }

     .stat-number {
          font-size: 2.25rem;
          margin-bottom: 0.25rem;
     }

     .stat-label {
          font-size: 0.85rem;
          font-weight: 600;
     }

     /* Safari-specific adjustments */
     @supports (-webkit-touch-callout: none) {
          body {
               font-size: var(--safari-mobile-font-size);
          }

          body p,
          .content p,
          body li,
          .content li {
               font-size: 15px;
          }

          body a,
          .content a,
          body .nav-link,
          body .city-link,
          body .state-link {
               font-size: 15px;
          }

          body h1,
          .content h1 {
               font-size: var(--h1-size-safari-mobile);
          }

          body h2,
          .content h2 {
               font-size: var(--h2-size-safari-mobile);
          }

          /* Enhance touch targets for Safari */
          a,
          button,
          .nav-link,
          .city-link,
          .state-link {
               min-height: 54px;
               padding: 1rem 1.3rem;
          }

          /* Form elements specific to Safari */
          input,
          textarea,
          select,
          .form-group input,
          .form-group textarea,
          .form-group select {
               font-size: 0.9rem !important; /* Important to override any other styles */
               min-height: 54px;
               padding: 0.75rem 1rem;
          }

          button,
          .btn,
          .btn-base,
          input[type="submit"] {
               font-size: 0.9rem !important;
               min-height: 54px;
               padding: 0.75rem 1.2rem;
          }

          .form-group label {
               font-size: 1rem;
               margin-bottom: 0.5rem;
          }

          /* Safari-specific width fixes for common elements */
          .initiative-stats,
          .stats-container,
          .buttons-container,
          .find-groups-button {
               width: 100%;
               max-width: 100%;
               box-sizing: border-box;
          }

          /* Ensure large numbers don't cause layout issues */
          .stat-number {
               font-size: 3rem;
               max-width: 100%;
               overflow: hidden;
               text-overflow: ellipsis;
          }

          /* Force main content width to match viewport exactly */
          .content {
               width: 100vw;
               min-width: 100%;
               max-width: 100vw;
               margin: 0;
               padding: 1rem;
               padding-top: 4rem;
               box-sizing: border-box;
          }

          /* Adjust layout for proper viewport fit */
          .layout {
               width: 100vw;
               min-width: 100%;
               max-width: 100vw;
               margin: 0;
               padding: 0;
               overflow-x: hidden;
          }
     }

     /* State Link */
     .states-list {
          max-width: 100%;
          padding: 0 1rem;
          margin: 1rem 0;
          width: 100%;
          grid-template-columns: 1fr;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
     }

     .state-link {
          padding: 0.75rem 1rem;
          margin-bottom: 0.5rem;
          background-color: var(--background-color);
          width: 100%;
          box-sizing: border-box;
          text-align: left;
          display: block;
          margin-left: 0;
          margin-right: 0;
          border-radius: 4px;
     }

     /* Location Page */
     body .location-page .content h2,
     html .location-page .content h2,
     .location-page .content h2 {
          padding-left: 3.75rem;
          text-align: left;
          margin: 1rem 0 1.5rem 0;
          max-width: 100%;
          width: 100%;
     }

     .cities-list {
          grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     }

     .location-header h1 {
          font-size: 2rem;
     }

     body.menu-open {
          overflow: hidden;
     }

     /* Statistics container */
     .stats-container {
          flex-direction: column;
          gap: 2rem;
     }

     /* Buttons */
     .buttons-container {
          flex-direction: column;
          gap: 1rem;
     }

     .find-groups-button {
          width: 100%;
          min-width: auto;
          padding: 1rem;
     }

     .button-text {
          font-size: 1.15rem;
     }

     .action-buttons {
          flex-direction: column;
     }

     .btn {
          width: 100%;
          text-align: center;
     }

     /* Blog/Post Entries */
     #log-heading {
          font-size: 2rem;
     }

     .post-entry time {
          position: static;
          display: block;
          margin-top: 0.25rem;
          margin-bottom: 0.5rem;
     }

     .post-entry-title {
          padding-right: 0;
          font-size: 1.3rem;
     }

     .post-entry-tagline {
          font-size: 1.15rem;
     }

     /* Contact Form */
     .contact-content {
          padding: 1rem;
     }

     .contact-form {
          padding: 1.5rem;
     }

     /* Topic Styles */
     .topics-page .content {
          padding: 1.5rem;
     }

     /* Increased specificity to avoid !important */
     body .topics-grid,
     html .topics-grid,
     .topics-page .topics-grid,
     .topics-grid {
          grid-template-columns: 1fr;
          gap: 0.5rem;
          padding: 1rem 0;
     }

     /* Increased specificity to avoid !important */
     body .topic-card,
     html .topic-card,
     .topics-page .topics-grid .topic-card,
     .topic-card {
          padding: 0.75rem 1rem;
          margin-bottom: 0.5rem;
          background-color: var(--background-color);
          border: 1px solid var(--red-base);
          width: 100%;
          box-sizing: border-box;
          text-align: left;
          display: flex;
          align-items: center;
          min-height: auto;
          border-radius: 4px;
     }

     .topics-page .content h1 {
          font-size: 1.8rem;
          margin-bottom: 1rem;
          line-height: 1.1;
     }

     /* Increased specificity to avoid !important */
     body .topic-name,
     html .topic-name,
     .topics-page .topic-name,
     .topic-name {
          font-size: 1.1rem;
          font-weight: 500;
          line-height: 1.2;
     }

     /* Increased specificity to avoid !important */
     body .topic-icon,
     html .topic-icon,
     .topics-page .topic-icon,
     .topics-page .topics-grid .topic-card .topic-icon,
     .topic-icon {
          font-size: 1.2rem;
          height: 1.2rem;
          width: 1.2rem;
          min-width: 1.2rem;
          margin-right: 0.8rem;
     }

     /* State page adjustments */
     .state-page .cities-list > h2 {
          padding: 0.6rem 1.25rem;
     }

     .state-page section:not(.cities-list-container) > h2 {
          padding: 0.6rem 0;
     }

     /* Increased specificity to avoid !important */
     body .state-page .city-links-container,
     html .state-page .city-links-container,
     .state-page .city-links-container {
          grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
          padding: 0.75rem 1.5rem;
     }
}

/* Fix HOME active state */
.nav-link-base.nav-link[href="/"] {
     background-color: var(--red-base);
     font-weight: 600;
     color: white;
}

/* Reset the navigation styles for individual state control */
.sidebar nav {
     display: flex;
     flex-direction: column;
     padding: 0;
}

/* Sidebar-specific navigation link styling 
   This extends the base nav-link class with sidebar-specific properties */
.sidebar .nav-link {
     padding: 0.85rem 1.5rem;
     border-top: none;
     border-left: none;
     border-right: none;
     margin: 0;
     position: relative;
}

/* Additional styles for indented links */
.sidebar .nav-link-indented {
     padding-left: 2.5rem;
     position: relative;
}

.sidebar .nav-link-indented::before {
     content: "";
     position: absolute;
     left: 1.5rem;
     top: 0;
     bottom: 0;
     width: 1px;
     background-color: rgba(0, 0, 0, 0.1);
     opacity: 0.8;
}

/* City page specific styles */
.city-page .city-section {
     padding-bottom: 40px;
     max-width: 1000px;
}

.city-page .city-section h2,
.city-page h2,
body[class*="page-cities-"] h2,
.city-content h2 {
     font-size: 2rem;
     font-family: var(--heading-font);
     color: var(--red-base);
     font-weight: 200;
     padding-top: 1rem;
     padding-left: 0;
     padding-right: 0;
     border-top: 2px solid var(--red-base);
     text-align: left;
}

/* Ensure mobile styles properly handle these headings */
@media (max-width: 768px) {
     section#manhattan h2,
     section#brooklyn h2,
     section#bronx h2,
     section#queens h2,
     section#staten-island h2 {
          font-size: 1.5rem;
          padding: 0.75rem 1rem;
          margin-top: 1.5rem;
          margin-bottom: 1rem;
     }
}

.city-page .initiative {
     margin-bottom: 20px;
     padding: 0;
     background-color: transparent;
     border-radius: 0;
     border-left: none;
}

/*------------------------------------*\
  #SUBSCRIBE PAGE STYLES
\*------------------------------------*/
/* Basic layout for subscribe content */
body.page-subscribe .content {
     max-width: 800px;
     margin: 0 auto;
}

/* Subscribe page header styling */
body.page-subscribe .page-header {
     max-width: 800px;
     margin: 0 auto 2rem;
     text-align: center;
}

body.page-subscribe .page-header h1 {
     text-align: center;
     margin-bottom: 1rem;
}

body.page-subscribe .page-header p {
     text-align: center;
     max-width: 600px;
     margin: 0 auto;
     font-size: 1rem;
     line-height: 1.5;
}

/* Remove any content-based pseudo-elements that might be adding text */
body.page-subscribe .page-header h1::before,
body.page-subscribe .page-header h1::after,
body.page-subscribe .page-header p::before,
body.page-subscribe .page-header p::after {
     content: none !important;
}

/* Ensure all paragraphs in the subscribe page content are centered */
body.page-subscribe .content p {
     text-align: center;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
}

/* Mobile responsiveness for subscribe page */
@media (max-width: 768px) {
     body.page-subscribe .page-header {
          padding: 0 1rem;
     }
}

/* Guides Page Styles */
.page-guides .content {
     position: relative;
     min-height: 80vh;
}

.page-guides h1 {
     text-align: center;
     margin-bottom: 2rem;
}

/* Make sure guides link is active on guides page */
body.page-guides .sidebar a[href="/guides"].nav-link {
     background-color: var(--color-white);
     color: var(--red-base);
     font-weight: 600;
}

/* Topics Page */
.topics-page .content {
     display: block;
     text-align: left;
     width: 100%;
     box-sizing: border-box;
     padding: 2rem;
}

/* Ensure site logo doesn't get a bottom border on hover */
.sidebar-header a:hover {
     border-bottom: none;
}

.sidebar-header a:hover .site-logo {
     border-bottom: none;
}

a:hover .site-logo {
     border-bottom: none;
}

/* Add this to your existing CSS outside any media query with higher specificity */
.stat-mobile-label {
     display: none;
     font-size: 1.2rem;
     font-weight: 700;
     color: var(--red-base);
     font-family: "Saira Semi Condensed", sans-serif;
     text-align: left;
     width: 100%;
}

/*------------------------------------*\
  #HOMEPAGE SPECIFIC STYLES
\*------------------------------------*/
/* Enhanced styling for homepage */
body.page-home {
     background: linear-gradient(160deg, #fff5f5 0%, #fff8f8 100%);
}

body.page-home .content {
     max-width: 1200px;
     margin: 0 auto;
     padding: 2rem;
}

body.page-home h1 {
     font-size: 4rem;
     color: #bc2a2a;
     text-align: center;
     margin-bottom: 2rem;
     text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.05);
     position: relative;
}

/* Tagline styling */
.tagline {
     text-align: center;
     font-size: 1.2rem;
     color: #666;
     margin: 0.5rem auto 2rem;
     max-width: 600px;
}

.homepage-content {
     max-width: 1000px;
     margin: 0 auto;
     position: relative;
}

.homepage-content:before {
     content: "";
     position: absolute;
     top: -30px;
     left: 10%;
     right: 10%;
     height: 1px;
     background: rgba(200, 37, 37, 0.1);
     z-index: -1;
}

/* Button styling for homepage */
.find-groups-buttons {
     margin: 2.5rem auto;
     max-width: 800px;
}

.buttons-container {
     display: flex;
     flex-direction: row;
     gap: 1.5rem;
     justify-content: center;
}

.find-groups-button {
     background-color: var(--red-base);
     color: white;
     padding: 1rem 1.5rem;
     border-radius: 8px;
     text-decoration: none;
     font-weight: 600;
     font-size: 1.1rem;
     transition: all 0.2s ease;
     box-shadow: 0 4px 6px rgba(200, 37, 37, 0.2);
     border: 2px solid var(--red-base);
     flex: 1;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
}

.primary-button {
     background-color: var(--red-base);
     color: white;
}

.secondary-button {
     background-color: white;
     color: var(--red-base);
}

.button-icon {
     width: 20px;
     height: 20px;
}

.find-groups-button:hover {
     background-color: #e02e2e;
     transform: translateY(-2px);
     box-shadow: 0 6px 12px rgba(200, 37, 37, 0.25);
}

.find-groups-button:active {
     transform: translateY(0px);
     box-shadow: 0 2px 4px rgba(200, 37, 37, 0.3);
}

.button-text {
     font-family: var(--heading-font);
}

/* Stats section styling */
.initiative-stats {
     background: white;
     border: 2px solid var(--red-base);
     border-radius: 15px;
     padding: 2rem;
     margin: 2rem auto 3rem;
     max-width: 800px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
}

.stats-container {
     display: flex;
     justify-content: space-around;
     align-items: center;
}

.stat-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 0.5rem 1rem;
     position: relative;
}

.stat-number {
     font-size: 4rem; /* Increased from 3.5rem */
     font-weight: 800;
     color: var(--red-base);
     line-height: 1;
     margin-bottom: 0.75rem;
     font-family: var(--heading-font);
     display: block; /* Ensure visibility */
}

.stat-label {
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--red-base);
     text-transform: uppercase;
     font-family: var(--heading-font);
     letter-spacing: 0.05em;
     display: block; /* Ensure visibility */
}

/* Mobile stats display */
.stat-mobile-label {
     display: none; /* Hidden by default */
     font-size: 1.4rem;
     font-weight: 700;
     text-align: left;
     font-family: var(--heading-font);
     color: var(--red-base);
     line-height: 1.2;
}

/* Desktop stats layout - always use this for non-mobile */
@media (min-width: 769px) {
     .stat-mobile-label {
          display: none;
     }

     .stat-number,
     .stat-label {
          display: block;
     }

     .stats-container {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
     }

     .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
     }

     /* Override any conflicting styles */
     body .stat-number,
     html .stat-number,
     .page-home .stat-number,
     body .stat-label,
     html .stat-label,
     .page-home .stat-label {
          display: block;
     }

     body .stats-container,
     html .stats-container,
     .page-home .stats-container {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
     }

     body .stat-item,
     html .stat-item,
     .page-home .stat-item {
          width: auto;
          text-align: center;
          padding: 0.5rem 1rem;
          margin: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
     }
}

/* Mobile styles - only apply these on mobile screens */
@media (max-width: 768px) {
     /* Mobile stats layout */
     body .stat-number,
     html .stat-number,
     .page-home .stat-number,
     .stat-number,
     body .stat-label,
     html .stat-label,
     .page-home .stat-label,
     .stat-label {
          display: none;
     }

     /* Mobile stats display */
     body .stat-mobile-label,
     html .stat-mobile-label,
     .page-home .stat-mobile-label,
     .stat-mobile-label {
          display: block;
          font-size: 1.3rem;
          line-height: 1.2;
          font-weight: 700;
          color: var(--red-base);
          font-family: var(--heading-font);
          text-align: left;
          margin: 0;
          padding: 0;
     }

     /* Mobile vertical stats layout */
     body .stats-container,
     html .stats-container,
     .page-home .stats-container,
     .stats-container {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 1rem;
          width: 100%;
     }

     body .stat-item,
     html .stat-item,
     .page-home .stat-item,
     .stat-item {
          width: 100%;
          text-align: left;
          padding: 0 0.5rem;
          margin: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          min-height: auto;
     }

     body .initiative-stats,
     html .initiative-stats,
     .page-home .initiative-stats,
     .initiative-stats {
          padding: 1.25rem;
          margin: 0.75rem auto 1.25rem;
          border-width: 1px;
     }
}

/* Description below stats */
.stats-description {
     text-align: center;
     color: #555;
     margin: 1.5rem auto 0;
     font-size: 1.1rem;
     max-width: 600px;
     line-height: 1.5;
     border-top: 1px solid rgba(200, 37, 37, 0.1);
     padding-top: 1.5rem;
     margin-top: 1.5rem;
}

/* Mobile stats layout */
body .stat-number,
html .stat-number,
.page-home .stat-number,
.stat-number,
body .stat-label,
html .stat-label,
.page-home .stat-label,
.stat-label {
     display: none;
}

/* Mobile stats display */
body .stat-mobile-label,
html .stat-mobile-label,
.page-home .stat-mobile-label,
.stat-mobile-label {
     display: block;
     font-size: 1.3rem;
     line-height: 1.2;
     font-weight: 700;
     color: var(--red-base);
     font-family: "Saira Semi Condensed", sans-serif;
     text-align: left;
     margin: 0;
     padding: 0;
}

/* Mobile vertical stats layout */
body .stats-container,
html .stats-container,
.page-home .stats-container,
.stats-container {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 1rem;
     width: 100%;
}

body .stat-item,
html .stat-item,
.page-home .stat-item,
.stat-item {
     width: 100%;
     text-align: left;
     padding: 0 0.5rem;
     margin: 0;
     display: flex;
     flex-direction: row;
     align-items: center;
     min-height: auto;
}

body .initiative-stats,
html .initiative-stats,
.page-home .initiative-stats,
.initiative-stats {
     padding: 1.25rem;
     margin: 0.75rem auto 1.25rem;
     border-width: 1px;
}

/* Mobile button layout */
.find-groups-buttons {
     margin: 2.5rem auto;
     max-width: 800px;
}

.buttons-container {
     display: flex;
     flex-direction: row;
     gap: 1.5rem;
     width: 100%;
     justify-content: center;
}

.find-groups-button {
     flex: 1;
     margin: 0;
     padding: 0.75rem 1rem;
     text-align: center;
     justify-content: center;
}

/* Mobile button icons */
.button-icon {
     width: 20px;
     height: 20px;
}

/* Mobile button styling */
.secondary-button {
     background-color: white;
     color: var(--red-base);
}

.primary-button {
     background-color: var(--red-base);
     color: white;
}

/* Mobile stats description */
.stats-description {
     font-size: 1rem;
     padding-top: 1.2rem;
     margin-top: 1.2rem;
}

.cities-list {
     grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

/* Desktop stats layout */
@media (min-width: 481px) {
     .stat-mobile-label {
          display: none;
     }

     .stat-number,
     .stat-label {
          display: block;
     }

     .stats-container {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
     }

     .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
     }
}

@media (max-width: 768px) {
     /* Mobile styles for city links */
     a.city-link {
          font-size: 0.9rem;
          padding: 0.6rem 0.75rem;
          min-height: 44px;
          background-color: var(--background-color);
          box-shadow: none;
          transform: none;
     }

     /* City page headings adjustment */
     .city-page .city-section h2,
     .city-page section h2,
     .state-page section h2,
     .state-page .cities-list > h2,
     .city-content section h2,
     section.city-section h2 {
          font-size: 1.4rem;
     }

     /* Initiative title adjustment */
     .initiative a {
          font-size: 1.05rem;
     }
}

.cities-list-container .city-link {
     border: none;
     background-color: transparent;
     box-shadow: none;
}

.cities-list-container .city-link:hover {
     background-color: var(--bg-medium);
     transform: none;
     box-shadow: none;
     border: none;
}

@media (max-width: 768px) {
     /* Remove the ID-specific rules and replace with a general selector */
     section.city-section h2 {
          font-size: 1.5rem;
          margin-top: 2rem;
          margin-bottom: 1rem;
          padding: 0.5rem 0;
          letter-spacing: 0.01em;
          font-weight: 600;
          background-color: var(--bg-medium);
          border-radius: 6px;
          border-left: none;
          box-shadow: 0 1px 3px rgba(200, 37, 37, 0.12);
          text-align: center;
     }
}

@media (max-width: 768px) {
     /* Comprehensive selector for all city/state section headings in mobile view */
     .city-page .city-section h2,
     .city-page section h2,
     .state-page section h2,
     .state-page .cities-list > h2,
     .city-content section h2,
     section.city-section h2 {
          font-size: 1.4rem;
          margin-top: 2rem;
          margin-bottom: 1rem;
          padding: 0.5rem 0;
          letter-spacing: 0.01em;
          font-weight: 600;
          background-color: var(--bg-medium);
          border-radius: 6px;
          border-left: none;
          box-shadow: 0 1px 3px rgba(200, 37, 37, 0.12);
          text-align: center;
     }
}

/* Desktop-specific styling */
@media (min-width: 1020px) {
     .content-wrapper {
          display: block; /* Ensure it's not flexbox on desktop */
     }

     .city-content {
          order: initial; /* Remove the flexbox ordering */
     }

     .toc-container {
          order: initial; /* Remove the flexbox ordering */
     }
}

/* Mobile adjustments for content-wrapper */
@media (max-width: 768px) {
     .content-wrapper {
          padding: 0 0.75rem;
     }
}

/* Adjust the main content area padding */
.content {
     padding: 1rem;
     padding-top: 4rem; /* Keep space for the menu button */
}

/* Make breadcrumbs more compact */
.breadcrumb {
     margin-bottom: 0.5rem;
     font-size: 0.85rem;
}

/*------------------------------------*\
  #MOBILE-OPTIMIZATIONS
\*------------------------------------*/

/* Optimize touch targets for mobile */
@media (max-width: 768px) {
     /* Ensure all interactive elements meet accessibility requirements for touch targets */
     button,
     input[type="button"],
     input[type="submit"],
     input[type="reset"],
     input[type="checkbox"],
     input[type="radio"],
     select,
     .btn,
     .btn-base,
     .nav-link,
     .nav-link-base,
     .location-link,
     .city-link,
     .state-link,
     a[href]:not(.sidebar-header a) {
          min-height: var(--min-touch-target-size);
          min-width: var(--min-touch-target-size);
          padding: 12px; /* Ensure enough padding for easy touching */
          margin: 4px 0; /* Add spacing between touch targets */
          display: inline-flex;
          align-items: center;
          touch-action: manipulation; /* Prevent delays on touch */
     }

     /* Improve spacing between buttons and links when stacked for mobile tapping */
     button + button,
     a + a,
     .btn + .btn,
     .btn-base + .btn-base,
     .city-link + .city-link,
     select + button,
     input + button {
          margin-top: var(--safe-touch-spacing);
     }

     /* Add subtle feedback on tap for mobile devices */
     a:active,
     button:active,
     .btn:active,
     .btn-base:active,
     .city-link:active,
     .state-link:active,
     .nav-link:active,
     .location-link:active {
          opacity: 0.7;
          transform: scale(0.98);
     }

     /* Optimize form fields for mobile input */
     input,
     select,
     textarea {
          font-size: 16px !important; /* Prevent iOS zoom on input focus */
          padding: 12px;
          border-radius: 8px;
          box-shadow: none;
          -webkit-appearance: none; /* Remove default styling */
          appearance: none;
     }

     /* Improve form field selection */
     input:focus,
     select:focus,
     textarea:focus {
          outline: 3px solid rgba(200, 37, 37, 0.3);
          outline-offset: 1px;
     }

     /* Apply appropriate mobile keyboard types */
     input[type="email"] {
          -webkit-appearance: none;
          appearance: none;
     }

     /* Optimize navigation for mobile */
     .content {
          /* Add content-visibility to improve render performance */
          content-visibility: auto;
          contain-intrinsic-size: 1px 5000px; /* Estimate before rendering */
     }

     /* Optimize images for mobile loading */
     img {
          max-width: 100%;
          height: auto;
          content-visibility: auto;
     }

     /* Enhanced scrolling experience */
     .toc,
     .sidebar {
          -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
          scroll-behavior: smooth;
          scrollbar-width: thin;
     }

     /* Sticky call-to-action for important actions */
     .mobile-cta {
          position: sticky;
          bottom: 16px;
          left: 0;
          right: 0;
          z-index: 90;
          padding: 12px;
          margin: 0 12px;
          background: white;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          display: flex;
          justify-content: center;
          margin-top: 32px;
     }

     /* Hide elements that aren't mobile-friendly */
     .desktop-only {
          display: none !important;
     }

     /* Create easy finger-scrollable area for table of contents */
     .toc {
          -webkit-overflow-scrolling: touch;
          scroll-snap-type: y proximity;
     }

     .toc-link {
          scroll-snap-align: start;
          padding: 12px 16px;
          margin-bottom: 4px;
     }
}

/* Optimize loading performance for content */
@media (max-width: 768px) {
     /* Use content-visibility for large sections to improve render performance */
     section,
     .cities-section,
     .topics-container,
     .daily-log,
     .initiative-stats {
          content-visibility: auto;
          contain-intrinsic-size: 1px 800px;
     }

     /* Make sure the visible content is rendered immediately */
     .content > *:first-child,
     .mobile-toc-toggle,
     .breadcrumb {
          content-visibility: visible;
     }
}

/* Extra small screen tweaks */
@media (max-width: 375px) {
     body {
          font-size: 13px;
     }

     .find-groups-buttons {
          margin: 0.5rem 0;
     }

     .city-link {
          font-size: 0.8rem;
          padding: 10px 12px;
     }

     h1 {
          font-size: 1.6rem;
     }
}

/* Mobile form optimizations */
@media (max-width: 768px) {
     .form-group {
          margin-bottom: 24px;
     }

     .form-group label {
          font-size: 1rem;
          margin-bottom: 8px;
          display: block;
     }

     /* Make file inputs mobile-friendly */
     input[type="file"] {
          width: 100%;
          padding: 12px;
          background: white;
          border: 1px solid #ddd;
          border-radius: 8px;
          font-size: 14px;
     }

     /* Mobile-optimized captcha */
     .captcha-challenge {
          flex-wrap: wrap;
     }

     .captcha-challenge span {
          width: 100%;
          margin-bottom: 8px;
     }

     .captcha-challenge input {
          flex: 1;
          min-width: calc(100% - 50px);
     }
}

/* Back to top button for mobile scrolling */
.back-to-top {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: var(--red-base);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     opacity: 0;
     visibility: hidden;
     transition:
          opacity 0.3s,
          visibility 0.3s;
     z-index: 80;
     border: none;
}

.back-to-top.visible {
     opacity: 1;
     visibility: visible;
}

.back-to-top svg {
     width: 24px;
     height: 24px;
}

/* Improved focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
     outline: 3px solid var(--red-base);
     outline-offset: 3px;
}

/* State page mobile optimizations */
@media (max-width: 768px) {
     /* Improve the state page layout for mobile */
     .state-page {
          padding: 0.5rem;
     }

     /* Enhance the regions/cities section header */
     .state-page section > h2,
     .state-page .cities-list > h2 {
          text-align: center;
          width: 100%;
          background-color: var(--red-base);
          color: white;
          padding: 0.85rem;
          margin: 1.5rem 0 1rem;
          border-radius: 8px;
          font-size: 1.3rem;
          box-shadow: 0 2px 4px rgba(192, 28, 28, 0.2);
     }

     /* Optimize city/region links grid for mobile - single column layout */
     .state-page .city-links-container {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          padding: 0.75rem;
     }

     /* Enhanced city links for mobile */
     .state-page .city-links-container a,
     .state-page .city-links-container .city-link {
          display: flex;
          align-items: center;
          width: 100%;
          min-height: 54px; /* Larger touch target */
          padding: 0.9rem 1rem;
          background-color: white;
          border-radius: 6px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          font-size: 1.1rem;
          font-weight: 500;
          position: relative;
          margin: 0;
          transition: all 0.2s ease;
     }

     /* Add arrow indicator for city links */
     .state-page .city-links-container a::after,
     .state-page .city-links-container .city-link::after {
          content: "→";
          position: absolute;
          right: 1rem;
          opacity: 0.6;
          font-size: 1.1rem;
          transition: transform 0.2s ease;
     }

     /* Improved active state feedback */
     .state-page .city-links-container a:active,
     .state-page .city-links-container .city-link:active {
          background-color: var(--bg-medium);
          transform: translateY(1px);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
     }

     .state-page .city-links-container a:active::after,
     .state-page .city-links-container .city-link:active::after {
          transform: translateX(3px);
          opacity: 1;
     }

     /* Remove the existing hover styling that doesn't work well on touch devices */
     .state-page .city-links-container a:hover,
     .state-page .city-links-container .city-link:hover {
          background-color: white;
          transform: none;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          border-bottom: none;
     }

     /* Main state heading */
     .state-page h1 {
          font-size: 2rem;
          text-align: center;
          margin: 0.5rem 0 1rem;
     }

     /* When there are many city links, provide visual grouping */
     .state-page .cities-list {
          margin-bottom: 2rem;
          border-radius: 10px;
          overflow: hidden;
          border: 1px solid rgba(192, 28, 28, 0.2);
     }
}

/* Extra small screens need additional adjustments */
@media (max-width: 375px) {
     .state-page .city-links-container a,
     .state-page .city-links-container .city-link {
          min-height: 48px;
          padding: 0.75rem 1rem;
          font-size: 1rem;
     }

     .state-page .city-links-container a::after,
     .state-page .city-links-container .city-link::after {
          font-size: 0.9rem;
     }
}

/* Mobile stats layout - LIMIT THIS TO MOBILE ONLY */
@media (max-width: 768px) {
     body .stat-number,
     html .stat-number,
     .page-home .stat-number,
     .stat-number,
     body .stat-label,
     html .stat-label,
     .page-home .stat-label,
     .stat-label {
          display: none;
     }

     /* Mobile stats display */
     body .stat-mobile-label,
     html .stat-mobile-label,
     .page-home .stat-mobile-label,
     .stat-mobile-label {
          display: block;
          font-size: 1.3rem;
          line-height: 1.2;
          font-weight: 700;
          color: var(--red-base);
          font-family: "Saira Semi Condensed", sans-serif;
          text-align: left;
          margin: 0;
          padding: 0;
     }

     /* Mobile vertical stats layout */
     body .stats-container,
     html .stats-container,
     .page-home .stats-container,
     .stats-container {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 1rem;
          width: 100%;
     }

     body .stat-item,
     html .stat-item,
     .page-home .stat-item,
     .stat-item {
          width: 100%;
          text-align: left;
          padding: 0 0.5rem;
          margin: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          min-height: auto;
     }
}

/* Desktop stats layout - explicitly show big numbers */
@media (min-width: 769px) {
     /* Ensure stats are visible */
     .stat-number,
     body .stat-number,
     html .stat-number,
     .page-home .stat-number {
          display: block;
          font-size: 4.5rem;
          font-weight: 800;
          color: var(--red-base);
          line-height: 1;
          margin-bottom: 0.75rem;
          font-family: var(--heading-font);
     }

     .stat-label,
     body .stat-label,
     html .stat-label,
     .page-home .stat-label {
          display: block;
          font-size: 1.1rem;
          font-weight: 700;
          color: var(--red-base);
          text-transform: uppercase;
          font-family: var(--heading-font);
          letter-spacing: 0.05em;
     }

     /* Hide mobile labels */
     .stat-mobile-label,
     body .stat-mobile-label,
     html .stat-mobile-label,
     .page-home .stat-mobile-label {
          display: none;
     }

     /* Ensure proper container layout */
     .stats-container,
     body .stats-container,
     html .stats-container,
     .page-home .stats-container {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          width: 100%;
     }

     /* Ensure proper item layout */
     .stat-item,
     body .stat-item,
     html .stat-item,
     .page-home .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          width: auto;
          padding: 0.5rem 1rem;
     }
}

@media (min-width: 769px) {
     .stat-mobile-label {
          display: none !important;
     }

     .stat-number,
     .stat-label {
          display: block !important;
     }

     /* Make stats bigger with important flags to override any conflicting styles */
     .stat-number,
     body .stat-number,
     html .stat-number,
     .page-home .stat-number {
          display: block !important;
          font-size: 5rem !important;
          font-weight: 800 !important;
          color: var(--red-base) !important;
          line-height: 1 !important;
          margin-bottom: 0.75rem !important;
          font-family: var(--heading-font) !important;
     }

     .stat-label,
     body .stat-label,
     html .stat-label,
     .page-home .stat-label {
          display: block !important;
          font-size: 1.1rem !important;
          font-weight: 700 !important;
          color: var(--red-base) !important;
          text-transform: uppercase !important;
          font-family: var(--heading-font) !important;
          letter-spacing: 0.05em !important;
     }

     .stats-container {
          display: flex !important;
          flex-direction: row !important;
          justify-content: space-around !important;
          align-items: center !important;
     }

     .stat-item {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          text-align: center !important;
     }

     /* Override any conflicting styles */
     body .stat-number,
     html .stat-number,
     .page-home .stat-number,
     body .stat-label,
     html .stat-label,
     .page-home .stat-label {
          display: block !important;
     }

     body .stats-container,
     html .stats-container,
     .page-home .stats-container {
          display: flex !important;
          flex-direction: row !important;
          justify-content: space-around !important;
          align-items: center !important;
     }

     body .stat-item,
     html .stat-item,
     .page-home .stat-item {
          width: auto !important;
          text-align: center !important;
          padding: 0.5rem 1rem !important;
          margin: 0 !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
     }

     /* Ensure proper styling for the stats container */
     .initiative-stats,
     body .initiative-stats,
     html .initiative-stats,
     .page-home .initiative-stats {
          padding: 2rem !important;
          margin: 2rem auto 3rem !important;
          border-width: 2px !important;
          max-width: 800px !important;
     }
}