/* ===========================
   Font Faces
   =========================== */
@font-face {
    font-family: 'PlayfairDisplay';
    src: url('Fonts/Playfair_Display/Playfair_Display.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'WorkSans';
    src: url('Fonts/Work_Sans/WorkSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Quicksand';
    src: url('Fonts/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ===========================
   Main Theme Colors
   =========================== */
:root {
    --bg-color: #ffffff;
    --text-color: #111111;
    --muted: #f3f3f3;
    --accent: #b72f2f; /* warm muted red */
    --accent-bright: #e43f3f; /* brighter red for hover */
    --accent-2: #2aa6a6; /* soft teal */
    --card-bg: #ffffff;
    --page-bg: #fbfbfb;
    /* navbar background: explicit white; visual distinction ensured with border/shadow */
    --nav-bg: #ffffff;
}

/* ===========================
   Base Layout & Typography
   =========================== */
body {
    margin: 0;
    background-color: var(--page-bg);
    color: var(--text-color);
    line-height: 1.6;
    font-family: 'Quicksand', sans-serif;
}
header { width: 100%; }
main { max-width: 1000px; margin: 24px auto; padding: 24px; }
footer { text-align: center; padding: 16px 0; font-size: 0.95em; }

/* Responsive navbar behavior: hamburger toggle on small screens */
nav { position: relative; margin: 10vh; background: var(--nav-bg); border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 6px 18px rgba(0,0,0,0.04); }
.nav-toggle { display: none; background: var(--nav-bg); border: none; font-size: 1.6rem; cursor: pointer; padding: 6px 10px; color: var(--text-color); border-radius:6px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }

@media (max-width: 800px) {
   nav{
      background: var(--nav-bg);}
   
   .nav-toggle { display: block; position: absolute; right: 12px; top: 5px; z-index: 60; background: var(--nav-bg)}
   /* Hidden by default on small screens (use !important to avoid cascade issues) */
   /* Make the dropdown participate in normal flow so it can expand and let the page scroll
      instead of forcing an internal scroll container. */
   nav ul { display: none !important; position: static; background: #ffffff; padding: 20px; padding-bottom: 16px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); flex-direction: column; width: calc(100% - 32px); max-width: none; z-index: 50; }
   /* Visible when nav has `open` class */
   /* Force the dropdown to layer above positioned media (images/slides) by
      giving it a high z-index and ensuring it creates a stacking context. */
   nav.open ul { display: flex !important; background: #ffffff; border: 1px solid rgba(0,0,0,0.06); position: relative; z-index: 9999; }
   nav ul li { width: 100%; background: #ffffff}
   nav ul li a { display: inline-block; width: 100%; padding: 10px 12px; background: #ffffff}
   .logo { width: 50px; }
   .donate-btn{ width: 60px; text-align: center;}
}

/* ===========================
   Headings & Paragraphs
   =========================== */
h1, h2 { margin: 10px 0 12px 0; font-family: 'PlayfairDisplay', serif; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.6rem; }
p { font-family: 'Quicksand', sans-serif; font-size: 1.1em; margin-bottom: 12px; margin-top: 0; }

/* ===========================
   Navbar Styles
   =========================== */
nav { margin: 0; padding: 0; width: 100%; background: var(--nav-bg); box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 6px 18px rgba(0,0,0,0.04); }
nav ul {
    list-style: none;
    padding: 0 12px;
    margin: 0;
    display: flex;
    align-items: center;
    background-color: transparent;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    height: 72px;
}
nav ul li { margin: 0; display: flex; align-items: center; height: 100%; font-size: 1em; }
nav ul li a { color: var(--text-color); text-decoration: none; padding: 8px 12px; font-weight:600; transition: color 260ms ease, transform 160ms ease; }
nav ul li a:hover { color: var(--accent); }

/* Logo Styles */
.logo { width: 140px; height: auto; display:block; object-fit:contain; }
nav ul li:first-child a { margin-left: 10px; margin-right: 16px; padding-top: 0; padding-bottom: 0; background: none !important; color: inherit !important; }

/* Right-aligned utilities: place an info link at the right, then social + donate */
.info-link { margin-left: auto; }

/* ===========================
   Hero + Buttons
   =========================== */
#hero { background: linear-gradient(180deg, var(--muted) 0%, transparent 60%); padding: 36px 12px; text-align: center; }
.hero-inner { max-width: 900px; margin: 0 auto; }
.hero-inner h1 { font-family: 'PlayfairDisplay', serif; color: var(--text-color); margin-bottom: 6px; }
.hero-inner p { color: #444; margin-bottom: 12px; }
.hero-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { padding: 10px 16px; border-radius:6px; text-decoration:none; font-weight:600; transition: transform 160ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease; }
.btn-primary { background: var(--text-color); color: #fff; }
.btn-primary:hover { transform: scale(1.04); background: var(--accent); color: #fff; }
.btn-outline { border:2px solid var(--text-color); color: var(--text-color); background:transparent; }
.btn-outline:hover { transform: scale(1.04); border-color: var(--accent); color: var(--accent); background: transparent; }

/* Donate button */
.donate-btn { display:inline-flex; align-items:center; padding:8px 14px; background:var(--accent); color:#fff; border-radius:6px; text-decoration:none; transition: transform 160ms ease, background 200ms ease; }
.donate-btn:hover { transform: scale(1.06); background: var(--accent-bright); color:#fff; }

/* ===========================
   Insta stacked images: same size and position, swap on hover
   =========================== */
.insta-wrap { display:inline-block; width:30px; height:30px; position:relative; transition: opacity 260ms ease;}
.insta-wrap .insta-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition: opacity 260ms ease; }
.insta-wrap .insta-img.red { opacity:0; transition: opacity 260ms ease;}
.insta-wrap:hover .insta-img.red { opacity:1; transition: opacity 260ms ease;}
.insta-wrap:hover .insta-img.regular { opacity:0; transition: opacity 260ms ease}
.social-link a { display:inline-flex; align-items:center; gap:8px; }
.social-link a img, .social-link a svg { display:block; }
.social-link a:hover { color: var(--accent); }

/* ===========================
   Gallery grid
   =========================== */
.gallery-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:12px; }
.gallery-item { background:var(--muted); height:120px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#777; font-weight:600; }

/* ===========================
   Forms and inputs
   =========================== */
.consult-form { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; font-family: 'Quicksand', sans-serif; }
.consult-form label { font-weight: 600; color: var(--text-color); font-size: 1em; }
.consult-form input, .consult-form textarea { padding: 12px; border-radius: 8px; border: 1px solid #ccc; font-size: 1em; font-family: 'Quicksand', sans-serif; background-color: #fff; color: #333; transition: border 0.3s, box-shadow 0.3s; }
.consult-form input:focus, .consult-form textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 4px rgba(42, 166, 166, 0.15); outline: none; }

/* Submit button (bottom) uses same donate style — align visually */
.submit-btn { display: inline-block; background: var(--text-color); color: var(--bg-color); font-family: 'Quicksand', sans-serif; font-weight: bold; font-size: 1.1em; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; transition: transform 160ms ease, background 200ms ease, box-shadow 200ms ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
.submit-btn:hover { transform: scale(1.03); background: var(--accent-bright); color: #fff; }

/* Dropdown / misc removed as not used */

/* Responsive tweaks */
@media (max-width: 700px) {
   main { padding: 16px 4vw; }
   /* Make the logo larger on small screens for better visibility */
   .logo { width: 140px; height: auto; }
   /* Remove gaps between nav items on small screens and give consistent white background */
   nav ul { gap: 0; padding: 8px 0; }
   nav ul li { background: #ffffff; margin: 0; }
   nav ul li + li { border-top: 1px solid rgba(0,0,0,0.06); }
   nav ul li a { padding: 14px 16px; font-size: 1.05rem; }
   .btn { font-size: clamp(0.9em, 2.4vw, 1em); }
   .insta-wrap { width:22px; height:22px; }
}

/* footer */
footer { text-align:center; padding:18px 0; color:#666; }

.section{
   padding-bottom: 5vh;
}

/* Tighten and left-align `Get Involved` and `Contact` near page bottom */
#get-involved, #contact {
   max-width: 600px;
   padding: 8px 4vw;
   text-align: left;
}

#get-involved.section, #contact.section {
   padding-bottom: 2.5vh; /* less vertical spacing than other sections */
   padding-top: 0.8vh;
}

#get-involved p, #contact p { margin-bottom: 8px; }

/* keep buttons unchanged but ensure they align with left-aligned content */
#get-involved .donate-btn { display: inline-flex; }

/* Team member bio styling (allow longer descriptions) */
.member-card .bio { margin-top: 8px; color: #444; font-size: 0.98rem; line-height: 1.45; text-align: left; }

/* ===========================
   Slideshow Styles (integrated)
   =========================== */

/* ===========================
   Team / Board member styles
   =========================== */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 9000px; margin: 24px auto; align-items: start; }
.member-card { text-align: left; background: var(--card-bg); padding: 20px; border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,0.06); display: flex; gap: 16px; align-items: flex-start; }
.member-photo { width: 180px; height: 180px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #e9e9e9; }
.member-card h4 { margin: 0 0 6px 0; font-family: 'PlayfairDisplay', serif; font-size: 1.1rem; }
.member-card .role { margin: 0 0 8px 0; color: #666; font-size: 0.98rem; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; max-width: 720px; } .member-photo { width: 160px; height: 160px; } }
@media (max-width: 700px) { .team-grid { grid-template-columns: 1fr; gap: 16px; max-width: 92%; } .member-photo { width: 120px; height: 120px; } .member-card { padding: 14px; flex-direction: row; } }
@media (max-width: 700px) {
   .member-card { flex-direction: column; align-items: center; text-align: center; }
   .member-card .bio { text-align: left; width: 100%; margin-top: 12px; }
   .member-card h4, .member-card .role { text-align: center; }
   .member-photo { width: 140px; height: 140px; border-radius: 8px; }
}
.mySlides { display: none; position: absolute; inset: 0; }
.slideshow-container { max-width: 1000px; width: 100%; aspect-ratio: 16/9; position: relative; margin: 0 auto; background: var(--muted); border-radius: 8px; overflow: hidden; }
.slideshow-container img { display: block; width: 100%; height: 100%; object-fit: contain; }
.prev, .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: auto;
   padding: 12px;
   color: #fff;
   font-weight: bold;
   font-size: 18px;
   transition: background-color 180ms ease, transform 160ms ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
   background: rgba(0,0,0,0.35);
   text-decoration: none;
}
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.6);}
.text { color:var(--card-bg); font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; pointer-events: none; }
.numbertext { font-weight: bold; color: var(--accent); font-size: 12px; padding: 8px 12px; position: absolute; top: 0; pointer-events: none; }
.dot { cursor: pointer; height: 12px; width: 12px; margin: 0 4px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 260ms ease; }
.active, .dot:hover { background-color: #717171; }
.fade { animation-name: fade; animation-duration: 900ms; }
@keyframes fade { from {opacity: .4} to {opacity: 1} }

@media only screen and (max-width: 700px) {
   .prev, .next, .text { font-size: 14px; padding: 10px; }
}

hr {
   width: 100%;
   max-width: 1000px;
   margin: 28px auto;
   height: 2px;
   background-color: var(--accent);
   border: none;
}

a{
   color: var(--accent)
}

a:hover{
   color: var(--accent-bright)
}

/* Motivational hero motto */
.hero-motto { font-weight: 800; font-family: 'PlayfairDisplay', serif; font-size: clamp(1.6rem, 4vw, 3rem); margin: 12px 0 6px; text-align: center; line-height: 1.05; }
.hero-motto .gradient { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-motto-sub { text-align:center; color:#555; margin-bottom:10px; }

/* small accent span to use inside paragraphs */
.fun-accent { color: var(--accent); font-weight:700; }
.fun-accent-2 { color: var(--accent-2); font-weight:700; }