/*
Theme Name: Flatsome Child
Description: Child theme for Flatsome
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* =========================================================
   Brand styles
   ========================================================= */

/* Base typography */
h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical > li > a {
  font-family: "Host Grotesk", sans-serif;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.6;
}

/* Headings (mobile default) */
h1 {
  font-family: "Host Grotesk", sans-serif !important;
  font-weight: 400 !important;
  font-size: 46px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

h2 {
  font-family: "Host Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 36px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em !important;
}

h3 {
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
}

h4 {
  font-family: "Inter", sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
}

h5 {
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

/* Paragraphs (mobile default) */
p,
.p2 {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.p1 {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.small,
small {
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Links (mobile default) */
a {
  text-decoration: none !important;
}

a.link-primary {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

a.link-secondary {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Custom heading */
.h3-custom {
  font-family: "Host Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 46px !important;
}

/* =========================================================
   Responsive type
   ========================================================= */

/* Tablet ≥ 48em (768px) */
@media (min-width: 48em) {
  h1 {
    font-weight: 400 !important;
    font-size: 72px !important;
    line-height: 1.1 !important;
  }

  h2 {
    font-weight: 500 !important;
    font-size: 56px !important;
    line-height: 1.15 !important;
  }

  h3 {
    font-weight: 600 !important;
    font-size: 36px !important;
    line-height: 1.25 !important;
  }

  h4 {
    font-weight: 500 !important;
    font-size: 28px !important;
    line-height: 1.35 !important;
  }

  h5 {
    font-weight: 400 !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  p,
  .p2 {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
  }

  .p1 {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
  }

  .small,
  small {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  a.link-primary {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  a.link-secondary {
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  .hero-subtitle {
    padding-right: 10px;
    padding-left: 10px;
  }

  .h3-custom {
    font-size: 36px !important;
  }
}

/* Desktop ≥ 64em (1024px) */
@media (min-width: 64em) {
  h1 {
    font-weight: 400 !important;
    font-size: 72px !important;
    line-height: 1.1 !important;
  }

  h2 {
    font-weight: 500 !important;
    font-size: 56px !important;
    line-height: 1.15 !important;
  }

  h3 {
    font-weight: 600 !important;
    font-size: 36px !important;
    line-height: 1.25 !important;
  }

  h4 {
    font-weight: 600 !important;
    font-size: 28px !important;
    line-height: 1.35 !important;
  }

  h5 {
    font-weight: 500 !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  p,
  .p2 {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
  }

  .p1 {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
  }

  .small,
  small {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  .h3-custom {
    font-size: 72px !important;
  }
}

/* =========================================================
   Scroll behaviour
   ========================================================= */

html {
  /* scroll-behavior: smooth; */
  scroll-padding-top: 70px !important;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-block;
  border-radius: 4px;
  font-size: 1.1em !important;
  font-family: "Inter", sans-serif;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
}

/* Primary */
.btn-primary {
  background-color: #8a42e6;
  color: #fff;
  border: none;
}

.btn-primary:hover {
  background-color: #6832ad;
  color: #fff;
}

/* Secondary */
.btn-secondary {
  background-color: #000;
  color: #fff;
  border: 2px solid #fff;
}

.btn-secondary:hover {
  background-color: #111;
  color: #fff;
  border-color: #fff;
}

/* =========================================================
   Links
   ========================================================= */

.link-primary {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.link-primary::after {
  content: "→";
  transition: transform 0.2s ease;
}

.link-primary:hover {
  color: #8a42e6;
}

.link-primary:hover::after {
  transform: translateX(3px);
}

.link-secondary {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000;
  text-decoration: none;
}

.link-secondary:hover {
  color: #8a42e6;
}

/* =========================================================
   Navigation
   ========================================================= */

.nav > li > a:hover,
.nav > li.current-menu-item > a {
  #color: #fffffd;
}

/* .nav > li > a:hover,
.nav > li.current-menu-item > a,
.nav > li.current-menu-item > a {
  color: #fffffd;
} */

.nav-top-link:hover {
  color: #8a42e6 !important;
}

.header:not(.transparent) .header-nav-main.nav > li.active > a {
  color: #081116 !important;
}

.header:not(.transparent) .header-nav-main.nav > li.active > a:hover {
  color: #8a42e6 !important;
}

.nav > li > a {
  font-weight: 700 !important;
}

/* Mobile nav menu size */
.mfp-content #main-menu .nav.nav-sidebar > li > a {
  font-size: 14px;
  line-height: 1.3;
  padding: 12px 20px;
}

/* =========================================================
   Header & hero
   ========================================================= */

.hero-title h1 {
  letter-spacing: -2px !important;
}

.hero-tag p {
  display: initial;
  background: #0811168c;
  border-radius: 30px;
  margin: 10px 20px;
  padding: 10px 20px;
}

/* Header icon colours */
body .header .header-main .social-icons,
body .header .header-main .cart-icon strong,
body .header .header-main .menu-title,
body .header .header-main .header-button > .button.is-outline,
body .header .header-main .nav > li > a > i:not(.icon-angle-down) {
  color: #fffffd !important;
}

.header:not(.stuck) .header-main .nav > li > a > i:not(.icon-angle-down) {
  color: #fffffd !important;
}

.has-sticky .header-wrapper.stuck .nav > li > a > i:not(.icon-angle-down) {
  color: #081116 !important;
}

/* Header button */
.header-button a {
  font-size: 15px !important;
}

/* =========================================================
   Logos on 404 & search
   ========================================================= */

.error404 .header-logo-dark,
.error404 .header-logo-sticky,
.search .header-logo-dark,
.search .header-logo-sticky {
  display: none !important;
}

.error404 .header-logo,
.search .header-logo {
  display: inline-block !important;
}

/* =========================================================
   Accordion / FAQ
   ========================================================= */

.ux-accordion .ux-accordion-title,
.accordion-title {
  color: #081116;
  font-weight: 600;
}

.accordion_title {
  color: #fffffd;
  font-size: 56px;
}

.faq-title-font {
  color: #fffffd;
}

.faq-question-font {
  font-size: 20px !important;
  font-weight: 600 !important;
}

.faq-answer-font {
  font-size: 18px !important;
  font-weight: 500 !important;
  margin-left: -35px !important;
}

.ux-accordion .ux-accordion-title:hover,
.ux-accordion .ux-accordion-title.active,
.accordion-title:hover,
.accordion-title.active {
  color: #fffffd;
  border-color: #fffffd;
}

.ux-accordion .ux-accordion-content,
.accordion-inner {
  color: #eff4fa;
  font-size: 16px;
  line-height: 1.6;
  padding-top: 0 !important;
}

/* One-row layout: title left, arrow right */
.accordion .accordion-item > a.accordion-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem;
  padding-left: 0 !important;
  text-align: left !important;
}

/* Title text */
.accordion .accordion-item > a.accordion-title > span {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  margin: 0 !important;
  width: auto !important;
}

/* Arrow on the right */
.accordion .accordion-item > a.accordion-title > .toggle {
  order: 2 !important;
  margin-left: 1rem !important;
  position: static !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
}

/* Hide theme's left icon */
.accordion .accordion-item > a.accordion-title::before {
  display: none !important;
}

/* FAQ mobile tweaks */
@media only screen and (max-width: 48em) {
  .accordion .accordion-item > a.accordion-title > span {
    font-size: 90% !important;
    line-height: normal;
  }

  .accordion .accordion-item > a.accordion-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem;
    width: 100%;
    padding-right: 0 !important;
  }

  .accordion .accordion-item > a.accordion-title > span {
    flex: 1 1 auto !important;
    min-width: 0;
  }

  .accordion .accordion-item > a.accordion-title > .toggle {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    position: static !important;
    width: 1.25em;
    height: 1.25em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* =========================================================
   Footer
   ========================================================= */

.footer-font p {
  font-size: 14px;
}

.footer-link a {
  color: #fffffd !important;
}

.footer-link a:hover {
  color: #8a42e6 !important;
}

/* =========================================================
   Search layout
   ========================================================= */

body.search .post-sidebar {
  display: none !important;
}

body.search .large-9.col {
  width: 100% !important;
}

body.search .archive-page-header {
  display: none !important;
}

/* Search box */
.search-field {
  border-radius: 4px 0 0 4px !important;
}

.ux-search-submit {
  background-color: #8a42e6 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.ux-search-submit:hover {
  background-color: #6832ad !important;
  color: #fff !important;
}

/* =========================================================
   Jetpack contact form
   ========================================================= */

#contact-form-629 input[type="text"],
#contact-form-629 input[type="email"],
#contact-form-629 textarea {
  width: 100% !important;
  border-radius: 4px;
}

#contact-form-629 {
  background: #fffffd;
  border-radius: 4px;
  padding: 30px;
}

.contact-form {
  margin-bottom: 0 !important;
}

/* Submit button width */
#contact-form-629 .pushbutton-wide {
  display: inline-block !important;
  width: auto !important;
}

/* Labels */
#contact-form-629 .grunion-field-label {
  color: #081116;
  font-size: 14px;
  font-weight: 500;
}

#contact-form-629 .grunion-label-required {
  color: #081116 !important;
  margin-left: 0.7em;
  opacity: 0.9;
}

.grunion-field-wrap {
  margin-bottom: 20px;
}

/* Submit button styling */
#contact-form-629 .pushbutton-wide {
  display: inline-block !important;
  width: auto !important;
  font-size: 15px !important;
  min-height: 2.5em;
  padding: 0 1.2em;
  border-radius: 4px;

  font-family: "Inter", sans-serif;
  font-size: 0.9em;
  line-height: 2.4em;
  letter-spacing: 0.03em;
  font-weight: 700;
  text-transform: none !important;
  text-align: center;
  text-decoration: none;

  background-color: #8a42e6;
  color: #fff;
  border: none;

  transition: all 0.25s ease;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}

#contact-form-629 .pushbutton-wide:hover {
  background-color: #6832ad;
  color: #fff;
}

#contact-form-629 .pushbutton-wide:disabled,
#contact-form-629 .pushbutton-wide[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Success message */
#contact-form-629 .contact-form-submission.submission-success {
  border-bottom: none !important;
  border-top: none !important;
}

.contact-form-submission {
  margin-bottom: 0 !important;
}

/* Hide submitted recap */
.contact-form-submission [data-wp-each-child],
.contact-form-submission .field-name,
.contact-form-submission .field-value,
.contact-form-submission .field-images {
  display: none !important;
}

/* Go back link */
#contact-form-629 .go-back-message .link {
  display: inline-block;
  padding: 4px 20px;
  border-radius: 4px;
  border: 2px solid #081116;
  background: transparent;
  color: #081116;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

#contact-form-629 .go-back-message .link:hover {
  background: #081116;
  color: #fffffd;
}

/* =========================================================
   Form error states
   ========================================================= */

:root {
  /* Global error scale */
  --err-pad: clamp(0.5rem, 1.2vw, 1rem);
  --err-gap: clamp(0.25rem, 0.8vw, 0.75rem);
  --err-fs: clamp(0.75rem, 0.85vw, 0.875rem);

  /* Hero and bridge layout */
  --hero-h: 100dvh;
  --hero-extra: 180px;
  --bridge: 180px;
  --bridge-m: 100px;
  --bridge-maxw: min(1050px, 94vw);
}

.contact-form__error {
  padding: 10px 20px !important;
  min-height: 1.5em;
  border-radius: 4px;
  vertical-align: middle;
  margin-top: var(--err-gap);
}

.contact-form__input-error {
  font-size: var(--err-fs) !important;
  line-height: 1.35;
  margin-top: calc(var(--err-gap) * 0.5);
}

/* =========================================================
   Hero / bridge between sections
   ========================================================= */

/* Base (mobile) */
.hero-overlap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Tablet ≥ 550px */
@media (min-width: 550px) {
  .hero-overlap {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
  }
}

/* Desktop ≥ 850px */
@media (min-width: 850px) {
  .hero-overlap {
    padding-top: 80px !important;
    padding-bottom: 140px !important;
  }
}

/* Hero height */
.hero-overlay,
.hero-overlay > .section-content {
  min-height: calc(var(--hero-h) + var(--hero-extra)) !important;
  position: relative;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

/* Fallback for browsers without dvh */
@supports not (height: 1dvh) {
  .hero-overlay,
  .hero-overlay > .section-content {
    min-height: calc(100vh + var(--hero-extra)) !important;
  }
}

/* After-hero and bridge card */
.after-hero,
.after-hero .section-content {
  position: relative;
  overflow: visible !important;
  padding-top: 0 !important;
  z-index: 2;
}

.after-hero .section-bg,
.after-hero .bg,
.after-hero .bg-fill,
.after-hero .section-bg-overlay,
.after-hero .ux-shape-divider {
  z-index: 0 !important;
}

.after-hero .bridge-card {
  position: static !important;
  display: block !important;
  width: var(--bridge-maxw) !important;
  height: auto;
  margin: calc(var(--bridge) * -1) auto 2rem !important;
  pointer-events: none;
}

@media (min-width: 768px) {
  .after-hero {
    padding-top: 40px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --hero-h: 100svh;
    --hero-extra: 80px;
  }

  .after-hero .bridge-card {
    margin: calc(var(--bridge-m) * -1) auto 1.25rem !important;
  }
}

/* =========================================================
   Mobile-only tweaks
   ========================================================= */

@media only screen and (max-width: 48em) {
  .hero-title h1 {
    letter-spacing: -2px;
  }

  .col-inner {
    padding-top: 0 !important;
  }
}

/* =========================================================
   Misc
   ========================================================= */

.about-us-image img {
  border-radius: 8px;
}