/* ==========================================
   1. GLOBAL DESIGN SETTINGS
   Colors, fonts, and general sizing.
   Change the values below to restyle the whole page.
========================================== */
:root {
  --color-background: #f4efe6;   /* page background (warm beige) */
  --color-card: #fbf8f2;         /* background of each proposal row */
  --color-primary: #07382b;      /* dark green from the logo */
  --color-primary-hover: #1d5a47;
  --color-text: #1c2a25;
  --color-muted: #5b6860;
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --content-width: 960px;        /* maximum width of the content */
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-background);
}

img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }


/* ==========================================
   2. PAGE HEADER
   Logo, title and short introduction.
========================================== */
.intro {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 3rem 1.25rem 2rem;
}

.intro-logo {
  height: 64px;
  width: auto;
  margin-bottom: 2.5rem;
}

.intro h1 {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 7vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.intro p {
  max-width: 52ch;
  font-size: 1.1rem;
  color: var(--color-muted);
}


/* ==========================================
   3. PROPOSAL LIST
   One large clickable row per proposal.
========================================== */
.proposals {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 1.25rem;
}

.proposal-link {
  display: grid;                 /* mobile: image on top, text below */
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-card);
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(7, 56, 43, 0.12);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.proposal-link:hover,
.proposal-link:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 10px 30px rgba(7, 56, 43, 0.12);
}

.proposal-link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.proposal-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s;
}

.proposal-link:hover .proposal-image { transform: scale(1.04); }

/* The wrapper keeps the zoomed image inside the rounded corners */
.proposal-link { isolation: isolate; }

.proposal-text { padding: 1.4rem 1.4rem 1.6rem; }

.proposal-text h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--color-primary);
}

.proposal-text p { color: var(--color-muted); }

.proposal-open {
  display: inline-block;
  padding-bottom: 2px;
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}


/* ==========================================
   4. FOOTER
========================================== */
.page-footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}


/* ==========================================
   5. ANIMATIONS
   One gentle fade-in when the page opens.
   Switched off for visitors who prefer less motion.
========================================== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.intro,
.proposal {
  animation: fade-up 0.7s ease-out both;
}

/* Each row starts a little later than the one before */
.proposal:nth-child(1) { animation-delay: 0.15s; }
.proposal:nth-child(2) { animation-delay: 0.25s; }
.proposal:nth-child(3) { animation-delay: 0.35s; }
.proposal:nth-child(4) { animation-delay: 0.45s; }
.proposal:nth-child(5) { animation-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  .intro, .proposal { animation: none; }
  .proposal-image, .proposal-link { transition: none; }
  .proposal-link:hover .proposal-image { transform: none; }
}

/* ==========================================
   5b. ALTERNATIVES
   Buttons under a proposal. New buttons wrap
   onto a new row automatically.
========================================== */
.proposal-alts {
  /* Change these three to match your site */
  --alt-bg: #07382b;
  --alt-fg: #f4efe6;
  --alt-accent: #f7de9f;
  padding: 1rem 1.25rem 1.25rem;
}
.proposal-alts-title {
  margin: 0 0 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.proposal-alts-row {
  display: grid;
  /* As many buttons per row as fit (at least 5.5rem each); extra buttons wrap to a new row */
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.7rem;
}
.proposal-alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 0.5rem;
  background: var(--alt-bg);
  color: var(--alt-fg);
  border-radius: 16px;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s, box-shadow 0.2s;
}
.alt-num {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--alt-accent);
  color: #1c1c1c;
  font-weight: 700;
}
.alt-label { font-size: 0.85rem; font-weight: 600; }
.proposal-alt:hover,
.proposal-alt:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .proposal-alt { transition: none; }
  .proposal-alt:hover, .proposal-alt:focus-visible { transform: none; }
}

/* ==========================================
   6. RESPONSIVE DESIGN
   Tablet and desktop: image on the left, text on the right.
========================================== */
@media (min-width: 760px) {
  .intro { padding-top: 4.5rem; padding-bottom: 3rem; }

  .proposal-link {
    grid-template-columns: 320px 1fr;
    align-items: stretch;
  }

  .proposal-image { height: 100%; min-height: 200px; }

  .proposal-text {
    padding: 2rem 2.25rem;
    align-self: center;
  }

  .proposal-text h2 { font-size: 1.7rem; }
}