/* ===========================================================================
   Covara — "Sign in" + "Request access"
   ---------------------------------------------------------------------------
   Two things live here:

     1. The header. Elementor generated a 205-220px slot for a single button
        ("Schedule Demo"); two actions do not fit it, so the slot is sized by
        its content instead and the header pill is given a little more width.
     2. The /request-access/ form, which has no Elementor equivalent — the site
        had no form at all — so it is written as ordinary CSS against the kit's
        own custom properties (--Orange-*) and fonts.

   Loaded from src/layouts/Base.astro AFTER the captured <head>, so it wins on
   cascade order against the generated Elementor rules at equal specificity.
   Deliberately kept out of public/assets/wp-content/, which tools/4 rewrites.
   =========================================================================== */

/* ============================================================ 1. THE HEADER */

@media (min-width: 768px) {
  /* The pill keeps the 850px footprint it has always had. It is `position:
     fixed` with no left/right, so its width is shrink-to-fit: without an
     explicit width it would now collapse to the logo plus the actions — around
     550px — and the floating bar would visibly shrink. `space-between` then
     puts the logo left and the actions right. */
  .elementor .e-df3d606-8f1cb8d {
    width: min(850px, calc(100vw - 40px));
    max-width: min(850px, calc(100vw - 40px));
    column-gap: 14px;
  }

  /* The right-hand group: exactly as wide as the two actions and the language
     switcher need, instead of the 205/220px it was pinned to.
     `width: max-content` is doing real work — it is not decoration. Elementor
     gave this element `flex: 1 0` (grow, basis 0), so with only `flex: 0 0 auto`
     its auto width still resolved against the line rather than its contents: it
     took the whole pill and squeezed the logo to zero. Stating the width as
     max-content removes the ambiguity. */
  .elementor .e-61972ca-3848f05 {
    min-width: 0;
    max-width: none;
    width: max-content;
    flex: 0 0 auto;
    gap: 8px;
  }
}

/* The language switcher never had a width of its own — it fitted whatever the
   205/220px cap left over. With the cap gone, its flex base size falls back to
   its own max-content, which is 341px, because WPML's own stylesheet sizes it
   `width: 15.5em` with `max-width: 100%` and a percentage max-width does not
   constrain intrinsic sizing. Pin it to the 61px it actually rendered at. */
.elementor .e-61972ca-3848f05 > .elementor-widget-wpml-language-switcher {
  flex: 0 0 61px;
}


/* --- The two actions ----------------------------------------------------- */

/* Request access — the primary action, inheriting the outgoing button's look
   (Orange-500 pill, white 16px/500 Work Sans, 41px radius). */
.elementor a.covara-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: #ffffff;
  text-decoration: none;
  padding: 8px 18px;
  border: 0;
  border-radius: 41px;
  background-color: var(--Orange-500, #ED7E66);
  transition: background-color 150ms ease;
}
.elementor a.covara-btn-primary:hover,
.elementor a.covara-btn-primary:focus-visible {
  color: #ffffff;
  background-color: var(--Orange-600, #CA5F54);
}

/* Sign in — secondary, and text rather than a second pill: two filled pills
   side by side compete with each other and crowd an 850px header. */
.elementor a.covara-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: #000000;
  text-decoration: none;
  padding: 8px 10px;
  border: 0;
  border-radius: 41px;
  background-color: transparent;
  transition: color 150ms ease;
}
.elementor a.covara-btn-secondary:hover,
.elementor a.covara-btn-secondary:focus-visible {
  color: var(--Orange-700, #BC574C);
  background-color: transparent;
}

/* --- Mobile -------------------------------------------------------------- */

/* Below 768px the pill spans the viewport and wraps. `display: contents`
   promotes the three right-hand items to direct flex children of the header, so
   flexbox wraps them individually rather than stacking the whole group as one
   block wider than the phone. The order puts the logo and the two actions
   first, so they share the top line where they fit, with the language switcher
   following. Which items land on which line is left to flexbox rather than
   forced, so nothing can overflow the viewport at any width.
   `display: contents` is safe here because no header element appears in
   interactions.json — none carries the `opacity: 0` entrance state that it
   would discard. */
@media (max-width: 767px) {
  /* Same reason as the desktop width above: a shrink-to-fit pill would no
     longer reach the edges on a wider phone. */
  .elementor .e-df3d606-8f1cb8d {
    width: calc(100vw - 20px);
  }
  .elementor .e-61972ca-3848f05 {
    display: contents;
  }
  /* Elementor's `space-between` spreads each wrapped line to both edges, which
     put "Sign in" hard right on one line and the pill hard left on the next.
     Pack every line to the right instead and hold the logo on the left with an
     auto margin, so the controls read as one right-hand cluster however they
     wrap. */
  .elementor .e-df3d606-8f1cb8d {
    justify-content: flex-end;
    row-gap: 6px;
    column-gap: 6px;
  }
  /* The logo box is capped at 110px while the two logo images add up to 128px,
     so they always overflowed it. That was invisible while the next item sat
     95px away in its own 205px slot; with "Sign in" now immediately after it,
     the wordmark ran straight into the text. Let the box be its contents. */
  .elementor .e-3c39a25-876672d {
    order: 1;
    max-width: max-content;
    margin-right: auto;
  }
  /* 14px rather than the desktop 16px, padded to keep a ~34px tap target —
     close to the 37px of the single button it replaces. On a 390px phone this
     keeps both English actions on the logo's line; the longer German and French
     labels move the pill down beside the language switcher, which is why every
     line is right-packed above. Verified from 320px up, not assumed. */
  .elementor a.covara-btn-secondary {
    order: 2;
    font-size: 14px;
    padding: 8px 8px;
  }
  .elementor a.covara-btn-primary {
    order: 3;
    font-size: 14px;
    padding: 8px 14px;
  }
  .elementor .elementor-element-b6b514c { order: 4; }
}

/* ================================================== 2. THE REQUEST-ACCESS PAGE */

/* The header is `position: fixed`: 20px from the top and 57px tall on a
   desktop, but taller on a phone, where the pill wraps to two lines. This
   padding is what keeps it clear of the heading; the mobile value is measured
   against the tallest wrap rather than guessed, and the template's warning
   about keeping the offset above ~100px applies. */
.covara-ra-main {
  padding: 120px 0 90px;
}
@media (max-width: 767px) {
  .covara-ra-main {
    padding: 140px 0 60px;
  }
}

.covara-ra {
  --ra-ink: #333333;
  --ra-muted: #6b6b6b;
  --ra-line: #e2e2e2;
  --ra-accent: var(--Orange-500, #ED7E66);
  max-width: 720px;
  margin-inline: auto;
  font-family: 'Work Sans', sans-serif;
  color: var(--ra-ink);
}

/* Back to the homepage. Mirrors the "Back" affordance on the page this
   replaces, and is the only way out: the header carries no navigation, just the
   two actions and the language switcher. */
.covara-ra__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ra-muted);
  text-decoration: none;
  transition: color 150ms ease;
}
.covara-ra__back:hover,
.covara-ra__back:focus-visible { color: var(--ra-accent); }
.covara-ra__back svg { flex: 0 0 auto; }

.covara-ra__title {
  margin: 0 0 12px;
  font-family: Anton, sans-serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ra-ink);
}
.covara-ra__lead {
  margin: 0 0 36px;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ra-muted);
}

.covara-ra__card {
  padding: 32px;
  border: 1px solid var(--ra-line);
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}

.covara-ra__row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.covara-ra__row > .covara-ra__field { flex: 1 1 200px; }

.covara-ra__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.covara-ra__field > label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ra-ink);
}
.covara-ra__req { color: var(--ra-accent); }

.covara-ra__field input,
.covara-ra__field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ra-ink);
  background-color: #ffffff;
  border: 1px solid var(--ra-line);
  border-radius: 8px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.covara-ra__field textarea {
  min-height: 110px;
  resize: vertical;
}
.covara-ra__field input:focus,
.covara-ra__field textarea:focus {
  outline: none;
  border-color: var(--ra-accent);
  box-shadow: 0 0 0 3px rgba(237, 126, 102, 0.25);
}
.covara-ra__field input[aria-invalid='true'],
.covara-ra__field textarea[aria-invalid='true'] {
  border-color: #c0392b;
}

/* Per-field validation message. Hidden until the field is actually invalid,
   so the form does not reserve empty space for messages nobody will see. */
.covara-ra__error {
  font-size: 13px;
  line-height: 1.3;
  color: #c0392b;
}
.covara-ra__error:empty { display: none; }

.covara-ra__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  margin-top: 4px;
  padding: 12px 26px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: #ffffff;
  background-color: var(--ra-accent);
  border: 0;
  border-radius: 41px;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.covara-ra__submit:hover:not(:disabled),
.covara-ra__submit:focus-visible:not(:disabled) {
  background-color: var(--Orange-600, #CA5F54);
}
.covara-ra__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Form-level outcome. Both states are inert until the submit handler sets
   data-state, so a visitor with JS disabled sees the plain form and gets the
   browser's own required-field validation on submit. */
.covara-ra__status {
  margin-top: 20px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.45;
  border-radius: 8px;
}
.covara-ra__status[hidden] { display: none; }
.covara-ra__status[data-state='ok'] {
  color: #1d5c3f;
  background-color: rgba(171, 246, 201, 0.35);
  border: 1px solid #ABF6C9;
}
.covara-ra__status[data-state='error'] {
  color: #8e2b1f;
  background-color: rgba(237, 126, 102, 0.12);
  border: 1px solid var(--Orange-200, #FFAD9B);
}

/* The success panel replaces the form outright: leaving a filled-in form on
   screen after a successful send invites a second submission. */
.covara-ra__done {
  padding: 40px 32px;
  text-align: center;
  border: 1px solid #ABF6C9;
  border-radius: 12px;
  background-color: rgba(171, 246, 201, 0.18);
}
.covara-ra__done h2 {
  margin: 0 0 10px;
  font-family: Anton, sans-serif;
  font-size: 28px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ra-ink);
}
.covara-ra__done p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ra-muted);
}

@media (max-width: 767px) {
  .covara-ra__title { font-size: 40px; }
  .covara-ra__lead { font-size: 16px; margin-bottom: 28px; }
  .covara-ra__card { padding: 22px 18px; }
  .covara-ra__row { gap: 0; }
  .covara-ra__row > .covara-ra__field { flex: 1 1 100%; }
  .covara-ra__submit { width: 100%; }
}