/* Core theme — Alignment Agency (white / black / red) */
:root{
  --bg: #fff;
  --bg-2: #f7f7f7;
  --text: #111;
  --muted: #666;
  --accent: #e31b23; /* red */
  --black: #000;

  /* UI surface variables (theme-aware) */
  --card-bg: #fff;
  --header-bg: var(--black);
  --header-text: #fff;
  --logo-bg: #fff;
  --nav-link-color: #fff;
  --toggle-border: rgba(0,0,0,0.08);
  --card-shadow: rgba(0,0,0,0.08);
  --glass: rgba(255,255,255,0.04);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;}
body.aa-bg{background:linear-gradient(180deg,#fff,#f7f7f7);color:var(--text);min-height:100vh;display:flex;flex-direction:column;}
main{flex:1;padding:2rem 1rem;max-width:1200px;margin:0 auto}

/* Header */
header{
  background:var(--header-bg);
  color:var(--header-text);
  padding:0.8rem 1rem;
  box-shadow:0 3px 12px rgba(0,0,0,0.12);
  transition:background .25s ease, color .25s ease;
}
.header-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo-area{display:flex;align-items:center;gap:0.75rem}
.site-logo{
  width:64px;height:64px;object-fit:contain;border-radius:6px;
  background:var(--logo-bg);padding:6px;
  transition:background .25s ease;
}
.logo-text{font-weight:800;font-size:1.1rem}
.logo-motto{font-size:0.8rem;color:#f3f3f3}

/* Nav */
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
nav a{color:var(--nav-link-color);text-decoration:none;padding:0.45rem 0.6rem;border-radius:6px;transition:background 160ms}
nav a:hover{background:rgba(255,255,255,0.06)}

/* Hero */
.hero-card{display:flex;flex-direction:column;align-items:center;text-align:center;margin:1.2rem 0 2rem}
.hero-gradient{border-radius:50%;padding:8px;background:linear-gradient(180deg,var(--accent),#000);display:inline-flex;align-items:center;justify-content:center;margin-bottom:1rem;box-shadow:0 8px 30px rgba(0,0,0,0.15)}
.hero-img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:6px solid #fff}
.hero-title{font-size:1.8rem;margin:0;color:var(--black)}
.hero-sub{color:var(--muted);margin-top:0.4rem}
.hero-motto{margin-top:0.4rem;color:var(--accent);font-weight:700}

/* Grid & Cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-bottom:2rem}
.info-card{
  background:var(--card-bg);
  border-radius:12px;padding:1.25rem;
  box-shadow:0 8px 30px var(--card-shadow);
  border-top:4px solid var(--accent);
  transition:transform .18s, background .18s ease, color .18s ease;
}
.info-card h2, .info-card h3{margin-top:0;color:var(--text)}
.info-card p{color:var(--muted)}

/* Buttons */
.home-btn{display:inline-block;background:var(--accent);color:#fff;padding:0.6rem 1rem;border-radius:8px;text-decoration:none;border:0;font-weight:700;cursor:pointer}
.home-btn:hover{filter:brightness(.95)}

/* Projects / Events list */
.projects-list{margin-top:1.5rem;background:transparent;padding:0}
.events-grid .muted{color:var(--muted);font-size:0.9rem}

/* Contact form */
.contact-section{display:grid;grid-template-columns:1fr;gap:1rem}
.contact-form{display:flex;flex-direction:column;gap:0.6rem}
.contact-form label{font-weight:600}
.contact-form input, .contact-form textarea, .contact-form select{padding:0.6rem;border-radius:8px;border:1px solid #ddd}
.contact-info a{color:var(--accent);text-decoration:none}

/* Footer */
footer{background:var(--black);color:#fff;padding:1rem;text-align:center;margin-top:2rem}
.footer-links a{color:#fff;text-decoration:none;margin:0 .4rem}
.footer-links a:hover{color:var(--accent)}

/* Registration modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.6);
  z-index:9999;
  padding:1rem;
}
.modal.show{display:flex}
.modal-content{
  background:#fff;
  color:var(--black);
  border-radius:12px;
  max-width:520px;
  width:100%;
  padding:1.25rem;
  box-shadow:0 12px 40px rgba(0,0,0,0.25);
}
.modal-close{
  background:transparent;
  border:0;
  font-size:1.6rem;
  line-height:1;
  position:absolute;
  right:1.25rem;
  top:0.8rem;
  cursor:pointer;
  color:var(--black);
}
.reg-form{display:flex;flex-direction:column;gap:.6rem}
.reg-form input, .reg-form textarea{
  padding:.6rem;
  border-radius:8px;
  border:1px solid #ddd;
  width:100%;
  box-sizing:border-box;
}

/* Team avatar sizing — keeps images small, cropped and responsive */
.avatar {
  width: 120px;
  height: 120px;
  max-width: 100%;
  object-fit: cover; /* crop to fill */
  display: block;
  margin: 0 auto 1rem;
  border-radius: 50%; /* use 8px for rounded square instead */
}

/* Slightly larger avatars on wider screens */
@media (min-width: 900px) {
  .avatar {
    width: 140px;
    height: 140px;
  }
}

/* Theme toggle button */
.theme-toggle{
  background:transparent;
  border:1px solid var(--toggle-border);
  color:inherit;
  padding:0.4rem 0.6rem;
  border-radius:8px;
  cursor:pointer;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

/* Mobile navigation: hamburger + dropdown */
.site-nav{position:relative;display:flex;align-items:center;gap:0.5rem}
.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  color:inherit;
  font-size:1.25rem;
  padding:0.35rem 0.5rem;
  border-radius:6px;
  cursor:pointer;
}
#nav-list{display:flex;gap:1rem;align-items:center;margin:0;padding:0;list-style:none}
#nav-list li{margin:0}
#nav-list a{display:inline-block;padding:0.35rem 0.5rem;border-radius:6px}

/* small screens: hide horizontal nav, show hamburger and stacked dropdown */
@media (max-width:720px){
  .menu-toggle{display:inline-flex}
  #nav-list{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:8px;
    right:8px;
    background:var(--card-bg);
    color:var(--text);
    border-radius:10px;
    padding:0.6rem;
    flex-direction:column;
    gap:0.4rem;
    box-shadow:0 12px 30px var(--card-shadow);
    z-index:40;
  }
  /* ensure nav links inside the mobile dropdown are readable */
  #nav-list a { color: var(--text); }
  .site-nav.open #nav-list{display:flex}
  /* make nav-cta and theme-toggle sit inline on header but avoid overlap */
  .site-nav .nav-cta, .site-nav .theme-toggle{margin-left:0.4rem}
}

/* Dark theme variables */
[data-theme="dark"]{
  --bg: #0b0b0d;
  --bg-2: #0f1112;
  --text: #eaeaea;
  --muted: #b9b9b9;
  --accent: #e31b23;
  --black: #111; /* used as base for header background in dark */
  --card-bg: #0f1112;
  --header-bg: #0b0b0d;
  --header-text: #eaeaea;
  --logo-bg: #111;
  --nav-link-color: #eaeaea;
  --toggle-border: rgba(255,255,255,0.06);
  --card-shadow: rgba(0,0,0,0.7);
  --glass: rgba(255,255,255,0.02);
}

/* Apply theme variables (override earlier body rule) */
body.aa-bg{
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  color: var(--text);
  transition: background .25s ease, color .25s ease;
}

/* ensure modal looks good on small screens */
@media (max-width:520px){
  .modal-content{padding:1rem;border-radius:10px}
  .modal-close{top:0.6rem;right:0.8rem;font-size:1.4rem}
}

/* subtle animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.info-card{animation:fadeInUp .6s ease both}