/* Global Enhanced Styles for Dusty Helmets - All Pages Typography and Design */

/* Import Fun Google Fonts for Entire Site */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Bungee:wght@400&family=Righteous:wght@400&family=Nunito:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Oswald:wght@300;400;500;600;700&family=Comfortaa:wght@300;400;500;600;700&family=Caveat:wght@400;500;600;700&family=Pacifico:wght@400&display=swap');

/* Global CSS Variables */
:root {
    --primary-orange: #fbaf32;
    --primary-green: #719a0a;
    --secondary-green: #4E5E30;
    --accent-blue: #006FCD;
    --text-dark: #1e2714;
    --text-gray: #757575;
    --text-light: #ffffff;
    --overlay-orange: rgba(251, 175, 50, 0.45);
    --overlay-green: rgba(113, 154, 10, 0.85);
    --card-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    --border-radius: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Typography Improvements */
body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-dark);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fun Typography Hierarchy */
h1, .h1 {
    font-family: 'Fredoka One', cursive;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--text-dark);
    text-shadow: 2px 2px 0px rgba(251, 175, 50, 0.15);
    margin-bottom: 1.5rem;
}

h2, .h2 {
    font-family: 'Bungee', cursive;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.3;
    color: var(--secondary-green);
    text-shadow: 1px 1px 0px rgba(113, 154, 10, 0.2);
    margin-bottom: 1.2rem;
}

h3, .h3 {
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--primary-orange);
    margin-bottom: 1rem;
}

h4, .h4 {
    font-family: 'Comfortaa', cursive;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--secondary-green);
    margin-bottom: 0.8rem;
}

h5, .h5 {
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--primary-green);
    margin-bottom: 0.6rem;
}

h6, .h6 {
    font-family: 'Comfortaa', cursive;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

/* Enhanced Paragraph Typography */
p, .paragraph {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-gray);
    margin-bottom: 1.2rem;
}

/* Special Typography Classes */
.fun-title {
    font-family: 'Pacifico', cursive;
    font-weight: 400;
    color: var(--primary-orange);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.handwriting {
    font-family: 'Caveat', cursive;
    font-weight: 500;
    font-size: 1.2em;
    color: var(--primary-green);
}

.bold-text {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Enhanced Page Header Styles */
.page-header {
    position: relative;
    min-height: 350px;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0;
}

/* Orange Overlay for Headers */
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-orange);
    z-index: 1;
}

/* Green variant overlay */
.page-header.green-overlay::before {
    background: var(--overlay-green);
}

/* SVG Background Patterns for Headers */
.page-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cg fill='%23ffffff' opacity='0.1'%3E%3Cpath d='M100 300C150 280 200 320 250 300C300 280 350 340 400 320C450 300 500 360 550 340C600 320 650 380 700 360C750 340 800 400 850 380C900 360 950 420 1000 400C1050 380 1100 440 1150 420V500H50V300Z'/%3E%3Ccircle cx='200' cy='200' r='30'/%3E%3Ccircle cx='400' cy='150' r='25'/%3E%3Ccircle cx='600' cy='180' r='35'/%3E%3Ccircle cx='800' cy='120' r='20'/%3E%3Ccircle cx='1000' cy='200' r='40'/%3E%3Cpath d='M0 400L50 380C100 360 200 320 300 300C400 280 500 260 600 280C700 300 800 360 900 380C1000 400 1100 380 1150 370L1200 360V500H0V400Z' opacity='0.05'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Cg fill='%23ffffff' opacity='0.08'%3E%3Cpolygon points='100,150 130,120 160,150 130,180'/%3E%3Cpolygon points='300,100 340,70 380,100 340,130'/%3E%3Cpolygon points='500,180 540,150 580,180 540,210'/%3E%3Cpolygon points='700,120 740,90 780,120 740,150'/%3E%3Cpath d='M50 250C100 230 150 270 200 250C250 230 300 290 350 270C400 250 450 310 500 290C550 270 600 330 650 310C700 290 750 350 800 330V400H0V250Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 1200px 600px, 800px 400px;
    background-position: 0 0, 400px 100px;
    animation: headerSvgFloat 30s ease-in-out infinite;
    z-index: 2;
}

/* Header SVG Animation */
@keyframes headerSvgFloat {
    0%, 100% {
        transform: translateX(0px) translateY(0px);
        opacity: 0.1;
    }
    25% {
        transform: translateX(-20px) translateY(-10px);
        opacity: 0.15;
    }
    50% {
        transform: translateX(20px) translateY(10px);
        opacity: 0.08;
    }
    75% {
        transform: translateX(-10px) translateY(-5px);
        opacity: 0.12;
    }
}

/* Header Content Styling */
.page-header .container {
    position: relative;
    z-index: 3;
}

.page-header h2 {
    font-family: 'Fredoka One', cursive;
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--text-light);
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
    animation: headerTitleSlide 1s ease-out;
}

.page-header a {
    font-family: 'Comfortaa', cursive;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 1.1rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
    position: relative;
}

.page-header a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--text-light);
    transition: width 0.3s ease;
}

.page-header a:hover {
    color: var(--text-light);
    transform: translateY(-2px);
}

.page-header a:hover::after {
    width: 100%;
}

/* Header Title Animation */
@keyframes headerTitleSlide {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Header Enhancements */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.section-header p {
    font-family: 'Caveat', cursive;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--primary-orange);
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.section-header h2 {
    font-family: 'Bungee', cursive;
    font-size: 2.8rem;
    font-weight: 400;
    color: var(--secondary-green);
    text-shadow: 2px 2px 0px rgba(251, 175, 50, 0.15);
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-orange), var(--primary-green));
    border-radius: 2px;
    animation: underlineGlow 2s ease-in-out infinite alternate;
}

@keyframes underlineGlow {
    from {
        box-shadow: 0 0 5px rgba(251, 175, 50, 0.3);
    }
    to {
        box-shadow: 0 0 15px rgba(251, 175, 50, 0.6);
    }
}

/* Enhanced Card Styles */
.blog-item, .card, .hh {
    background: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    overflow: hidden;
    position: relative;
}

.blog-item:hover, .card:hover, .hh:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.blog-title, .card-title {
    font-family: 'Righteous', cursive;
    font-size: 1.4rem;
    color: var(--secondary-green);
    margin-bottom: 1rem;
    text-shadow: 1px 1px 0px rgba(251, 175, 50, 0.1);
}

.blog-content, .card-body {
    padding: 2rem;
}

.blog-content p, .card-text {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-gray);
}

/* Enhanced Button Styles */
.primary-btn, .btn-primary {
    font-family: 'Comfortaa', cursive;
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-orange), var(--primary-green));
    color: var(--text-light);
    border: none;
    border-radius: 50px;
    padding: 12px 30px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-block;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(251, 175, 50, 0.3);
}

.primary-btn:hover, .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(251, 175, 50, 0.4);
    color: var(--text-light);
    text-decoration: none;
}

.primary-btn::before, .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.primary-btn:hover::before, .btn-primary:hover::before {
    left: 100%;
}

/* Form Enhancements */
.form-control {
    font-family: 'Nunito', sans-serif;
    border-radius: var(--border-radius);
    border: 2px solid #e0e0e0;
    padding: 12px 16px;
    font-size: 1rem;
    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--primary-orange);
    box-shadow: 0 0 0 0.2rem rgba(251, 175, 50, 0.25);
}

/* Breadcrumb Enhancements */
.page-header .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.page-header .breadcrumb a {
    margin-right: 15px;
    position: relative;
}

.page-header .breadcrumb a:not(:last-child)::after {
    content: '>';
    margin-left: 15px;
    opacity: 0.7;
}

/* Special Effect Classes */
.dusty-color {
    color: var(--primary-orange) !important;
}

.green-color {
    color: var(--primary-green) !important;
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enhanced List Styles */
ul, ol {
    font-family: 'Nunito', sans-serif;
    line-height: 1.7;
}

ul li::marker {
    color: var(--primary-orange);
}

ol li::marker {
    color: var(--primary-green);
    font-weight: 600;
}

/* Responsive Typography */
@media (max-width: 991.98px) {
    h1, .h1 { font-size: 2.2rem; }
    h2, .h2 { font-size: 1.8rem; }
    .page-header h2 { font-size: 3rem; }
    .section-header h2 { font-size: 2.4rem; }
}

@media (max-width: 767.98px) {
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.6rem; }
    .page-header h2 { font-size: 2.5rem; }
    .section-header h2 { font-size: 2rem; }
    .page-header { min-height: 250px; }
}

@media (max-width: 575.98px) {
    h1, .h1 { font-size: 1.8rem; }
    h2, .h2 { font-size: 1.4rem; }
    .page-header h2 { font-size: 2.2rem; }
    .section-header h2 { font-size: 1.8rem; }
    .page-header { min-height: 200px; }
    p, .paragraph { font-size: 1rem; }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Enhanced Text Typography for All Pages */
.blog-content p, .about-content p, .card-text p, .panel-body p {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-gray);
    margin-bottom: 1.5rem;
    text-align: justify;
    font-weight: 400;
}

/* Enhanced Typography for Different Content Types */
.testimonial-text, .blog-content .testimonial-text {
    font-family: 'Comfortaa', cursive;
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-dark);
    font-style: italic;
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(251, 175, 50, 0.05), rgba(113, 154, 10, 0.05));
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-orange);
}

.testimonial-text::before {
    content: '"';
    font-family: 'Pacifico', cursive;
    font-size: 3rem;
    color: var(--primary-orange);
    position: absolute;
    top: -10px;
    left: 10px;
    opacity: 0.3;
}

/* Enhanced List Styling */
.blog-content ul, .about-content ul, .panel-body ul {
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    padding-left: 2rem;
}

.blog-content ul li, .about-content ul li, .panel-body ul li {
    margin-bottom: 0.8rem;
    position: relative;
}

.blog-content ul li::before, .about-content ul li::before, .panel-body ul li::before {
    content: '🏍️';
    position: absolute;
    left: -2rem;
    top: 0;
    font-size: 1.2rem;
}

/* Enhanced Quote Styling */
blockquote, .blockquote {
    font-family: 'Caveat', cursive;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--secondary-green);
    text-align: center;
    padding: 2rem;
    margin: 2rem 0;
    background: linear-gradient(135deg, rgba(251, 175, 50, 0.05), rgba(113, 154, 10, 0.1));
    border-radius: var(--border-radius);
    border: none;
    position: relative;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Enhanced Image Effects */
.blog-img, .about-img, .card-img, .post-card-image, .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: var(--transition);
}

/* Image Hover Effects */
.blog-img img, .about-img img, .card-img img, .post-card-image img, .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
}

.blog-img:hover img, .about-img:hover img, .card-img:hover img, .post-card-image:hover img, .gallery-item:hover img {
    transform: scale(1.1);
}

/* Image Overlay Effects */
.blog-img::before, .about-img::before, .card-img::before, .post-card-image::before, .gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(251, 175, 50, 0.15), rgba(113, 154, 10, 0.8));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.blog-img:hover::before, .about-img:hover::before, .card-img:hover::before, .post-card-image:hover::before, .gallery-item:hover::before {
    opacity: 1;
}

/* Image Loading Animation */
.blog-img, .about-img, .card-img, .post-card-image, .gallery-item {
    position: relative;
}

.blog-img::after, .about-img::after, .card-img::after, .post-card-image::after, .gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: imageShine 3s ease-in-out infinite;
    z-index: 2;
}

@keyframes imageShine {
    0% {
        left: -100%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Image Parallax Effects */
.parallax-image {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

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

.parallax-image .content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
}

/* Enhanced Image Captions */
.image-caption, .img-caption {
    font-family: 'Caveat', cursive;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-gray);
    text-align: center;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Gallery Specific Enhancements */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.gallery-item {
    position: relative;
    height: 250px;
    cursor: pointer;
}

.gallery-item .overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
}

.gallery-item:hover .overlay-content {
    opacity: 1;
}

.gallery-item .overlay-content h3 {
    font-family: 'Righteous', cursive;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.gallery-item .overlay-content p {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Team Member Cards Enhancement */
.team-member {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    overflow: hidden;
    position: relative;
}

.team-member:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.team-member .member-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    border: 4px solid var(--primary-orange);
    transition: var(--transition);
}

.team-member:hover .member-photo {
    border-color: var(--primary-green);
    transform: scale(1.05);
}

.team-member .member-name {
    font-family: 'Bungee', cursive;
    font-size: 1.4rem;
    color: var(--secondary-green);
    margin-bottom: 0.5rem;
}

.team-member .member-role {
    font-family: 'Righteous', cursive;
    font-size: 1.1rem;
    color: var(--primary-orange);
    margin-bottom: 1rem;
}

.team-member .member-bio {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-gray);
}

/* Enhanced Accordion Styling */
.panel-title a {
    font-family: 'Righteous', cursive !important;
    font-size: 1.2rem !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.panel-body {
    font-family: 'Nunito', sans-serif;
    line-height: 1.8;
    color: var(--text-gray);
}

/* Enhanced Post Cards */
.post-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: var(--transition);
    height: 100%;
}

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

.post-card .entry-title {
    font-family: 'Righteous', cursive;
    font-size: 1.3rem;
    color: var(--secondary-green);
    margin-bottom: 1rem;
}

.post-card .entry-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-card .entry-title a:hover {
    color: var(--primary-orange);
}

/* Mobile Responsiveness for Images */
@media (max-width: 768px) {
    .parallax-image {
        background-attachment: scroll;
        min-height: 300px;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
    
    .gallery-item {
        height: 200px;
    }
}

/* Print Styles */
@media print {
    .page-header::before,
    .page-header::after {
        display: none !important;
    }
    
    .blog-img::before,
    .blog-img::after,
    .about-img::before,
    .about-img::after {
        display: none !important;
    }
    
    body {
        font-family: 'Nunito', sans-serif;
        color: #000000 !important;
    }
}

/* Performance Optimizations */
.blog-img img, .about-img img, .card-img img, .post-card-image img, .gallery-item img {
    will-change: transform;
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    .blog-img img, .about-img img, .card-img img, .post-card-image img, .gallery-item img {
        transition: none !important;
    }
    
    .blog-img::after, .about-img::after, .card-img::after, .post-card-image::after, .gallery-item::after {
        animation: none !important;
    }
}