/* Taita Queens site CSS (extracted from your HTML) */

* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --primary:#1a4d2e;
  --primary-light:#2d7a4f;
  --accent:#ffd700;
  --accent-dark:#ffb800;
  --dark:#0f1419;
  --light:#f8f9fa;
  --text-dark:#1a1a1a;
  --text-light:#ffffff;
  --border:#e0e0e0;
}

html, body { height:100%; }
body{
  font-family:'Inter', sans-serif;
  color:var(--text-dark);
  background-color:var(--light);
  line-height:1.6;
  overflow-x:hidden;
}

/* ===== TRIAL POPUP MODAL ===== */
.modal{
  display:flex;
  position:fixed;
  z-index:1000;
  left:0; top:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);
  align-items:center;
  justify-content:center;
  animation:fadeIn 0.3s ease;
}
.modal.hidden{ display:none; }

@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

.modal-content{
  background:white;
  padding:2.5rem;
  border-radius:12px;
  width:90%;
  max-width:600px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
  animation:slideUp 0.4s ease;
  position:relative;
}
@keyframes slideUp { from{transform:translateY(50px);opacity:0;} to{transform:translateY(0);opacity:1;} }

.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.5rem;
  border-bottom:2px solid var(--accent);
  padding-bottom:1rem;
}
.modal-header h2{
  font-family:'Poppins', sans-serif;
  font-size:1.8rem;
  font-weight:800;
  color:var(--primary);
}
.modal-close{
  background:none;
  border:none;
  font-size:1.5rem;
  cursor:pointer;
  color:#666;
  transition:color 0.3s ease;
}
.modal-close:hover{ color:var(--primary); }

.modal-subtitle{
  font-size:0.9rem;
  color:#666;
  margin-bottom:1.5rem;
  font-style:italic;
}

.modal-form-group{ margin-bottom:1.5rem; }
.modal-form-group label{
  display:block;
  margin-bottom:0.5rem;
  color:var(--primary);
  font-weight:600;
  font-size:0.95rem;
}
.required{ color:#e74c3c; }

.modal-form-group input,
.modal-form-group select,
.modal-form-group textarea{
  width:100%;
  padding:0.8rem;
  border:1px solid var(--border);
  border-radius:6px;
  font-family:inherit;
  font-size:0.95rem;
  transition:all 0.3s ease;
}
.modal-form-group input:focus,
.modal-form-group select:focus,
.modal-form-group textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(26,77,46,0.1);
}
.modal-form-group textarea{ resize:vertical; min-height:80px; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }

.modal-footer{ display:flex; gap:1rem; justify-content:space-between; }

.modal-btn{
  padding:0.9rem 1.8rem;
  border:none;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  font-size:0.95rem;
}
.modal-btn-submit{
  background:var(--primary);
  color:white;
  flex:1;
}
.modal-btn-submit:hover{
  background:var(--primary-light);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(26,77,46,0.3);
}
.modal-btn-close{
  background:var(--border);
  color:var(--text-dark);
  flex:0.5;
}
.modal-btn-close:hover{ background:#d0d0d0; }

.form-error{
  color:#e74c3c;
  font-size:0.85rem;
  margin-top:0.3rem;
  display:none;
}
.modal-form-group.error input,
.modal-form-group.error select{ border-color:#e74c3c; }
.modal-form-group.error .form-error{ display:block; }

/* ===== NAV ===== */
nav{
  background:var(--dark);
  padding:1rem 2rem;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.nav-container{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.logo{
  font-family:'Poppins', sans-serif;
  font-size:1.8rem;
  font-weight:800;
  color:var(--accent);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.logo:hover{ color:var(--accent-dark); }

.nav-menu{ display:flex; gap:2rem; list-style:none; }
.nav-menu a{
  color:var(--text-light);
  text-decoration:none;
  font-weight:500;
  transition:all 0.3s ease;
  position:relative;
}
.nav-menu a:hover{ color:var(--accent); }
.nav-menu a::after{
  content:'';
  position:absolute;
  bottom:-5px; left:0;
  width:0;
  height:2px;
  background:var(--accent);
  transition:width 0.3s ease;
}
.nav-menu a:hover::after{ width:100%; }

@media (max-width:768px){
  .nav-menu{ gap:1rem; font-size:0.9rem; }
  .logo{ font-size:1.4rem; }
}

/* ===== PAGES ===== */
.page{ display:none; }
.page.active{ display:block; }

/* ===== HERO ===== */
.hero{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color:var(--text-light);
  padding:5rem 2rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:radial-gradient(circle at 20% 50%, rgba(255,215,0,0.1) 0%, transparent 50%);
  pointer-events:none;
}
.hero-content{
  max-width:600px;
  margin:0 auto;
  position:relative;
  z-index:1;
  animation:fadeInUp 0.8s ease;
}
.hero h1{
  font-family:'Poppins', sans-serif;
  font-size:3.5rem;
  font-weight:800;
  margin-bottom:1rem;
  text-shadow:2px 2px 4px rgba(0,0,0,0.3);
}
.hero p{
  font-size:1.2rem;
  margin-bottom:2rem;
  color:rgba(255,255,255,0.95);
}
.hero-buttons{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.btn{
  padding:0.9rem 2rem;
  border:none;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  font-size:1rem;
  text-decoration:none;
  display:inline-block;
}
.btn-primary{ background:var(--accent); color:var(--primary); }
.btn-primary:hover{
  background:var(--accent-dark);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(255,215,0,0.3);
}
.btn-secondary{
  background:transparent;
  color:var(--text-light);
  border:2px solid var(--accent);
}
.btn-secondary:hover{ background:var(--accent); color:var(--primary); }

@keyframes fadeInUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }

/* ===== SECTIONS ===== */
.section{ max-width:1200px; margin:0 auto; padding:3rem 2rem; }
.section-title{
  font-family:'Poppins', sans-serif;
  font-size:2.5rem;
  font-weight:800;
  margin-bottom:2rem;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:1px;
}

/* ===== MATCH WIDGET ===== */
.match-widget{
  background:white;
  border-left:4px solid var(--accent);
  padding:1.5rem;
  border-radius:8px;
  margin-bottom:2rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  transition:all 0.3s ease;
}
.match-widget:hover{
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
  transform:translateY(-2px);
}
.match-header{
  font-size:0.85rem;
  color:#666;
  text-transform:uppercase;
  margin-bottom:0.5rem;
  font-weight:600;
}
.match-teams{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:1rem 0;
  gap:1rem;
}
.team{ flex:1; text-align:center; }
.team-name{
  font-family:'Poppins', sans-serif;
  font-size:1.1rem;
  font-weight:600;
  color:var(--primary);
}
.score{
  font-family:'Poppins', sans-serif;
  font-size:2.5rem;
  font-weight:800;
  color:var(--accent);
  margin:0 1rem;
}
.match-details{
  display:flex;
  gap:2rem;
  justify-content:center;
  font-size:0.9rem;
  color:#666;
  margin-top:1rem;
}
.status-scheduled{ color:#ff9800; font-weight:600; }
.status-played{ color:var(--primary); font-weight:600; }

/* ===== NEWS GRID ===== */
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:2rem;
  margin-bottom:2rem;
}
.news-card{
  background:white;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  transition:all 0.3s ease;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.news-card:hover{
  box-shadow:0 6px 20px rgba(0,0,0,0.1);
  transform:translateY(-4px);
}
.news-image{
  width:100%;
  height:180px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:3rem;
}
.news-content{ padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.news-date{
  font-size:0.8rem;
  color:var(--accent);
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:0.5rem;
}
.news-title{
  font-family:'Poppins', sans-serif;
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:0.5rem;
  color:var(--text-dark);
}
.news-excerpt{ font-size:0.9rem; color:#666; margin-bottom:1rem; flex:1; }
.read-more{
  color:var(--primary);
  font-weight:600;
  text-decoration:none;
  transition:all 0.3s ease;
  align-self:flex-start;
}
.read-more:hover{ color:var(--accent); }

/* ===== TABLES ===== */
.table-container{ overflow-x:auto; margin-bottom:2rem; }
table{
  width:100%;
  border-collapse:collapse;
  background:white;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  border-radius:8px;
  overflow:hidden;
}
thead{ background:var(--primary); color:white; }
th, td{ padding:1.2rem; text-align:left; }
th{
  font-weight:600;
  text-transform:uppercase;
  font-size:0.85rem;
  letter-spacing:0.5px;
}
tbody tr{ border-bottom:1px solid var(--border); transition:background 0.2s ease; }
tbody tr:hover{ background:rgba(255,215,0,0.05); }
tbody tr:last-child{ border-bottom:none; }

/* ===== SQUAD ===== */
.squad-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:2rem;
}
.player-card{
  background:white;
  border-radius:8px;
  overflow:hidden;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  transition:all 0.3s ease;
  cursor:pointer;
}
.player-card:hover{
  box-shadow:0 6px 20px rgba(0,0,0,0.1);
  transform:translateY(-4px);
}
.player-photo{
  width:100%;
  height:240px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:4rem;
  color:rgba(255,215,0,0.3);
}
.player-info{ padding:1.5rem; }
.player-number{
  display:inline-block;
  background:var(--accent);
  color:var(--primary);
  width:40px; height:40px;
  border-radius:50%;
  line-height:40px;
  font-weight:700;
  font-family:'Poppins', sans-serif;
  margin-bottom:0.5rem;
}
.player-name{
  font-family:'Poppins', sans-serif;
  font-size:1.1rem;
  font-weight:700;
  color:var(--text-dark);
  margin-bottom:0.3rem;
}
.player-position{
  color:var(--primary);
  font-weight:600;
  font-size:0.9rem;
  text-transform:uppercase;
  margin-bottom:0.5rem;
}
.player-bio{ font-size:0.85rem; color:#666; }

/* ===== ABOUT/CONTACT ===== */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:3rem; }
.about-text h2{ font-family:'Poppins', sans-serif; font-size:1.8rem; color:var(--primary); margin-bottom:1rem; }
.about-text p{ margin-bottom:1rem; color:#666; line-height:1.8; }
.values-list{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem; }
.value-item{
  padding:1rem;
  background:rgba(26,77,46,0.05);
  border-left:3px solid var(--accent);
  border-radius:4px;
}
.value-item strong{ color:var(--primary); display:block; margin-bottom:0.3rem; }

.staff-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:2rem; margin-bottom:3rem; }
.staff-card{
  text-align:center;
  padding:1.5rem;
  background:white;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.staff-avatar{
  width:120px; height:120px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  margin:0 auto 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
}
.staff-name{ font-family:'Poppins', sans-serif; font-weight:700; color:var(--primary); margin-bottom:0.3rem; }
.staff-role{ color:var(--accent); font-size:0.9rem; text-transform:uppercase; font-weight:600; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.contact-info{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-item{ display:flex; gap:1.5rem; align-items:flex-start; }
.contact-icon{ font-size:1.5rem; color:var(--accent); min-width:30px; text-align:center; margin-top:0.3rem; }
.contact-details h3{ color:var(--primary); margin-bottom:0.3rem; font-family:'Poppins', sans-serif; }
.contact-details a{ color:#666; text-decoration:none; transition:color 0.3s ease; }
.contact-details a:hover{ color:var(--primary); }

.social-links{ display:flex; gap:1rem; margin-top:1rem; }
.social-link{
  display:inline-block;
  width:40px; height:40px;
  background:var(--primary);
  color:white;
  border-radius:50%;
  text-align:center;
  line-height:40px;
  text-decoration:none;
  transition:all 0.3s ease;
}
.social-link:hover{ background:var(--accent); color:var(--primary); }

.contact-form{
  background:white;
  padding:2rem;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.form-group{ margin-bottom:1.5rem; }
.form-group label{ display:block; margin-bottom:0.5rem; color:var(--primary); font-weight:600; }
.form-group input, .form-group textarea{
  width:100%;
  padding:0.8rem;
  border:1px solid var(--border);
  border-radius:4px;
  font-family:inherit;
  font-size:1rem;
  transition:border-color 0.3s ease;
}
.form-group input:focus, .form-group textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(26,77,46,0.1);
}
.form-group textarea{ resize:vertical; min-height:120px; }

/* ===== FOOTER ===== */
footer{
  background:var(--dark);
  color:white;
  text-align:center;
  padding:2rem;
  margin-top:3rem;
}
footer p{ margin-bottom:0.5rem; }
footer a{ color:var(--accent); text-decoration:none; }
footer a:hover{ text-decoration:underline; }

/* ===== ARTICLE VIEW ===== */
.article-view{ max-width:800px; margin:0 auto; }
.article-hero{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  height:300px;
  border-radius:8px;
  margin-bottom:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:5rem;
}
.article-meta{ display:flex; gap:1rem; margin-bottom:1.5rem; color:#666; font-size:0.9rem; }
.article-meta span{ display:flex; gap:0.5rem; }
.article-title{
  font-family:'Poppins', sans-serif;
  font-size:2.2rem;
  font-weight:800;
  color:var(--primary);
  margin-bottom:1.5rem;
  line-height:1.2;
}
.article-body{
  background:white;
  padding:2rem;
  border-radius:8px;
  line-height:1.8;
  color:#333;
}
.article-body p{ margin-bottom:1.5rem; }
.back-link{
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
  margin-bottom:2rem;
  display:inline-block;
}
.back-link:hover{ color:var(--accent); }

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .hero h1{ font-size:2rem; }
  .section-title{ font-size:1.8rem; }
  .match-teams{ flex-wrap:wrap; }
  .score{ font-size:1.8rem; margin:0.5rem 0; }
  .match-details{ flex-wrap:wrap; gap:1rem; }
  .news-grid{ grid-template-columns:1fr; }
  .squad-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .table-container{ font-size:0.85rem; }
  th, td{ padding:0.8rem; }
  .article-title{ font-size:1.5rem; }
}