/* colors.css imported globally via style.css */

/* ==========================================================================
   _layout.css – Container Widths, Grid Systems, Flex, Spacing, and Backgrounds
   ========================================================================== */

/* ==========================================================================
   Table of Contents
   ========================================================================== */
/**
 * 1.0 Container Widths and Alignment
 * 2.0 Grid Layouts
 * 3.0 Flex Layouts
 * 4.0 Spacing Utilities
 * 5.0 Background Sections
 * 6.0 Dark Mode Overrides
 * 7.0 Burlington Phase 2 Adjustments
 */

/* ==========================================================================
   1.0 Container Widths and Alignment
   ========================================================================== */
.IDX-wrapper-standard {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 var(--space-3);
}

/* ==========================================================================
   2.0 Grid Layouts
   ========================================================================== */
.IDX-resultsGrid {
  display: grid;
  gap: var(--space-4);
  /* 1.5rem */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Editorial grid utility for two-up content and lists */
.kr-grid {
  display: grid;
  gap: var(--space-3);
}

/* Make long ULs inside the grid split into two columns on md+ */
.kr-grid>ul {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .kr-grid {
    grid-template-columns: 1fr 1fr;
  }

  .kr-grid>ul {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   3.0 Flex Layouts
   ========================================================================== */
.IDX-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   4.0 Spacing Utilities
   ========================================================================== */
.IDX-spacing-sm {
  margin: var(--space-1) 0;
}

.IDX-spacing-md {
  margin: var(--space-3) 0;
}

.IDX-spacing-lg {
  margin: var(--space-5) 0;
}

/* Section spacing + anchor offset for sticky navs */
.kr-section {
  margin-top: 80px;
  scroll-margin-top: 140px;
}

/* ==========================================================================
   5.0 Background Sections
   ========================================================================== */
.IDX-section-light {
  padding: var(--space-5) var(--space-3);
  background-color: var(--gray-light);
  /* light gray */
}

.IDX-section-dark {
  padding: var(--space-5) var(--space-3);
  background-color: var(--color-info-dark);
  /* dark info color */
  color: var(--color-white);
  /* white */
}

/* ==========================================================================
   6.0 Dark Mode Overrides
   ========================================================================== */
/* IDX wrappers: enforce dark surface tokens when data-theme toggles */
body[data-theme="dark"] .idx-wrapper,
body[data-theme="dark"] .idx-content,
body[data-theme="dark"] .dsidx-details,
body[data-theme="dark"] .dsidx-wrapper {
  background-color: var(--dark-surface) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-kaplon-color-mode=system] .IDX-section-dark {
    background-color: var(--dark-bg);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard {
    background-color: var(--dark-surface);
  }

  html[data-kaplon-color-mode=system] .IDX-resultsGrid {
    background-color: transparent;
  }

  html[data-kaplon-color-mode=system] .IDX-spacing-sm,html[data-kaplon-color-mode=system] 
  .IDX-spacing-md,html[data-kaplon-color-mode=system] 
  .IDX-spacing-lg {
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .main-wrap,html[data-kaplon-color-mode=system] 
  .fw-property-documents-wrap h3 span,html[data-kaplon-color-mode=system] 
  .fw-property-details-wrap h3 span,html[data-kaplon-color-mode=system] 
  .blog-wrap,html[data-kaplon-color-mode=system] 
  .page-content-wrap,html[data-kaplon-color-mode=system] 
  .post-inner-wrap,html[data-kaplon-color-mode=system] 
  .post-footer-wrap,html[data-kaplon-color-mode=system] 
  .post-header-wrap,html[data-kaplon-color-mode=system] 
  .post-content-wrap,html[data-kaplon-color-mode=system] 
  .author-detail-wrap,html[data-kaplon-color-mode=system] 
  .post-comment-form-wrap,html[data-kaplon-color-mode=system] 
  .author-comment {
    background-color: var(--gray-darkest);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .article-wrap {
    background: var(--gray-900);
    box-shadow: var(--shadow-dark-md);
    color: var(--white-90);
  }
}

html[data-kaplon-color-mode=dark] .IDX-section-dark {
    background-color: var(--dark-bg);
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard {
    background-color: var(--dark-surface);
  }

html[data-kaplon-color-mode=dark] .IDX-resultsGrid {
    background-color: transparent;
  }

html[data-kaplon-color-mode=dark] .IDX-spacing-sm,html[data-kaplon-color-mode=dark] 
  .IDX-spacing-md,html[data-kaplon-color-mode=dark] 
  .IDX-spacing-lg {
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .main-wrap,html[data-kaplon-color-mode=dark] 
  .fw-property-documents-wrap h3 span,html[data-kaplon-color-mode=dark] 
  .fw-property-details-wrap h3 span,html[data-kaplon-color-mode=dark] 
  .blog-wrap,html[data-kaplon-color-mode=dark] 
  .page-content-wrap,html[data-kaplon-color-mode=dark] 
  .post-inner-wrap,html[data-kaplon-color-mode=dark] 
  .post-footer-wrap,html[data-kaplon-color-mode=dark] 
  .post-header-wrap,html[data-kaplon-color-mode=dark] 
  .post-content-wrap,html[data-kaplon-color-mode=dark] 
  .author-detail-wrap,html[data-kaplon-color-mode=dark] 
  .post-comment-form-wrap,html[data-kaplon-color-mode=dark] 
  .author-comment {
    background-color: var(--gray-darkest);
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .article-wrap {
    background: var(--gray-900);
    box-shadow: var(--shadow-dark-md);
    color: var(--white-90);
  }

/* Burlington Phase 2 Adjustments: Footer */
footer,
.footer-top-wrap,
.footer-bottom-wrap {
  background-color: var(--kaplon-footer-bg) !important;
  color: var(--kaplon-footer-text) !important;
}

.footer-top-wrap,
.footer-bottom-wrap {
  padding: var(--space-4) 0 !important;
}

footer a {
  color: var(--kaplon-footer-text);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
  text-decoration-color: color-mix(in oklab, var(--kaplon-footer-text) 65%, transparent);
}

footer a:hover,
footer a:focus-visible {
  color: var(--kaplon-footer-text);
  text-decoration-color: var(--kaplon-red);
  text-decoration-line: underline;
}

:where(footer, .site-footer) .wp-block-group {
  padding: 0;
  background-color: var(--kaplon-footer-bg);
  box-shadow: none;
}