/* ===========================================================================
   EverOn — Layout & responsive behaviour
   ---------------------------------------------------------------------------
   The section markup carries inline `style="..."` attributes inherited from
   the original design export, and those describe the DESKTOP layout only.
   This file is what makes the site work on tablets and phones.

   Because inline styles beat stylesheet rules, the overrides here need
   `!important`. That is deliberate and is the reason this file loads LAST.

   The hooks:
     .split       a two-column grid -> one column below 900px
     .split-flip  same, but the image sits first in the source order and
                  should drop BELOW the copy on mobile
     .quad        a four-column strip -> two columns, then one
   =========================================================================== */

@media (max-width: 900px) {

  /* Two-column sections stack. */
  .split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Keep the copy above the photo when the source order puts the photo first. */
  .split-flip > *:first-child { order: 2; }
  .split-flip > *:last-child  { order: 1; }

  /* Section gutters and vertical rhythm shrink. */
  section[id],
  main > section {
    padding-left: var(--sp-gutter) !important;
    padding-right: var(--sp-gutter) !important;
  }

  /* Fixed pixel heights on media panels become aspect-driven. */
  .split > div[style*="height:600px"],
  .split > div[style*="height:560px"],
  .split > div[style*="height: 600px"],
  .split > div[style*="height: 560px"] {
    height: auto !important;
    aspect-ratio: 4 / 3;
  }

  /* The 210px headcount figure is far too large for a phone. */
  #b-team div[style*="font-size:210px"] {
    font-size: 96px !important;
    margin-top: 0 !important;
  }

  .quad { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 560px) {
  .quad { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------------------
   Hero: the inline margins are tuned for a wide viewport.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #b-hero > div[style*="margin:0 56px 0 68px"] {
    margin-left: var(--sp-gutter) !important;
    margin-right: var(--sp-gutter) !important;
  }

  /* v2 sizes the hero copy against the VIEWPORT so it can sit beside the
     decorative mark on a wide screen: the headline is capped at 46vw and the
     lede at 44vw. The mark is hidden below 900px, so those caps have nothing
     left to avoid — and on a 430px phone 46vw is 198px, which would set the
     headline in a column two or three words wide. Full width here. */
  #b-hero .hero-h1 {
    max-width: none !important;
    font-size: clamp(38px, 11vw, 64px) !important;
    line-height: 1.02 !important;
  }
  #b-hero .hero-lede {
    max-width: none !important;
    font-size: 16px !important;
  }
  #b-hero .hero-eyebrow {
    white-space: normal !important;
    letter-spacing: .18em !important;
    font-size: 11px !important;
  }
}

/* ---------------------------------------------------------------------------
   Blog + article pages
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #page-article header { padding-left: var(--sp-gutter) !important; padding-right: var(--sp-gutter) !important; }
  .article-body { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Wide media inside a post must never push the page sideways. */
.wp-content table,
.wp-content pre { max-width: 100%; overflow-x: auto; display: block; }

/* ---------------------------------------------------------------------------
   Contact section
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .contact-h2 { font-size: 44px !important; }
  #contact-form { grid-template-columns: 1fr !important; }
  #contact-form label[style*="span 2"],
  #contact-form button[style*="span 2"],
  #contact-form div[style*="span 2"],
  #contact-form p[style*="span 2"] { grid-column: span 1 !important; }
}

/* Form field focus and placeholder states — the export had none. */
#contact-form input:focus,
#contact-form textarea:focus {
  outline: 2px solid var(--c-white);
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.2) !important;
}
#contact-form input:invalid:not(:placeholder-shown),
#contact-form textarea:invalid:not(:placeholder-shown) {
  border-color: var(--c-orange-bright) !important;
}
#contact-form button[type="submit"] { transition: background .25s ease; }
#contact-form button[type="submit"]:hover { background: var(--c-orange-light) !important; }
#contact-form button[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* Keyboard focus must be visible everywhere, not just in the form. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Contact form honeypot
   Must be present in the DOM and invisible to people. Never `display:none` —
   many bots skip hidden inputs, which is exactly the ones we want to catch.
   The field name must match antispam.honeypot_field in forms/config.php.
   --------------------------------------------------------------------------- */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}