/* ═══════════════════════════════════════════════════════
   Lakeside Community Center — Site Stylesheet
   INTENTIONAL ACCESSIBILITY ISSUES ARE MARKED WITH:
   "INTENTIONAL A11Y ISSUE" comments
   ═══════════════════════════════════════════════════════ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* INTENTIONAL A11Y ISSUE (WCAG 2.4.7, 1.4.11):
   Removes the focus outline on ALL focusable elements globally.
   No alternative focus style is provided anywhere in this stylesheet.
   This makes it impossible for keyboard users to see which element is focused. */
*:focus {
  outline: none !important;
}

html { scroll-behavior: smooth; }

/* INTENTIONAL A11Y ISSUE (WCAG 1.4.3):
   Body text color is #9e9e9e on a #f7f6f4 background.
   Contrast ratio ≈ 2.6:1 — clearly fails the 4.5:1 minimum for normal text.
   This low-contrast combination is applied globally and affects all body copy. */
body {
  font-family: 'Segoe UI', Georgia, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  background-color: #f7f6f4;
  color: #9e9e9e;           /* ← INTENTIONAL FAIL: ~2.6:1 contrast ratio */
}

img { max-width: 100%; display: block; }
a { color: #3a7d5b; text-decoration: underline; }
a:hover { color: #2a5d3f; }
ul, ol { padding-left: 1.25rem; }

/* ── Layout ── */
.page-content { min-height: 60vh; }
.section { padding: 3rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.section.bg-light { max-width: 100%; background: #eeecea; padding: 3rem 1.5rem; }
.section.bg-light > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.section.bg-light h2 { max-width: 1200px; }
.two-col { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; }
.col-text { flex: 1; min-width: 280px; }
.col-img { flex: 1; min-width: 280px; }
.col-img img { border-radius: 6px; width: 100%; }

/* ── Header ── */
.site-header {
  background: #2c5f46;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.header-logo a {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  display: block;
}
.header-logo .tagline { font-size: 0.75rem; color: #b5d4c4; }
.main-nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.main-nav .nav-link {
  color: #d4ece0;
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
}
.main-nav .nav-link:hover { background: rgba(255,255,255,0.12); color: #fff; }
.main-nav .nav-link.active { background: rgba(255,255,255,0.18); color: #fff; font-weight: 600; }

/* ── Footer ── */
.site-footer { background: #1e3d2c; color: #b5d4c4; font-size: 0.88rem; margin-top: 0; }
.footer-inner {
  display: flex;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
  flex-wrap: wrap;
}
.footer-col { flex: 1; min-width: 180px; }
.footer-col strong { display: block; color: #fff; margin-bottom: 0.6rem; font-size: 0.95rem; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 0.3rem; }
.footer-col ul li a { color: #b5d4c4; text-decoration: none; }
.footer-col ul li a:hover { color: #fff; }
.footer-col p { margin-bottom: 0.3rem; }
/* INTENTIONAL A11Y ISSUE (WCAG 1.1.1, 4.1.2):
   Social link icons have no accessible name — no aria-label, no sr-only text, no title.
   The only content inside the <a> is the SVG icon. */
.footer-social { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.social-link { color: #b5d4c4; line-height: 1; }
.social-link:hover { color: #fff; }
.footer-bottom { text-align: center; padding: 1rem 1.5rem; border-top: 1px solid #2c5f46; color: #7ea891; font-size: 0.8rem; }
.footer-bottom a { color: #7ea891; }

/* ── Page Hero ── */
.page-hero { padding: 3rem 1.5rem; text-align: center; color: #fff; }
.bg-green-dark { background: #2c5f46; }
.page-hero h1 { font-size: 2.2rem; margin-bottom: 0.6rem; color: #fff; }
.page-hero p { font-size: 1.1rem; color: #c5e0d0; max-width: 640px; margin: 0 auto; }

/* ── Headings ── (intentionally normal-looking so structural issues aren't visually obvious) */
h1 { font-size: 2rem; color: #2a4a34; margin-bottom: 0.75rem; line-height: 1.25; }
h2 { font-size: 1.6rem; color: #2a4a34; margin-bottom: 1rem; line-height: 1.3; }
h3 { font-size: 1.2rem; color: #2a4a34; margin-bottom: 0.5rem; }
/* INTENTIONAL A11Y ISSUE (WCAG 1.3.1): The About page uses h4 elements where h2 would be correct.
   They are styled identically to h2 so the skipped levels aren't visually apparent. */
h4 { font-size: 1.6rem; color: #2a4a34; margin-bottom: 1rem; line-height: 1.3; }

/* ── Ticker ── */
/* INTENTIONAL A11Y ISSUE (WCAG 2.2.2): Auto-scrolling marquee with no pause mechanism */
.ticker-wrap { background: #2c5f46; color: #fff; overflow: hidden; white-space: nowrap; padding: 0.5rem 0; }
.ticker { display: inline-block; animation: ticker-scroll 45s linear infinite; }
.ticker span { font-size: 0.9rem; padding: 0 1rem; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Hero ── */
.hero { position: relative; overflow: hidden; max-height: 480px; }
.hero-img { width: 100%; height: 480px; object-fit: cover; display: block; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 70%);
  display: flex;
  align-items: center;
}
.hero-text { padding: 2rem 3rem; max-width: 560px; }
.hero-text h1 { color: #fff; font-size: 2.2rem; }
.hero-text p { color: #e0e0e0; font-size: 1.1rem; margin: 0.75rem 0 1.25rem; }

/* ── Buttons ── */
.btn-primary {
  display: inline-block; background: #3a7d5b; color: #fff;
  padding: 0.65rem 1.4rem; border-radius: 4px; text-decoration: none;
  font-weight: 600; font-size: 0.95rem; transition: background 0.15s;
}
.btn-primary:hover { background: #2c5f46; color: #fff; }
.btn-secondary {
  display: inline-block; background: transparent; color: #3a7d5b;
  padding: 0.65rem 1.4rem; border-radius: 4px; text-decoration: none;
  font-weight: 600; border: 2px solid #3a7d5b; font-size: 0.95rem;
  transition: all 0.15s;
}
.btn-secondary:hover { background: #3a7d5b; color: #fff; }
.btn-outline {
  display: inline-block; background: transparent; color: #fff;
  padding: 0.65rem 1.4rem; border-radius: 4px; text-decoration: none;
  font-weight: 600; border: 2px solid rgba(255,255,255,0.6); font-size: 0.95rem;
}
.btn-sm {
  display: inline-block; background: #3a7d5b; color: #fff;
  padding: 0.4rem 1rem; border-radius: 4px; text-decoration: none;
  font-size: 0.85rem; font-weight: 600; margin-top: 0.5rem;
}
.link-arrow { color: #3a7d5b; font-weight: 600; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* ── Carousel ── */
/* INTENTIONAL A11Y ISSUE (WCAG 2.1.1, 2.2.2):
   Carousel advances automatically with no pause control.
   Prev/Next buttons are <div> elements with no role, no tabindex — mouse-only. */
.carousel-section { padding-top: 2rem; }
.carousel { position: relative; overflow: hidden; border-radius: 8px; max-width: 900px; margin: 0 auto; }
.carousel-track { display: flex; transition: transform 0.5s ease; }
.carousel-slide { min-width: 100%; position: relative; }
.carousel-slide img { width: 100%; height: 380px; object-fit: cover; }
.slide-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.55); color: #fff; padding: 0.75rem 1.25rem; font-size: 0.95rem;
}
/* INTENTIONAL: carousel buttons are styled to look interactive but have no keyboard access */
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.5); color: #fff; border: none;
  font-size: 1.5rem; padding: 0.5rem 0.9rem; cursor: pointer;
  border-radius: 4px; user-select: none; z-index: 10;
}
.carousel-prev { left: 0.75rem; }
.carousel-next { right: 0.75rem; }
.carousel-dots { display: flex; justify-content: center; gap: 0.4rem; padding: 0.5rem; background: #eeecea; }
.carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: #bbb; cursor: pointer; }
.carousel-dot.active { background: #3a7d5b; }

/* ── Card Grid ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); overflow: hidden; }
.card img { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: 1.25rem; }
.card-body h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.card-body p { font-size: 0.9rem; margin-bottom: 0.75rem; }

/* ── Event List (home) ── */
.event-list { list-style: none; padding: 0; }
.event-list li { display: flex; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid #ddd; align-items: flex-start; }
.event-date { text-align: center; min-width: 50px; }
.event-date .month { display: block; font-size: 0.75rem; text-transform: uppercase; color: #3a7d5b; font-weight: 700; }
.event-date .day { display: block; font-size: 1.8rem; font-weight: 700; color: #2a4a34; line-height: 1; }
.event-info p { font-size: 0.9rem; margin: 0.3rem 0; }

/* ── Impact Bar ── */
.impact-bar { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1rem; text-align: center; max-width: 100%; background: #2c5f46; }
.bg-green { background: #2c5f46; color: #fff; }
.impact-item { flex: 1; min-width: 160px; padding: 1rem; }
.impact-num { display: block; font-size: 2.2rem; font-weight: 800; color: #fff; }
.impact-label { font-size: 0.9rem; color: #b5d4c4; }

/* ── CTA Block ── */
.cta-block { text-align: center; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }

/* ── About Page ── */
.values-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.value-item { background: #fff; border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 6px rgba(0,0,0,0.07); }
.value-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.value-item strong { display: block; margin-bottom: 0.5rem; color: #2a4a34; }
.value-item p { font-size: 0.9rem; }

/* INTENTIONAL A11Y ISSUE (WCAG 1.3.1): Staff table used for visual layout — no headers, no scope, no caption */
.staff-table { width: 100%; border-collapse: collapse; }
.staff-cell { vertical-align: top; padding: 1.5rem; background: #fff; border: 6px solid #f0efed; width: 33%; }
.staff-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin-bottom: 0.75rem; }
.staff-name { font-size: 1rem; font-weight: 700; margin-bottom: 0.2rem; }
.staff-title { font-size: 0.85rem; color: #5a8a6e; font-weight: 600; margin-bottom: 0.5rem; }
.staff-bio { font-size: 0.88rem; line-height: 1.6; }
.board-list { list-style: none; padding: 0; }
.board-list li { padding: 0.5rem 0; border-bottom: 1px solid #e0e0e0; }

/* ── Programs Page ── */
.programs-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; padding-bottom: 0;
}
.programs-intro { flex: 1; }

/* INTENTIONAL A11Y ISSUE (WCAG 2.1.1, 4.1.2):
   Custom dropdown opens only on CSS :hover — no keyboard support, no click toggle,
   no ARIA role, no aria-expanded, no accessible name. */
.custom-select-wrap { position: relative; display: inline-block; }
.custom-select-trigger {
  background: #2c5f46; color: #fff; padding: 0.6rem 1.2rem; border-radius: 4px;
  cursor: pointer; font-size: 0.9rem; user-select: none; white-space: nowrap;
}
.custom-select-options {
  display: none; position: absolute; right: 0; top: 100%;
  background: #fff; border: 1px solid #ddd; border-radius: 4px;
  min-width: 200px; z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
/* Opens only on :hover — completely inaccessible to keyboard users */
.custom-select-wrap:hover .custom-select-options { display: block; }
.custom-option { padding: 0.6rem 1rem; cursor: pointer; font-size: 0.9rem; color: #333; }
.custom-option:hover, .custom-option.active-option { background: #eaf4ee; }

.programs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1rem; }

/* INTENTIONAL A11Y ISSUE (WCAG 2.1.1, 4.1.2):
   Program cards are <div> elements with onclick — look interactive but aren't keyboard reachable.
   cursor: pointer to visually suggest they're clickable. */
.program-card {
  background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.program-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.program-card-img { position: relative; overflow: hidden; }
.program-card-img img { width: 100%; height: 200px; object-fit: cover; }
.program-card-body { padding: 1.25rem; }
.program-card-body h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.program-card-body p { font-size: 0.9rem; margin-bottom: 0.75rem; }
.program-cta { font-size: 0.9rem; color: #3a7d5b; font-weight: 600; }

.program-badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  padding: 0.2rem 0.6rem; border-radius: 3px; margin-bottom: 0.6rem; letter-spacing: 0.04em;
}
.youth-badge { background: #e3f2fd; color: #1565c0; }
.adult-badge { background: #f3e5f5; color: #6a1b9a; }
.senior-badge { background: #fff8e1; color: #e65100; }
.fitness-badge { background: #e8f5e9; color: #2e7d32; }
.family-badge { background: #fce4ec; color: #ad1457; }
.arts-badge { background: #fff3e0; color: #bf360c; }

/* INTENTIONAL A11Y ISSUE (WCAG 2.1.1, 1.3.1):
   Tooltip appears only on parent :hover, disappears immediately if user tries to move toward it.
   The icon itself has no tabindex, no accessible name, no role.
   Tooltip is never reachable via keyboard. */
.tooltip-wrap { position: absolute; top: 0.6rem; right: 0.6rem; }
.tooltip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; background: rgba(0,0,0,0.55); color: #fff;
  border-radius: 50%; font-size: 0.8rem; cursor: default;
  opacity: 0; transition: opacity 0.15s;
}
/* Tooltip only visible on parent card hover */
.program-card:hover .tooltip-icon { opacity: 1; }
.tooltip-box {
  display: none; position: absolute; right: 0; top: 28px;
  background: rgba(0,0,0,0.82); color: #fff; font-size: 0.8rem;
  padding: 0.5rem 0.75rem; border-radius: 4px; white-space: nowrap;
  z-index: 20; pointer-events: none;
  max-width: 220px; white-space: normal;
}
/* Tooltip disappears immediately when user moves toward it (pointer-events: none + only .program-card:hover) */
.program-card:hover .tooltip-box { display: block; }
.program-card:hover .tooltip-wrap:hover .tooltip-box { display: none; }

/* ── Events Page ── */
.countdown-bar {
  background: #3a7d5b; color: #fff; text-align: center;
  padding: 1.25rem; display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap;
}
.countdown-label { font-size: 1rem; font-weight: 600; }
.countdown-display { display: flex; align-items: center; gap: 0.5rem; }
.countdown-unit { text-align: center; }
.countdown-unit span { font-size: 2rem; font-weight: 800; display: block; min-width: 2.5rem; }
.countdown-unit small { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
.countdown-sep { font-size: 2rem; font-weight: 800; margin-bottom: 0.75rem; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 2rem; margin-top: 1.5rem; }
.video-block { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.video-block h3 { padding: 1rem 1.25rem 0.5rem; font-size: 1.05rem; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-desc { padding: 0.75rem 1.25rem 1.25rem; font-size: 0.9rem; }

.events-list { display: flex; flex-direction: column; gap: 0; }
.event-item { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid #ddd; align-items: flex-start; }
.event-item.highlight-event { background: #f0f8f4; margin: 0 -1.5rem; padding: 1.5rem; border-radius: 6px; }
.event-item-date { text-align: center; min-width: 55px; padding-top: 0.15rem; }
.ei-month { display: block; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; color: #3a7d5b; letter-spacing: 0.08em; }
.ei-day { display: block; font-size: 2.2rem; font-weight: 800; color: #2a4a34; line-height: 1; }
.event-item-body h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.event-meta { font-size: 0.83rem; font-weight: 600; color: #5a8a6e; margin-bottom: 0.5rem; }
.event-item-body p { font-size: 0.92rem; }
.table-wrap { overflow-x: auto; }
.recurring-table { width: 100%; border-collapse: collapse; min-width: 500px; }
.recurring-table th { background: #2c5f46; color: #fff; padding: 0.6rem 1rem; text-align: left; font-size: 0.88rem; }
.recurring-table td { padding: 0.6rem 1rem; border-bottom: 1px solid #ddd; font-size: 0.88rem; }
.recurring-table tr:nth-child(even) { background: #f4f3f0; }

/* ── Resources Page ── */
.resource-list { display: flex; flex-direction: column; gap: 0; margin-top: 1rem; }
.resource-item { display: flex; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid #ddd; align-items: flex-start; }
.resource-icon { font-size: 2rem; min-width: 2.5rem; }
.resource-info strong { display: block; color: #2a4a34; font-size: 1rem; margin-bottom: 0.3rem; }
.resource-info p { font-size: 0.9rem; margin-bottom: 0.5rem; }
.resource-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.resource-category { background: #fff; border-radius: 6px; padding: 1.25rem; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.resource-category h3 { font-size: 0.95rem; color: #3a7d5b; margin-bottom: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.resource-category ul { list-style: none; padding: 0; }
.resource-category li { margin-bottom: 0.4rem; font-size: 0.88rem; }
.resource-category a { color: #3a7d5b; text-decoration: none; }
.resource-category a:hover { text-decoration: underline; }
.faq-list { display: flex; flex-direction: column; gap: 0; margin-top: 1rem; }
.faq-item { padding: 1.25rem 0; border-bottom: 1px solid #ddd; }
.faq-item h3 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.faq-item p { font-size: 0.9rem; }

/* ── Contact Page ── */
.contact-section { padding-top: 2.5rem; }
.contact-grid { display: flex; gap: 3rem; flex-wrap: wrap; align-items: flex-start; max-width: 1200px; margin: 0 auto; }
.contact-form-col { flex: 1.5; min-width: 300px; }
.contact-info-col { flex: 1; min-width: 260px; }
.contact-detail { margin-bottom: 1.5rem; }
.contact-detail strong { display: block; color: #2a4a34; margin-bottom: 0.3rem; }
.contact-detail p { font-size: 0.92rem; margin-bottom: 0.2rem; }
.map-placeholder img { width: 100%; border-radius: 6px; }
.success-msg { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; padding: 1rem; border-radius: 6px; margin-bottom: 1.5rem; }

/* INTENTIONAL A11Y ISSUE (WCAG 1.3.1, 4.1.2):
   Form inputs have no associated <label> elements.
   Required fields marked only by "*" in placeholder text.
   No autocomplete attributes. */
.form-group { margin-bottom: 1.1rem; }
.form-input {
  display: block; width: 100%;
  border: 1.5px solid #d0cec9; border-radius: 5px;
  padding: 0.65rem 0.9rem; font-size: 0.95rem;
  color: #333; background: #fff; font-family: inherit;
  transition: border-color 0.15s;
}
.form-input:hover { border-color: #a0a0a0; }
/* INTENTIONAL: No :focus visible style here either — combined with global outline:none this means zero focus indication */
.form-textarea { resize: vertical; }
/* INTENTIONAL A11Y ISSUE (WCAG 3.3.1): Validation error style is only a border-color change.
   No error text, no aria-describedby pointing to an error message. */
.form-input.field-error { border-color: #e53935 !important; }

/* INTENTIONAL: Radio group with no fieldset/legend */
.radio-group-raw { margin-bottom: 1.1rem; }
.radio-group-label { font-size: 0.92rem; margin-bottom: 0.5rem; }
.radio-option { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.radio-option label { font-size: 0.92rem; }

/* INTENTIONAL A11Y ISSUE (WCAG 1.1.1): CAPTCHA image has no alt text */
.captcha-group { background: #f4f3f0; padding: 1rem; border-radius: 6px; border: 1px solid #ddd; }
.captcha-img { margin: 0.6rem 0; border: 1px solid #ccc; border-radius: 4px; }
.captcha-input { max-width: 200px; margin-top: 0.5rem; }

/* INTENTIONAL A11Y ISSUE (WCAG 4.1.2):
   Submit "button" is a styled <div> with onclick — not a <button> element.
   Cannot be activated by keyboard Enter/Space. Not announced as a button by AT. */
.submit-div {
  display: inline-block; background: #2c5f46; color: #fff;
  padding: 0.75rem 2rem; border-radius: 5px; font-size: 1rem;
  font-weight: 600; cursor: pointer; margin-top: 0.5rem;
  transition: background 0.15s;
}
.submit-div:hover { background: #1e3d2c; }