/* ==========================================================================
   Y2K Transport — WordPress-only additions.

   The prototype's stylesheets (y2k-brand.css and the legacy layers) transfer
   verbatim and are never edited. Anything WordPress introduces that the
   static site did not have — Contact Form 7 wrappers, pagination, editor
   output — is handled here, loaded last.
   ========================================================================== */

/* The reset the prototype relied on implicitly: [hidden] must always win. */
[hidden] { display: none !important; }

/* Menu labels are typed in normal case in wp-admin and shown as the prototype had them. */
.l-header .w-nav-title { text-transform: uppercase; }

/* ---------------------------- Contact Form 7 ----------------------------- */
.y2k-formcard .wpcf7 { margin: 0; }
.y2k-form .wpcf7-form-control-wrap { display: block; position: relative; }

.y2k-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: .84rem;
  font-weight: 600;
  color: #B3261E;
}
.y2k-form .y2k-input.wpcf7-not-valid,
.y2k-form .y2k-file.wpcf7-not-valid { border-color: #B3261E; }

.y2k-form .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }
.y2k-form.submitting .y2k-form-submit { opacity: .7; pointer-events: none; }

.wpcf7 form.y2k-form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1.5px solid #D7DCE2;
  border-radius: 8px;
  font-size: .95rem;
  color: var(--y2k-charcoal);
}
.wpcf7 form.y2k-form.sent .wpcf7-response-output {
  border-color: #1E7B45;
  background: #F1F8F4;
  color: #14532D;
  font-weight: 600;
}
.wpcf7 form.y2k-form.invalid .wpcf7-response-output,
.wpcf7 form.y2k-form.unaccepted .wpcf7-response-output,
.wpcf7 form.y2k-form.failed .wpcf7-response-output,
.wpcf7 form.y2k-form.aborted .wpcf7-response-output,
.wpcf7 form.y2k-form.spam .wpcf7-response-output {
  border-color: #B3261E;
  background: #FDF3F2;
  color: #7A1C16;
}
/* After a successful send the fields step aside and the confirmation stands alone. */
.wpcf7 form.y2k-form.is-sent > :not(.wpcf7-response-output):not(.screen-reader-response) { display: none; }
.wpcf7 form.y2k-form.is-sent .wpcf7-response-output { margin-top: 0; }

/* ------------------------------ pagination ------------------------------- */
.y2k-pagination { display: block; margin-top: 40px; }
.y2k-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.y2k-pagination .page-numbers {
  min-width: 44px;
  height: 44px;
  width: auto;
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid #D7DCE2;
  border-radius: var(--y2k-radius-pill);
  font-family: var(--h1-font-family);
  font-size: .92rem;
  font-weight: 700;
  line-height: 41px;
  color: var(--y2k-blue);
  text-decoration: none;
}
.y2k-pagination a.page-numbers:hover { border-color: var(--y2k-orange); color: var(--y2k-orange); }
.y2k-pagination .page-numbers.current { background: var(--y2k-blue); border-color: var(--y2k-blue); color: #fff; }

/* ----------------------------- editor output ----------------------------- */
/* Images and captions dropped into a news article via the Classic Editor. */
.y2k-post-body img { max-width: 100%; height: auto; border-radius: var(--y2k-radius); }
.y2k-post-body .wp-caption { max-width: 100%; }
.y2k-post-body .wp-caption-text { margin-top: 8px; font-size: .88rem; color: var(--y2k-grey-mid); }
.y2k-post-body .alignleft { float: left; margin: 6px 24px 16px 0; }
.y2k-post-body .alignright { float: right; margin: 6px 0 16px 24px; }
.y2k-post-body .aligncenter { display: block; margin-inline: auto; }

/* Logged-in admin bar vs. the fixed header. */
.admin-bar .l-header.pos_fixed { top: 32px; }
@media (max-width: 782px) { .admin-bar .l-header.pos_fixed { top: 46px; } }
@media (max-width: 600px) { .admin-bar .l-header.pos_fixed.sticky { top: 0; } }

/* ==========================================================================
   Client review round 1 (pre-launch)
   ========================================================================== */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- contrast: small orange text and white-on-orange buttons ------------
   Brand orange (#E96F10) only reaches 3.1:1 against white. Large headings may
   keep it; anything at body size or smaller uses this darker tone (5.2:1 on
   white, 4.7:1 on the light-grey bands). */
:root { --y2k-orange-text: #B35000; }
.y2k-btn--primary,
.l-header .btn-primary.menu-btn { background: var(--y2k-orange-text); border-color: var(--y2k-orange-text); }
.y2k-btn--primary:hover,
.y2k-btn--primary:focus-visible { background: var(--y2k-blue); border-color: var(--y2k-blue); }
.y2k-textlink,
.y2k-eyebrow,
.y2k-news-tag,
.y2k-role-type,
.y2k-req,
.y2k-spec-cap { color: var(--y2k-orange-text); }
.y2k-shero-lede a, .y2k-section-lede a { color: var(--y2k-orange-text); }

/* ---- anchors land clear of the fixed header ------------------------------ */
#quote-form, #apply, [id^="role-"] { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- home hero: shorter stage -------------------------------------------- */
@media (max-width: 700px) {
  .y2k-hero-media .sp-mask,
  .y2k-hero-media .sp-slides-container,
  .y2k-hero-media .sp-slide,
  .y2k-hero-media .sp-image-container { height: min(var(--y2k-hero-h, 400px), 320px) !important; }
}

/* ---- slideshow pause / play control (home slider + page heroes) ---------- */
.y2k-slides-toggle {
  position: absolute;
  z-index: 5;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  background: rgba(21, 20, 95, .72);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--y2k-ease);
}
.y2k-slides-toggle:hover { background: var(--y2k-blue); }
.y2k-slides-toggle:focus-visible { outline: 3px solid var(--y2k-orange); outline-offset: 2px; }
.y2k-slides-toggle svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.y2k-slides-toggle .y2k-ico-play { display: none; fill: currentColor; stroke-width: 1.5; }
.y2k-slides-toggle[aria-pressed="true"] .y2k-ico-play { display: block; }
.y2k-slides-toggle[aria-pressed="true"] .y2k-ico-pause { display: none; }
/* home slider: sit above the overlapping headline card (96px, 64px below 1200) */
.y2k-hero-toggle { right: 20px; bottom: 112px; }
@media (max-width: 1199px) { .y2k-hero-toggle { bottom: 80px; } }

/* ---- page hero: whole photo, optional slideshow -------------------------- */
.y2k-shero-media--contain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px clamp(16px, 3vw, 44px) 36px 0;
}
.y2k-shero-media--contain img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
}
.y2k-slides-stage { position: relative; display: grid; width: 100%; height: 100%; }
.y2k-shero-media--contain .y2k-slides-stage { height: auto; max-height: 100%; }
.y2k-slides-stage .y2k-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .8s var(--y2k-ease);
}
.y2k-slides-stage .y2k-slide.is-active { opacity: 1; }
/* Only the first photo sizes the stage; the rest are laid over it. (A lazy
   image that has not loaded yet reports a placeholder height and would
   otherwise stretch the hero.) */
.y2k-slides-stage .y2k-slide:not(:first-child) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) { .y2k-slides-stage .y2k-slide { transition: none; } }

/* ---- page hero: wide graphic as a backdrop (freight brokerage map) -------
   The artwork is 12:5 with its left third left open for the headline. On
   desktop the whole graphic shows and the copy sits in that open area; on
   small screens the copy stacks above and the image is cropped to the map
   half so its labels stay readable. */
.y2k-shero--backdrop { background: #fff; }
.y2k-shero--backdrop .y2k-shero-media { inset: 0; width: 100%; }
.y2k-shero--backdrop .y2k-shero-media img { object-fit: cover; object-position: left bottom; }
.y2k-shero--backdrop .y2k-shero-grid { position: relative; z-index: 1; grid-template-columns: minmax(0, 36%) 1fr; aspect-ratio: 12 / 5; max-width: none; padding-inline: 5.6vw 0; }
.y2k-shero--backdrop .y2k-shero-copy { position: relative; z-index: 1; justify-content: flex-start; padding-block: clamp(34px, 4vw, 60px) 0; }
.y2k-shero--backdrop .y2k-shero-title { margin-bottom: 0; font-size: clamp(1.25rem, 2.25vw, 2.5rem); }
.y2k-shero--backdrop .y2k-eyebrow { font-size: clamp(.6rem, .78vw, .78rem); margin-bottom: .8em; }
.y2k-shero--backdrop .y2k-shero-lede { display: none; }
.y2k-shero--backdrop .y2k-hero-actions { margin-top: clamp(12px, 1.6vw, 28px); gap: 10px; }
@media (min-width: 1101px) and (max-width: 1500px) {
  .y2k-shero--backdrop .y2k-hero-actions .y2k-btn { padding: .62em 1.1em; font-size: .82rem; }
}
@media (max-width: 1100px) {
  .y2k-shero--backdrop { padding-block: 40px 0; }
  .y2k-shero--backdrop .y2k-shero-grid { display: block; aspect-ratio: auto; padding-inline: 24px; }
  .y2k-shero--backdrop .y2k-shero-copy { padding-block: 0 28px; }
  .y2k-shero--backdrop .y2k-shero-title { font-size: clamp(1.7rem, 5vw, 2.4rem); }
  .y2k-shero--backdrop .y2k-eyebrow { font-size: .78rem; }
  .y2k-shero--backdrop .y2k-shero-lede { display: block; margin-top: 16px; }
  .y2k-shero--backdrop .y2k-shero-media { position: static; width: 100%; }
  .y2k-shero--backdrop .y2k-shero-media img { height: auto; aspect-ratio: 1190 / 800; object-position: right center; border-radius: 0; }
}

/* ---- footer logo ----------------------------------------------------------
   The supplied full-colour logo has a navy "Y2K" that disappears against the
   navy footer, so it sits on a white plate. */
.y2k-footer .y2k-footer-logo {
  display: inline-block;
  max-width: 250px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
}

/* ---- service cards: uncropped graphic (maps) ----------------------------- */
.y2k-svc-media--contain { background: #fff; }
.y2k-svc-media--contain img { object-fit: contain; }

/* ---- Trusted By: full colour, linked, evenly weighted --------------------- */
.y2k-marquee-track img { filter: none; opacity: 1; max-width: none; }
.y2k-marquee-track a { display: block; border-radius: 6px; transition: transform .2s var(--y2k-ease); }
.y2k-marquee-track a:hover { transform: scale(1.05); }
.y2k-marquee-track a:focus-visible { outline: 3px solid var(--y2k-orange); outline-offset: 6px; }
/* Pause only while the pointer is over the strip or a logo has KEYBOARD focus.
   The brand layer pauses on any :focus-within, which left the strip stuck after
   a visitor clicked a logo (focus stays on the link while the company site opens
   in a new tab) and came back. */
.y2k-marquee:focus-within .y2k-marquee-track { animation-play-state: running; }
.y2k-marquee:hover .y2k-marquee-track,
.y2k-marquee:has(:focus-visible) .y2k-marquee-track,
.y2k-marquee.is-paused .y2k-marquee-track { animation-play-state: paused; }

/* ---- gallery: link from each category to its service ---------------------- */
.y2k-gallery-link { margin: -6px 0 18px; }

/* ---- header: Services dropdown -------------------------------------------- */
.l-header .w-nav.type_desktop .w-nav-list.level_2 {
  min-width: 250px;
  padding: 8px 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--y2k-shadow-md);
}
.l-header .w-nav .w-nav-anchor.level_2 {
  font-family: var(--h1-font-family);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--y2k-blue);
}
.l-header .w-nav.type_desktop .w-nav-anchor.level_2 { padding: 10px 20px; }
.l-header .w-nav.type_desktop .w-nav-item.level_2:hover > .w-nav-anchor,
.l-header .w-nav.type_desktop .w-nav-anchor.level_2:focus-visible { background: var(--y2k-grey-light); color: var(--y2k-orange-text); }
.l-header .w-nav-list.level_2 .w-nav-title { text-transform: none; }

/* ---- contrast, continued: selectors the brand layer sets with more weight -- */
.y2k-form .y2k-btn.y2k-form-submit,
.y2k-form button.y2k-btn { background: var(--y2k-orange-text); border-color: var(--y2k-orange-text); }
.y2k-form .y2k-btn.y2k-form-submit:hover,
.y2k-form button.y2k-btn:hover { background: var(--y2k-blue); border-color: var(--y2k-blue); }
.l-main .y2k-section-lede a,
.l-main .y2k-shero-lede a,
.l-main .y2k-callout a:not(.y2k-btn) { color: var(--y2k-orange-text); }

/* ---- small screens --------------------------------------------------------- */
@media (max-width: 900px) {
  /* stacked hero: the contained photo sits flush with the copy column */
  .y2k-shero-media--contain { padding: 0; }
  .y2k-shero-media--contain img { aspect-ratio: auto; }
}
@media (max-width: 600px) {
  /* the social icons overlapped the logo on phones — they repeat in the footer */
  .l-header .l-subheader-cell.at_right > .w-socials { display: none; }
}

/* ---- contact form: persistent guidance above the message field ------------ */
.y2k-field-hint { margin: -2px 0 9px; font-size: .88rem; line-height: 1.5; color: #4A5158; }
.y2k-form-welcome { margin: 0 0 20px; font-size: .95rem; font-weight: 600; color: var(--y2k-blue); }