/* Community Futures Shuswap - layout corrections applied on top of the
   design system. Two mobile defects carried over from the prototype.
   Uses only brand tokens; defines no new colours. */

@media (max-width: 800px) {

  /* 1. Open navigation shared the header's flex row, so the links stacked in a
        narrow right-hand column beside the logo. flex-basis:100% forces the
        list onto its own full-width row below the logo and Close button.
        (width:100% alone loses to flex sizing - flex-basis is what wraps it.) */
  .nav-links[data-open="true"] {
    flex: 1 0 100% !important;
    width: 100% !important;
    margin-top: var(--space-2);
    border-top: 1px solid var(--rule);
    padding-top: var(--space-2);
  }
  .nav-links[data-open="true"] a {
    border-bottom: 1px solid var(--rule) !important;
  }
  .nav-links[data-open="true"] a:last-child {
    border-bottom: 0 !important;
  }

  /* 2. The fixed bottom action bar (69px) overlapped the hero headline on first
        paint. Shortening the hero media lifts the headline clear of it.
        52vh -> 34vh recovers roughly 110px at a 812px viewport. */
  .hero-media {
    height: clamp(200px, 34vh, 380px) !important;
  }
}

/* Very short viewports: shorten the hero further so the headline still lands
   above the fold rather than being pushed under the action bar. */
@media (max-width: 800px) and (max-height: 700px) {
  .hero-media { height: clamp(160px, 28vh, 300px) !important; }
}

/* ---------------------------------------------------------------- contact form
   Square corners, brand tokens only, no new colours. Sage is reserved for the
   submit action and the focus ring; accents carry no text. */
.cfs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cfs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.cfs-field { display: flex; flex-direction: column; }
.cfs-wide { grid-column: 1 / -1; }

.cfs-field label {
  font-family: var(--font-screen);
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin-bottom: 6px;
}
.cfs-opt {
  font-weight: var(--weight-regular);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.cfs-field input,
.cfs-field select,
.cfs-field textarea {
  font-family: var(--font-screen);
  font-size: 16px;                 /* 16px avoids iOS zoom-on-focus */
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--sage-60);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  min-height: 48px;                /* comfortable touch target */
}
.cfs-field textarea { resize: vertical; min-height: 150px; }

.cfs-field input:focus-visible,
.cfs-field select:focus-visible,
.cfs-field textarea:focus-visible,
.cfs-actions button:focus-visible {
  outline: 2px solid var(--sage-dark);
  outline-offset: 2px;
}
.cfs-field [aria-invalid="true"] { border-color: var(--berry); border-width: 2px; }
.cfs-error { color: var(--berry); font-size: 14px; font-weight: var(--weight-bold); margin-top: 6px; }

.cfs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}
.cfs-actions button {
  font-family: var(--font-screen);
  font-size: 17px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--white);
  background: var(--sage);
  border: 1px solid var(--sage);
  border-radius: 0;
  padding: 14px 28px;
  min-height: 48px;
  cursor: pointer;
  transition: var(--transition-interactive);
}
.cfs-actions button:hover { background: var(--sage-dark); border-color: var(--sage-dark); }
.cfs-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); max-width: 46ch; }

.cfs-status {
  margin: var(--space-4) 0 0;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: var(--weight-bold);
  border-left: 4px solid var(--sage);
  background: var(--sage-20);
  color: var(--ink);
}
.cfs-status[data-tone="error"] { border-left-color: var(--berry); }