/* =========================================================
   HOW TO RENT – Astra page styles (Page ID 1099)
   ========================================================= */

body.page-id-1099{
  --sp-text: #1a1a1a;
  --sp-muted: #666;
  --sp-border: rgba(0,0,0,.10);
  --sp-shadow: 0 10px 30px rgba(0,0,0,.08);
  --sp-radius: 12px;
}

/* ---------------------------------------------------------
   0) Remove Astra top spacing / padding that causes white gap
   --------------------------------------------------------- */
body.page-id-1099 .site-content,
body.page-id-1099 .content-area,
body.page-id-1099 .site-main{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Astra commonly adds padding inside the container */
body.page-id-1099 .site-content .ast-container{
  padding-top: 0 !important;
}

/* If Astra prints an entry header spacing */
body.page-id-1099 .entry-header{
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent the first block from adding a top margin */
body.page-id-1099 .entry-content > *:first-child{
  margin-top: 0 !important;
}

/* Additional spacing removal to ensure no white gap */
body.page-id-1099 .entry-content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.page-id-1099 .wp-block-cover.alignfull{
  margin-top: 0 !important;
}

/* ---------------------------------------------------------
   1) Typography
   --------------------------------------------------------- */
body.page-id-1099 .entry-content{
  color: var(--sp-text);
}

body.page-id-1099 .entry-content p{
  line-height: 1.55;
  margin: 0 0 14px;
}

body.page-id-1099 .entry-content h2,
body.page-id-1099 .entry-content h3,
body.page-id-1099 .entry-content .wp-block-heading{
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--sp-text);
}

/* ---------------------------------------------------------
   2) HERO COVER – make it TRUE full width in Astra
   IMPORTANT: In editor, set the Cover block to "Full width"
              so it has class .alignfull
   --------------------------------------------------------- */

/* Target ANY alignfull cover in the page (your hero should be alignfull) */
body.page-id-1099 .entry-content .wp-block-cover.alignfull{
  width: 100vw !important;
  max-width: 100vw !important;

  /* Break out of Astra container */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  /* Remove Astra/Gutenberg default spacing */
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  /* Hero height */
  min-height: 300px !important;  /* tweak 260–360 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* If your Cover is NOT alignfull (editor didn't apply it), fallback:
   target the FIRST cover anywhere in content */
body.page-id-1099 .entry-content .wp-block-cover:first-of-type{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 300px !important;
}

/* Cover image behavior */
body.page-id-1099 .entry-content .wp-block-cover .wp-block-cover__image-background{
  object-fit: cover !important;
  object-position: center !important;
}

/* Title styling inside hero - ensure centered on all screen sizes */
body.page-id-1099 .entry-content .wp-block-cover .wp-block-heading,
body.page-id-1099 .entry-content .wp-block-cover h1{
  color: #fff !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  display: block !important;
}

/* Ensure the inner container centers the title */
body.page-id-1099 .entry-content .wp-block-cover .wp-block-cover__inner-container{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Force centering on larger screens */
@media (min-width: 768px){
  body.page-id-1099 .entry-content .wp-block-cover .wp-block-heading,
  body.page-id-1099 .entry-content .wp-block-cover h1{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
}

/* Overlay opacity */
body.page-id-1099 .entry-content .wp-block-cover .wp-block-cover__background{
  opacity: .55 !important;
}

/* ---------------------------------------------------------
   3) Steps section layout + spacing (Figma rhythm)
   Put class "sp-steps" on the OUTER group wrapping all steps
   --------------------------------------------------------- */
body.page-id-1099 .sp-steps{
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 24px 38px;
}

/* space between steps:
   heading + paragraph blocks are separate in Gutenberg; that's fine.
   We add spacing using sibling rules (no :has needed). */
body.page-id-1099 .sp-steps .wp-block-heading{
  margin-top: 38px !important;
  margin-bottom: 14px !important;
}

body.page-id-1099 .sp-steps .wp-block-heading:first-child{
  margin-top: 0 !important;
}

body.page-id-1099 .sp-steps .wp-block-heading + p{
  margin-bottom: 18px !important;
}

/* if you have 2 paragraphs under one step, keep them tight */
body.page-id-1099 .sp-steps p + p{
  margin-top: -6px !important;
}

/* ---------------------------------------------------------
   4) Requirements section
   Put class "sp-req" on OUTER requirements group
   Put class "sp-req-sub" on the group that contains the tiny lines
   --------------------------------------------------------- */
body.page-id-1099 .sp-req{
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 24px 26px;
}

body.page-id-1099 .sp-req-sub p{
  margin: 0 !important;
}
body.page-id-1099 .sp-req-sub p + p{
  margin-top: 6px !important;
}

/* ---------------------------------------------------------
   5) Cards row + cards
   Put class "sp-card-row" on OUTER group wrapping the Columns
   Put class "sp-card" on EACH card group inside each column
   --------------------------------------------------------- */
body.page-id-1099 .sp-card-row{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 24px 70px;
}

body.page-id-1099 .sp-card-row .wp-block-columns{
  gap: 22px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

body.page-id-1099 .sp-card{
  background: #fff !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--sp-radius) !important;
  box-shadow: var(--sp-shadow) !important;
  padding: 22px 22px !important;
  height: 100% !important;
}

/* Card headings */
body.page-id-1099 .sp-card .wp-block-heading{
  margin: 0 0 12px !important;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/* Lists inside cards */
body.page-id-1099 .sp-card ul{
  margin: 0 !important;
  padding-left: 18px !important;
}
body.page-id-1099 .sp-card li{
  margin: 10px 0 !important;
  line-height: 1.55;
}

/* ---------------------------------------------------------
   6) Responsive
   --------------------------------------------------------- */
@media (max-width: 900px){
  body.page-id-1099 .sp-steps,
  body.page-id-1099 .sp-req,
  body.page-id-1099 .sp-card-row{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.page-id-1099 .sp-card-row .wp-block-columns{
    flex-direction: column !important;
  }
}

/* =========================================================
   FULL-WIDTH BACKGROUND BAND for 2nd half (Requirements area)
   Add class "sp-req-band" to the OUTER group that has the gray bg
   ========================================================= */

body.page-id-1099 .sp-req-band{
  position: relative;
  z-index: 0;
}

/* This pseudo-element creates a true full-bleed background */
body.page-id-1099 .sp-req-band::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #f3f3f3; /* match your Figma gray */
  z-index: -1;
}

/* Keep your actual content centered like Figma */
body.page-id-1099 .sp-req-band > .wp-block-group__inner-container{
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 24px 26px; /* adjust spacing */
}

/* If your theme adds a "block gap" that creates extra spacing */
body.page-id-1099 .sp-req-band{
  margin: 0 !important;
}

/* ==========================================
   HOW TO RENT (1099) – KILL white strip above footer (Astra)
   ========================================== */

/* 1) Remove Astra's bottom spacing on the main content area */
body.page-id-1099 #content.site-content,
body.postid-1099 #content.site-content{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body.page-id-1099 #primary,
body.postid-1099 #primary{
  margin-bottom: 0 !important;
}

body.page-id-1099 .site-main,
body.postid-1099 .site-main{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 2) Make sure the LAST block in the page has no bottom margin */
body.page-id-1099 .entry-content > *:last-child,
body.postid-1099 .entry-content > *:last-child{
  margin-bottom: 0 !important;
}

/* 3) If your last section is the pale band wrapper, force it flush */
body.page-id-1099 .sp-req-band,
body.postid-1099 .sp-req-band{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 4) Remove any footer top-margin that creates a visible seam */
body.page-id-1099 .site-footer,
body.postid-1099 .site-footer{
  margin-top: 0 !important;
}