/* CAPREIT theme - rules lifted verbatim from capreit.com's child theme
   (wp-content/themes/capreit/css/child-theme.css) so the header and
   page-header-section match the live site exactly. */

/* ---------- Typography ---------- */
/* Note: capreit.com declares Martel but never loads it (their Google Fonts
   import is commented out), so body text renders in the serif fallback -
   identical stack kept here for an exact match. Runda loads from their
   Adobe Fonts kit, linked in _Layout.cshtml. */
:root {
  --bs-font-sans-serif: runda, sans-serif !important;
  --bs-font-serif: "Martel", serif !important;
  --bs-body-font-family: var(--bs-font-serif);
  --bs-header-font-family: var(--bs-font-sans-serif);

  --bs-primary: #011252;
  --bs-primary-rgb: 1, 18, 82;
  --bs-success: #3ed365;
  --bs-success-rgb: 62, 211, 101;
  --bs-info: #279af0;
  --bs-info-rgb: 39, 154, 240;
  --bs-link-color: #011252;
  --bs-link-hover-color: #010e42;
}

html {
  font-size: 100%;
  position: relative;
  min-height: 100%;
}

body {
  font-size: 1.125rem;
  font-family: var(--bs-body-font-family);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4;
}

.wrapper {
  padding: 0;
}

/* Breathing room between the last content section and the footer */
#page-wrapper main {
  padding-bottom: 80px;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .btn {
  font-family: var(--bs-font-sans-serif);
}

h1, .h1 {
  font-weight: 300;
  position: relative;
}
h1:after, .h1:after {
  content: "";
  display: block;
  border-bottom: 4px solid #D73D52;
  min-width: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
}

h2, .h2 {
  font-size: 1.7rem;
  font-weight: 300;
  margin-bottom: 1.4em;
  padding-bottom: 30px;
  position: relative;
}
@media (min-width: 768px) {
  h2, .h2 {
    font-size: 2rem;
  }
}
@media (min-width: 992px) {
  h2, .h2 {
    font-size: 2.5rem;
  }
}
h2:after, .h2:after {
  content: "";
  display: block;
  border-bottom: 4px solid #D73D52;
  min-width: 70px;
  position: absolute;
  bottom: 0;
  left: 0;
}
h2.text-center:after, .text-center.h2:after {
  left: 50%;
  transform: translateX(-50%);
}

h4, .h4 {
  color: #011252;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom:20px;
}
@media (min-width: 768px) {
  h4, .h4 {
    font-size: 1.4rem;
  }
}
@media (min-width: 992px) {
  h4, .h4 {
    font-size: 1.625rem;
  }
}
.resident-response-cards {
    padding:0px 10px;
}
    .resident-response-cards .card {
        border-radius:5px;
    }
    .resident-response-cards .card-header {
        background-color: #ceeaff;
        font-family: runda, sans-serif !important;
        text-transform: uppercase;
        color: #011252;
        font-size: 14px;
        font-weight: bold;
    }
    h3.page-sub-title {
        font-weight: 700;
        font-family: "Martel", serif !important;
        color: #011252;
        font-size: 20px;
        margin: 30px 0px 20px 0px;
        display:block;
        position:relative;
        padding-bottom:20px;
    }
        h3.page-sub-title:after {
            content: "";
            display: block;
            border-bottom: 4px solid #D73D52;
            min-width: 50px;
            position: absolute;
            bottom: 0;
            left: 0;
        }

a {
    color: #011252;
}
a:hover {
  color: #010e42;
}

/* ---------- Buttons ---------- */
.btn {
  border: none;
  border-radius: 0;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.2s ease-out;
}
.btn:hover {
  background-repeat: no-repeat;
  background-size: 200% 100%;
}
@media (min-width: 768px) {
  .btn {
    font-size: 1.25rem;
  }
}

.btn-primary {
  background-image: linear-gradient(to right, #011252 0%, #279AF0 50%, #3ED365 100%);
  background-size: 260% 100%;
  background-position: 0 100%;
  color: #fff;
  padding: 15px;
}
@media (min-width: 768px) {
  .btn-primary {
    padding: 15px 60px;
  }
}
.btn-primary:hover {
  background-image: linear-gradient(to right, #011252 0%, #279AF0 50%, #3ED365 100%);
  background-position: 100%;
  background-color: #279AF0;
  background-repeat: no-repeat;
  color: #fff;
}

.btn-secondary {
  background-color: transparent;
  background-image: linear-gradient(to right, #011252 0, #011252 100%), linear-gradient(to right, #011252 0, #279af0 50%, #3ed365 100%);
  background-size: 0% 3px, 100% 3px;
  background-position: 0 bottom, 0 bottom;
  transition: background-size 0.3s ease-in-out;
  background-repeat: no-repeat;
  padding-bottom: 4px;
  border-bottom: 3px solid transparent;
  color: #011252;
  padding: 0;
}
.btn-secondary:hover {
  background-color: transparent;
  background-size: 100% 3px;
  color: #011252 !important;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

/* ---------- Accessibility helpers (understrap) ---------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

a.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
}

/* ---------- Header / navbar ---------- */
.bg-primary {
  background-image: linear-gradient(to right, #011252, #279af0, #3ed365);
}

nav#main-nav.navbar.bg-primary {
  background: white !important;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
}

@media (max-width: 991.98px) {
  .navbar-brand {
    max-width: 152px;
  }
}
.navbar-brand img {
  transition: all 0.3s ease-in-out;
}
.logo-shrink .navbar-brand img {
  max-width: 152px;
}

/* Their build strips Bootstrap's white navbar-dark link color; links inherit
   the theme's navy .nav-link color instead. Bootstrap 5.3 uses the
   --bs-navbar-color variable, so the equivalent override is explicit here. */
#main-nav .navbar-nav .nav-link {
  color: #011252;
}
#main-nav .navbar-nav .nav-link:hover,
#main-nav .navbar-nav .nav-link:focus {
  color: #010e42;
}

@media (min-width: 768px) {
  .navbar-nav {
    align-items: center;
  }
}
.navbar-nav > li > a {
  background-image: linear-gradient(90deg, #011252, #279af0, #3ed365);
  background-size: 0 3px;
  background-repeat: no-repeat;
  background-position: left bottom;
  text-decoration: none;
  font-family: var(--bs-font-sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-right: 0.85rem;
  margin-left: 0.85rem;
  transition: all 0.15s ease-in-out;
}
@media (min-width: 768px) {
  .navbar-nav > li > a {
    text-align: center;
  }
}
@media (min-width: 992px) {
  .navbar-nav > li > a {
    font-size: 1rem;
  }
}
.navbar-nav > li > a:hover {
  color: #279AF0;
  background-size: 100% 3px;
}
@media (max-width: 767.98px) {
  .navbar-nav > li.active > a {
    text-decoration: underline;
  }
}
@media (min-width: 768px) {
  .navbar-nav > li.active > a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    border-bottom: 3px solid #011252;
  }
}

.dropdown-toggle {
  padding-right: 10px !important;
}
.dropdown-toggle:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #011252;
  position: absolute;
  right: -14px;
  top: 54%;
  transform: translateY(-50%);
  opacity: 0.3;
}
.dropdown-toggle:after {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  margin: 0 !important;
}

@media (min-width: 768px) {
  #navbarNavDropdown.navbar-collapse {
    display: block !important;
    flex-grow: 0;
  }
}
.formDisclaimer {
    padding: 10px;
    background-color: #ffffdd;
    border-radius: 3px;
    margin-bottom: 1rem;
}
.navbar-toggler {
  color: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.1);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  color: #000 !important;
}

@media (min-width: 768px) {
  .navbar-nav li.contact-us a {
    background-image: linear-gradient(to right, #011252 0%, #279AF0 50%, #3ED365 100%);
    background-size: 260% 100%;
    background-position: 0 100%;
    color: #fff !important;
    padding-right: 1em !important;
    padding-left: 1em !important;
    border: none;
  }
  .navbar-nav li.contact-us a:hover {
    background-image: linear-gradient(to right, #011252 0%, #279AF0 50%, #3ED365 100%);
    background-position: 100%;
    background-color: #279AF0;
    background-repeat: no-repeat;
    color: #fff;
  }
  .navbar-nav li.contact-us a:after {
    content: none;
  }
}

.dropdown-menu {
  background-color: #011252;
  color: #fff;
  border: none;
}
.dropdown-menu a {
  color: #fff;
  font-size: 0.8765rem;
  font-family: var(--bs-font-sans-serif);
  font-weight: 700;
}
.dropdown-menu a:hover {
  background-color: transparent;
  color: #279AF0;
}

/* ---------- Page header section (hero) ---------- */
.page-header-section {
  position: relative;
  margin-bottom: 100px;
}

.page-header-section + div {
  margin-top: 0;
}

.page-header-section {
  background-position: 50% bottom;
  background-size: cover;
  -webkit-clip-path: polygon(100% 0, 100% 90%, calc(100px + 50%) 90%, 50% 100%, calc(50% - 100px) 90%, 0 90%, 0 0);
  clip-path: polygon(100% 0, 100% 90%, calc(100px + 50%) 90%, 50% 100%, calc(50% - 100px) 90%, 0 90%, 0 0);
  color: #fff;
  padding-bottom: 60px;
}
.page-header-section .container-fluid {
  padding-left: 1.5em;
  padding-right: 1.5em;
}
@media (max-width: 575.98px) {
  .page-header-section .container-fluid {
    height: 65vh;
  }
}
@media (min-width: 576px) {
  .page-header-section .container-fluid {
    padding: 8em 1.5em;
  }
}
@media (min-width: 768px) {
  .page-header-section .container-fluid {
    padding-top: 12em;
    padding-bottom: 9em;
  }
}
@media (min-width: 992px) {
  .page-header-section .container-fluid {
    padding-top: 13em;
    padding-bottom: 4em;
  }
}
.page-header-section .row {
  min-height: inherit;
}
@media (max-width: 575.98px) {
  .page-header-section .row {
    height: 100%;
  }
}
.page-header-section .row .content-wrap {
  background: linear-gradient(45deg, rgba(1, 17, 82, 0.8) 0, rgba(39, 154, 241, 0.8) 50%, rgba(47, 208, 87, 0.8) 100%);
  max-width: 985px;
  margin: auto;
  padding: 30px 0 40px;
  text-align: center;
}
@media (min-width: 768px) {
  .page-header-section .row .content-wrap {
    padding: 60px 0 45px;
  }
}
@media (max-width: 767.98px) {
  .page-header-section .row .content-wrap {
    margin-top: auto;
    transform: translateY(20%);
  }
}
@media (max-width: 575.98px) {
  .page-header-section .row .content-wrap.no-subhead {
    margin-top: calc(20% + 140px);
  }
}
@media (max-width: 767.98px) {
  .page-header-section .row .content-wrap.no-subhead {
    margin-top: auto;
    transform: translateY(40%);
  }
}
.page-header-section .row .content-wrap h1, .page-header-section .row .content-wrap .h1 {
  font-size: clamp(2rem, -0.875rem + 7vw, 3.75rem);
  margin-bottom: 40px;
  padding-bottom: 30px;
  position: relative;
}
.page-header-section .row .content-wrap h1:after, .page-header-section .row .content-wrap .h1:after {
  left: 50%;
  transform: translateX(-50%);
}
.page-header-section .row .content-wrap h2, .page-header-section .row .content-wrap .h2 {
  font-family: var(--bs-font-sans-serif);
  font-size: clamp(1.1rem, -0.875rem + 4vw, 2.125rem);
  font-weight: 700;
  margin: 0;
}
.page-header-section .row .content-wrap h2:after, .page-header-section .row .content-wrap .h2:after {
  content: none;
}
@media (min-width: 768px) {
  .page-header-section .row .content-wrap.no-subhead {
    padding: 98px 0 88px;
  }
}
.page-header-section .row .content-wrap.no-subhead h1, .page-header-section .row .content-wrap.no-subhead .h1 {
  margin-bottom: 0;
}
.page-header-section .row .btn {
  color: #011252;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .page-header-section .row .btn {
    font-size: 1.2rem;
  }
}
@media (min-width: 992px) {
  .page-header-section .row .btn {
    font-size: 1.375rem;
  }
}

/* Compact hero variant for app pages: same look as capreit.com's
   page-header-section but roughly half the height. The top padding only
   needs to clear the fixed navbar (~9em desktop, less on mobile where the
   logo shrinks). */
.page-header-section.compact {
  margin-bottom: 60px;
  padding-bottom: 40px;
}
.page-header-section.compact .container-fluid {
  height: auto;
  padding: 8em 1.5em 1.5em;
}
@media (min-width: 768px) {
  .page-header-section.compact .container-fluid {
    padding-top: 9em;
    padding-bottom: 2em;
  }
}
@media (min-width: 992px) {
  .page-header-section.compact .container-fluid {
    padding-top: 10.5em;
    padding-bottom: 2em;
  }
}
.page-header-section.compact .row .content-wrap,
.page-header-section.compact .row .content-wrap.no-subhead {
  margin-top: 0;
  transform: none;
  padding: 24px 0 20px;
}
.page-header-section.compact .row .content-wrap h1,
.page-header-section.compact .row .content-wrap .h1 {
  font-size: clamp(1.6rem, 0.5rem + 3vw, 2.5rem);
  margin-bottom: 0;
  padding-bottom: 18px;
}
.page-header-section.compact .row .content-wrap h2,
.page-header-section.compact .row .content-wrap .h2 {
  font-size: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
  margin-top: 14px;
}

/* ---------- Image panel (photo + copy section, from capreit.com) ---------- */
.image-panel {
  margin-top: 100px;
}
.image-panel.container-md .img-left .panel-content:after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
}

.image-panel-section {
  margin: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .image-panel-section {
    justify-content: center;
    display: flex;
  }
}
.image-panel-section .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 767.98px) {
  .image-panel-section .wrap {
    flex-direction: column;
  }
}
.img-wrap {
  position: relative;
}
.img-wrap picture,
.img-wrap img {
  width: 100%;
}
.image-panel-section .panel-content {
  background-color: #011252;
  color: #fff;
  padding-top: 0;
  width: 100%;
  position: relative;
}
.image-panel-section .panel-content.bg-white {
  color: #333;
}
.image-panel-section .panel-content.bg-white h4, .image-panel-section .panel-content.bg-white .h4 {
  color: #011252;
}
.image-panel-section .panel-content h2, .image-panel-section .panel-content .h2 {
  font-size: clamp(2rem, -0.875rem + 4.5vw, 2.5rem);
}
@media (max-width: 767.98px) {
  .image-panel-section .panel-content h2, .image-panel-section .panel-content .h2 {
    margin-top: 30px;
  }
}
.image-panel-section .panel-content p {
  font-size: clamp(1rem, -0.875rem + 2.8vw, 1.125rem);
  margin-bottom: 20px;
}
.image-panel-section .panel-content .btn {
  font-size: clamp(1rem, -0.875rem + 3vw, 1.25rem);
  margin-top: 30px;
}
@media (min-width: 768px) {
  .image-panel-section .panel-content .btn {
    margin-top: 80px;
  }
}
@media (min-width: 992px) {
  .image-panel-section.img-right .panel-content {
    padding: 0 140px 0 0;
  }
  .image-panel-section.img-left .panel-content {
    padding: 0 0 0 140px;
  }
}

/* Panel content inner padding (theme's .panel-content base rule) */
.panel-content {
  padding: 2em 1.5em;
  padding-bottom: 2em;
}
@media (min-width: 768px) {
  .panel-content {
    padding-left: 2.5em;
    padding-right: 2.5em;
  }
}

/* ---------- Forms (styled after capreit.com's contact form) ---------- */
/* White card the form sits in */
.cap-form-card {
  background: #fff;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.08);
  padding: 2em 1.5em;
}
@media (min-width: 768px) {
  .cap-form-card {
    padding: 3em 3.5em;
  }
}

/* Form heading, per their .gform_title (navy, bold, 1.625rem) */
.form-title, .cap-form-card .form-title {
  color: #011252;
  font-weight: 700;
  font-size: 1.625rem;
}

.required-legend {
  margin-bottom: 1.75rem;
}

.form-label {
  font-weight: 700;
  margin-bottom: 0.35rem;
}

/* Square inputs with the theme's 2px gray border */
.form-control, .form-select {
  border-radius: 0;
  border: 2px solid #dbdbdb;
  background-color: #fff;
  padding: 10px 12px;
}
.form-control::placeholder {
  color: #757575;
}
.form-control:focus, .form-select:focus {
  border-color: #279af0;
  box-shadow: 0 0 0 0.25rem rgba(39, 154, 240, 0.25);
}

/* ---------- Concern form ---------- */
#property-select-help {
  margin-top: 0.75rem;
}

/* Honeypot: moved off-screen rather than display:none so autofill bots still
   populate it; aria-hidden + tabindex=-1 keep it out of the accessibility tree */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Red required-field asterisk; #dc3545 keeps 4.5:1 contrast on white */
.required-indicator {
  color: #dc3545;
  font-weight: 700;
}

/* ---------- Footer (lifted verbatim from capreit.com's child theme) ---------- */
.footer-logo {
  margin-bottom: 20px;
}

#wrapper-footer-full {
  background-color: #011252;
  color: #fff;
  font-family: var(--bs-font-sans-serif);
  font-size: 1rem;
}
#wrapper-footer-full p {
  font-weight: 300;
}
#wrapper-footer-full a {
  color: #fff;
  transition: all 0.15s ease-in-out;
}
#wrapper-footer-full a:hover {
  color: #3ED365;
}
#wrapper-footer-full ul {
  list-style: none;
  padding: 0;
}
#wrapper-footer-full ul li {
  padding: 0;
  margin-bottom: 13px;
}
#wrapper-footer-full ul.menu li a {
  background-image: linear-gradient(90deg, #011252, #279AF0, #3ED365);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background-size 300ms ease;
}
#wrapper-footer-full ul.menu li a:hover {
  background-size: 100% 2px;
  color: #fff;
  opacity: 0.9;
  transition: all 0.15s ease-in-out;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}
#wrapper-footer-full #custom_html-2 a {
  font-weight: 700;
  text-decoration: none;
}
#wrapper-footer-full #custom_html-2 a:hover {
  color: #3ED365;
}

@media (max-width: 767.98px) {
  .menu-footer-second-column-container {
    margin-top: 20px;
  }
}

#media_image-4 {
  display: inline-block;
  margin-top: 30px;
  vertical-align: middle;
}
#media_image-4 img {
  width: 95px;
}

#custom_html-3 {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.social-media-icons a {
  margin-right: 15px;
  transition: all 0.2s ease-in-out;
}
.social-media-icons a:hover {
  opacity: 0.8;
}
.social-media-icons img {
  max-height: 20px;
}

.footer-bottom {
  max-width: 1640px;
  margin: auto;
}
.footer-bottom .col-12 {
  text-align: center;
}
@media (min-width: 768px) {
  .footer-bottom .footer-menu,
  .footer-bottom p {
    display: inline-block;
  }
}
.footer-bottom .footer-menu #menu-footer-menu {
  justify-content: center;
}
.footer-bottom .footer-menu #menu-footer-menu a {
  font-weight: 300;
  text-decoration: underline;
}
.footer-bottom .footer-menu #menu-footer-menu a:hover {
  text-decoration: none;
}
.footer-bottom .footer-menu #menu-footer-menu li:first-child a:after {
  content: "|";
  padding: 0 10px;
}
@media (min-width: 768px) {
  .footer-bottom .copyright {
    padding-left: 5em;
  }
}
/* Bootstrap's list-group styling would put white cards behind the bottom menu */
.footer-bottom .list-group-horizontal .menu-item,
.footer-bottom .list-group-horizontal {
  background: transparent;
  border: none;
}