/* =============================================================================
   SAVERS BANK - CSS OVERRIDES
   Organized override styles for better maintainability
   Version: 2.0 - Updated with new components and better organization
   ============================================================================= */

/* =============================================================================
   TABLE OF CONTENTS
   ============================================================================= 
   1. CONTENT CARD LAYOUTS
   2. BUTTON STYLES & HOVER STATES
   3. HERO SECTION OVERRIDES
   4. TYPOGRAPHY FIXES
   5. FORM ELEMENTS
   6. EMPLOYEE CARDS
   7. INTERACTIVE ELEMENTS
   8. LAYOUT UTILITIES
   9. RESPONSIVE OVERRIDES
   10. COMPONENT-SPECIFIC FIXES
   11. DISCLAIMER & LEGAL TEXT
   12. SPECIALIZED HERO VARIANTS
   ============================================================================= */


/* =============================================================================
   1. CONTENT CARD LAYOUTS
   ============================================================================= */

/* Remove special styling from open-account-box to make all boxes consistent */
.content-card .open-account-box {
  border: none !important;
  padding: 0 !important;
}

/* Ensure all content-card boxes have consistent styling */
.content-card .box {
  background-color: #fff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2) !important;
  padding: 2rem !important;
  height: 100% !important;
  transition: all .4s ease !important;
  border-radius: 0.375rem !important;
}

/* Maintain existing hover effects */
.content-card .box:hover {
  box-shadow: 0px 0px 30px 0px #41b28d !important;
}

/* White background variant for content cards */
.content-card-white {
  background: #fff;
  isolation: isolate;
  padding-block: 4rem 1rem;
  position: relative;
}

.content-card-white .box {
  background-color: #f8f9fa !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0px 4px 12px 0px rgba(0,0,0,.1) !important;
  padding: 2rem !important;
  height: 100% !important;
  transition: all .4s ease !important;
  border-radius: 0.375rem !important;
}

.content-card-white .box:hover {
  box-shadow: 0px 0px 20px 0px #41b28d !important;
}

/* Service row cards with white backgrounds */
.services-row.white-cards .box {
  background-color: #fff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0px 4px 12px 0px rgba(0,0,0,.15) !important;
}

.services-row.white-cards .box:hover {
  box-shadow: 0px 0px 20px 0px #41b28d !important;
}

/* 2x2 Grid Layout - Equal width boxes */
@media (min-width: 768px) {
  .content-card .row {
    display: flex;
    flex-wrap: wrap;
  }

  .content-card .col-md-6 {
    display: flex;
    width: 50%;
    margin-bottom: 3rem;
  }

  .content-card .box {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Ensure equal height columns in 2x2 grid */
  .content-card .row > [class*="col-"] {
    display: flex;
  }
  
  .content-card .box {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .content-card .box ul {
    flex-grow: 1;
  }
}

/* Mobile - stack boxes vertically */
@media (max-width: 767px) {
  .content-card .col-md-6 {
    margin-bottom: 2rem;
  }
}


/* =============================================================================
   2. BUTTON STYLES & HOVER STATES
   ============================================================================= */

/* Terracotta button - Primary brand color */
/* .cta.terracotta,
.hero .cta.terracotta {
  background-color: #c1704e !important;
  border-color: #c1704e !important;
  color: #fff !important;
  transition: all .4s ease !important;
} */

/* .cta.terracotta:hover,
.hero .cta.terracotta:hover {
  background-color: #fff !important;
  color: #c1704e !important;
  border-color: #c1704e !important;
} */

/* Blue button - Secondary brand color */
.cta.blue {
  background-color: #1493d1 !important;
  border-color: #1493d1 !important;
  color: #fff !important;
  transition: all .4s ease !important;
}

.cta.blue:hover {
  background-color: #fff !important;
  color: #1493d1 !important;
  border-color: #1493d1 !important;
}

/* Green button - Accent color */
.cta.green {
  background-color: #07603b !important;
  border: 1px solid #07603b !important;
  color: #fff !important;
  transition: all .4s ease !important;
}

.cta.green:hover {
  background-color: #fff !important;
  color: #07603b !important;
  border-color: #07603b !important;
}

/* Bright green button - Additional accent color */
.cta.bright-green {
  background-color: #41b28d !important;
  border: 1px solid #41b28d !important;
  color: #fff !important;
  transition: all .4s ease !important;
}

.cta.bright-green:hover {
  background-color: #fff !important;
  color: #41b28d !important;
  border-color: #41b28d !important;
}

/* White-black button variation */
.cta.white-black {
  background-color: #000 !important;
  border: 1px solid #fff !important;
  color: #fff !important;
  transition: all .4s ease !important;
}

.cta.white-black:hover {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}

/* Button styling for bright-green leaf containers */
.leaf.bright-green .cta {
  background-color: #fff !important;
  border: 1px solid #fff !important;
  color: #c1704e !important;
  transition: all .4s ease !important;
}

.leaf.bright-green .cta:hover {
  background-color: #41b28d !important;
  border-color: #FFF !important;
  color: #fff !important;
}

/* Bar text image section buttons */ 

/* Application CTA section buttons */
.application-cta-section .cta {
  background-color: #c1704e !important;
  border: 1px solid #c1704e !important;
  color: #fff !important;
  min-width: 220px !important;
  padding: 1rem 2rem !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  transition: all .4s ease !important;
}

.application-cta-section .cta:hover {
  background-color: #fff !important;
  color: #c1704e !important;
  border-color: #c1704e !important;
}

/* Bottom CTA button fixes */
.cta-bottom .cta.terracotta {
  background-color: #c1704e !important;
  border: 1px solid #c1704e !important;
  color: #fff !important;
  transition: all .4s ease !important;
}

.cta-bottom .cta.terracotta:hover {
  background-color: #fff !important;
  color: #c1704e !important;
  border-color: #c1704e !important;
}

/* Employee-specific CTA styling */
.employee-cta {
  font-size: 12px !important;
  padding: 0.6rem 1.2rem !important;
  margin-top: 0.5rem !important;
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
}


/* =============================================================================
   3. HERO SECTION OVERRIDES
   ============================================================================= */

/* Investment hero text width - matches business/personal */
body.investment.kitchen-sink .hero .hero__text {
  max-width: 540px !important;
}

@media (min-width: 768px) {
  body.investment.kitchen-sink .hero .hero__text {
    max-width: 540px !important;
    padding: 2.5rem 2.5rem 2.5rem calc((100% - 1280px) / 2) !important;
  }
  
  body.investment.kitchen-sink .hero .hero__text:before {
    width: 100vw !important;
  }
}

@media (min-width: 1200px) {
  body.investment.kitchen-sink .hero .hero__text {
    max-width: 640px !important;
    padding: 3rem 3rem 3rem calc((100% - 1280px) / 2) !important;
  }
}

@media (min-width: 1600px) {
  body.investment.kitchen-sink .hero .hero__text {
    max-width: 700px !important;
    padding: 3.5rem 3.5rem 3.5rem calc((100% - 1280px) / 2) !important;
  }
}


/* =============================================================================
   4. TYPOGRAPHY FIXES
   ============================================================================= */

/* Clickable card text sizing */
.kitchen-sink .clickable-card p,
.kitchen-sink .clickable-card li {
  color: #000;
  font: 300 16px "Source Sans 3", sans-serif;
}

/* List item font sizes across components */
/* .content-card .box li,
.services-row .box li,
.box li,
.text ul li {
  font-size: 18px !important;
} */

/* Copy content list items */
.copy-content li {
  font: 300 18px / 1.6 "Source Sans 3", sans-serif;
}

.copy-content.resource li {
  font-size: 18px !important;
  font-family: "Source Sans 3", sans-serif !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
}

/* Card large text sizing */
.card-lg {
  font-size: 19px !important;
}

/* Footer header text fix */
.footer .links h2 {
  font-size: 14px !important;
}

/* =============================================================================
   5. FORM ELEMENTS
   ============================================================================= */

/* Bootstrap gutter adjustment */
/* .g-5,
.gy-5 {
  --bs-gutter-y: 1rem;
} */


/* =============================================================================
   6. EMPLOYEE CARDS
   ============================================================================= */

/* Compact employee card layout with full-height images */
.employee-card {
  box-shadow: 0px 4px 12px 0px rgba(0,0,0,.1);
  transition: all .3s ease;
  border: 1px solid rgba(0,0,0,0.05);
  height: 160px;
  margin-bottom: 1rem; /* Add space between cards on mobile */
}

.employee-card:hover {
  box-shadow: 0px 8px 20px 0px rgba(0,0,0,.15);
  transform: translateY(-2px);
}

/* Employee card grid structure */
.employee-card .row {
  height: 100%;
  margin: 0; /* Remove Bootstrap row margins */
}

.employee-card .col-4,
.employee-card .col-8 {
  padding: 0; /* Remove Bootstrap column padding */
}

.employee-card .col-4 {
  padding: 0 !important;
  display: flex;
  align-items: stretch;
}

/* Employee image styling */
.employee-img {
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.employee-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Employee information text */
.employee-info {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem !important; /* Override Bootstrap padding */
}

.employee-info h3 {
  color: #231f20;
  font: 700 15px "Source Sans 3", sans-serif;
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.employee-info h4 {
  color: #07603b;
  font: 600 13px "Source Sans 3", sans-serif;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.employee-info p {
  color: #231f20;
  font: 400 12px "Source Sans 3", sans-serif;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.employee-info p a {
  color: #1493d1;
  text-decoration: none;
  word-break: break-word; /* Prevent email overflow */
}

.employee-info p a:hover {
  text-decoration: underline;
}

.employee-info .cta {
  font-size: 10px !important;
  padding: 0.4rem 0.8rem !important;
  margin-top: 0.5rem;
  white-space: nowrap; /* Prevent button text wrapping */
  max-width: 100%; /* Ensure button doesn't overflow */
  box-sizing: border-box;
}

/* Employee card responsive adjustments */
@media (min-width: 768px) {
  .employee-card {
    margin-bottom: 0; /* Remove bottom margin on desktop */
  }
}

@media (min-width: 1200px) {
  .employee-card {
    height: 180px;
  }
  
  .employee-info h3 {
    font-size: 17px;
  }
  
  .employee-info h4 {
    font-size: 14px;
  }
  
  .employee-info p {
    font-size: 13px;
  }
  
  .employee-info .cta {
    font-size: 11px !important;
    padding: 0.5rem 1rem !important;
  }
}


/* =============================================================================
   7. INTERACTIVE ELEMENTS
   ============================================================================= */

/* Toggle/Accordion functionality */
/* .toggle-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
} */

/* .toggle-header > p {
  color: #41b28d;
  margin-bottom: 0;
} */

/* .toggle-icon {
  font-size: 32px;
  font-weight: bold;
  color: #41b28d;
  user-select: none;
  line-height: 1;
} */

/* .leaf .toggle-header > p, .leaf .toggle-icon {
  color: #fff;
} */

/* =============================================================================
   8. LAYOUT UTILITIES
   ============================================================================= */

/* Spacing utilities */
.extra-space {
  margin-top: 60px !important;
}

.clear-box {
  margin: 100px 0 0 0;
}

.bump-right {
  margin-left: 8px;
}

/* Full-width application CTA section */
.application-cta-full-width {
  background: linear-gradient(135deg, #41b28d 0%, #07603b 100%);
  margin: 3rem 0 0 0;
  padding: 4rem 0;
}

.application-cta-section {
  background-color: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 0.5rem;
  padding: 3rem;
  box-shadow: 0px 12px 24px 0px rgba(0,0,0,.15);
  backdrop-filter: blur(10px);
}

.application-cta-section h3 {
  color: #07603b;
  font: 700 28px "Montserrat", sans-serif;
}

.application-cta-section p {
  color: #231f20;
  font: 300 18px "Source Sans 3", sans-serif;
  max-width: 600px;
  margin: 0 auto 2rem auto;
}


/* =============================================================================
   9. RESPONSIVE OVERRIDES
   ============================================================================= */

/* Responsive adjustments for application CTA */
@media (min-width: 768px) {
  .application-cta-section h3 {
    font-size: 32px;
  }
  
  .application-cta-section p {
    font-size: 20px;
  }
  
  .application-cta-section .cta {
    min-width: 240px !important;
  }
}

@media (min-width: 1600px) {
  .application-cta-section h3 {
    font-size: 36px;
  }
  
  .application-cta-section p {
    font-size: 22px;
  }
  
  .application-cta-section .cta {
    font-size: 18px !important;
    min-width: 260px !important;
    padding: 1.25rem 2.5rem !important;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
  .application-cta-full-width {
    margin: 2rem 0 0 0;
    padding: 2.5rem 0;
  }
  
  .application-cta-section {
    padding: 2rem 1.5rem;
    margin: 0 1rem;
  }
}


/* =============================================================================
   10. COMPONENT-SPECIFIC FIXES
   ============================================================================= */

/* Hording wide overlay positioning fixes */
.hording-wide .over-text .leaf.end {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
}

@media (min-width: 768px) {
  .hording-wide .over-text .leaf.end {
    max-width: 500px !important;
    padding: 2.5rem !important;
    margin-right: 40px !important;
    margin-bottom: 40px !important;
  }
}

@media (min-width: 1200px) {
  .hording-wide .over-text .leaf.end {
    max-width: 600px !important;
    padding: 3rem !important;
  }
}

@media (min-width: 1600px) {
  .hording-wide .over-text .leaf.end {
    max-width: 700px !important;
    padding: 3.5rem !important;
  }
}

/* Hording wide start positioning */
.hording-wide .over-text .leaf.start {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 10 !important;
}

@media (min-width: 768px) {
  .hording-wide .over-text .leaf.start {
    max-width: 500px !important;
    padding: 2.5rem !important;
    margin-left: 40px !important;
    margin-top: 40px !important;
  }
}

@media (min-width: 1200px) {
  .hording-wide .over-text .leaf.start {
    max-width: 600px !important;
    padding: 3rem !important;
  }
}

@media (min-width: 1600px) {
  .hording-wide .over-text .leaf.start {
    max-width: 700px !important;
    padding: 3.5rem !important;
  }
}


/* =============================================================================
   11. DISCLAIMER & LEGAL TEXT
   ============================================================================= */

/* Disclaimer text styling */
.disclaimer {
  color: #58595b;
  font-size: 14px !important;
}

.text-row .disclaimer,
.note .disclaimer {
  font-size: 14px !important;
  font-style: italic !important;
}

/* =============================================================================
   END OF ORGANIZED OVERRIDES
   ============================================================================= */

.kitchen-sink .clickable-card h2.blue-header {
  color: #1493d1;
  font: 700 20px "Source Sans 3",sans-serif;
}

.application-cta-section div.mb-4 > p {
  margin-bottom: 0;
}

@media (min-width: 768px) {
.box .pic {
    height: 250px;
  }
}

.box .pic img {
  object-fit: cover;
}

.gx-6 {
  --bs-gutter-x: 5rem;
}

.gx-7 {
  --bs-gutter-x: 7rem;
}

/* .theme-text * {
  color: inherit;
} */

.text-section {
  background: #f0f0f0;
}

.text-section a {
  color: #41b28d;
  font-weight: 600;
  text-decoration: none;
}

.page-nav-link {
  color: #58595b;
  font: 600 16px "Montserrat",sans-serif;
}

@media (min-width: 768px) {
  .page-nav-link:not(:last-child):after {
    content: "|";
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.page-nav-link a {
  color: inherit;
  text-decoration: none;
}

.page-nav-link a:hover, .page-nav-link a.active {
  color: #41b28d;
}

.kitchen-sink .clickable-card a .text,
.news-blog .box .text  {
  color: #000;
}

/* CKEditor Styling START */
figure.image > figcaption {
  margin-top: 1rem;
}

figure.image.image-style-align-left, .image-style-align-left {
  float: left;
  margin-right: 3rem;
}

figure.image.image-style-side, .image-style-align-right {
  float: right;
  margin-left: 3rem;
}

figure.table table {
  border: 1px solid #231f20;
}

figure.table table tbody,
figure.table table td,
figure.table table tfoot,
figure.table table th,
figure.table table thead,
figure.table table tr {
  border-width: 0;
}

figure.table table thead {
  vertical-align: bottom;
}

figure.table table thead th {
  background-color: #58595b;
  border-right: 1px solid #fff;
  color: #fff;
  font: 700 16px/1 "Source Sans 3",sans-serif;
  padding: 1.25rem 1.5rem;
}

figure.table table thead th:last-child {
  border-right: 1px solid #231f20;
}

figure.table table tbody tr:nth-of-type(2n+1) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

figure.table table tbody tr th {
  border-right: 1px solid #231f20;
  color: #231f20;
  font: 700 16px/1 "Source Sans 3",sans-serif;
  padding: 1.25rem 1.5rem;
  vertical-align: middle;
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)));

  border-color: inherit;
  border-style: solid;
  border-width: 0;

  text-align: inherit;
}

figure.table table tbody tr td {
  border-right: 1px solid #231f20;
  font: 700 16px/1 "Source Sans 3",sans-serif;
  padding: 1.25rem 1.5rem;
  /* text-align: center; */
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)));
}

figure.table table tbody tr td * {
  font: 700 16px/1 "Source Sans 3",sans-serif !important;
}
/* CKEditor Styling END */

.col-separator {
  @media (min-width: 768px) {
    border-right: 1px solid rgba(88, 89, 91, 0.3);
    height: 100%;
    padding-right: 3rem;
  }
}

.img-copy-over.bg-gray {
  background-color: #f0f0f0;
}

.img-copy-over.bg-gray h2,
.img-copy-over.bg-gray p {
  color: #000;
}


.icon .icon-small {
  width: 90px;
}

.icon .icon-medium {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;

  @media (min-width: 768px) {
    position: absolute;
    width: unset;
    max-width: 100%;
    max-height: 100%;
    margin: unset;
  }
}

.icon .icon-large {
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;

  @media (min-width: 768px) {
    max-width: 100%;

  }

  @media (min-width: 992px) {
    position: absolute;
    top: -6.5vw;
    max-width: 100%;
  }

  @media (min-width: 1200px) {
    top: -90px;
    max-width: 390px;
  }
}

.leaf li {
  color: #fff;
}