/*
Theme Name: PMC
Theme URI: 
Author: 
Author URI: 
Description: A modern dark theme built with Tailwind CSS
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pmc
Tags: dark-theme, tailwind, modern, custom-page-templates
*/

/* Tailwind CSS is loaded via CDN in functions.php */
/* Additional custom styles */

* {
	box-sizing: border-box;
}

/* Google Fonts - Exo 2 and Poppins */
* {
	font-family: 'Poppins', sans-serif;
}

body {
	margin: 0;
	font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.heading-font,
.font-exo {
	font-family: 'Exo 2', sans-serif;
	font-weight: 600;
}

/* Apply Exo 2 to headings in homepage */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Exo 2', sans-serif;
}

/* Body text uses Poppins */
p, span, a, li, div, input, textarea, select, button {
	font-family: 'Poppins', sans-serif;
}

/* Running Highlight/Marquee Bar */
.marquee-container {
	overflow: hidden;
	width: 100%;
	position: relative;
}

.marquee-content {
	display: inline-flex;
	animation: marquee 30s linear infinite;
	will-change: transform;
}

.marquee-content:hover {
	animation-play-state: paused;
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-33.333%);
	}
}

/* Ensure seamless loop by having multiple copies */
.marquee-content span {
	display: inline-block;
	padding-right: 4rem;
}

/* Navigation Menu Styles */
.pmc-primary-menu,
#primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.pmc-primary-menu li,
#primary-menu li {
	margin: 0;
	padding: 0;
	position: relative;
	list-style: none;
}

.pmc-primary-menu a,
#primary-menu a {
	text-decoration: none;
	display: flex;
	align-items: center;
	color: #d1d5db;
	font-weight: 500;
	padding: 0.5rem 0.75rem;
	transition: color 0.2s;
}

.pmc-primary-menu a:hover,
#primary-menu a:hover {
	color: #ffffff;
}

/* Arrow icon for menu items with children */
.pmc-primary-menu li.menu-item-has-children > a::after,
#primary-menu li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	margin-left: 6px;
	transition: transform 0.2s;
}

.pmc-primary-menu li.menu-item-has-children:hover > a::after,
#primary-menu li.menu-item-has-children:hover > a::after {
	transform: rotate(180deg);
}

/* Submenu Styles */
.pmc-primary-menu ul.sub-menu,
.pmc-primary-menu ul.children,
#primary-menu ul.sub-menu,
#primary-menu ul.children {
	display: block;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #1f2937;
	border: 1px solid #374151;
	border-radius: 0.5rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	padding: 0.5rem 0;
	margin-top: 0.5rem;
	min-width: 200px;
	z-index: 1000;
	list-style: none;
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	transform: translateY(-10px);
	pointer-events: none;
}

.pmc-primary-menu li:hover > ul.sub-menu,
.pmc-primary-menu li:hover > ul.children,
.pmc-primary-menu li.menu-item-has-children:hover > ul.sub-menu,
.pmc-primary-menu li.menu-item-has-children:hover > ul.children,
#primary-menu li:hover > ul.sub-menu,
#primary-menu li:hover > ul.children,
#primary-menu li.menu-item-has-children:hover > ul.sub-menu,
#primary-menu li.menu-item-has-children:hover > ul.children {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Keep submenu visible when hovering over it */
.pmc-primary-menu ul.sub-menu:hover,
.pmc-primary-menu ul.children:hover,
#primary-menu ul.sub-menu:hover,
#primary-menu ul.children:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Add padding to parent menu item to create hover area */
.pmc-primary-menu li.menu-item-has-children > a,
#primary-menu li.menu-item-has-children > a {
	position: relative;
}

.pmc-primary-menu ul.sub-menu li,
.pmc-primary-menu ul.children li,
#primary-menu ul.sub-menu li,
#primary-menu ul.children li {
	width: 100%;
	margin: 0;
}

.pmc-primary-menu ul.sub-menu a,
.pmc-primary-menu ul.children a,
#primary-menu ul.sub-menu a,
#primary-menu ul.children a {
	padding: 0.75rem 1rem;
	white-space: nowrap;
	color: #d1d5db;
}

.pmc-primary-menu ul.sub-menu a:hover,
.pmc-primary-menu ul.children a:hover,
#primary-menu ul.sub-menu a:hover,
#primary-menu ul.children a:hover {
	background-color: rgba(59, 130, 246, 0.1);
	color: #ffffff;
}

/* Hero Carousel Styles */
#hero-carousel {
	position: relative;
	min-height: 600px;
	width: 100%;
}

.carousel-slide {
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.carousel-slide.hidden {
	opacity: 0;
	visibility: hidden;
}

.carousel-slide.active {
	opacity: 1;
	visibility: visible;
}

/* Scroll Animations - DISABLED (can be enabled later) */
.scroll-fade-in {
	/* opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out; */
	opacity: 1;
	transform: translateY(0);
}

.scroll-fade-in.animated {
	opacity: 1;
	transform: translateY(0);
}

.scroll-fade-in-delay-1 {
	transition-delay: 0.1s;
}

.scroll-fade-in-delay-2 {
	transition-delay: 0.2s;
}

.scroll-fade-in-delay-3 {
	transition-delay: 0.3s;
}

.scroll-fade-in-delay-4 {
	transition-delay: 0.4s;
}

/* Why Choose Carousel */
#why-choose-carousel {
	overflow: hidden;
}

#why-choose-slides {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

#why-choose-slides > div {
	flex-shrink: 0;
	width: 100%;
}

.why-carousel-dot {
	transition: background-color 0.3s ease;
	cursor: pointer;
}

/* Mobile Menu Styles */
#mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#mobile-menu li {
	margin: 0;
	padding: 0;
}

#mobile-menu a {
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	color: #d1d5db;
	transition: all 0.2s;
}

#mobile-menu a:hover {
	background-color: rgba(59, 130, 246, 0.1);
	color: #ffffff;
}

/* Arrow icon for mobile menu items with children */
#mobile-menu li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid currentColor;
	margin-left: 8px;
}