/* CSS Variables for Light Mode Theme System */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --card-bg: #ffffff;
    --card-text: #555555;
    --header-bg: #ffffff;
    --header-text: #030f27;
    --border-color: #eeeeee;
    --title-color: #030f27;
    --feature-bg: #f5f5f5;
    --input-bg: #ffffff;
    --input-text: #333333;
    --primary-accent: #fdbe33;
    --section-bg: #ffffff;
    --page-header-bg: #030f27;
}

/* Apply variables to template elements */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

body p, body span, body li, body label {
    color: var(--text-color);
    transition: color 0.3s;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .section-header h2,
body .section-header p,
body .about-text p,
body .about-text h2,
body .feature-text h3,
body .service-text h3,
body .blog-title h3,
body .blog-text p,
body .team-text h2,
body .team-text p,
body .portfolio-text h3 {
    color: var(--title-color);
    transition: color 0.3s;
}

body .about, body .service, body .blog, body .team, body .contact, body .portfolio, body .feature {
    background-color: var(--bg-color);
    transition: background-color 0.3s;
}

body .feature-item {
    background-color: var(--feature-bg);
    border: 1px solid var(--border-color);
    transition: background-color 0.3s, border-color 0.3s;
}

body .service-item, body .blog-item, body .team-item, body .portfolio-warp {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

body .service-text, body .blog-text, body .team-text, body .portfolio-text {
    background-color: var(--card-bg);
    color: var(--card-text);
    transition: background-color 0.3s, color 0.3s;
}

body .service-text *, body .blog-text *, body .team-text *, body .portfolio-text * {
    color: var(--card-text);
}

body input, body textarea, body select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--border-color);
}

body .top-bar {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s, border-color 0.3s;
}

body .top-bar .top-bar-text h3,
body .top-bar .top-bar-text p {
    color: var(--header-text);
}

/* Side Drawer (Hamburger menu panel) */
.side-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100%;
    background-color: var(--card-bg);
    border-left: 1px solid var(--border-color);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    transition: right 0.3s ease;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
}

.side-drawer.open {
    right: 0;
}

.side-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: none;
}

.side-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.side-drawer-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--title-color);
    cursor: pointer;
}

.side-drawer-menu {
    flex-grow: 1;
}

.side-drawer-menu a {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px dotted var(--border-color);
}

.side-drawer-menu a:hover {
    color: var(--primary-accent);
}

body #malogo {
    font-size: 28px;
    font-weight: 700;
    color: var(--title-color);
    font-family: 'Poppins', sans-serif;
    vertical-align: middle;
    margin-left: 10px;
    display: inline-block;
    transition: color 0.3s ease;
}

body .logo a:hover #malogo {
    color: var(--primary-accent);
}

/* ============================================= */
/* ============ DARK MODE STYLES =============== */
/* ============================================= */
body.dark-mode {
    --bg-color: #1a1a2e;
    --text-color: #e0e0e0;
    --card-bg: #16213e;
    --card-text: #cccccc;
    --header-bg: #0f3460;
    --header-text: #ffffff;
    --border-color: #2a2a4a;
    --title-color: #ffffff;
    --feature-bg: #16213e;
    --input-bg: #16213e;
    --input-text: #e0e0e0;
    --section-bg: #16213e;
    --page-header-bg: #0a0a1a;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Dark Mode - Section Backgrounds */
body.dark-mode .about,
body.dark-mode .service,
body.dark-mode .blog,
body.dark-mode .team,
body.dark-mode .contact,
body.dark-mode .portfolio,
body.dark-mode .feature {
    background-color: var(--section-bg) !important;
}

body.dark-mode .section-header p,
body.dark-mode .section-header h2 {
    color: #ffffff !important;
}

/* Dark Mode - Page Headers */
body.dark-mode .page-header-custom {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
}

body.dark-mode .page-header h2,
body.dark-mode .page-header a {
    color: #ffffff !important;
}

body.dark-mode .page-header a::after {
    color: #cccccc !important;
}

/* Dark Mode - Service / Portfolio Cards */
body.dark-mode .service-warp,
body.dark-mode .portfolio-warp,
body.dark-mode .service-card-item {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .service-warp:hover,
body.dark-mode .portfolio-warp:hover,
body.dark-mode .service-card-item:hover {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .service-img,
body.dark-mode .portfolio-img,
body.dark-mode .media-frame {
    background: var(--card-bg) !important;
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .service-text,
body.dark-mode .portfolio-text,
body.dark-mode .content-frame {
    background: var(--card-bg) !important;
    border-top-color: var(--border-color) !important;
}

body.dark-mode .service-text h3,
body.dark-mode .portfolio-text h3,
body.dark-mode .title-bar-flex h3,
body.dark-mode .service-title,
body.dark-mode .product-title {
    color: #ffffff !important;
}

body.dark-mode .service-desc,
body.dark-mode .product-desc,
body.dark-mode .text-preview-inline,
body.dark-mode .text-expanded-inline {
    color: #cccccc !important;
}

body.dark-mode .service-overlay {
    background: rgba(0, 0, 0, 0.92) !important;
}

body.dark-mode .custom-action-link {
    background: #2a2a4a !important;
    border-color: #3a3a5a !important;
    color: #cccccc !important;
}

body.dark-mode .custom-action-link:hover {
    background: var(--primary-accent) !important;
    color: #030f27 !important;
    border-color: var(--primary-accent) !important;
}

body.dark-mode .description-block-wrapper {
    color: #cccccc !important;
}

body.dark-mode .custom-collapse-panel.is-visible {
    color: #cccccc !important;
}

/* Dark Mode - Key Offerings / What's New */
body.dark-mode .service-item.h-100.d-flex,
body.dark-mode .blog-item.h-100.d-flex {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .service-body-content,
body.dark-mode .blog-body-content {
    background: var(--card-bg) !important;
}

body.dark-mode .service-body-content h3,
body.dark-mode .blog-body-content h3,
body.dark-mode .service-body-content .card-title {
    color: #ffffff !important;
}

body.dark-mode .service-body-content p,
body.dark-mode .blog-body-content p,
body.dark-mode .service-body-content .card-text {
    color: #cccccc !important;
}

body.dark-mode .service-footer,
body.dark-mode .blog-footer {
    background: var(--card-bg) !important;
}

body.dark-mode .service-img,
body.dark-mode .blog-img {
    background: var(--card-bg) !important;
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .btn-offering-main,
body.dark-mode .btn-blog-main {
    background: #2a2a4a !important;
    color: #ffffff !important;
    border-color: #3a3a5a !important;
}

/* Dark Mode - Feature Cards (index.php) */
body.dark-mode .feature-card {
    background: var(--card-bg) !important;
}

body.dark-mode .feature-card::after {
    background: var(--card-bg) !important;
}

body.dark-mode .feature-card .card-title {
    color: #ffffff !important;
}

body.dark-mode .feature-card .card-text {
    color: #cccccc !important;
}

/* Dark Mode - Blog Page */
body.dark-mode .blog-section {
    background: var(--section-bg) !important;
}

body.dark-mode .blog-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .blog-card:hover {
    border-color: #555555 !important;
}

body.dark-mode .blog-card-img-wrapper {
    background: var(--card-bg) !important;
}

body.dark-mode .blog-card-body {
    background: var(--card-bg) !important;
}

body.dark-mode .blog-title {
    color: #ffffff !important;
}

body.dark-mode .blog-content,
body.dark-mode .blog-date,
body.dark-mode .meta-row {
    color: #cccccc !important;
}