:root{
  --bg:#000000;
  --card:#000000;
  --muted:#9aa3ae;
  --accent:#f4f4f4;
  --accent-2:#183b5b;
  --glass: rgba(255,255,255,0.06);
  --max-width:1100px;
  --gap:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:#000000;
  color:var(--accent);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding-top: 70px; /* NEW: Pushes content down past the fixed header */
}

.hidden{
display: none;
}

@font-face {
  font-family: "Basetica-Bold";
  /* IMPORTANT: Change 'YOUR-FONT-FILE-NAME.otf' to the actual name of your file */
  src: url('basetica-bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

/* Applies Basetica-Bold only to headers and branding */
h1, h2, h3, h4, 
.nav .brand, /* Targets the logo/brand text in the header */
.footer-inner > div:first-child div:first-child {
  font-family: "Basetica-Bold", Inter, sans-serif;
  font-weight: 800;
}

/* NAV */
.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 26px;
  backdrop-filter: blur(4px);
    
}
.nav .brand{
  display: flex; /* Enables side-by-side layout */
  align-items: center; /* Vertically centers the logo and text */
  gap: 8px; /* Adds space between the logo and the text */
  font-weight: 800; 
  letter-spacing: 0.6px;
}
/* NEW RULE: Styles the logo image */
.nav-logo {
  height: 50px; /* Sets the logo height (adjust as needed) */
  width: auto;
}
.nav .menu{
  display:flex;
  gap:18px;
  align-items:center;
}
.nav a{ color:var(--accent); text-decoration:none; font-weight:800; font-size:16px; position:relative } /* Added position:relative for dropdown context */
.btn-apply{
  padding:9px 14px;
  border-radius:8px;
  background:var(--accent-2);
  color:#061321;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  margin-left:8px;
}

/* --- DROPDOWN MENU STYLES (CORRECTED) --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    /* CONTAINER STYLES */
    position: absolute;
    background-color: var(--card);
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
    top: 100%; /* Position below the link */
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    
    /* CRITICAL: HIDING/TRANSITION LOGIC APPLIED TO CONTAINER */
    max-height: 0; /* Hidden by default */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    display: block; /* Ensures content renders inside but is hidden by max-height: 0 */
}


/* STYLES FOR THE INDIVIDUAL LINKS INSIDE THE CONTAINER */
.dropdown-content a {
    color: var(--accent);
    padding: 8px 16px; /* Padding inside the dropdown for each link */
    text-decoration: none;
    display: block; /* Ensures they stack vertically */
    position: static; /* CRITICAL: Override absolute positioning from the nav a rule */
}
/* ------------------------------------------- */
.dropdown > a {
  padding-right: 20px; /* Space for a small indicator */
}
.dropdown > a:after {
  content: '▼';
  font-size: 8px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
/* ----------------------------- */


/* Mobile menu toggle */
.hamburger{
  display:none;
  width:36px;height:36px;
  align-items:center; justify-content:center;
  border-radius:8px;
  background:transparent;
  border:2px solid rgba(255,255,255,0.1);
  color: white !important; 
   
}

/* --- HERO SECTION CONTAINER SETUP --- */
.hero-section {
    width: 100%;
    padding-top: 20px;
    background-color: #000000; /* Ensure black body background is set */
    display: flex;
    justify-content: center; /* Centers the photo block horizontally */
    align-items: center; /* Centers the photo block vertically */
}

.hero-photo-container {
    /* Set dimensions for the photo area (e.g., 90% of the screen width) */
    width: 100%; 
    	
    height: 20%; /* Fixed height for the photo area */
    
    /* CRITICAL: Allows absolute positioning of children */
    position: relative; 
    overflow: hidden; 
}

/* --- IMAGE STYLING (The Photo Background) --- */
.hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover; /* Ensures the photo covers the entire container */
    display: block;
    filter: brightness(0.6);

}

/* --- OVERLAY CONTENT STYLING (All Text and Timer) --- */
.hero-overlay-content {
    /* CRITICAL: Stretches the overlay area to cover the entire photo container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Use Flexbox for easy global alignment (e.g., centering the TOP text) */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* --- 1. TOP 1 & 2: Title and Slogan --- */
.top-text-overlay {
    /* Positions this block in the top third of the container */
    position: absolute;
    top: 2%;
    width: 80%;
    text-align: center;
    color: var(--accent); 
    text-shadow: 1px 1px 4px rgba(0, 0, 0); /* Ensures readability */
}

.title-top-1 {
    font-size: 82px; 
    margin: 0;
}

.slogan-top-2 {
    font-size: 66px;
    margin: 0;
}

/* --- 2. BOTTOM-LEFT: Date --- */
.date-bottom-left {
    position: absolute;
    left: 1vw;
    bottom: 10px;
    font-size: 40px;
    color: var(--accent);
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0);
}

/* --- 3. BOTTOM-RIGHT: Countdown Timer --- */
.countdown-container-bottom-right {
    position: absolute;
    right: 1vw;
    bottom: 1vw;
    
    /* Timer Box Style */
    
    padding: 1vw 2vw;
    border-radius: 5px;
}

#countdown-timer {
    display: flex;
    gap: 1em; 
    font-size: 33px;
    color: var(--accent);
font-family: "Basetica-Bold";
 text-shadow: 1px 1px 3px rgba(0, 0, 0);

}
.digit-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
}
.digit-box small {
    font-size: 33px;
    font-weight: normal;
}

.sg-letter-section h2 {
 font-size: 33px;
}
.sg-content-box {
 font-size: 20px;
}


.cta{
  padding:1.2em 2.2em;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
}
.cta.primary{ background:var(--accent-2); color:var(--accent) }
.cta.ghost{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--accent) }

/* MAIN SECTIONS */
main{ max-width:var(--max-width); margin:36px auto; padding:0 18px 120px; }

.section{ padding:36px 0; border-top:1px solid rgba(255,255,255,0.02) }
.section h2{ margin:0 0 12px; font-size:28px; text-align: center; }
.muted{ color:var(--muted) }

/* --- NEW APPLY PAGE STYLES --- */
.apply-grid {
    display: grid;
    /* Creates columns that are at least 300px wide, 
       resulting in a 3-column or 2-column flow depending on screen size 
    */
    grid-template-columns: repeat(auto-fit, 500px); 
    gap: var(--gap);
    max-width: 2000px; /* Use a generous width to make the cards larger */
    margin: 30px auto 60px auto;
    justify-content: center;
}

.apply-card {
    /* CRITICAL: The card is the link (<a> tag) */
    position: relative; 
    display: block; 
    overflow: hidden;
    border-radius: 5px;
    text-decoration: none; 
    
    /* Keeps the cards proportional (e.g., 16:9 widescreen) */
    aspect-ratio: 16 / 9; 
    
    /* Base for the pop-up effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Image Styling */
.apply-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the card */
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Darkens the image slightly so the white text is readable */
    filter: brightness(0.4); 
}

/* Overlay Text Styling */
.card-overlay {
    /* Positions the text over the image */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the text perfectly */
    z-index: 10;
    
    /* Text appearance */
    color: var(--accent); 
    font-family: "Basetica-Bold", Inter, sans-serif;
    font-size: 1.9em; 
    letter-spacing: 2px;

    pointer-events: none; /* Allows the click to go through the text to the link */
    
    opacity: 0.8; 
    transition: opacity 0.3s ease;
}

/* --- HOVER EFFECTS (The Pop-Up) --- */
.apply-card:hover {
    /* Pop up effect: Moves up slightly */
    transform: translateY(-15px) scale(1.02); 
    /* Lifts the card and adds a noticeable shadow */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 10px var(--accent-2); 
}

.apply-card:hover img {
    /* Image zoom and brightness change */
    transform: scale(1.05);
    filter: brightness(0.8); 
}

.apply-card:hover .card-overlay {
    /* Makes the text fully visible */
    opacity: 0.4;
}
/* --- APPLICATION PRICING TABLE STYLES --- */

/* Centers the table container and adds padding */
.pricing-table-container {
    max-width: 1000px; /* Adjust this width as needed */
    margin: 30px auto;
    padding: 0 18px;
    overflow-x: auto; /* Allows horizontal scrolling on very small screens */
}

/* Base Table Styling */
.pricing-table-container table {
    width: 100%;
    border-collapse: collapse; /* Removes double borders */
    background-color: var(--card); /* Black background for the rows */
    border-radius: 8px;
    overflow: hidden; /* Ensures table corners are rounded */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    font-size: 14px;
}

/* Table Header (The dark bar at the top) */
.pricing-table-container thead {
    background-color: #1a1a1a; /* A slightly lighter black for contrast */
    color: var(--accent); /* White text */
    font-weight: 700;
    text-transform: uppercase;
}

.pricing-table-container th {
    padding: 14px 10px;
    text-align: center;
    border-bottom: 2px solid var(--accent-2); /* Dark red line under the header */
}
/* Left-align the first column header (Deadline) */
.pricing-table-container th:first-child {
    text-align: left;
}


/* Table Body Rows */
.pricing-table-container td {
    padding: 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Light separation line */
    text-align: center;
    color: var(--accent);
}

/* Left-align the first column data (Deadline dates) */
.pricing-table-container td:first-child {
    text-align: left;
    font-weight: 600;
}

/* Optional: Highlight alternate rows */
.pricing-table-container tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Last row/cell adjustments */
.pricing-table-container tbody tr:last-child td {
    border-bottom: none;
}
/* Mobile Adjustments: Stacks the cards vertically on smaller screens */
@media (max-width: 1200px) {
    
   /* Image Styling */
.apply-card img {
    filter: brightness(0.8); 
}

/* Overlay Text Styling */
.card-overlay {
    opacity: 0.6; 
}

    
}
/* --- VENUE PAGE STYLES --- */
.venue-info-grid {
    display: grid;
    /* Two equal columns for desktop */
    grid-template-columns: 1fr 1fr; 
    gap: var(--gap, 22px);
    
    /* Limit the overall width and center the block */
    max-width: 1500px; 
    margin: 30px auto 60px auto;
    
    /* Ensure the containers stretch nicely */
    align-items: stretch;
}

.venue-photo-container {
    background: var(--card); /* Dark background for the card look */
    
       
    display: flex; /* For arranging image and caption */
    flex-direction: column;
}

.venue-image {
    width: 100%;
    /* Max height to keep aspect ratio sensible; adjust if needed */
    max-height: 400px; 
    height: auto;
    object-fit: cover;
    display: block;
    
}

.venue-caption {
    margin-top: 5px;
}

.venue-map-container {
    /* Critical: Ensures the map container takes the full height of the row */
    height: 100%;
max-height: 400px;
    border-radius: 12px;
    overflow: hidden; /* Clips the iframe to the border radius */

}

.venue-map-container iframe {
    /* Ensures the iframe fills its parent container */
    display: block;
}
/* --- SCHEDULE PAGE STYLES --- */
.schedule-grid {
    display: grid;
    /* 3 equal columns for desktop */
    grid-template-columns: repeat(3, 1fr);
    /* Uses the existing gap variable */
    gap: var(--gap); 
    /* Limits and centers the entire grid */
    max-width: 1500px; 
    margin: 30px auto;
    align-items: flex-start; /* Ensures content aligns nicely */
}

.schedule-day {
    /* Uses your card styling for a consistent look */
    background: var(--card);
    padding: 18px;
    border-radius: 12px;
    text-align: center;
}

.schedule-day h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 2em;
    color: var(--accent);
}

.schedule-image {
    width: 100%;
    /* Keep aspect ratio and ensure it fits the container */
    height: auto; 
    display: block;
    border-radius: 8px;
    }
/* New rule to allow specific pages to use full screen width */
.full-width-main {
    max-width: 100%; 
}

/* Update the schedule grid to take more space now that its parent allows it */
.schedule-grid {
    /* Set this value high (e.g., 1400px) or just use 90vw (90% of viewport width) */
    max-width: 1400px; /* Use a value larger than 1100px */
    
    /* Ensure it remains centered */
    margin-left: auto;
    margin-right: auto;

    /* Maintain the rest of your rules */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    align-items: flex-start; 
}
/* CARD GRID for committees */

/* 1. CONTAINER STYLING: CENTERING AND GRID LAYOUT */
#committeeGrid.grid {
  /* Layout: Defines a responsive grid structure */
  /* Creates columns that are at least 320px wide, but no wider than the available space (1fr) */
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: var(--gap, 25px); /* Uses your gap variable for spacing */
  align-items: stretch; /* CRITICAL: Ensures all items stretch to the full height of the row (Leveled) */
  
  /* Centering: Centers the entire block on the page */
  max-width: 1050px; /* Adjust this value to control the overall width of the card section */
  margin: 18px auto 60px auto; /* Centers the block horizontally and adds space below */
}

/* 2. CARD STYLING: LEVELING (EQUAL HEIGHT) */
.grid .card {
  background: color: var(--card);
  border-radius: 12px;
  padding: 18px;
  border: 2px solid var(--accent-2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; 
  position: relative; 
  z-index: 1;
  /* CRITICAL: Flexbox setup for pushing content */
  height: 100%;             /* Forces the card to fully occupy the grid row height */
  display: flex;
  flex-direction: column; 
}
/* NEW: Popout Hover Effect (Applies ONLY to committee cards) */
.grid .card:hover {
    transform: translateY(-18px) scale(1.02); /* Lifts the card */
    /* Adds a subtle shadow and an accent glow */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 10px var(--accent-2); 
    
    z-index: 2; /* Ensures the hovered card sits above neighbors */
}

/* 3. CONTENT STYLING: PUSHING METADATA TO THE BOTTOM */
/* This targets the first DIV containing the logo, title, and description (the flexible part) */
.grid .card > div:first-child {
    flex-grow: 1; /* CRITICAL: This pushes the next element (.committee-meta) down */
}

/* 4. LOGO, TITLE, AND METADATA STYLING */
.grid .card .committee-logo {
  display: block; 
  margin: 0 auto -5px auto; /* Centers the logo and adds space below */
  width: 100%;  /* Size the logo to fit the card */
  height: auto; 
  object-fit: cover; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optional: subtle shadow for depth */
}
/* Forces the committee title text to be white/primary color */
.grid a h3 {
    color: var(--accent); /* Use your primary color variable or 'white' */
    text-align: center;
}

/* CRITICAL: Resets ALL link colors inside the card to inherit the parent's color */
.grid .card a, 
.grid .card a:visited {
    color: inherit; 
    text-decoration: none; /* Removes the underline too */
}

/* Ensure the main metadata text is the correct color (e.g., muted white) */
.committee-meta {
    color: var(--muted, #AAAAAA); /* Set this to your desired gray/white tone */
    margin-top: 12px;
    font-size: 14px;
}
.card h3 { 
  margin: 0 0 8px; 
  font-size: 1.4em; /* Standard title size */
  text-align: center;
}

.card p { 
  margin: 0; 
  color: var(--muted); 
  font-size: 14px; 
}

.committee-meta strong {
  color: var(--accent);
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

/* TEAM GRID */
.team-grid{ 
  display:grid; 
  /* Sets the default column count to 2 for desktop/tablet */
  grid-template-columns:repeat(2,1fr); 
  gap:var(--gap); 
  
  /* CRITICAL: Centers the grid container and limits max width */
  margin: 30px auto; 
  max-width: 900px; 
  
  align-items: stretch; /* Ensures all cards are the same height */
}

.team-card{ 
  background: rgba(255, 255, 255,); /* Similar to committee card background */
  padding:18px; 
  text-align:center; 
  
  /* Enables content to stretch/fill height */
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* New: Style for a modern team photo */
.team-card img{ 
 width:100%; 
  height:90%; /* Fixed height for consistent look */
  object-fit:cover; 
  display:block; 
  margin:0 auto 12px; /* CORRECTED: This ensures the image block is centered */
  padding:5px;
}
/* APPLY FORM */
.apply-form{ max-width:760px; background:rgba(255,255,255,0.02); padding:18px; border-radius:10px; border:1px solid rgba(255,255,255,0.03) }
.form-row{ display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap }
.form-row input, .form-row select, textarea{
  flex:1 1 220px;
  padding:10px 12px;
  border-radius:8px;
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(255,255,255,0.04);
}
textarea{ min-height:100px; resize:vertical }

/* FOOTER */
footer{ padding:32px 18px; border-top:1px solid rgba(255,255,255,0.02); margin-top:36px; }
.footer-inner{ 
    max-width:var(--max-width); 
    margin:0 auto; 
    display:flex; 
    flex-direction: column; /* Stack items vertically */
    justify-content:center; 
    align-items:center; /* Center items horizontally */
    gap: 12px; /* Adjust spacing between stacks */
    flex-wrap:wrap 
}
.social a{ 
    margin: 0 7px; /* Uniform horizontal margin for centering */
    text-decoration: none; 
    color: var(--muted); 
    font-size: 18px; 
}
.design-credit {
    font-size: 11px; /* Makes it tiny */
    color: var(--muted); /* Uses the muted gray color */
    margin-top: 5px; /* Adds a bit of space above it */
    margin-bottom: 0;
    text-align: center; /* Ensures it stays centered */
}
/* Custom style for the dropdown contact section (from previous request) */
.contact-dropdown {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 18px;
  margin-top: 12px;
}
.contact-dropdown details {
  margin: 0;
}
.contact-dropdown summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  padding: 8px 0;
  list-style: none; /* Hide default marker */
}
.contact-dropdown summary::marker,
.contact-dropdown summary::-webkit-details-marker {
  display: none; /* Hide marker for all browsers */
}
.contact-dropdown summary:before {
  content: '▶ '; /* Custom marker */
  margin-right: 10px;
  display: inline-block;
  transition: transform 0.2s;
}
.contact-dropdown details[open] summary:before {
  content: '▼ ';
}
.contact-content {
  padding-top: 10px;
  padding-bottom: 5px;
}


/* Responsive */
@media (max-width:1200px){

.sg-letter-section h2 {
 font-size: 5vw;
}
.sg-content-box {
 font-size: 2vw;
}
  .grid{ grid-template-columns: 1fr; }
  /* CRITICAL ADDITION: Force team grid to 1 column from 1200px down */
  .team-grid{ grid-template-columns: 1fr; } 
.schedule-grid {
      grid-template-columns: 1fr;
  }

.venue-info-grid {
        grid-template-columns: 1fr;
    }
    
    /* Fix map height when stacked vertically */
    .venue-map-container {
        /* Gives the map a fixed height on mobile when stacked */
        height: 300px; 
    }
	
  .hero h1{ font-size:40px }

  /* MOBILE MENU IS HIDDEN BY DEFAULT */
  .nav .menu{ display:none }

  /* HAMBURGER IS SHOWN ON MOBILE */
  .hamburger{ 
    display:flex; /* CRITICAL: Force the hamburger to show */
    position: absolute;
    top: 18px; /* Positioning the button */
    right: 20px;
    z-index: 1000;
  }

  /* MOBILE MENU WHEN ACTIVE */
  .nav .menu.active {
    display: flex !important; /* Force it to display on click */
    
    /* MENU POSITIONING: */
    position: fixed; 
    top: 70px; /* Aligns with your body's padding-top */
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);	
    z-index: 999; 
    flex-direction: column; 
    padding-top: 20px;
    align-items: center; 
    justify-content: flex-start;
  }
  
  /* HERO SECTION ADJUSTMENTS */
  .hero{ padding-top:100px }
  .hero h1{ font-size:32px }
  .muted{ font-size:14px }
  
  .title-top-1 { font-size: 5vw; }
  .slogan-top-2 { font-size: 2.5vw; }

  #countdown-timer { font-size: 3vw; } 
.digit-box small {
    font-size: 3vw; }

.date-bottom-left {font-size: 3vw; }

  .countdown-container-bottom-right {
      padding: 1vw 1.5vw; 
      right: 1.5vw;
      bottom: 1.5vw;
  }

  /* COMMITTEE DETAIL PAGE ADJUSTMENTS */
  .committee-page-header h1 {
    font-size: 32px;
  }
  .committee-page-header .staff-info {
      flex-direction: column;
      gap: 8px;
  }
  .committee-image-block {
      height: 250px; 
  }
}

/* small helpers */
.large{ font-size: 21px; color:var(--accent) }
.medium{ font-size:16px; color:var(--muted) }
.small{ font-size:13px; color:var(--muted) }
.center{ text-align:center }

/* --- COMMITTEE DETAIL PAGE STYLES (Clean Layout) --- */
.committee-page-header {
    background: var(--card); /* Darker background for the header */
    padding: 30px 18px 20px;
    margin-top: 55px; /* space below fixed nav */
    border-bottom: 1px solid rgba(255,255,255,0.03);
    text-align: center; /* Center align header text */
}
.committee-page-header .inner {
    max-width: 900px; /* Focused content width */
    margin: 0 auto;
}
.committee-page-header .category {
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 8px;
    font-weight: 600;
}
.committee-page-header h1 {
    font-size: 40px; /* Large committee title */
    margin: 0 0 10px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.committee-page-header .staff-info {
    font-size: 16px;
    color: var(--muted);
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between USG and ACAS names */
    flex-wrap: wrap; 
}
.committee-page-header .staff-info strong {
    color: var(--accent);
    font-weight: 700;
}

.committee-main-content {
    max-width: 2000px;
    margin: 30px auto 60px; /* Vertical spacing for content */
    padding: 0 18px; 
}

.committee-image-block {
    height: 100%; /* Height of the prominent image */
    width: 100%;
    background: #000000;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px; 
	filter: brightness(0.7);
}
.committee-image-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agenda-section h2 {
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 12px;
}
.agenda-section p {
    color: var(--muted);
    font-size: 16px;
    margin-bottom: 1em;
}
.agenda-section p strong {
    color: var(--accent); /* Highlight topic */
}

.study-guide-cta {
    text-align: center;
    margin-top: 30px; /* Space above button */
    margin-bottom: 40px; /* Space below button before footer */
}
.study-guide-cta .cta.primary {
    padding: 14px 28px;
    font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.team-grid{ grid-template-columns:1fr; }

    .committee-page-header h1 {
        font-size: 32px;
    }
    .committee-page-header .staff-info {
        flex-direction: column;
        gap: 8px;
    }
    .committee-image-block {
        height: 250px; 
    }

}
/* FAQ STYLING FOR ACCORDION */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-top: 1px solid var(--accent-2); /* Light line above each item */
    margin-bottom: 1px; /* Minimal space between items */
}

.faq-question {
    background: none;
    border: none;
    color: var(--accent);
    width: 100%;
    padding: 15px 0;
    text-align: left;
    font-size: 1.1em;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.faq-icon {
    color: var(--accent-2);
    font-weight: bold;
    font-size: 1.2em; /* Adjust size if needed, 1.2em is a good start */
    margin-right: 15px;
    width: 15px;
    text-align: center;
   
/* NEW: This line creates the smooth animation over 0.3 seconds */
    transition: transform 0.3s ease-in-out; 
}

/* This rule only applies when the item has the 'open' class */
.faq-item.open .faq-icon {
    /* Rotates the '>' 90 degrees clockwise, making it point straight down */
    transform: rotate(90deg); 
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    padding: 0 0 0 30px; /* Indent answer content */
}

.faq-answer p {
    margin-top: 0;
    margin-bottom: 20px;
}


.faq-item:last-child {
    border-bottom: 1px solid var(--accent-2);
}

/* --- PREVIOUS EDITION PAGE STYLES --- */

/* Section for the main introduction (Image + Text) */
.edition-details {
    padding-top: 0; 
}
.edition-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* 1 column for photo, 1.5 for text */
    gap: var(--gap);
    max-width: var(--max-width);
    margin: 0 auto;
    align-items: flex-start;
}

/* Image Box Styling */
.edition-image-box {
    overflow: hidden;
    background: var(--card); /* Dark background for padding/caption */
    padding-top: 0; /* ADD THIS to ensure no top internal padding */
    margin-top: 0;  /* ADD THIS to ensure no top margin */
}
.edition-main-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


/* Text Panel Styling */
.edition-text-panel {
   padding: 0; /* CHANGE this to 0 (or remove it if already 0) */
    margin-top: 0; /* ADD THIS to ensure no top margin */
}
.edition-text-panel p:first-child {
    margin-top: 0; 
}
.edition-text-panel p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--accent);
}

/* Two-Column Section (Executive Team + Committees) */
.edition-staff-committees {
    padding-top: 0;
}
.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Styling for the Team/Committee Cards */
.card {
    background: var(--card);
    padding: 30px;
    border-radius: 8px;
    }
.card h2 {
    margin-top: 0;
    font-size: 22px;
    background: #1a1a1a;
    border-bottom: 4px solid var(--accent-2); /* line under title */
    padding-bottom: 10px;
    padding-top: 10px;
    margin-bottom: 20px;
    border-radius: 8px 8px 0 0;
}
.team-list, .committee-list {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}
.team-list li, .committee-list li {
    padding: 8px 0;
    font-size: 1.05em;
   
}

.team-list strong {
    color: var(--accent);
    font-weight: 600;
}

/* --- MOBILE RESPONSIVENESS (< 768px) --- */
@media (max-width: 768px) {
    .edition-intro-grid {
        grid-template-columns: 1fr; /* Stack photo and text vertically */
    }
    .edition-text-panel {
        padding: 0; /* Remove vertical padding when stacked */
    }
    .two-col-grid {
        grid-template-columns: 1fr; /* Stack team and committees vertically */
    }
    .card {
        margin-bottom: 20px;
    }
.sg-letter-section h2 {
 font-size: 5vw;
}
.sg-content-box {
 font-size: 3.5vw;
}
}

/* -------------------------------- */