/* ============================================================
   Lendemain Homeowner's Association
   Evergreen Forest / Pacific Northwest theme
   ============================================================ */

:root {
  --conifer:      #1B3A2B; /* deep evergreen - header/footer */
  --fir:          #2F5D42; /* mid green - links, accents */
  --fir-light:    #4B7A5C; /* hover state */
  --paper:        #F6F4EC; /* birch paper - page background */
  --card:         #EFEBDD; /* lichen - card background */
  --card-border:  #D8D2BC; /* card border */
  --bark:         #3A2E22; /* bark brown - body text */
  --bark-soft:    #5B4E3E; /* muted text */
  --amber:        #C97B3D; /* cedar amber - important tag only */
  --amber-bg:     #FBE9D8;
  --cream:        #FFFDF8; /* form field background */

  --font-display: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--bark);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

a {
  color: var(--fir);
  text-decoration: underline;
  text-decoration-color: var(--card-border);
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--fir-light);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

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

/* ---------------- Skip link ---------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--conifer);
  color: #fff;
  padding: 0.6em 1em;
  z-index: 100;
}

.skip-link:focus {
  left: 0.5em;
  top: 0.5em;
}

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

.site-header {
  background: var(--conifer);
}

.header-photo {
  /* Reserved space for an evergreen forest photograph.
     Drop a wide image in as background, or replace this
     div with an <img> tag - see comment in header.php */
  height: 260px;
  background-color: #14291E;
  background-image:
    linear-gradient(to bottom, rgba(15, 33, 23, 0.15) 0%, rgba(15, 33, 23, 0.75) 100%),
    url("../images/forest-header.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.header-photo::before {
  /* Subtle top vignette so light photos still let white text read.
     Only needed while the photo fills the whole band (the "cover"
     case below the letterbox breakpoint) - see the media query
     below, which turns this off once letterboxing kicks in. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25), transparent 40%);
}

.header-text {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.5rem 1.75rem;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.header-photo-frame {
  display: none; /* only shown once letterboxing is active, below */
}

/*
  Letterbox instead of stretch once the header is wider than the
  photo's native resolution. Below this width "cover" is fine (the
  browser is only ever shrinking the image, never enlarging it).

  Above it: rather than stretch the photo to fill the full 260px
  band (which upscales it and makes it soft), the band splits into
  two parts:
    1. A framed photo at its true native size, centered, sitting
       directly on the conifer background - the color fills the
       space around it instead of the image stretching to fit.
    2. A solid conifer strip below the photo holding the title
       text, so the text always sits on flat color, never
       overlapping the picture.

  IMPORTANT: 715px below must match your actual photo's native
  pixel width, and 166px must match its native height. If you
  swap in a higher-resolution photo later (1600px+ wide), you can
  remove this whole media query - "cover" will look sharp on its
  own at every normal screen size and you won't need letterboxing.
*/
@media (min-width: 715px) {
  .header-photo {
    height: auto;
    min-height: 260px;
    background-image: none; /* photo moves to header-photo-frame below */
    background-color: var(--conifer);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 1.5rem;
  }

  .header-photo::before {
    display: none; /* no scrim needed - text no longer sits on the photo */
  }

  .header-photo-frame {
    display: block;
    width: 715px;
    height: 166px;
    background-image: url("../images/forest-header.jpg");
    background-size: 715px 166px; /* native size - never upscaled */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  }

  .header-text {
    padding: 1.25rem 1.5rem 1.5rem;
  }

  .site-title,
  .site-tagline {
    text-shadow: none; /* flat conifer background now, no shadow needed */
  }
}

.site-title {
  font-family: var(--font-display);
  color: #fff;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.site-title a {
  color: #fff;
  text-decoration: none;
}

.site-tagline {
  color: #DCE7DC;
  font-size: 1rem;
  margin: 0.35rem 0 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ---------------- Nav ---------------- */

.site-nav {
  background: var(--fir);
  border-top: 1px solid rgba(255,255,255,0.15);
}

.site-nav ul {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
  list-style: none;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-nav a {
  display: inline-block;
  padding: 0.85rem 0;
  color: #EFF6EF;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 3px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus {
  border-bottom-color: var(--amber);
  color: #fff;
}

.site-nav a[aria-current="page"] {
  border-bottom-color: #fff;
}

/* ---------------- Main content ---------------- */

.site-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 3rem;
}

.page-heading {
  font-family: var(--font-display);
  color: var(--conifer);
  font-size: 1.75rem;
  margin: 0 0 1rem;
  border-bottom: 3px solid var(--card-border);
  padding-bottom: 0.5rem;
}

.intro-block {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 6px solid var(--fir);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  border-radius: 2px;
}

.intro-block p {
  margin: 0.4rem 0;
}

/* ---------------- News / notice board ---------------- */

.notice-board-heading {
  font-family: var(--font-display);
  color: var(--conifer);
  font-size: 1.4rem;
  margin: 2.5rem 0 1rem;
}

.notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.notice {
  background: var(--cream);
  border: 1px solid var(--card-border);
  border-left: 6px solid var(--fir);
  padding: 0.9rem 1.1rem;
  border-radius: 2px;
}

.notice.is-important {
  border-left-color: var(--amber);
  background: var(--amber-bg);
}

.notice-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--fir);
  padding: 0.15rem 0.55rem;
  border-radius: 2px;
  margin-bottom: 0.45rem;
}

.notice.is-important .notice-tag {
  background: var(--amber);
}

.notice p {
  margin: 0.3rem 0 0;
}

.notice strong {
  color: var(--conifer);
}

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

.contact-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 3px solid var(--card-border);
}

.contact-form {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.75rem;
  max-width: 560px;
}

.form-row {
  margin-bottom: 1.15rem;
  display: flex;
  flex-direction: column;
}

.form-row label {
  font-weight: 600;
  color: var(--conifer);
  margin-bottom: 0.35rem;
}

.form-row .required {
  color: var(--amber);
  font-weight: 700;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--card-border);
  border-radius: 3px;
  background: var(--cream);
  color: var(--bark);
}

.form-row textarea {
  min-height: 140px;
  resize: vertical;
}

.captcha-row {
  background: #fff;
  border: 1px dashed var(--card-border);
  padding: 1rem;
  border-radius: 3px;
}

.captcha-image-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.captcha-image-wrap img {
  border: 1px solid var(--card-border);
  border-radius: 3px;
  background: #fff;
}

.captcha-refresh {
  background: none;
  border: 1px solid var(--fir);
  color: var(--fir);
  padding: 0.4rem 0.7rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

.captcha-refresh:hover {
  background: var(--fir);
  color: #fff;
}

.captcha-hint {
  font-size: 0.85rem;
  color: var(--bark-soft);
  margin: 0.3rem 0 0;
}

.form-submit {
  background: var(--fir);
  color: #fff;
  border: none;
  padding: 0.7rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.form-submit:hover {
  background: var(--fir-light);
}

.form-note {
  font-size: 0.85rem;
  color: var(--bark-soft);
  margin-top: 0.75rem;
}

/* Honeypot field - see the comment on .hp-field in index.html.
   Positioned off-screen rather than display:none, because the more
   capable spam bots ignore fields that are display:none. Must stay
   invisible to people: if this ever becomes visible, homeowners will
   fill it in and their messages will be silently discarded. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------- CC&Rs page specifics ---------------- */

.document-links {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 1.5rem 0 2rem;
}

.document-link-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--cream);
  border: 1px solid var(--card-border);
  border-left: 6px solid var(--fir);
  padding: 1rem 1.25rem;
  border-radius: 2px;
}

.document-link-card .doc-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.document-link-card a {
  font-weight: 700;
  font-size: 1.05rem;
}

.document-link-card p {
  margin: 0.25rem 0 0;
  color: var(--bark-soft);
  font-size: 0.95rem;
}

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

.site-footer {
  background: var(--conifer);
  color: #C9D6C9;
  padding: 1.75rem 1.5rem;
  margin-top: 2rem;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-footer a {
  color: #E8EFE6;
}

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

@media (max-width: 640px) {
  .header-photo {
    height: 190px;
  }
  .site-title {
    font-size: 1.5rem;
  }
  .site-nav ul {
    gap: 1rem;
  }
  .footer-inner {
    flex-direction: column;
  }
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}