/* =================================================
   1️⃣ Color & base‑font variables
   ================================================= */

   :root{
    --header-background-color:#fafafa;
    --footer-background-color:#fafafa;
    --background-color:#f7f8f9;
    --product-background-color:#f2f4f6;
    --card-background-color:#ffffff;
    --card-header-background-color:#fafafa;
    --live-search-results-background-color:#ffffff;
    --live-search-results-background-color-hover:#f5f7f9;
    --form-field-background-color:#ffffff;
    --form-field-background-color-hover:#f5f7f9;
    --focus-box-shadow-color:rgba(0,123,255,0.22);
    --border-color:#e3e6ea;
    --copyright-color:#f3f3f3;
    --primary-color:#009440;
    --secondary-color:#6DBA31;
    --btn-text-color:#fff;
    --icon-color:#181818;
    --slider-icon-color:rgba(0,0,0,0.18);
    --slider-icon-color-hover:rgba(0,0,0,0.28);
    --text-high-contrast:#121212;
    --text-low-contrast:#505050;
    --font-size-base:1.125rem;
  }
  [data-theme="dark"]{
    --header-background-color:#121217;
    --footer-background-color:#0f1113;
    --background-color:#0b0c0e;
    --product-background-color:#0f1113;
    --card-background-color:#0f1113;
    --card-header-background-color:#121217;
    --live-search-results-background-color:#121217;
    --live-search-results-background-color-hover:#0f1113;
    --form-field-background-color:#101214;
    --form-field-background-color-hover:#0d0f11;
    --focus-box-shadow-color:rgba(0,123,255,0.22);
    --border-color:rgba(255,255,255,0.06);
    --copyright-color:#8c8c8c;
    --primary-color:#009440;
    --secondary-color:#6DBA31;
    --btn-text-color:#fff;
    --icon-color:#e6e6e6;
    --slider-icon-color:rgba(255,255,255,0.18);
    --slider-icon-color-hover:rgba(255,255,255,0.28);
    --text-high-contrast:#e6e6e6;
    --text-low-contrast:#9aa3ad;
    --font-size-base:1.125rem;
  }  

/* =================================================
         2️⃣ Global text
         ================================================= */
.footer-inner,
.nav-menu a,
.content-inner p,
.content-inner li,
.copyright,
.wpcf7 input,
.wpcf7 textarea,
.live-search input[type="search"],
.live-search-results p,
.live-search-results small,
.live-search-results strong {
  font-size: var(--font-size-base) !important;
}

/* lighter weight for most text */
li,
p,
.copyright {
  font-weight: 300;
}

/* =================================================
         3️⃣ Simple heading sizes
         ================================================= */

/* Golden-ratio-based sizes approximating ≈32px / 26px / 21px / 18px */
h1 {
  font-size: 2rem;
  /* ≈32px */
}

h2 {
  font-size: 1.777rem;
  /* ≈28.4px (close to 32px) */
}

h3 {
  font-size: 1.386rem;
  /* ≈22.2px (close to 26px) */
}

h4 {
  font-size: 1.125rem;
  /* ≈18px */
}

p {
  font-size: var(--font-size-base);
  /* ≈18px */
}

/* =================================================
         4️⃣ Mobile (optional – keep proportional)
         ================================================= */
@media (max-width: 768px) {
  :root {
    --font-size-base: 1rem;
  }

  /* ≈16 px */

  h1 {
    font-size: 1.8rem;
  }

  /* ≈29 px */
  h2 {
    font-size: 1.5rem;
  }

  /* ≈24 px */
  h3 {
    font-size: 1.2rem;
  }

  /* ≈19 px */
  h4 {
    font-size: 1rem;
  }

  /* ≈16 px */
}

/* =================================================
         Global layout
         ================================================= */
html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  background-color: var(--background-color);
}

html {
  font-family: "Nunito Sans", sans-serif;
}

h1,
h2,
h3,
h4,
.site-logo {
  font-family: "Montserrat", sans-serif;
  color: var(--text-high-contrast);
}

p,
a,
li {
  color: var(--text-low-contrast);
}

/* =================================================
       1️⃣ Global animation & transition defaults
       ================================================= */
:root {
  /* timing */
  --anim-duration-short: 0.2s;
  /* hover lift */
  --anim-duration-medium: 0.6s;
  /* slide‑up, fade‑in */
  --anim-duration-long: 0.8s;
  /* fade‑in sections (default) */
  --anim-ease: ease-out;
}

.nav-menu a,
.footer a,
.site-logo,
.wpcf7-submit,
.btn,
.product-item a,
.cards .card {
  transition: transform var(--anim-duration-short) var(--anim-ease);
}

.nav-menu a:hover,
.footer a:hover,
.site-logo:hover,
.wpcf7-submit:hover,
.btn:hover,
.product-item a:hover,
.cards .card:hover {
  transform: translateY(-1px);
}

/* Smooth color transitions light/dark mode */
:root, body, .header, .footer, section, .btn, .site-logo, .card, button  {
  transition: background-color 280ms cubic-bezier(.2,.9,.3,1),
              color 280ms cubic-bezier(.2,.9,.3,1),
              border-color 280ms cubic-bezier(.2,.9,.3,1);
}


/* =================================================
         3️⃣ Keyframes (animation definitions only)
         ================================================= */

/* Staggered column slide‑up */
@keyframes slideUp {
  from {
    opacity: 0.0001;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade‑in for sections */
@keyframes fadeIn {
  from {
    opacity: 0.0001;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide‑in right */
@keyframes slideInRight {
  from {
    opacity: 0.0001;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =================================================
         4️⃣ Default hidden state + per‑element defaults
         ================================================= */

.col {
  /* Columns start hidden – JS will add the slideUp animation */
  opacity: 0.0001;
}

/* Sections that fade in – start hidden */
.content-inner,
.hero-inner,
.footer-inner,
section {
  opacity: 0.0001;
}

/* optional extra delay for the main content block */
.content-inner {
  animation-delay: 0.3s;
}

/* =================================================
         5️⃣ Utility classes – ready for animateOnView()
         ================================================= */
.anim-fade {
  opacity: 0.0001;
}

/* use with animationName: fadeIn   */
.anim-up {
  opacity: 0.0001;
}

/* use with animationName: slideUp  */
.anim-right {
  opacity: 0.0001;
}

/* use with animationName: slideInRight */

/* =================================================
         Header & Footer
         ================================================= */
.header,
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Header */
.header {
  background-color: var(--header-background-color);
  color: var(--text-high-contrast);
  padding: 0rem 1rem;
  z-index: 100;
  border-bottom: 1px solid var(--border-color);
}

/* Footer */
.footer {
  background-color: var(--footer-background-color);
  color: var(--text-high-contrast);
  flex-direction: column;
  justify-content: space-between;
  padding: 4rem 1rem;
  border-top: 1px solid var(--border-color);
}

/* Inner containers */
.header-inner,
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  position: relative;
}

.header-inner {
  gap: 1rem;
}

/* Site Logo */
.header .site-logo {
  text-decoration: none;
  color: inherit;
  width: 100%;
  max-width: 220px;
  height: auto;
}

.site-logo svg {
  color: var(--text-high-contrast)!important;
}

/* Footer inner – stack vertically */
.footer-inner {
  flex-direction: column;
}

/* Navigation links */
.header .nav-menu a {
  color: var(--text-high-contrast) !important;
  font-weight: 500;
}

.menu-toggle .bar {
  background-color: var(--text-high-contrast) !important;
}

/* Hero header (home page) */
.hero-header {
  background-color: transparent;
  color: var(--text-high-contrast);
  border: none;
}

@media (max-width:850px) { 
  .header-inner {
    gap: 0.5rem;
  }
}



/* =================================================
         Footer specifics
         ================================================= */
.footer .row {
  margin-bottom: 0;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 2em;
}

.footer p {
  line-height: 1.6em;
}

.footer a {
  text-decoration: none;
  color: var(--text-low-contrast);
  display: block;
}

.footer table, .footer tbody, .footer tr {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.footer td {
  color: var(--text-low-contrast);
  padding-right: 10px;
  padding-left: 0;
  margin: 0;
  line-height: 1.6em;
}

.footer .footer-logo {
  max-width: 150px;
}

/* Copyright */
.copyright {
  text-align: center;
  margin: 0 auto;
  color: var(--text-low-contrast);
  padding: 10px;
  width: calc(100% - 20px);
  border-top: 1px solid var(--border-color);
}

/* =================================================
         Site title
         ================================================= */
.logo {
  margin: 0;
  font-size: 2rem;
}

/* =================================================
         SVG Icons
         ================================================= */

.svg-icon {
  color: var(--icon-color);
  fill: var(--icon-color);
  width: 32px!important;   /* desired size */
  height: auto;   /* or auto to preserve aspect ratio */
  display: inline-block; /* ensures layout behaves like an image */
}

/* =================================================
         Darkmode toggle
         ================================================= */

/* Icon-only button reset */
#darkmode-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  margin: auto 0;
  height: 42px!important;
  width: 42px!important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  cursor: pointer;
  order: 4;
  line-height: inherit;
  box-sizing: border-box;
}

/* Remove default focus outline but keep an accessible visible focus ring */
#darkmode-toggle:focus {
  outline: none;
  box-shadow: 0 0 4px var(--focus-box-shadow-color);
  border-radius: 6px;
}

/* Remove inner SVG pointer events so clicks target the button reliably */
#darkmode-toggle svg {
  display: block;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

/* Optional hover/active states */
#darkmode-toggle:hover {
  opacity: 0.9;
}

@media (max-width:850px) { 
  #darkmode-toggle {
    order: 2;
    margin: auto 0;
    border: none;
  }
}

/* Call icon */
/* Icon-only button reset */
.call-button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  margin: auto 0;
  padding: 0;
  height: 42px;
  width: 42px!important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  cursor: pointer;
  order: 2;
  line-height: inherit;
  box-sizing: border-box;
}

/* Remove inner SVG pointer events so clicks target the button reliably */
.call-button svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* Optional hover/active states */
.call-button:hover {
  opacity: 0.9;
}

@media (max-width:850px) { 
  .call-button {
    border: none;
  }
}

/* =================================================
         Content
         ================================================= */
.content {
  padding: 2rem 1rem;
  flex: 1;
}

.content-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.content p {
  line-height: 1.6;
  font-size: var(--font-size-base);
}

/* =================================================
         Hero section
         ================================================= */
.hero {
  background-color: var(--header-background-color);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 13rem 1rem;
  padding-top: calc(13rem + 40px);
  border-bottom: 1px solid var(--border-color);
  margin-top: -106px;
  height: 100vh;
  /* behind header */
}

.hero-inner {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* Text side */
.hero-col1 {
  flex: 0 0 calc(50% - 2rem);
  align-self: center;
  z-index: 50;
}

.hero-col1 h1 {
  margin-top: 0;
  font-size: 3rem;
}

.hero-col1 h1 .hero-highlight {
  color: var(--primary-color)
}

.hero-col1 p {
  margin-bottom: 40px;
  font-size: var(--font-size-base);
}

/* Image side */
.hero-col2 {
  flex: 0 0 calc(50% - 2rem);
  display: flex;
  align-items: center;
  filter: grayscale(1);
}

/* image itself */
.hero-col2 img {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  margin-left: auto;
  border-radius: 16px;
}

.btn {
  background-color: var(--primary-color);
  font-size: var(--font-size-base);
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  border: none;
  border-radius: 6px;
  padding: 0.75em 2.5em;
  color: var(--btn-text-color);
  transition:
    background-color var(--anim-duration-short) ease,
    box-shadow var(--anim-duration-short) ease;
  will-change: background-color, box-shadow;
}

.hero-buttons {
  display: flex;
  gap: 20px;
}

.hero-buttons .btn {
  padding: 0.75em 2.5em;
}

.hero-buttons .btn-primary {
  background-color: var(--primary-color);
}

.hero-buttons .btn-secondary {
  background-color: var(--secondary-color);
}

.btn:hover,
.btn:focus {
  box-shadow:
    inset 0 0 80px 24px rgba(0, 0, 0, 0.15),
    /* large, soft inset to darken whole button */
    0 8px 18px rgba(0, 0, 0, 0.1);
  /* subtle outer shadow for depth */
}

/* Hero mobile tweaks */
@media (max-width: 980px) {
  .hero-inner {
    justify-content: center;
  }

  .hero-col1 {
    flex: 1 100%;
    text-align: center;
  }

  .hero-col1 h1 {
    font-size: 2.5em;
  }

  .hero-col2 {
    margin-top: 75px;
    /* animation will be added by JS, keep only the hidden state */
    flex: 0 0 calc(100% - 2rem);
  }
  .hero-col2 img {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons {
    justify-content: center;
  }
}

@media (max-width: 850px) {
  .hero-buttons .btn {
    font-size: 1rem;
  }
  .hero {
    padding-top: calc(8rem + 40px);
    padding-bottom: 8rem;
  }
}

@media (max-width: 480px) {
  .hero-col1 h1 {
    font-size: 2em;
  }
}

/* =================================================
       Contact Section
       ================================================= */

/* Contact home page */
#contact {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Contact page - padding bottom - line-height of button*/
.contact {
  padding-bottom: calc(4rem - 1.6rem);
}

/* =================================================
    Werkwijze
    ================================================= */
    #werkwijze {
      margin-top: 8rem;
    }

/* =================================================
    Cards
    ================================================= */

.cards {
  padding-bottom: 4rem;
}

.cards .card {
  min-height: 250px;
  padding: 0rem;
  width: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: start;
  flex-direction: column;
  height: 100%;
  background-color: var(--card-background-color);
  box-sizing: border-box;
  text-decoration: none;
}

.cards .card .card-header {
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px 8px 0px 0px;
  background-color: var(--card-header-background-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 15px;
}

.cards .card h3 {
  text-align: left;
}

.cards .card p {
  text-align: left;
  font-size: var(--font-size-base);
  padding: 1rem;
}

.cards .card .btn {
  margin: auto 1rem 1rem 1rem;
}

.cards .card img {
  width: 100%;
  max-width: 50px;
}

.cards .svg-icon {
  color: var(--icon-color);
  fill: var(--icon-color);
}

/* =================================================
    Cards Diensten
    ================================================= */
    #loodgieter .card-header h3 {
      color: #fff!important;
    }

    #loodgieter .card-header {
      aspect-ratio: 1 / 1;             /* keeps square */
      background-size: cover;          /* fill without distortion */
      background-repeat: no-repeat;
      overflow: hidden;
      display: block;
      max-height: 150px;
      box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.5); /* darken overlay */
      border-bottom: none!important;
    }

    #loodgieter .sanitair {
      background-image: url('/wp-content/themes/wphtml/assets/img/sanitair.webp');
      background-position: 50% 40%;
    }

    #loodgieter .lekkages {
      background-image: url('/wp-content/themes/wphtml/assets/img/lekkages.webp');
      background-position: 50% 50%;
    }

    #loodgieter .leadingwerk {
      background-image: url('/wp-content/themes/wphtml/assets/img/leidingwerk.webp');
      background-position: 50% 50%;
    }

    #loodgieter .verwarming {
      background-image: url('/wp-content/themes/wphtml/assets/img/verwarming.webp');
      background-position: 50% 50%;
    }  


/* =================================================
       Row & Column layout
       ================================================= */

:root {
  --gap: 2rem;
}

.row {
  display: grid;
  gap: var(--gap);
  width: 100%;
  margin-bottom: 20px;
  align-items: start;
  grid-template-columns: 1fr;
}

.col {
  box-sizing: border-box;
  min-width: 0;
}

/* Default responsive: 4 / 2 / 1 */
@media (min-width: 980px) {
  .row {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 481px) and (max-width: 979px) {
  .row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .row {
    grid-template-columns: 1fr;
  }
}

/* Utilities */
.row--4 {
  grid-template-columns: repeat(4, 1fr);
}

.row--2 {
  grid-template-columns: repeat(2, 1fr);
}

.row--auto {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Collapse utilities on small screens */

/* collapse 2 -> 1 at 768px */
@media (max-width: 768px) {
  .row--2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {

  .row--4,
  .row--auto {
    grid-template-columns: 1fr;
  }
}

/* =================================================
       Advies gesprek CV Ketels
       ================================================= */

.adviesgesprek .btn {
  margin-bottom: 1rem;
}

/* =================================================
       Breadcrumbs
       ================================================= */

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb li {
  margin-right: 10px;
}

.breadcrumb li a {
  text-decoration: none;
  color: var(--text-low-contrast);
}

.breadcrumb li::after {
  content: ">";
  margin-left: 10px;
}

.breadcrumb li:last-child::after {
  content: "";
}

/* =================================================
       Adviesgesprek
       ================================================= */
#adviesgesprek {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* =================================================
       Onderhoud
       ================================================= */


/* Grid wrapper */
.plans-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  width:100%;
  font-size:var(--font-size-base);
  color:var(--text-high-contrast);
  margin-bottom: 2rem;
}

/* Card */
.plan-card{
  background:var(--card-background-color);
  border:1px solid var(--border-color);
  border-radius:10px;
  padding:16px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:box-shadow .15s, transform .08s;
  line-height:1.4;
  color:var(--text-low-contrast);
  font-size:var(--font-size-base);
}

/* Top row: title left, prices right */
.plan-price-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

/* title */
.plan-title{
  font-weight:700;
  color:var(--text-high-contrast);
  margin:0;
  align-self:center;
}

/* price block */
.plan-price{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:95px;
  align-items:end;
}
.price-month{
  font-weight:800;
  color:var(--text-high-contrast);
  font-size: 2rem;

}
.price-2yr{
  color:var(--text-low-contrast);
}

/* headers and values */
.plan-header{
  font-weight:600;
  color:var(--text-high-contrast);
}
.plan-value{
  color:var(--text-low-contrast);
  white-space:normal;
  word-break:break-word;
}

/* highlight best plan */
.plan-card.best{
  border-left:4px solid var(--secondary-color);
  background: linear-gradient(90deg, rgba(109,186,49,0.03), transparent);
}

/* hover */
.plan-card:hover{
  transform:translateY(-3px);
}

/* responsive tweaks */
@media (max-width:640px){
  .plan-price{
    align-items:flex-start;
    text-align:left;
  }
  .plan-price-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .plan-card{ padding:12px; gap:10px; }
}

/* =================================================
       Product Index
       ================================================= */

/* Card and link */
.product-index .product-item {
  margin: 0;
}

.product-index .product-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Thumbnail */
.product-index .product-image {
  width: 100%;
  height: 350px;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  background-color: var(--product-background-color);
  transition: filter var(--anim-duration-short) ease;
}

.product-index .product-image:hover {
  filter: brightness(0.9);
}

.product-index .brands-slider {
  margin-bottom: 2rem;
  border: none;
}

/* =================================================
       Product Page
       ================================================= */

/* Card and link */
.product-page .product-item {
  margin: 0;
}

.product-page .row {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
  .product-page .row {
    grid-template-columns: 1fr;
  }
}

.product-page .product-title {
  margin-top: 2rem;
}

/* Thumbnail */
.product-page .product-image {
  width: 100%;
  height: 500px;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  background-color: var(--product-background-color);
  margin-top: 2rem;
}

.product-page .btn {
  padding: 0.75rem 1.5rem;
}

.product-page .product-description {
  padding: 2rem;
  border: 1px solid var(--border-color);
  margin-top: 4rem;
  margin-bottom: 4rem;
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--text-high-contrast);
  font-weight: 300;
}

.product-page .product-features {
  line-height: 1.6;
  margin-top: 2rem;
}

/* =================================================
       Brands Slider
       ================================================= */

.brands-slider {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4rem;
  padding-top: 2rem;
}

/* Image */
#brandsGlide .glide__slide img {
  object-fit: contain;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Arrows */
#brandsGlide .glide__arrow {
  box-shadow: none;
  border: none;
  color: var(--slider-icon-color);
  top: calc(120% + 8px);
}

#brandsGlide .glide__arrow:hover {
  color: var(--slider-icon-color-hover)
}

/* Bullets */
#brandsGlide .glide__bullets {
  top: 120%;
  gap: 10px;
  /* Set gap for bullets */
}

#brandsGlide .glide__bullet {
  height: 0.75rem;
  width: 0.75rem;
  box-shadow: none;
  background-color: var(--slider-icon-color);
  transition: background-color 0.3s;
  /* Smooth transition */
}

#brandsGlide .glide__bullet:hover {
  background-color: var(--slider-icon-color-hover)
}

#brandsGlide .glide__bullet--active {
  background: var(--slider-icon-color-hover)
}

/* =================================================
       Cookieconsent
       ================================================= */

/* Change font */
#cc-main {
  --cc-font-family: Nunito, sans-serif !important;
}

/* Change title font */
.cm__title,
.cm__btns,
.pm__title,
.pm__section-title {
  font-family: Montserrat, sans-serif !important;
}

/* Hide boxshadow & Add border */
#cc-main .cm {
  box-shadow: none !important;
  border: 1px solid var(--border-color) !important;
}

/* Bar max width 1200px + padding on title/desc/buttons */
#cc-main .cm--bar .cm__body,
#cc-main .cm--bar .cm__links {
  box-sizing: border-box;
  max-width: calc(1200px + 2.6rem) !important;
}

/* =================================================
       Contact Form 7
       ================================================= */

/* Contact Form Styles */
.contact-form {
  display: flex;
  flex-direction: column;
  /* Stack rows vertically */
}

/* Form Row Styles */
.form-row {
  display: flex;
  /* Use flexbox for the row */
  justify-content: space-between;
  /* Space columns evenly */
  gap: 20px;
  /* Space between rows */
}

/* Form Column Styles */
.form-column {
  flex: 1;
  /* Allow columns to grow equally */
}

.form-column p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.wpcf7 input[type=submit] {
  padding: 0.75rem 2.5rem !important;
  background-color: var(--primary-color) !important;
  font-weight: bold;
}

.wpcf7 input[type=submit]:hover {
  filter: brightness(0.9);
}

.wpcf7 label {
  color: var(--text-high-contrast)!important;
}

.wpcf7-not-valid:not(input[type=file]):not(span) {
  background-color: var(--form-field-background-color) !important;
}

.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
  background-color: var(--background-color)!important;
}

.wpcf7 input[type="radio"] {
  border: 2px solid var(--primary-color)!important;
  color: var(--primary-color)!important;
}

.wpcf7 input[type="radio"]::before { 
  box-shadow: inset 1em 1em var(--primary-color) !important; 
}

.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
  border: 1px solid var(--cf7-warning) !important;
  background-color: var(--form-field-background-color) !important;
}


/* Base input/textarea styles */
.wpcf7 input[type="color"],
.wpcf7 input[type="date"],
.wpcf7 input[type="datetime-local"],
.wpcf7 input[type="datetime"],
.wpcf7 input[type="email"],
.wpcf7 input[type="month"],
.wpcf7 input[type="number"],
.wpcf7 input[type="search"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="text"],
.wpcf7 input[type="time"],
.wpcf7 input[type="url"],
.wpcf7 input[type="week"],
.wpcf7 textarea {
  width: 100%;
  box-sizing: border-box;
  line-height: 1.8 !important;
  background-color: var(--form-field-background-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px;
  padding: 0.5rem;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 60ms ease;
  box-sizing: border-box;
}

/* Hover state */
.wpcf7 input[type="color"]:hover,
.wpcf7 input[type="date"]:hover,
.wpcf7 input[type="datetime-local"]:hover,
.wpcf7 input[type="datetime"]:hover,
.wpcf7 input[type="email"]:hover,
.wpcf7 input[type="month"]:hover,
.wpcf7 input[type="number"]:hover,
.wpcf7 input[type="search"]:hover,
.wpcf7 input[type="tel"]:hover,
.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="time"]:hover,
.wpcf7 input[type="url"]:hover,
.wpcf7 input[type="week"]:hover,
.wpcf7 textarea:hover {
  background-color: var(--form-field-background-color-hover) !important;
}

/* Focus state (keyboard focus) */
.wpcf7 input[type="color"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 input[type="datetime-local"]:focus,
.wpcf7 input[type="datetime"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="month"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="search"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="time"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="week"]:focus,
.wpcf7 textarea:focus {
  box-shadow: 0 0 4px var(--focus-box-shadow-color)!important;
}

/* Active / pressed state (mouse/touch) */
.wpcf7 input[type="color"]:active,
.wpcf7 input[type="date"]:active,
.wpcf7 input[type="datetime-local"]:active,
.wpcf7 input[type="datetime"]:active,
.wpcf7 input[type="email"]:active,
.wpcf7 input[type="month"]:active,
.wpcf7 input[type="number"]:active,
.wpcf7 input[type="search"]:active,
.wpcf7 input[type="tel"]:active,
.wpcf7 input[type="text"]:active,
.wpcf7 input[type="time"]:active,
.wpcf7 input[type="url"]:active,
.wpcf7 input[type="week"]:active,
.wpcf7 textarea:active {
  box-shadow: 0 0 4px var(--focus-box-shadow-color)!important;
}

/* Responsive Design */
@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
    /* Stack columns on smaller screens */
    gap: 0px !important;
  }
}


/* =================================================
       Fonts
       ================================================= */


/* Montserrat — optimized & reorganized @font-face declarations */

/* Extra Light (100) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat/montserrat-v29-latin-100.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/montserrat/montserrat-v29-latin-100italic.woff2') format('woff2');
  font-display: swap;
}

/* Light (200) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat/montserrat-v29-latin-200.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/montserrat/montserrat-v29-latin-200italic.woff2') format('woff2');
  font-display: swap;
}

/* Regular Light (300) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat/montserrat-v29-latin-300.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/montserrat/montserrat-v29-latin-300italic.woff2') format('woff2');
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat/montserrat-v29-latin-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/montserrat/montserrat-v29-latin-italic.woff2') format('woff2');
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat/montserrat-v29-latin-500.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/montserrat/montserrat-v29-latin-500italic.woff2') format('woff2');
  font-display: swap;
}

/* SemiBold (600) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat/montserrat-v29-latin-600.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/montserrat/montserrat-v29-latin-600italic.woff2') format('woff2');
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat/montserrat-v29-latin-700.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/montserrat/montserrat-v29-latin-700italic.woff2') format('woff2');
  font-display: swap;
}

/* Extra Bold (800) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat/montserrat-v29-latin-800.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/montserrat/montserrat-v29-latin-800italic.woff2') format('woff2');
  font-display: swap;
}

/* Black (900) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat/montserrat-v29-latin-900.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/montserrat/montserrat-v29-latin-900italic.woff2') format('woff2');
  font-display: swap;
}


/* Nunito — optimized @font-face declarations */

/* Black (900) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/nunito/Nunito-Black.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/nunito/Nunito-BlackItalic.woff2') format('woff2');
  font-display: swap;
}

/* Extra Bold (800) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/nunito/Nunito-ExtraBold.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/nunito/Nunito-ExtraBoldItalic.woff2') format('woff2');
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/nunito/Nunito-Bold.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/nunito/Nunito-BoldItalic.woff2') format('woff2');
  font-display: swap;
}

/* SemiBold (600) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/nunito/Nunito-SemiBold.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/nunito/Nunito-SemiBoldItalic.woff2') format('woff2');
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/nunito/Nunito-Medium.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/nunito/Nunito-MediumItalic.woff2') format('woff2');
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito/Nunito-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/nunito/Nunito-Italic.woff2') format('woff2');
  font-display: swap;
}

/* Light (300) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/nunito/Nunito-Light.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/nunito/Nunito-LightItalic.woff2') format('woff2');
  font-display: swap;
}

/* Extra Light (200) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/nunito/Nunito-ExtraLight.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/nunito/Nunito-ExtraLightItalic.woff2') format('woff2');
  font-display: swap;
}

/* Variable (use as variable font — assign weight range) */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 100 900;
  src: url('../fonts/nunito/Nunito-Variable.woff2') format('woff2');
  font-display: swap;
  /* Optional: font-variation-settings: 'wght' 400; */
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 100 900;
  src: url('../fonts/nunito/Nunito-VariableItalic.woff2') format('woff2');
  font-display: swap;
}

/* Nunito Sans — optimized @font-face declarations (files in ../fonts/nunito-sans/) */

/* Black (900) */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/nunito-sans/nunito-sans-latin-900-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/nunito-sans/nunito-sans-latin-900-italic.woff2') format('woff2');
  font-display: swap;
}

/* Extra Bold (800) */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/nunito-sans/nunito-sans-latin-800-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/nunito-sans/nunito-sans-latin-800-italic.woff2') format('woff2');
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/nunito-sans/nunito-sans-latin-700-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/nunito-sans/nunito-sans-latin-700-italic.woff2') format('woff2');
  font-display: swap;
}

/* SemiBold (600) */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/nunito-sans/nunito-sans-latin-600-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/nunito-sans/nunito-sans-latin-600-italic.woff2') format('woff2');
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/nunito-sans/nunito-sans-latin-500-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/nunito-sans/nunito-sans-latin-500-italic.woff2') format('woff2');
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito-sans/nunito-sans-latin-400-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/nunito-sans/nunito-sans-latin-400-italic.woff2') format('woff2');
  font-display: swap;
}

/* Light (300) */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/nunito-sans/nunito-sans-latin-300-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/nunito-sans/nunito-sans-latin-300-italic.woff2') format('woff2');
  font-display: swap;
}

/* Extra Light (200) */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/nunito-sans/nunito-sans-latin-200-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/nunito-sans/nunito-sans-latin-200-italic.woff2') format('woff2');
  font-display: swap;
}

/* =================================================
   End of Nunito Sans @font-face declarations
   ================================================= */


/* =================================================
       6️⃣ End of stylesheet
       ================================================= */