body {
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

h1, h2, h3 {
    font-family: 'Merriweather', serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Responsive Typography */
@media (min-width: 1024px) {
    h1 {
        font-size: 3.5rem; /* ~56px */
    }
    h2 {
        font-size: 3rem; /* ~48px */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    h1 {
        font-size: 2.8rem; /* ~45px */
    }
    h2 {
        font-size: 2.5rem; /* ~40px */
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: 1.8rem; /* ~29px */
    }
    h2 {
        font-size: 1.5rem; /* ~24px */
    }
    h3 {
        font-size: 1.25rem; /* ~20px */
    }
    .text-2xl {
        font-size: 1.25rem;
    }
    .text-xl {
        font-size: 1.125rem;
    }
}

/* Hero Section Background Pattern */
.hero-pattern {
    background-image: repeating-linear-gradient(45deg, rgba(0,255,0,0.05) 0, rgba(0,255,0,0.05) 1px, transparent 1px, transparent 10px),
                      repeating-linear-gradient(-45deg, rgba(0,255,0,0.05) 0, rgba(0,255,0,0.05) 1px, transparent 1px, transparent 10px);
    background-size: 20px 20px;
    animation: slidePattern 60s linear infinite;
}

@keyframes slidePattern {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

/* Neomorphism for testimonial cards */
.neo-card {
    border-radius: 0.75rem;
    background: #fefcbf; /* Base color for yellow-100 */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.7);
}
.bg-blue-100.neo-card {
    background: #dbeafe;
}
.bg-green-100.neo-card {
    background: #dcfce7;
}
.bg-purple-100.neo-card {
    background: #ede9fe;
}
.bg-red-100.neo-card {
    background: #fee2e2;
}
.bg-teal-100.neo-card {
    background: #ccfbf1;
}

/* Custom styles for article cards to ensure equal height in grid */
.article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.article-card img {
    flex-shrink: 0;
}

.article-card .p-6 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Ensure buttons don't cut text */
button {
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    text-decoration: none !important;
}

/* Ensure menu is adaptive */
.md\:flex {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.md\:flex::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

@media (max-width: 1300px) {
    .md\:flex {
        display: none;
    }
    #burger-menu-button {
        display: block;
    }
}

@media (min-width: 1301px) {
    .md\:flex {
        display: flex !important;
    }
    #burger-menu-button {
        display: none !important;
    }
    #mobile-menu {
        display: none !important;
    }
}

/* Modal scroll behavior */
#article-modal .max-h-\[90vh\] {
    max-height: 90vh;
}

#article-modal .overflow-y-auto {
    overflow-y: auto;
}

/* Sticky footer margin adjustment if needed, but not strictly for this design */
/* If there was a fixed element *above* the footer, this would be needed */
/* For the scroll-to-top button, it doesn't affect the footer layout */
/*
 * New stock styles for policy content
 * Scoped under .policyScopeWrap
 * English comments are important!
 */

.policyScopeWrap {
    /* Padding for the main content wrapper */
    padding: 60px 30px;
    /* Max width for readability on wide screens, centered */
    max-width: 900px;
    margin: 0 auto;
    /* Basic font family for the content, can be overridden by project defaults */
    font-family: Arial, sans-serif; 
    /* Default text color for the entire block */
    color: #fff;
}

/* Headings */
.policyScopeWrap h1 {
    /* H1 font size, not too large */
    font-size: 32px;
    /* Font weight for emphasis */
    font-weight: 700;
    /* Line height for readability */
    line-height: 1.2;
    /* Spacing above and below the heading */
    margin-top: 40px;
    margin-bottom: 20px;
    color: #fff; /* Slightly darker for headings */
}

.policyScopeWrap h2 {
    /* H2 font size */
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 35px;
    margin-bottom: 15px;
    color: #fff;
}

.policyScopeWrap h3 {
    /* H3 font size */
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 30px;
    margin-bottom: 10px;
    color: #fff;
}

.policyScopeWrap h4 {
    /* H4 font size */
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 25px;
    margin-bottom: 8px;
    color: #fff;
}

.policyScopeWrap h5 {
    /* H5 font size */
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 20px;
    margin-bottom: 5px;
    color: #fff;
}

/* Paragraphs */
.policyScopeWrap p {
    /* Standard paragraph font size */
    font-size: 16px;
    /* Line height for optimal readability */
    line-height: 1.6;
    /* Space between paragraphs */
    margin-bottom: 1em;
    color: #fff;
}

/* Unordered lists */
.policyScopeWrap ul {
    /* Top and bottom margin for the list */
    margin-top: 1em;
    margin-bottom: 1em;
    /* Left padding for bullet points */
    padding-left: 25px; /* Slightly more padding for better alignment */
    /* Default list style */
    list-style-type: disc;
    /* Inherit font size and line height from parent */
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}

/* Ordered lists (added for completeness, though not explicitly requested) */
.policyScopeWrap ol {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 25px;
    list-style-type: decimal;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}

/* List items */
.policyScopeWrap li {
    /* Space between list items */
    margin-bottom: 0.5em;
    /* Inherit font size and line height */
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}
