/* Ensure all text uses the correct Latvian-supporting font stack */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Noto+Sans:wght@400;700&display=swap&font-display=swap');

body, html {
    font-family: 'Montserrat', 'Noto Sans', Arial, sans-serif;
}
body {
    overflow-x: hidden;
}

/* Prevent horizontal overflow on all containers */
html {
    overflow-x: hidden;
}

/* Ensure long URLs and text wrap properly on mobile */
a, p, span, li {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Fix max-width containers to prevent overflow */
.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure sections don't overflow */
section {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix contact cards and similar content blocks */
.bg-k-lightblue, .rounded-lg {
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure grid doesn't overflow on mobile */
.grid {
    max-width: 100%;
}
.font-sans {
    font-family: 'Montserrat', 'Noto Sans', Arial, sans-serif !important;
}

/* Add your custom styles here */
.nav-link {
    color: #f3f4f6;
    padding: 0.5rem 1rem;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #ef4444;
}

/* Responsive video container for embedded YouTube videos */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 1.5rem 0;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* Hero background styling */
.hero-bg {
    filter: grayscale(60%) blur(1px);
    object-position: top 30px left 0;
}

/* Button styles */
.btn-primary {
    display: inline-block;
    background-color: #d4af37; /* k-gold */
    color: #fff;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s;
}
.btn-primary:hover {
    background-color: #1a2332; /* k-navy */
}
.btn-secondary {
    display: inline-block;
    background-color: transparent;
    border: 2px solid #d4af37;
    color: #1a2332;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s, color 0.3s;
}
.btn-secondary:hover {
    background-color: #d4af37;
    color: #fff;
}

/* ====================================
   Mobile Responsive Typography & Spacing
   ==================================== */

/* Page sections - reduce padding on mobile */
section {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Responsive headings - scale down on mobile */
h1, .text-5xl {
    font-size: 1.875rem !important; /* 30px on mobile */
    line-height: 1.2 !important;
}

h2, .text-4xl {
    font-size: 1.5rem !important; /* 24px on mobile */
    line-height: 1.25 !important;
}

h3, .text-3xl {
    font-size: 1.25rem !important; /* 20px on mobile */
    line-height: 1.3 !important;
}

h4, .text-2xl {
    font-size: 1.125rem !important; /* 18px on mobile */
    line-height: 1.35 !important;
}

/* Scale up on tablets */
@media (min-width: 640px) {
    h1, .text-5xl {
        font-size: 2.25rem !important; /* 36px */
    }
    
    h2, .text-4xl {
        font-size: 1.875rem !important; /* 30px */
    }
    
    h3, .text-3xl {
        font-size: 1.5rem !important; /* 24px */
    }
    
    h4, .text-2xl {
        font-size: 1.25rem !important; /* 20px */
    }
}

/* Full size on desktop */
@media (min-width: 1024px) {
    h1, .text-5xl {
        font-size: 3rem !important; /* 48px */
    }
    
    h2, .text-4xl {
        font-size: 2.25rem !important; /* 36px */
    }
    
    h3, .text-3xl {
        font-size: 1.875rem !important; /* 30px */
    }
    
    h4, .text-2xl {
        font-size: 1.5rem !important; /* 24px */
    }
}

/* Paragraph and body text - slightly smaller on mobile */
p, .text-lg {
    font-size: 1rem;
    line-height: 1.625;
}

@media (min-width: 640px) {
    p, .text-lg {
        font-size: 1.125rem;
    }
}

/* Content containers - better mobile spacing */
.max-w-7xl {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .max-w-7xl {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .max-w-7xl {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Reduce vertical padding on mobile for sections */
.py-20 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 640px) {
    .py-20 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    .py-20 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Page header section - reduce bottom padding */
section.pt-20.pb-8,
section[class*="pt-20"][class*="pb-8"] {
    padding-bottom: 0;
}

@media (min-width: 640px) {
    section.pt-20.pb-8,
    section[class*="pt-20"][class*="pb-8"] {
        padding-bottom: 0.5rem;
    }
}

@media (min-width: 1024px) {
    section.pt-20.pb-8,
    section[class*="pt-20"][class*="pb-8"] {
        padding-bottom: 1.5rem;
    }
}

/* Reduce mb-12 margins on mobile */
.mb-12 {
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .mb-12 {
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .mb-12 {
        margin-bottom: 2.5rem;
    }
}

/* Reduce mb-16 margins on mobile */
.mb-16 {
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .mb-16 {
        margin-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    .mb-16 {
        margin-bottom: 3rem;
    }
}

/* Cards and boxes - smaller padding on mobile */
.p-6, .p-8 {
    padding: 1rem;
}

@media (min-width: 640px) {
    .p-6 {
        padding: 1.5rem;
    }
    .p-8 {
        padding: 2rem;
    }
}

/* Grid gaps - tighter on mobile */
.gap-8 {
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .gap-8 {
        gap: 2rem;
    }
}

@media (min-width: 640px) {
    .mb-12 {
        margin-bottom: 3rem;
    }
}

/* Images in content - ensure they fit on mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Lists - better mobile spacing */
ul, ol {
    padding-left: 1.25rem;
}

@media (min-width: 640px) {
    ul, ol {
        padding-left: 1.5rem;
    }
}

/* Hero section adjustments */
.min-h-screen {
    min-height: calc(100vh - 4rem); /* Account for fixed nav */
}

/* CTA buttons - full width on small mobile */
@media (max-width: 400px) {
    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
        padding: 0.75rem 1.5rem;
    }
}

/* Footer adjustments for mobile */
footer .grid {
    gap: 2rem;
}

footer h3 {
    font-size: 1rem !important; /* 16px - base text size */
}

@media (max-width: 768px) {
    footer .grid {
        text-align: center;
    }
    
    footer .flex.items-center {
        justify-content: center;
    }
}