/* ============================================================
   CONTACT — International Typographic Style (Swiss)
   ------------------------------------------------------------
   Same grid, gutter and type discipline as The Mission (section3)
   and Plan Your Visit (section6), so all three sections align to
   one another down the page. Dark ground, as it was.

   The old file styled bare `label`, `textarea` and `form div`
   selectors, which leaked into every form on the site. Everything
   here is scoped to this section or to #contactForm.
   ============================================================ */

.section5 {
  --s5-paper: #1b1b1b;
  --s5-ink: #fff;
  --s5-accent: #ff820d;
  --s5-muted: rgba(255, 255, 255, 0.62);
  --s5-rule: rgba(255, 255, 255, 0.22);
  --s5-rule-strong: #fff;

  /* Matches section3 and section6: one shared left edge. */
  --s5-gutter: clamp(1.25rem, 5vw, 6rem);
  --s5-max: 1440px;
  --s5-field-gap: clamp(1.1rem, 2vw, 1.5rem);

  width: 100%;
  background-color: var(--s5-paper);
  color: var(--s5-ink);
  font-family: 'Sofia Pro', sans-serif;
  padding: 0 0 clamp(3.5rem, 7vw, 6rem);
}

/* ============================================================
   Masthead
   ============================================================ */
.s5-masthead {
  max-width: var(--s5-max);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) var(--s5-gutter) 0;
}

/* Overline above the title: the small element sets the left edge
   the display type then aligns to. */
.s5-index {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 clamp(1rem, 2vw, 1.75rem);
  color: var(--s5-accent);
  font-family: 'Sofia Pro', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

.s5-index::before {
  content: "";
  width: clamp(2.5rem, 6vw, 5rem);
  height: 2px;
  background: var(--s5-accent);
  flex: none;
}

.s5-title {
  margin: 0;
  color: var(--s5-ink);
  font-family: 'Sofia Pro', sans-serif;
  font-size: clamp(2.75rem, 9vw, 7rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.035em;
}

/* Full-bleed hairline closing the masthead. */
.s5-masthead::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--s5-rule-strong);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* ============================================================
   The body — form (6 cols) beside the details (5 cols)

   The old 50/50 split put the form's card dead centre of its
   half and the details hard against the right edge, so neither
   column shared an edge with anything else on the page.
   ============================================================ */
.grid-section5-container {
  max-width: var(--s5-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--s5-gutter) 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.grid-left-section5 {
  grid-column: 1 / span 6;
  min-width: 0;
}

.grid-right-section5 {
  grid-column: 8 / span 5;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  width: auto;
}

.form-contact-container {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  gap: 0;
}

/* ------------------------------------------------------------
   Column heads

   All three columns open the same way: a heavy rule, then a
   small tracked label. That is what makes them read as parts of
   one section rather than three unrelated panels.
   ------------------------------------------------------------ */
.form-title-container,
.container-schedule,
.container-contact {
  border-top: 2px solid var(--s5-rule-strong);
  padding-top: clamp(0.9rem, 1.6vw, 1.25rem);
}

.form-title-container {
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  width: 100%;
  height: auto;
}

.container-schedule,
.container-contact {
  display: block;
  width: 100%;
  height: auto;
}

.form-title,
.title-schedule,
.title-contact {
  margin: 0;
  text-align: left;
  color: var(--s5-ink);
  font-family: 'Sofia Pro', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Detail rows — label above value, separated by hairlines
   ------------------------------------------------------------ */
.schedule-item,
.contact-item {
  margin: 0;
  padding: clamp(0.9rem, 1.8vw, 1.15rem) 0;
  border-bottom: 1px solid var(--s5-rule);
}

.container-schedule .schedule-item:first-of-type,
.container-contact .contact-item:first-of-type {
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.schedule-item-h2,
.contact-item-h2 {
  margin: 0 0 0.45rem;
  text-align: left;
  color: var(--s5-muted);
  font-family: 'Sofia Pro', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Service times are information, not links: they stay white.
   The contact details ARE links, so orange is reserved for them
   and means the same thing everywhere in the section. */
.schedule-item-p {
  margin: 0;
  text-align: left;
  color: var(--s5-ink);
  font-family: 'Sofia Pro', sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 300;
  line-height: 1.4;
}

.contact-item-p {
  margin: 0;
  text-align: left;
}

.contact-item-p a {
  display: inline-block;
  font-family: 'Sofia Pro', sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--s5-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}

.contact-item-p a:hover {
  border-bottom-color: var(--s5-accent);
}

.contact-item-p a:focus-visible {
  outline: 2px solid var(--s5-accent);
  outline-offset: 3px;
}

/* ============================================================
   Form

   Underlined fields on the grid instead of a rounded, shadowed
   card floating on the background. Same construction as the
   Plan Your Visit form, inverted for the dark ground.
   ============================================================ */
#contactForm {
  width: 100%;
  max-width: none;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s5-field-gap);

  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#contactForm input,
#contactForm select,
#contactForm textarea {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  margin: 0;

  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--s5-rule);
  border-radius: 0;
  padding: 0.85rem 0;

  color: var(--s5-ink);
  font-family: 'Sofia Pro', sans-serif;
  font-weight: 300;
  font-size: 1rem;

  transition: border-color .15s ease;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder {
  color: var(--s5-muted);
}

/* The focused rule thickens; the padding gives back the pixel it
   takes, so nothing below it moves. */
#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus {
  outline: none;
  border-bottom-color: var(--s5-accent);
  border-bottom-width: 2px;
  padding-bottom: calc(0.85rem - 1px);
  background-color: transparent;
  box-shadow: none;
}

#contactForm select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ff820d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
}

#contactForm select option {
  color: #1b1b1b;
}

#contactForm label {
  display: block;
  text-align: left;
  margin: 0 0 0.35rem;
  color: var(--s5-muted);
  font-family: 'Sofia Pro', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#contactForm textarea {
  min-height: 7rem;
  resize: vertical;
}

/* Labels and fields are siblings in one flex column, so the column's
   gap fell between a label and its own field as well as between
   fields. Pulling the field up closes that: the label sits on the
   thing it names, and the space stays between the pairs. */
#contactForm label + input,
#contactForm label + select,
#contactForm label + textarea {
  margin-top: calc(0.35rem - var(--s5-field-gap));
}

/* The conditional blocks are one field each: they keep the same
   rhythm as the fields above them rather than a gap of their own. */
#visitSection,
#otherSection {
  display: flex;
  flex-direction: column;
  gap: var(--s5-field-gap);
  margin: 0;
}

/* ------------------------------------------------------------
   Submit

   Scoped to #contactForm. The old rule was a bare `.btn-submit`,
   which also caught the Plan Your Visit button in section6 and
   had to be undone there field by field.
   ------------------------------------------------------------ */
#contactForm .btn-submit {
  width: auto;
  align-self: flex-start;
  margin-top: clamp(0.5rem, 1.5vw, 1rem);

  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.25rem;

  background: var(--s5-accent);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #000;

  font-family: 'Sofia Pro', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s ease;
}

#contactForm .btn-submit:hover {
  filter: brightness(1.06);
  transform: none;
}

#contactForm .btn-submit:focus-visible {
  outline: 2px solid var(--s5-ink);
  outline-offset: 3px;
}

#contactForm .btn-submit:active {
  transform: none;
}

#contactForm .btn-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

/* ============================================================
   Map — a full-bleed band closing the section

   It used to open the section, above even the heading. As the
   last element it works as a full-measure rule under the whole
   thing, and the address above it reads as its caption.
   ============================================================ */
.map-band {
  position: relative;
  width: 100%;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--s5-rule);
  border-bottom: 1px solid var(--s5-rule);
}

.map-container-nexadei {
  width: 100%;
  height: clamp(280px, 45vh, 460px);
  background-color: var(--s5-paper);
}

/* Square, flush to the band's own corner, on the section's palette. */
.map-center-btn {
  position: absolute;
  top: clamp(0.75rem, 1.5vw, 1.25rem);
  right: clamp(0.75rem, 1.5vw, 1.25rem);
  z-index: 999;

  padding: 0.7rem 1.25rem;
  background-color: var(--s5-paper);
  color: var(--s5-ink);
  border: 1px solid var(--s5-rule-strong);
  border-radius: 0;

  font-family: 'Sofia Pro', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.map-center-btn:hover {
  background-color: var(--s5-accent);
  border-color: var(--s5-accent);
  color: #000;
}

.map-center-btn:focus-visible {
  outline: 2px solid var(--s5-accent);
  outline-offset: 3px;
}

/* Simple style to hide sections until needed */
.hidden {
  display: none;
}

/* ============================================================
   Responsive — the grid collapses, the left edge never moves
   ============================================================ */
@media screen and (max-width: 1024px) {

  .grid-left-section5,
  .grid-right-section5 {
    grid-column: 1 / -1;
  }

  /* Details before the form once stacked: someone reaching for an
     address or a service time should not have to scroll past a
     form to find it. */
  .grid-right-section5 {
    grid-row: 1;
  }

  .grid-left-section5 {
    grid-row: 2;
  }
}

@media screen and (max-width: 620px) {

  #contactForm .btn-submit {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .contact-item-p a,
  .map-center-btn,
  #contactForm input,
  #contactForm select,
  #contactForm textarea,
  #contactForm .btn-submit {
    transition: none;
  }
}