/*
Theme Name: AMoCC
Theme URI: https://goamocc.com
Author: Your Name
Description: Custom theme for the American Museum of Counter Culture
Version: 1.0
License: GNU General Public License v2 or later
*/

/* === Base === */
:root{
  --bg:#0f0f10; --ink:#f2f1eb; --muted:#9a9a9a;
  --primary:#f7c845; --accent:#ef4b8b; --card:#1a1a1a; --line:#232323;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;}
a {
  color: var(--primary);
  text-decoration: none;
}  
img{max-width:100%;height:auto;display:block;}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px;}

/* === Header === */
.site-header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.6);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid #000;}
.site-header .wrap{display:flex;align-items:center;gap:16px;min-height:58px;}
.brand{color:var(--ink);text-decoration:none;font-weight:800;letter-spacing:.2px;}
.header-donate{margin-left:auto}
.site-nav ul{list-style:none;margin:0 12px; padding:0;display:flex;gap:18px;}
.site-nav a{color:var(--ink);text-decoration:none;opacity:.85;}
.site-nav a:hover{opacity:1}

/* === Buttons === */
.btn{display:inline-block;padding:.8rem 1.05rem;border-radius:.5rem;
  font-weight:700;text-decoration:none;transition:transform .08s ease,opacity .2s ease;}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--primary);color:#111;}
.btn--primary:hover{opacity:.92}
.btn--accent{background:var(--accent);color:#fff;}
.btn--accent:hover{opacity:.92}

/* === Sections (used by your front-page) === */
.mission-section{background:#141415;padding:3rem 1.25rem;text-align:center;}
.mission-section h2{margin:0 0 .75rem}
.featured-events{background:#111;padding:3rem 1.25rem;}
.featured-events h2{text-align:center;margin:0 0 1rem}
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;max-width:1100px;margin:0 auto;}
.event-card{background:var(--card);border:1px solid var(--line);border-radius:.6rem;overflow:hidden;}
.event-card h3{font-size:1.05rem;margin:.5rem 0 0;padding:0 12px;}
.event-card p{color:var(--muted);margin:.35rem 0 12px;padding:0 12px}

/* === Footer === */
.site-footer{border-top:1px solid var(--line);background:#0d0d0e;padding:2rem 0;margin-top:3rem;}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;}
.footer-nav a{color:var(--muted);text-decoration:none;}
.footer-nav a:hover{color:var(--ink)}

/* === Responsive === */
@media (max-width:720px){
  .site-nav{display:none;} /* simple for now, we can add a burger later */
  .header-donate{margin-left:0}
}

/* Mobile toggle button */
.nav-toggle{
  display:none; margin-left:auto; font-size:1.5rem; line-height:1; 
  background:transparent; color:var(--ink); border:0; cursor:pointer;
}

/* Mobile nav behavior */
@media (max-width:720px){
  .nav-toggle{display:block;}
  .site-nav{display:none; width:100%;}
  .site-header .wrap{flex-wrap:wrap;}
  .site-nav.is-open{display:block; padding:10px 0; border-top:1px solid var(--line);}
  .site-nav ul{flex-direction:column; gap:10px; margin:8px 0 0;}
  .header-donate{margin-left:auto; order:3;}
}


/* === General Page Layout === */
.page-content {
  padding: 3rem 1.25rem;
}

.page-content .container {
  max-width: 1100px;
  margin: 0 auto;
}

.page-content h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1.25rem;
  font-weight: 700;
  color: var(--primary);
}

.page-content p {
  max-width: 800px;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* === Event List === */
.event-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}

.event-list li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  color: var(--ink);
}

/* === Merch Grid === */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 1.5rem;
}

.merch-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
}

/* === Buttons (shared style) === */
.btn.btn-primary {
  display: inline-block;
  background: var(--primary);
  color: #111;
  padding: 0.85rem 1.15rem;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.btn.btn-primary:hover {
  opacity: 0.9;
}



/* Archive tabs */
.amocc-archive .archive-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:1rem;}
.amocc-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.amocc-tab{
  appearance:none;border:1px solid var(--line);background:#141415;color:var(--ink);
  padding:.6rem .9rem;border-radius:.5rem;cursor:pointer;font-weight:700;
}
.amocc-tab.is-active{background:var(--primary);color:#111;border-color:var(--primary);}

.amocc-panel{margin-top:1rem;display:none;}
.amocc-panel.is-active{display:block;}

.amocc-event-list{display:flex;flex-direction:column;gap:14px;margin-top:.5rem;}
.amocc-event-row{display:grid;grid-template-columns:180px 1fr;gap:16px;background:#121212;border:1px solid var(--line);border-radius:.65rem;overflow:hidden;padding:10px;}
.amocc-event-thumb img{width:100%;height:auto;display:block;border-radius:.45rem;}
.amocc-event-thumb__placeholder{width:100%;height:120px;background:#1e1e1f;border-radius:.45rem;}
.amocc-event-body{display:flex;flex-direction:column;gap:.35rem;}
.amocc-event-title{margin:.1rem 0 0;font-size:1.15rem;}
.amocc-event-title a{color:var(--ink);text-decoration:none;}
.amocc-event-title a:hover{text-decoration:underline;}
.amocc-event-date{color:var(--primary);font-weight:700;}
.amocc-event-excerpt p{margin:.15rem 0 0;color:var(--muted);}
.amocc-event-link{margin-top:.35rem;align-self:flex-start;color:var(--accent);text-decoration:none;font-weight:700;}
.amocc-event-link:hover{text-decoration:underline;}

@media (max-width:720px){
  .amocc-archive .archive-header{flex-direction:column;align-items:flex-start;}
  .amocc-event-row{grid-template-columns:1fr;}
}

.custom-logo {
  max-height: 60px;
  width: auto;
}