/* ============================================================
   Wheatland Street Fair Foundation
   Professional purple theme | responsive | multi-page
   --------------------------------------------------------
   NOTE: the brand purple is the single variable --purple
   below. Swap that one value to match the exact site color.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Open+Sans:ital,wght@0,400;0,600;1,400&display=swap');

:root{
  --purple:#7a3f93;       /* BRAND PURPLE, sampled by eye from the WSF logo ring */
  --purple-dk:#56286b;
  --purple-dker:#391a47;
  --purple-lt:#f1e9f5;
  --gold:#f4ead0;         /* CREAM accent (logo lettering) - used on dark backgrounds */
  --gold-dk:#6e2230;      /* WINE accent (logo inner ring) - used on light backgrounds */
  --ink:#2b2533;
  --paper:#faf7fc;
  --card:#ffffff;
  --line:rgba(43,37,51,.14);
  --shadow:rgba(57,26,71,.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Open Sans',-apple-system,Segoe UI,sans-serif;
  color:var(--ink);
  line-height:1.7;
  background:var(--paper);
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;}
.info-grid .cell .val,.info-grid .cell .val a,.form-links a{overflow-wrap:anywhere;}

/* ---------- Header ---------- */
.site-header{
  background:var(--purple);
  background-image:linear-gradient(180deg,var(--purple) 0%,var(--purple-dk) 100%);
  color:#fff;
  text-align:center;
  border-bottom:5px solid var(--gold);
}
.brand{max-width:1000px;margin:0 auto;padding:26px 20px 20px;}
.brand .est{
  font-family:'Lato',sans-serif;font-weight:700;letter-spacing:.34em;
  font-size:.7rem;text-transform:uppercase;color:var(--gold);margin:0 0 6px;
}
.brand h1{
  font-family:'Lato',sans-serif;font-weight:900;
  letter-spacing:.01em;font-size:clamp(1.6rem,4.8vw,2.8rem);
  margin:0;line-height:1.06;text-shadow:1px 2px 0 var(--purple-dker);
}
.brand .tagline{
  font-family:'Open Sans',sans-serif;font-style:italic;
  color:#e9dcf5;font-size:clamp(1rem,2.6vw,1.25rem);margin:6px 0 0;
}

.brand-logo{
  display:block;margin:0 auto 8px;width:min(82%,300px);height:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));
}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Navigation ---------- */
.nav-toggle{display:none;}
.nav-label{
  display:none;cursor:pointer;
  font-family:'Lato',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;font-size:.95rem;padding:13px 16px;
  color:#fff;background:var(--purple-dker);user-select:none;
}
.nav-label .bars{display:inline-block;margin-right:8px;}
.main-nav{
  background:var(--purple-dk);
  display:flex;flex-wrap:wrap;justify-content:center;
  position:sticky;top:0;z-index:20;
}
.main-nav a{
  font-family:'Lato',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.8rem;color:#ede4f6;text-decoration:none;
  padding:14px 18px;transition:background .15s,color .15s;
  border-bottom:3px solid transparent;
}
.main-nav a:hover{background:var(--purple-dker);color:#fff;border-bottom-color:var(--gold);}
.main-nav a.active{color:var(--gold);border-bottom-color:var(--gold);}

/* ---------- Layout ---------- */
main{max-width:900px;margin:34px auto;padding:0 20px;}
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 10px 28px var(--shadow);
  padding:32px clamp(20px,5vw,48px);
  margin-bottom:24px;
}
.eyebrow{
  font-family:'Lato',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.26em;font-size:.7rem;color:var(--gold-dk);margin:0 0 10px;
}
h2{
  font-family:'Lato',sans-serif;font-weight:900;
  color:var(--purple);font-size:clamp(1.45rem,4vw,2.05rem);margin:0 0 6px;line-height:1.12;
}
.rule{border:0;height:0;border-top:3px solid var(--gold-dk);width:64px;margin:0 0 22px;}
h3{
  font-family:'Lato',sans-serif;font-weight:700;color:var(--purple-dk);
  font-size:1.2rem;margin:26px 0 6px;
}
p{margin:0 0 16px;}
a{color:var(--purple);}
ul{padding-left:0;list-style:none;margin:0 0 16px;}
.tidy-list li{
  padding:12px 14px;border-left:4px solid var(--gold-dk);
  background:var(--purple-lt);border-radius:0 6px 6px 0;margin-bottom:8px;
}
.tidy-list li strong{font-family:'Lato',sans-serif;}

/* ---------- Hero (home) ---------- */
.hero{
  background:var(--purple);
  background-image:linear-gradient(155deg,var(--purple) 0%,var(--purple-dker) 100%);
  color:#f3ecf9;border:3px solid var(--gold);border-radius:8px;
  padding:46px 28px;text-align:center;box-shadow:0 12px 30px var(--shadow);
  margin-bottom:24px;
}
.hero .eyebrow{color:var(--gold);}
.hero h2{color:#fff;}
.hero p{color:#eaddf6;max-width:620px;margin:0 auto 12px;}
.btn{
  display:inline-block;font-family:'Lato',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;
  background:var(--gold);color:var(--purple-dker)!important;text-decoration:none;
  padding:13px 28px;border-radius:4px;margin-top:14px;border:2px solid transparent;
  transition:transform .12s,background .15s,color .15s;
}
.btn:hover{background:#fff;transform:translateY(-2px);}
.btn-outline{background:transparent;color:#fff!important;border-color:var(--gold);}
.btn-outline:hover{background:var(--gold);color:var(--purple-dker)!important;}

/* ---------- Home cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.card{
  display:block;text-decoration:none;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-top:5px solid var(--purple);border-radius:8px;
  padding:22px;box-shadow:0 8px 22px var(--shadow);
  transition:transform .12s,box-shadow .15s,border-top-color .15s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px var(--shadow);border-top-color:var(--gold-dk);}
.card .card-kicker{
  font-family:'Lato',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:.66rem;color:var(--gold-dk);margin:0 0 6px;
}
.card h3{margin:0 0 8px;color:var(--purple);}
.card p{margin:0;font-size:.95rem;}

/* ---------- Forms / link list ---------- */
.form-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:8px 0 4px;}
.form-links a{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--purple-dk);
  font-family:'Lato',sans-serif;font-weight:700;background:var(--purple-lt);
  border:1px solid var(--line);border-radius:6px;padding:15px 18px;
  transition:background .15s,transform .1s;
}
.form-links a:hover{background:#e7d8f4;transform:translateY(-2px);}
.form-links a::before{content:"\1F4C4";font-size:1.1rem;}

/* ---------- Info grid (events/contact) ---------- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:16px 0;}
.info-grid .cell{
  background:var(--purple-lt);border:1px solid var(--line);border-radius:6px;padding:14px 16px;
}
.info-grid .cell .lab{
  font-family:'Lato',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.66rem;color:var(--purple);margin:0 0 2px;
}
.info-grid .cell .val{font-weight:600;margin:0;}

/* ---------- Event blocks ---------- */
.event{border-left:4px solid var(--gold-dk);padding:4px 0 4px 18px;margin:0 0 10px;}
.event .when{font-family:'Lato',sans-serif;font-weight:700;color:var(--purple-dk);margin:0;}
.event .what{margin:0;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--purple-dker);color:#cdbbe2;text-align:center;
  padding:28px 20px;margin-top:40px;border-top:5px solid var(--gold);font-size:.88rem;
}
.site-footer a{color:var(--gold);}
.site-footer .footer-brand{
  font-family:'Lato',sans-serif;font-weight:900;text-transform:uppercase;
  letter-spacing:.14em;color:#fff;margin-bottom:6px;
}
.social{margin:6px 0;}
.social a{margin:0 8px;font-family:'Lato',sans-serif;font-weight:700;}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .nav-label{display:block;text-align:center;}
  .main-nav{flex-direction:column;max-height:0;overflow:hidden;transition:max-height .3s ease;position:static;}
  .nav-toggle:checked ~ .main-nav{max-height:560px;}
  .main-nav a{border-bottom:1px solid rgba(255,255,255,.1);border-left:3px solid transparent;}
  .main-nav a.active{border-bottom-color:rgba(255,255,255,.1);border-left-color:var(--gold);}
  main{margin:22px auto;}
  .panel{padding:26px 20px;}
}