/* ReadyForce rebrand (#718). Shared by the Begley and Ready Machinery sites; TEMPORARY.
   Everything is scoped under .rf-* so it cannot restyle the host theme.
   Tokens are readyforceind.com's (globals.css): Ready Red #e10d18, red-ink #cc0c16 (the
   hover colour on light surfaces), ink #111822, ease-brand, Neue Haas Grotesk Text. */

:root {
  --rf-ink: #111822;
  --rf-red: #e10d18;
  --rf-red-ink: #cc0c16;
  --rf-red-light: #f5333d;
  --rf-paper: #ffffff;
  --rf-muted: #4b5563;
  --rf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --rf-font: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Badge: "Now  ReadyForce", beside the legacy logo ────────────────────────────────── */

.rf-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 28px;
  font-family: var(--rf-font);
  text-decoration: none !important;
  line-height: 1;
  vertical-align: middle;
  flex: 0 0 auto;
}
.rf-badge__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--rf-ink);
  white-space: nowrap;
}
.rf-badge--light .rf-badge__label { color: #fff; }
.rf-badge__logo {
  display: block;
  width: 180px !important;
  max-width: none !important;
  height: auto !important;
}
.rf-badge:focus-visible { outline: 2px solid var(--rf-red); outline-offset: 4px; }

/* Begley (Divi): the logo wrap is a flex row; keep the pair together and on the left.
   The Begley logo gives up a little height so the ReadyForce logo can be bigger (Serj). */
.et_pb_menu__logo-wrap { flex-direction: row !important; align-items: center; }
/* "Now" sits in the middle, 16px from each logo (Serj). Divi puts a 30px margin after its
   logo, so that goes, and the badge carries the whole gap. */
.et_pb_menu__logo-wrap > .rf-badge { margin-left: 16px; margin-right: 16px; gap: 16px; }
.et_pb_menu__logo-wrap > .et_pb_menu__logo { margin-right: 0 !important; }
.et_pb_menu__logo-wrap .rf-badge__logo { width: 180px !important; }
.et_pb_menu__logo-wrap > .et_pb_menu__logo { flex: 0 0 auto; }
.et_pb_menu__logo img[src*="BEGLEY-LOGO-TOP-MENU"] { height: 60px !important; max-height: none !important; width: auto !important; max-width: none !important; }

/* The menu links already fill the row (862px of 1152); the badge needs ~75px, taken
   from the 40px gap the theme puts after each link. Desktop only. */
@media (min-width: 981px) {
  /* Matches the site's own rule, .main-menu-c … nav>ul>li { padding-right: 40px !important } */
  .main-menu-c:has(.rf-badge) .et_pb_menu__wrap .et_pb_menu__menu nav > ul > li { padding-right: 26px !important; }
}

/* Begley footer: both logos on one line (Serj). The pair needs ~330px, and Divi's footer
   column is narrower than that from 981px to ~1600px wide, so the logo ran past the black
   column (Shan). The module fills its column and is a size container: under 300px the badge
   drops below the Begley logo, and the RF logo shrinks rather than overflow. */
/* The spacing is the row's own gap, not margins, so it also holds where container queries
   are unsupported (older iOS Safari): there the badge wraps by itself and touched the Begley
   logo (Melissa, #718 note 1114414). */
.et_pb_image_0_tb_footer:has(.rf-badge) { display: flex; align-items: center; gap: 16px; width: 100% !important; max-width: 100% !important; container: rf-foot / inline-size; }
.et_pb_image_0_tb_footer:has(.rf-badge) .et_pb_image_wrap { flex: 0 0 auto; }
.et_pb_image_0_tb_footer:has(.rf-badge) .et_pb_image_wrap img { width: 110px !important; max-width: 110px !important; height: auto !important; }
.et_pb_image_0_tb_footer .rf-badge { flex: 0 1 auto; min-width: 0; margin: 0; gap: 8px; }
.et_pb_image_0_tb_footer .rf-badge__logo { flex: 0 1 160px; min-width: 0; width: 160px !important; max-width: 100% !important; }
@container rf-foot (max-width: 299px) {
  .et_pb_image_0_tb_footer .rf-badge { flex-basis: 100%; }
}
.et_pb_image_0_tb_footer:has(.rf-badge) { flex-wrap: wrap; }

/* Ready Machinery (Genesis): the title area is a block; lay the logo and badge in a row. */
.title-area { display: flex; align-items: center; width: auto !important; max-width: none !important; }
.title-area .custom-logo-link { flex: 0 0 125px; width: 125px; }
.title-area .custom-logo-link img { width: 100%; height: auto; }
/* Same RF logo size and "Now" spacing as Begley's header (Serj). */
.title-area > .rf-badge { margin-left: 16px; gap: 16px; }
.title-area .rf-badge__logo { width: 180px !important; }
/* The badge takes room from a header whose menu already fills the row: tighten the menu
   links a little so it stays on one line (Genesis only; its desktop menu starts at 1068px). */
@media (min-width: 1068px) {
  .site-header:has(.rf-badge) .nav-primary .genesis-nav-menu a { padding-left: 10px; padding-right: 10px; }
}

/* Ready Machinery footer: "<Ready logo> | Now ReadyForce", Melissa's mockup (Serj, #718). */
.rf-badge-pair { display: flex; align-items: center; margin: 0 0 32px; }
.rf-badge-pair__legacy { display: block; width: 130px; height: auto; }
.rf-badge-pair .rf-badge {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.rf-badge-pair .rf-badge__logo { width: 190px !important; }

/* Phones: shrink the legacy logo so the pair still fits on the left (Melissa, #718). */
@media (max-width: 980px) {
  .rf-badge { gap: 8px; margin-left: 16px; }
  .et_pb_menu__logo-wrap > .rf-badge, .title-area > .rf-badge { margin-left: 10px; gap: 10px; }
  .rf-badge__label { font-size: 14px; }
  .rf-badge__logo, .title-area .rf-badge__logo { width: 150px !important; }
  .et_pb_menu__logo img[src*="BEGLEY-LOGO-TOP-MENU"] { height: 48px !important; }
  .et_pb_menu__logo-wrap .rf-badge__logo { width: 150px !important; }
  .title-area .custom-logo-link { flex-basis: 88px; width: 88px; }
  .rf-badge-pair__legacy { width: 110px; }
  .rf-badge-pair .rf-badge { margin-left: 16px; padding-left: 16px; }
  .rf-badge-pair .rf-badge__logo { width: 160px !important; }
}
/* Small phones keep "Now" (Melissa, #718 note 1114414); the RF logo shrinks instead, so the
   pair still fits beside the menu button. */
@media (max-width: 400px) {
  .rf-badge__label { font-size: 13px; }
  .et_pb_menu__logo-wrap > .rf-badge, .title-area > .rf-badge { margin-left: 8px; gap: 8px; }
  .et_pb_menu__logo-wrap .rf-badge__logo, .title-area .rf-badge__logo { width: 130px !important; }
}
@media (max-width: 350px) {
  .et_pb_menu__logo-wrap .rf-badge__logo { width: 110px !important; }
  /* The Genesis header also holds the menu button on this row: both logos give a little more. */
  .title-area .custom-logo-link { flex-basis: 76px; width: 76px; }
  .title-area .rf-badge__logo { width: 100px !important; }
}

/* ── Pop-up ────────────────────────────────────────────────────────────────────────── */

.rf-modal[hidden] { display: none !important; }
.rf-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--rf-font);
  color: var(--rf-ink);
}
.rf-modal *, .rf-modal *::before, .rf-modal *::after { box-sizing: border-box; }
.rf-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 11, 16, 0.86); }
.rf-modal__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 672fr) minmax(0, 704fr);
  width: min(1376px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--rf-paper);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.rf-modal__dialog:focus { outline: none; }

/* Figma: a 32px X, 2px round stroke, 16px in from the panel's top-right corner. The button
   is 44px so the tap target is bigger than the glyph; 10px + (44 - 32) / 2 = 16px. */
.rf-modal__x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rf-ink);
  cursor: pointer;
  transition: color 250ms var(--rf-ease);
}
.rf-modal__x svg { display: block; width: 32px; height: 32px; }
/* Genesis paints every button:hover/:focus red with white text (Ready Machinery only), which
   gave the X a red box there. Pin the states so both sites match Begley: the glyph turns red. */
.rf-modal__x:hover, .rf-modal__x:focus, .rf-modal__x:active { background-color: transparent; border: 0; box-shadow: none; }
.rf-modal__x:focus, .rf-modal__x:active { color: var(--rf-ink); }
.rf-modal__x:hover { color: var(--rf-red); }
.rf-modal__x:focus-visible { outline: 2px solid var(--rf-red); }

/* Photo panel, stacked as in Figma: photo, a flat ink 70% overlay (::before), the outlined
   ReadyForce "R", then an ink gradient from clear at half height to 80% at the bottom
   (::after) that also darkens the lower part of the "R". */
.rf-modal__media {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 600px;
  padding: 80px;
  background-color: var(--rf-ink);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.rf-modal__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(17, 24, 34, 0.7);
}
.rf-modal__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(17, 24, 34, 0) 50%, rgba(17, 24, 34, 0.8) 100%);
  pointer-events: none;
}
.rf-modal__media > * { position: relative; z-index: 3; }
/* Figma: 290px from the left of the 672 x 828 panel, 508px wide, running 16px off the
   bottom and off the right edge (clipped). Anchored to the bottom, so it stays low when the
   dialog is shorter than 828px. The stroke's 60% opacity is in the SVG. */
.rf-modal__media > .rf-modal__rmark {
  position: absolute;
  z-index: 1;
  left: 43.15%;
  bottom: -16px;
  width: 75.66%;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.rf-modal__rf-logo { width: 300px; max-width: 100%; height: auto; }

.rf-modal__quote { margin: 0; max-width: 435px; text-align: left; }
.rf-modal__quote blockquote, .rf-modal__quote figcaption { text-align: left; }
.rf-modal__quote blockquote {
  position: relative;
  margin: 0;
  padding: 0 0 0 54px;
  border: 0;
  font-family: var(--rf-font);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-style: normal;
  color: #f1f1ef;
  quotes: none;
}
.rf-modal__quote blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--rf-red);
  font-size: 80px;
  font-weight: 400;
  line-height: 0.8;
}
.rf-modal__quote figcaption { margin: 24px 0 0 54px; padding: 0; font-size: 18px; font-weight: 400; line-height: 1.6; color: #989796; }
.rf-modal__quote--body { display: none; }

/* Figma: 80px in from the top and left, content 502px wide. */
.rf-modal__body { padding: 80px 80px 64px; }
.rf-modal__body > * { max-width: 502px; }
/* The host themes pad every <p> (Divi adds padding-bottom: 1em); spacing here is margins only. */
.rf-modal p { padding: 0; }
.rf-modal__eyebrow {
  margin: 0 0 12px;
  padding: 0 !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rf-red);
}
.rf-modal__title {
  max-width: 462px;
  margin: 0 0 32px;
  padding: 0;
  font-family: var(--rf-font);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.28px;
  color: var(--rf-ink);
  text-transform: none;
}
.rf-modal__text { max-width: 479px; margin: 0 0 24px; padding: 0; font-size: 18px; font-weight: 400; line-height: 1.6; color: var(--rf-ink); }
.rf-modal__text--strong { font-weight: 700; margin-bottom: 64px; }
.rf-modal__divisions { margin: 0 0 64px; padding: 0; font-size: 24px; font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; color: var(--rf-ink); }
.rf-modal__divisions span { display: inline-block; }
.rf-modal__divisions span:not(:last-child)::after { content: " /"; margin: 0 10px 0 4px; color: var(--rf-red); }

.rf-modal__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

/* "Visit ReadyForce": readyforceind.com's ArrowButton. 4px radius, red outline under a red
   fill that sweeps out to the right on hover (slanted edge), label first, arrow 200ms later;
   on this white panel the swept-out text turns red-ink (5.8:1 on white). */
.rf-modal__cta { display: inline-flex; align-items: stretch; gap: 8px; text-decoration: none !important; }
.rf-modal__cta-label,
.rf-modal__cta-icon {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: 1px solid var(--rf-red);
  border-radius: 4px;
  background: transparent;
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 300ms ease-in;
}
.rf-modal__cta-label { padding: 0 38px; }
.rf-modal__cta-icon { width: 56px; }
.rf-modal__cta-text, .rf-modal__cta-icon svg { position: relative; }
.rf-sweep {
  position: absolute;
  inset: 0 auto 0 -20%;
  width: 140%;
  background: var(--rf-red);
  transform: skewX(-12deg);
  transition: transform 300ms ease-in;
  pointer-events: none;
}
.rf-modal__cta-label .rf-sweep { transition-delay: 200ms; }
.rf-modal__cta:hover .rf-modal__cta-label,
.rf-modal__cta:hover .rf-modal__cta-icon,
.rf-modal__cta:focus-visible .rf-modal__cta-label,
.rf-modal__cta:focus-visible .rf-modal__cta-icon { color: var(--rf-red-ink) !important; transition: color 400ms ease-out; }
.rf-modal__cta:hover .rf-sweep,
.rf-modal__cta:focus-visible .rf-sweep { transform: skewX(-12deg) translateX(130%); transition: transform 400ms ease-out; }
.rf-modal__cta:hover .rf-modal__cta-label .rf-sweep,
.rf-modal__cta:focus-visible .rf-modal__cta-label .rf-sweep { transition-delay: 0ms; }
.rf-modal__cta:hover .rf-modal__cta-icon .rf-sweep,
.rf-modal__cta:focus-visible .rf-modal__cta-icon .rf-sweep { transition-delay: 200ms; }
.rf-modal__cta:focus-visible { outline: 2px solid var(--rf-ink); outline-offset: 3px; border-radius: 4px; }

/* "Continue to …": readyforceind.com's ArrowLink underline. The 2px red line is anchored
   right and shrinks to nothing on hover, 250ms ease-brand. */
.rf-modal__continue {
  padding: 0 0 2px;
  border: 0;
  background: linear-gradient(var(--rf-red), var(--rf-red)) no-repeat 100% 100% / 100% 2px;
  color: var(--rf-ink);
  font-family: var(--rf-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-size 250ms var(--rf-ease);
}
.rf-modal__continue:hover, .rf-modal__continue:focus-visible { background-size: 0% 2px; }
/* Genesis paints every button:hover/:focus red with white text (Ready Machinery only), so the
   link looked different on the two sites. Pin its colours in every state. */
.rf-modal__continue:hover, .rf-modal__continue:focus, .rf-modal__continue:active { background-color: transparent; color: var(--rf-ink); border: 0; box-shadow: none; }
.rf-modal__continue:focus-visible { outline: 2px solid var(--rf-red); outline-offset: 4px; }

/* Tablet and phone: the image becomes a short band on top, the quote moves under the buttons. */
@media (max-width: 900px) {
  /* Figma mobile: the card sits 8px in from the screen edge, a 200px photo band on top with
     no "R" and no bottom gradient, a white 24px X 8px from the band's corner. */
  .rf-modal { padding: 8px; align-items: stretch; }
  .rf-modal__dialog { grid-template-columns: 1fr; max-height: calc(100vh - 16px); height: 100%; width: 100%; }
  .rf-modal__media { min-height: 200px; padding: 24px; justify-content: center; align-items: center; }
  .rf-modal__media::after, .rf-modal__media > .rf-modal__rmark { display: none; }
  .rf-modal__rf-logo { width: 200px; }
  .rf-modal__quote--media { display: none; }
  .rf-modal__quote--body { display: block; margin-top: 64px; }
  .rf-modal__quote--body blockquote { padding-left: 0; padding-top: 40px; font-size: 24px; color: #4a5260; }
  .rf-modal__quote--body blockquote::before { top: 0; font-size: 64px; }
  .rf-modal__quote--body figcaption { margin-left: 0; color: #4a5260; font-size: 13px; }
  .rf-modal__x, .rf-modal__x:focus, .rf-modal__x:active { top: 0; right: 0; width: 40px; height: 40px; color: #fff; }
  .rf-modal__x:hover { color: var(--rf-red); }
  .rf-modal__x svg { width: 24px; height: 24px; }
  .rf-modal__body { padding: 40px 32px 48px; }
  .rf-modal__body > * { max-width: none; }
  .rf-modal__eyebrow { font-size: 13px; }
  .rf-modal__title { font-size: 32px; margin-bottom: 24px; }
  .rf-modal__text { font-size: 16px; margin-bottom: 20px; }
  .rf-modal__text--strong { margin-bottom: 40px; }
  .rf-modal__divisions { font-size: 20px; margin-bottom: 40px; }
  .rf-modal__cta-label { padding: 0 24px; font-size: 13px; }
  .rf-modal__cta-label, .rf-modal__cta-icon { height: 44px; }
  .rf-modal__cta-icon { width: 44px; }
  .rf-modal__continue { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .rf-sweep, .rf-modal__cta-label, .rf-modal__cta-icon, .rf-modal__continue, .rf-modal__x { transition: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .rf-modal.is-open .rf-modal__backdrop { animation: rf-fade 200ms ease-out; }
  .rf-modal.is-open .rf-modal__dialog { animation: rf-rise 240ms ease-out; }
  @keyframes rf-fade { from { opacity: 0; } }
  @keyframes rf-rise { from { opacity: 0; transform: translateY(16px); } }
}

html.rf-modal-open, html.rf-modal-open body { overflow: hidden !important; }

.rf-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }