/* Fontes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Happy+Monkey&display=swap');

:root{
    --font-satisfy: 'Satisfy', cursive;
    --font-inter: 'Inter', sans-serif;
    --font-advent-pro: 'Advent Pro', sans-serif;
    --font-happy-monkey: 'Happy Monkey', cursive;
}

body {
    font-family: var(--font-inter);
    line-height: 1.6;
    background-color: var(--body-bg);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Variáveis de Tema Claro */
body.light-theme {
    --body-bg: #f8f9fa;
    --text-color: #343a40;
    --card-bg: #ffffff;
    --border-color: #dee2e6;
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --section-dev-bg: #e0f7fa; /* Light Cyan */
    --section-hosting-bg: #e8f5e9; /* Light Green */
    --section-domains-bg: #fff3e0; /* Light Orange */
    --section-blog-bg: #f3e5f5; /* Light Purple */
    --section-contact-bg: #e3f2fd; /* Light Blue */
    --hero-overlay: rgba(0, 0, 0, 0.6);
}

/* Variáveis de Tema Escuro */
body.dark-theme {
    --body-bg: #1a202c; /* Darker Gray */
    --text-color: #e2e8f0; /* Light Gray */
    --card-bg: #2d3748; /* Dark Gray */
    --border-color: #4a5568;
    --primary-color: #63b3ed; /* Lighter Blue */
    --secondary-color: #a0aec0;
    --section-dev-bg: #2a3642; /* Dark Cyan */
    --section-hosting-bg: #343e4a; /* Dark Green */
    --section-domains-bg: #3f3b4a; /* Dark Orange */
    --section-blog-bg: #4a3f4a; /* Dark Purple */
    --section-contact-bg: #2f3a47; /* Dark Blue */
    --hero-overlay: rgba(0, 0, 0, 0.75);
}

/* Estilos gerais */
.navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-size: 1.8rem;
    letter-spacing: 1px;
}

.nav-link {
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
    background-color: darken(var(--primary-color), 10%); /* This won't work in plain CSS, needs SASS/LESS */
    border-color: darken(var(--primary-color), 10%);
    transform: translateY(-2px);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.btn-outline-light {
    border-color: var(--text-color);
    color: var(--text-color);
}

.btn-outline-light:hover {
    background-color: var(--text-color);
    color: var(--body-bg);
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    color: var(--text-color);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--text-color);
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../assets/images/ppg-6.jpg') no-repeat center center/cover; /*https://placehold.co/1920x1080/333333/ffffff?text=AJMDX+Background*/
    background-attachment: fixed; /* Parallax effect */
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--hero-overlay);
    z-index: 1;
}

.hero-section > .container {
    position: relative;
    z-index: 2;
}

/* Section Specific Colors */
.section-dev {
    background-color: var(--section-dev-bg);
}

.section-hosting {
    background-color: var(--section-hosting-bg);
}

.section-domains {
    background-color: var(--section-domains-bg);
}

.section-blog {
    background-color: var(--section-blog-bg);
}

.section-contact {
    background-color: var(--section-contact-bg);
}

/* Specific styles for sections */
.section-dev .card {
    border-top: 5px solid var(--primary-color);
}

.section-hosting .hosting-plan {
    border-top: 5px solid var(--secondary-color);
}

.section-hosting .featured-plan {
    border-top: 5px solid var(--primary-color);
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

.section-domains .input-group {
    max-width: 600px;
    margin: 0 auto;
}

.section-blog .card-img-top {
    height: 200px;
    object-fit: cover;
}

/* Custom colors for icons (example) */
.text-purple {
    color: #6f42c1; /* Bootstrap purple */
}

/* Font do Header customizada */
.title-header{
    font-family: var(--font-satisfy)
}

/* Font da descrição do Header customizada */
.description-header{
    font-family: var(--font-advent-pro);
}

.title-footer{
    font-family: var(--font-satisfy);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .navbar-nav .nav-item .btn {
        width: 100%;
        margin-top: 10px;
    }
}