/* ---  Base Setup --- */
html, body {
    height: 100%;
    margin: 0;
    /* light theme: white background, dark text */
    background: #ffffff;
    color: #071317; /* near-black for readability */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Improved typography and utility styles */
h1, h2, h3 { margin: 0 0 10px 0; }
.lead { color: #0b2b1a; margin-bottom: 16px; font-size:18px; max-width:720px; }

.cta-row{ display:flex; gap:12px; margin-top:12px; }
.cta-btn{ display:inline-block; background:linear-gradient(180deg,#2f8f4a,#1e6c36); color:#ffffff; padding:12px 18px; border-radius:8px; text-decoration:none; font-weight:700; box-shadow:0 10px 22px rgba(30,108,54,0.12); border:1px solid rgba(30,108,54,0.12); }
.cta-btn.ghost{ background:transparent; border:1px solid rgba(30,108,54,0.12); box-shadow:none; color:#1e4a2a; }

/* Cards */
.about-card, .events-card{ background: #ffffff; padding:20px; border-radius:12px; margin-top:20px; box-shadow: 0 10px 28px rgba(16,24,16,0.06); border:1px solid rgba(30,108,54,0.08); }
.about-card p, .events-card p { color: #163524; line-height:1.6; }
.events-list{ list-style:none; padding:0; margin:0; }
.events-list li{ padding:8px 0; border-bottom:1px dashed rgba(16,24,16,0.06); color:#163524; }


/* Top navigation bar */
body { padding-top: 64px; }
.top-nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #ffffff;
    border-bottom: 1px solid rgba(10,40,20,0.06);
    z-index: 999;
    display: flex;
    align-items: center;
}
.top-nav .nav-inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0 1rem;
}
.nav-logo{ width:40px; height:40px; object-fit:contain; margin-right:10px; }
.brand{ display:flex; align-items:center; }
.nav-title{ font-weight:700; margin-left:6px; color:#0b2b1a; }
.primary-nav a{ color:#0b2b1a; text-decoration:none; margin-left:18px; font-weight:600; font-size:14px; opacity:0.95; }
.primary-nav a:hover{ opacity:1; color:#196738; }

/* Dropdown styles for Concert Band */
.primary-nav{ display:flex; align-items:center; }
.nav-item{ position:relative; margin-left:14px; }
.drop-toggle{
    background:none;
    border:0;
    color:#0b2b1a; /* dark text for light theme */
    font-weight:600;
    cursor:pointer;
    font-size:14px;
    padding:6px 4px;
}
.drop-toggle:focus{ outline:2px solid rgba(10,40,20,0.12); border-radius:4px; }
.dropdown-menu{
    position: absolute;
    left: 0;
    top: 100%; /* align directly beneath the toggle to avoid a mouse gap */
    background:#ffffff;
    min-width:200px;
    border-radius:6px;
    box-shadow:0 8px 20px rgba(24,28,32,0.06);
    list-style:none;
    padding:8px 0;
    margin:0;
    z-index:1000;
    /* start hidden but present in layout for smooth transitions */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.98); /* small upward offset when hidden to eliminate hover gap */
    pointer-events: none;
    transition: opacity .18s cubic-bezier(.2,.9,.2,1), transform .18s cubic-bezier(.2,.9,.2,1), visibility .12s linear;
}
.dropdown-menu li a{
    display:block;
    padding:10px 16px;
    color:#0b2b1a;
    text-decoration:none;
    font-size:14px;
}
.dropdown-menu li a:hover{ background:rgba(26,115,66,0.06); }

.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu,
.nav-item.open .dropdown-menu{
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Caret animation */
.caret{ display:inline-block; margin-left:6px; transition: transform .22s cubic-bezier(.2,.9,.2,1); transform-origin:50% 50%; }
.nav-item.open .caret,
.nav-item:focus-within .caret,
.nav-item:hover .caret{ transform: rotate(180deg); }

@media (max-width:700px){
  .drop-toggle{ font-size:13px; }
  .dropdown-menu{ min-width:160px; }
}

/* --- Three-Column Grid Layout --- */
.page-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1.2fr; /* Socials | Content | Image */
    align-items: start;
    gap: 32px;
    padding: 2.25rem;
    min-height: calc(100vh - 64px);
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Column Content Styling --- */
.left-column .socials {
    display: flex;
    flex-direction: column; /* Stacks the "Follow" title and icons vertically */
    align-items: center; /* Centers the icons */
    background: #ffffff; /* match other cards */
    padding: 18px;
    border-radius: 10px;
    border: 1px solid rgba(16,24,16,0.06);
    box-shadow: 0 8px 20px rgba(16,24,16,0.04);
}

.center-column {
    padding-right: 20px; /* Adds some space next to the text */
    display:flex; flex-direction:column; gap:16px;
}

.right-column {
    display: flex;
    flex-direction: column; /* Stacks the buttons and the image vertically */
    gap: 20px; /* Space between buttons and image */
}

.image-container img {
    width: 100%; /* Makes the image fill its container */
    height: 100%;
    max-height: 340px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(10,40,20,0.06);
}

/* Hero tweaks */
.hero h1{ font-size:36px; margin-bottom:6px; line-height:1.08; }
.hero .lead{ font-size:16px; color: #234e30; }
.hero{ padding:6px 0; }

/* Responsive: stack columns on small screens */
@media (max-width:900px){
    .page-container{ grid-template-columns: 1fr; padding:1rem; min-height: auto; }
    .right-column, .left-column{ order:2; }
    .center-column{ order:1; }
    .page-container .image-container img{ max-height:260px; object-fit:cover; }
}

/* --- Button and Icon Styling (Mostly Unchanged) --- */
.socials h2 {
    margin-bottom: 15px;
}

.social-icon {
    display: flex; /* Using flex for perfect centering */
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px; /* Space between icons */
    font-size: 22px;
    color: #0b2b1a;
    background-color: #f3f3f3;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.12s ease, background-color 0.18s, color 0.18s;
}

.social-icon:hover {
    transform: translateY(-4px);
    background-color: #1e6c36;
    color: #ffffff;
}

/* Slightly brighter outlines for small cards / image */
.image-container, .left-column .socials, .about-card, .events-card { border: 1px solid rgba(228, 228, 228, 0.08); }

/* small utilities */
.muted { color: #ffffff; }
.card-grid{ display:grid; grid-template-columns:1fr; gap:18px; }

/* Footer — match About page styling and center the content */
.wrap{ max-width:1200px; margin:0 auto; padding:0 1rem; }
.portal-footer{ text-align:center; padding:24px 0; color: #6b6b6b; border-top:1px solid rgba(0,0,0,0.04); }

/* keep .button-nav styles available if used elsewhere (reduced prominence) */
.button-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.button-nav a {
    display: block;
    background-color: #009605;
    color: white;
    padding: 14px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s;
}

.button-nav a:hover {
    background-color: #004011;
}

/* Responsive tweak so fixed nav doesn't overlap small screens */
@media (max-width:700px){
  body{ padding-top:72px; }
  .primary-nav a{ margin-left:12px; font-size:13px; }
.drop-toggle{
    background:none;
    border:0;
    color:#0b2b1a;
    font-weight:600;
    cursor:pointer;
    font-size:14px;
    padding:6px 4px;
}
.drop-toggle:focus{ outline:2px solid rgba(10,40,20,0.12); border-radius:4px; }
}