/* ==============================
   Reset & Base
   ============================== */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  :root {
    /* Color palette */
    --color-primary: #2c3e50;
    --color-accent: #3498db;
    --color-white: #ffffff;
    --color-gray-dark: #333333;
    --color-gray-medium: #555555;
    --color-gray-light: #e0e0e0;
    --bg-gradient-start: #a1c4fd;
    --bg-gradient-end: #c2e9fb;
    --transition-time: 0.3s;
    --max-content-width: 1200px;
  }
  
  html {
    font-size: 112.5%; /* 18px base */
  }
  
  body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1rem;            /* ~18px */
    line-height: 1.6;
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
    color: var(--color-gray-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background var(--transition-time) ease;
  }
  
  a {
    text-decoration: none;
    color: init;
  }
  
  /* Utility class to hide visually but expose to screen readers */
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
  
  /* ==============================
     Header & Navigation
     ============================== */
  header {
    background-color: var(--color-white);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid var(--color-gray-light);
  }
  header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
  }
  header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 5rem; /* ~31px */
    color: #2c3e50;
    margin: 0;
  }
  header h1 a {
    color: inherit;
    text-decoration: none;
  }
  
  /* Navigation list: horizontal, no bullets */
  .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
  }
  .nav-list a {
    font-size: 1rem;       /* ~18px */
    font-weight: 600;
    color: var(--color-primary);
    padding: 0.25em 0;
    transition: color var(--transition-time) ease;
  }
  .nav-list a:hover,
  .nav-list a:focus {
    color: var(--color-accent);
    outline: none;
  }
  
  /* ==============================
     Buttons (utility)
     ============================== */
  .btn {
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: background var(--transition-time) ease, color var(--transition-time) ease;
    border: none;
  }
  .btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
  }
  .btn-primary:hover,
  .btn-primary:focus {
    background-color: #2980b9;
  }
  .btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
  }
  .btn-secondary:hover,
  .btn-secondary:focus {
    background-color: var(--color-primary);
    color: var(--color-white);
  }
  
  /* ==============================
     Headings
     ============================== */
  h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-primary);
    margin-bottom: 0.5em;
    line-height: 1.2;
  }
  h1 {
    font-size: 2rem; /* ~36px */
  }
  h2 {
    font-size: 1.5rem; /* ~27px */
  }
  h3 {
    font-size: 1.25rem; /* ~22px */
  }
  
  /* ==============================
     Main Content Area
     ============================== */
  main {
    flex: 1;
    padding: 2rem 0;
  }
  .container {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
  }
  
  /* Section wrapper */
  section {
    margin-bottom: 2rem;
  }
  
  /* Paragraphs in sections directly on blue background */
  section > p,
  section:not(.about-section):not(.form-container) > p {
    color: var(--color-gray-dark);
  }
  
  /* Archive header text on blue background */
  .archive-header p {
    color: var(--color-gray-dark);
  }
  
  /* ==============================
     Post & Blog List
     ============================== */
  .post-list,
  .video-list {
    display: grid;
    gap: 1.5em;
    grid-template-columns: 1fr; /* default: 1 column */
  }
  .post-item,
  .blog-list li {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
  }
  .post-item img,
  .blog-list img {
    width: 100%;
    max-width: 200px;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  /* Archive thumbnails - positioned on the right side */
  .archive-link img {
    width: 370px;
    height: 207px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    order: 2; /* Move thumbnail to the right */
  }
  .post-item .post-info,
  .blog-list .post-info,
  .archive-info {
    padding: 1em;
    flex: 1;
  }
  .post-item h3,
  .blog-list h2,
  .archive-info h3 {
    color: var(--color-accent);
    margin-bottom: 0.5em;
  }
  .post-item p,
  .blog-list p,
  .archive-info p {
    margin-top: 0.5em;
    color: var(--color-gray-medium);
  }
  .post-item .meta,
  .blog-list .meta {
    font-size: 0.95rem;
    color: var(--color-gray-dark);
    font-weight: 500;
  }
  
  /* Archive meta text - make it more visible */
  .archive-info .meta {
    font-size: 0.9rem;
    color: var(--color-gray-dark);
    font-weight: 500;
    margin-top: 0.5em;
    line-height: 1.4;
  }
  
  /* Archive item layout improvements */
  .archive-item {
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .archive-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  }
  
  .archive-link {
    display: flex;
    flex-direction: row;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }
  
  .archive-info {
    padding: 1.5em;
    flex: 1;
    display: flex;
    flex-direction: column;
    order: 1; /* Ensure description appears on the left */
  }
  
  .archive-info h3 {
    color: var(--color-primary);
    margin-bottom: 0.75em;
    font-size: 1.1rem;
    line-height: 1.3;
  }
  
  .archive-info p:not(.meta) {
    color: var(--color-gray-medium);
    margin-top: 0.75em;
    line-height: 1.5;
    flex: 1;
  }
  .post-item a,
  .blog-list a {
    color: var(--color-accent);
  }
  .post-item a:hover,
  .blog-list a:hover {
    text-decoration: underline;
  }
  
  /* ==============================
     Two-column Layout (Homepage posts & mission)
     ============================== */
  .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
  }
  .post-text-box,
  .profile-box {
    flex: 1;
    min-width: 280px;
    max-width: 500px;
    padding: 1.25rem;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  .post-text-box h2,
  .profile-box h2 {
    text-align: center;
  }
  
  /* ==============================
     Profile / Mission Boxes
     ============================== */
  .profile-box img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 1em;
  }
  .profile-box p {
    text-align: center;
    color: var(--color-gray-medium);
    margin-bottom: 0.5em;
    font-size: 1.3rem;
  }
  
  .profile-box p:last-of-type {
    margin-bottom: 0;
  }
  
  /* ==============================
     Featured Video Placeholder
     ============================== */
  .video-placeholder {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
  }
  .video-placeholder img {
    width: 100%;
    display: block;
  }
  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: url('play-icon.svg') no-repeat center center;
    background-size: contain;
    border: none;
  }
  
  /* ==============================
     Video Container (Homepage & Archive)
     ============================== */
  .video-container {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
  }
  .video-card {
    background-color: var(--color-white);
    padding: 1.25rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  .video-card iframe {
    width: 100%;
    height: 315px;
    border-radius: 8px;
  }
  
  /* ==============================
     Archive Page Specific (body.page-archive)
     ============================== */
  
  /* Search and filter form styling */
  .filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
  }
  
  .filter-form input[type="search"] {
    flex: 1;
    min-width: 300px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 2px solid var(--color-gray-light);
    border-radius: 8px;
    background-color: var(--color-white);
    transition: border-color var(--transition-time) ease;
  }
  
  .filter-form input[type="search"]:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  }
  
  .filter-form select {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 2px solid var(--color-gray-light);
    border-radius: 8px;
    background-color: var(--color-white);
    cursor: pointer;
    transition: border-color var(--transition-time) ease;
  }
  
  .filter-form select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  }
  
  .filter-form .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    white-space: nowrap;
  }
  
  /* Example: homepage grid for posts if desired (body.page-home) */
  @media (min-width: 768px) {
    /* Example: on homepage, 2 columns for post-list */
    body.page-home .post-list {
      grid-template-columns: repeat(2, 1fr);
    }
    /* Archive: 2 columns on tablet */
    body.page-archive .video-list {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
  }
  /* Larger screens */
  @media (min-width: 1024px) {
    /* Archive: 3 columns on desktop */
    body.page-archive .video-list {
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
    }
    /* Blog: 2 columns on desktop */
    body.page-blog .post-list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* Archive video list grid layout */
  .video-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  /* ==============================
     About Page Specific
     ============================== */
  .about-section {
    flex: 1;
    min-width: 280px;
    padding: 1.25rem;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  .metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1em;
  }
  .metric-item {
    text-align: center;
  }
  .metric-value {
    font-size: 1.5rem;
    color: var(--color-accent);
  }
  .metric-label {
    color: var(--color-gray-medium);
  }
  .team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .team-member {
    background-color: var(--color-white);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
  }
  .team-member img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 0.5rem;
  }
  .team-member h3 {
    color: var(--color-primary);
    margin-bottom: 0.25em;
  }
  .team-member .role {
    font-style: italic;
    color: var(--color-gray-medium);
    margin-bottom: 0.5em;
  }
  .social-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--color-accent);
  }
  .social-link:hover,
  .social-link:focus {
    text-decoration: underline;
  }
  .profile-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
  }
  .profile-content img {
    flex-shrink: 0;
  }
  .profile-text {
    flex: 1;
    color: var(--color-gray-dark);
  }
  .profile-text p {
    color: var(--color-gray-dark);
  }
  
  /* ==============================
     Footer
     ============================== */
  footer {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    padding: 2rem 0;
    margin-top: auto;
  }
  .footer-links a {
    color: var(--color-white);
    margin: 0 0.5em;
    font-size: 0.9rem;
  }
  .footer-links a:hover,
  .footer-links a:focus {
    text-decoration: underline;
  }
  .social-icons a {
    margin: 0 0.5em;
    color: var(--color-white);
  }
  
  /* ==============================
     Responsive adjustments
     ============================== */
  @media (max-width: 767px) {
    /* Nav: if too many items, wraps to next line */
    .nav-list {
      justify-content: center;
    }
    .video-container {
      grid-template-columns: 1fr;
    }
    .row {
      flex-direction: column;
    }
    .post-list,
    .video-list {
      grid-template-columns: 1fr;
    }
    .team-grid {
      grid-template-columns: 1fr;
    }
    .profile-content {
      flex-direction: column;
      text-align: center;
    }
    
    /* Archive items: stack vertically on mobile */
    .archive-link {
      flex-direction: column;
    }
    .archive-link img {
      width: 100%;
      height: 100%;
      order: 1; /* Thumbnail on top for mobile */
    }
    .archive-info {
      order: 2; /* Description below for mobile */
    }
    
    /* Search form: stack vertically on mobile */
    .filter-form {
      flex-direction: column;
      align-items: stretch;
    }
    
    .filter-form input[type="search"] {
      min-width: auto;
      width: 100%;
    }
  }
  @media (min-width: 768px) {
    /* Already defined above for grids */
  }
  
  /* ==============================
     Hero Section
     ============================== */
  .hero {
    text-align: center;
    margin-bottom: 3rem;
  }
  .hero-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
  }
  .hero-subtitle {
    font-size: 1.2rem;
    color: var(--color-gray-dark);
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }
  
  /* ==============================
     Form / Schedule Page
     ============================== */
  .schedule-intro {
    margin-bottom: 2rem;
    text-align: center;
  }
  .schedule-intro h2 {
    margin-bottom: 1rem;
  }
  .schedule-intro p {
    color: var(--color-gray-dark);
    max-width: 800px;
    margin: 0 auto 1em;
  }
  .form-container {
    margin: 2rem 0;
  }
  .form-wrapper {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 2rem;
    min-height: auto;
  }
  .form-link-container {
    text-align: center;
  }
  .form-description {
    color: var(--color-gray-medium);
    margin-bottom: 1.5em;
    font-size: 1.1rem;
  }
  .form-wrapper iframe {
    width: 100%;
    border: none;
    border-radius: 4px;
  }