/* Apply 'Roboto' font family to all elements */
* {
    font-family: 'Roboto', sans-serif;
}

ol,
ul,
li {
    margin-top: 0;
    /* Remove default top margin for lists */
    margin-bottom: 16px;
    /* Adjust bottom margin to control spacing */
}

.category-grid--general { margin-bottom: 24px; }

/* Branding Colors */
:root {
    --primary-light-grey: #f8f9fa; /* Lightened for better readability */
    --primary-navy: #0c5e82;
    --secondary-orange: #f36f21;
    --tertiary-charcoal-grey: #535252;
}

/* Container Layout */
.container.content-main {
    margin-top: 20px;
    padding: 10px;
}

/* Search row */
.search--row {
    background-color: var(--primary-navy);
}

/* Search row */
.search--row h2 {
    color: white;
}

/* Search row title a*/
.search--row .row-title a {
    color: white;
}

/* Category Grid */
.category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Category Tile */
.category-tile {
    width: 240px;
    height: 160px;
    background-color: var(--primary-light-grey); /* Lighter color for readability */
    border: 2px solid var(--primary-navy);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

.category-tile a {
    color: var(--primary-navy); /* Strong contrast for readability */
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
}

/* Tile Content */
.tile-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 10px;
}

/* Category Name Styling */
.category-tile h3 {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-navy); /* High-contrast color */
    margin: 0;
}

/* Hover Effects */
.category-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--secondary-orange);
    background-color: var(--secondary-orange); /* Pop of color on hover */
    color: white; /* Switches to white text for contrast */
}

.category-tile:hover h3 {
    color: white;
}

/* Search Bar */
.search_input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--primary-navy);
    border-radius: 4px;
    color: var(--tertiary-charcoal-grey);
}

.search_submit {
    background-color: var(--primary-navy);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.search_submit:hover {
    background-color: var(--secondary-orange);
}

/* Section Header */
.section-header h3 {
    color: var(--primary-navy);
    font-weight: bold;
}

/* Popular Articles List */
.list-links a {
    color: var(--tertiary-charcoal-grey);
}

.list-links a:hover {
    color: var(--secondary-orange);
}