/* =========================================================
   KHNA – Full CSS (Background Image + Dropdowns + Responsive)
   ========================================================= */

/* BASE */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  color:#ffffff;
  background:
    linear-gradient(rgba(20,10,5,.75), rgba(20,10,5,.75)),
    url("../images/khna_background1_blended.jpg") center/cover no-repeat fixed;
}

a{ color:inherit; text-decoration:none; }
.container{ width:min(1200px, 92%); margin:auto; }

/* HEADER */
.header{
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,.45);
  border-bottom:1px solid rgba(255,255,255,.15);
  position:sticky;
  top:0;
  z-index:999;
}

.header__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0;
  gap: 14px;
}

/* LOGO */
.brand{ display:flex; align-items:center; gap:15px; }
.logo{ height:70px; width:auto; border-radius:12px; }
.brand-text{ display:flex; flex-direction:column; }
.org-name{ font-size:24px; font-weight:900; color:#F4C430; letter-spacing:1px; }
.org-full{ font-size:13px; opacity:.9; }

/* NAV BUTTON */
.navbtn{
  display:none;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}

/* NAV */
.nav{
  display:flex;
  gap:25px;
  align-items:center;
  position: relative;
}

.nav a{
  font-weight:600;
  transition:.25s;
}
.nav a:hover{ color:#F4C430; }

/* Dropdown (fixed hover) */
.dropdown{ position:relative; display:inline-block; }
.dropdown > a.dropbtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 10px; /* larger hover area */
  cursor:pointer;
}
.caret{ font-size: 12px; opacity:.85; }

/* submenu */
.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;            /* no gap */
  left:0;
  min-width:230px;
  margin-top:0;

  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  border-radius:14px;
  padding:10px;
  border:1px solid rgba(255,255,255,.12);

  box-shadow:0 15px 35px rgba(0,0,0,.5);
  z-index:9999;
}

/* show */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  display:block;
}

/* keep open on mobile when .open is added */
.dropdown.open .dropdown-menu{
  display:block;
}

.dropdown-menu a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  white-space: nowrap;
}

.dropdown-menu a:hover{
  background: rgba(244,196,48,.2);
  color:#F4C430;
}

/* Highlight Donations */
.donate-link{
  color:#F4C430 !important;
  font-weight:800 !important;
}

/* HERO */
.hero{ padding:90px 0; text-align:center; }
.hero h1{
  font-size:clamp(30px,5vw,50px);
  margin-bottom:20px;
  color:#F4C430;
}
.hero p{
  font-size:18px;
  max-width:750px;
  margin:0 auto;
  opacity:.95;
}
.hero-actions{ margin-top: 18px; }

/* BUTTONS */
.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:30px;
  font-weight:700;
  margin:10px;
  transition:.2s;
}
.btn-primary{
  background: linear-gradient(135deg,#C79A2B,#F4C430);
  color:#2B1B12;
}
.btn-primary:hover{ transform:scale(1.03); }
.btn-ghost{
  border:1px solid #F4C430;
  color:#F4C430;
}
.btn-ghost:hover{
  background:#F4C430;
  color:#2B1B12;
}

/* SECTIONS */
.section{ padding:70px 0; }
.section-title{
  text-align:center;
  margin-bottom:40px;
  font-size:30px;
  color:#F4C430;
}

/* GRID + CARD */
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}
.card{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  border-radius:20px;
  padding:30px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.card h3{ color:#F4C430; margin-bottom:15px; }

.link{
  display:inline-block;
  margin-top:10px;
  color:#F4C430;
  font-weight:700;
}
.link:hover{ text-decoration:underline; }

/* PRESIDENT PAGE SUPPORT */
.profile-card{
  display:flex;
  gap:40px;
  align-items:center;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  border-radius:20px;
  padding:40px;
  border:1px solid rgba(255,255,255,.15);
}
.profile-photo img{
  width:280px;
  height:350px;
  object-fit:cover;
  border-radius:18px;
  border:4px solid #F4C430;
}
.profile-info h1{ color:#F4C430; font-size:32px; margin-bottom:8px; }
.profile-info h3{ margin-bottom:20px; opacity:.9; }

/* FOOTER */
.footer{
  background: rgba(0,0,0,.6);
  text-align:center;
  padding:25px;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:14px;
}

/* RESPONSIVE */
@media(max-width:1000px){
  .grid3{ grid-template-columns:1fr; }
  .profile-card{ flex-direction:column; text-align:center; }
  .profile-photo img{ width:220px; height:280px; }
}

@media(max-width:900px){
  .navbtn{ display:inline-block; }

  .nav{
    display:none;
    position:absolute;
    right: 4%;
    top: 85px;
    width: min(360px, 92vw);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;

    background: rgba(0,0,0,.75);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 12px;
  }
  .nav.nav--open{ display:flex; }

  .dropdown{ width: 100%; }
  .dropdown > a.dropbtn{ width: 100%; justify-content: space-between; }
  .dropdown-menu{
    position: static; /* inside the opened mobile menu */
    min-width: unset;
    margin-top: 8px;
  }
}
/* ================= EXECUTIVE TEAM ================= */

.team-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
}

.team-card{
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  border-radius:20px;
  padding:25px;
  text-align:center;
  border:1px solid rgba(255,255,255,.15);
  transition:.3s;
}

.team-card:hover{
  transform: translateY(-5px);
  box-shadow:0 20px 40px rgba(0,0,0,.6);
}

.team-card img{
  width:180px;
  height:220px;
  object-fit:cover;
  border-radius:15px;
  border:4px solid #F4C430;
  margin-bottom:15px;
}

.team-card h3{
  color:#F4C430;
  margin-bottom:8px;
}

.designation{
  font-weight:600;
  opacity:.85;
}

/* Responsive */
@media(max-width:1000px){
  .team-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:600px){
  .team-grid{
    grid-template-columns: 1fr;
  }
}
/* ===== Convention Registration Form ===== */
.form-card { padding: 28px; }
.form-errors { border: 1px solid rgba(255,80,80,.35); }
.form-success { border: 1px solid rgba(80,255,160,.30); }

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.field label{
  display:block;
  font-weight:700;
  margin-bottom:6px;
  opacity:.95;
}

.field input, .field select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#fff;
  outline:none;
}

.field input:focus, .field select:focus{
  border-color: rgba(244,196,48,.65);
}

.field-span2{ grid-column: span 2; }

.divider{
  height:1px;
  background: rgba(255,255,255,.14);
  margin: 22px 0;
}

.form-subtitle{
  color:#F4C430;
  margin-bottom: 14px;
}

.member-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.member-card{
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding: 14px;
}

.member-title{
  font-weight:900;
  color:#F4C430;
  margin-bottom: 10px;
}

.member-card label{
  margin-top: 10px;
}

.hint{
  font-size: 12px;
  opacity: .8;
  margin-top: 6px;
}

.form-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

@media (max-width: 1000px){
  .member-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  .form-grid{ grid-template-columns: 1fr; }
  .field-span2{ grid-column: span 1; }
}