/* =========================================================
   Best Finance Calculator — Adsterra ad slot styles
   Loaded AFTER style.css / calculator.css.
   Adds new classes only: no existing rule is modified, so the
   site's design and structure stay exactly as they were.
   ========================================================= */

/* Wrapper around each sidebar ad position. */
.ad-slot { position: relative; }

/* The Adsterra mount is empty (and hidden) until a real ad is injected. */
.adsterra-mount { display: none; }

/* WHILE THE AD REQUEST IS IN FLIGHT the mount is rendered off-screen.
   The iframe still loads normally, but the visitor keeps seeing the house
   ad — so a slot that never fills (e.g. the editor preview, or an ad
   blocker) can never leave an empty grey rectangle in the sidebar, and
   there is no layout shift either. */
.adsterra-mount.is-loading {
  display: block;
  position: absolute;
  left: -10000px;
  top: 0;
  width: 300px;
  height: var(--ad-h, 250px);
  overflow: hidden;
}

/* Confirmed filled: bring it into the layout and centre it. */
.adsterra-mount.is-active {
  display: flex;
  position: static;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: var(--ad-h, 250px);
  border-radius: 8px;
  overflow: hidden;
}

.adsterra-mount iframe,
.adsterra-mount img {
  border: 0;
  display: block;
  max-width: 100%;
}

/* Native Banner stretches to the sidebar width instead of a fixed box. */
.adsterra-mount[data-ad-format="native"] {
  min-height: 200px;
  display: block;
  background: transparent;
}

/* Once a real Adsterra ad is mounted, the placeholder house ad steps aside. */
.ad-slot.adsterra-live .house-ad { display: none; }

/* =========================================================
   SPLIT-SIDE AD SLOTS (How It Works | Tips) & (Plan | Wealth)
   ---------------------------------------------------------
   These two boxes are 288px wide — 12px narrower than a 300x250
   creative — so ads.js scales the unit with the same .lb-scale
   wrapper the leaderboard uses. Nothing here changes the boxes'
   own appearance: the rules only apply once a real ad is live.
   ========================================================= */

/* The "Advertisement" caption above the Tips card is site content, not
   an advert, so the label stays hidden until a real ad replaces it. */
.label-when-live { display: none; }
.ad-slot.adsterra-live .label-when-live { display: block; }

/* Centre the scaled creative in the 288px track and keep the box the
   same height the house ad occupied, so nothing on the row shifts. */
.split-ad-slot.adsterra-live {
  justify-content: flex-start;
  align-items: center;
}
.split-ad-slot .adsterra-mount.is-active {
  width: 100%;
  justify-content: center;
}

/* =========================================================
   TALL SLOT — fills the long empty stretch at the sidebar bottom
   ---------------------------------------------------------
   The main column is ~780-940px taller than the sidebar, leaving a
   big blank area. This slot sits at the very bottom of .side-column
   and sticks to the viewport while the visitor scrolls that stretch,
   so the space earns instead of sitting empty.
   ========================================================= */
/* Wrapper holding the TWO 160x600 units side by side. It is the element
   that sticks, so the pair scrolls together. */
.tall-pair {
  /* 65px sticky header + 14px breathing room. */
  position: sticky;
  top: 79px;
  display: grid;
  grid-template-columns: 160px 160px;
  gap: 8px;
  /* Two 160px units + an 8px gap need 328px, but the sidebar track is
     315px. The page container has 18px of padding to the right of the
     sidebar, so the pair is allowed to use 13px of it — the ads stay
     fully inside the page and NOTHING in the existing grid moves. */
  width: 328px;
  margin-right: -13px;
}
.tall-pair .ad-slot { min-width: 0; }

/* ---------- Keep the pair on screen for the WHOLE page ----------
   `position: sticky` can only travel inside its own parent's box, and
   .content-grid sets `align-items: start` — so .side-column is only as
   tall as its own cards. That left the pair ZERO travel room on EVERY
   page of the site: it scrolled away with the sidebar and never came
   back. Measured before this fix (sidebar height vs main column, and
   how many of 6 scroll depths actually showed the ads):

     guide article    2235 vs 6195   travel 0   visible 2/6
     privacy-policy   1413 vs 3905   travel 0   visible 2/6
     terms-of-use     1413 vs 4188   travel 0   visible 2/6
     disclaimer       1413 vs 3814   travel 0   visible 2/6
     homepage         1781 vs 2074   travel 0   visible 5/6
     mortgage         1870 vs 2016   travel 0   visible 5/6
     about            1413 vs 2274   travel 0   visible 5/6

   Stretching the sidebar to the full grid-row height gives the sticky
   pair the empty track it needs to follow the reader all the way down.
   Nothing moves visually: the sidebar's cards are laid out from the top
   by its own flex column, so a taller box only adds empty space BELOW
   them — which is precisely the space the ads now travel through.

   Applied to every .content-grid sidebar (all 16 pages carry the pair),
   but ONLY on the desktop layout. Below 1000px the grid collapses to a
   single column, .side-column becomes a wrapping row, and .tall-pair is
   display:none — stretching there would just add dead space. */
@media (min-width: 1001px) {
  .content-grid > .side-column { align-self: stretch; }
}

/* The "Advertisement" label spans both columns, like the single slots. */
.tall-pair-label { grid-column: 1 / -1; }

/* House ad shown in the tall slots until real skyscrapers fill them.
   Sized for the narrow 160px column. */
.sky-house {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  min-height: 600px;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(165deg, #1f3c88 0%, #16306e 55%, #0f2350 100%);
}
/* Second card in the pair gets a different tone so the two do not look
   like one duplicated block. */
.sky-house.sky-alt {
  background: linear-gradient(165deg, #12704f 0%, #0e5c43 55%, #083f30 100%);
}
.sky-house .sky-ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.14);
  margin-bottom: 14px;
}
.sky-house h4 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 9px;
}
.sky-house p {
  font-size: 12px;
  line-height: 1.55;
  opacity: 0.9;
  margin-bottom: 16px;
}
.sky-house .sky-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.sky-house .sky-list li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 9px;
}
.sky-house .sky-list i {
  color: var(--gold, #f5b301);
  font-size: 11px;
  margin-top: 2px;
  flex-shrink: 0;
}
.sky-house.sky-alt .sky-list i { color: #7ff0c0; }
.sky-house .sky-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--gold, #f5b301);
  color: #16314f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  line-height: 1.2;
}
.sky-house.sky-alt .sky-btn { background: #23d18b; color: #063a2a; }

/* The tall pair only makes sense beside a long main column. On phones the
   sidebar stacks under the content, where 600px units would be a wall of
   ad — so it is hidden there, exactly like the other desktop-only slots. */
@media (max-width: 1000px) {
  .tall-pair { display: none; }
}

/* On phones the sidebar is full width; keep the 300x250 unit centred. */
@media (max-width: 1000px) {
  .adsterra-mount.is-active { justify-content: center; }
}

/* =========================================================
   SIDEBAR 300x250 GROUP — below "Popular Calculators"
   ---------------------------------------------------------
   Three more 300x250 slots sit directly under the Popular
   Calculators card. They are plain .side-column children, so the
   column's own `gap: 14px` already spaces them like every other
   sidebar card — no layout rule is needed or changed here.

   Two new colour variants are added. style.css ships .ad-blue,
   .ad-green and .ad-navy, but .ad-blue and .ad-green were already
   taken by the two original sidebar ads — so a group of three more
   boxes would have repeated them. These are additive classes only:
   no existing rule is touched, and both gradients are built from
   colour tokens the site already uses (--purple / --lime), so the
   palette does not change.

   Colour order down the sidebar is purple -> teal -> navy, which
   keeps the new teal away from the green .ad-green box that follows
   the group, so no two similar gradients end up side by side.
   ========================================================= */
.ad-purple { background: linear-gradient(150deg, #7c5cd6 0%, #6a49c4 100%); }
.ad-purple .side-ad-btn { background: #5b3bb3; color: #fff; }

.ad-teal { background: linear-gradient(150deg, #0f8f9e 0%, #0b6b7d 100%); }
.ad-teal .side-ad-btn { background: #08566a; color: #fff; }

/* =========================================================
   LEADERBOARD SLOT — 728x90 in-content banner
   ---------------------------------------------------------
   The main column is 809px on desktop, so 728px fits. But the column
   narrows to ~724px at 760px viewport and ~653px at 1024px, and down to
   354px on a phone. An iframe cannot reflow, so the mount SCALES the unit
   down proportionally with a transform instead of letting it overflow.
   ========================================================= */
.ad-slot-leader { position: relative; }

/* Keep the leaderboard centred in the column. */
.adsterra-mount[data-ad-format^="leaderboard"].is-active {
  min-height: 90px;
  justify-content: center;
  background: transparent;
}

/* Proportional downscale wrapper: transform keeps the ad's own pixel
   dimensions intact (Adsterra requires exactly 728x90) while making it
   visually fit a narrower column.

   The scale factor is NOT set with media queries — fixed breakpoints
   cannot know the real column width (this site's main column is 809px at
   1280px but 964px at 1000px, because the sidebar stacks). js/ads.js
   measures the column and sets --lb-scale per slot, then keeps it in sync
   on resize. That is exact at every width, including 320px phones.

   The unit's own pixel size is written into --lb-w / --lb-h by ads.js,
   so the same wrapper serves the 728x90 leaderboard AND the 320x50
   mobile banner used in the footer bar. */
.lb-scale {
  width: var(--lb-w, 728px);
  height: var(--lb-h, 90px);
  transform: scale(var(--lb-scale, 1));
  transform-origin: top center;
  flex: 0 0 auto;
}

/* Collapse the reserved box down to the scaled height so no blank strip
   is left under the banner. Applies to the scaled 300x250 "banner-fit"
   units too, which use the very same .lb-scale wrapper. */
.adsterra-mount[data-ad-format^="leaderboard"].is-active,
.adsterra-mount[data-ad-format^="banner-fit"].is-active {
  min-height: calc(var(--lb-h, 90px) * var(--lb-scale, 1));
  height: calc(var(--lb-h, 90px) * var(--lb-scale, 1));
  overflow: hidden;
}

/* =========================================================
   FIXED FOOTER BAR (anchor ad) — mobile + desktop
   ---------------------------------------------------------
   Injected into <body> by js/ads.js, so no page markup changed.
   Pinned to the bottom of the viewport on every page.
   ========================================================= */
.sticky-ad-bar {
  /* !important because an ad network's own stylesheet (Adsterra injects
     CSS for some formats) must never be able to knock the bar back into
     the normal document flow — that is what makes it slide down to the
     footer instead of staying pinned on a phone. */
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Width is tied to the VISUAL viewport, not the layout box. If any
     element makes the page wider than the screen, `left/right:0` would
     stretch the bar across that wider box and push the creative out of
     sight; 100vw + a hard max keeps it on screen regardless. */
  width: 100vw;
  max-width: 100vw;
  /* Above page content, but BELOW #toast (z-index 100) so toast messages
     are never hidden behind the ad. The sticky header uses 50. */
  z-index: 90;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--gray-200, #e2e8f0);
  box-shadow: 0 -2px 14px rgba(15, 35, 80, 0.12);
  /* Keep clear of the iPhone home-indicator bar. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Its own compositing layer: stops mobile Safari/Chrome repainting it
     one frame late while scrolling, which reads as the bar "lagging"
     down the page. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sticky-ad-inner {
  position: relative;
  display: flex;
  align-items: center;
  /* The close button is a real flex item pinned to the right end, and the
     mount takes all remaining space and centres the creative inside it.
     This keeps the ad optically centred in its own area while GUARANTEEING
     the button can never sit on top of it — even at 320px, where an
     absolutely-positioned button used to overlap the creative. */
  justify-content: space-between;
  gap: 6px;
  min-height: 56px;
  padding: 5px 6px;
}

/* The mount fills the space left of the close button and centres the
   creative within it. */
.sticky-ad-bar .adsterra-mount.is-active {
  flex: 1 1 auto;
  min-width: 0;          /* allows the flex item to shrink below 320px */
  justify-content: center;
  border-radius: 0;
  background: transparent;
}

/* While loading, ads.js parks the mount off-screen; the bar would then
   be an empty white strip, so keep it collapsed until the ad is live. */
.sticky-ad-bar:not(.adsterra-live) .sticky-ad-inner { min-height: 0; padding: 0; }
.sticky-ad-bar:not(.adsterra-live) { border-top: none; box-shadow: none; background: none; }
.sticky-ad-bar:not(.adsterra-live) .sticky-ad-close { display: none; }

.sticky-ad-close {
  /* A flex item, not absolute: it now occupies real space at the right
     end so the creative is laid out beside it instead of underneath. */
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 50%;
  background: #fff;
  color: #475569;
  font-size: 17px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sticky-ad-close:hover { background: #f1f5f9; color: #0f172a; }

/* Give the page bottom room so the bar never covers the footer's last
   line. --sticky-ad-pad is written by js/ads.js from the bar's MEASURED
   height + 16px (a 728x90 bar is ~101px tall with padding and border,
   not 90), so the clearance always matches the real bar.

   It defaults to 0 and is only set once a creative is CONFIRMED, so
   while the ad request is in flight — or if it never fills — the page
   reserves nothing and there is no empty strip under the footer. */
body.has-sticky-ad .site-footer {
  padding-bottom: var(--sticky-ad-pad, 0px);
}

/* Lift the toast above the bar so the two never overlap. */
body.has-sticky-ad #toast {
  bottom: max(22px, var(--sticky-ad-pad, 22px));
}

@media (max-width: 780px) {
  /* Padding stays SYMMETRIC — the close button is absolutely positioned,
     so reserving space for it on the right only pushed the creative
     12px off centre on every phone. */
  .sticky-ad-inner { min-height: 52px; padding: 4px; }
}