/* -----------------------------------------

home-root.css

----------------------------------------- */


/* design tokens
----------------------------------------- */

:root {

  /* fonts */
  --font-text: "Poppins", var(--font-main-stack);
  --font-heading: "Poppins", var(--font-main-stack);
  --font-awesome: "Font Awesome 7 Pro";

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  --primary: #3a6cd8;
  --primary-hover: #0540ac;
  --ultralight: #f5f8fd;
  --light: #ebf0fb;
  --med: #cedaf5;

  --secondary: #151616;
  --secondary-hover: #2a2b2c;
  --ultralight-secondary: #f0f0f1;
  --light-secondary: #e1e2e2;
  --med-secondary: #c3c4c5;

  --content-border-color: #dfeef9;

  --accent: #000;

  --bg-color: #ffffff;
  --color-text: #696c6f;
  --color-text-darkened: #353638;
  --color-text-muted: #8a8d8f;

  --bg-color-dark: #25262a;
  --bg-color-dark-card: #3b3c3f;

  --button-bg: var(--primary);
  --button-color-text: var(--bg-color);

  --container-margin: 6rem;
  --home-padding: 9rem;
  --home-design-margin: 1rem;
  --home-icon-size-xl: 5rem;
  --home-icon-size-lg: 4rem;
  --home-icon-size-sm: 2rem;
  --border-radius: 1rem;
  --button-border-radius: 0.75rem;
  --button-padding: 0.75rem 1.25rem;
  --flickity-button-width: 3rem;

}

@media(min-width: 1280px) {

  :root {
    --container-margin: 8rem;
  }

}

@media(max-width: 62rem) {

  :root {
    --container-margin: 1.5rem;
    --home-padding: 6rem;
  }

}

/* color utilities
----------------------------------------- */

.bg-dark {
  background: var(--bg-color-dark);
  color: var(--color-text-dark);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6 {
  color: var(--ultralight);
}
.color-primary {
  color: var(--primary);
}
.color-secondary {
  color: var(--secondary);
}
.color-text {
  color: var(--color-text);
}
.color-muted {
  color: var(--color-text-muted);
}
.bg-dark .color-muted {
  color: var(--color-text-dark-muted);
}
.bg-primary {
  background: var(--primary);
}
.bg-secondary {
  background: var(--secondary);
}
.bg-white {
  background: white;
}
.bg-ultralight {
  background: var(--ultralight);
}
.bg-light {
  background: var(--light);
}
.bg-ultralight-secondary {
  background: var(--ultralight-secondary);
}
.bg-ultralight-secondary {
  background: var(--light-secondary);
}

/* text utilities
----------------------------------------- */

.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}
.text-display {
  font-family: var(--font-display);
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1.65;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.65;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75;
}
.text-darkened {
  color: var(--color-text-darkened);
}
.text-muted {
  color: var(--color-text-muted);
}
.weight-regular {
  font-weight: var(--weight-regular);
}
.weight-medium {
  font-weight: var(--weight-medium);
}
.weight-semibold {
  font-weight: var(--weight-semibold);
}
.weight-bold {
  font-weight: var(--weight-bold);
}
.weight-heavy {
  font-weight: var(--weight-heavy);
}


/* base theme bug fixes
----------------------------------------- */

.site-header-top-row {
  overflow: hidden; /* fix overflow caused by cta */
}
.site-header-menu-row .logo {
  height: 100%;
  width: auto;
  max-width: 15rem;
}

/* fix announcement bar height */

.site-header-announcement-banner {
  min-height: 0;
}

/* reset the "extra sections" padding */

.site-extra-section.layout-content-only,
.site-extra-section.layout-content-only .site-extra-section .content,
.site-extra-section .content {
  padding: 0 !important;
}


/* components
----------------------------------------- */

.home-feature-list {
  margin: 0 0 1rem 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.home-feature-list li {
  display: block;
  position: relative;
  padding-left: 2rem;
}
.home-feature-list li::before {
  font-family: var(--font-awesome);
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.25rem;
  content: '\f058';
}
.home-feature-list li strong {
  font-weight: 700;
  color: var(--text-darkened);
}

/* sitewide styles
----------------------------------------- */

::selection {
  background: var(--primary);
  color: white;
}

html {
  font-smoothing: subpixel-antialiased; /* sharper on non-retina displays */
  -webkit-font-smoothing: antialiased; /* cleaner on retina displays */
  font-optical-sizing: auto;
  font-style: normal;
}

/* container */
.site-container {
  max-width: calc(100% - (var(--container-margin) * 2));
}

/* buttons */
.site-btn,
.site-button {
  display: inline-block;
}
.site-btn > a,
.site-button > a {
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
  display: inline-flex;
  justify-content: center;
  align-content: center;
  background: var(--button-bg);
  color: var(--button-color-text);
  border: 0.125rem solid transparent;
  line-height: 1;
  font-size: 1rem;
}

/* rtt button */
.site-rtt {
  color: white;
  background: var(--accent);
}
.site-rtt:hover {
  background: var(--accent-hover);
}

/* basic footer styles */
footer {
  background: var(--bg-color-dark);
  color: var(--color-text-dark-muted);
  border: none;
}
footer .site-grid a,
footer a {
  color: var(--color-text-dark);
}
/* normalize footer legal spacing; let gap: handle it */
footer .legal .site-container * {
  margin: 0;
}
footer .legal .site-container {
  gap: 1rem;
}
/* normalize footer legal link colors */
footer .legal a {
  color: inherit;
}

/* extra sections
----------------------------------------- */

/* simplified header
----------------------------------------- */

.site-header-top-row {
  background: var(--bg-color);
  color: var(--color-text);
  font-weight: 500;
  font-size: 1rem;
}

/* header icons */
.site-header-top-row ul.contact-info li::before, .site-header-top-row ul.menu li::before, .site-header-top-row ul.menu li i.menu-icon  {
  font-weight: 900;
  color: var(--primary);
}

/* header cta */
.site-header-top-row li.cta {
  background: var(--bg-color);
}
.site-header-top-row li.cta a {
  padding: 0.25rem 1.75rem;
  border-radius: var(--button-border-radius);
  border: 0.125rem solid var(--color-text);
  color: var(--color-text);
  transition: 0.2s color, 0.2s border;
}
.site-header-top-row li.cta a:hover {
  background: var(--primary);
  color: var(--bg-color);
  border-color: var(--primary);
}
.site-header-top-row li.cta i.menu-icon {
  color: var(--color-text) !important;
  transition: 0.2s color;
}
.site-header-top-row li.cta a:hover i.menu-icon {
  color: var(--bg-color) !important;
}
.site-header-top-row li, .site-header-top-row li a {
  color: var(--color-text);
}
.site-header-top-row li, .site-header-top-row li a:hover {
  color: var(--color-text-darker);
}
.site-header-top-row li.cta::after {
  display: none;
}

@media(max-width: 36rem) {
  .site-header-top-row .site-container {
    padding: 0.5rem var(--home-design-margin);
  }
  .site-header-top-row ul.contact-info li {
    text-wrap: balance;
  }
  .site-header-top-row ul.contact-info li a {
    line-height: 1.25;
  }
}

/* desktop nav menu
----------------------------------------- */

#header-menu-mobile a i {
  color: var(--primary);
}

/* desktop nav menu
----------------------------------------- */

@media(min-width: 62rem) {

  .site-header-menu-row .site-nav-menu > ul > li {
    flex-grow: 0; /* 1 to grow */
  }

  .site-header-menu-row .site-nav-menu > ul {
    gap: 0.5rem;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
  }

  .site-header-menu-row .site-nav-menu > ul > li {
    justify-content: flex-start; 
  }

  .site-header-menu-row .site-nav-menu > ul > li > a {
    color: var(--secondary);
    display: inline-flex;
    width: auto;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
  }

  /* the active top-level links */
  .site-header-menu-row .site-nav-menu > ul > li.active {
    background: none;
  }
  .site-header-menu-row .site-nav-menu > ul > li.active > a  {
    background: var(--primary);
    color: #fff;
  }
  .home .site-nav-menu>ul>li.active>a:hover /* fix from base css */ {
    color: #fff;
    background: var(--primary);
  }

  /* the drop-down menus */
  .site-nav-menu>ul>li.menu-item-has-children>ul {
    border-radius: var(--border-radius);
    top: calc(100% + ( var(--home-design-margin) / 2));
  }


  /* the drop-down menu children */
  .site-nav-menu li.menu-item-has-children > ul li a {
    font-size: 1rem;
    border: none;
    color: var(--color-text);
    transition: 0.2s background, 0.2s color;
  }
  .site-nav-menu li.menu-item-has-children > ul li a:hover {
    background: var(--ultralight);
    color: var(--primary);
  }

  /* new icon grid menus */
  ul.cta-menu-open .cta-menu-container {
    margin: 0;
  }

  /* grid menu container */
  .site-nav-menu>ul>li.grid-menu.active>ul, .site-nav-menu>ul>li.grid-menu.active>.cta-menu-container>ul {
    padding: 2rem;
  }
  /* grid menu columns */
  .site-nav-menu li.grid-menu>ul li, .site-nav-menu li.grid-menu>.cta-menu-container>ul li,
  .site-nav-menu ul li.grid-menu ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .site-nav-menu li.grid-menu>ul li a, .site-nav-menu li.grid-menu>.cta-menu-container>ul li a {
    margin: 0;
    padding: 0;
  }

  /* grid menu icon */
  .sub-menu .menu-item:not(.menu-item-has-children)>a:has(.menu-item-description-outer) i {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    font-family: 'Font Awesome 7 Pro';
    color: var(--secondary-50);
    width: 3rem;
    height: 100%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s color;
  }
  .sub-menu .menu-item:not(.menu-item-has-children)>a:has(.menu-item-description-outer):hover i {
    color: var(--primary);
  }

  /* grid/submenu titles */
  .sub-menu > li.no-url > a {
    color: var(--secondary);
    font-weight: 800;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: var(--base-h5-size);
  }

  /* the menu item text */
  .sub-menu .menu-item:not(.menu-item-has-children) .menu-item-description-outer {
    gap: 0.2rem;
    text-wrap: balance;
  }
  .sub-menu .menu-item:not(.menu-item-has-children) .menu-item-description {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5em;
    font-weight: 500;
    color: var(--text-lighter);
    max-width: 90%;
    text-wrap: balance;
  }

  /* grid menu carets */
  .site-nav-menu li.grid-menu>ul li a::after, .site-nav-menu li.grid-menu>.cta-menu-container>ul li a::after {
    color: var(--primary);
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
  }

}

/* general home styles
----------------------------------------- */

/* home sections */
.home section,
section.padded {
  padding: var(--home-padding) 0;
}
/* section utils */
section.rounded {
  width: calc(100% - (var(--home-design-margin) * 2));
  margin-left: var(--home-design-margin);
  border-radius: var(--border-radius);
  overflow: hidden;
}
section.rounded.margin-top {
  margin-top: var(--home-design-margin);
}
section.no-padding {
  padding: 0;
}
section.no-top-padding {
  padding-top: 0;
}
section.no-bottom-padding {
  padding-bottom: 0;
}

/* image utilities */
.img-cover {
  position: relative;
}
.img-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-cover.absolute img {
  position: absolute;
  inset: 0 0 0 0;
}
.img-contain img {
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
  display: block;
  border-radius: var(--border-radius);
}
.home .section .img,
.home .section .img-cover {
  /* simple image placeholder */
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.img-3x2 {
  width: 100%;
  aspect-ratio: 3/2;
}

/* home grids w/ breakpoints */
.home .site-grid {
  gap: 2rem;
}
.site-grid.no-gap {
  gap: 0;
}
.site-grid.columns-2 {
  grid-template-columns: repeat(2, 2fr);
}
.site-grid.columns-3 {
  grid-template-columns: repeat(3, 3fr);
}
.site-grid.columns-4 {
  grid-template-columns: repeat(4, 4fr);
}
@media(max-width: 62rem) {
  .site-grid.columns-2 {
    grid-template-columns: repeat(1, 1fr);
  }
  .site-grid.columns-3 {
    grid-template-columns: repeat(1, 1fr);
  }
  .site-grid.columns-4 {
    grid-template-columns: repeat(2, 2fr);
  }
}
@media(max-width: 48rem) {
  .site-grid.columns-4 {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* home grid items */
.home .site-grid .grid-item {
  text-wrap: balance;
}
.home .site-grid .grid-item.padded {
  padding: 2rem;
}
.home .site-grid .grid-item.centered {
  text-align: center;
}

/* standard home intro (and outro) section w/ modifiers */
.home-intro {
  margin-bottom: calc( var(--home-padding) * 0.5 );
}
.home-intro.half-margin {
  margin-bottom: calc( var(--home-padding) * 0.25 );
}
.home-outro {
  text-align: center;
  margin-top: calc( var(--home-padding) * 0.5 );
}
.home-intro.no-margin,
.home-outro.no-margin {
  margin: 0;
}
.home-intro.padded,
.home-outro.padded {
  padding-right: 25%;
  padding-left: 25%;
}
.home-intro.left,
.home-outro.left {
  text-align: left;
}
.home-intro,
.home-outro {
  text-wrap: balance;
}
.home-intro h2 {
  color: var(--primary);
  font-weight: 800 !important;
}
.bg-dark .home-intro h2 {
  color: var(--ultralight-secondary);
}
.home-intro p.label {
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.home-intro p.lead {
  font-size: 1.125rem;
  color: var(--text-darkened);
  margin: 0;
  font-weight: 400;
  line-height: 1.75;
}
@media(max-width:62rem) {
  .home-intro.padded,
  .home-outro.padded {
    padding: 0;
  }
}

/* standard home icon styles */
.home-icon {
  width: var(--home-icon-size-lg);
  height: auto;
  font-size: calc( var(--home-icon-size-lg) * 0.5 );
  aspect-ratio: 1;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
}
.home-icon.centered {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 2rem;
}
.home-icon.small {
  width: var(--home-icon-size-sm);
  font-size: calc( var(--home-icon-size-sm) * 0.5 );
  border-radius: calc( var(--btn-border-radius) * 0.5 );
}
.home-icon.small.centered {
  margin-bottom: 1rem;
}
.home-icon.xl {
  width: var(--home-icon-size-xl);
  font-size: calc( var(--home-icon-size-xl) * 0.5 );
}

/* standard home icon box styles */
.home-icon-boxes .grid-item {
  background: var(--ultralight-secondary);
  padding: 2rem;
  border-radius: var(--border-radius);
}
.home-icon-boxes.bg-dark .grid-item {
  background: var(--bg-color-dark-card);
}
.home-icon-boxes .grid-item h3 {
  font-size: var(--base-h5-size);
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.home-icon-boxes.bg-dark .grid-item h3 {
  color: var(--ultralight-secondary);
}

/* standard home footer map */

.home-map {
  background: white;
  padding-left: var(--container-margin);
  padding-right: var(--container-margin);
  padding-top: var(--home-padding);
  padding-bottom: var(--home-padding);
}
.home-map .site-grid {
  grid-template-columns: repeat(2, 2fr);
  gap: var(--home-design-margin);
}
.home-map .text {
  background: var(--ultralight-secondary);
  padding: var(--container-margin) 2rem;
  border-radius: var(--border-radius);
  background: var(--primary);
  color: rgba(255, 255, 255, 0.85);
}
.home-map .text h4 {
  color: white;
  font-weight: 800;
  font-size: var(--base-h2-size);
  margin-bottom: 2rem;
  max-width: 75%;
}
.home-map .text a {
  color: white;
}
.home-map .map {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.home-map .map iframe,
.home-map .map .kml-map-render {
  top: 0;
  height: 100%;
  width: 100%;
  aspect-ratio: 3/2;
}

@media(max-width:62rem) {
  .home-map .site-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .home-map .map iframe {
    height: auto;
    aspect-ratio: 3/2;
  }
}

/* extra sections
----------------------------------------- */

.extra-section-financing {
  padding: var(--home-padding) 0;
}
.extra-section-financing .text {
  text-align: left;
  text-wrap: balance;
  align-content: center;
  background: var(--ultralight);
  padding: 2rem;
  border-radius: var(--border-radius);
}
.extra-section-financing .text h2 {
  font-weight: 800 !important;
  color: var(--primary);
  font-size: var(--base-h3-size);
}
.extra-section-financing .img {
  align-content: center;
}
.extra-section-financing .img .img-cover {
  border-radius: var(--border-radius);
  overflow: hidden;
}
