/* Vini Drelli – layout, mobile and accessibility fixes.
   Loaded last so these rules win over the exported Soloist/Bootstrap styles. */

/* --------------------------------------------------------------------------
   Scrolling
   The export forces <main> to 100vh with its own scrollbar. On phones this
   breaks with the dynamic browser toolbars (content can be cut off) and makes
   anchor links scroll the wrong container. Let the document scroll normally.
   -------------------------------------------------------------------------- */
#main-content {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible !important;
}

.fkbojnc {
  overflow-y: visible;
}

/* The export locks the document to 100vh and hides its overflow, so removing
   the <main> scrollbar would leave the page with no way to scroll. */
html,
body {
  height: auto !important;
  min-height: 100%;
  overflow-y: auto !important;
}

#__next {
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Skip link (visible only when focused with the keyboard) */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 12px 16px;
  background: #ffffff;
  color: #15141a;
  font-weight: 600;
  text-decoration: underline;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Programmatic focus targets are not interactive controls; do not draw a ring
   around a whole section. */
[tabindex="-1"]:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Header / mobile menu
   The hamburger had no behaviour and its panel was permanently display:none.
   -------------------------------------------------------------------------- */
.menu-toggle {
  border: 0;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  background: transparent;
  color: inherit;
  line-height: 0;
  transform: none;
}

.menu-toggle svg {
  height: 22px;
  width: 22px;
}

.menu-toggle[aria-expanded="true"] {
  color: #a85800;
}

.f1wt0yvj.is-open {
  display: flex;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  color: #15141a;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f4;
}

.mobile-menu-nav li:last-child a {
  border-bottom: 0;
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus-visible {
  color: #a85800;
}

/* The desktop social nav is parked off-canvas below 992px: hide it from
   keyboard and screen-reader users too, not just visually. */
@media (max-width: 991.98px) {
  .f6i3sow {
    visibility: hidden !important;
  }
}

#mobile-menu {
  width: min(420px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  top: calc(100% + 14px);
  border-color: #cfcfd8;
}

@media (min-width: 992px) {
  #mobile-menu {
    display: none !important;
  }
}

/* Comfortable touch targets for the social icon links */
.social-network-links a {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Reviews carousel
   Native buttons instead of div[role=button]; arrows stay clear of the text
   on small screens. Autoplay is disabled in the page script.
   -------------------------------------------------------------------------- */
.chev-btn {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

@media (max-width: 991.98px) {
  #CustomerReviews .chev-btn {
    align-items: center;
    min-height: 44px;
    width: 38px;
  }

  #CustomerReviews .chev-btn svg {
    height: 32px;
    width: 32px;
  }

  #CustomerReviews .carousel-review {
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* Brand text uses a span instead of a heading so the document has a single,
   correctly ordered H1 (the hero) and no decorative H3 before it. */
.logo-title {
  display: block;
  margin: 0;
  color: #0c0a09;
  font-family: var(--font-bai-jamjuree);
  font-size: 28.8px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
#Contact address {
  font-style: normal;
}

.contact-phone {
  margin: 0 0 8px;
  font-family: var(--font-bai-jamjuree);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2em;
}

#Contact address a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}

#Contact iframe {
  display: block;
  width: 100%;
  max-width: 600px !important;
  height: clamp(300px, 70vw, 450px);
  border: 0;
}

/* --------------------------------------------------------------------------
   Visible keyboard focus everywhere (WCAG 2.4.7)
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
iframe:focus-visible {
  outline: 3px solid #a85800;
  outline-offset: 3px;
}

.fv7z6th a:focus-visible,
.fv7z6th button:focus-visible {
  outline-color: #ffb26f;
}