/*
 * Theme Name: K-T-V
 * Version: 2.0.2
 * Description: A modern WordPress parent theme with Bootstrap 5.
*/

/* ==========================================================================
   0.0 Font Declarations [FIXED]
   ========================================================================== */
/* You MUST replace the paths and filenames below with your actual font files from the /assets/fonts directory. */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Added for better performance */
}

/* ==========================================================================
   1.0 Basic Element Styling and Reset
   ========================================================================== */

:root {
	/* Default theme variables for light mode */
	--ktv-header-bg-color: #ffffff;
	--ktv-header-icon-color: #000000; /* Use this for light mode header icons */
	--ktv-navbar-icon-color: #000000; /* Use this for navbar toggler icon */
	--ktv-body-color: #333333;
	--ktv-footer-bg-color: #212529;
	--ktv-footer-heading-color: #ffffff;
	--ktv-footer-color: #f8f9fa;
	--ktv-footer-link-color: #f8f9fa;
	--ktv-desktop-logo-height: 40px;
	--ktv-mobile-logo-height: 30px;
	--ktv-header-icon-spacing: 10px; /* Default spacing */
	/* SVG for navbar toggler icon is now generated dynamically in PHP */
	--ktv-page-content-width: 800px; /* New variable for page content width */
	--ktv-content-padding: 15px;
	--ktv-page-bg-color: #F9F9F9;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	background-color: var(--bs-body-bg);
	color: var(--ktv-body-color);
	font-family: 'Poppins', sans-serif; /* Using the declared Poppins font */
	font-size: var(--ktv-body-font-size, 16px);
}

/* ==========================================================================
   2.0 Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--ktv-heading-color, #000000);
    font-weight: 700;
}
.site-footer h5 {
	color: var(--ktv-footer-heading-color);
}
/* SEO-friendly search results titles */
.search-results-list .card-title a {
    font-weight: 700;
    text-decoration: none;
}
.search-results-list .card-title a:hover {
    text-decoration: none;
}
/* Page titles and text color */
.page-title, .entry-content, .entry-summary {
    color: #3a3a3a;
}
/* Dark mode text color for titles */
[data-bs-theme="dark"] .page-title, [data-bs-theme="dark"] .entry-content, [data-bs-theme="dark"] .entry-summary {
    color: var(--ktv-body-color);
}
/* Mobile menu link styling */
.ktv-offcanvas-mobile .navbar-nav .nav-link {
    font-size: 19px;
    font-weight: 600; /* Semibold */
    padding: 10px 15px;
}

/* ==========================================================================
   3.0 Gutenberg Block Support
   ========================================================================== */
.entry-content > *:not(.alignfull):not(.alignwide) {
    max-width: var(--ktv-page-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ktv-content-padding);
    padding-right: var(--ktv-content-padding);
}
.entry-content > .alignwide { max-width: var(--wp--style--global--wide-size, 1140px); }
.alignfull { max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.alignfull > .wp-block-cover__inner-container { padding: 1rem; }

/* ==========================================================================
   4.0 Header Styling [FIXED AGAIN]
   ========================================================================== */
.site-header {
	background-color: var(--ktv-header-bg-color);
	z-index: 1030;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	border-bottom: none !important;
}

.ktv-navbar {
	min-height: 60px;
	padding: 0.5rem 1rem;
	align-items: center;
}

/* CORRECTED: Logo height is now handled directly by the CSS variables */
.site-header .custom-logo-link img {
    height: var(--ktv-desktop-logo-height); /* Desktop default */
    width: auto;
    object-fit: contain;
}
@media (max-width: 991.98px) {
    .site-header .custom-logo-link img {
        height: var(--ktv-mobile-logo-height); /* Mobile override */
    }
}

/* FIX: Header Icons (Search, Toggle) and Navbar Icon color and spacing */
.ktv-header-icon {
	font-size: 1.1rem;
	color: var(--ktv-header-icon-color); /* Correctly applies the color variable */
	background: none;
	border: none;
	padding: 0.25rem;
	line-height: 1;
}

.navbar-toggler {
	border: none !important;
	box-shadow: none !important;
	color: var(--ktv-navbar-icon-color); /* This variable is still here but will be overridden by SVG */
	font-size: 1.5rem;
}

/* This is set dynamically by PHP using --ktv-navbar-toggler-icon-svg variable */
.navbar-toggler-icon {
	/* Background image is set dynamically in enqueue-scripts.php */
}

/* NEW: Spacing between header icons */
.site-header .d-flex .ktv-header-icon + .ktv-header-icon {
    margin-left: var(--ktv-header-icon-spacing);
}
/* White space below header */
#ktv-content-wrapper {
    padding-top: calc(80px + 20px); /* Add extra 20px for whitespace */
}


/* Mega Menu Fix */
/* ========================================================================== */

/* Override Bootstrap's static positioning for wider dropdowns */
.desktop-nav-container .navbar-nav .nav-item.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content; /* Adjust width as needed */
    min-width: 250px; /* Ensure a minimum size */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
}

/* Fix mobile menu links breaking out of box */
.ktv-offcanvas-mobile .navbar-nav .nav-item {
    width: 100%;
}
.ktv-offcanvas-mobile .navbar-nav .nav-link {
    white-space: normal; /* Allow text to wrap */
}
/* Add box effect for submenus */
.ktv-offcanvas-mobile .navbar-nav .dropdown-menu {
    border-radius: 0.375rem;
    padding: 0.5rem 0;
    margin: 0.25rem 0;
}


/* ==========================================================================
   5.0 Content & Footer Styling
   ========================================================================== */
.site-content {
    background-color: var(--ktv-page-bg-color); /* Background color for content container */
}
.site-content > .container, .site-content > .container-fluid {
    background-color: #ffffff; /* Inner content background */
    padding: 20px; /* Add some padding inside the container */
    margin-bottom: 3rem;
}
@media (min-width: 992px) {
    .site-content > .container {
        max-width: 80%; /* Adjust container width on desktop */
        margin-left: auto;
        margin-right: auto;
    }
}
#ktv-content-wrapper {
	padding-top: 80px;
	padding-bottom: 3rem;
}

.site-footer {
	background-color: var(--ktv-footer-bg-color);
	color: var(--ktv-footer-color);
	padding: 3rem 1.5rem;
}

.ktv-footer-nav a {
    display: inline-block;
    padding: 5px 0;
    color: var(--ktv-footer-link-color);
}

/* --- Social and Sharing Icons --- */
.site-footer .social-icons a,
.ktv-social-share-buttons a {
	background: none;
	border: none;
	text-decoration: none;
	display: inline-block;
	padding: 8px;
	color: inherit;
	transition: opacity 0.3s ease;
}
.site-footer .social-icons a:hover,
.ktv-social-share-buttons a:hover { opacity: 0.8; }
.site-footer .social-icons a i { font-size: 25px; line-height: 1; }
.ktv-social-share-buttons a i { font-size: 19px; line-height: 1; }
/* Translate selector styling */
#google_translate_element {
    background-color: transparent;
    border-radius: 0.25rem;
    padding: 0.25rem;
    display: inline-block;
}


/* ==========================================================================
   6.0 Floating Action Buttons (FABs)
   ========================================================================== */
.ktv-floating-buttons {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 1050;
}
.ktv-fab-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	color: white;
	text-decoration: none;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.ktv-fab-btn:hover { transform: scale(1.1); }
.ktv-fab-btn i { font-size: 1.25rem; }
.ktv-call-btn { background-color: #128C7E; }
.ktv-whatsapp-btn { background-color: #25D366; }
.ktv-chat-btn { background-color: #FFA500; }
#ktv-scroll-top-btn { background-color: #075E54; display: none; cursor: pointer; border: none; }


/* ==========================================================================
   7.0 Search Results Styling
   ========================================================================== */
.ktv-search-results-list .card .img-fluid {
    height: 100%;
    object-fit: cover;
}
.ktv-search-results-list .card-title a {
    color: var(--ktv-heading-color, #000000);
    text-decoration: none;
}
.ktv-search-results-list .card-title a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   8.0 Dark Mode
   ========================================================================== */
[data-bs-theme="dark"] {
	--ktv-header-bg-color: #212529;
	--ktv-header-icon-color: #ffffff; /* White header icons in dark mode */
	--ktv-navbar-icon-color: #ffffff; /* White navbar icon in dark mode */
	--ktv-body-color: #dee2e6;
	--ktv-heading-color: #ffffff;
	--ktv-footer-bg-color: #1a1a1a;
	--ktv-footer-color: #dee2e6;
	--ktv-footer-link-color: #dee2e6;
}

/* Override default Bootstrap button colors for Dark Mode if needed */
[data-bs-theme="dark"] .btn-primary {
	--bs-btn-bg: var(--wp--preset--color--primary);
	--bs-btn-hover-bg: var(--wp--preset--color--secondary);
}

/* ==========================================================================
   11.0 Bootstrap Component Padding [NEW]
   ========================================================================== */

/* Adds spacing inside the content area of tabs */
.tab-content .tab-pane {
    padding: 1.25rem;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
}

/* Adds spacing inside the content area of accordions */
.accordion-body {
    padding: 1.25rem;
}

/* In dark mode, adjust the border color for tabs */
[data-bs-theme="dark"] .tab-content .tab-pane {
    border-color: #495057;
}