/* wp-content/plugins/notts-osteo-elements/assets/css/contact.css
 *
 * The contact page: the details block, the map, and the Elementor form dressed to match.
 *
 * Author: Sean Burn
 */

/* ---------------------------------------------------------------- the panel
 *
 * Details and form, side by side.
 *
 * The site grid is applied HERE and nowhere else inside it. Every nosteo- widget normally renders
 * its own `.nosteo-sec__inner` — max-width 1440, 72px gutters — which is right for a widget that
 * owns a full-width row and wrong for two of them sitting in columns: the page ends up with the
 * gutters twice, once around the panel and again inside each half. So the panel takes the grid and
 * the widgets inside it run bare.
 */

/* The grid, and not the container around it, carries the site width.
 *
 * Elementor caps every TOP-LEVEL container with
 *   :is(.elementor-section-wrap, [data-elementor-id]) > .e-con { max-width: min(100%, var(--width)) }
 * at (0,2,0) with --width: 100%, which flattens any max-width a single class can set — which is
 * why the panel went full width. A nested container is not a direct child of [data-elementor-id],
 * so it is not capped. This is the same shape every other page already uses: a full-bleed outer
 * element with the grid applied by something inside it. */
.nosteo-panel {
  container-type: inline-size;
  container-name: nosteo-panel;
}

.nosteo-panel__grid {
  max-width: var(--nosteo-site-max);
  margin-inline: auto;
  padding: var(--nosteo-section-pad-y) var(--nosteo-site-pad);
}

/* The widget in column mode: no grid of its own, no vertical section padding. */
.nosteo-contact--column .nosteo-contact__bare { padding: 0; }

/* ---- the two columns ----
   One grid rather than two floated halves, so the columns share a single row and their tops are on
   the same line by construction instead of by luck. */
.nosteo-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}

/* 980px on the CONTAINER, which is now full-bleed — so the content inside is 980 - 144 of gutters
   = ~836px when it splits. Measuring the container and forgetting its padding is how a two-column
   layout ends up splitting while each column is still too narrow to hold a form field. */
@container nosteo-panel (min-width: 980px) {
  .nosteo-panel__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    gap: clamp(40px, 4.5vw, 72px);
  }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1040px) {
    .nosteo-panel__grid {
      grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
      gap: clamp(40px, 4.5vw, 72px);
    }
  }
}

/* Each column is a stack with one rhythm, so the heading sits the same distance above its content
   on both sides. */
/* Elementor containers are already flex columns — `.e-con.e-flex` sets `--flex-direction: column`
   and `flex-direction: var(--flex-direction)` at a specificity a single class cannot reach. So this
   sets only the gap, and lets the container be a column the way it already was. */
.nosteo-panel__col {
  gap: 18px;
  min-width: 0;
}

/* ---- the column headings ----
 *
 * Both columns use the same widget with this class, which is the whole point: two headings that are
 * meant to read as a pair cannot be a pair if one is a section title at 44px and the other is an
 * intro heading at 26px. One class, one size, one rule under each — they match because there is
 * only one definition of them.
 */
.nosteo-panel__label .elementor-heading-title {
  position: relative;
  margin: 0;
  padding-bottom: 15px;
  font-family: var(--nosteo-font);
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: var(--nosteo-weight-strong);
  color: var(--nosteo-ink);
  text-transform: none;
}
.nosteo-panel__label .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  background: var(--nosteo-resolve);
}

/* ---------------------------------------------------------------- details */

.nosteo-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.nosteo-contact__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  background: var(--nosteo-white);
  border: 1px solid var(--nosteo-hair-soft);
  border-radius: 10px;
}

/* The icon sits in a tinted disc so the row has an anchor on the left and the eye can run down the
   column without re-reading each heading. */
.nosteo-contact__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nosteo-tint);
  color: var(--nosteo-ink);
}
.nosteo-contact__icon svg { width: 21px; height: 21px; }

.nosteo-contact__body { display: block; min-width: 0; }

.nosteo-contact__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--nosteo-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nosteo-muted);
}

.nosteo-contact__value {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  color: var(--nosteo-ink);
  font-weight: var(--nosteo-weight-medium);
  word-break: break-word;
}

/* Colour restated on both states: the theme's reset sets a global a:hover colour at a specificity
   that beats a single class, so a hover rule that omits `color` would protect nothing. */
.nosteo-contact__value--link { text-decoration: none; }
.nosteo-contact .nosteo-contact__value--link:hover,
.nosteo-contact .nosteo-contact__value--link:focus {
  color: var(--nosteo-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nosteo-contact__note {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--nosteo-muted);
}

.nosteo-contact__social { margin-top: 22px; }
.nosteo-contact__networks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.nosteo-contact__network {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--nosteo-hair);
  border-radius: 999px;
  font-size: 14px;
  font-weight: var(--nosteo-weight-medium);
  color: var(--nosteo-ink);
  text-decoration: none;
  transition: border-color 180ms var(--nosteo-ease), color 180ms var(--nosteo-ease);
}
.nosteo-contact .nosteo-contact__network:hover,
.nosteo-contact .nosteo-contact__network:focus {
  border-color: var(--nosteo-accent);
  color: var(--nosteo-accent);
  text-decoration: none;
}

/* ---------------------------------------------------------------- map */

.nosteo-map__frame {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--nosteo-hair-soft);
  background: var(--nosteo-surface);
}

/* Height comes from the widget's own responsive control, so it is set here only as the fallback
   for a widget saved before that control existed. */
.nosteo-map__canvas {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}

/* Something to look at while GL JS downloads, rather than a white hole the height of the map. */
.nosteo-map__canvas[data-nosteo-map] { background: var(--nosteo-surface); }
.nosteo-map__canvas[data-nosteo-map].is-failed { display: none; }

.nosteo-map__actions { margin: 16px 0 0; }
.nosteo-map__link {
  display: inline-block;
  padding: 12px 26px;
  border-radius: var(--nosteo-cta-radius, 999px);
  background: var(--nosteo-accent);
  color: var(--nosteo-white);
  font-weight: var(--nosteo-weight-strong);
  text-decoration: none;
  transition: background 180ms var(--nosteo-ease);
}
.nosteo-map .nosteo-map__link:hover,
.nosteo-map .nosteo-map__link:focus {
  background: var(--nosteo-ink);
  color: var(--nosteo-white);
  text-decoration: none;
}

/* Mapbox's own controls, toned down to sit inside the site rather than on top of it. */
.nosteo-map .mapboxgl-ctrl-group { border-radius: 8px; box-shadow: 0 2px 10px rgba(50, 62, 72, 0.16); }
.nosteo-map .mapboxgl-popup-content {
  padding: 12px 15px;
  border-radius: 8px;
  font-family: var(--nosteo-font);
  font-size: 14px;
  color: var(--nosteo-ink);
}

/* ---------------------------------------------------------------- the form
 *
 * The Elementor Pro Form widget, given the site's manners.
 *
 * SPECIFICITY, because it decides everything here. Elementor writes a stylesheet per page and it
 * loads AFTER this file. Its rules sit at (0,3,0) — `.elementor-widget-form .elementor-field-group
 * .elementor-field` and friends — so a matching (0,3,0) rule here silently loses every tie. The
 * selectors below carry one class more than that, and no more: the button's fill and the base
 * typography are left to the kit's global variables, so the panel's own controls still govern them.
 *
 * The labels float. A label sitting above an empty box states the obvious twice; one that starts
 * inside the field and rises out of the way as you type says it once. The real placeholder —
 * "E.g. John" — stays invisible until the field has focus, which is the only moment an example is
 * any use to anybody.
 */

.nosteo-formcard {
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--nosteo-white);
  border: 1px solid var(--nosteo-hair-soft);
  border-radius: 18px;
  /* Two shadows: a tight one to seat the card, a wide soft one to lift it off the page. */
  box-shadow: 0 1px 2px rgba(50, 62, 72, 0.05), 0 26px 60px -28px rgba(50, 62, 72, 0.30);
}

.nosteo-formcard .elementor-form .elementor-field-group { position: relative; }

/* ---- the floating label ---- */

.nosteo-formcard .elementor-form .elementor-field-group > label {
  position: absolute;
  top: 19px;
  left: 17px;
  z-index: 1;
  margin: 0;
  padding: 0;
  max-width: calc(100% - 34px);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--nosteo-font);
  font-size: 16px;
  font-weight: var(--nosteo-weight-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nosteo-grey);
  /* A caption for the box, not a target — the click belongs to the input underneath. */
  pointer-events: none;
  transform-origin: left top;
  transition: transform 200ms var(--nosteo-ease), color 200ms var(--nosteo-ease);
}

/* Focused, or holding a value. :focus-within covers the first; :has covers the second, because a
   filled field the visitor has moved on from must keep its label up out of the way. */
.nosteo-formcard .elementor-form .elementor-field-group:focus-within > label,
.nosteo-formcard .elementor-form .elementor-field-group:has(.elementor-field-textual:not(:placeholder-shown)) > label {
  transform: translateY(-11px) scale(0.68);
  color: var(--nosteo-muted);
}
.nosteo-formcard .elementor-form .elementor-field-group:focus-within > label { color: var(--nosteo-accent); }

/* Required is marked, quietly. Elementor's own asterisk is `color: red`, which on a four-field form
   reads as four errors before anybody has typed a character. */
.nosteo-formcard .elementor-form .elementor-mark-required .elementor-field-label::after {
  color: var(--nosteo-accent);
  padding-inline-start: 0.25em;
}

/* ---- the fields ---- */

.nosteo-formcard .elementor-form .elementor-field-group .elementor-field-textual {
  width: 100%;
  padding: 26px 16px 9px;
  border: 1px solid var(--nosteo-hair);
  border-radius: 12px;
  background: var(--nosteo-white);
  font-family: var(--nosteo-font);
  font-size: 16px;
  font-weight: var(--nosteo-weight-medium);
  line-height: 1.4;
  color: var(--nosteo-ink);
  box-shadow: none;
  transition: border-color 180ms var(--nosteo-ease), box-shadow 180ms var(--nosteo-ease);
}

.nosteo-formcard .elementor-form .elementor-field-group textarea.elementor-field-textual {
  padding-top: 30px;
  min-height: 148px;
  resize: vertical;
}

.nosteo-formcard .elementor-form .elementor-field-group .elementor-field-textual:focus {
  border-color: var(--nosteo-accent);
  /* A ring rather than a thicker border: nothing reflows, and it reads as a glow, not a jolt. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nosteo-accent) 18%, transparent);
  outline: none;
}

/* The example appears only once you are in the field. At rest the floating label occupies that
   space, and showing both would be two pieces of grey text on top of one another. */
.nosteo-formcard .elementor-form .elementor-field-group .elementor-field-textual::placeholder {
  color: transparent;
  opacity: 1;
  transition: color 180ms var(--nosteo-ease);
}
.nosteo-formcard .elementor-form .elementor-field-group:focus-within .elementor-field-textual::placeholder {
  color: var(--nosteo-grey);
}

/* ---- the button ---- */

.nosteo-formcard .elementor-form .elementor-field-type-submit { margin-top: 6px; }

.nosteo-formcard .elementor-form .elementor-button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border: 0;
  border-radius: var(--nosteo-cta-radius, 999px);
  font-family: var(--nosteo-font);
  font-size: 16px;
  font-weight: var(--nosteo-weight-strong);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 200ms var(--nosteo-ease), box-shadow 200ms var(--nosteo-ease);
}

/* The fill is deliberately not set here. It resolves through --e-global-color-accent, which the kit
   now points at the brand orange — so the Style tab's colour control still governs it. */

.nosteo-formcard .elementor-form .elementor-button[type="submit"] .elementor-button-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* An arrow drawn as a mask, so it takes the button's own colour and stays crisp at any size. */
.nosteo-formcard .elementor-form .elementor-button[type="submit"] .elementor-button-text::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--nosteo-arrow-right) center / contain no-repeat;
  mask: var(--nosteo-arrow-right) center / contain no-repeat;
  transition: transform 200ms var(--nosteo-ease);
}

.nosteo-formcard .elementor-form .elementor-button[type="submit"]:hover,
.nosteo-formcard .elementor-form .elementor-button[type="submit"]:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--nosteo-accent) 70%, transparent);
}
.nosteo-formcard .elementor-form .elementor-button[type="submit"]:hover .elementor-button-text::after {
  transform: translateX(4px);
}
.nosteo-formcard .elementor-form .elementor-button[type="submit"]:active { transform: translateY(0); }

/* ---- messages ---- */

.nosteo-formcard .elementor-form .elementor-message {
  margin-top: 16px;
  font-family: var(--nosteo-font);
  font-size: 15px;
  line-height: 1.5;
}
.nosteo-formcard .elementor-form .elementor-message.elementor-message-success { color: var(--nosteo-resolve); }
.nosteo-formcard .elementor-form .elementor-message.elementor-message-danger { color: var(--nosteo-signal); }
.nosteo-formcard .elementor-form .elementor-field-group.elementor-error .elementor-field-textual { border-color: var(--nosteo-signal); }

/* ---- without :has() ----
 * Safari before 15.4, Firefox before 121. There a filled field cannot be detected, so a label left
 * floating would sit on top of the value. Labels go back above the field and the placeholder shows
 * from the start — plainer, and never wrong. */
@supports not selector(:has(*)) {
  .nosteo-formcard .elementor-form .elementor-field-group > label {
    position: static;
    transform: none;
    max-width: none;
    margin-bottom: 7px;
    font-size: 13px;
    color: var(--nosteo-muted);
  }
  .nosteo-formcard .elementor-form .elementor-field-group .elementor-field-textual { padding: 14px 16px; }
  .nosteo-formcard .elementor-form .elementor-field-group textarea.elementor-field-textual { padding-top: 14px; }
  .nosteo-formcard .elementor-form .elementor-field-group .elementor-field-textual::placeholder { color: var(--nosteo-grey); }
}

@media (prefers-reduced-motion: reduce) {
  .nosteo-contact__value--link,
  .nosteo-contact__network,
  .nosteo-map__link,
  .nosteo-formcard .elementor-form .elementor-field-group > label,
  .nosteo-formcard .elementor-form .elementor-field-group .elementor-field-textual,
  .nosteo-formcard .elementor-form .elementor-button[type="submit"],
  .nosteo-formcard .elementor-form .elementor-button[type="submit"] .elementor-button-text::after { transition: none; }
}