/* ============================================
   Brand Fonts Implementation
   ============================================
   Primary Font: Deltha (confidence & innovation)
   Secondary Font: Poppins (minimalistic & technology)
   Supporting Font: Helvetica (bold, sharp & direct)
   ============================================ */

/* Deltha Font - Primary Font (confidence & innovation) */
/* 
   To use Deltha font:
   1. Purchase a web license from Vultype Co.
   2. Add font files to: public/assets/fonts/deltha/
   3. Uncomment the @font-face declarations below
   4. Ensure font files are named: Deltha-Regular.woff2, Deltha-Bold.woff2, etc.
*/
/*
@font-face {
    font-family: 'Deltha';
    src: url('../fonts/deltha/Deltha-Regular.woff2') format('woff2'),
         url('../fonts/deltha/Deltha-Regular.woff') format('woff'),
         url('../fonts/deltha/Deltha-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Deltha';
    src: url('../fonts/deltha/Deltha-Bold.woff2') format('woff2'),
         url('../fonts/deltha/Deltha-Bold.woff') format('woff'),
         url('../fonts/deltha/Deltha-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/

/* Font Family Variables */
:root {
    --font-primary: 'Deltha', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-supporting: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Global Rule: ALL h1 and h2 must use Deltha font - Highest Priority */
h1, h2 {
    font-family: var(--font-primary) !important;
}

/* Apply Primary Font (Deltha) to Headings and Brand Elements */
/* All h1 titles must use Deltha font - Highest Priority */
h1,
h1 *,
h1.pp-hero-title,
h1.pp-page-heading,
h1.pp-breadcrumb-sub-title,
.hero-content h1,
.hero-3 .hero-content h1,
.hero-section h1,
.hero-section .hero-content h1,
.pp-hero-content h1,
.pp-hero-1 h1,
.pp-hero-1 .pp-hero-content h1,
.pp-hero-2 h1,
.pp-hero-2 .pp-hero-content h1,
.pp-breadcrumb-wrapper h1,
.pp-breadcrumb-wrapper .pp-page-heading h1,
.pp-page-heading h1,
.pp-section-title h1,
.pp-section-title-area h1,
.pp-about-content h1,
.pp-service-title h1,
.pp-project-title h1,
.pp-news-title h1,
.pp-team-title h1,
.pp-testimonial-title h1,
.pp-news-details-wrapper h1,
.pp-project-details-wrapper h1,
.pp-service-details-wrapper h1,
.hosting-section h1,
.hosting-section .pp-section-title h2,
/* All h2 titles must use Deltha font */
h2,
h2 *,
.hosting-section h2,
.hosting h2,
.hosting-section .pp-section-title h2,
.pp-section-title h2,
.pp-section-title-area h2,
.cta-section h2,
.data-center-section h2,
.pp-feature-box h2,
.pp-testimonial-wrapper h2,
h3, h4, h5, h6,
.pp-section-title h3,
.pp-about-content h2,
.pp-service-title h3,
.pp-project-title h3,
.pp-news-title h3,
.pp-team-title h3,
.pp-testimonial-title h3,
.pp-hero-title h2 {
    font-family: var(--font-primary) !important;
}

/* Apply Secondary Font (Poppins) to Body Text and UI Elements */
body,
p,
span,
a,
li,
td,
th,
label,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select,
.pp-text,
.pp-description,
.pp-content p,
.pp-service-content p,
.pp-project-content p,
.pp-news-content p,
.pp-team-content p {
    font-family: var(--font-secondary) !important;
}

/* Apply Supporting Font (Helvetica) to Bold, Sharp Elements */
.pp-theme-btn,
.pp-link-btn,
button,
.btn,
.pp-breadcrumb-items,
nav,
.navbar,
.main-menu,
.menu-item,
.pp-sub-title,
.pp-section-title span,
.tag,
.badge,
.pp-price,
.pp-pricing-header h2,
.pp-pricing-header .price,
strong,
b,
.pp-bold-text {
    font-family: var(--font-supporting) !important;
    font-weight: 600;
}

/* Navigation Menu - Supporting Font */
.main-menu ul li a,
.mean__menu-wrapper nav ul li a,
.offcanvas__info .mobile-menu ul li a,
.header-right a {
    font-family: var(--font-supporting) !important;
    font-weight: 500;
}

/* Buttons - Secondary Font */
.pp-theme-btn,
.pp-link-btn,
button:not(.pp-theme-btn):not(.pp-link-btn) {
    font-family: var(--font-secondary) !important;
}

/* Form Elements - Secondary Font */
input,
textarea,
select,
.form-control,
.form-select {
    font-family: var(--font-secondary) !important;
}

/* Footer - Secondary Font */
footer,
.footer-content,
.footer-widget p,
.footer-widget a {
    font-family: var(--font-secondary) !important;
}

/* Breadcrumbs - Supporting Font */
.pp-breadcrumb-items {
    font-family: var(--font-supporting) !important;
    font-weight: 500;
}

/* ============================================
   Dark Mode Styles
   ============================================ */

/* Dark Mode Variables */
[data-theme="dark"] {
    --pp-body: #0a0a0a;
    --pp-white: #ffffff;
    --pp-bg: #1a1a1a;
    --pp-header: #e0e0e0;
    --pp-text: #b0b0b0;
    --pp-border: #333333;
    --pp-box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.5);
}

/* Navbar Colors - Light Mode */
.header-1.header-3 {
    background-color: var(--pp-white) !important;
}

.header-1.header-3 .header-main.style-1 {
    background: var(--pp-white) !important;
}

.header-1.header-3 .main-menu ul li a {
    color: var(--pp-header) !important;
}

/* Navbar Items Margin */
.header-main .main-menu ul li {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.header-main .main-menu ul li:first-child {
    margin-left: 0 !important;
}

.header-main .main-menu ul li:last-child {
    margin-right: 0 !important;
}

/* Ensure Bootstrap container works properly in header */
.header-1.header-3 .mega-menu-wrapper > .container {
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    width: 100%;
}

@media (min-width: 576px) {
    .header-1.header-3 .mega-menu-wrapper > .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .header-1.header-3 .mega-menu-wrapper > .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .header-1.header-3 .mega-menu-wrapper > .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .header-1.header-3 .mega-menu-wrapper > .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .header-1.header-3 .mega-menu-wrapper > .container {
        max-width: 1320px;
    }
}

/* Dark Mode - Navbar */
[data-theme="dark"] .header-1.header-3 {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .header-1.header-3 .header-main.style-1 {
    background: #1a1a1a !important;
    border: 1px solid #333333;
}

[data-theme="dark"] .header-1.header-3 .main-menu ul li a {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .header-1.header-3 .main-menu ul li a:hover {
    color: var(--pp-theme) !important;
}

/* Override backgrounds that use --pp-white to stay dark in dark mode */
[data-theme="dark"] .header-main.style-1,
[data-theme="dark"] .pp-service-card-modern,
[data-theme="dark"] .pp-hosting-box-items,
[data-theme="dark"] .pp-project-box,
[data-theme="dark"] .pp-news-box,
[data-theme="dark"] .pp-team-box,
[data-theme="dark"] .pp-breadcrumb-wrapper,
[data-theme="dark"] .section-bg,
[data-theme="dark"] .section-bg-2,
[data-theme="dark"] footer,
[data-theme="dark"] .offcanvas__info,
[data-theme="dark"] body,
[data-theme="dark"] .pp-faq-wrapper .pp-faq-content .accordion-item,
[data-theme="dark"] .pp-faq-wrapper .pp-faq-content .accordion-item .accordion-header .accordion-button,
[data-theme="dark"] .pp-cta-wrapper .pp-cta-content .pp-cta-button .pp-theme-btn {
    background-color: #000000 !important;
}

/* Ensure text using --pp-white is actually white in dark mode */
[data-theme="dark"] * {
    color: inherit;
}

/* Specific overrides for elements that should have white text in dark mode */
[data-theme="dark"] .pp-theme-btn.style-3,
[data-theme="dark"] .pp-link-btn,
[data-theme="dark"] button:not([class*="dark-mode"]) {
    color: var(--pp-white) !important;
}

/* Dark Mode - Cards and Boxes */
[data-theme="dark"] .pp-service-card-modern,
[data-theme="dark"] .pp-hosting-box-items,
[data-theme="dark"] .pp-project-box,
[data-theme="dark"] .pp-news-box,
[data-theme="dark"] .pp-team-box,
[data-theme="dark"] .pp-testimonial-box-items,
[data-theme="dark"] .pp-pricing-items {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .pp-service-card-modern h3,
[data-theme="dark"] .pp-hosting-box-items h3,
[data-theme="dark"] .pp-project-box h3,
[data-theme="dark"] .pp-news-box h3 {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .pp-service-card-modern p,
[data-theme="dark"] .pp-hosting-box-items p {
    color: #b0b0b0 !important;
}

/* Dark Mode - Sections */
[data-theme="dark"] .hosting-section,
[data-theme="dark"] .pp-about-section,
[data-theme="dark"] .pp-service-section,
[data-theme="dark"] .pp-project-section,
[data-theme="dark"] .pp-news-section,
[data-theme="dark"] .pp-team-section {
    background-color: #0a0a0a !important;
}

[data-theme="dark"] .section-bg,
[data-theme="dark"] .section-bg-2 {
    background-color: #1a1a1a !important;
}

/* Dark Mode - Forms */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #666666 !important;
}

/* Dark Mode - Links */
[data-theme="dark"] a {
    color: #e0e0e0 !important;
}

[data-theme="dark"] a:hover {
    color: var(--pp-theme) !important;
}

/* Dark Mode - Tables */
[data-theme="dark"] table,
[data-theme="dark"] th,
[data-theme="dark"] td {
    border-color: #333333 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] th {
    background-color: #1a1a1a !important;
}

/* Dark Mode - Preloader */
[data-theme="dark"] .preloader {
    background-color: #0a0a0a !important;
}

[data-theme="dark"] .preloader .loader .loader-section .bg {
    background-color: #0a0a0a !important;
}

/* Cards and Boxes - Titles use Primary, Content uses Secondary */
.pp-service-box h3,
.pp-project-box h3,
.pp-news-box h3,
.pp-team-box h3,
.pp-hosting-box-items h3,
.pp-feature-box h3 {
    font-family: var(--font-primary) !important;
}

.pp-service-box p,
.pp-project-box p,
.pp-news-box p,
.pp-team-box p,
.pp-hosting-box-items p,
.pp-feature-box p {
    font-family: var(--font-secondary) !important;
}

/* Solution Section Custom Styles */
.hosting-section .row {
    display: flex;
    flex-wrap: wrap;
}
.hosting-section .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.hosting-section .pp-hosting-box-items {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 0;
    margin-bottom: 30px;
}
.hosting-section .pp-hosting-box-items .content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}
.hosting-section .pp-hosting-box-items .content h3 {
    flex-shrink: 0;
}
.hosting-section .pp-hosting-box-items .content p {
    flex-grow: 1;
    margin-bottom: 0;
}
.hosting-section .pp-hosting-box-items .content .pp-theme-btn {
    margin-top: auto;
    flex-shrink: 0;
}
.hosting-section .pp-hosting-box-items .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hosting-section .pp-hosting-box-items .icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: all 0.4s ease-in-out, transform 500ms ease;
}
.hosting-section .pp-hosting-box-items:hover .icon {
    border: 1px solid transparent;
    background-color: #F3F7FB;
}
.hosting-section .pp-hosting-box-items:hover .icon img {
    transform: scaleX(-1);
}
@media (max-width: 991px) {
    .hosting-section .pp-hosting-box-items {
        margin-bottom: 30px;
    }
}
@media (max-width: 767px) {
    .hosting-section .row {
        margin-top: 40px;
    }
    .hosting-section .pp-hosting-box-items {
        margin-bottom: 25px;
    }
}
@media (max-width: 575px) {
    .hosting-section .row {
        margin-top: 30px;
    }
}

/* Pricing Section Mobile Accordion Styles */
@media (max-width: 767px) {
    .pricing-section-3 .pricing-items {
        position: relative;
        cursor: pointer;
        padding: 15px !important;
        margin-bottom: 15px;
    }
    .pricing-section-3 .pricing-items .tag {
        margin-bottom: 10px;
    }
    .pricing-section-3 .pricing-items .tag h6 {
        font-size: 14px;
        margin-bottom: 0;
    }
    .pricing-section-3 .pricing-items .pricing-header {
        position: relative;
        padding-right: 35px;
        padding-bottom: 0;
    }
    .pricing-section-3 .pricing-items .pricing-header .icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        margin-bottom: 10px;
    }
    .pricing-section-3 .pricing-items .pricing-header h2 {
        font-size: 28px;
        margin-bottom: 5px;
    }
    .pricing-section-3 .pricing-items .pricing-header .month {
        font-size: 12px;
    }
    .pricing-section-3 .pricing-items .pricing-header .price-text {
        font-size: 14px;
    }
    .pricing-section-3 .pricing-items:not(.active) .pricing-header p {
        display: none;
    }
    .pricing-section-3 .pricing-items.active .pricing-header {
        padding-bottom: 15px;
    }
    .pricing-section-3 .pricing-items.active .pricing-header .icon {
        width: 70px;
        height: 70px;
        line-height: 70px;
        font-size: 30px;
    }
    .pricing-section-3 .pricing-items.active .pricing-header h2 {
        font-size: 48px;
    }
    .pricing-section-3 .pricing-items.active .pricing-header .month {
        font-size: 16px;
    }
    .pricing-section-3 .pricing-items.active .pricing-header .price-text {
        font-size: 18px;
    }
    .pricing-section-3 .pricing-items.active {
        padding: 30px !important;
    }
    .pricing-section-3 .pricing-items .pricing-header::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Pro';
        position: absolute;
        right: 0;
        top: 20px;
        transform: translateY(0);
        font-size: 16px;
        color: var(--pp-theme, #000e41);
        transition: transform 0.3s ease;
    }
    .pricing-section-3 .pricing-items.active .pricing-header::after {
        transform: rotate(180deg);
        top: 50%;
    }
    .pricing-section-3 .pricing-items .pricing-list,
    .pricing-section-3 .pricing-items .pricing-button {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
        margin-top: 0;
    }
    .pricing-section-3 .pricing-items.active .pricing-list,
    .pricing-section-3 .pricing-items.active .pricing-button {
        max-height: 2000px;
        opacity: 1;
        margin-top: 20px;
    }
}