/* ==========================================================================
   Time Off — Hero (rp-time-off-hero) · Figma Hero-Wrapper 7172:103781 / Text 7172:103843
   Scope: .rp-time-off-hero. Structural scaffold by CC; Cowork owns visual fidelity.
   Hero scaffold (playbook): text column gets a flex floor so the sub (the wrap
   driver — H1 "Time-Off Policies" is one line) lays out to Figma's 2 lines and the
   text col never loses the flex fight to the fixed-width art column.
   Tokens read from THIS page (7172:103845/103846): H1 Mulish Bold 64/80 tracking -2px
   #021143 (single colour, NO accent) · sub Mulish Reg 20/28 #696969 · art 734px window
   ("Time off policies" dashboard + floating "UAE PTO" panel, node 8556:30687, alpha webp).
   Figma shows ONE button "Get started now" (#114EF7, r8, 18px Medium). Wave convention
   applied for product-page consistency (mirrors bill-pay/bulk-actions/org-charts):
   "Try Time-Off Now"->signup + "Book A Demo"->/demo-request/ (r4). Flag for Cowork if
   Figma's single "Get started now"/r8 is wanted.
   ========================================================================== */
/* Hero mirrors local-payroll: CoR lavender gradient on white + 56px rounded bottom. */
.rp-time-off-hero {
  background-color: #fff;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254));
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
  overflow: clip;
}
/* Layout mirrors local-payroll (measured): .rp-container max-width 1300 + 24px padding →
   content 1252, columns 626 text / 610 image, space-between (gap 0). */
.rp-time-off-hero__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.rp-time-off-hero__text { flex: 1 1 auto; max-width: 626px; min-width: 0; }
.rp-time-off-hero__media { flex: 0 0 610px; min-width: 0; }
.rp-time-off-hero__img { display: block; width: 100%; height: auto; aspect-ratio: auto; }

.rp-time-off-hero__title {
  font-weight: 700;
  font-size: 2.95rem;
  line-height: 56px;
  letter-spacing: 0;
  color: #021143;
  margin: 0 0 16px;
}

.rp-time-off-hero__sub {
  font-size: 20px;
  line-height: 28px;
  color: #545454;
  max-width: 640px;
  margin: 0 0 40px;
}

.rp-time-off-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.rp-time-off-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 57px;
  background: #114EF7;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  padding: 0 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.rp-time-off-hero__cta:hover { background: #0E45D6; color: #fff; }
.rp-time-off-hero__cta--ghost {
  background: #fff;
  color: #114EF7;
  border: 1px solid #D6E0FB;
}
.rp-time-off-hero__cta--ghost:hover { background: #F0F4FE; color: #114EF7; }

/* Tablet: image 65% centred (LP). */
@media (min-width: 768px) and (max-width: 991px) {
  .rp-time-off-hero__img { width: 65%; margin-left: auto; margin-right: auto; }
}
@media (max-width: 991px) {
  /* Stack, columns full-width, content start-aligned (left EN / right AR) — same as LP.
     align-items:stretch so the text block spans full width and sits at the gutter (not centred). */
  .rp-time-off-hero__inner { flex-direction: column; align-items: stretch; text-align: start; padding: 40px 24px; gap: 36px; }
  .rp-time-off-hero__text { flex: 0 1 auto; max-width: 100%; width: 100%; }
  .rp-time-off-hero__media { flex: 0 1 auto; }
  .rp-time-off-hero__ctas { justify-content: flex-start; }
  .rp-time-off-hero__title { font-size: 36px; line-height: 53px; }
  .rp-time-off-hero__sub { margin-bottom: 28px; }
}
@media (max-width: 767px) {
  .rp-time-off-hero__title { font-size: 32px; line-height: 40px; letter-spacing: 0; }
  .rp-time-off-hero__img { width: 100%; }
  .rp-time-off-hero__cta { width: 100%; }
}

/* Trusted brands = homepage khero-brands, embedded on the hero lavender (same as homepage/apis):
   hero goes flat-bottom, the brands band takes the lavender + 56px rounded bottom. 2026-07-12. */
body.page-template-page-time-off .rp-time-off-hero { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body.page-template-page-time-off .rp-khero-brands {
  background-color: rgb(228, 235, 254);
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
  margin-top: 0;
  padding: 24px max(24px, calc(50% - 620px)) 48px;
}
body.page-template-page-time-off .rp-khero-brands .new_landing_page_brands_header {
  text-align: center !important; font-size: 24px !important; line-height: 40px !important;
  font-weight: 700 !important; color: #021143 !important; margin: 0 0 20px !important; text-transform: none !important;
}
body.page-template-page-time-off .rp-khero-brands .new_landing_page_brands_header .highlight-it-blue { color: #114EF7 !important; }
body.page-template-page-time-off .rp-khero-brands .new-listed-brands-sub-section {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 16px 28px !important;
}
body.page-template-page-time-off .rp-khero-brands .new-listed-brands-sub-section-img { height: 36px !important; width: auto !important; opacity: 1 !important; }
body.page-template-page-time-off .rp-khero-brands .new-listed-brands-sub-section-img.blue-filter { filter: invert(85%) !important; }
@media (max-width: 991px) {
  body.page-template-page-time-off .rp-khero-brands .new-listed-brands-sub-section { gap: 12px 20px !important; }
  /* Section header shrinks to 28/36 on tablet+mobile — same as LP. */
  body.page-template-page-time-off .new-rp-section-header { font-size: 28px !important; line-height: 36px !important; }
  /* Feature-row titles shrink to 26/32.5 on tablet+mobile — same as LP's .rp-feature-split__h.
     Extra parent classes out-specify the product-slide component's own responsive rule. */
  html body.page-template-page-time-off .double-slide-lleft-container .double-slide-landing-page-left-main-header-dim-gray { font-size: 26px !important; line-height: 32.5px !important; }
  /* Section-header wrapper margin-bottom on tablet + mobile. */
  .rp-time-off .main-header-center { margin-bottom: 16px !important; }
}

/* Section header mirrors LP's shared header (.rp-intro__heading, measured): navy #021143,
   35/51 centred, max-width 720, 12px bottom; sub 16/24 #696969 centred, max-width 640.
   Scoped to /time-off so the shared .new-rp-section-header isn't changed on other pages. */
body.page-template-page-time-off .new-rp-section-header {
  color: #021143 !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 12px !important;
}
body.page-template-page-time-off .comparison-hero-subtitle {
  font-size: 16px !important;
  line-height: 24px !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Section header width — 80% on tablet, 100% on mobile (centred). */
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-time-off .new-rp-section-header { width: 80% !important; }
  /* Feature "side-by-side" image: 65% centred on tablet (both section variants). */
  .rp-time-off .double-section-img.double-section-img-side-by-side-img {
    min-width: 65% !important; max-width: 65% !important; margin: auto !important;
  }
}
@media (max-width: 767px) {
  body.page-template-page-time-off .new-rp-section-header { width: 100% !important; }
  /* Feature "side-by-side" image: full width on mobile (both section variants). */
  .rp-time-off .double-section-img.double-section-img-side-by-side-img {
    min-width: 100% !important; max-width: 100% !important;
  }
}
/* Section-header wrapper bottom margin on tablet + mobile. */
@media (max-width: 991px) {
  .rp-time-off .main-header-center { margin-bottom: 16px !important; }
}
/* The gray vertical-border slider section's header keeps a 40px bottom margin
   (overrides the 12px default above). */
.rp-time-off .new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section .new-rp-section-header {
  margin-bottom: 40px !important;
}
/* Feature sections — uniform side padding on tablet + mobile (2026-07-13). The base pattern
   only pads the "_2" rows and leaves the alternating (REV) rows flush, and AR had no side
   padding at all — so gutters were uneven row-to-row and the image touched the screen edge.
   Force every feature row (both locales) to a symmetric gutter: 24px ≤991, 16px ≤767.
   Vertical (top/bottom) padding is left as-is so the alternating vertical rhythm is unchanged. */
@media (max-width: 991px) {
  .rp-time-off .main-section-holder .hero_double_section,
  .rp-time-off .main-section-holder .hero_double_section_2 { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 767px) {
  .rp-time-off .main-section-holder .hero_double_section,
  .rp-time-off .main-section-holder .hero_double_section_2 { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Feature-row titles = navy like LP's .rp-feature-split__h (was dim-gray). Everything else
   (32/42, sub 16.8/25.2 #696969, 626/519 layout, 56px padding) already matches LP. */
body.page-template-page-time-off .double-slide-landing-page-left-main-header-dim-gray {
  color: #021143 !important;
}

/* Feature-section background shuffle (2026-07-13): the shuffle STARTS tinted on the first
   feature row, "Customizable, compliant, and intuitive" (a hero_double_section_2), then
   alternates → #fafbff, white, #fafbff, white … Applied to BOTH locales so EN + AR are
   identical. hero_double_section_2 rows = #fafbff (tinted), plain hero_double_section = white. */
.rp-time-off .hero_double_section_2.hero_double_section_gray_bg { background-color: #fff !important; }
.rp-time-off .hero_double_section.hero_double_section_revert { background-color: #fafbff !important; }
/* Start-white cadence: the gray_bg (_2) bands are the WHITE ones now — their base
   background-IMAGE gradient is overridden to flat white; the plain revert bands take #fafbff. */
.rp-time-off .main-section-holder .hero_double_section_2.hero_double_section_revert.hero_double_section_gray_bg {
  background-image: linear-gradient(#fff, #fff) !important;
}

/* Button label centring (2026-07-13): the feature CTAs (.btn-2 .w-button) render as
   inline-flex with justify-content:normal, so the label sits at the flex start — which in
   RTL/AR pushes it to the right instead of centre (text-align:center can't move a flex item).
   Force centre so button text is always centred (EN + AR). */
.rp-time-off .btn-2,
.rp-time-off a.w-button { justify-content: center !important; text-align: center !important; }

/* Feature CTA hover — solid blue fill, white text (2026-07-13). Scoped to .rp-time-off with the
   :hover pseudo so its (0,4,0) specificity + !important beats the AR uniform base rule in
   time-off-hero-rtl.css (0,3,0 !important); applies to every feature row on both locales. */
.rp-time-off .btn-2.btn-gray:hover {
  background-color: #114ef7 !important;
  border-color: #114ef7 !important;
  color: #fff !important;
}

/* App-store download badges under the "Save time & money" button — mirrors the remote-team
   .rt-stores (flex, 16px gap, 48px-tall badges). Injected by time-off-hero-cta.js. 2026-07-13. */
.rp-time-off .rp-time-off__stores { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.rp-time-off .rp-time-off__stores img { display: block; height: 48px; width: auto; }