/* ==========================================================================
   VI Caribbean Cultural Center — Landing Page Styles
   Design system: "Antilles Scholarly Heritage" (see project DESIGN.md)
   Primary Plum #692364 · Golden Sun secondary · Caribbean Teal tertiary
   Headings: Literata · Body: Source Serif 4 · UI/labels: Hanken Grotesk
   NOTE: Per project rule, the Madras plaid/tartan pattern is NOT used
   anywhere on this site (backgrounds, dividers, or buttons).
   ========================================================================== */

:root {
  /* Colors — copied from DESIGN.md tokens, do not invent new values */
  --color-surface: #fbf9f8;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f3f3;
  --color-surface-container: #efeded;
  --color-surface-container-high: #eae8e7;
  --color-on-surface: #1b1c1c;
  --color-on-surface-variant: #50434c;
  --color-outline: #82737d;
  --color-outline-variant: #d4c1cd;

  --color-primary: #692364;
  --color-primary-hover: #4f074c;
  --color-on-primary: #ffffff;

  --color-secondary-container: #feb71a;
  --color-on-secondary-container: #6b4b00;

  --color-tertiary-container: #00484d;
  --color-on-tertiary-container: #ffffff;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Type */
  --font-display: 'Literata', Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-label: 'Hanken Grotesk', system-ui, sans-serif;

  /* Radii — 4px standard, 12px large containers (per DESIGN.md) */
  --radius-sm: 0.25rem;
  --radius-lg: 0.75rem;
  --radius-pill: 9999px;

  /* Spacing */
  --space-unit: 8px;
  --gutter: 24px;
  --margin-mobile: 16px;
  --margin-desktop: 64px;
  --container-max: 1200px;

  --focus-ring: 0 0 0 3px rgba(105, 35, 100, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-primary);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--color-primary); }

img { max-width: 100%; display: block; }

/* ---------- Accessibility helpers ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -50px;
  left: 8px;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  font-family: var(--font-label);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 8px;
}

/* Visible, high-contrast focus state on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.modal-close:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Layout helpers ---------- */

.section { padding: 80px var(--margin-desktop); }
.section-inner { max-width: var(--container-max); margin: 0 auto; }
.section-lede { max-width: 640px; color: var(--color-on-surface-variant); font-size: 1.125rem; }

.eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: 1em;
}

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  min-height: 48px; /* WCAG target-size guidance */
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-lg { padding: 14px 34px; font-size: 1.05rem; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-secondary {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}
.btn-secondary:hover { filter: brightness(0.95); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover { background: rgba(105, 35, 100, 0.08); }

.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface-container-lowest);
  border-bottom: 1px solid var(--color-outline-variant);
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px var(--margin-desktop);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}

.brand-logo { width: 44px; height: auto; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.95rem;
  line-height: 1.15;
}

.main-nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-on-surface-variant);
  text-decoration: none;
}

.main-nav a:hover { color: var(--color-primary); }

.btn-nav-donate { padding: 10px 24px; }

/* ---------- Hero ---------- */

.hero { padding: 64px var(--margin-desktop) 96px; }

.hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.hero-lede {
  font-size: 1.15rem;
  color: var(--color-on-surface-variant);
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.hero-media img {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- About ---------- */

.about { background: var(--color-surface-container-low); }

/* Copy first (wide), then the "Our Current Work" card (narrow). The column
   widths were swapped when the card replaced the sculpture photo so that
   source order could match visual order — see the note in index.html. */
.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}

.about-media img {
  width: 100%;
  height: auto;
}

/* ---------- "Our Current Work" card (About column) ----------
   Sits where the Freedom sculpture photo used to. The sculpture still
   appears further down the page in the Broken Chains section, so the
   artwork and its credit are not lost.
   Colours are all existing DESIGN.md tokens, so contrast is inherited
   rather than invented: plum #692364 on white is 9.4:1, and the body
   copy at #50434c is 8.3:1 — both clear of the 4.5:1 AA requirement. */

.current-work {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 28px 26px 30px;
  box-shadow: 0 6px 24px rgba(27, 28, 28, 0.07);
}

.current-work-eyebrow {
  color: var(--color-on-secondary-container);
  margin-bottom: 0.75em;
}

.current-work-title {
  font-size: 1.375rem;
  margin-bottom: 0.5em;
}

.current-work-copy {
  color: var(--color-on-surface-variant);
  font-size: 1rem;
  margin-bottom: 1.5em;
}

.current-work-cta {
  width: 100%;
  text-align: center;
}

.about-media-caption {
  margin-top: 8px;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-on-surface-variant);
  text-align: center;
}

.about-list {
  padding-left: 1.25em;
  color: var(--color-on-surface-variant);
}
.about-list li { margin-bottom: 0.6em; }

.pull-quote {
  margin: 28px 0 0;
  padding: 24px 28px;
  background: var(--color-surface-container-lowest);
  border-left: 4px solid var(--color-secondary-container);
  border-radius: var(--radius-sm);
}
.pull-quote p { font-style: italic; margin-bottom: 0.5em; color: var(--color-on-surface); }
.pull-quote footer { font-family: var(--font-label); font-size: 0.85rem; color: var(--color-on-surface-variant); }

/* ---------- Gallery ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
  margin-top: 40px;
}

.gallery-card {
  margin: 0;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gallery-card img { width: 100%; height: 340px; object-fit: cover; }

.gallery-card figcaption {
  padding: 16px 20px;
  font-family: var(--font-label);
  font-size: 0.9rem;
  color: var(--color-on-surface-variant);
}

.gallery-subheading {
  margin-top: 56px;
  margin-bottom: 0;
  font-size: 1.35rem;
}

/* ---------- Slide gallery (carousel) ---------- */

.slide-gallery {
  margin-top: 24px;
}

.slide-gallery-track-wrap {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
}

.slide-gallery-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
}

.slide-gallery-track::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.slide img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.slide-gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}

.slide-gallery-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-outline);
  background: var(--color-surface-container-lowest);
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.slide-gallery-btn:hover { background: var(--color-surface-container-low); }

.slide-gallery-dots {
  display: flex;
  gap: 8px;
}

.slide-gallery-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--color-outline-variant);
  cursor: pointer;
}

.slide-gallery-dot[aria-selected="true"] {
  background: var(--color-primary);
}

@media (max-width: 900px) {
  .slide img { height: 340px; }
}

/* ---------- Donate band ---------- */

.donate-band { background: var(--color-primary); color: #fff; }
.donate-band h2 { color: #fff; }
.donate-band p { color: rgba(255,255,255,0.85); margin-bottom: 0; }

.donate-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.donate-band-inner > div:first-child { max-width: 640px; }

/* ---------- Newsletter ---------- */

.newsletter-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.newsletter-form { max-width: 460px; }

.form-row { margin-bottom: 20px; }

.form-row label {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--color-on-surface);
}

.form-row .optional { font-weight: 400; color: var(--color-on-surface-variant); }
.form-row .required { color: var(--color-error); }

.form-row input[type="text"],
.form-row input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-sm);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
}

.form-row input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.form-row input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.field-error {
  color: var(--color-on-error-container);
  background: var(--color-error-container);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin: 8px 0 0;
}

.form-status {
  margin: 16px 0 0;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 1.2em;
}
.form-status.success { color: #1e5e2b; }
.form-status.error { color: var(--color-on-error-container); }

.privacy-note {
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
  margin-top: 16px;
}

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(105, 35, 100, 0.35); /* Plum scrim per DESIGN.md overlay spec */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  max-width: 440px;
  width: 100%;
  padding: 40px 32px 32px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.modal h2 { margin-bottom: 0.4em; }

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  border-radius: 50%;
}
.modal-close:hover { background: var(--color-surface-container-low); }

/* ---------- Footer ---------- */

.site-footer { background: var(--color-primary); color: #fff; }

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 64px var(--margin-desktop) 32px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
}

.footer-brand { display: flex; gap: 16px; align-items: flex-start; }
.footer-brand-marks { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer-viccc-logo { width: 140px; height: auto; }
.footer-org { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 4px; }
.footer-sub { color: rgba(255,255,255,0.75); font-size: 0.9rem; margin: 0; }

.footer-contact h3,
.footer-links h3 {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--color-secondary-container);
  margin-bottom: 16px;
}

.footer-contact address { font-style: normal; color: rgba(255,255,255,0.9); line-height: 1.8; }
.footer-contact a, .footer-links a { color: rgba(255,255,255,0.9); text-decoration: none; }
.footer-contact a:hover, .footer-links a:hover { text-decoration: underline; }

.footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 20px var(--margin-desktop);
  text-align: center;
}
.footer-bottom p { margin: 0; color: rgba(255,255,255,0.7); font-size: 0.8rem; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; padding: 12px var(--margin-mobile); }
  .main-nav { order: 3; width: 100%; }
  .main-nav ul { gap: 18px; flex-wrap: wrap; }

  .hero, .section { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }

  .hero-inner, .about-grid, .newsletter-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; }

  .gallery-grid { grid-template-columns: 1fr; }

  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.6rem; }

  .footer-inner { grid-template-columns: 1fr; }
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .skip-link { transition: none; }
}