/* ============================================================
   ISELLVICTORIA.CA GLOBAL CSS
   Overrides MyRealPage defaults for consistent brand experience
   ============================================================ */

/* --- CSS VARIABLES --- */
:root {
  --iv-card-radius: 14px;
  --iv-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  --iv-card-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.10);
  --iv-card-border: 1px solid rgba(0, 0, 0, 0.08);
  --iv-card-padding: 18px 18px 14px;
}

/* ============================================================
   1. TYPOGRAPHY (GLOBAL FONT OVERRIDE)
   ============================================================ */

body, button, input, select, textarea {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

button, .btn, a.btn, a.button, input[type="submit"] {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ============================================================
   2. ANIMATION OVERRIDES (DISABLE MRP SCROLL/FADE)
   ============================================================ */

/* Stop fade/slide effects on custom HTML pages */
body.first-time-buyers .block-layout .fx,
body.buying .block-layout .fx,
body.downsizing-rightsizing .block-layout .fx,
body.move-up-growing-families .block-layout .fx {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Ensure child elements also remain visible */
body.first-time-buyers .block-layout .fx *,
body.buying .block-layout .fx *,
body.downsizing-rightsizing .block-layout .fx *,
body.move-up-growing-families .block-layout .fx * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Custom soft fade for page-specific elements */
body.first-time-buyers .soft-fade,
body.buying .soft-fade,
body.downsizing-rightsizing .soft-fade,
body.move-up-growing-families .soft-fade {
  opacity: 0;
  transform: translateY(10px);
  animation: softFadeIn 0.45s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes softFadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   3. CARD SYSTEM (CONSISTENT ROUNDING & SHADOWS)
   ============================================================ */

/* Municipality cards (block #bid_2847891) */
#bid_2847891 .content-container {
  background: #fff;
  border: var(--iv-card-border);
  border-radius: var(--iv-card-radius);
  overflow: hidden;
  box-shadow: var(--iv-card-shadow);
}

#bid_2847891 .content {
  padding: var(--iv-card-padding);
}

#bid_2847891 .image-container img {
  display: block;
  width: 100%;
  height: auto;
}

#bid_2847891 .content-container:active {
  transform: scale(0.99);
  filter: brightness(0.97);
}

/* Desktop: equal-height cards with bottom-aligned buttons */
@media (min-width: 992px) {
  #bid_2847891 .content-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #bid_2847891 .image-container {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex: 0 0 auto;
  }

  #bid_2847891 .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #bid_2847891 .content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  #bid_2847891 .content .btn,
  #bid_2847891 .content a.btn,
  #bid_2847891 .content a.button {
    margin-top: auto;
    align-self: center;
  }
}

/* Homepage action cards (block #bid_4036099) */
#bid_4036099 :is(.content-container, .card, .item, .grid-item) {
  background: #fff;
  border: var(--iv-card-border);
  border-radius: var(--iv-card-radius);
  overflow: hidden;
  box-shadow: var(--iv-card-shadow);
}

#bid_4036099 :is(.image-container, .card-image, figure) {
  aspect-ratio: 16/9;
  overflow: hidden;
}

#bid_4036099 :is(.image-container img, .card-image img, figure img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 992px) {
  #bid_4036099 :is(.content-container, .card, .item, .grid-item) {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #bid_4036099 :is(.content, .card-body, .item-content) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--iv-card-padding);
  }

  #bid_4036099 :is(.content, .card-body, .item-content) :is(.btn, a.btn, a.button, button) {
    margin-top: auto;
  }
}

/* ============================================================
   4. SITE-WIDE CARD ROUNDING FIX
   ============================================================ */

/* MRP "boxes" style blocks */
.block-layout[class*="boxes-"] .block-column.has-bg,
.block-layout[class*="boxes-"] .block-column.has-bg-color,
.block-layout[class*="boxes-"] .block-column.has-bg-image {
  border-radius: var(--iv-card-radius) !important;
  overflow: hidden !important;
}

/* Force all inner layers to respect card rounding */
.block-layout[class*="boxes-"] .block-column.has-bg::before,
.block-layout[class*="boxes-"] .block-column.has-bg::after,
.block-layout[class*="boxes-"] .block-column.has-bg :is(
  .with-smart-bg-outer,
  .with-smart-bg-inner,
  .bg,
  .content,
  .content-container,
  .bg-link
) {
  border-radius: inherit !important;
}

/* Generic image + content card pattern */
.content-container.has-media.has-content {
  border-radius: var(--iv-card-radius) !important;
  overflow: hidden !important;
}

.content-container.has-media.has-content > .image-container,
.content-container.has-media.has-content > .image-container img {
  border-radius: 0 !important;
}

/* Hover state elevation */
.block-layout[class*="boxes-"] .block-column.has-bg:hover,
.content-container.has-media.has-content:hover {
  box-shadow: var(--iv-card-shadow-hover) !important;
}

/* ============================================================
   5. IMAGE INSET FIX (PREVENT CORNER GAPS)
   ============================================================ */

#content-well .content-container.has-media {
  padding: 0 !important;
  overflow: hidden;
}

#content-well .content-container.has-media > .content {
  padding: var(--iv-card-padding) !important;
}

#content-well .content-container.has-media :is(.image-container, figure, .card-image) {
  margin: 0 !important;
  border-radius: 0 !important;
}

#content-well .content-container.has-media :is(.image-container img, figure img, .card-image img) {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  object-fit: cover;
}

/* ============================================================
   6. PAGE-SPECIFIC FIXES
   ============================================================ */

/* Greater Victoria hero (#bid_5112708) - maintain white text on dark background */
#bid_5112708.inverted {
  color: #fff !important;
}

#bid_5112708.inverted :is(h1, h2, h3, h4, h5, h6, p, li, span, a) {
  color: #fff !important;
}

#bid_5112708 .title,
#bid_5112708 .subtitle {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}