/*
 * LSA — Louisville Sustainability Alliance
 * Loaded last (replaces Quark 2's empty custom.css). Calm greens + warm neutrals.
 * Contrast notes: body text #2b2a25 on #faf7f0 ≈ 13:1; green #2f6b3f on cream ≈ 5.7:1;
 * white on button green #2b5d3a ≈ 7.6:1; muted text #5a574c on cream ≈ 6:1.
 */
:root,
:root[data-theme='dark'],
:root[data-theme='light'] {
  --q2-bg: #faf7f0;
  --q2-bg-elev: #fffdf8;
  --q2-bg-muted: #efe9da;
  --q2-bg-inverse: #2b5d3a;
  --q2-text: #2b2a25;
  --q2-text-strong: #1b2a1f;
  --q2-text-muted: #5a574c;
  --q2-text-inverse: #ffffff;
  --q2-border-ring: rgba(70, 60, 30, 0.14);
  --q2-border-strong: rgba(70, 60, 30, 0.26);
  --q2-divider: rgba(70, 60, 30, 0.14);
  --q2-nav-bg: rgba(250, 247, 240, 0.92);
  --q2-nav-border: rgba(70, 60, 30, 0.14);
  --q2-accent: #2f6b3f;
  --q2-accent-contrast: #ffffff;
  --q2-link: #2a6238;
  --q2-focus-ring: rgba(47, 107, 63, 0.55);
  color-scheme: light;
}

body { line-height: 1.65; font-size: 1.05rem; }
h1, h2, h3, h4 { color: var(--q2-text-strong); line-height: 1.2; }
a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid #1d5a8a; outline-offset: 2px; }

/* Skip-friendly, keyboard-visible nav */
.navigation a:focus-visible, .navbar-brand:focus-visible { outline: 3px solid #1d5a8a; outline-offset: 2px; border-radius: 4px; }
.navigation a.active { color: var(--q2-accent); font-weight: 600; }

/* Brand */
.lsa-brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--q2-text-strong); text-decoration: none; }
.lsa-leaf { color: #2f6b3f; flex: none; }
.lsa-brand-text { font-family: 'Cal Sans', 'Inter', system-ui, sans-serif; font-size: 1.05rem; line-height: 1.15; max-width: 12rem; }
@media (min-width: 640px) { .lsa-brand-text { max-width: none; font-size: 1.2rem; } }

/* Buttons */
.button, button, input[type='submit'], [role='button'] { background: #2b5d3a; border-color: #2b5d3a; color: #fff; }
.button:hover, button:hover, input[type='submit']:hover { background: #21492d; border-color: #21492d; color: #fff; }

/* Hero */
.lsa-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 26rem; color: #fff; }
.lsa-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.lsa-hero .image-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 40, 24, 0.86) 0%, rgba(16, 40, 24, 0.62) 55%, rgba(16, 40, 24, 0.3) 100%); }
.lsa-hero .container { position: relative; z-index: 1; max-width: 46rem; margin-left: 0; padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 1100px) { .lsa-hero .container { margin-left: max(2rem, calc((100vw - 68rem) / 2)); } }
.lsa-hero h1, .lsa-hero h2, .lsa-hero p { color: #fff; }
.lsa-hero h1 { font-size: clamp(2rem, 6vw, 3.25rem); margin-bottom: 0.5rem; }
.lsa-hero .button { background: #fffdf8; color: #1b3a25; border-color: #fffdf8; font-weight: 600; }
.lsa-hero .button:hover { background: #e7f0e4; color: #1b3a25; }
.lsa-hero .button + .button { background: transparent; color: #fff; border-color: #fff; }

/* Sections */
.modular-text { padding-top: 3rem; padding-bottom: 1rem; }
.modular-text .container { max-width: 46rem; }
.lsa-cards { padding-top: 2rem; padding-bottom: 3.5rem; }
.lsa-card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 700px) { .lsa-card-grid { grid-template-columns: 1fr 1fr; } }
.lsa-card { background: var(--q2-bg-elev); border: 1px solid var(--q2-border-strong); border-radius: 12px; padding: 1.5rem; border-top: 5px solid #2f6b3f; }
.lsa-card h3 { margin-top: 0; }

/* Content pages */
.content-item { max-width: 52rem; }
#body-wrapper { padding-top: 2.5rem; padding-bottom: 3rem; }
.lsa-wide { max-width: none; }

/* Forms */
.form-honeybear { position: absolute !important; left: -9999px; height: 1px; width: 1px; overflow: hidden; }
.form-group { margin-bottom: 1.1rem; }
label, .form-label { font-weight: 600; }
input, textarea, select { font-size: 1rem; }
.form-input:focus, input:focus, textarea:focus { border-color: #2f6b3f; }
.notices, .form-messages, .alert { border-radius: 8px; }

/* Calendar */
.opencalendar { max-width: 100%; }
.lsa-events-heading { margin-top: 2.5rem; }

/* Hero: neutralise Quark's centred block margins so text lines up left */
.lsa-hero .container > * { margin-left: 0; margin-right: 0; max-width: none; }
.lsa-hero .container p:last-child { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.button, a.button { display: inline-block; padding: 0.6rem 1.2rem; border-radius: 8px; text-decoration: none; line-height: 1.3; }

/* Calendar widget on narrow screens */
.ec-toolbar { flex-wrap: wrap; gap: 0.5rem; }
.ec-toolbar .ec-title { font-size: 1.15rem; flex-basis: 100%; order: -1; }
.opencalendar .ec-day-head { font-size: 0.75rem; }
.lsa-hero .container p:last-child a.button + a.button, .lsa-hero a.button:nth-of-type(2) { background: transparent; border: 2px solid #fff; color: #fff; }

/* ---- Home page (rebuilt from the old Squarespace site) ---- */
.button-join, a.button-join { background: #f08a3c; border-color: #f08a3c; color: #1b1b1b; font-weight: 600; }
.button-join:hover, a.button-join:hover { background: #e07a2c; border-color: #e07a2c; color: #1b1b1b; }
.lsa-hero.lsa-hero-light { min-height: clamp(13rem, 34vw, 26rem); align-items: flex-start; }
.lsa-hero-light .lsa-hero-img { object-position: center bottom; }
.lsa-hero-light .image-overlay { display: none; }
.lsa-hero-light .container { max-width: none; margin: 0; width: 100%; padding: 1.75rem clamp(1rem, 4vw, 3rem); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.lsa-hero-light h1, .lsa-hero-light p { color: #111; }
.lsa-hero-light h1 { margin: 0; font-size: clamp(1.6rem, 4.5vw, 3rem); }
.lsa-hero-light .container p:last-child { display: block; margin: 0; }
.lsa-hero-light .container a.button { background: #f08a3c; border: 2px solid #f08a3c; color: #1b1b1b; padding: 0.9rem 1.8rem; }

.lsa-tagline { padding: 4rem 0 2rem; }
.lsa-tagline .container { max-width: 56rem; }
.lsa-tagline p { font-family: 'Cal Sans', 'Inter', system-ui, sans-serif; font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.3; text-align: center; color: var(--q2-text-strong); margin: 0; }

.lsa-split { padding: 2.5rem 0; }
.lsa-split .container { max-width: 70rem; }
.lsa-split-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
.lsa-split-media img { display: block; width: 100%; height: auto; border-radius: 4px; }
.lsa-split-text h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-top: 0; }
.lsa-split-text p { max-width: 38rem; }
@media (min-width: 800px) {
  .lsa-split-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .lsa-split-left .lsa-split-media { order: -1; }
}
@media (max-width: 799px) { .lsa-split-media { order: -1; } }

/* Footer: sunset photo with the address line (theme/images/footer.jpg) */
#footer.lsa-footer { background-color: #e9a56a; background-image: url('../images/footer.jpg'); background-size: cover; background-position: center bottom; border-top: 0; color: #111; margin-top: 3rem; padding: 2rem 0 0; min-height: clamp(10rem, 20vw, 16rem); text-align: center; }
#footer.lsa-footer a { color: #111; }
#footer.lsa-footer .lsa-footer-line { margin: 0; font-size: 1.05rem; color: #111; }
.lsa-credits { margin: 1rem auto 0; max-width: 46rem; padding: 0.5rem 0.75rem; background: rgba(255, 253, 248, 0.85); border-radius: 6px; font-size: 0.85rem; color: #2b2a25; }
.lsa-credits p { margin: 0; }

/* No accent bar above headings (Quark 2 adds one via h2::before) */
h2::before { content: none; display: none; }

/* Home hero is a photo banner: the nav bar already carries the site name, so the h1 is kept for
   screen readers/SEO but hidden visually (avoids repeating the name twice). */
.lsa-hero-light h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Form alerts: Quark's .toast is a flex row, which puts "Validation failed:" and the message side by
   side (and ignores the <br>). Plain block layout: heading line, then the message under it. */
.toast { display: block; line-height: 1.5; }
.toast b, .toast strong { display: inline-block; margin-bottom: 0.15rem; }