/* =========================================================
   Migrate Digital — Contact Page Styles
   Depends on: migrate-tokens.css + home.css + services.css
   Only contains contact-specific styles on top of the shared
   library.
   ========================================================= */


/* ==========================================================
   SECTION PADDING  ·  match home's interior section rhythm.
   ========================================================== */

.section-contact-intake {
  padding-top: 120px;
  padding-bottom: 154px;
}

/* Flush section-head variant — no section number column.
   Used on the contact page now that the former two-section
   structure is consolidated into one. */
.section-head--flush {
  display: block;
}
.section-head--flush .section-head-body {
  max-width: 780px;
}



/* ==========================================================
   INTAKE FORM  ·  full-width LIGHT variant of .cta-form.
   The base .cta-form in home.css was authored for dark CTA
   sections, so every color/background/border tied to dark is
   overridden here, scoped to .intake-form. Layout (flex, grid
   columns, padding) is inherited from the base rules.
   ========================================================== */

.intake-form {
  width: 100%;
  margin-top: var(--sp-13);      /* 48px gap from section-head above */
  background: var(--surface);
  border-color: var(--hairline);
}

.intake-form .form-head {
  background: #f7f7f7;
  border-bottom-color: var(--hairline);
}

.intake-form .form-title {
  color: var(--ink);
}

.intake-form .field-label {
  color: var(--bronze);
}

.intake-form .field-input {
  color: var(--ink);
  border-bottom-color: var(--hairline-2);
}

.intake-form .field-input:focus {
  border-bottom-color: var(--bronze);
}

.intake-form .field-input::placeholder {
  color: var(--ink-3);
}

.intake-form .form-foot {
  background: #f7f7f7;
  border-top-color: var(--hairline);
}

.intake-form .form-foot-note {
  color: var(--ink-3);
}


/* ==========================================================
   FIELD HELPER TEXT  ·  small hint under a field (used on the
   Brief Context textarea so users know it's optional).
   ========================================================== */

.field-help {
  display: block;
  padding: var(--sp-3) 0 0;      /* 8px top spacing from the input */
  color: var(--ink-3);
  font-size: var(--t-1);
  line-height: 1.5;
}


/* ==========================================================
   ACCORDION  ·  slim collapsible panel used twice on the
   contact page: "Or Directly" (contact methods) and
   "Call To Kickoff" (4-step path). Native <details>/<summary>
   so it's keyboard-accessible with no JS. The chevron icon
   rotates 180° when the panel opens.
   ========================================================== */

.accordion {
  margin-top: var(--sp-10);               /* 24px — matches form → accordion spacing */
  border: var(--rule) solid var(--hairline);
  background: var(--surface);
}

.accordion-head {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  padding: var(--sp-7) var(--sp-10);       /* 16 vertical · 24 horizontal — mirrors the old direct-bar */
  cursor: pointer;
  list-style: none;                        /* remove default disclosure marker */
  user-select: none;
  transition: background 160ms ease;
}
.accordion-head::-webkit-details-marker {
  display: none;                           /* Safari */
}
.accordion-head:hover {
  background: #f7f7f7;
}

.accordion-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-2);                   /* 11px */
  letter-spacing: var(--track-ui-m);
  text-transform: uppercase;
  color: var(--bronze);
  flex-shrink: 0;
}

.accordion-desc {
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--t-3);                   /* 13px */
  line-height: 1.45;
  color: var(--ink-3);
  flex: 1;
}

.accordion-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--bronze);
  flex-shrink: 0;
  transition: transform 220ms ease;
}
.accordion-icon svg {
  width: 100%;
  height: 100%;
}
.accordion[open] > .accordion-head .accordion-icon {
  transform: rotate(180deg);
}

.accordion-body {
  border-top: var(--rule) solid var(--hairline);
}

/* "Or Directly" body — stacked contact rows */
.accordion-body--direct {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);                        /* 12px between rows */
  padding: var(--sp-9) var(--sp-10);       /* 20 vertical · 24 horizontal */
}

/* "Call To Kickoff" body — 4-row list + footer meta */
.accordion-body--kickoff {
  padding: 0;                              /* .rows and .panel-foot bring their own padding */
}
.accordion-body--kickoff .rows {
  padding: var(--sp-5) var(--sp-10) var(--sp-10);
}
.accordion-body--kickoff .accordion-foot {
  /* existing .panel-foot padding/grid applies; just ensure its
     border-top color matches our lighter hairline */
  border-top-color: var(--hairline);
}


/* ==========================================================
   DIRECT-BAR ITEMS  ·  label/value rows reused inside
   .accordion-body--direct. The classes predate the accordion
   (from when these lived in the old slim direct-bar), kept
   here so the accordion body stays compact.
   ========================================================== */

.db-tag,
.db-link,
.db-meta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-3);                        /* 8px between key and value */
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-2);                   /* 11px */
  letter-spacing: var(--track-ui-m);
  text-transform: uppercase;
  white-space: nowrap;
}

.db-tag {
  color: var(--bronze);
  align-items: center;                     /* keep the square + text centered */
}

.db-link {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}
.db-link:hover {
  color: var(--bronze);
}

.db-k {
  color: var(--bronze);
}
.db-v {
  color: var(--ink);
}
.db-link:hover .db-v {
  color: var(--bronze);
}

/* The hours item is informational — no link — so its value
   should read as muted body meta. */
.db-meta .db-v {
  color: var(--ink-3);
}


/* ==========================================================
   JURISDICTION BAND  ·  thin fine-print band below the last
   numbered section, above the footer. Small uppercase
   Söhne 10px on a hairline-bordered band.
   ========================================================== */

.jurisdiction-band {
  padding: var(--sp-11) 0;       /* 30px vertical */
  border-top: var(--rule) solid var(--hairline);
  background: var(--page-bg);
}

.jurisdiction-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--sp-7);       /* 16px */
  row-gap: var(--sp-4);
  margin: 0;
  text-align: center;
}

.jurisdiction-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

.jurisdiction-sep {
  color: var(--ink-4);
  font-family: var(--title);
  font-size: var(--t-2);
}


/* ==========================================================
   RESPONSIVE  ·  breakpoints aligned with home.css.
   ========================================================== */

@media (max-width: 960px) {

  .section-contact-intake {
    padding-top: 80px;
    padding-bottom: 100px;
  }

  .accordion-head {
    flex-wrap: wrap;
    padding: var(--sp-7);
  }
  .accordion-desc {
    flex-basis: 100%;
    order: 3;
  }
  .accordion-icon {
    margin-left: auto;
  }

  .accordion-body--direct {
    padding: var(--sp-7);
  }
  .accordion-body--kickoff .rows {
    padding: var(--sp-5) var(--sp-7) var(--sp-7);
  }

  .jurisdiction-band {
    padding: var(--sp-10) 0;
  }

  .jurisdiction-line {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .jurisdiction-sep {
    display: none;               /* dots redundant when stacked */
  }

}