/* ===========================================================
   Cambridge Croquet Club — site styles
   =========================================================== */

:root {
  /* Navy sampled directly from the club's own branding (the heading colour
     used on the current site, and the dark tones in the club logo), paired
     with the logo's own crest green as a fresh, contemporary accent — so
     nothing here clashes with the existing badge/letterhead. */
  --color-bg: #f6f8fa;
  --color-surface: #ffffff;
  --color-primary: #0a4a6e;
  --color-primary-dark: #073349;
  --color-primary-light: #e8eef2;
  --color-accent: #17a568;
  --color-accent-dark: #0f7a4d;
  --color-text: #1c2b33;
  --color-text-muted: #5c6e78;
  --color-border: #dfe6ea;
  --shadow-sm: 0 1px 3px rgba(15, 30, 40, 0.07);
  --shadow-md: 0 10px 26px rgba(15, 30, 40, 0.12);
  --radius: 10px;
  --max-width: 1120px;
  --font-heading: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

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

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

h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-accent-dark); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

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

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

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

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-primary-dark);
}

.brand img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1.2rem;
  color: var(--color-primary-dark);
  cursor: pointer;
}

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

.main-nav a {
  color: var(--color-text);
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-accent);
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-block; }
  .main-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--color-border);
    margin-top: 12px;
  }
  .main-nav a {
    display: block;
    padding: 12px 4px;
    border-bottom: 1px solid var(--color-border);
  }
  .site-header .container { flex-wrap: wrap; }
}

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

.hero {
  padding: 56px 0 64px;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero.hero--compact .container {
  grid-template-columns: 1fr;
  text-align: center;
  padding-bottom: 8px;
}

.hero-eyebrow {
  display: inline-block;
  color: var(--color-accent-dark);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 12px;
}

.hero-lede {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 46ch;
}

.hero-image img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-image { order: -1; }
  .hero-image img { aspect-ratio: 16 / 10; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }

.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.btn-outline:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* ---------- Sections / cards ---------- */

section { padding: 56px 0; }
section.alt { background: var(--color-primary-light); }

.section-head {
  max-width: 62ch;
  margin: 0 auto 36px;
  text-align: center;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
}

.card img {
  border-radius: calc(var(--radius) - 4px);
  margin-bottom: 14px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Plain images dropped straight into a card-grid (e.g. the Venue Hire
   gallery) get the same treatment so mixed source photos line up neatly. */
.card-grid > img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- Schedule table ---------- */

.schedule {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.schedule th, .schedule td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.schedule th {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-weight: 600;
}

.schedule tr:last-child td { border-bottom: none; }

.schedule-note {
  margin-top: 14px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---------- Contact ---------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.contact-details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
}

.contact-details dt {
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-top: 16px;
}
.contact-details dt:first-child { margin-top: 0; }
.contact-details dd { margin: 2px 0 0; color: var(--color-text-muted); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid .full { grid-column: 1 / -1; }

@media (max-width: 520px) {
  .form-grid { grid-template-columns: 1fr; }
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--color-primary-dark);
}

input, select, textarea {
  width: 100%;
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

textarea { resize: vertical; min-height: 130px; }

/* honeypot field — hidden from real visitors, visible to bots */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  font-weight: 500;
}
.form-status.success { background: #e3f6ec; color: #0f5132; }
.form-status.error { background: #fbe9e7; color: #8a3b2c; }

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

.site-footer {
  background: var(--color-primary-dark);
  color: #e9f1f4;
  padding: 40px 0 28px;
  margin-top: 40px;
}

.site-footer .container {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
}

.site-footer h3 { color: #fff; font-size: 1rem; }

.site-footer a { color: #a9c7d6; }
.site-footer a:hover { color: #fff; }

.site-footer .footer-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 16px;
  padding-top: 16px;
  font-size: 0.85rem;
  color: #8ba8b7;
}

@media (max-width: 720px) {
  .site-footer .container { grid-template-columns: 1fr; }
}