/* Custom CSS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

/* Global styles for headings to ensure responsiveness */
.site-title {
    font-size: 1.8rem;
}

h1.hero-title {
    font-size: 2.5rem; /* Mobile */
}

h2.section-title {
    font-size: 2.2rem; /* Mobile */
}

h3 {
    font-size: 1.5rem; /* Mobile */
}

@media (min-width: 768px) {
    .site-title {
        font-size: 2.2rem;
    }
    h1.hero-title {
        font-size: 3.5rem; /* Tablet */
    }
    h2.section-title {
        font-size: 2.8rem; /* Tablet */
    }
    h3 {
        font-size: 1.8rem; /* Tablet */
    }
}

@media (min-width: 1024px) {
    .site-title {
        font-size: 2.5rem;
    }
    h1.hero-title {
        font-size: 4.5rem; /* Desktop */
    }
    h2.section-title {
        font-size: 3.5rem; /* Desktop */
    }
    h3 {
        font-size: 2rem; /* Desktop */
    }
}

/* Custom Color Palette */
.bg-dark-blue {
    background-color: #1a202c; /* Dark Blue */
}
.bg-dark-blue-light {
    background-color: #2d3748; /* Slightly lighter dark blue for contrast */
}
.text-light-beige {
    color: #f7f3e9; /* Light Beige */
}
.text-golden-amber {
    color: #ffbf00; /* Golden Amber */
}
.bg-golden-amber {
    background-color: #ffbf00; /* Golden Amber */
}
.bg-burgundy {
    background-color: #800020; /* Burgundy */
}

/* General element styling */
.hero-cta, .contact-button {
    text-decoration: none;
}

.word-break-all {
    word-break: break-all;
}

/* Specific block styling */
.hero-content {
    opacity: 1;
    transform: translateY(20px);
}

.hero-title {
    opacity: 1;
    transform: translateY(20px);
}

.hero-description {
    opacity: 1;
    transform: translateY(20px);
}

.hero-cta {
    opacity: 1;
    transform: scale(0.9);
}

.sega-special-content, .sega-special-image {
    opacity: 1;
    transform: translateY(20px);
}

.classic-card {
    opacity: 1;
    transform: translateY(20px);
}

.comparison-card {
    opacity: 1;
    transform: translateY(20px);
}

.rpg-atmosphere-image, .rpg-atmosphere-content {
    opacity: 1;
    transform: translateY(20px);
}

.editor-picks-content {
    opacity: 1;
    transform: translateY(20px);
}

.top-pick-card {
    opacity: 1;
    transform: translateY(20px);
}

.reviews-grid .review-card {
    opacity: 1;
    transform: translateY(20px);
}

.contact-form {
    opacity: 1;
    transform: translateY(20px);
}

/* Ensure cards have equal height */
.classic-card, .comparison-card, .top-pick-card, .review-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.classic-card p, .comparison-card p, .top-pick-card p, .review-card p {
    flex-grow: 1;
}

/* Cookie modal specific styles */
.cookie-modal-content {
    max-height: 90vh; /* Ensure modal is scrollable if content is too tall */
    overflow-y: auto;
}

/* Mobile menu adjustments */
@media (max-width: 1100px) {
    .md\:hidden {
        display: block;
    }
    .md\:flex {
        display: none;
    }
}
/* Parent container styles */
.lawMatrixNode {
    margin-top: 25px;    /* Top margin for the container */
    margin-bottom: 25px; /* Bottom margin for the container */
    margin-left: 20px;   /* Left margin for the container */
    margin-right: 20px;  /* Right margin for the container */
}

/* Heading styles - keeping font sizes moderate as requested */
.lawMatrixNode h1 {
    font-size: 1.8em;       /* Slightly smaller than default H1, but still prominent */
    margin-top: 1.5em;      /* Top margin for headings */
    margin-bottom: 0.8em;   /* Bottom margin for headings */
    font-weight: 600;       /* Slightly bolder */
    line-height: 1.2;       /* Line height for readability */
}

.lawMatrixNode h2 {
    font-size: 1.5em;       /* Moderate H2 size */
    margin-top: 1.4em;
    margin-bottom: 0.7em;
    font-weight: 500;
    line-height: 1.3;
}

.lawMatrixNode h3 {
    font-size: 1.25em;      /* Moderate H3 size */
    margin-top: 1.3em;
    margin-bottom: 0.6em;
    font-weight: 500;
    line-height: 1.4;
}

.lawMatrixNode h4 {
    font-size: 1.1em;       /* Moderate H4 size */
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    font-weight: 400;       /* Normal weight */
    line-height: 1.5;
}

.lawMatrixNode h5 {
    font-size: 1em;         /* H5 size, close to body text */
    margin-top: 1.1em;
    margin-bottom: 0.4em;
    font-weight: 400;
    line-height: 1.5;
}

/* Paragraph styles */
.lawMatrixNode p {
    font-size: 1em;         /* Default paragraph font size */
    margin-top: 0.8em;      /* Top margin for paragraphs */
    margin-bottom: 0.8em;   /* Bottom margin for paragraphs */
    line-height: 1.6;       /* Improved readability with more line height */
}

/* Unordered list styles */
.lawMatrixNode ul {
    margin-top: 1em;        /* Top margin for lists */
    margin-bottom: 1em;     /* Bottom margin for lists */
    padding-left: 25px;     /* Indentation for bullet points */
    list-style-type: disc;  /* Default bullet style */
}

/* List item styles */
.lawMatrixNode li {
    font-size: 1em;         /* Default list item font size */
    margin-bottom: 0.5em;   /* Space between list items */
    line-height: 1.6;       /* Line height for list items */
}
#hero h1 {
    margin-top: 80px;
}