/* ---- Brand tokens ---- */
:root{
  --clr-primary:#3C6E5A;          /* Moss */
  --clr-primary-dark:#2F5848;
  --clr-text:#1F2328;              /* Charcoal */
  --clr-cream:#F7F5EF;             /* Garden Cream */
  --clr-pebble:#E8E4DA;
  --clr-grey:#D6D6D6;
  --clr-magenta:#B21E59;           /* Dahlia */
  --clr-golden:#E7A400;            /* Sunflower */
  --clr-leaf:#6DBA6D;

  --radius:8px;
  --shadow:0 2px 8px rgba(0,0,0,.06);
}

/* ---- Base ---- */
html,body{background:var(--clr-cream); color:var(--clr-text);}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;}
h1,h2,h3,h4{font-family:"Playfair Display", Georgia, serif; color:var(--clr-primary);}

/* ---- Header / brand ---- */
.site-header {font-weight:700; color:var(--clr-text);}
.brand-name{
	font-weight:700; color:var(--clr-text);
	font-family:"Playfair Display";
	font-size: 2.0em;
	line-height:1.2em;
	}
	
.site-header .nav-link{color:var(--clr-text); opacity:.9;}
.site-header .nav-link:hover{opacity:1; color:var(--clr-primary);}
.brand-mark{
  width:26px; height:26px; border-radius:50%;
  display:inline-block; position:relative;
  background: radial-gradient(circle at 70% 30%, var(--clr-magenta), var(--clr-primary));
  box-shadow: var(--shadow);
}
.brand-mark::after{
  content:""; position:absolute; inset:6px 6px 6px 10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
}

/* ---- Notice bar ---- */
.notice-bar{background:var(--clr-golden); color:#1b1400; padding:.6rem 0;}

/* ---- Buttons, cards ---- */
.btn-primary{background:var(--clr-primary); border-color:var(--clr-primary);}
.btn-primary:hover{background:var(--clr-primary-dark); border-color:var(--clr-primary-dark);}
.card{border:1px solid var(--clr-pebble); border-radius:var(--radius); box-shadow:var(--shadow);}

/* ---- Hero ---- */
.hero {
  position: relative;
  color: #fff;
  background: 
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.55)),
    url('/assets/imgs/hero.jpg') center/cover no-repeat;
  border-bottom: none;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.hero h1,
.hero .lead {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

.hero .btn-primary {
  background: var(--clr-magenta);
  border-color: var(--clr-magenta);
}

.hero .btn-outline-secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}
.hero .btn-outline-secondary:hover {
  background: rgba(255,255,255,0.2);
}


/* ---- Event card ---- */
.event-card .date-badge{
  min-width:60px; text-align:center; border:1px solid var(--clr-pebble);
  border-radius:10px; padding:.35rem .25rem; line-height:1.2;
}
.event-card .date-badge .day{color:var(--clr-primary); font-weight:700; font-size:1.35rem;}
.event-card .date-badge .mon{color:#6b7280; font-size:.85rem;}
.badge-event{background:var(--clr-magenta); color:#fff;}
.badge-news{background:var(--clr-golden); color:#1b1400;}
.badge-interactive{background:var(--clr-leaf); color:#083b08;}

/* ---- Gallery ---- */
.gallery-img{
  width:100%; height:220px; object-fit:cover; border-radius:8px; box-shadow:var(--shadow);
}

/* ---- Footer ---- */
.site-footer a{color:var(--clr-text);}
.site-footer a:hover{color:var(--clr-primary);}


.gallery-item {
  margin-bottom: 1.5rem;           /* space below each figure */
}

.gallery-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}

.gallery-img:hover {
  transform: scale(1.02);
}

.gallery-item figcaption {
  font-size: 0.9rem;
  color: var(--clr-text);
  text-align: right;
  margin-top: 0.35rem;             /* vertical gap from image */
  opacity: 0.8;
}


.content-section {
        padding: 2.5rem 0;
    }
    .info-highlight {
        background-color: #fff7e0;
        border-left: 4px solid #f1b24a;
        padding: 1.25rem 1.5rem;
        border-radius: 0.35rem;
        margin-bottom: 2rem;
    }

 
 
 /* NEW COMMITTEE LAYOUT */
    .committee-row {
        display: flex;
        flex-wrap: wrap;       /* Allows items to move to next line */
        gap: 15px;             /* Space between the cards */
        justify-content: center; /* Keeps them centered if there's an odd number */
    }

    .committee-member {
        /* The Card Styling */
        border: 1px solid #e0e0e0;  /* Light grey border */
        padding: 5px;               /* Small whitespace inside the border */
        background: #fff;           /* White background */
        text-align: center;         /* Centers the caption */
        
        /* The Sizing Logic */
        flex: 1 1 180px;            /* Grow to fill space, but don't get smaller than 180px */
        max-width: 500px;           /* STOP it from ever getting bigger than the original image */
    }

    .committee-member img {
        width: 100%;                /* Image always fills the card width */
        height: auto;               /* Keeps the shape correct */
        display: block;             /* Removes tiny gap at bottom of image */
    }

    .committee-name {
        margin: 10px 0 5px 0;       /* Spacing for the text */
        font-weight: 600;           /* Make the name bold */
        color: #555;                /* Dark grey text */
        font-size: 0.95rem;
    }