/* --- Hamra Healing font selection --- > see template styles*/

/* Desktop spacing handled by Bootstrap d-lg-flex and ms-3 */



/* ===== Transparent Overlapping Header and Menu ===== */

.offcanvas-menu {
  background: rgba(255, 255, 255, 0.2); /* transparent white */
  backdrop-filter: blur(10px);          /* blur behind */
  -webkit-backdrop-filter: blur(10px);  /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  color: #252525;
}

#sp-header {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 9999;
}



/* Make the menu a flex container */
#sp-header .sp-megamenu-parent {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Underline active menu item */
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.current-item > a {
    text-decoration: underline;
}

/* Set menu item hover color */
#sp-header .sp-megamenu-parent > li.sp-menu-item > a:hover,
#sp-header .sp-megamenu-parent > li.sp-menu-item:hover > a {
    color: #885000 !important;
}


/* Do not display Home */
#sp-header .sp-megamenu-parent > li > a[href="/"] {
    display: none !important;
}

#sp-header .sp-megamenu-parent > li.hide-home {
    display: none !important; /* fallback */
}

.button-container {
  display: flex;
  justify-content: center;
}

/* Style for custome menu button and custom button*/
.custom-btn { 
  padding: 6px 22px !important;     /* smaller height */
  line-height: 1.2 !important;
  font-size: 14px;
  border-radius: 20px;
  display: inline-block;
  /*background-color: #c9a46c !important; */
  background-color: rgba(216, 133, 0, 1);
  color: #fff;
  text-align: center;
  white-space: nowrap;
  /* Hover transitions */
  transition: all 0.3s ease;
}

/* MENU ONLY */
#sp-header .sp-megamenu-parent > li > a.custom-btn {
  /* Positioning */
  margin-left: 50px;                 /* move more to the right */
}

/* BODY ONLY */
body .custom-btn {
  display: inline-block;
  margin: 20px auto;   /* center in content */
}

#sp-header .sp-megamenu-parent > li > a.custom-btn:hover,
  .custom-btn:hover {
  background-color: #a8844f;
  color: #ffffff !important; 
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.btn-specs {
  padding: 10px 22px !important;     /* smaller height */
  line-height: 1.4;
  font-size: 16px;
  margin-left: 0px; 
  /*  text-decoration: none;
  font-weight: 600;
  border: none;
*/
}

.btn-color-white {
  /*  background: linear-gradient(135deg, #c9a46c, #e6c48a);*/
  background: #fff;
  color: #333333; 
 

}



/* Remove Helix auto spacing for sticky header */
body.has-sticky-header {
    padding-top: 0 !important;
}

/* Remove header container background */
#sp-header,
#sp-header .container,
#sp-header .row {
    background: transparent !important;
}


/* Make menu text white */
#sp-header .sp-megamenu-parent > li > a {
    color: #fff !important;
}

#sp-header .sp-megamenu-parent > li > a:hover {
    color: #ddd !important;
}

/* ===== End Transparent Overlapping Header and menu ===== */

.item-page .page-header,
.item-page .article-header,
.item-page .item-title {
    display: none !important;
}

/* Remove all social icons from articles */
.social-share-block,
.article-social-share,
.article-ratings-social-share,
.article-can-edit,
.social-share-icon {
    display: none !important;
}

/* Remove Joomla article spacing */
#sp-main-body,
#sp-main-body .container,
.item-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

}

/*===================================LAYOUT FOUNDATION ==============================*/
/* Full-width sections (heroes, banners) */
.section {

  position: relative;

  width: 100vw;@media (max-width: 768px) {
  .module-container {
    display: block;   /* simpler on mobile */
  }

  .module-container > * {
    width: 100%;
  }
}

  left: 50%;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: white;

  background-size: cover;
  background-repeat: no-repeat;
}

/* Centered content sections */
.container-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 20px;
}

.footer-section {
  max-width: 1100px;
  margin: 0 auto;
/*  padding: 10px 10px;*/
}


/*=============================END OF LAYOUT FOUNDATION ==============================*/


/*===========================COMPONENTS (reusable patterns)===========================*/


/* -------------------------Split layout (your image + text)--------------------------*/
 
.split-layout {
  display: flex;
  align-items: stretch;
  gap: 80px;
}

/* -------------------------Footer layout 4 text columns--------------------------*/

.footer-layout {
  display: flex;
  gap: 10px;@media (max-width: 768px) {
  .module-container {
    display: block;   /* simpler on mobile */
  }

  .module-container > * {
    width: 100%;
  }
}

}



.footer-layout > div {
  flex: 1;
  min-width: 0; /* prevents overflow */
}

@media (max-width: 768px) {
  .footer-layout {
    flex-direction: column; /* 👈 stack vertically */
    gap: 20px;
    text-align: center; /* 👈 centers all text */
  }

  .footer-layout > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 👈 centers everything horizontally */
  }
}


/* -------------------------Contact layout 2 columns unequal width--------------------------*/

.contact-layout {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

/* Make first column smaller */
.contact-layout > div:first-child {
  flex: 1;
}

/* Second column wider */
.contact-layout > div:last-child {
  flex: 2;
  margin-left: auto;
}

@media (max-width: 768px) {
  .contact-layout {
    flex-direction: column;
  }
}

/* ------------------------End Contact layout 2 columns unequal width--------------------------*/


/*------------------------Overlay system (reusable everywhere)-----------------------*/
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
}

.overlay-hero::before {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: rgba(0,0,0,0.2);
}

.overlay-dark2::before {
/*  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);*/
  background: rgba(0,0,0,0.2);
}

.overlay-dark3::before {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: rgba(0,0,0,0.3);
}

.overlay-dark4::before {
/*  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);*/
  background: rgba(0,0,0,0.4);
}

.overlay-warm::before {
  background: rgba(216, 133, 0, .8);
}

.content {
  position: relative;
  z-index: 1;
}


/*-------------------End Of Overlay system (reusable everywhere)----------------------*/




/*---------------------------------Typography-----------------------------------------*/

.title {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.title-bn {
  font-family: 'Baron Neue', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.title-lg {
  font-size: clamp(32px, 5vw, 46px);
}

.title-md {
  font-size: clamp(22px, 5vw, 36px);
}

.title-sm {
  font-size: clamp(16px, 5vw, 26px);
}


@media (max-width: 768px) {
.title-lg {
  font-size: clamp(22px, 5vw, 36px);
 }

.title-md {
  font-size: clamp(16px, 5vw, 26px);
 }

.title-sm {
  font-size: clamp(12px, 5vw, 16px);
 }
}

/*----------------------------End of Typography-----------------------------------------*/

/*====================END OF COMPONENTS (reusable patterns)============================*/


/*==============================Utilities==============================================*/

.py-lg { padding-top: 80px; padding-bottom: 80px; }
.py-md { padding-top: 60px; padding-bottom: 60px; }
.px-lg { padding-left: 280px; padding-right: 280px; }
@media (max-width: 768px) {
.px-lg { padding-left: 40px; padding-right: 40px; }
  }


.mt-lg { margin-top: 80px; }
.mb-lg { margin-bottom: 80px; }

.top-section.bg-b10 { background-position: center bottom 10%; }
.top-section.bg-b80 { background-position: center bottom 80%; }
.top-section.bg-b90 { background-position: center bottom 90%; }


.bottom-section.bg-b10 { background-position: center bottom 10%; }

/*=========================Enf Of Utilities============================================*/


/* Home Page - Fullscreen hero */
/* ---------------------------------Custom Hero --------------------------------------*/

.custom-hero {
  min-height: 100svh;
  margin-top: -110px; /* roughly header height */
  padding-top: 110px; /* keeps hero text visible */
}


justify-content: flex-end;
/* Over Mij Header - */

body.has-sticky-header:not(.home) {
    padding-top: 0 !important;
}

/* Over Mij Page - */

/* ---------------------------------Top Section --------------------------------------*/

.top-section {
  min-height: 40svh;
  margin-top: -110px;
  padding-top: 120px;
  background-position: center bottom 50%;
}

.below-top-section {
  padding: 60px 20px; /* ← top/bottom + left/right */
  max-width: 1100px;
  margin: 0 auto;
}

.above-bottom-section {
  min-height: 25svh;
  background-image: url('/images/interlaced.png');
  background-repeat: repeat;
  background-size: 400px 400px;
}

.above-bottom-section.section-overlay::before {
  background: rgba(216, 133, 0, .5);
}

.bottom-section {
  min-height: 40svh;
  padding: 60px;
  background-position: center bottom 50%;
}


/* IMAGE COLUMN */
.below-top-image {
  flex: 1 1 400px;
  display: flex;
  justify-content: flex-start;
  /*margin-left: -40px; /* 👈 tweak this */*/

}

/* IMAGE */
.below-top-image img {
    /* Makes sure the image never grows wider than its container.
     Keeps the image responsive
     Prevents overflow on small screens */
     width: 100%;
     height: 100%;
     object-fit: cover;
  
    /* Keeps the image’s natural aspect ratio.
     No stretching
     No squishing
     Height adjusts automatically based on width */

     border-radius: 12px;
    /* Adds a soft shadow behind the image.
     Slightly lifted look
     Depth against the background
     Not too strong (opacity 0.15) */
     box-shadow: 0 8px 20px rgba(0,0,0,0.15);

    /* Allows smooth animations when something about the image changes (hover, active, etc.).
     Anything that changes (scale, brightness, transform, etc.) will animate over 0.4 seconds. */
     transition: all 0.4s ease;

    /* Sets the initial scale of the image to normal size.
     This is often used so a hover effect can do: */
     transform: scale(1);
  
  /* Sets the initial brightness to normal.
     This is usually paired with:hover: */
     filter: brightness(1);
}

.below-top-text {

  /* ============= flexbox behaviour =============*/
  /* 	1 (flex-grow) → It can grow to take available space.
		1 (flex-shrink) → It can shrink if needed.
		350px (flex-basis) → It tries to start at 350px wide. */
  flex: 1 1 450px;

  /* ============= flexbox spacing and alignment =============  */
  /* Adds spacing inside the box. */
  padding: 20px; 

    /* Centers the text content.*/
  text-align: left;
  
  /* Controls position relative to other flex items. (Items with smaller order appear first.) */
 /* order: 2; */

  /* Allows absolutely-positioned children or layered effects. */
  position: relative;
 
  /* Ensures this text box sits above background images or decorations. */
  z-index: 2;
  border-radius: 12px; 

  font-size: clamp(12px, 5vw, 16px);
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.module-container{
  display: flex;
  align-items: center;
}


.footer-text {

  /* ============= flexbox behaviour =============*/
  /* 	1 (flex-grow) → It can grow to take available space.
		1 (flex-shrink) → It can shrink if needed.
		150px (flex-basis) → It tries to start at 150px wide. */
  flex: 1 1 150px;

  /* ============= flexbox spacing and alignment =============  */
  /* Adds spacing inside the box. */
  /* padding: 20px; */

    /* Centers the text content.*/
  text-align: left;
  
  /* Controls position relative to other flex items. (Items with smaller order appear first.) */
  order: 2;

  /* Allows absolutely-positioned children or layered effects. */
  position: relative;
 
  /* Ensures this text box sits above background images or decorations. */
  z-index: 2;
  border-radius: 12px; 

  font-size: clamp(12px, 5vw, 16px);
  font-family: 'Baron Neue', sans-serif;
  letter-spacing: 2px;
  margin-bottom: 10px;


}


@media (max-width: 768px) {
  .below-top-section {
    flex-direction: column;
    text-align: center;
  }

  .below-top-image {
    flex: 1 1 100%; /* full width */
    justify-content: center;
  }

  .below-top-text {
    flex: 1 1 100%; /* full width */
    padding: 10px;
  }

  .below-top-image img {
    max-width: 90%;
  }
}