/* Core theme */
:root {
  --text: #111111;
  --muted: #6b7280;
  --border: #e5e7eb;
  --card: #ffffff;
  --accent: #b02b2b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:#ffffff;color:var(--text)}
.container{max-width:1080px;margin:0 auto;padding:0 1rem}

/* Header */
.header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);background:rgba(12,14,20,.7);border-bottom:1px solid #222}
.brand{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;text-decoration:none;color:#eaeaea}
.brand-badge{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:transparent}
.brand-title{font-weight:650;color:#fff}
.brand-sub{color:#cbd5e1;font-size:.8rem}

/* Desktop nav */
.nav-wrap{display:none}
@media(min-width:880px){.nav-wrap{display:flex;gap:.25rem}}
.nav{list-style:none;margin:0;padding:0;display:flex;gap:.25rem}
.nav>li{position:relative}
.nav>li>a,.nav>li>span{color:#eaeaea;text-decoration:none;padding:.5rem .75rem;border-radius:12px;font-weight:550;display:inline-block}
.nav>li>a:hover{background:#f2f2f2;color:var(--accent)}
.active{background:#ffffff18;border-radius:12px}

/* Submenus (Safari-friendly) */
.submenu{position:absolute;left:0;top:100%;min-width:280px;border:1px solid var(--border);background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}
.nav>li:hover .submenu,.nav>li:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:0s}
.submenu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.submenu a{display:block;padding:.5rem .75rem;border-radius:10px;color:var(--text);text-decoration:none}
.submenu a:hover{background:#f2f2f2;color:var(--accent)}

/* Mobile nav */
.mobile-nav{display:grid;gap:.5rem;padding:0 0 1rem}
.mobile-nav details{border-top:1px solid var(--border)}
.mobile-nav summary{list-style:none;cursor:pointer;padding:.75rem 0;font-weight:600;color:#fff}
.mobile-nav summary::-webkit-details-marker{display:none}
@media(min-width:880px){.mobile-nav{display:none}}

/* Banner */
.page-banner{position:relative}
.page-banner img{width:100%;height:clamp(169px,24vh,242px);display:block;object-fit:cover}
.page-banner .overlay-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(1.5rem,3vw,2.5rem);font-weight:600;color:#fff;background:rgba(0,0,0,.35);padding:.4rem .75rem;border-radius:10px;text-shadow:0 2px 6px rgba(0,0,0,.4);z-index:3}

/* Sections */
section{scroll-margin-top:84px;padding:2.25rem 0}
section h2{font-size:clamp(1.4rem,2.2vw,2rem);margin:0 0 .75rem}
.prose{color:#333}
.cards{display:grid;gap:1rem}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1rem}
.card h3{margin:0 0 .5rem;font-size:1.05rem}
.muted{color:var(--muted)}
.list{line-height:1.8}

/* Buttons (red) */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:14px;text-decoration:none;font-weight:600}
.btn,.btn-primary{background:var(--accent);border:1px solid #9a2323;color:#fff;transition:background .2s ease,border-color .2s ease,color .2s ease}
.btn:hover,.btn-primary:hover{background:#f9f9f9;border-color:#8b1e1e;color:var(--accent)}

/* Footer */
footer{border-top:1px solid var(--border);margin-top:2.5rem;background:#0f0f13}

@media(min-width:760px){}
.links a{color:#eaeaea;text-decoration:underline}
.copyright{color:#a3a3a3;font-size:.85rem;text-align:right}

/* Focus styles */
a:focus,button:focus{outline:2px solid var(--accent);outline-offset:2px}

/* v0.3a — Welcome + Upcoming events side-by-side (Safari-friendly) */
#welcome .welcome-grid{
  display:grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  gap:1.25rem;
  align-items:start;
}

@media (max-width: 900px){
  #welcome .welcome-grid{ grid-template-columns: 1fr; }
}

.events-panel{
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  background: rgba(255,255,255,0.02);
}

.events-panel h3{
  margin:0 0 .75rem 0;
  font-size:1.05rem;
}

.events-list{
  list-style:none;
  padding:0;
  margin:0;
}

.events-list .event-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin:.55rem 0;
  gap:.75rem; /* safe enough; fallback still ok */
  min-width:0;
}

.events-list .event-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width: 520px){
  .events-list .event-item{ display:block; }
  .events-list .event-title{ white-space:normal; }
  .events-list .event-date{ display:block; margin-top:.15rem; }
}

.events-list .event-date{
  white-space:nowrap;
  color: var(--muted);
  font-size: .95em;
}

.events-footer{
  margin-top: .9rem;
}

.btn-small{
  padding:.55rem .85rem;
  border-radius:12px;
  width:100%;
  justify-content:center;
}

/* v0.3c footer layout: copyright under title, social links right */
.foot{
  display:flex;
  align-items:flex-start;
  gap:1.5rem;
  padding:1.5rem 0;
  color:#fff;
}

.foot .links{
  margin-left:auto;
}

.foot .links ul{
  display:flex !important;
  gap:0.75rem !important;
  align-items:center;
}

.copyright-inline{
  margin-top:0.5rem;
  font-size:0.95rem;
  opacity:0.9;
}

/* Stack footer nicely on small screens */
@media (max-width: 720px){
  .foot{
    flex-direction:column;
  }
  .foot .links{
    margin-left:0;
  }
}

/* v0.3d – Footer social links aligned right (Safari-safe) */
.foot{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem; /* ok in modern Safari; if needed we can remove */
}

.footer-left{ min-width:0; }

.footer-social{
  margin-left:auto;
  text-align:right;
}

.footer-social ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:0.75rem;
  justify-content:flex-end;
}

.footer-social li{ margin:0; }

/* v0.3e – Footer social links stacked, white & underlined */
.footer-social ul{
  flex-direction:column;
  align-items:flex-end;
  gap:0.25rem;
}

.footer-social a{
  color:#ffffff;
  text-decoration:underline;
}

.footer-social a:hover{
  opacity:0.85;
}

/* v0.3f – Footer social links flush-left within right column */
.footer-social{
  text-align:left;
}

.footer-social ul{
  align-items:flex-start;
}

/* v0.3k – Footer bowtie (no layout change) */
.footer-bowtie{
  float:left;          /* keeps existing stacked text layout intact */
  height:2.6em;        /* approx height of two lines */
  width:auto;
  margin-right:0.75rem;
  margin-top:0.05rem;
}