/* ===========================================
   Custom Typography Overrides — Pineapple Hair
   =========================================== */

/* -----------------------------------------------
   NUCLEAR: Remove ALL bold from the entire site.
   font-weight 300 (light) for everything.
   This overrides main.css (600/700) and inline styles.
   ----------------------------------------------- */
*, *::before, *::after {
  font-weight: 300 !important;
}

/* -----------------------------------------------
   Fahkwang for headings (h1–h6) globally.
   Sizes reduced significantly (~40% smaller).
   ----------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Fahkwang', sans-serif !important;
  font-weight: 200 !important;
}

/* Exclude video card overlay text from Fahkwang */
.at-hero-video h1, .at-hero-video h2, .at-hero-video h3,
.at-hero-video h4, .at-hero-video h5, .at-hero-video h6,
.at-hero-video span, .at-hero-video p,
.sec-1-home-11__hero-video-card h1, .sec-1-home-11__hero-video-card h2,
.sec-1-home-11__hero-video-card h3, .sec-1-home-11__hero-video-card h4,
.sec-1-home-11__hero-video-card h5, .sec-1-home-11__hero-video-card h6,
.sec-1-home-11__hero-video-card span, .sec-1-home-11__hero-video-card p {
  font-family: 'Raleway', sans-serif !important;
}

/* Base heading sizes (mobile-first) */
h1, .h1 { font-size: 38px !important; }
h2, .h2 { font-size: 32px !important; }
h3, .h3 { font-size: 28px !important; }
h4, .h4 { font-size: 22px !important; }
h5, .h5 { font-size: 18px !important; }
h6, .h6 { font-size: 16px !important; }

/* Desktop heading sizes */
@media screen and (min-width: 768px) {
  h1, .h1 { font-size: 44px !important; }
  h2, .h2 { font-size: 38px !important; }
  h3, .h3 { font-size: 32px !important; }
  h4, .h4 { font-size: 26px !important; }
  h5, .h5 { font-size: 20px !important; }
  h6, .h6 { font-size: 18px !important; }
}

@media screen and (min-width: 1401px) {
  h1, .h1 { font-size: 52px !important; }
  h2, .h2 { font-size: 44px !important; }
  h3, .h3 { font-size: 36px !important; }
  h4, .h4 { font-size: 28px !important; }
  h5, .h5 { font-size: 22px !important; }
  h6, .h6 { font-size: 18px !important; }
}

/* Override custom large-size utility classes too */
.fz-160 { font-size: clamp(40px, 6vw, 80px) !important; }
.fz-200 { font-size: clamp(40px, 6vw, 80px) !important; }
.fz-80 { font-size: clamp(20px, 3vw, 40px) !important; }
.fz-ds-1 { font-size: clamp(40px, 6vw, 80px) !important; }

/* Override competing !important rule from main.css (line 37276) */
.at-section-title,
.at-section-title *,
.alt-section-title,
.alt-section-title *,
.section-title,
.section-title *,
.reveal-text,
.at-faq-header button,
.at-faq-header span,
.at-btn,
.at-btn span {
  font-weight: 200 !important;
}

/* -----------------------------------------------
   About section: prevent text overlapping video card.
   The hero video card (translateY 50%) extends into
   the about section. Add right padding on desktop.
   ----------------------------------------------- */
@media (min-width: 768px) {
  .at-about-area .at-about-title-wrap {
    padding-right: clamp(220px, 22vw, 320px);
  }
}
@media (min-width: 1200px) {
  .at-about-area .at-about-title-wrap {
    padding-right: clamp(260px, 20vw, 340px);
  }
}
@media (max-width: 767px) {
  .at-about-area .at-about-title-wrap {
    padding-right: 0;
  }
}

/* -----------------------------------------------
   Footer text color: white on golden (#a68d6a)
   ----------------------------------------------- */
.mp-footer-style,
.mp-footer-style *,
.mp-footer-style a,
.mp-footer-style p,
.mp-footer-style span,
.mp-footer-style h1,
.mp-footer-style h2,
.mp-footer-style h3,
.mp-footer-style h4,
.mp-footer-style h5,
.mp-footer-style h6,
.mp-footer-style li,
.mp-footer-style .at-footer-copyright,
.mp-footer-style .at-hero-social a,
.mp-footer-style .alt-footer-link-item a {
  color: #ffffff !important;
}

/* Footer border/separator should also be white-ish */
.mp-footer-style .at-about-border {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* -----------------------------------------------
   WhatsApp Button + BackToTop alignment
   Both aligned on the same right axis, stacked vertically.
   WhatsApp at bottom, BackToTop above it.
   ----------------------------------------------- */
.whatsapp-button-wrapper {
  position: fixed;
  right: 50px;
  bottom: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #25D366;
  color: white !important;
  border-radius: 50%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}
.whatsapp-btn:hover {
  transform: scale(1.1);
  color: white !important;
}
.whatsapp-btn svg {
  width: 32px;
  height: 32px;
}

/* BackToTop sits directly above WhatsApp when visible */
.back-to-top-wrapper {
  right: 50px !important;
  width: 56px !important;
  height: 56px !important;
}
.back-to-top-btn {
  width: 56px !important;
  height: 56px !important;
  line-height: 56px !important;
}
.back-to-top-wrapper.back-to-top-btn-show {
  bottom: 88px !important;
}

@media (max-width: 574.98px) {
  .whatsapp-button-wrapper {
    right: 20px;
  }
  .back-to-top-wrapper {
    right: 20px !important;
  }
  .back-to-top-wrapper.back-to-top-btn-show {
    bottom: 88px !important;
  }
}

/* -----------------------------------------------
   Mobile Scroll Section Fix
   JS (ScrollSectionEffects) disables pinning on < 992px,
   but CSS keeps items absolute, causing them to stack (e.g. 1 to 4 jump).
   Force relative positioning on mobile so they stack normally.
   ----------------------------------------------- */
@media (max-width: 991px) {
  .scroll-section .item:not(:first-child),
  .sec-6-home-11__scroll-stack.scroll-section .item:not(:first-child) {
    position: relative !important;
    yPercent: 0 !important;
    transform: none !important;
  }
}

/* -----------------------------------------------
   Mobile Menu / Offcanvas Typography Adjustments
   Reduces oversized mobile menu link font size
   ----------------------------------------------- */
.at-offcanvas-menu > nav > ul > li,
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li {
  position: relative !important;
  margin-bottom: 12px !important;
}

.at-offcanvas-menu > nav > ul > li > a,
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li > a {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 300 !important;
  font-family: 'Raleway', sans-serif !important;
  letter-spacing: -0.01em !important;
  color: var(--at-common-black) !important;
  display: inline-block !important;
  padding: 2px 0 !important;
}

@media screen and (min-width: 576px) {
  .at-offcanvas-menu > nav > ul > li > a,
  .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li > a {
    font-size: 26px !important;
  }
}

@media screen and (min-width: 992px) {
  .at-offcanvas-menu > nav > ul > li > a,
  .at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li > a {
    font-size: 30px !important;
  }
}

/* Submenu toggle button (+) alignment and sizing */
.at-offcanvas-menu > nav > ul > li .at-menu-close,
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .at-menu-close {
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 8px !important;
}

.at-offcanvas-menu > nav > ul > li.active > .at-menu-close,
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li.active > .at-menu-close {
  transform: translateY(-50%) !important;
}

.at-offcanvas-menu > nav > ul > li .at-menu-close i,
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .at-menu-close i {
  font-size: 16px !important;
  color: var(--at-common-black) !important;
  transition: transform 0.3s ease !important;
}

.at-offcanvas-menu > nav > ul > li.active > .at-menu-close i,
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li.active > .at-menu-close i {
  transform: rotate(45deg) !important;
}

/* Submenu items styling */
.at-offcanvas-menu > nav > ul > li .submenu,
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .submenu {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-left: 12px !important;
}

.at-offcanvas-menu > nav > ul > li .submenu > li,
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .submenu > li {
  margin-bottom: 6px !important;
}

.at-offcanvas-menu > nav > ul > li .submenu > li > a,
.at-offcanvas-2-wrapper .at-offcanvas-menu > nav > ul > li .submenu > li > a {
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  opacity: 0.85 !important;
}