/* --- PRO 404/EMPTY STATE POLISH --- */
.pro-search-box {
    max-width: 420px;
    margin: 48px auto 36px auto;
    background: rgba(255,255,255,0.02);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 6px 32px rgba(43,110,242,0.07);
    padding: 36px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pro-search-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-white);
    letter-spacing: -0.5px;
}
.pro-search-desc {
    color: var(--text-light);
    font-size: 1rem;
    margin-bottom: 22px;
}
.pro-search-form-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}
.pro-search-box .search-form {
    max-width: 340px;
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid var(--border-color);
    box-shadow: 0 2px 12px rgba(43,110,242,0.04);
    border-radius: 14px;
    padding: 7px 7px 7px 18px;
}
.pro-search-box .search-form input {
    font-size: 1rem;
    color: var(--text-white);
}
.pro-search-box .search-form button {
    background: var(--accent-blue);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    padding: 7px 22px;
    margin-left: 10px;
    box-shadow: 0 2px 8px rgba(43,110,242,0.08);
    border: none;
    transition: background 0.2s;
}
.pro-search-box .search-form button:hover {
    background: var(--accent-red);
}

.pro-no-articles {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.02);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 6px 32px rgba(43,110,242,0.07);
    padding: 48px 32px 40px 32px;
    margin: 48px auto 0 auto;
    max-width: 380px;
}
.pro-no-articles-icon {
    font-size: 2.5rem;
    margin-bottom: 18px;
    color: var(--accent-blue);
}
.pro-no-articles h4 {
    color: var(--text-white);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.pro-no-articles p {
    color: var(--text-light);
    font-size: 1rem;
    margin-bottom: 18px;
    text-align: center;
}
.pro-no-articles .btn-primary {
    background: var(--accent-blue);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    padding: 10px 28px;
    border: none;
    box-shadow: 0 2px 8px rgba(43,110,242,0.08);
    transition: background 0.2s;
}
.pro-no-articles .btn-primary:hover {
    background: var(--accent-red);
}
/*
Theme Name: Engine Dynamo
Description: A modern, animated automotive blog theme with 3D effects and premium design
Version: 1.0
Author: Engine Dynamo Team
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-dark: #0A0F1C;
    --secondary-dark: #101828;
    --accent-blue: #2B6EF2;
    --accent-red: #E63946;
    --text-white: #FFFFFF;
    --text-light: #A0AEC0;
    --card-bg: #101828;
    --border-color: #2D3748;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.4);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--primary-dark);
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(16, 20, 34, 0.4);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 0;
    transition: all 0.3s ease;
    height: 80px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

body:not(.home) .site-header {
    background: rgba(10, 15, 28, 0.35); /* More transparent for all pages */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.site-header.scrolled {
    background: rgba(10, 15, 28, 0.35); /* Keep transparency when scrolled */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(45, 55, 72, 0.2);
    padding: 8px 0;
}

/* Ensure main content clears the fixed header on non-home pages (home hero intentionally overlaps)
   This prevents page titles (like search results) from colliding with the header. */
body:not(.home) main.site-main {
    padding-top: 100px; /* header height (80) + comfortable spacing */
}

.header-content {
    display: flex;
    justify-content: flex-end; /* right-side items remain on the right */
    align-items: center;
    /* position removed so absolute children can be positioned against .site-header */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-navigation {
    position: absolute; /* center in the header (viewport) */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 24px; /* spacing between nav items; nav menu controls exact spacing */
    z-index: 15;
    white-space: nowrap;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px; /* Increased gap between nav items */
    margin: 0;
    padding: 0 20px; /* Added horizontal padding */
    align-items: center;
    justify-content: space-between; /* Better spacing */
}

.nav-item {
    position: relative;
}

.nav-link {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 0;
    transition: var(--transition);
    position: relative;
    font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nav-link:hover {
    color: var(--accent-blue);
    text-shadow: 0 0 10px rgba(43, 110, 242, 0.5);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 4px;
    transition: var(--transition);
}

.menu-toggle .hamburger {
    width: 25px;
    height: 3px;
    background: var(--text-white);
    border-radius: 2px;
    transition: var(--transition);
}

.menu-toggle.active .hamburger:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle.active .hamburger:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .hamburger:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000;
    box-shadow: var(--shadow);
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dropdown-item {
    display: block;
    padding: 10px 20px;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-left: 3px solid transparent;
}

.dropdown-item:hover {
    color: var(--text-white);
    background: rgba(43, 110, 242, 0.1);
    border-left-color: var(--accent-blue);
}

.site-branding {
    position: absolute; /* flush to the viewport left edge */
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 12px; /* small breathing room from the absolute corner */
    z-index: 20;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--text-white);
}

.site-logo img {
    width: 50px;
    height: auto;
    transition: var(--transition);
    content: url('assets/images/logo.svg');
}

/* Social Media Icons */
.social-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
    background: var(--secondary-dark);
    color: var(--text-white);
    text-decoration: none;
    margin-right: 10px;
    border: 1px solid var(--border-color);
}

.social-icon.facebook {
    background: rgba(24, 119, 242, 0.1);
    color: #1877f2;
    border-color: rgba(24, 119, 242, 0.3);
}

.social-icon.instagram {
    background: rgba(225, 48, 108, 0.1);
    color: #e1306c;
    border-color: rgba(225, 48, 108, 0.3);
}

.social-icon i {
    font-size: 14px;
}

.social-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.social-icon.facebook:hover {
    background: #1877f2;
    color: white;
    border-color: #1877f2;
}

.social-icon.instagram:hover {
    background: #e1306c;
    color: white;
    border-color: #e1306c;
}

.social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.site-logo:hover img {
    transform: scale(1.05);
}

.header-social {
    display: flex;
    gap: 12px; /* space between social icons */
    margin-left: 18px; /* extra space between logo and social icons */
    align-items: center;
}

.logo-circle {
    width: 60px;
    height: 60px;
    border: 4px solid var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.logo-engine {
    width: 35px;
    height: 35px;
    background: var(--accent-blue);
    border-radius: 4px;
    position: relative;
    transform: rotate(-15deg);
}

.logo-engine::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 12px;
    height: 8px;
    background: var(--accent-blue);
    border-radius: 2px;
    box-shadow: 0 2px 0 var(--accent-blue), 0 4px 0 var(--accent-blue);
}

.logo-engine::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 5px;
    width: 15px;
    height: 15px;
    background: var(--accent-blue);
    border-radius: 50%;
    border: 2px solid var(--accent-blue);
    box-shadow: 
        0 0 0 1px var(--accent-blue),
        -2px -2px 0 1px var(--accent-blue),
        2px -2px 0 1px var(--accent-blue),
        -2px 2px 0 1px var(--accent-blue),
        2px 2px 0 1px var(--accent-blue);
}

.logo-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 20px;
    background: var(--accent-red);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 
        2px 0 0 var(--accent-red),
        -2px 0 0 var(--accent-red),
        0 2px 0 var(--accent-red),
        0 -2px 0 var(--accent-red);
    z-index: 2;
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.logo-text .engine,
.logo-text .dynamo {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

/* Hero Section */
.hero-slider {
    position: relative;
    width: 100%;
    height: 90vh;
    /* Lighter, more open gradient for the hero (tune if you want brighter) */
    background: linear-gradient(180deg, #0f2a44 0%, #0b3b66 100%);
    overflow: visible; /* allow elements like search/social to remain visible */
    margin-top: 0; /* avoid cropping under the fixed header */
    padding-top: 80px; /* reserve space for the fixed header so hero content isn't hidden */
    opacity: 1 !important; /* Force opacity */
}

.hero-slider .swiper {
    width: 100%;
    height: 100%;
}

.hero-slider .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slider .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* light overlay instead of heavy dark — makes the hero appear brighter */
    background: linear-gradient(to bottom,
        rgba(10, 15, 28, 0.15),
        rgba(10, 15, 28, 0.25)
    );
    z-index: 2;
}

.hero-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-slider .swiper-slide-active img {
    transform: scale(1);
}

.hero-slider .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* soften the right-side overlay to avoid heavy darkness */
    background: linear-gradient(
        to right,
        rgba(10, 15, 28, 0.18) 0%,
        rgba(10, 15, 28, 0.12) 50%,
        rgba(10, 15, 28, 0.08) 100%
    );
    z-index: 1;
}

.hero-slider .swiper {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.hero-slider .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slider .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 15, 28, 0.6) 0%,
        rgba(10, 15, 28, 0.8) 100%
    );
    z-index: 1;
}

.hero-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hero-slider .swiper-slide:hover img {
    transform: scale(1.05);
}

.hero-slider .hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}

.hero-slider .swiper-pagination {
    bottom: 30px !important;
}

.hero-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
}

.hero-slider .swiper-pagination-bullet-active {
    background: var(--accent-blue);
    transform: scale(1.2);
}

.hero-content {
    width: 100%;
    max-width: 1200px;
    padding: 0 50px;
    position: relative;
    z-index: 2;
}

.hero-slider .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(10,15,28,0.7));
    z-index: 1;
}

.hero-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hero-slider .swiper-slide:hover img {
    transform: scale(1.05);
}

/* Remove the ::before pseudo-element since we're using direct background */
.hero-section::before {
    display: none;
}

@keyframes slowZoom {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(10, 15, 28, 0.95) 0%, rgba(10, 15, 28, 0.8) 100%);
    z-index: -1;
}

.hero-slider .hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 5;
    width: 100%;
    max-width: 1200px;
    text-align: center;
    padding: 0 20px;
}

.hero-slider .slide-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.hero-slider .slide-title {
    text-align: center;
    margin-bottom: 2rem;
    /* start slightly left and invisible; animate into place when slide becomes active */
    opacity: 0;
    transform: translateX(-48px);
    will-change: transform, opacity;
}

.hero-slider .swiper-slide-active .slide-title {
    /* trigger the tween in a performant way */
    animation: slideInFromLeft 0.9s cubic-bezier(.22,1,.36,1) forwards;
}

.hero-slider .slide-title .engine {
    display: block;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    background: linear-gradient(45deg, #2B6EF2, #38BDF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(43, 110, 242, 0.3);
    letter-spacing: -2px;
}

.hero-slider .slide-title .dynamo {
    display: block;
    font-size: clamp(4.5rem, 10vw, 8rem);
    font-weight: 900;
    background: linear-gradient(45deg, #FF1B6B, #FF6B9D);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: -1rem;
    letter-spacing: -3px;
    text-transform: uppercase;
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-48px);
    }
    60% {
        opacity: 1;
        transform: translateX(8px); /* slight overshoot for a smooth feel */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-slider .slide-description {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-slider .slide-description:last-of-type {
    margin-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.hero-slider .swiper-slide-active .slide-title,
.hero-slider .swiper-slide-active .slide-description {
    opacity: 1;
    transform: translateY(0);
}

.hero-slider .slide-button {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: linear-gradient(45deg, #2B6EF2, #2563EB);
    color: #fff;
    border-radius: 6px; /* less rounded, more professional */
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.25s ease;
    box-shadow: 0 6px 18px rgba(15, 30, 50, 0.25); /* subtler, darker shadow */
    border: none;
    min-width: 140px;
    text-align: center;
}

.hero-slider .slide-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(10, 25, 45, 0.3);
    background: linear-gradient(45deg, #1e40af, #2B6EF2);
}

.hero-slider .swiper-slide-active .slide-button {
    opacity: 1;
    transform: translateY(0);
}

/* Make header transparent on the homepage so the hero image sits behind it */
.home .site-header,
.front-page .site-header {
    background: rgba(16, 20, 34, 0.35);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Premium glass effect on scroll */
.home .site-header.scrolled,
.front-page .site-header.scrolled {
    background: rgba(16, 20, 34, 0.45);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ensure the hero content centers nicely on very wide screens */
.hero-section .container {
    max-width: 1200px;
}

.hero-text {
    flex: 1;
    max-width: 50%;
    padding-right: 40px;
    animation: slideInLeft 1s ease-out;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 0.9;
    margin-bottom: 20px;
    letter-spacing: -2px;
}

.hero-title .engine {
    color: #9D5FFF;
    font-size: 5rem;
    font-weight: 900;
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -2px;
    margin-bottom: -10px;
}

.hero-title .dynamo {
    color: #FF69B4;
    font-size: 6.5rem;
    font-weight: 900;
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -2px;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% center;
    }
    50% {
        background-position: 300% center;
    }
    100% {
        background-position: 0% center;
    }
}

.hero-title .engine,
.hero-title .dynamo {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    background-size: 200% 200%;
    position: relative;
    padding: 10px 0;
}

.hero-tagline {
    font-size: 2rem;
    font-weight: 400;
    color: #FFFFFF;
    margin: 40px 0 20px;
    max-width: 800px;
}

.hero-description {
    font-size: 1.1rem;
    color: #A0AEC0;
    line-height: 1.8;
    max-width: 800px;
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.hero-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 6px; /* small radius for professional look */
    transition: all 0.18s ease;
    min-width: 130px;
    letter-spacing: 0.6px;
}

.hero-buttons .btn-primary {
    background: linear-gradient(180deg, #2563EB, #1f4fd6);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(15, 30, 60, 0.18);
    border: none;
}

.hero-buttons .btn-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    backdrop-filter: blur(4px);
}

.hero-buttons .btn-primary:hover {
    transform: translateY(-3px);
    background: linear-gradient(180deg, #1e40af, #2458d6);
    box-shadow: 0 12px 32px rgba(10, 25, 45, 0.25);
}

.hero-buttons .btn-outline:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-3px);
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--accent-blue);
    color: var(--text-white);
}

.btn-primary:hover {
    background: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(43, 110, 242, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--text-white);
    border: 2px solid var(--text-white);
}

.btn-secondary:hover {
    background: var(--text-white);
    color: var(--primary-dark);
    transform: translateY(-2px);
}

.hero-car {
    flex: 1;
    max-width: 50%;
    position: relative;
    animation: slideInRight 1s ease-out;
}

.car-3d {
    /* Decorative 3D car suppressed for a cinematic full-bleed hero background.
       Keep the element in case you want it later, but hide it to avoid a small-strip image. */
    display: none;
}

.car-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Car hover effects removed - now purely decorative background */

.car-glow {
    display: none;
}

/* Featured Articles */
.featured-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #0A0F1C 0%, #101828 100%);
}

.gradient-text {
    background: linear-gradient(45deg, #2B6EF2, #38BDF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modern-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.section-title {
    font-size: 3rem;
    font-weight: 800;
    text-align: left;
    margin-bottom: 60px;
    color: var(--text-white);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 80px;
    height: 4px;
    background: #2B6EF2;
    border-radius: 2px;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.article-card {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 14px; /* reduced padding for more compact cards */
    transition: var(--transition);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: #2B6EF2;
}

.article-thumbnail {
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
}

/* Scoped override: force homepage thumbnail sizing for articles-grid listings */
.articles-grid .article-card .article-thumbnail {
    aspect-ratio: 16/9;
    height: 250px !important; /* visual match to homepage featured thumbnails */
    overflow: hidden !important;
    border-radius: 10px !important;
}

.articles-grid .article-card .article-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

@media (max-width: 1024px) {
    .articles-grid .article-card .article-thumbnail {
        height: 220px !important;
    }
}

@media (max-width: 480px) {
    .articles-grid .article-card .article-thumbnail {
        height: 160px !important;
    }
}

.placeholder-image {
    background: var(--secondary-dark);
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    border: 2px dashed var(--border-color);
    transition: var(--transition);
}

.placeholder-image:hover {
    border-color: var(--accent-blue);
    background: rgba(43, 110, 242, 0.05);
}

.placeholder-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
}

.placeholder-text {
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 500;
}

.article-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px; /* tighter spacing between title and meta */
    color: var(--text-white);
    line-height: 1.3;
    /* prevent title from taking too much vertical space */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;  /* standard property */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-title a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.article-title a:hover {
    color: #2B6EF2;
}

.article-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 8px; /* reduced spacing after meta */
    font-size: 0.9rem;
    color: var(--text-light);
}

.article-date {
    color: #2B6EF2;
    font-weight: 500;
}

.article-category a {
    color: #E63946;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.article-category a:hover {
    color: var(--text-white);
}

.article-excerpt {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 12px;
    /* limit excerpt to exactly 2 lines like in screenshot */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.95rem;
    opacity: 0.85; /* slightly muted to match screenshot */
}

.read-more-btn {
    display: inline-block;
    background: #2B6EF2;
    color: var(--text-white);
    padding: 8px 20px; /* slightly smaller button */
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
}

.read-more-btn:hover {
    background: #E63946;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(43, 110, 242, 0.3);
}

/* Homepage Read More Button - Centered beneath grid */
.front-read-more {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.front-read-more .read-more-btn {
    padding: 12px 40px;
    font-size: 1rem;
    min-width: 200px;
    text-align: center;
}

/* Footer */
.site-footer {
    background: var(--primary-dark);
    border-top: 1px solid var(--border-color);
    margin-top: 80px;
    color: var(--text-light);
}

.footer-top {
    padding: 60px 0;
    border-bottom: 1px solid var(--border-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
}

.footer-brand {
    max-width: 320px;
}

.footer-logo {
    display: block;
    margin-bottom: 20px;
}

.footer-logo img {
    height: 40px;
    width: auto;
}

.footer-description {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    color: var(--text-light);
}

.footer-social {
    display: flex;
    gap: 12px;
}

.footer-links h3,
.footer-categories h3,
.footer-newsletter h3 {
    color: var(--text-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
}

.footer-links h3::after,
.footer-categories h3::after,
.footer-newsletter h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--accent-blue);
    border-radius: 1px;
}

.footer-links ul,
.footer-categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li,
.footer-categories ul li {
    margin-bottom: 12px;
}

.footer-links ul a,
.footer-categories ul a {
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.95rem;
}

.footer-links ul a:hover,
.footer-categories ul a:hover {
    color: var(--accent-blue);
    padding-left: 5px;
}

.footer-newsletter p {
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

.footer-newsletter .newsletter-form {
    margin-bottom: 15px;
}

.footer-newsletter .input-group {
    display: flex;
    gap: 10px;
}

.footer-newsletter .email-input {
    flex: 1;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 0.9rem;
    color: var(--text-white);
    transition: var(--transition);
}

.footer-newsletter .email-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(43, 110, 242, 0.1);
}

.footer-newsletter .subscribe-btn {
    background: var(--accent-blue);
    color: var(--text-white);
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.footer-newsletter .subscribe-btn:hover {
    background: #1e40af;
    transform: translateY(-2px);
}

.newsletter-response {
    margin-top: 10px;
    font-size: 0.9rem;
}

.newsletter-response.success {
    color: #22c55e;
}

.newsletter-response.error {
    color: var(--accent-red);
}

.footer-bottom {
    padding: 25px 0;
    font-size: 0.9rem;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-legal {
    display: flex;
    gap: 20px;
}

.footer-legal a {
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition);
}

.footer-legal a:hover {
    color: var(--accent-blue);
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    
    .footer-brand {
        grid-column: span 2;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .footer-brand {
        grid-column: span 1;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-links h3::after,
    .footer-categories h3::after,
    .footer-newsletter h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-legal {
        justify-content: center;
    }
}

.footer-branding {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-logo {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    position: relative;
    border-radius: 50%;
    overflow: hidden; /* Contains the logo elements */
    box-shadow: 0 2px 8px rgba(43, 110, 242, 0.15); /* Subtle shadow instead of border */
}

.footer-logo::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: var(--accent-blue);
    border-radius: 3px;
    transform: rotate(-15deg);
}

.footer-logo::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 15px;
    background: var(--accent-red);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 
        2px 0 0 var(--accent-red),
        -2px 0 0 var(--accent-red),
        0 2px 0 var(--accent-red),
        0 -2px 0 var(--accent-red);
}

.footer-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-blue);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--text-white);
}

.footer-info {
    text-align: right;
}

.footer-copyright {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.footer-tagline {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 1024px) {
    .container {
        max-width: 720px;
    }
    
    .nav-menu {
        gap: 15px;
    }
    
    .nav-link {
        font-size: 0.9rem;
    }
    
    .search-container {
        flex: 0 1 200px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px;
        padding: 0 15px;
    }
    
    .site-header {
        height: 70px;
    }
    
    .menu-toggle {
        display: flex;
        order: 3;
    }
    
    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--primary-dark);
        flex-direction: column;
        padding: 20px;
        gap: 0;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-item {
        width: 100%;
    }
    
    .nav-link {
        padding: 15px 0;
        display: block;
        border-bottom: 1px solid var(--border-color);
    }
    
    .hero-content {
        flex-direction: column;
        text-align: center;
        padding: 60px 0;
    }
    
    .hero-text {
        max-width: 100%;
        padding-right: 0;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 10px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-tagline {
        font-size: 1.2rem;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
    
    .error-404 {
        padding: 100px 0 40px;
    }
    
    .error-title {
        font-size: 4rem;
    }
    
    .search-form input {
        width: 100%;
    }
}

/* TV/Large Screens */
@media (min-width: 1800px) {
    .container {
        max-width: 1600px;
    }
    
    .hero-title {
        font-size: 5.5rem;
    }
    
    .hero-tagline {
        font-size: 2rem;
    }
}

@media (max-width: 1200px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    
    .hero-text {
        max-width: 100%;
        padding-right: 0;
    }
    
    .hero-car {
        max-width: 100%;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .blog-layout {
        grid-template-columns: 1fr; /* Stack sidebar below on mobile */
    }
    
    .posts-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 20px;
    }
    
    .articles-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Mobile Navigation */
    .menu-toggle {
        display: flex;
        order: 2;
    }
    
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--card-bg);
        border-radius: 0 0 15px 15px;
        padding: 20px;
        flex-direction: column;
        gap: 0;
        display: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        border: 1px solid var(--border-color);
        border-top: none;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-item:last-child {
        border-bottom: none;
    }
    
    .nav-link {
        display: block;
        padding: 15px 0;
        font-size: 1rem;
        border-bottom: none;
    }
    
    .dropdown-menu {
        position: static;
        background: var(--secondary-dark);
        border: none;
        border-radius: 8px;
        margin: 10px 0;
        padding: 10px 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }
    
    .nav-item.dropdown:hover .dropdown-menu,
    .nav-item.dropdown.active .dropdown-menu {
        display: block;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .footer-info {
        text-align: center;
    }
    
    .blog-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .posts-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive hero tweaks: keep cinematic background on desktop but make the layout friendly on smaller screens */
@media (max-width: 768px) {
    .hero-section {
        height: 70vh;
        background-position: center top;
    }
    .hero-content {
        min-height: 70vh;
        padding-top: 20px;
        justify-content: center;
        align-items: center;
    }
    .hero-text {
        max-width: 100%;
        padding: 0 16px;
        text-align: center;
    }
    .hero-car, .car-3d {
        display: none; /* ensure decorative element doesn't interfere on small screens */
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
}

/* Responsive overrides for header absolute layout: revert to flow on small screens */
@media (max-width: 900px) {
    .header-content {
        justify-content: space-between; /* allow branding + right items on the first row */
        padding: 8px 14px;
    }

    .site-branding {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        padding-left: 0;
        order: 1;
        width: auto;
    }

    .main-navigation {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 16px;
        margin: 8px 0;
        flex-wrap: wrap;
    }

    .search-container,
    .header-social {
        order: 2;
        margin-left: 0;
    }
}

/* Position the right-side controls as a single block so spacing is automatic.
   `.header-controls` exists in the header template and wraps the search + socials. */
.header-controls {
    position: absolute;
    right: 12px; /* distance from viewport right edge */
    top: 50%;
    transform: translateY(-50%);
    z-index: 22;
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Keep children in normal flow inside the wrapper; they inherit flex layout spacing */
.header-controls .header-social {
    display: flex;
    gap: 12px;
    align-items: center;
}

.header-controls .search-container {
    position: relative;
    width: clamp(180px, 20vw, 260px);
}

.header-controls .search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.header-controls .search-form:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.header-controls .search-form input[type="search"] {
    background: transparent;
    border: none;
    padding: 8px 45px 8px 16px;
    color: #fff;
    width: 100%;
    font-size: 0.95rem;
}

.header-controls .search-form input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.header-controls .search-submit {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.05);
    border: none;
    height: calc(100% - 8px);
    width: 35px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.2s ease;
}

.header-controls .search-submit:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Revert wrapper to normal flow on small screens so it stacks cleanly */
@media (max-width: 900px) {
    .header-controls {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        order: 2;
        margin-left: 0;
        width: auto;
        justify-content: flex-end;
    }
}

/* Smooth hover effects for cards */
.article-card, .post-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-card:hover, .post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Remove tilt/skew effects - keep only smooth animations */
.article-thumbnail {
    /* Keep a consistent visual ratio for article thumbnails */
    aspect-ratio: 16 / 9;
    height: auto;
}

.article-thumbnail img, .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* crop rather than stretch */
    display: block;
    transition: transform 0.3s ease;
}

.article-thumbnail:hover img, .post-thumbnail:hover img {
    transform: scale(1.05);
}

/* Smooth menu animations */
.nav-item.dropdown .dropdown-menu {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Button hover effects */
.btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(43, 110, 242, 0.3);
}

/* Car 3D effects - no transitions needed for background element */

/* Smooth car 3D effects - hover removed for background use */

/* Glass effect for menus to match header */
.nav-menu.active {
    background: rgba(10, 15, 28, 0.15);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: none;
}

/* Smooth page transitions */
.page-content, .single-post, .post-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------
   Responsive safety overrides (preserve design)
   - Prevent overlaps between left branding, centered nav and right controls
   - Respect device safe areas (notches) and prevent horizontal scroll
   - Use flexible units and clamp() so visual proportions remain identical
   -------------------------------------------------- */

/* Prevent accidental horizontal scroll on devices where icons slightly overflow */
html, body {
    overflow-x: hidden;
}

/* Respect device safe areas (iPhone notch, etc.) while keeping visual spacing identical */
.site-header {
    padding-left: max(12px, env(safe-area-inset-left, 12px));
    padding-right: max(12px, env(safe-area-inset-right, 12px));
}

/* Ensure branding sits visually flush but respects the safe-area inset */
.site-branding {
    left: max(8px, env(safe-area-inset-left, 8px));
    padding-left: 0; /* we already offset via left */
    min-width: 0; /* allow shrink on narrow viewports */
}

/* Header controls (search + socials) anchored as a group at the right edge; respect safe-area */
.header-controls {
    right: max(12px, env(safe-area-inset-right, 12px));
    min-width: 0;
    box-sizing: border-box;
}

.header-controls .search-container,
.header-controls .header-social {
    min-width: 0;
    flex-shrink: 1; /* allow children to shrink so nothing overflows */
}

/* Limit nav width so it never overlaps left/right controls. This keeps the centered look but is fluid. */
.main-navigation {
    /* leave it centered visually but restrict how wide it can grow */
    max-width: calc(100% - 260px); /* reserves ~130px each side for branding+controls */
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px; /* tiny breathing room so items don't touch edges */
}

.nav-menu {
    gap: clamp(12px, 2.5vw, 40px); /* scales the spacing responsively while preserving visual rhythm */
}

/* Intermediate breakpoints to prevent collisions on laptops/tablets */
@media (max-width: 1400px) {
    .main-navigation { max-width: calc(100% - 220px); }
    .nav-menu { gap: clamp(10px, 2.2vw, 36px); }
}

@media (max-width: 1200px) {
    .main-navigation { max-width: calc(100% - 180px); }
    .nav-menu { gap: clamp(8px, 2.0vw, 30px); }
}

/* At narrower desktop / tablet widths bring nav into normal flow earlier to prevent overlap
   without changing visual design on wide screens. This moves the centered nav into the
   header's content flow so it can't intrude on the left/right controls. */
@media (max-width: 1280px) {
    .main-navigation {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        max-width: 100%;
        padding: 0 10px;
        justify-content: center;
    }
    .header-controls {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        order: 2;
        width: auto;
    }
    .site-branding { position: relative; order: 1; }
}

/* Mobile: keep the flow and use previously defined mobile rules (<=900px) - nothing new here */
@media (max-width: 900px) {
    .main-navigation { padding: 0; }
    .nav-menu { gap: 16px; }
    .search-form input { width: 100%; max-width: 260px; }
}

/* Small phones: ensure social icons never overflow the viewport safe area */
@media (max-width: 420px) {
    .header-controls { right: max(8px, env(safe-area-inset-right, 8px)); }
    .nav-menu { gap: 10px; }
    .search-form input { width: clamp(120px, 36vw, 180px); }
}

/* End of responsive safety overrides */

/* --------------------------------------------------
   Final responsive polish and subtle navbar transparency
   - Keep visual design identical on large screens
   - Enable early collapse of nav (hamburger) to avoid collisions
   - Add subtle glassy/translucent navbar background with blur
   -------------------------------------------------- */

/* Subtle translucent navbar while preserving color tone and contrast */
.site-header {
    /* Slightly translucent glass effect while keeping existing color tone */
    background: rgba(10, 15, 28, 0.60) !important; /* lighter/translucent */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(45,55,72,0.28); /* keep original border tone */
}

/* Make sure header children respect available space and don't overflow */
.header-content,
.header-controls,
.site-branding,
.main-navigation {
    min-width: 0;
}

/* Allow nav-gap to scale down smoothly while preserving look */
.nav-menu { gap: clamp(12px, 2.5vw, 40px); }

/* Show hamburger earlier to prevent collisions on narrower laptops/tablets */
@media (max-width: 1366px) {
    .menu-toggle { display: flex; }
    /* Hide full horizontal menu by default; JS will toggle .nav-menu.active when user opens it */
    .nav-menu { display: none !important; }
    .nav-menu.active { 
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
        padding: 12px 20px;
        gap: 10px;
        z-index: 999;
    }
    .menu-toggle { z-index: 1001; }
}

/* Slightly tighter behavior for small laptops (<=1024) */
@media (max-width: 1024px) {
    .header-controls { gap: 8px; }
    .search-form input { width: clamp(120px, 30vw, 220px); }
}

/* Small phones: ensure all controls fit and nothing overflows horizontally */
@media (max-width: 420px) {
    .site-branding { left: calc(env(safe-area-inset-left, 8px) + 6px); }
    .header-controls { right: calc(env(safe-area-inset-right, 8px) + 6px); }
    .search-form input { width: clamp(100px, 38vw, 160px); }
    .nav-menu.active { padding: 10px; }
}


/* Search form styling */
.search-container {
    position: relative;
    flex: 0 0 220px;
    margin-right: 20px;
}

.search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 8px 15px;
    transition: var(--transition);
    width: 100%;
}

@media (max-width: 768px) {
    .search-container {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 10px 20px;
        background: var(--primary-dark);
        border-top: 1px solid var(--border-color);
        display: none;
    }
    
    .search-container.active {
        display: block;
    }
}

.search-form:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-blue);
}

.search-form input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-white);
    /* responsive width so search doesn't get cropped on smaller devices */
    width: clamp(140px, 18vw, 220px);
    padding: 5px 10px;
    font-size: 0.9rem;
}

/* Improve search field/button alignment and appearance in header */
.search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-form input {
    flex: 1;
    min-width: 0; /* allow proper shrinking on narrow screens */
}

.search-form .search-submit {
    background: rgba(255,255,255,0.06);
    color: var(--text-white);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 6px 12px;
    border-radius: 12px;
    cursor: pointer;
}

.search-form .search-submit:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.12);
}

.search-form input::placeholder {
    color: var(--text-light);
}

.search-form button {
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 5px;
    transition: var(--transition);
}

.search-form button:hover {
    color: var(--accent-blue);
}

/* Contact form styling */
.contact-form {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    position: relative;
}

/* Hide honeypot field */
.website-field {
    display: none !important;
    position: absolute;
    left: -9999px;
}

/* Message counter */
.message-counter {
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: right;
    margin-top: 5px;
}

/* Loading state */
.contact-form.loading .btn-text {
    display: none;
}

.contact-form.loading .btn-loading {
    display: inline-block;
}

.btn-loading {
    display: none;
}

/* Form response messages */
.form-response {
    margin: 15px 0;
    padding: 12px;
    border-radius: 8px;
    display: none;
}

.form-response.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.form-response.error {
    background: rgba(230, 57, 70, 0.1);
    color: #e63946;
    border: 1px solid rgba(230, 57, 70, 0.2);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-white);
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-white);
    font-size: 1rem;
    transition: var(--transition);
}

/* -----------------------------
     Engine Dynamo: Big Gradient
     Add this to make large, animated gradient text for hero titles.
     Use the class `engine-dynamo` on a wrapper and `.engine` / `.dynamo` spans inside.
     ----------------------------- */
.engine-dynamo {
    /* medium, premium heading size that scales on smaller screens */
    font-size: clamp(2rem, 6.5vw, 4rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* subtle, desaturated gradient tuned for a premium dark theme */
    background: linear-gradient(90deg, #15324a, #2a4f86, #2B6EF2);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: engineGradientFlow 12s ease-in-out infinite;
    text-align: center;
    margin-bottom: 0.6rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* subtle depth for premium feel */
    text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 8px 30px rgba(11,20,34,0.22);
}

@keyframes engineGradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.engine-dynamo .engine {
    display: inline-block;
}

.engine-dynamo .dynamo {
    display: inline-block;
}

/* Ensure gradient clip applies to child spans as some browsers prefer the gradient on the inline elements */
.engine-dynamo,
.engine-dynamo .engine,
.engine-dynamo .dynamo {
    background: linear-gradient(90deg, #15324a, #2a4f86, #6b46c1);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
}

@keyframes engineGradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Persistent loading screen styles (safer than inline injection and works with CSP) */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-dark);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#loading-screen .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
}

#loading-screen .loading-logo-img {
    max-width: 120px;
    height: auto;
    display: block;
}

#loading-screen .loading-text {
    color: var(--text-white);
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 1.25rem;
}

#loading-screen .loading-bar {
    width: 220px;
    height: 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    overflow: hidden;
}

#loading-screen .loading-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #2B6EF2, #6b46c1);
    transition: width 300ms linear;
}

/* Optional: Add Glow + Depth (toggle by adding the `glow` class)
     Example: <h1 class="engine-dynamo glow">... </h1> */
.engine-dynamo.glow {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2),
                             0 0 40px rgba(255, 0, 150, 0.4),
                             0 0 60px rgba(0, 200, 255, 0.3);
}

/* Footer logo helpers (override earlier small-logo defaults when needed) */
.footer-logo img {
    width: 160px; /* adjust to fit */
    height: auto;
    display: block;
    object-fit: contain;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* More specific override for the brand area so other circular/footer-logo rules don't crop/scale the img */
.footer-brand .footer-logo {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.footer-brand .footer-logo img {
    width: 110px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* Remove stray decorative pseudo-elements in the footer brand area (fixes the unwanted 'E') */
.footer-brand .footer-logo::before,
.footer-brand .footer-logo::after {
    display: none !important;
    content: none !important;
}

/* Small accessibility & performance tweak: ensure svg respects currentColor when applicable */
.footer-logo img[alt] {
    color: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(43, 110, 242, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Contact info styling */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    flex-shrink: 0;
}

.contact-details h3 {
    color: var(--text-white);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.contact-details p {
    color: var(--text-light);
    margin-bottom: 5px;
}

/* Social media styling */
.social-media {
    margin-top: 30px;
}

.social-media h3 {
    color: var(--text-white);
    margin-bottom: 15px;
}

.social-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.social-link {
    padding: 10px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    color: var(--text-white);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.social-link:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

/* Blog layout — align with site container and use 2-column list for readability */
.blog-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;  /* main content + sidebar */
    gap: 30px;
    margin-top: 30px;
    /* delegate width to the outer .container to keep consistent page alignment */
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* readable two-column list */
    gap: 25px;
}

/* Blog content pagination centered */
.blog-content .pagination {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Posts pagination wrapper (when pagination is placed after the blog layout) */
.posts-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 40px 0;
    /* center within the site container like the homepage "Read more" button */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* When pagination is placed inside the posts grid, force it to span the full row so it centers under the cards */
.posts-grid .posts-pagination {
    grid-column: 1 / -1;
}

/* Larger screens can show three columns like homepage */
@media (min-width: 1400px) {
    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.post-card {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 18px; /* reduced padding to make cards more compact */
    border: 1px solid var(--border-color);
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* allow natural height so cards don't look oversized */
    max-height: none;
    overflow: visible;
}

.post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent-blue);
}

.post-thumbnail {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    /* Fixed dimensions to match homepage featured articles */
    aspect-ratio: 16 / 10;
    height: 250px; /* Same as article-thumbnail size */
    position: relative;
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* crop rather than stretch */
    display: block;
    transition: transform 0.3s ease;
}

.post-thumbnail:hover img {
    transform: scale(1.05);
}

.post-content {
    flex: 1;
}

.post-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.post-date {
    color: var(--accent-blue);
    font-weight: 500;
}

.post-category a {
    color: var(--accent-red);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.post-category a:hover {
    color: var(--text-white);
}

.reading-time {
    color: var(--accent-blue);
    font-weight: 500;
}

.post-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-white);
    line-height: 1.3;
    display: -webkit-box;
    display: box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
}

.post-title a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.post-title a:hover {
    color: var(--accent-blue);
}

.post-excerpt {
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 15px;
    font-size: 0.9rem;
    display: -webkit-box;
    display: box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
}

/* Sidebar styling */
.sidebar {
    margin-top: 0;
}

.widget {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}

.widget-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 20px;
    position: relative;
}

.widget-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--accent-blue);
    border-radius: 1px;
}

.widget-description {
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Newsletter popup */
.newsletter-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 15, 28, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.newsletter-popup-content {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    position: relative;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideInUp 0.4s ease-out;
}

.close-popup {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    transition: var(--transition);
}

.close-popup:hover {
    color: var(--accent-red);
    transform: rotate(90deg);
}

.newsletter-popup h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--text-white);
    background: linear-gradient(45deg, #2B6EF2, #38BDF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.newsletter-popup p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.newsletter-popup ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

.newsletter-popup ul li {
    color: var(--text-white);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.newsletter-popup ul li i {
    color: #22c55e;
}

.newsletter-popup .form-group {
    margin-bottom: 20px;
}

.newsletter-popup input[type="email"] {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    background: var(--secondary-dark);
    color: var(--text-white);
    font-size: 1rem;
    transition: var(--transition);
}

.newsletter-popup input[type="email"]:focus {
    border-color: var(--accent-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(43, 110, 242, 0.1);
}

.newsletter-popup .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.newsletter-popup .checkbox-label input {
    margin-top: 3px;
}

.newsletter-popup .checkbox-label a {
    color: var(--accent-blue);
    text-decoration: none;
}

.newsletter-popup .checkbox-label a:hover {
    text-decoration: underline;
}

.newsletter-popup .subscribe-btn {
    width: 100%;
    padding: 15px;
    background: var(--accent-blue);
    color: var(--text-white);
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.newsletter-popup .subscribe-btn:hover {
    background: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(43, 110, 242, 0.3);
}

.newsletter-popup .subscribe-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.newsletter-footer {
    margin-top: 25px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.newsletter-footer p {
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.social-proof {
    color: #fbbf24;
    font-size: 0.9rem;
}

.social-proof span {
    color: var(--text-light);
    margin-left: 5px;
}

.success-message {
    color: #22c55e;
    text-align: center;
    padding: 20px;
    font-size: 1.1rem;
}

.error-message {
    color: var(--accent-red);
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(230, 57, 70, 0.1);
    font-size: 0.9rem;
}

/* Regular Newsletter form */
.newsletter-form {
    margin-top: 20px;
}

.input-group {
    display: flex;
    gap: 10px;
}

.email-input {
    flex: 1;
    padding: 12px 15px;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    color: var(--text-white);
    font-size: 0.9rem;
    transition: var(--transition);
}

.email-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(43, 110, 242, 0.2);
}

.subscribe-btn {
    background: var(--accent-blue);
    color: var(--text-white);
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.subscribe-btn:hover {
    background: var(--accent-red);
    transform: translateY(-2px);
}

/* Popular posts */
.popular-posts-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.popular-post-item {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.popular-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.popular-post-link {
    display: flex;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.popular-post-link:hover {
    color: var(--accent-blue);
}

.popular-post-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.popular-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-thumbnail {
    width: 100%;
    height: 100%;
    background: var(--secondary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-light);
}

.popular-post-content {
    flex: 1;
}

.popular-post-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 5px;
    line-height: 1.4;
}

.popular-post-date {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Categories */
.categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.categories-list li {
    margin-bottom: 10px;
}

.categories-list a {
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.categories-list a:hover {
    color: var(--accent-blue);
}

.categories-list .count {
    background: var(--secondary-dark);
    color: var(--text-light);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
}

/* Single post styling */
.single-post {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 40px;
    border: 1px solid var(--border-color);
    margin-bottom: 40px;
}

.post-header {
    margin-bottom: 40px;
}

.post-featured-image {
    margin: 30px 0;
    border-radius: 10px;
    overflow: hidden;
}

.post-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.post-footer {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.post-tags {
    margin-bottom: 30px;
}

.tags-label {
    color: var(--text-light);
    font-weight: 500;
}

.post-tags a {
    color: var(--accent-blue);
    text-decoration: none;
    margin-right: 10px;
    transition: var(--transition);
}

.post-tags a:hover {
    color: var(--text-white);
}

/* Social sharing */
.social-share-buttons {
    margin: 30px 0;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.social-share-buttons h4 {
    color: var(--text-white);
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 25px;
    color: var(--text-white);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.share-btn i {
    font-size: 1.1rem;
}

.share-btn.facebook {
    background: rgba(24, 119, 242, 0.1);
    color: #1877f2;
}

.share-btn.facebook:hover {
    background: #1877f2;
    color: white;
}

.share-btn.twitter {
    background: rgba(29, 161, 242, 0.1);
    color: #1da1f2;
}

.share-btn.twitter:hover {
    background: #1da1f2;
    color: white;
}

.share-btn.linkedin {
    background: rgba(0, 119, 181, 0.1);
    color: #0077b5;
}

.share-btn.linkedin:hover {
    background: #0077b5;
    color: white;
}

.share-btn.pinterest {
    background: rgba(230, 0, 35, 0.1);
    color: #e60023;
}

.share-btn.pinterest:hover {
    background: #e60023;
    color: white;
}

.share-btn.email {
    background: rgba(43, 110, 242, 0.1);
    color: var(--accent-blue);
}

.share-btn.email:hover {
    background: var(--accent-blue);
    color: white;
}

.share-btn.copy-link {
    background: rgba(75, 85, 99, 0.1);
    color: var(--text-light);
}

.share-btn.copy-link:hover {
    background: var(--text-white);
    color: var(--primary-dark);
}

.share-stats {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.share-stats span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.share-stats i {
    color: var(--accent-blue);
}

.sharing-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.share-btn {
    padding: 8px 16px;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-white);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.share-btn:hover {
    transform: translateY(-2px);
}

.share-btn.facebook {
    background: rgba(24, 119, 242, 0.1);
    border-color: rgba(24, 119, 242, 0.3);
    color: #1877f2;
}

.share-btn.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: var(--text-white);
}

.share-btn.instagram {
    background: rgba(225, 48, 108, 0.1);
    border-color: rgba(225, 48, 108, 0.3);
    color: #e1306c;
}

.share-btn.instagram:hover {
    background: #e1306c;
    border-color: #e1306c;
    color: var(--text-white);
}

/* Rating system */
.rating-system {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    margin: 40px 0;
    position: relative;
    overflow: hidden;
}

.rating-system::before {
    content: '';
    position: absolute;
    
/* Search Results Page Styling */
.search-results {
    padding: 40px;
    margin-top: 120px; /* Further increased spacing to prevent navbar overlap */
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

/* 404 Page Styling */
.error-404 {
    padding-top: 120px; /* Match search results spacing */
    padding-bottom: 80px;
    text-align: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-dark);
}

.error-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.error-title {
    font-size: 5rem;
    font-weight: 900;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #2B6EF2, #38BDF8, #3B82F6, #60A5FA);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: gradientFlow 8s linear infinite;
}

.error-message {
    font-size: 1.5rem;
    color: var(--text-white);
    margin-bottom: 30px;
}

.error-description {
    color: var(--text-light);
    margin-bottom: 40px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.search-results-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
    background: linear-gradient(45deg, #2B6EF2, #38BDF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.search-results-container {
    padding-top: 80px; /* Additional padding for fixed header */
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.search-result-item {
    background: var(--secondary-dark);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.search-result-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent-blue);
}

.search-result-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-white);
}

.search-result-title a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.search-result-title a:hover {
    color: var(--accent-blue);
}

.search-result-excerpt {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.search-result-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.search-result-date {
    color: var(--accent-blue);
    font-weight: 500;
}

.search-result-category a {
    color: var(--accent-red);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.search-result-category a:hover {
    color: var(--text-white);
}

.search-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

.search-no-results h2 {
    font-size: 2rem;
    color: var(--text-white);
    margin-bottom: 20px;
}

.search-no-results p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* Search form improvements */
.main-search-form {
    margin-top: 30px;
    margin-bottom: 50px;
}

.search-form-large {
    display: flex;
    gap: 15px;
    max-width: 600px;
    margin: 0 auto;
}

.search-input-large {
    flex: 1;
    padding: 15px 25px;
    background: var(--secondary-dark);
    border: 2px solid var(--border-color);
    border-radius: 30px;
    color: var(--text-white);
    font-size: 1.1rem;
    transition: var(--transition);
}

.search-input-large:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(43, 110, 242, 0.1);
}

.search-button-large {
    background: var(--accent-blue);
    color: var(--text-white);
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.search-button-large:hover {
    background: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(43, 110, 242, 0.3);
}

@media (max-width: 768px) {
    .search-results {
        padding: 20px;
        margin-top: 80px;
    }
    
    .search-results-title {
        font-size: 2rem;
    }
    
    .search-results-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .search-form-large {
        flex-direction: column;
    }
    
    .search-button-large {
        width: 100%;
    }
}
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2B6EF2, #38BDF8, #E63946, #F87171);
    animation: gradientFlow 8s linear infinite;
    background-size: 200% 200%;
}

.rating-system h4 {
    color: var(--text-white);
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rating-system h4::before {
    content: '⭐';
    font-size: 1.6rem;
}

.stars {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    position: relative;
}

.star {
    font-size: 2.5rem;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    transform-origin: center;
}

.star:hover {
    transform: scale(1.2);
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.star.active {
    color: #FFD700;
    animation: starPulse 0.3s ease-out;
}

@keyframes starPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.rating-info {
    background: rgba(43, 110, 242, 0.1);
    padding: 15px 20px;
    border-radius: 10px;
    color: var(--text-white);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.average-rating {
    font-size: 1.8rem;
    font-weight: 700;
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 5px;
}

.average-rating::after {
    content: '★';
    font-size: 1.4rem;
}

.rating-count {
    color: var(--text-light);
    font-size: 0.9rem;
}

.rating-distribution {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.rating-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.rating-label {
    min-width: 60px;
    color: var(--text-light);
}

.rating-progress {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.rating-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2B6EF2, #38BDF8);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.rating-value {
    min-width: 40px;
    color: var(--text-light);
    font-size: 0.9rem;
    text-align: right;
}

/* Rating hover effects */
.stars:hover .star {
    color: rgba(255, 215, 0, 0.2);
}

.stars .star:hover ~ .star {
    color: var(--text-light);
}

.stars:hover .star:hover {
    color: #FFD700;
    transform: scale(1.2);
}

/* Post navigation */
.post-navigation {
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.nav-previous,
.nav-next {
    flex: 1;
}

.nav-next {
    text-align: right;
}

.post-navigation a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.post-navigation a:hover {
    color: var(--text-white);
}

/* Related posts */
.related-posts {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.related-posts h3 {
    color: var(--text-white);
    margin-bottom: 30px;
    font-size: 1.5rem;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.related-post {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 18px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    max-height: none;
    overflow: visible;
}

.related-post:hover {
    transform: translateY(-3px);
    border-color: var(--accent-blue);
}

.related-post-thumbnail {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.related-post-thumbnail img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.related-post-content h4 {
    margin-bottom: 10px;
}

.related-post-content h4 a {
    color: var(--text-white);
    text-decoration: none;
    font-size: 1.1rem;
    transition: var(--transition);
}

.related-post-content h4 a:hover {
    color: var(--accent-blue);
}

.related-post-meta {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Comments styling */
.comments-area {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid var(--border-color);
    margin-top: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.comments-title {
    color: var(--text-white);
    margin-bottom: 30px;
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(45deg, #2B6EF2, #38BDF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment-list .children {
    list-style: none;
    padding-left: 50px;
    margin-top: 30px;
}

.comment-list .children .comment {
    background: rgba(43, 110, 242, 0.03);
    border: 1px solid rgba(43, 110, 242, 0.08);
}

.comment-list .children .comment:hover {
    background: rgba(43, 110, 242, 0.06);
}

@media (max-width: 768px) {
    .comment-list .children {
        padding-left: 20px;
    }
}

.comment-list .comment {
    margin-bottom: 30px;
    padding: 25px;
    border-radius: 12px;
    background: rgba(43, 110, 242, 0.05);
    border: 1px solid rgba(43, 110, 242, 0.1);
    transition: all 0.3s ease;
}

.comment-list .comment:last-child {
    margin-bottom: 0;
}

.comment-list .comment:hover {
    background: rgba(43, 110, 242, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.comment-author .avatar {
    border-radius: 50%;
    border: 3px solid rgba(43, 110, 242, 0.2);
    transition: all 0.3s ease;
}

.comment-body:hover .avatar {
    border-color: rgba(43, 110, 242, 0.5);
    transform: scale(1.05);
}

.comment-author .fn {
    color: var(--text-white);
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.comment-author .fn:hover {
    color: var(--accent-blue);
}

.comment-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.comment-time {
    font-size: 0.9rem;
    color: var(--text-light);
}

.comment-meta {
    color: var(--text-light);
    font-size: 0.9rem;
}

.comment-content {
    color: var(--text-light);
    line-height: 1.7;
    margin: 15px 0;
    font-size: 1rem;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 15px;
}

.comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(43, 110, 242, 0.1);
    transition: all 0.3s ease;
}

.comment-reply-link:hover {
    color: var(--text-white);
    background: var(--accent-blue);
    transform: translateY(-2px);
}

/* Comment form */
.comment-form {
    margin-top: 40px;
    padding: 30px;
    background: rgba(43, 110, 242, 0.03);
    border-radius: 15px;
    border: 1px solid rgba(43, 110, 242, 0.1);
}

.comment-reply-title {
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: var(--text-white);
    font-weight: 700;
    background: linear-gradient(45deg, #2B6EF2, #38BDF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.comment-notes {
    color: var(--text-light);
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.comment-form p {
    margin-bottom: 20px;
}

.comment-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-white);
    font-weight: 600;
    font-size: 0.95rem;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 15px;
    background: var(--secondary-dark);
    border: 2px solid rgba(43, 110, 242, 0.1);
    border-radius: 12px;
    color: var(--text-white);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.comment-form input:hover,
.comment-form textarea:hover {
    border-color: rgba(43, 110, 242, 0.3);
    background: rgba(43, 110, 242, 0.05);
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    background: rgba(43, 110, 242, 0.08);
    box-shadow: 0 0 0 4px rgba(43, 110, 242, 0.1);
}

.comment-form textarea {
    resize: vertical;
    min-height: 150px;
}

.form-submit {
    margin-top: 30px;
}

.form-submit input[type="submit"] {
    background: var(--accent-blue);
    color: var(--text-white);
    padding: 15px 30px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: auto;
}

.form-submit input[type="submit"]:hover {
    background: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(43, 110, 242, 0.3);
}

/* Popular Posts Stats */
.post-stats {
    display: flex;
    gap: 20px;
    margin: 15px 0;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.stat-icon {
    font-size: 1rem;
}

.stat-text {
    font-weight: 500;
}

/* Contact Grid Layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.contact-form-section {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.contact-info-section {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.contact-form-section h2,
.contact-info-section h2 {
    color: var(--text-white);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.contact-info {
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    flex-shrink: 0;
}

.contact-details h3 {
    color: var(--text-white);
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.contact-details p {
    color: var(--text-light);
    margin-bottom: 3px;
    font-size: 0.9rem;
}

.social-media h3 {
    color: var(--text-white);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.social-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social-link {
    padding: 8px 16px;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-white);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.social-link:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

/* Responsive design */
@media (max-width: 768px) {
    .blog-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .posts-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .post-navigation {
        flex-direction: column;
        gap: 20px;
    }
    
    .nav-next {
        text-align: left;
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
    
    .sharing-buttons {
        flex-direction: column;
    }
    
    .share-btn {
        text-align: center;
    }
    
    .post-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-container {
        margin-left: 10px;
        order: 3;
    }
    
    .search-form {
        width: 150px;
    }
    
    .search-form input {
        width: 120px;
    }
}

/* About page styling */
.about-content {
    max-width: 1000px;
    margin: 0 auto;
}

.mission-section,
.team-section,
.values-section,
.contact-cta {
    margin-bottom: 60px;
    padding: 40px;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.mission-section h2,
.team-section h2,
.values-section h2,
.contact-cta h2 {
    color: var(--text-white);
    margin-bottom: 20px;
    font-size: 2rem;
}

.mission-section p {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.team-member {
    text-align: center;
    padding: 30px;
    background: var(--secondary-dark);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.team-member:hover {
    transform: translateY(-5px);
    border-color: var(--accent-blue);
}

.team-avatar {
    width: 80px;
    height: 80px;
    background: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
}

.team-member h3 {
    color: var(--text-white);
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.team-role {
    color: var(--accent-blue);
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1rem;
}

.team-bio {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.value-item {
    text-align: center;
    padding: 30px 20px;
    background: var(--secondary-dark);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.value-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent-blue);
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.value-item h3 {
    color: var(--text-white);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.value-item p {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

.contact-cta {
    text-align: center;
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--secondary-dark) 100%);
}

.contact-cta p {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* 404 Page Styling */
.error-404 {
    text-align: center;
    padding: 120px 0 60px; /* Increased top padding to prevent navbar overlap */
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.error-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.error-title {
    font-size: clamp(6rem, 15vw, 12rem);
    font-weight: 900;
    margin: 0;
    line-height: 1;
    background: linear-gradient(45deg, #2B6EF2, #38BDF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 5px 15px rgba(43, 110, 242, 0.3);
}

.error-subtitle {
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 20px 0;
    color: var(--text-white);
}

.error-description {
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.error-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.error-illustration {
    flex: 1;
    max-width: 400px;
}

.error-car {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 0 auto;
}

.car-body {
    width: 180px;
    height: 60px;
    background: var(--accent-blue);
    border-radius: 30px 30px 10px 10px;
    position: relative;
    margin: 0 auto;
}

.car-body::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 20px;
    width: 40px;
    height: 30px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

.car-body::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 20px;
    width: 40px;
    height: 30px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

.car-wheels {
    position: absolute;
    bottom: -10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.wheel {
    width: 30px;
    height: 30px;
    background: var(--text-white);
    border-radius: 50%;
    border: 3px solid var(--primary-dark);
}

.error-smoke {
    position: absolute;
    top: -20px;
    right: -30px;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(160, 174, 192, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: smoke-float 2s ease-in-out infinite;
}

@keyframes smoke-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-10px) scale(1.1); opacity: 0.6; }
}

.error-text {
    flex: 1;
    max-width: 500px;
}

.error-title {
    font-size: 8rem;
    font-weight: 900;
    color: var(--accent-blue);
    margin-bottom: 20px;
    line-height: 1;
    text-shadow: 0 0 30px rgba(43, 110, 242, 0.3);
}

.error-subtitle {
    font-size: 2.5rem;
    color: var(--text-white);
    margin-bottom: 20px;
    font-weight: 700;
}

.error-description {
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 40px;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-actions .btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    font-size: 1.1rem;
}

.error-search,
.error-popular,
.error-quick-links {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 40px;
    margin-bottom: 40px;
    border: 1px solid var(--border-color);
}

.error-search h3,
.error-popular h3,
.error-quick-links h3 {
    color: var(--text-white);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.error-search p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.popular-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.popular-post-card {
    background: var(--secondary-dark);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.popular-post-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-blue);
}

.popular-post-card .post-thumbnail {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.popular-post-card .post-thumbnail img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.popular-post-card h4 {
    margin-bottom: 10px;
}

.popular-post-card h4 a {
    color: var(--text-white);
    text-decoration: none;
    transition: var(--transition);
}

.popular-post-card h4 a:hover {
    color: var(--accent-blue);
}

.popular-post-card .post-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-light);
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--secondary-dark);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-white);
    transition: var(--transition);
}

.quick-link:hover {
    transform: translateY(-3px);
    border-color: var(--accent-blue);
    background: rgba(43, 110, 242, 0.1);
}

.link-icon {
    font-size: 1.5rem;
}

.link-text {
    font-weight: 500;
}

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    padding: 15px 0;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: var(--transition);
}

.breadcrumb a:hover {
    color: var(--text-white);
}

.breadcrumb-separator {
    color: var(--text-light);
}

.breadcrumb-current {
    color: var(--text-white);
    font-weight: 500;
}

/* Pagination Styling */
.pagination {
    margin-top: 60px;
    text-align: center;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pagination .page-numbers a,
.pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-white);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.pagination .page-numbers a:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

.pagination .page-numbers .current {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--text-white);
}

.pagination .page-numbers .prev,
.pagination .page-numbers .next {
    background: var(--secondary-dark);
    font-weight: 600;
}

.pagination .page-numbers .prev:hover,
.pagination .page-numbers .next:hover {
    background: var(--accent-blue);
}

/* Subcategories Section */
.subcategories-section {
    margin-bottom: 40px;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.subcategories-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 25px;
    text-align: center;
    position: relative;
}

.subcategories-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent-blue);
    border-radius: 2px;
}

.subcategories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.subcategory-link {
    text-decoration: none;
    transition: var(--transition);
}

.subcategory-link:hover {
    transform: translateY(-3px);
}

.subcategory-card {
    background: var(--secondary-dark);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.subcategory-card:hover {
    border-color: var(--accent-blue);
    box-shadow: var(--shadow-hover);
}

.subcategory-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 10px;
    line-height: 1.3;
}

.subcategory-card p {
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1;
}

.post-count {
    display: inline-block;
    background: var(--accent-blue);
    color: var(--text-white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    align-self: flex-start;
}

/* No Posts Found */
.no-posts {
    text-align: center;
    padding: 36px 18px;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    margin: 40px auto;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.no-posts-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
}

.no-posts h2, .no-posts h4 {
    color: var(--text-white);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.no-posts p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.6;
}

/* Reading Progress Bar */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-red));
    z-index: 9999;
    transition: width 0.3s ease;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--accent-blue);
    border: none;
    border-radius: 50%;
    color: var(--text-white);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(43, 110, 242, 0.3);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent-red);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(43, 110, 242, 0.4);
}

/* Legal Pages Styling */
.legal-content {
    max-width: 900px;
    margin: 0 auto;
}

.legal-section {
    margin-bottom: 40px;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.legal-section h2 {
    color: var(--text-white);
    margin-bottom: 20px;
    font-size: 1.8rem;
    border-bottom: 2px solid var(--accent-blue);
    padding-bottom: 10px;
}

.legal-section h3 {
    color: var(--text-white);
    margin: 25px 0 15px;
    font-size: 1.3rem;
}

.legal-section p {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 1rem;
}

.legal-section ul {
    margin: 15px 0;
    padding-left: 30px;
}

.legal-section li {
    color: var(--text-light);
    margin-bottom: 8px;
    line-height: 1.6;
}

.legal-section strong {
    color: var(--text-white);
    font-weight: 600;
}

.contact-info {
    background: var(--secondary-dark);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-top: 20px;
}

.contact-info p {
    margin-bottom: 8px;
    color: var(--text-light);
}

.last-updated {
    background: var(--secondary-dark);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid var(--accent-blue);
    margin-top: 30px;
    font-style: italic;
}

/* Newsletter Widget */
.newsletter-widget {
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--secondary-dark) 100%);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.newsletter-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-red));
}

.newsletter-widget .widget-title {
    color: var(--text-white);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.newsletter-widget .widget-description {
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.6;
}

.newsletter-widget .input-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.newsletter-widget .email-input {
    flex: 1;
    padding: 12px 15px;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    color: var(--text-white);
    font-size: 0.9rem;
    transition: var(--transition);
}

.newsletter-widget .email-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(43, 110, 242, 0.2);
}

.newsletter-widget .subscribe-btn {
    background: var(--accent-blue);
    color: var(--text-white);
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.newsletter-widget .subscribe-btn:hover {
    background: var(--accent-red);
    transform: translateY(-2px);
}

/* Responsive adjustments for legal pages */
@media (max-width: 768px) {
    .legal-section {
        padding: 20px;
        margin-bottom: 30px;
    }
    
    .legal-section h2 {
        font-size: 1.5rem;
    }
    
    .legal-section h3 {
        font-size: 1.2rem;
    }
    
    .newsletter-widget .input-group {
        flex-direction: column;
    }
    
    .newsletter-widget .subscribe-btn {
        width: 100%;
    }
}

/* Footer Newsletter Styles */
.site-footer {
    background: var(--primary-dark);
    border-top: 1px solid var(--border-color);
    padding: 60px 0 40px;
    margin-top: 80px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.newsletter-section {
    background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--card-bg) 100%);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(43, 110, 242, 0.05) 0%, rgba(230, 57, 70, 0.05) 100%);
    z-index: 1;
}

.newsletter-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-red) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.newsletter-description {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
    line-height: 1.6;
}

.newsletter-form {
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-input-group {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.newsletter-input-group input {
    flex: 1;
    padding: 15px 20px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    background: var(--primary-dark);
    color: var(--text-white);
    font-size: 1rem;
    transition: var(--transition);
}

.newsletter-input-group input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(43, 110, 242, 0.1);
}

.newsletter-input-group input::placeholder {
    color: var(--text-light);
}

.newsletter-btn {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-red) 100%);
    color: var(--text-white);
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.newsletter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(43, 110, 242, 0.3);
}

.newsletter-btn:active {
    transform: translateY(0);
}

.newsletter-message {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    transition: var(--transition);
}

.newsletter-message.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.newsletter-message.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.footer-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.footer-logo {
    width: 50px;
    height: 50px;
    background: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.footer-logo::before {
    content: 'E';
    color: var(--text-white);
    font-weight: 800;
    font-size: 1.5rem;
}

.footer-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-white);
    letter-spacing: 2px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    padding: 8px 0;
}

.footer-links a:hover {
    color: var(--accent-blue);
}

.footer-info {
    text-align: center;
    color: var(--text-light);
}

.footer-copyright {
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.footer-tagline {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .newsletter-section {
        padding: 30px 20px;
    }
    
    .newsletter-title {
        font-size: 2rem;
    }
    
    .newsletter-input-group {
        flex-direction: column;
    }
    
    .newsletter-btn {
        width: 100%;
    }
    
    .footer-links {
        gap: 20px;
    }
    
    .footer-links a {
        font-size: 0.9rem;
    }
}

/* Contact Page Styles */
.page-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 40px 0;
}

.page-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-red) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-description {
    font-size: 1.2rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.contact-content {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact-form-section,
.contact-info-section {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.contact-form-section::before,
.contact-info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(43, 110, 242, 0.03) 0%, rgba(230, 57, 70, 0.03) 100%);
    z-index: 1;
}

.contact-form-section > *,
.contact-info-section > * {
    position: relative;
    z-index: 2;
}

.contact-form-section h2,
.contact-info-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 30px;
    border-bottom: 3px solid var(--accent-blue);
    padding-bottom: 15px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: var(--text-white);
    font-weight: 600;
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
    padding: 15px 20px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--primary-dark);
    color: var(--text-white);
    font-size: 1rem;
    transition: var(--transition);
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(43, 110, 242, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    background: var(--secondary-dark);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.contact-item:hover {
    transform: translateY(-2px);
    border-color: var(--accent-blue);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-red) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    flex-shrink: 0;
}

.contact-details h3 {
    color: var(--text-white);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.contact-details p {
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 5px;
}

.social-media {
    background: var(--secondary-dark);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid var(--border-color);
}

.social-media h3 {
    color: var(--text-white);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.social-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
    border: 2px solid transparent;
}

.social-link.facebook {
    background: rgba(24, 119, 242, 0.1);
    color: #1877f2;
    border-color: rgba(24, 119, 242, 0.2);
}

.social-link.twitter {
    background: rgba(29, 161, 242, 0.1);
    color: #1da1f2;
    border-color: rgba(29, 161, 242, 0.2);
}

.social-link.instagram {
    background: rgba(225, 48, 108, 0.1);
    color: #e1306c;
    border-color: rgba(225, 48, 108, 0.2);
}

.social-link.youtube {
    background: rgba(255, 0, 0, 0.1);
    color: #ff0000;
    border-color: rgba(255, 0, 0, 0.2);
}

.social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Contact Form Messages */
.contact-messages {
    margin-bottom: 30px;
}

.alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: 500;
    border-left: 4px solid;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-left-color: #22c55e;
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-left-color: #ef4444;
}

/* Newsletter Messages */
.newsletter-message {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    transition: var(--transition);
    margin-top: 10px;
}

.newsletter-message.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.newsletter-message.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Blog Page Sections */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 30px;
    text-align: center;
}

.featured-posts-section,
.popular-posts-section,
.all-posts-section {
    margin-bottom: 60px;
}

/* Featured Posts Grid */
.featured-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.featured-post-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.featured-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.featured-post-thumbnail {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.featured-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.featured-post-thumbnail:hover img {
    transform: scale(1.05);
}

.featured-post-content {
    padding: 25px;
}

.featured-post-content .post-meta {
    margin-bottom: 15px;
}

.featured-post-content .post-title {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.featured-post-content .post-title a {
    color: var(--text-white);
    text-decoration: none;
    transition: var(--transition);
}

.featured-post-content .post-title a:hover {
    color: var(--accent-blue);
}

.featured-post-content .post-excerpt {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Popular Posts Grid */
.popular-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.popular-post-card {
    background: var(--secondary-dark);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.popular-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.popular-post-thumbnail {
    position: relative;
    overflow: hidden;
    height: 180px;
}

.popular-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.popular-post-thumbnail:hover img {
    transform: scale(1.05);
}

.popular-post-content {
    padding: 20px;
}

.popular-post-content .post-meta {
    margin-bottom: 10px;
}

.popular-post-content .post-title {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.popular-post-content .post-title a {
    color: var(--text-white);
    text-decoration: none;
    transition: var(--transition);
}

.popular-post-content .post-title a:hover {
    color: var(--accent-blue);
}

.popular-post-content .post-excerpt {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Newsletter Signup Section */
.newsletter-signup-section {
    background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--card-bg) 100%);
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    margin-top: 40px;
    border: 1px solid var(--border-color);
}

.newsletter-signup-section h3 {
    color: var(--text-white);
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.newsletter-signup-section p {
    color: var(--text-light);
    font-size: 1rem;
    margin-bottom: 25px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
}

.newsletter-form input[type="email"] {
    padding: 15px 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--primary-dark);
    color: var(--text-white);
    font-size: 1rem;
    transition: var(--transition);
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(43, 110, 242, 0.2);
}

.newsletter-form .btn {
    padding: 15px 30px;
    background: var(--accent-blue);
    color: var(--text-white);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.newsletter-form .btn:hover {
    background: #1e5bb8;
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .featured-posts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .popular-posts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .newsletter-signup-section {
        padding: 30px 20px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input[type="email"],
    .newsletter-form .btn {
        width: 100%;
    }
}

/* Newsletter Verification Messages */
.newsletter-verification-message {
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 500;
    border-left: 4px solid;
    transition: opacity 0.5s ease;
}

.newsletter-verification-message.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-left-color: #22c55e;
}

.newsletter-verification-message.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-left-color: #ef4444;
}

/* Contact Page Responsive */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-form-section,
    .contact-info-section {
        padding: 30px 20px;
    }
    
    .page-title {
        font-size: 2.5rem;
    }
    
    .social-links {
        grid-template-columns: 1fr;
    }
}

/* Mobile readability fixes: increase post body font size and line-height for small screens
   and ensure container padding keeps content comfortable. */
@media (max-width: 768px) {
    .single-post .post-content,
    .single .post-content,
    .entry-content,
    .post-content,
    article.post,
    .article-body {
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .single-post .post-content p,
    .entry-content p,
    .post-content p {
        font-size: 1.05rem;
        margin-bottom: 1rem;
    }

    /* Make sure comments and widgets are comfortably sized */
    .comments-area,
    .widget,
    .newsletter-widget {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Slightly increase category/list link size for easier tapping */
    .categories-list a,
    .nav-link {
        font-size: 1.05rem;
    }
}