/**
 * Custom Styles for Sierra Child Theme
 */
/* ============================================
   Table of Contents - Sub-List Styling
   ============================================ */

/* Sub-list container */
.table-sub-content {
	position: relative;
	z-index: 10;
	pointer-events: auto;
}

/* Sub-list links - ensure they're clickable and properly styled */
.table-sub-content a {
	display: block !important;
	color: #160647 !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
	position: relative !important;
	z-index: 20 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	line-height: 1.5 !important;
	width: 100% !important;
	margin-bottom: 10px;
}

/* Sub-list links hover - primary green color - MUST override parent styles */
.table-sub-content a:hover,
.ekit-stylish-list-content-wrapper:hover .table-sub-content a:hover,
.elementor-widget:hover .table-sub-content a:hover {
	color: #006600 !important;
	text-decoration: none !important;
}

/* Sub-list links active/clicked state */
.table-sub-content a:active,
.table-sub-content a:focus {
	color: #006600 !important;
	outline: 2px solid #006600 !important;
	outline-offset: 2px !important;
}

/* Sub-list links visited state - keep default color */
.table-sub-content a:visited {
	color: #160647 !important;
}

/* CRITICAL: Prevent parent list hover from affecting sub-list items */
/* Override parent wrapper hover when sub-list is hovered */
.ekit-stylish-list-content-wrapper:has(.table-sub-content:hover),
.ekit-stylish-list-content-wrapper:has(.table-sub-content a:hover) {
	/* Prevent parent hover background/transform when sub-list is hovered */
	background-color: inherit !important;
	transform: none !important;
	filter: none !important;
}

/* Override parent list title hover color when sub-list is hovered - MUST be very specific */
.ekit-stylish-list-content-wrapper:has(.table-sub-content:hover) .ekit-stylish-list-content-title,
.ekit-stylish-list-content-wrapper:has(.table-sub-content a:hover) .ekit-stylish-list-content-title,
.elementor-widget:has(.table-sub-content:hover) .ekit-stylish-list-content-title,
.elementor-widget:has(.table-sub-content a:hover) .ekit-stylish-list-content-title {
	color: inherit !important;
}

/* Override parent icon hover when sub-list is hovered */
.ekit-stylish-list-content-wrapper:has(.table-sub-content:hover) .ekit-stylish-list-content-icon > i,
.ekit-stylish-list-content-wrapper:has(.table-sub-content a:hover) .ekit-stylish-list-content-icon > i,
.ekit-stylish-list-content-wrapper:has(.table-sub-content:hover) .ekit-stylish-list-content-icon > svg,
.ekit-stylish-list-content-wrapper:has(.table-sub-content a:hover) .ekit-stylish-list-content-icon > svg {
	color: inherit !important;
}

/* Ensure parent list only changes color when hovered directly (not sub-list) */
/* Note: Parent hover styles are defined by Elementor widget settings */
/* The :not() selectors above prevent parent hover when sub-list is hovered */

/* Fix for broken line breaks in HTML (</br> should be <br>) */
.table-sub-content br {
	display: block;
	content: "";
	margin-bottom: 0.25rem;
}

/* Ensure smooth scrolling for anchor links */
html {
	scroll-behavior: smooth;
}

/* Add offset for fixed headers when scrolling to anchors */
.table-sub-content a[href^="#"] {
	scroll-margin-top: 100px;
}

/* Ensure anchor links are clickable - remove any blocking styles */
.table-sub-content a[href^="#"] {
	pointer-events: auto !important;
	user-select: text !important;
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
}

/* JavaScript fallback: Prevent parent hover when sub-list is hovered */
.ekit-stylish-list-content-wrapper.sub-list-hovered .ekit-stylish-list-content-title {
	color: inherit !important;
}

.ekit-stylish-list-content-wrapper.sub-list-hovered .ekit-stylish-list-content-icon > i,
.ekit-stylish-list-content-wrapper.sub-list-hovered .ekit-stylish-list-content-icon > svg {
	color: inherit !important;
}

.ekit-stylish-list-content-wrapper.sub-list-hovered {
	background-color: inherit !important;
	transform: none !important;
	filter: none !important;
}

/* ============================================
   Table of Contents - Scrollable Container
   ============================================ */

/* TOC Container - Make it scrollable with hidden scrollbar */
.ekit-stylish-list,
.elementor-widget-ekit_stylish_list .ekit-stylish-list,
.elementor-widget .ekit-stylish-list {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc(100vh - 200px); /* Adjust based on your layout */
	scroll-behavior: smooth;
	
	/* Hide scrollbar for Chrome, Safari, Opera */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}

.ekit-stylish-list::-webkit-scrollbar,
.elementor-widget-ekit_stylish_list .ekit-stylish-list::-webkit-scrollbar,
.elementor-widget .ekit-stylish-list::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	background: transparent;
}

/* Ensure TOC doesn't break layout */
.ekit-stylish-list,
.elementor-widget-ekit_stylish_list .ekit-stylish-list,
.elementor-widget .ekit-stylish-list {
	position: relative;
	box-sizing: border-box;
}


/*header-menu css*/
.main-header-section .demo-book-cta a,
.main-header-section .login-cta a{
	font-weight: 500;
}
.main-header-section a.download-submenu-font.dropdown-item {
	font-weight: 400;
}

/* Sticky Table of Contents – Desktop only */
@media (min-width: 1024px) {
  .blog-toc-sticky {
    position: sticky;
    top: 100px; /* adjust based on header height */
    align-self: flex-start;
    height: fit-content;
  }
  .single-post aside#secondary {
      margin-top: 380px;
  }
  .single-post .keydesign-container{
      padding-top: 70px;
  }
  /* Scroll only the TOC list, not the column */
  /*.blog-toc-scroll {*/
  /*  max-height: calc(100vh - 160px);*/
  /*  overflow-y: auto;*/
  /*  padding-right: 8px;*/
  /*}*/
}
.single-post .entry-meta{
    margin-bottom: 30px !important;
}
.single-post nav.rank-math-breadcrumb {
    margin-bottom: 50px;
}
.blog-list-style li{
	list-style-position: inside;
}
.blog-list-style strong{
	color: #000000a6 !important;
}
   /* ============================================
	  Demo Form Styles - Figma Design
	  ============================================ */
   
   .demo-form {
	   padding: 2rem;
   }
   
   .demo-form .form-row {
	   display: grid;
	   grid-template-columns: 1fr 1fr;
	   gap: 1rem;
   }
   
   .demo-form .form-section {
	   margin-bottom: 1.5rem;
   }
   
   .demo-form .form-row .form-section {
	   margin-bottom: 0;
   }
   
   .demo-form .form-label {
	   display: block;
	   color: #313636 !important;
   }
   
   .demo-form input[type="text"],
   .demo-form input[type="email"],
   .demo-form input[type="tel"],
   .demo-form select,
   .demo-form textarea {
       border: 1px solid rgba(22, 6, 70, 0.08) !important;
       border-radius: 16px !important;
   }
   
   .demo-form input[type="tel"] {
       margin-bottom: 0px !important;
   }
   
   .demo-form input:focus,
   .demo-form select:focus,
   .demo-form textarea:focus {
	   outline: none;
	   border-color: #006600 !important;
   }
   
   /* Placeholder styling */
   .demo-form input::placeholder,
   .demo-form textarea::placeholder,
   .demo-form select {
	   color: #9ca3af !important;
	   opacity: 1 !important;
   }
   
   .demo-form .phone-input-group p {
	   display: flex;
	   gap: 8px;
	   /*align-items: center;*/
	   margin: 0;
   }
   
   /* ============================================
   Select placeholder vs selected state FIX
   ============================================ */

/* Default select text (actual selected value) */
.demo-form select {
    color: #313636 !important;
}

/* Placeholder state (when empty value is selected) */
.demo-form select:has(option[value=""]:checked) {
    color: #9ca3af !important;
}

/* Fallback for browsers without :has() support */
.demo-form select[data-placeholder-selected="true"] {
    color: #9ca3af !important;
}

.demo-form .wpcf7-not-valid-tip{
	padding-left: 0px !important;
}
   
   /* Mobile responsive */
   @media (max-width: 768px) {
	   .demo-form {
		   padding: 1.5rem;
	   }
	   
	   .demo-form .form-row .form-section {
		   margin-bottom: 1.5rem;
	   }
	   
	   .demo-form .phone-input-group {
		   /* Keep unified field design on mobile */
		   flex-direction: row;
	   }
	   
   }


/* Legal Page - Privacy Policy H2 Font Size */
.legal-page.privacy-policy h2 {
	font-size: 30px;
}

/* ============================================
   Punchly Style Contact Form (CF7) - Optimized
   ============================================ */

.book-demo-form .wpcf7-response-output{
    max-width: 900px;
	margin: 20px auto 0  !important;
	
}


/* ============================================
   Blog Sidebar CTA Card & Sticky Behavior
   ============================================ */

/* CTA Card Widget Styles */
.sidebar-cta-card {
	background: #F3FCFA;
	border-radius: 12px;
	padding: 2rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	/*margin-bottom: 2rem;*/
	text-align: center;
	border: 1px solid #E8F5F0;
}

.sidebar-cta-card__heading {
	line-height: 1.3;
}

.sidebar-cta-card__text {
	line-height: 1.4;
}

.sidebar-cta-card__button {
	display: inline-block;
	background: #006600; /* Site primary color */
	color: #FFFFFF;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
	/*box-shadow: 0 2px 4px rgba(0, 102, 0, 0.2);*/
}

.sidebar-cta-card__button:hover,
.sidebar-cta-card__button:focus {
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 102, 0, 0.3);
	outline: none;
}

/* Mobile responsive - sidebar below content */
@media (max-width: 1023px) {
	.blog .sidebar,
	.single-post .sidebar,
	.archive .sidebar {
		position: static;
		margin-top: 2rem;
		order: 2; /* Ensure sidebar comes after main content */
	}

	.sidebar-cta-card {
		margin-bottom: 1.5rem;
		padding: 1.5rem;
	}

	.sidebar-cta-card__button {
		width: 100%;
		padding: 0.875rem 1rem;
	}
}

/* ============================================
   Header Menu - Hide mobile-show on Desktop
   ============================================ */

/* Hide mobile-show elements on desktop view only (visible on tablet and mobile) */
@media (min-width: 1024px) {
	.main-header-section .mobile-show {
		display: none !important;
	}
}

/* ============================================
   Punchly Top Tabs Slider Styles
   ============================================ */

.punchly-top-tabs .elementkit-tab-nav,
.punchly-top-tabs .nav.nav-tabs.elementkit-tab-nav,
body .punchly-top-tabs .elementkit-tab-nav,
body .punchly-top-tabs .nav.nav-tabs.elementkit-tab-nav,
.punchly-top-tabs .elementkit-tab-nav[style*="justify-content"],
body .punchly-top-tabs .elementkit-tab-nav[style*="justify-content"] {
	scroll-behavior: smooth !important;
	-webkit-overflow-scrolling: touch !important;
	padding: 10px !important;
	scrollbar-width: none !important; 
	-ms-overflow-style: none !important;
}

/* ============================================
   Punchly Top Tabs - Mobile Responsive Styles
   ============================================ */
@media screen and (max-width: 768px) {
    .main-header-section a.download-submenu-font.dropdown-item {
    	font-size: 14px !important;
    }
	/* Force container to extend full width */
	body .punchly-top-tabs,
	body .elementor-widget .punchly-top-tabs,
	body .elementor-element .punchly-top-tabs {
		margin-left: -1rem !important;
		margin-right: -1rem !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		width: calc(100% + 2rem) !important;
		max-width: none !important;
		box-sizing: border-box !important;
	}
	
	/* Force widget containers */
	body .punchly-top-tabs .elementor-widget-container,
	body .punchly-top-tabs .ekit-wid-con,
	body .elementor-widget .punchly-top-tabs .elementor-widget-container,
	body .elementor-widget .punchly-top-tabs .ekit-wid-con {
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	
	/* Force tab navigation - override inline styles */
	body .punchly-top-tabs .elementkit-tab-nav,
	body .punchly-top-tabs .nav.nav-tabs.elementkit-tab-nav,
	body .punchly-top-tabs .elementkit-tab-nav[style*="justify-content"],
	body .elementor-widget .punchly-top-tabs .elementkit-tab-nav {
		display: flex !important;
		flex-wrap: nowrap !important;
		flex-direction: row !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 8px !important;
		padding: 8px 0 !important;
		margin: 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-behavior: smooth !important;
		-webkit-overflow-scrolling: touch !important;
		scroll-snap-type: x mandatory !important;
		width: 100% !important;
		box-sizing: border-box !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
	}
	
	/* Hide scrollbar */
	body .punchly-top-tabs .elementkit-tab-nav::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		background: transparent !important;
	}

	/* Force nav links */
	body .punchly-top-tabs .elementkit-nav-link,
	body .punchly-top-tabs .elementkit-nav-link.active,
	body .punchly-top-tabs .elementkit-nav-link.top-pos,
	body .punchly-top-tabs .nav-link,
	body .punchly-top-tabs a.elementkit-nav-link,
	body .elementor-widget .punchly-top-tabs .elementkit-nav-link {
		display: inline-flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		/*padding: 10px 16px !important;*/
		margin: 0 !important;
		/*font-size: 0.875rem !important;*/
		line-height: 1.2 !important;
		white-space: nowrap !important;
		height: auto !important;
		width: auto !important;
		box-sizing: border-box !important;
		text-decoration: none !important;
	}
}