/* Re-asserts the application form's own styling after the website's
   stylesheets.

   /apply loads firstsupport-homecare.com's CSS so its header and footer render
   exactly as they do on the site. Those sheets carry global rules -- box-sizing
   resets, typography, button and input styling -- that would otherwise reach
   into the form. Everything here is scoped to .apply-card, so it restates the
   form's intent without touching the header or footer above and below it. */

.apply-card,
.apply-card * {
  box-sizing: border-box;
}

/* The site sets a global font stack; the form deliberately uses the same
   display face for headings but the portal's own metrics for controls. */
.apply-card {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #23291f;
}

/* Elementor styles bare inputs, selects and buttons site-wide. Inside the
   form those rules fight the portal's field styling, so the field shapes are
   restated here at a specificity the site's sheets do not reach. */
.apply-card input[type="text"],
.apply-card input[type="email"],
.apply-card input[type="tel"],
.apply-card input[type="date"],
.apply-card input[type="number"],
.apply-card select,
.apply-card textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d8d5cc;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: inherit;
  box-shadow: none;
  min-height: 46px;
}

.apply-card input:focus,
.apply-card select:focus,
.apply-card textarea:focus {
  outline: 2px solid #2e6f40;
  outline-offset: 1px;
  border-color: #2e6f40;
}

.apply-card button,
.apply-card .apply-nav a {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

/* The site's list styling adds bullets and indents the form does not want. */
.apply-card ul,
.apply-card ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Headings inside the card keep the form's scale, not the site's display
   sizes, which are tuned for full-width marketing sections. */
.apply-card h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; margin: 0 0 10px; }
.apply-card h2 { font-size: 20px; line-height: 1.3; }
.apply-card h3 { font-size: 17px; line-height: 1.35; }

/* The website's header is sticky and full-bleed; the form sits below it with
   its own rhythm rather than the page padding the portal shell applies. */
.apply-card { margin-top: 28px; }

@media (max-width: 600px) {
  .apply-card { margin-top: 16px; }
  .apply-card h1 { font-size: 26px; }
}

/* --- the website's own header and footer, placed on this page ---------- */
/* .apply-page paints the page green and carries 28px/16px padding. The site's
   header and footer are full-bleed white bands there, so both are pulled back
   out to the window edges here; without this they float inset with green down
   either side, which is exactly what made the page look like different
   software. */
.apply-page > .xpro-theme-builder-header,
.apply-page > #xpro-theme-builder-footer {
  background: #fff;
  margin-left: -16px;
  margin-right: -16px;
  width: calc(100% + 32px);
  max-width: none;
}

.apply-page > .xpro-theme-builder-header {
  margin-top: -28px;
  margin-bottom: 30px;
  /* Deliberately NOT position:relative. The header's inner Elementor container
     is absolutely positioned; giving the header a positioning context made the
     inner resolve against it and stop contributing height, so the white band
     collapsed from 252px to 164px and the logo hung out below it. */
}

.apply-page > #xpro-theme-builder-footer {
  margin-top: 56px;
  margin-bottom: -56px;
}

/* Elementor sizes its containers from the viewport on the site; inside this
   page they must not add their own outer margin on top of the pull-out above. */
.apply-page > .xpro-theme-builder-header .elementor,
.apply-page > #xpro-theme-builder-footer .elementor {
  width: 100%;
}

/* The portal's global link colour would otherwise repaint the site's nav. */
.apply-page > .xpro-theme-builder-header a,
.apply-page > #xpro-theme-builder-footer a {
  text-decoration: none;
}

/* The header's top-level Elementor container carries margin-bottom:-120px so
   that on the website it floats over the homepage hero image. This page has no
   hero behind it, so that negative margin just pulled the form card up under
   the header and hid the heading. Matched structurally rather than by element
   id, which changes whenever the header is rebuilt in Elementor. */
.apply-page > .xpro-theme-builder-header .elementor > .e-con,
.apply-page > .xpro-theme-builder-header .elementor > .elementor-element {
  margin-bottom: 0 !important;
}