/* Fonts */
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* prevents invisible text; shows fallback instantly */
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Extra gaps class for text modules */
 .vertical-gaps {
   padding-top: 4rem;
   padding-bottom: 4rem;
 }

@media (max-width: 580px) {
  .vertical-gaps {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* =============================================
   Mobile overlay – layout
   ============================================= */
.overlay {
    display: flex;
    flex-direction: column;
}

.overlay nav {
    text-align: left;
}

.overlay .overlay-menu {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* =============================================
   Mobile overlay – treemenu styling
   Match desktop nav: futura-pt, uppercase, generous sizing
   ============================================= */
.overlay .treemenu {
    font-family: "futura-pt", sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    font-size: x-large;
}

.overlay .treemenu.treemenu-root {
    margin: 0;
    padding: 1rem 0;
}

.overlay .treemenu li {
    margin: 0;
    padding: 0;
    background: none;
    /* border-bottom: 1px solid rgba(69, 77, 93, 0.1); */
}

.overlay .treemenu li a {
    display: block;
    margin-left: 0;
    padding: 1rem 1.25rem 1rem 1.5rem;
    /* font-size: 0.85rem; */
    letter-spacing: 0.04em;
    text-decoration: none;
}

.overlay .treemenu ul {
    margin: 0;
}

/* Indent nested levels via padding instead of margin */
.overlay .treemenu ul li a {
    padding-left: 2.5rem;
}

.overlay .treemenu ul ul li a {
    padding-left: 3.5rem;
}

.overlay .treemenu .toggler {
  padding-left: 1.25rem;
  padding-top: 1rem;
  line-height: 0.85rem;
  padding-right: 0.25rem;
}

/* =============================================
   Light-theme mobile overlay
   (active when header-dark is OFF)
   ============================================= */
body:not(.header-dark) .overlay {
    background: #f9f5ed;
}

body:not(.header-dark) .overlay.open {
    opacity: 1;
}

/* Treemenu links */
body:not(.header-dark) .overlay .treemenu li a {
    color: #454d5d;
}


/* Treemenu togglers */
body:not(.header-dark) .overlay .treemenu .toggler {
    color: #454d5d;
}

/* Hamburger icon – active state (overlay open) */
body:not(.header-dark) .mobile-menu .button_container.active .top,
body:not(.header-dark) .mobile-menu .button_container.active .middle,
body:not(.header-dark) .mobile-menu .button_container.active .bottom {
    background: #454d5d;
}

/* Mobile logo SVG */
body:not(.header-dark) .overlay .mobile-logo svg path {
    fill: #454d5d;
}

/* =============================================
   Mobile language links – pinned to bottom
   ============================================= */
.overlay .mobile-lang-links {
    margin-top: auto;
    padding: 1rem 0 1.5rem;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-shrink: 0;
}

.overlay .mobile-lang-links .mobile-lang-link {
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    opacity: 0.7;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.overlay .mobile-lang-links .mobile-lang-link:hover,
.overlay .mobile-lang-links .mobile-lang-link:focus {
    opacity: 1;
    text-decoration: none;
}

.overlay .mobile-lang-links .mobile-lang-link.active {
    opacity: 1;
    font-weight: bold;
}

.overlay .mobile-lang-links .mobile-lang-link img {
    height: 16px;
    width: auto;
    vertical-align: middle;
}

/* Light-theme language links */
body:not(.header-dark) .overlay .mobile-lang-links .mobile-lang-link {
    color: #454d5d;
}

body:not(.header-dark) .overlay .mobile-lang-links .mobile-lang-link.active {
    color: rgb(83.1680628272,149.0544502618,57.2455497382) !important;
}

/* =============================================
   Footer – all links white
   ============================================= */
#footer a {
    color: #fff;
}

#footer a:hover,
#footer a:focus {
    color: #fff;
    opacity: 0.8;
}

/* =============================================
   Footer layout
   ============================================= */
.footer-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 20px 0;
}

.footer-address {
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.6;
}

.footer-address p {
    margin: 0 0 0.25rem;
}

.footer-address a {
    color: #fff;
    text-decoration: underline;
}

.footer-address a:hover,
.footer-address a:focus {
    opacity: 0.8;
}

.footer-right {
    text-align: right;
    margin-left: auto;
}

@media (max-width: 580px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-address {
        text-align: center;
    }

    .footer-right {
        text-align: center;
        margin-left: 0;
    }
}

/* =============================================
   Footer links
   ============================================= */
.footer-links {
    margin-bottom: 0.75rem;
}

.footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem 1.5rem;
}

.footer-links ul li a {
    text-decoration: none;
    font-size: 0.85rem;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.footer-links ul li a:hover,
.footer-links ul li a:focus {
    opacity: 1;
    text-decoration: underline;
}

@media (max-width: 580px) {
    .footer-links ul {
        justify-content: center;
    }
}

/* =============================================
   Footer – social media icons
   ============================================= */
.footer-social {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.footer-social a {
    color: #fff;
    font-size: 1.4rem;
    opacity: 0.85;
    transition: opacity 0.2s;
    text-decoration: none;
}

.footer-social a:hover,
.footer-social a:focus {
    opacity: 1;
}

@media (max-width: 580px) {
    .footer-social {
        justify-content: center;
    }
}

/* Adjust navbar logo vs menu width split */
#header .navbar-section:first-child {
    flex: 0 0 30%;
    min-width: 250px;
 /*   max-width: 30%; */
}

#header .navbar-section:last-child {
    flex: 0 0 70%;
 /*   max-width: 70%; */
}

/* But in mobile, the menu is hidden, so the logo can take more space */
@media (max-width: 580px) {

#header .navbar-section:first-child {
    flex: 0 0 50%;
    max-width: 50%;
}

#header .navbar-section:last-child {
    flex: 0 0 50%;
    max-width: 50%;
}


}

/* =============================================
// IMG in sections has padding to prevent text from touching it
// ============================================= */
section#body-wrapper section.container img {
      margin: 0.5rem 1.5rem;
}

/* =============================================
   Responsive tables: stack cells at <= 840 px
   ============================================= */
@media (max-width: 840px) {
    table,
    table thead,
    table tbody,
    table tfoot,
    table tr,
    table th,
    table td {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    table tr {
        margin-bottom: 0.5rem;
    }
}

/* =============================================
   Button for the Text module
   ============================================= */
.btn-text-cta{
  padding: 0.5rem 1rem;
  border:gray solid 1px;
  color: #444 !important;
  background: white;
  font-family: futura-pt,sans-serif;
  font-size: smaller;
  font-weight: initial;
  text-transform: uppercase;
  height: auto;
}

/* =============================================
   Contact form
   ============================================= */

  /* Overall form layout */
#contact-wrapper form#contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Toast messages */
#contact-wrapper .toast {
    max-width: 1024px;
}

/* Make each field block centered */
#contact-wrapper form#contact .form-field {
  width: 80%;
  margin: 0 auto 1rem;
}

/* Make actual inputs fill their field block */
#contact-wrapper form#contact .form-input-wrapper,
#contact-wrapper form#contact .form-textarea-wrapper,
#contact-wrapper form#contact input[type="text"],
#contact-wrapper form#contact input[type="email"],
#contact-wrapper form#contact textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Give textarea a sane default height */
#contact-wrapper form#contact textarea {
  min-height: 10rem;
  resize: vertical;
}

/* Buttons area */
#contact-wrapper form#contact .buttons {
  width: 80%;
  margin: 1.5rem auto 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Buttons stay reasonably sized on desktop */
#contact-wrapper form#contact .buttons .button {
  width: auto;
  min-width: 8rem;
  box-sizing: border-box;
  height: 58px;
  margin-top: 1rem;
  text-transform:uppercase;
  font-family: futura-pt,sans-serif;
}

/* Desktop: 2-column grid layout */
@media (min-width: 840px) {
  #contact-wrapper form#contact {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 1.5rem;
    row-gap: 0;
    align-items: start;
    max-width: 1024px;
  }

  /* Reset widths set for the old flex layout */
  #contact-wrapper form#contact .form-field,
  #contact-wrapper form#contact .buttons {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Row 1: Name (3/6 = 50%) | Email (3/6 = 50%) */
  #contact-wrapper form#contact .form-field:has(#contact-form-field-name) {
    grid-column: 1 / 4;
    grid-row: 1;
  }
  #contact-wrapper form#contact .form-field:has(#contact-form-field-email) {
    grid-column: 4 / 7;
    grid-row: 1;
  }

  /* Row 2: Message (spans both columns) */
  #contact-wrapper form#contact .form-field:has(textarea) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Row 3: Captcha (4/6 = 2/3) | Submit button (2/6 = 1/3) */
  #contact-wrapper form#contact .form-field:has(#contact-form-captcha) {
    grid-column: 1 / 5;
    grid-row: 3;
  }
  #contact-wrapper form#contact .buttons {
    grid-column: 5 / 7;
    grid-row: 3;
    align-self: end;
    justify-content: flex-start;
    margin-top: 0;
    height:100%;
    align-items:center;
  }
}

/* Mobile: keep everything stacked */
@media (max-width: 839px) {
  #contact-wrapper form#contact .form-field,
  #contact-wrapper form#contact .buttons {
    width: 95%;
  }

  #contact-wrapper form#contact .buttons {
    flex-direction: column;
    align-items: stretch;
  }

  #contact-wrapper form#contact .buttons .button {
    width: 100%;
    min-width: 0;
  }
}