/* Custom CSS for MummysWorld */

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

:root {
    --primary-dark: #0A1C0A;
    --primary-medium: #1A3A1A;
    --primary-light: #3A7A3A;
    --accent-green: #4CAF50;
    --text-light: #E0E0E0;
    --text-dark: #FFFFFF;
    --border-color: #2A5A2A;
    --warning-red: #DC3545;
}

body {
    background-color: var(--primary-dark);
    color: var(--text-light);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-dark);
}

.text-accent-green {
    color: var(--accent-green);
}

.bg-primary-dark {
    background-color: var(--primary-dark);
}

.bg-primary-medium {
    background-color: var(--primary-medium);
}

.bg-primary-light {
    background-color: var(--primary-light);
}

.bg-accent-green {
    background-color: var(--accent-green);
}

.border-border-color {
    border-color: var(--border-color);
}

.text-warning-red {
    color: var(--warning-red);
}

/* Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
    opacity: 0; /* Hidden by default */
}

.animate-fade-in-down {
    animation: fade-in-down 0.6s ease-out forwards;
    opacity: 0;
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
    opacity: 0;
}

/* Delay utilities */
.animation-delay-100 {
    animation-delay: 0.1s;
}
.animation-delay-200 {
    animation-delay: 0.2s;
}
.animation-delay-300 {
    animation-delay: 0.3s;
}
.animation-delay-400 {
    animation-delay: 0.4s;
}
.animation-delay-500 {
    animation-delay: 0.5s;
}

/* Ensure buttons don't have underline */
button, a.inline-block {
    text-decoration: none !important;
}

/* Footer image styling */
.footer-img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Equivalent to gap-6 */
}

.footer-img-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px; /* Base width */
    height: auto;
    flex-shrink: 0;
}

.footer-logo {
    max-width: 100%;
    max-height: 60px; /* Adjust as needed for vertical centering */
    object-fit: contain;
}

.footer-logo-18plus {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
}

/* Responsive adjustments for footer logos */
@media (min-width: 768px) {
    .footer-img-link {
        width: 120px;
    }
}

@media (min-width: 1024px) {
    .footer-img-link {
        width: 140px;
    }
}

/* Accordion styling for Rating Criteria */
.criteria-item {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.criteria-item:hover {
    background-color: var(--primary-light);
    border-color: var(--accent-green);
}

.criteria-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0;
    margin-bottom: 0;
}

.criteria-header h3 {
    flex-grow: 1;
}

.criteria-header i.ri-arrow-down-s-line {
    transition: transform 0.3s ease;
}

.criteria-header.active i.ri-arrow-down-s-line {
    transform: rotate(180deg);
}

.criteria-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    padding-top: 0;
}

.criteria-content.open {
    max-height: 200px; /* Arbitrary large value, adjust as needed */
    opacity: 1;
    padding-top: 1rem; /* Space after header */
}
/*
 * New stock styles for .consentTunnelGrid children elements.
 * These styles provide basic typography, spacing, and sizing.
 */

.consentTunnelGrid {
    /* Padding for the main container: top, right, bottom, left */
    padding: 30px;
    /* You might want to add a max-width and margin: 0 auto; for better centering on large screens,
       but for now, only padding is provided as requested. */
}

/* Heading 1 styles */
.consentTunnelGrid h1 {
    font-size: 28px; /* Moderate font size for H1 */
    line-height: 1.2;
    margin-top: 1.5em; /* Space above the heading */
    margin-bottom: 0.8em; /* Space below the heading */
}

/* Heading 2 styles */
.consentTunnelGrid h2 {
    font-size: 24px; /* Moderate font size for H2 */
    line-height: 1.3;
    margin-top: 1.4em;
    margin-bottom: 0.7em;
}

/* Heading 3 styles */
.consentTunnelGrid h3 {
    font-size: 20px; /* Moderate font size for H3 */
    line-height: 1.4;
    margin-top: 1.3em;
    margin-bottom: 0.6em;
}

/* Heading 4 styles */
.consentTunnelGrid h4 {
    font-size: 18px; /* Moderate font size for H4 */
    line-height: 1.5;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

/* Heading 5 styles */
.consentTunnelGrid h5 {
    font-size: 16px; /* Moderate font size for H5 */
    line-height: 1.6;
    margin-top: 1.1em;
    margin-bottom: 0.4em;
}

/* Paragraph styles */
.consentTunnelGrid p {
    font-size: 16px; /* Standard base font size for paragraphs */
    line-height: 1.6; /* Good line height for readability */
    margin-top: 0; /* Reset default browser margin-top */
    margin-bottom: 1em; /* Space between paragraphs */
}

/* Unordered list styles */
.consentTunnelGrid ul {
    list-style-type: disc; /* Default bullet points */
    margin-top: 1em; /* Space above the list */
    margin-bottom: 1em; /* Space below the list */
    padding-left: 25px; /* Indent for bullet points */
}

/* List item styles */
.consentTunnelGrid li {
    font-size: 16px; /* Standard font size for list items */
    line-height: 1.5; /* Good line height for list item text */
    margin-bottom: 0.5em; /* Space between individual list items */
}