/* ============================================
   Boy Scout Troop Website - Modern CSS Architecture
   ============================================ */

/* 1. Modern Variables */
/* Modern Scout Design System Variables */
:root {
   /* Primary Brand Colors */
   --primary: #1e40af;
   --primary-hover: #1d4ed8;
   --primary-light: #dbeafe;
   --secondary: #64748b;
   --accent: #f59e0b;
   --success: #10b981;
   --warning: #f59e0b;
   --error: #ef4444;

   /* Scout Theme Colors */
   --scout-blue: #003366;
   --scout-gold: #FFD700;
   --scout-red: #CC0000;
   --scout-green: #228B22;

   /* Modern Background Colors */
   --bg-primary: #ffffff;
   --bg-secondary: #f8fafc;
   --bg-tertiary: #f1f5f9;
   --light-bg: #F8F9FA;

   /* Text Colors */
   --text-primary: #0f172a;
   --text-secondary: #475569;
   --text-muted: #94a3b8;

   /* Modern Shadows */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

   /* Modern Borders & Radius */
   --border-radius: 0.75rem;
   --border-radius-sm: 0.5rem;
   --border-radius-lg: 1rem;
   --border-color: #E0E0E0;

   /* Typography */
   --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-family-display: 'Lora', sans-serif;
   --font-family-mono: 'Fira Code', Consolas, monospace;
}

/* Modern Typography Base */
body {
   font-family: var(--font-family-sans);
   line-height: 1.6;
   color: var(--text-primary);
   background-color: var(--bg-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-family-display);
   font-weight: 600;
   line-height: 1.3;
   color: var(--text-primary);
}

.centered {
   text-align: center;
}

/* Modern Focus States */
*:focus-visible {
   outline: 2px solid var(--primary);
   outline-offset: 2px;
   border-radius: var(--border-radius-sm);
}

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

/* 2. Animations */
/* Animations and Transitions */

/* Keyframe Animations */
@keyframes slideIn {
   from {
      opacity: 0;
      transform: translateY(-20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes slideDown {
   from {
      opacity: 0;
      transform: translateY(-20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Animation Classes */
.fade-in-up {
   animation: fadeInUp 0.6s ease-out;
}

.slide-in {
   animation: slideIn 0.5s ease-out;
}

.slide-down {
   animation: slideDown 0.3s ease-out;
}

/* Hover Animations */
.hover-lift {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.hover-scale {
   transition: transform 0.3s ease;
}

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

/* Loading Animation */
@keyframes spin {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

.spinner {
   animation: spin 1s linear infinite;
}

/* Pulse Animation for Interactive Elements */
@keyframes pulse {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.5;
   }
}

.pulse {
   animation: pulse 2s infinite;
}

/* Bounce Animation */
@keyframes bounce {

   0%,
   20%,
   53%,
   80%,
   100% {
      animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transform: translate3d(0, 0, 0);
   }

   40%,
   43% {
      animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      transform: translate3d(0, -30px, 0);
   }

   70% {
      animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
      transform: translate3d(0, -15px, 0);
   }

   90% {
      transform: translate3d(0, -4px, 0);
   }
}

.bounce {
   animation: bounce 1s;
}

/* Transition Utilities */
.transition-all {
   transition: all 0.3s ease;
}

.transition-fast {
   transition: all 0.15s ease;
}

.transition-slow {
   transition: all 0.5s ease;
}

/* 3. Layout */
/* Layout and Navigation Styles */

/* Modern Navigation - Glassmorphism Style */
.scout-nav {
   background: rgba(255, 255, 255, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   transition: all 0.3s ease;
   padding-block: 0px;
}

.scout-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 auto;
   font-size: 16px;
   padding: 0 1.5rem;
}

/* Brand Section - Left Justified */
.scout-nav .nav-brand {
   display: flex;
   align-items: center;
   flex-shrink: 0;
}

/* Greedy Nav - Right Justified */
.scout-nav .greedy-nav {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-grow: 1;
}

/* Header Brand - Logo and Text Side by Side */
.scout-nav .nav-brand .brand {
   color: white;
   text-decoration: none;
   font-weight: 700;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   gap: 1rem;
   text-align: left;
}

.scout-nav .nav-brand .brand img {
   height: 2.5rem;
   width: auto;
   object-fit: contain;
   transition: all 0.3s ease;
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.scout-nav .nav-brand .brand .troop-name {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   line-height: 1.1;
}

.scout-nav .nav-brand .brand:hover {
   transform: translateY(-2px);
   text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.scout-nav .nav-brand .brand:hover img {
   transform: scale(1.05);
}

/* Navigation Links */
.scout-nav .greedy-nav .nav-links {
   display: flex;
   gap: 1.5rem;
   list-style: none;
   align-items: center;

   li {
      padding: 0px;
   }
}

/* Utility class for hiding elements */
.hidden {
   display: none !important;
}

.scout-nav .visible-links {
   flex: 1;
   justify-content: flex-end;
   overflow: visible;
}

.scout-nav .hidden-links.hidden {
   display: none;
}

.scout-nav .hidden-links a:hover {
   background: rgba(0, 0, 0, 0.1) !important;
   color: var(--primary) !important;
   transform: none !important;
}

.scout-nav .nav-links a {
   color: rgba(255, 255, 255, 0.9);
   text-decoration: none;
   padding: 0.8rem 1.5rem;
   font-weight: 500;
   border-radius: 50px;
   transition: all 0.3s ease;
   border: 1px solid rgba(255, 255, 255, 0.1);
   font-size: 16px;
   position: relative;
}

.scout-nav .nav-links a:hover {
   color: white;
   background: rgba(255, 255, 255, 0.2);
   border-color: rgba(255, 255, 255, 0.3);
   transform: translateY(-2px);
}

.scout-nav .nav-links a:active {
   transform: translateY(0);
}

/* Greedy Navigation Grid Layout */
.scout-nav .greedy-nav {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex: 1;
   /* overflow: hidden;  Removed to allow dropdowns */
   /* Important for calculating available space */
}

/* Container for visible links */
.scout-nav .visible-links {
   display: flex;
   gap: 1.5rem;
   list-style: none;
   margin: 0;
   padding: 0;
   align-items: center;
   visibility: visible;
}

/* The toggle button wrapper (contains the details element) */
.scout-nav .greedy-toggle {
   margin-left: 1rem;
   display: flex;
   align-items: center;
}

/* Hide toggle by default */
.scout-nav .greedy-toggle.hidden {
   display: none !important;
}

/* Dropdown styling */
.greedy-toggle details.dropdown {
   margin: 0;
   padding: 0;
   border: none;
   background: transparent;
   box-shadow: none;
   position: relative;
}

.greedy-toggle details.dropdown summary {
   list-style: none;
   cursor: pointer;
   padding: 0.5rem 1rem;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 50px;
   color: white;
   font-weight: 500;
   display: flex;
   align-items: center;
   transition: all 0.2s ease;
}

.greedy-toggle details.dropdown summary:hover {
   background: rgba(255, 255, 255, 0.2);
}

.greedy-toggle details.dropdown summary::marker,
.greedy-toggle details.dropdown summary::-webkit-details-marker {
   display: none;
}

/* Hidden links container (the dropdown menu) */
.greedy-toggle .hidden-links {
   position: absolute;
   top: 100%;
   right: 0;
   margin-top: 0.5rem;
   background: var(--text-primary);
   /* Dark background for dropdown */
   backdrop-filter: blur(20px);
   border-radius: var(--border-radius);
   padding: 1rem;
   min-width: 200px;
   list-style: none;
   box-shadow: var(--shadow-xl);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   z-index: 1001;
   /* Above almost everything */
   border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Links inside the dropdown */
.greedy-toggle .hidden-links li a {
   display: block;
   width: 100%;
   color: white;
   padding: 0.5rem 1rem;
   text-decoration: none;
   border-radius: var(--border-radius-sm);
   transition: background 0.2s;
   border: none;
}

.greedy-toggle .hidden-links li a:hover {
   background: rgba(255, 255, 255, 0.1);
   transform: none;
   /* Reset hover transform for dropdown items */
}

/* Mobile Toggle Button */
.scout-nav .mobile-toggle {
   display: none;
   background: rgba(255, 255, 255, 0.15);
   border: 2px solid rgba(255, 255, 255, 0.3);
   color: white;
   font-size: 1.5rem;
   cursor: pointer;
   padding: 0.75rem;
   border-radius: var(--border-radius);
   transition: all 0.3s ease;
   position: absolute;
   top: 1rem;
   right: 2rem;
}

.scout-nav .mobile-toggle:hover {
   background: rgba(255, 255, 255, 0.3);
   transform: scale(1.05);
}

.photo.group {
   display: flex;
   gap: 2rem;
   justify-content: center;
   margin-top: 1rem;
}


/* Footer Layout */
.scout-footer {
   background: linear-gradient(135deg, var(--text-primary) 0%, var(--secondary) 100%);
   color: white;
   margin-top: 4rem;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.scout-footer a {
   color: rgba(255, 255, 255, 0.8);
   transition: all 0.3s ease;
}

.scout-footer a:hover {
   color: white;
   transform: translateX(4px);
}

.footer-nav {
   display: flex;
   justify-content: space-around;
}

.scout-footer nav ul {
   list-style: none;
   padding: 0;
}

/* 4. Components */
/* UI Components - Buttons, Forms, Cards */

/* Modern Button Hover Effects */
button:hover,
[role="button"]:hover,
input[type="submit"]:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
   background: linear-gradient(135deg, var(--primary-hover) 0%, #2563eb 100%);
}

button.secondary,
[role="button"].secondary {
   background: linear-gradient(135deg, var(--secondary) 0%, #6b7280 100%);
}

button.secondary:hover,
[role="button"].secondary:hover {
   background: linear-gradient(135deg, #4b5563 0%, var(--secondary) 100%);
}

/* Modern Forms */
input,
textarea,
select {
   border: 2px solid rgba(0, 0, 0, 0.1);
   border-radius: var(--border-radius);
   padding: 0.875rem 1rem;
   font-size: 1rem;
   transition: all 0.3s ease;
   background: var(--bg-primary);
}

input:focus,
textarea:focus,
select:focus {
   border-color: var(--primary);
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
   outline: none;
}

/* Flash Messages */
.flash-message {
   margin: 1.5rem 0;
   padding: 1.25rem 1.5rem;
   border-radius: var(--border-radius);
   background: linear-gradient(135deg, var(--primary-light) 0%, #e0f2fe 100%);
   border-left: 4px solid var(--primary);
   box-shadow: var(--shadow-sm);
   animation: slideIn 0.5s ease-out;
}

/* Google Maps Embed Styling */
.map-container {
   margin: 1.5rem 0;
   border-radius: var(--border-radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   background: var(--bg-secondary);
   border: 1px solid rgba(0, 0, 0, 0.1);
}

.map-wrapper {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 56.25%;
   /* 16:9 aspect ratio */
   overflow: hidden;
   background: var(--bg-tertiary);
}

.google-map {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
   transition: all 0.3s ease;
}

.map-container:hover .google-map {
   transform: scale(1.02);
}

.map-actions {
   padding: 1rem;
   background: var(--bg-primary);
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   display: flex;
   gap: 0.75rem;
   justify-content: center;
   flex-wrap: wrap;
}

.map-actions [role="button"] {
   font-size: 0.9rem;
   padding: 0.75rem 1.25rem;
   flex: 1;
   min-width: 150px;
   max-width: 200px;
}

/* Map Error State */
.map-error {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--bg-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--border-radius);
}

.map-error h4 {
   color: var(--warning);
   margin-bottom: 0.5rem;
}

/* Enhanced Map Interaction */
.map-container {
   position: relative;
   transition: all 0.3s ease;
}

.map-container:focus-within {
   box-shadow: var(--shadow-xl);
   transform: translateY(-2px);
}

.map-container::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border: 2px solid transparent;
   border-radius: var(--border-radius-lg);
   transition: border-color 0.3s ease;
   pointer-events: none;
}

.map-container:hover::after {
   border-color: var(--primary);
}

/* Event Header Classes for Activities */
.event-header {
   padding: 1rem;
   color: white;
   border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.event-header-success {
   background: var(--success);
}

.event-header-warning {
   background: var(--warning);
   color: var(--text-primary);
}

.event-header-info {
   background: var(--primary);
}

.event-header-danger {
   background: var(--error);
}

.event-header-secondary {
   background: var(--secondary);
}

/* Status Badge Classes for Marks */
.status-success {
   background: var(--success);
   color: white;
}

.status-warning {
   background: var(--warning);
   color: var(--text-primary);
}

.status-info {
   background: var(--primary);
   color: white;
}

.status-danger {
   background: var(--error);
   color: white;
}

.status-secondary {
   background: var(--secondary);
   color: white;
}

/* Contact Info Cards */
.contact-card {
   background: var(--bg-secondary);
   border-radius: var(--border-radius);
   padding: 1.5rem;
   margin-bottom: 1rem;
   border-left: 4px solid var(--scout-gold);
   transition: all 0.3s ease;
}

.contact-card:hover {
   transform: translateX(4px);
   box-shadow: var(--shadow-md);
   border-left-color: var(--scout-blue);
}

.contact-card h5 {
   margin-bottom: 0.75rem;
   color: var(--scout-blue);
   font-size: 1.1rem;
}

.contact-card p {
   margin-bottom: 0;
   line-height: 1.6;
}

/* Meeting Info Highlight */
.meeting-info {
   background: linear-gradient(135deg, var(--primary-light), var(--bg-tertiary));
   border-radius: var(--border-radius);
   padding: 1.5rem;
   margin-bottom: 1.5rem;
   border: 2px solid var(--primary);
   position: relative;
}

.meeting-info::before {
   content: "📍";
   position: absolute;
   top: -10px;
   right: 1rem;
   background: var(--primary);
   color: white;
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
}

/* Details/Summary Dropdown Styling */
details {
   background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
   border: 2px solid rgba(37, 99, 235, 0.15);
   border-radius: var(--border-radius-lg);
   padding: 0;
   margin: 1.5rem 0;
   box-shadow: var(--shadow-md);
   transition: all 0.3s ease;
   overflow: hidden;
}

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

details[open] {
   border-color: var(--primary);
}

summary {
   color: white;
   padding: 1.25rem 1.5rem;
   font-size: 1.25rem;
   font-weight: 600;
   cursor: pointer;
   user-select: none;
   list-style: none;
   display: flex;
   align-items: center;
   gap: 0.75rem;
   transition: all 0.3s ease;
}

summary::-webkit-details-marker {
   display: none;
}

summary::before {
   content: '▶';
   font-size: 0.875rem;
   transition: transform 0.3s ease;
   display: inline-block;
}

details[open] summary::before {
   transform: rotate(90deg);
}

summary:hover {
   padding-left: 1.75rem;
}

details[open] summary {
   margin-bottom: 0;
}

details ul,
details>div {
   padding: 1.5rem;
}

details ul {
   list-style: none;
   padding-left: 0;
}

details ul>div {
   padding: 1rem;
   margin: 0.75rem 0;
   background: var(--bg-primary);
   transition: all 0.3s ease;
}

details ul>div:hover {
   background: var(--bg-secondary);
   border-left-width: 5px;
   padding-left: 1.25rem;
   box-shadow: var(--shadow-sm);
}

/* 5. Hero */
/* Reset for homepage to remove default margins */
body {
   margin: 0 !important;
   padding: 0 !important;
}

/* Ensure main container has no padding on homepage */
main[style*="padding: 0"] {
   margin: 0 !important;
}

/* Hero Section with Background Image - Glassmorphism Style */
.hero-section {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   text-align: center;
   margin: 0;
   padding: 0;
   overflow: hidden;
}

.hero-section h1 {
   font-size: 3.5rem;
   font-weight: bold;
   margin-bottom: 1rem;
}

.hero-section p {
   font-size: 1.2rem;
   margin-bottom: 2rem;
   opacity: 0.9;
}

.hero-fullscreen {
   height: 100vh;
}

.hero-page {
   height: 60vh;
   min-height: 400px;
}

.hero-background {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-attachment: fixed;
   z-index: 1;
}

.hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.4);
   z-index: 2;
}

.hero-page .hero-overlay {
   background: rgba(0, 0, 0, 0.5);
}

.hero-halfscreen {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 33vh;
   background-attachment: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   text-align: center;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-position-y: bottom
}

.hero-fullscreen::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.1);
   /* Very subtle overlay for text readability */
   z-index: 1;
}

.hero-content {
   position: relative;
   z-index: 2;
   max-width: 800px;
   padding: 2rem;
}

.hero-title {
   font-size: clamp(4rem, 12vw, 12rem);
   font-weight: 800;
   margin-bottom: 1rem;
   text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
   letter-spacing: 0.02em;
   line-height: 0.9;
   font-family: var(--font-family-display);
}

.hero-subtitle {
   font-size: clamp(1.5rem, 4vw, 3rem);
   font-weight: 600;
   color: #ffffff;
   opacity: 1;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
   letter-spacing: 0.2em;
   margin: 0;
   text-transform: uppercase;
   font-family: var(--font-family-sans);
}

.scroll-indicator {
   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
   animation: bounce 2s infinite;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 50px;
   padding: 1rem 1.5rem;
}

.scroll-arrow {
   font-size: 1.5rem;
   color: white;
   opacity: 0.9;
   text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

@keyframes bounce {

   0%,
   20%,
   50%,
   80%,
   100% {
      transform: translateX(-50%) translateY(0);
   }

   40% {
      transform: translateX(-50%) translateY(-10px);
   }

   60% {
      transform: translateX(-50%) translateY(-5px);
   }
}

/* Mission Section */
.mission-section {
   padding: 4rem 2rem;
   background: var(--background-color);
   text-align: center;
}

.mission-content {
   max-width: 800px;
   margin: 0 auto;
}

.mission-text {
   font-size: 1.25rem;
   line-height: 1.7;
   color: var(--text-secondary);
   font-weight: 400;
   margin: 0;
}

/* Three Troops Section */
.troops-section {
   padding: 4rem 2rem;
   background: var(--bg-secondary);
}

.section-header {
   text-align: center;
   margin-bottom: 3rem;
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
}

.section-header h2 {
   font-size: 2.5rem;
   color: var(--text-primary);
   margin-bottom: 1rem;
   font-weight: 600;
   line-height: 1.3;
}

.section-header h3 {
   font-size: 1.5rem;
   color: var(--text-secondary);
   font-weight: 400;
   margin: 0;
}

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

.troop-card {
   background: var(--background-color);
   border-radius: var(--border-radius-lg);
   padding: 2rem;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.troop-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.troop-image {
   text-align: center;
   margin-bottom: 1.5rem;
}

.troop-image img {
   width: 80px;
   height: 80px;
   object-fit: contain;
}

.troop-content h4 {
   color: var(--primary);
   font-size: 1.25rem;
   margin-bottom: 1rem;
   font-weight: 600;
}

.troop-content p {
   color: var(--text-secondary);
   line-height: 1.6;
   margin-bottom: 1rem;
}

.troop-content p:last-child {
   margin-bottom: 0;
}

/* Aims of Scouting Section */
.aims-section {
   padding: 4rem 2rem;
   background: var(--background-color);
   text-align: center;
}

.aims-content {
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
}

.aims-intro {
   font-size: 1.125rem;
   color: var(--text-secondary);
   line-height: 1.7;
   margin-bottom: 2rem;
}

.aims-list {
   text-align: left;
   max-width: 600px;
   margin: 0 auto;
   padding-left: 0;
   list-style: none;
}

.aims-list li {
   font-size: 1.125rem;
   color: var(--text-primary);
   margin-bottom: 1rem;
   padding-left: 2rem;
   position: relative;
   line-height: 1.6;
}

.aims-list li::before {
   content: '✓';
   position: absolute;
   left: 0;
   color: var(--primary);
   font-weight: bold;
   font-size: 1.25rem;
}

/* Meeting Info Section */
.meeting-section {
   padding: 4rem 2rem;
   background: var(--primary);
   color: white;
   text-align: center;
}

.meeting-content h2 {
   color: white;
   font-size: 2rem;
   font-weight: 600;
   margin: 0;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.4;
}

/* 6. Responsive Defaults */
/* Responsive Design and Mobile Styles */

/* Responsive Navigation - Progressive Collapse */

/* Large screens - show all items */
@media (min-width: 1200px) {
   .more-dropdown {
      display: none !important;
   }
}

/* Medium screens - move last item to dropdown */
@media (max-width: 1199px) and (min-width: 1000px) {
   .more-dropdown {
      display: block !important;
   }
}

/* Smaller screens - move last 2 items to dropdown */
@media (max-width: 999px) and (min-width: 850px) {
   .more-dropdown {
      display: block !important;
   }
}

/* Even smaller screens - move last 3 items to dropdown */
@media (max-width: 849px) and (min-width: 769px) {
   .more-dropdown {
      display: block !important;
   }
}

/* Tablet Styles */
@media (max-width: 1024px) {
   .scout-nav nav {
      padding: 0 1.5rem;
   }

   .container {
      padding: 1.75rem;
   }

   .hero-section h1 {
      font-size: 3rem;
   }
}

/* Mobile Styles */
@media (max-width: 768px) {

   /* Navigation Mobile Layout */
   .scout-nav nav {
      padding: 0 1rem;
      position: sticky;
      gap: 1rem;
   }

   .scout-nav .greedy-nav .visible-links {
      display: none !important;
   }

   .scout-nav .visible-links.active {
      display: none !important;
      /* Ensure old behavior is disabled */
   }

   .scout-nav .visible-links.active {
      display: flex;
   }

   .scout-nav .greedy-nav details {
      display: none !important;
   }

   .scout-nav .nav-links a:hover {
      background: rgba(255, 255, 255, 0.2);
      border-bottom: none;
   }

   /* Show mobile toggle */
   .scout-nav .mobile-toggle {
      display: block !important;
   }


   /* Container adjustments */
   .container {
      padding: 1.5rem;
      margin-top: 1rem;
      margin-bottom: 1rem;
   }


   /* Hero section mobile */
   .hero-section {
      padding: 2.5rem 1.5rem;
   }

   /* Cards mobile layout */
   .scout-card {
      margin-bottom: 1rem;
   }

   /* Footer mobile */
   .footer-nav {
      flex-direction: column;
      gap: 2rem;
      text-align: center;
   }

   .hero-title {
      font-size: 2.5rem;
   }

   .hero-subtitle {
      font-size: 1.25rem;
   }

   .section-header h2 {
      font-size: 2rem;
   }

   .section-header h3 {
      font-size: 1.25rem;
   }

   .troops-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }

   .troop-card {
      padding: 1.5rem;
   }

   .meeting-content h2 {
      font-size: 1.5rem;
   }

   .aims-list li {
      font-size: 1rem;
   }
}

/* Small Mobile Styles */
@media (max-width: 480px) {

   /* Form adjustments */
   input,
   textarea,
   select {
      padding: 0.75rem;
   }

   /* Map responsive adjustments */
   .map-container {
      margin: 1rem 0;
   }

   .map-wrapper {
      padding-bottom: 75%;
      /* Taller on mobile for better visibility */
   }

   .map-actions {
      flex-direction: column;
      gap: 0.5rem;
   }

   .map-actions [role="button"] {
      min-width: auto;
      max-width: none;
      flex: none;
   }

   .contact-card {
      padding: 1rem;
   }

   .meeting-info {
      padding: 1rem;
   }

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

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

   .hero-content {
      padding: 1rem;
   }

   .hero-page {
      height: 50vh;
      min-height: 300px;
   }

   .mission-section,
   .troops-section,
   .aims-section,
   .meeting-section {
      padding: 2rem 1rem;
   }
}

/* Large Desktop Styles */
@media (min-width: 1200px) {
   .container {
      max-width: 1400px;
      padding: 2.5rem;
   }

   .hero-section {
      padding: 5rem 2rem;
   }

   .scout-nav nav {
      max-width: 1400px;
      padding: 0 2.5rem;
   }

   /* Map enhancements for large screens */
   .map-wrapper {
      padding-bottom: 45%;
      /* Wider aspect ratio on large screens */
   }
}

/* Print Styles */
@media print {

   .scout-nav,
   .mobile-toggle,
   .scout-footer {
      display: none;
   }

   .container {
      box-shadow: none;
      background: white;
      margin: 0;
      padding: 1rem;
   }

   body {
      background: white;
      color: black;
      font-size: 12pt;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
      color: black;
   }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
   :root {
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
   }

   .scout-nav {
      border-bottom: 2px solid rgba(255, 255, 255, 0.5);
   }

   button,
   [role="button"],
   input[type="submit"] {
      border: 2px solid white;
   }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

/* ============================================
   Custom Overrides and Page-Specific Styles
   ============================================ */

/* Calendar page specific styles */
.calendar-embed {
   border-radius: var(--border-radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
}

/* ============================================
   Essential Utility Classes
   ============================================ */

/* Text utilities */
.text-center {
   text-align: center;
}

/* ============================================
   Mobile Navigation Overlay Styles
   ============================================ */
.mobile-nav-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: rgba(33, 33, 33, 0.98);
   backdrop-filter: blur(10px);
   z-index: 2000;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
}

.mobile-nav-overlay.active {
   opacity: 1;
   pointer-events: auto;
}

.mobile-nav-links {
   list-style: none;
   padding: 0;
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

.mobile-nav-links li {
   margin: 0;
}

.mobile-nav-links a {
   font-size: 1.75rem;
   color: white;
   text-decoration: none;
   font-weight: 600;
   font-family: var(--font-family-display);
   position: relative;
   padding: 0.5rem 1rem;
   transition: all 0.3s ease;
}

.mobile-nav-links a:hover {
   color: var(--scout-gold);
   transform: scale(1.1);
}

.mobile-close {
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
   background: transparent;
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   color: white;
   font-size: 1.5rem;
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
}

.mobile-close:hover {
   background: rgba(255, 255, 255, 0.1);
   transform: rotate(90deg);
   border-color: white;
}

/* Ensure mobile toggle is above everything except overlay */
.mobile-toggle {
   z-index: 1002;
   position: relative;
   /* Ensure z-index works, though parent context matters */
}