/* 92 Alpine Drive landing page.
   Page header is rendered by the shared fc_page_header() partial. Buttons and card
   styling are copied from the homepage's .btn / .card system. Loaded only on
   this page, so those tokens/classes are redeclared here rather than pulled
   from home.css, which never loads on this page. */

.site-content > .ast-container:has(.fc-92a-page) {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.fc-92a-page {

  background: var(--mist);
  font-family: var(--font-body);
  color: var(--ink);
  padding-bottom: 64px;
}

.fc-92a-admin-note {
  padding: 14px 24px;
  background: #fff7e0;
  border-bottom: 2px solid #e0a800;
  color: #6b5300;
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
}

.fc-92a-admin-note strong { font-weight: 700; }

/* Eyebrow used inside the tour popup; the page header uses page-header.css. */
.fc-92a-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--green);
  margin: 0 0 18px;
}
/* ---------- Section head (homepage .section-head pattern) ----------
   H2 sits on the style guide's H2 step (54px / weight 400), fluid the same way
   as page-header.css's --h2 variant, instead of a fixed 40px that read as a
   scaled-down copy of the homepage heads. */
.fc-92a-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 0;
  box-sizing: border-box;
}
.fc-92a-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.fc-92a-section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1em;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 20px;
}
.fc-92a-section-head h2 em,
.fc-92a-section-head h2 b {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: 0.94em;
  color: var(--green);
}
/* "The Annex" wordmark on its own centered line under the first heading. */
.fc-92a-annex-logo {
  display: block;
  margin-top: 0.4em;
}
.fc-92a-annex-logo img {
  display: block;
  width: min(380px, 80%);
  height: auto;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .fc-92a-annex-logo img { width: min(260px, 80%); }
}
.fc-92a-section-head p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--warm-gray);
  margin: 0;
}

.fc-92a-body-text {
  max-width: 780px;
  margin: 0 auto 24px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}
.fc-92a-body-text > p:first-child { margin-top: 0; }

.fc-92a-annex-map { text-align: center; }
.fc-92a-annex-map img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.fc-92a-annex-map a.fc-92a-map-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------- Buttons (copied from home.css) ---------- */
.fc-92a-btn-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
a.btn, a.btn:visited, a.btn:link, a.btn:hover, a.btn:focus { text-decoration: none !important; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-size: 12px;
  font-weight: 600 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  font-family: inherit;
  text-decoration: none !important;
}
.btn-primary, a.btn-primary, a.btn-primary:visited, a.btn-primary:hover {
  background: var(--green) !important;
  color: #fff !important;
  border: 1.5px solid var(--green) !important;
}
.btn-primary:hover, a.btn-primary:hover {
  background: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  transform: translateY(-2px);
}
.btn-outline, a.btn-outline, a.btn-outline:visited {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--line) !important;
}
.btn-outline:hover, a.btn-outline:hover {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}
.btn:active, a.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.1s; }

.btn-outline.fc-92a-tour-trigger {
  border-color: #000 !important;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .fc-92a-tour-trigger:hover:not(:active) { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .fc-92a-tour-trigger:active { transform: none; }
}

/* ---------- Floorplan cards (homepage .card pattern) ---------- */
.fc-92a-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 0 24px;
  padding: 0;
  list-style-type: none;
}
.fc-92a-card {
  background: #fff;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(31,36,25,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fc-92a-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(31,36,25,0.12); }
.fc-92a-card-img {
  position: relative;
  height: 220px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f3f1ea;
  cursor: pointer;
}
.fc-92a-card-body { padding: 18px 20px 22px; text-align: center; }
.fc-92a-card-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 4px;
}
.fc-92a-card-body p {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--warm-gray);
  margin: 0;
}
.fc-92a-enlarge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(31,36,25,0.75);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .2s ease-in-out;
}
.fc-92a-enlarge-icon:hover,
.fc-92a-enlarge-icon:focus { background-color: var(--green); }

@media (max-width: 992px) {
  .fc-92a-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .fc-92a-grid { grid-template-columns: 1fr; }
}

.fc-92a-section-cta { text-align: center; margin-top: 72px; }

/* ---------- Modal ---------- */
.fc-92a-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(15, 20, 33, 0.85);
  box-sizing: border-box;
}
.fc-92a-modal.open { display: flex; }
.fc-92a-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
}
.fc-92a-modal-content img {
  display: block;
  max-width: 90vw;
  /* Height-limited, not width-limited: leaves room below for the caption
     + button so the whole stack always fits inside the viewport instead
     of a fixed width forcing a taller-than-available image height. */
  max-height: calc(80vh - 100px);
  width: auto;
  margin: 0 auto;
  border-radius: 6px;
  background: #fff;
}
.fc-92a-modal-content-wide { max-width: min(95vw, 1400px); }
.fc-92a-modal-content-wide img {
  max-width: min(95vw, 1400px);
  max-height: calc(90vh - 100px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.fc-92a-modal-caption {
  margin-top: 12px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
}
.fc-92a-modal-content .btn { margin-top: 16px; }
/* Same black-circle + white-plus-rotated-to-an-X treatment as the amenity
   cards' toggle and the location map's popup close button. */
.fc-92a-modal-close {
  position: absolute !important;
  top: -18px !important;
  right: -18px !important;
  z-index: 2;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #000 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.fc-92a-modal-close:hover,
.fc-92a-modal-close:focus { background: #222 !important; }
.fc-92a-modal-close svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #fff !important;
  transform: rotate(45deg);
}

/* ---------- Sticky bottom CTA ---------- */
.fc-92a-bottom-cta-container { display: none; }
.fc-92a-bottom-cta {
  width: 100%;
  height: 64px;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  z-index: 500;
}
.fc-92a-bottom-cta.show { display: flex; }
.fc-92a-bottom-cta.fc-92a-btn-row { margin-top: 0; }

/* ---------- Schedule a Showing modal ---------- */
/* The showing request form in a popup, opened by .fc-92a-tour-trigger
   (assets/page-92-alpine.js). The WPForms markup below is restyled
   to match assets/contact-wpforms.css, since WPForms' own stylesheet is
   switched off on this page (inc/wpforms-92-alpine-tour.php). */
.fc-92a-tour-modal-content {
  position: relative;
  background: #fff;
  border-radius: 10px;
  /* Top padding only needs to clear the close button (top:18px + 32px tall +
     a little breathing room). */
  padding: 62px 36px 32px;
  max-width: 420px;
  width: 100%;
  text-align: left;
  /* Scrolls inside the card on short screens rather than running off them. */
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .fc-92a-tour-modal-content { padding: 58px 20px 24px; max-width: 360px; }
}

/* wpautop inserts these around the absolutely positioned close button. */
.fc-92a-tour-modal-content > p:empty,
.fc-92a-tour-modal-content > br {
  display: none;
}

.fc-92a-tour-header { text-align: center; margin-bottom: 24px; }
.fc-92a-tour-header .fc-92a-eyebrow { margin-bottom: 10px; }
.fc-92a-tour-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 10px;
}
/* Accent word in the accent face, as on every other heading on the site;
   the size stays at the modal's 34px rather than the page H2 step. */
.fc-92a-tour-h2 em,
.fc-92a-tour-h2 b {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: 0.94em;
  color: var(--green);
}
.fc-92a-tour-sub {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--warm-gray);
  margin: 0;
}
.fc-92a-tour-sub strong { color: var(--ink); font-weight: 700; }

/* Close button: the shared .fc-92a-modal-close (floating half outside the
   frame) works for the floorplan lightbox, which has no card edge of its
   own, but the same black circle at the very corner of this white card read
   as barely-there against the dark backdrop. Brought inside the card and
   given a light, on-brand treatment instead. */
.fc-92a-tour-modal-content .fc-92a-modal-close {
  top: 18px !important;
  right: 18px !important;
  /* The base rule's min-width: 36px !important (needed elsewhere) was
     still winning over this width: 32px, rendering a 36x32 oval instead
     of a circle. */
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}
/* The X is drawn here rather than by the button's inline SVG, because the
   block editor strips that SVG whenever the page is saved from wp-admin,
   leaving an empty black circle. */
.fc-92a-tour-modal-content .fc-92a-modal-close svg { display: none; }
.fc-92a-tour-modal-content .fc-92a-modal-close::before,
.fc-92a-tour-modal-content .fc-92a-modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.fc-92a-tour-modal-content .fc-92a-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.fc-92a-tour-form .wpforms-container { margin: 0; }
.fc-92a-tour-form .wpforms-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fc-92a-tour-form .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.fc-92a-tour-form .wpforms-field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
}
.fc-92a-tour-form .wpforms-field.fc-half { grid-column: span 1; }
@media (max-width: 600px) {
  .fc-92a-tour-form .wpforms-field-container { grid-template-columns: 1fr; }
  .fc-92a-tour-form .wpforms-field.fc-half { grid-column: 1 / -1; }
}

.fc-92a-tour-form .wpforms-field-label {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  color: rgba(31, 36, 25, 0.72);
}
.fc-92a-tour-form .wpforms-required-label { color: var(--green); }
.fc-92a-tour-form .fc-optional .wpforms-field-label::after {
  content: ' (optional)';
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(31, 36, 25, 0.4);
}
.fc-92a-tour-form .wpforms-field-sublabel,
.fc-92a-tour-form .wpforms-hidden { display: none; }
.fc-92a-tour-form .wpforms-field-hp {
  display: none !important;
  position: absolute !important;
  left: -9000px !important;
}

.fc-92a-tour-form .wpforms-field input[type='text'],
.fc-92a-tour-form .wpforms-field input[type='email'],
.fc-92a-tour-form .wpforms-field input[type='tel'],
.fc-92a-tour-form .wpforms-field select,
.fc-92a-tour-form .wpforms-field textarea {
  width: 100%;
  max-width: 100%;
  height: 46px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
  background-color: transparent;
  border: 1px solid rgba(31, 36, 25, 0.18);
  border-radius: 3px;
  padding: 0 13px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.fc-92a-tour-form .wpforms-field textarea {
  height: 84px;
  min-height: 84px;
  padding: 11px 13px;
  line-height: 1.5;
  resize: vertical;
}
/* Native arrow swapped for a thin chevron, so the select matches the text
   inputs instead of each browser's own control. */
.fc-92a-tour-form .wpforms-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231f2419' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.fc-92a-tour-form .wpforms-field ::placeholder { color: rgba(31, 36, 25, 0.52); }
.fc-92a-tour-form .wpforms-field input:hover,
.fc-92a-tour-form .wpforms-field select:hover,
.fc-92a-tour-form .wpforms-field textarea:hover { border-color: rgba(31, 36, 25, 0.32); }
.fc-92a-tour-form .wpforms-field select:focus,
.fc-92a-tour-form .wpforms-field textarea:focus,
.fc-92a-tour-form .wpforms-field input:focus {
  outline: none;
  border-color: var(--green);
  background-color: rgba(74, 124, 58, 0.04);
  box-shadow: 0 0 0 3px rgba(74, 124, 58, 0.16);
}
.fc-92a-tour-form .wpforms-field input.wpforms-error { border-color: #ce5c4a; }
.fc-92a-tour-form .wpforms-field input.wpforms-error:focus {
  border-color: #ce5c4a;
  box-shadow: 0 0 0 3px rgba(206, 92, 74, 0.28);
}
.fc-92a-tour-form .wpforms-field em.wpforms-error,
.fc-92a-tour-form .wpforms-error-container {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-style: normal;
  color: #963527;
  background: none;
  border: 0;
}

.fc-92a-tour-form .wpforms-confirmation-container,
.fc-92a-tour-form .wpforms-confirmation-container-full {
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-left: 3px solid var(--green);
  border-radius: 3px;
  background: rgba(74, 124, 58, 0.1);
  color: var(--green-dark);
  font-size: 14px;
  line-height: 1.5;
}
.fc-92a-tour-form .wpforms-confirmation-container p { margin: 0; color: inherit; }
.fc-92a-tour-form .wpforms-error-container-full,
.fc-92a-tour-form .wpforms-form > .wpforms-error-container {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 3px solid #ce5c4a;
  border-radius: 3px;
  background: rgba(206, 92, 74, 0.1);
  color: #963527;
  font-size: 14px;
  line-height: 1.5;
}

.fc-92a-tour-form .wpforms-submit-container { padding: 0; margin: 0; }
.fc-92a-tour-form button.wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 2px;
  padding: 0 22px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--green);
  border: 1.5px solid var(--green);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.fc-92a-tour-form button.wpforms-submit:hover,
.fc-92a-tour-form button.wpforms-submit:focus {
  background-color: var(--green-light);
  border-color: var(--green-light);
  transform: translateY(-2px);
}
.fc-92a-tour-form button.wpforms-submit:disabled {
  background-color: rgba(31, 36, 25, 0.22);
  border-color: rgba(31, 36, 25, 0.22);
  cursor: not-allowed;
  transform: none;
}
.fc-92a-tour-form .wpforms-recaptcha-container { padding: 0; max-width: 100%; overflow-x: auto; }
/* Turnstile renders at its "flexible" size here (inc/wpforms-92-alpine-tour.php),
   which fills whatever width its container has, so match the submit button. */
.fc-92a-tour-form .wpforms-recaptcha-container,
.fc-92a-tour-form .wpforms-turnstile { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .fc-92a-tour-form button.wpforms-submit:hover,
  .fc-92a-tour-form button.wpforms-submit:focus { transform: none; }
}