/* Janstay Freight — site-specific overrides and interactive states.
   Complements assets/css/ds-styles.css (design system). */

html { scroll-behavior: smooth; }
body { margin: 0; background: #f2f2f3; overflow-x: hidden; }
a { color: #16326B; text-decoration: none; }
a:hover { color: #E1232A; }
::selection { background: #16326B; color: #fff; }
img { max-width: 100%; }
.r-burger { display: none; }

@media (max-width: 1100px) {
  .r-navlinks { display: none !important; }
  .r-burger { display: inline-flex !important; }
}
@media (max-width: 1000px) {
  .r2 { grid-template-columns: 1fr !important; gap: 44px !important; }
  .r3 { grid-template-columns: repeat(2, 1fr) !important; }
  .r4 { grid-template-columns: repeat(2, 1fr) !important; }
  .r5 { grid-template-columns: repeat(3, 1fr) !important; }
  .rfoot { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
  .r-sticky { position: static !important; }
  .r-careersimg { width: 100% !important; opacity: 0.2 !important; }
}
@media (max-width: 640px) {
  .r3, .r5, .r3s, .rfoot, .r2s { grid-template-columns: 1fr !important; }
  .r4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Grid and flex items default to min-width:auto, which refuses to shrink below
   their content's min-content width. On a 320px screen the four-option mode
   selector and the longer email addresses then push the whole page wider than
   the viewport, producing horizontal scroll. */
.r2 > *, .r2s > *, .r3 > *, .r3s > *, .r4 > *, .r5 > *, .rfoot > * {
  min-width: 0;
}

/* Long unbroken strings — declarations@janstayfreight.com and friends —
   must wrap rather than force their column wider. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  /* Let the segmented mode selector wrap onto a second line instead of
     setting a min-content floor wider than the phone. */
  .seg { flex-wrap: wrap; }
  .janstay-cf7 .seg .wpcf7-radio { flex-wrap: wrap; }
}

/* --- Mode selector (contact form) ------------------------------- */
.seg-opt.on {
  background: #16326B; color: #fff; border: 0;
  padding: 9px 16px; font-family: "Barlow Condensed", sans-serif;
  font-size: 15px; letter-spacing: 0.06em; cursor: pointer;
}
.seg-opt.off {
  background: transparent; color: #1d1f20; border: 0;
  padding: 9px 16px; font-family: "Barlow Condensed", sans-serif;
  font-size: 15px; letter-spacing: 0.06em; cursor: pointer;
}

/* --- Collapsible content (mobile menu, FAQ, extra emails) -------- */
.s-hidden { display: none !important; }

/* FAQ answers are present in the DOM but collapsed until opened. */
.faq-answer { display: none; }
.faq-answer.open { display: block; }

/* --- style-hover shim ------------------------------------------- */
/* The original site applies "style-hover" inline hover styles (a
   builder attribute). main.js converts it to mouseenter/mouseleave.
   A .has-hover marker exists so rules below can complement it if needed.
   The button hover worked via the element's style-hover attribute only. */

/* Accordion mark animation is identical to the builder render. */
.faq-mark { color: #E1232A; font-size: 16px; width: 16px; flex: none; }

/* --- Contact Form 7 integration --------------------------------- */
/* CF7 wraps every field in <span class="wpcf7-form-control-wrap">, which
   would otherwise become an extra box inside the .field flex columns and
   the .r2s grids. display:contents removes it from layout entirely. */
.janstay-cf7 .wpcf7-form-control-wrap { display: contents; }

.janstay-cf7 .wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
/* Belt and braces: autop is disabled in functions.php, but if a future form
   re-enables it, its <p> margins must not fight the container's gap. */
.janstay-cf7 .wpcf7-form > p { margin: 0; }
.janstay-cf7-track .wpcf7-form {
  flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}

/* Inputs inherit the design-system .input class; only the background needs
   restating because the original markup set it inline. */
.janstay-cf7 .input { background: #f2f2f3; }
.janstay-cf7 textarea.input { resize: vertical; font-family: inherit; }

/* Submit buttons: match the inline styles the original buttons carried. */
.janstay-cf7-quote input[type="submit"] {
  background: #E1232A; border-color: #E1232A; color: #fff;
  font-size: 16px; letter-spacing: 0.08em; padding: 14px 26px; margin-top: 6px;
  cursor: pointer;
}
.janstay-cf7-quote input[type="submit"]:hover {
  background: #c31a21; border-color: #c31a21;
}
.janstay-cf7-track input[type="submit"] {
  background: #16326B; border-color: #16326B; color: #fff;
  font-size: 16px; letter-spacing: 0.08em; padding: 13px 24px;
  white-space: nowrap; cursor: pointer;
}
.janstay-cf7-track input[type="submit"]:hover {
  background: #0d1c3f; border-color: #0d1c3f;
}
.janstay-cf7-careers input[type="submit"] {
  background: #E1232A; border-color: #E1232A; color: #fff;
  font-size: 16px; letter-spacing: 0.08em; padding: 14px 26px; margin-top: 6px;
  align-self: flex-start; white-space: nowrap; cursor: pointer;
}
.janstay-cf7-careers input[type="submit"]:hover {
  background: #c31a21; border-color: #c31a21;
}

/* The careers form sits on the dark blue band, so the file input — which the
   design system's .input class does not cover — needs its own light treatment,
   and CF7's validation tips need a colour that reads against #16326B. */
.janstay-cf7-careers input[type="file"] {
  background: #f2f2f3; border: 1px solid rgba(29, 31, 32, 0.16);
  padding: 11px 12px; font-size: 15px; width: 100%; min-width: 0;
  color: #1d1f20; cursor: pointer;
}
.janstay-cf7-careers input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 14px; border: 0; cursor: pointer;
  background: #16326B; color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.janstay-cf7-careers .wpcf7-not-valid-tip { color: #ff8a8f; }
.janstay-cf7-careers .wpcf7-response-output { color: #e6ebf5; }

/* Mode selector. CF7 renders radios as
     .wpcf7-form-control-wrap > .wpcf7-radio > .wpcf7-list-item > label >
       input[type=radio] + .wpcf7-list-item-label
   which the design system's .seg-opt rules do not match, so the segmented
   look is rebuilt here. The real input stays focusable for keyboard users. */
.janstay-cf7 .seg .wpcf7-radio { display: inline-flex; }
.janstay-cf7 .seg .wpcf7-list-item { margin: 0; display: inline-flex; }
.janstay-cf7 .seg .wpcf7-list-item + .wpcf7-list-item {
  border-left: 1px solid rgba(29, 31, 32, 0.16);
}
.janstay-cf7 .seg .wpcf7-list-item label { display: inline-flex; margin: 0; }
.janstay-cf7 .seg .wpcf7-list-item-label {
  display: inline-block; padding: 9px 16px; cursor: pointer;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px; letter-spacing: 0.06em;
  background: transparent; color: #1d1f20;
  transition: background 0.12s ease, color 0.12s ease;
}
.janstay-cf7 .seg input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.janstay-cf7 .seg input[type="radio"]:checked + .wpcf7-list-item-label {
  background: #16326B; color: #fff;
}
.janstay-cf7 .seg input[type="radio"]:not(:checked) + .wpcf7-list-item-label:hover {
  background: rgba(29, 31, 32, 0.07);
}
.janstay-cf7 .seg input[type="radio"]:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid #E1232A; outline-offset: -2px;
}

/* Validation and response messages in the site palette. */
.janstay-cf7 .wpcf7-not-valid-tip {
  color: #E1232A; font-size: 12.5px; letter-spacing: 0.04em; margin-top: 4px;
}
.janstay-cf7 .wpcf7-response-output {
  margin: 16px 0 0; padding: 12px 14px; font-size: 14.5px;
  border: 1px solid rgba(29, 31, 32, 0.28); background: #f2f2f3;
}
.janstay-cf7 form.invalid .wpcf7-response-output,
.janstay-cf7 form.unaccepted .wpcf7-response-output { border-color: #E1232A; }
.janstay-cf7 form.sent .wpcf7-response-output { border-color: #16326B; }

/* The honeypot field must never be visible or focusable. */
.janstay-cf7 .wpcf7-honeypot-wrapper,
.janstay-cf7 input[name^="janstay-"][type="text"] {
  position: absolute !important; left: -9999px !important;
}