/* ==========================================================================
   page-reimbursement.css
   Styles for page-reimbursement.hbs, lifted out of the two inline <style>
   blocks that page used to carry.

   Isolation
   ---------
   Every rule is scoped under the `.page-reimbursement` root class on <main>, so
   nothing here can reach the nav, the footer, or any other template. Class names
   this page owns are prefixed `pr-` so they cannot collide with the same generic
   names used by other pages (`.banner-container`, `.text-decor` and
   `.elevate-team` all appear in other templates with different rules):

       .elevate-team      -> .pr-elevate-team
       .banner-container  -> .pr-banner-container
       .text-decor        -> .pr-text-decor
       .certificate-list  -> .pr-certificate-list

   The modal lives in the "modal/hubspot-embed-modal" partial, which carries its
   own styles and script — so neither modal-v1.css nor js/modal.js is linked here.
   style.css is still linked (shared design tokens and base typography), as it is
   on page-team-certifications.hbs.

   Member state
   ------------
   Rules that used to sit in the `{{#if @member}}` block are under
   `.page-reimbursement.is-member`; the hbs adds `is-member` to <main>.

   Breakpoints
   -----------
   Desktop         : default (>= 1025px)
   Tablet / mobile : @media (max-width: 1024px) — one shared block; tablet is
                     deliberately styled the same as mobile
   ========================================================================== */

/* ==========================================================================
   BASE / DESKTOP
   ========================================================================== */

/* ---------- page sections ---------- */
.page-reimbursement .pr-banner-container {
   background-image: linear-gradient(315deg, #ff8a36a2, #ffbc2d38 48%, #09100f00 80%);
}

.page-reimbursement .pr-elevate-team {
   background-image: url("/assets/img/left-bottom-bg.svg");
   background-repeat: no-repeat;
   background-position: bottom left;
}

/* ---------- headline decoration ---------- */
.page-reimbursement .pr-text-decor {
   position: relative;
}

.page-reimbursement .pr-text-decor::after {
   content: url("/assets/img/svg/title-decor-4.svg");
   position: absolute;
   top: -45px;
   left: 373px;
}

/* ---------- certification download list ---------- */
.page-reimbursement .pr-certificate-list a {
   color: var(--black) !important;
}

/* ---------- buttons ---------- */
/* Not in style.css; the page supplies its own outline-on-light variant. */
.page-reimbursement .btn.btn-outline-secondary {
   border: 1px solid var(--black);
   color: var(--black);
}

.page-reimbursement .btn.btn-outline-secondary:hover {
   border: 1px solid var(--primary-color);
   color: var(--primary-color);
}

.page-reimbursement img.pitch-your-case-decal {
   position: absolute !important;
   transform: scale(0.9);
   top: 1rem !important;
}

/* ==========================================================================
   MEMBER STATE
   ========================================================================== */

/* --white is overridden site-wide on purpose: it is a design token, so scoping
   it to <main> would leave the nav and footer on the un-dimmed white. */
:root:has(.page-reimbursement.is-member) {
   --white: #f5f5f5;
}

/* No height on this: .page-reimbursement is #site-main, the whole page body, and
   the footer is its next sibling — pinning it to 100vh buries the footer under
   the overflowing content and cuts it out of the scroll height. */
.page-reimbursement.is-member {
   overflow-y: unset !important;
}

.page-reimbursement.is-member .container {
   max-width: unset !important;
   padding: 0;
}

.page-reimbursement.is-member section:not(:last-of-type) {
   margin-bottom: 0;
}

.page-reimbursement.is-member section p {
   margin-bottom: 24px;
}

/* ==========================================================================
   TABLET + MOBILE  (<= 1024px)
   One block on purpose: tablet is styled exactly like mobile here.
   ========================================================================== */

@media all and (max-width: 1024px) {
   .page-reimbursement .pr-text-decor::after {
      display: none !important;
   }

   /* The row is `flex-col-reverse` with `items-start` down here, so the graphic's
      wrapper shrink-wraps to the image's intrinsic width and hugs the left edge.
      Centre the wrapper, and the image inside it. */
   .page-reimbursement .pr-section-graphic {
      align-self: center;
      width: 100%;
   }

   .page-reimbursement .pr-section-graphic img {
      display: block;
      margin-inline: auto;
   }

   /* !important to beat the .h2 utility some of these headings also carry */
   .page-reimbursement h2 {
      font-size: 42px !important;
      line-height: 40px !important;
   }
}