/*
Theme Name: TailPress
Theme URI: https://github.com/jeffreyvr/tailpress
Author: Jeffrey van Rossum
Author URI: https://vanrossum.dev
Description: TailPress is a simple boilerplate WordPress theme with Tailwind CSS.
Version: 3.4.0
License: MIT
License URI: https://github.com/jeffreyvr/tailpress/blob/master/LICENSE
Text Domain: tailpress
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

html {
  scroll-behavior: smooth;
}

* {
  font-family: "Montserrat", serif;
  /* font-optical-sizing: auto; */
  /* font-weight: 400; */
  /* font-style: normal; */
  /* font-size: inherit; */
  /* line-height: 1.4rem; */
  /* border: solid 1px red; */
  text-decoration: none !important;
}

p,
li {
  font-size: 1rem !important;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

section a {
  text-decoration: underline;
}

p:not(:last-of-type)
li:not(:last-of-type) {
  margin-bottom: 1rem;
}

p:first-of-type {
  margin-bottom: 1rem;
}

@media (max-width: 480px) {
  p,
  p * {
    font-size: 1rem !important;
  }
}

h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.font-playfair  {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  /* font-style: normal; */
}

body:not(.page-template-page-quiz) section ul:not(.slick-dots) li {
  margin-bottom: 1rem;
  position: relative;
}

body:not(.page-template-page-quiz) section ol:not(.slick-dots) li strong {
  color: #C0A677;
}

body:not(.page-template-page-quiz) section ul:not(.slick-dots) li::before {
  content: "";
  width: 26px;
  height: 26px;
  background-image: url('../taipress/assets/tick-circle.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  left: -40px; 
  top: 4px;
}
section.text-and-image div.c0a676  ul:not(.slick-dots) li::before,
section.text-and-image div.f3a5b2  ul:not(.slick-dots) li::before {
  background-image: url('../taipress/assets/tick-circle-white.svg');
}

body:not(.page-template-page-quiz) section.split-blocks ul:not(.slick-dots) {
  padding-left: 2rem;
}

body:not(.page-template-page-quiz) section.split-blocks ul:not(.slick-dots) li::before {
  background-image: url('../taipress/assets/tick-circle-white.svg');
  left: -35px;
}

.post-edit-link {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 99;
  padding: 15px 25px;
  color: #fff;
  background: black;
  border-radius: 15px;
} 

.container {
  max-width: 100% !important;
}

/* Menu */
.sub-menu {
  display: none;
}

/* Page Builder */
@media (max-width: 1100px){
  section.text-and-image .text-and-image-inner {
    flex-wrap: wrap;
  }
  section.text-and-image .text-and-image-inner div {
    width: 100%;
    flex: 1 1 100% !important;
  }
  section.text-and-image .text-and-image-inner div:first-of-type {
    margin-bottom: 20px;
  }
}

section:not(.pb-post-slider) {
  overflow: hidden;
}

section.embed-container { 
  position: relative; 
  padding-top: 47.25%;
  overflow: hidden;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
} 

@media (max-width: 767px) {
  section.embed-container { 
    padding-top: 47.25%;
  }
}

section.embed-container:not(.max-w-full) { 
  border-radius: 24px;
}

section.embed-container iframe,
section.embed-container object,
section.embed-container embed,
section.embed-container video,
section.embed-container .mejs-video { 
  position: absolute;
  top: 5px;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  visibility: hidden;
  opacity: 0;
  transition: all 1s ease-in-out;
}

section.embed-container iframe.active,
section.embed-container object.active,
section.embed-container embed.active,
section.embed-container video.active,
section.embed-container .mejs-video.active {
  visibility: visible;
  opacity: 1;
}

.fa-play {
  color: #ffffff;
}

section.banner .image__right > div.translate-x-full {
  --tw-translate-x: 150% !important;
}

section.text-and-image .text p {
  margin-bottom: 1.2rem;
}

section.pb-post-slider .slick-slider {
  margin-bottom: 0 !important;
}

section.pb-repeater-image-cta .slick-dots,
section.pb-post-slider .slick-dots {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 1.5rem 4rem;
	list-style-type: none;
  bottom: -75px;
  width: 100%;
  right: 0;
  z-index: 49 !important
  ;
}

section.pb-repeater-image-cta .slick-dots li,
section.pb-post-slider .slick-dots li {
	margin: 0 0.25rem;
  width: 3rem;
	height: 0.5rem;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out; 
  -moz-transition: all 1s ease-in-out;    
  -o-transition: all 1s ease-in-out;      
  transition: all 1s ease-in-out;       
}

section.pb-repeater-image-cta .slick-dots li.slick-active,
section.pb-post-slider .slick-dots li.slick-active {
  width: 4.5rem;
	height: 0.5rem;
}

section.pb-repeater-image-cta .slick-dots li button,
section.pb-post-slider .slick-dots li button {
	display: block;
  width: 3rem;
	height: 0.5rem;
	padding: 0;
	border: none;
	background-color: #DFDEDE;
	text-indent: -9999px;
}

section.pb-repeater-image-cta .slick-dots li.slick-active button,
section.pb-post-slider .slick-dots li.slick-active button {
	background-color: #1F2122;
  width: 4.5rem;
	height: 0.5rem;
}

section.pb-repeater-image-cta .slick-arrow,
section.pb-post-slider .slick-arrow {
  border: solid 2px #1F2122;
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  cursor: pointer;
}

section.pb-repeater-image-cta .slick-prev,
section.pb-repeater-image-cta .slick-next,
section.pb-post-slider .slick-prev, 
section.pb-post-slider .slick-next {
  top: unset;
  transform: unset;
  -webkit-transform: unset;
  bottom: -75px;
}

section.pb-repeater-image-cta .slick-prev,
section.pb-post-slider .slick-arrow.slick-prev {
  left: 50px;
}

section.pb-repeater-image-cta .slick-next,
section.pb-post-slider .slick-arrow.slick-next {
  right: unset;
  left: 125px;
}

section.pb-repeater-image-cta .slick-prev:before,
section.pb-repeater-image-cta .slick-next:before,
section.pb-post-slider .slick-prev:before,
section.pb-post-slider .slick-next:before {
  font-weight: 700;
  font-size: 1.5rem;
  color: #1F2122;
}

@media (max-width: 767px) {
  section.pb-repeater-image-cta .slick-dots li,
  section.pb-post-slider .slick-dots li {
    width: 0.5rem !important;
	  height: 0.25rem !important;
  }

  section.pb-repeater-image-cta .slick-dots li button,
  section.pb-post-slider .slick-dots li button {
    height: 0.25rem !important;
  }

  section.pb-repeater-image-cta .slick-dots li.slick-active,
  section.pb-post-slider .slick-dots li.slick-active {
    width: 0.75rem !important;
	  height: 0.25rem !important;
  }

  section.pb-repeater-image-cta .slick-dots li.slick-active button,
  section.pb-post-slider .slick-dots li.slick-active button {
    width: 0.75rem !important;
	  height: 0.25rem !important;
  }

  section.pb-repeater-image-cta .slick-arrow,
  section.pb-post-slider .slick-arrow {
    padding: 1.25rem 1.5rem;
  }

  section.pb-repeater-image-cta .slick-prev:before,
  section.pb-repeater-image-cta .slick-next:before,
  section.pb-post-slider .slick-prev:before,
  section.pb-post-slider .slick-next:before {
    font-size: 1.25rem;
  }
}

/* General Styles for Menu */
#primary-menu {
  display: flex; /* Default flex display */
  justify-content: center;
  align-items: center;
  margin-top: 0;
  padding-left: 0;
  background-color: transparent;
  position: relative; /* Ensure submenus are positioned relative to the parent */
}

/* For mobile - Initially hide the menu */
#primary-menu {
  display: none; /* Hide mobile menu by default */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 1024px;
  background-color: #333; /* Dark background for mobile */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  flex-direction: column;
}

/* Show menu when mobile toggle is active */
#primary-menu.show {
  display: flex;
    height: 100vh;
    flex-direction: column;
    flex-wrap: wrap;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: unset;
    padding: 0;
}

#primary-menu.show #primary-menu-close {
  display: block;
}

#primary-menu.show #menu-main-menu {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 20px; 
}

/* Main Menu Items */
#primary-menu .menu-item {
  position: relative; /* Ensures submenus are positioned relative to the parent */
  text-align: center;
	margin-bottom: 0;
}

#primary-menu li {
	margin-bottom:0;
}
#primary-menu li a {
  text-decoration: none;
  display: block;
}

/* Submenu Styles */
#primary-menu .menu-item .sub-menu {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%);
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 200px;
}

#primary-menu .menu-item:hover .sub-menu {
  display: block;
}

#primary-menu .menu-item .sub-menu li {
  padding: 0.5rem 1rem;
}

#primary-menu .menu-item .sub-menu li a {
  color: #3B3C3B;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

#primary-menu .menu-item .sub-menu li a:hover {
  text-decoration: underline;
}

#primary-menu .menu-item-has-children::after {
  content: " ▼"; /* Downward arrow for menu items with submenus */
  margin-left: 5px;
  font-size: 14px;
  color: #fff;
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 1200px){
  #primary-menu .menu-item-has-children::after {
    right: -15px;
    font-size: 8px;
  }
}

/* Mobile Menu Toggle */
#primary-menu-toggle {
  display: block; /* Visible on mobile */
  cursor: pointer;
  z-index: 10000;
}

#primary-menu-toggle svg {
  fill: #fff; /* White color for hamburger icon */
}

@media (max-width:1467px) {
  #header-quiz span {
    display: none;
  }
}

/* Adjustments for Mobile */
@media (max-width: 1380px) {
  #header-quiz sup {
    display: none; /* Hide the quiz button on mobile */
  }
}

@media (max-width: 1300px){
  #header-quiz,
  #primary-menu li a {
    font-size: 12px !important;
  }
}

@media (max-width: 1025px) {
  #primary-menu-close.active {
    display: block;
  }

  #primary-menu .menu-item .sub-menu {
    display: block;
    position: unset;
    left: unset;
    top: unset;
    transform: unset;
    background-color: unset;
    border-radius: unset;
    box-shadow: none;
    width: auto;
  }
 
  #primary-menu .menu-item li,
  #primary-menu .menu-item li a,
  #primary-menu .menu-item .sub-menu li a {
    color: white !important;
  }

  #primary-menu li,
  #primary-menu li a {
    font-size: 18px !important;
    color: white !important;
  }

  #primary-menu .menu-item .sub-menu li,
  #primary-menu .menu-item .sub-menu li a {
    font-size: 14px !important;
  }
}


/* Adjustments for Mobile */
@media (max-width: 1024px) {
  #mobile-header {
    width: 100%;
  }

  #header-quiz {
    display: none; /* Hide the quiz button on mobile */
  }

  /* Ensure hamburger menu icon is shown on mobile */
  .lg\\:hidden {
    display: block;
  }
}

/* Desktop Menu Styles */
@media (min-width: 1025px) {
  #primary-menu {
    display: flex !important; /* Always show the menu on desktop */
    position: static;
    background-color: transparent;
    box-shadow: none;
    flex-direction: row; /* Horizontal layout on desktop */
  }

  #primary-menu-toggle {
    display: none; /* Hide the hamburger menu toggle on desktop */
  }

  #header-quiz {
    display: inline-block; /* Show quiz button on desktop */
  }

  /* #primary-menu .menu-item li a {
    color: white !important;
  } */
}

@media (max-width: 781px) {
  #header-light-logo {
    display: none;
  }

  #header-dark-logo {
    display: block;
  }

  #primary-menu-toggle svg {
    fill: black; /* White color for hamburger icon */
  }
}