/*
 * main.css
 * Global styles for Centralia Lodge No. 63.
 * Extend with page-specific overrides in separate files
 * or via {% block extra_css %} in page templates.
 */

/* ── Reset / base ───────────────────────────────────────────────────────────── */

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

:root{
  --cream:#f4efe5;
  --parch:#f8f4ec;
  --warm:#faf7f0;
  --olive:#8a7d5a;
  --olive-l:#a89a72;
  --olive-d:#6b6045;
  --olive-line:rgba(138,125,90,.22);
  --td:#2a2723;
  --td2:#4a4640;
  --td3:#7a756c;
  --display:'DM Serif Display',Georgia,serif;
  --body:'Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono',monospace;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  color: #1a1a1a;
  background: #fff;
  line-height: 1.6;
}

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

a {
  color: inherit;
  text-decoration: underline;
}

a:hover {
  opacity: 0.8;
}

/* ── Skip link ──────────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #1a1a1a;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 9999;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ── Navigation ─────────────────────────────────────────────────────────────── */

.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem clamp(1.5rem,4vw,3rem);display:flex;align-items:center;justify-content:space-between;transition:all .6s}
.nav--t{background:transparent;border-bottom:1px solid rgba(255,255,255,.08)}
.nav--s{background:rgba(244,239,229,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--olive-line)}
.nav-logo{font-family:var(--display);font-size:1.25rem;transition:color .5s}
.nav--t .nav-logo{color:#fff}.nav--s .nav-logo{color:var(--olive-d)}
.nav-r{display:flex;gap:2rem;align-items:center}
.nav-r a{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;transition:color .3s}
.nav--t .nav-r a{color:rgba(255,255,255,.6)}.nav--s .nav-r a{color:var(--td3)}
.nav-r a:hover,.nav-r a.active{color:var(--olive)!important}
.nav-cta{padding:.55rem 1.4rem;border:1px solid;background:none;cursor:pointer;font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;transition:all .3s}
.nav--t .nav-cta{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}
.nav--s .nav-cta{border-color:var(--olive);color:var(--olive-d)}
.nav-cta:hover{background:var(--olive);color:var(--cream)!important;border-color:var(--olive)!important}
@media(max-width:768px){.nav-r a:not(.nav-cta){display:none}}
@media(max-width:600px){.nav-logo{font-size:1rem}}

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.site-footer {
  /* TODO: style per footer design */
  border-top: 1px solid #ddd;
  margin-top: 4rem;
  padding: 3rem 1.5rem;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.site-footer__social,
.site-footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__copyright {
  font-size: 0.85rem;
  color: #555;
}

/* ── Honeypot — visually hidden but not display:none (bots may skip those) ── */

.honeypot-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Forms — shared field styles ────────────────────────────────────────────── */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.form-field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}

.form-field__label {
  font-size: 0.95rem;
  font-weight: 600;
}

.form-field__label--inline {
  font-weight: normal;
}

.form-field__required {
  color: #c00;
  margin-left: 0.15rem;
}

.form-field__optional {
  font-weight: normal;
  font-style: italic;
  color: #666;
  margin-left: 0.15rem;
}

.form-field__error {
  color: #c00;
  font-size: 0.875rem;
  margin: 0;
}

.form-field--error input,
.form-field--error textarea,
.form-field--error select {
  border-color: #c00;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid #bbb;
  border-radius: 3px;
  font-size: 1rem;
  font-family: inherit;
  background: #fafafa;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 2px solid #1a1a1a;
  outline-offset: 1px;
  border-color: #1a1a1a;
  background: #fff;
}

.form-errors {
  background: #fff3f3;
  border: 1px solid #c00;
  padding: 0.75rem 1rem;
  border-radius: 3px;
  margin-bottom: 1.5rem;
}

.form-errors__item {
  margin: 0;
  color: #c00;
}

.form-actions {
  margin-top: 2rem;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  border: none;
  border-radius: 3px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.btn:hover {
  opacity: 0.85;
}

.btn--primary {
  background: #1a1a1a;
  color: #fff;
}

.btn--secondary {
  background: transparent;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
}

/* ── Page wrappers ───────────────────────────────────────────────────────────── */

.contact-page__inner,
.rental-page__inner,
.success-page__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.rental-form__section {
  border: none;
  padding: 0;
  margin: 0 0 2.5rem;
}

.rental-form__section-title {
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.4rem;
  margin-bottom: 1.25rem;
  width: 100%;
}