@import url(//fonts.googleapis.com/css?family=Oswald);
@import url(//fonts.googleapis.com/css?family=Palanquin:400,600);
@import url("https://use.typekit.net/opm0pbh.css");

:root {
    --main-accent-color: #31a9b8;
    --hover-color: black;
    --background-light: #dddddd;
    --background-white: white;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--background-light);
    background: linear-gradient(to right, var(--background-light) 0%, var(--background-light) 10%, var(--background-white) 10%, var(--background-white) 90%, var(--background-light) 90%, var(--background-light) 100%);
    margin: 0;
    padding: 0;
    margin-top: 50px; /* Accounts for the fixed topbar and navbar heights */
}

@media only screen and (max-width: 780px) {
    body {
        background: var(--background-white);
    }
}

@media only screen and (max-width: 480px) {
    body {
        background: var(--background-white);
    }
}

a {
    text-decoration: none;
    color: var(--main-accent-color);
    transition: 0.3s;
}

a:hover {
    color: var(--hover-color);
}

a:focus {
    outline: 3px solid var(--main-accent-color);
    outline-offset: 2px;
}

a:active {
    color: var(--hover-color);
}


/* START OF TOP BAR STYLES - CONTAINS SEARCH BOX AND SOCIALS */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #A43820;
    z-index: 1000;
    display: flex;
    align-items: center; /* Ensures vertical alignment for inner elements */
}

@media only screen and (max-width: 1440px) {
    .topbar {
        height: 50px;
    }
}

.topbarcontainer {
    width: 80%; /* Default for larger screens */
    margin: 0 auto; 
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    gap: 20px; 
    position: relative;
}

@media only screen and (max-width: 1440px) {
    .topbarcontainer {
        width: calc(100% - 80px); /* 40px margin on each side */
    }
}

@media only screen and (max-width: 780px) {
    .topbarcontainer {
        width: calc(100% - 20px); /* 10px margin on each side */
    }
}


.topbarlogo {
    display: none; /* Hidden by default */
    flex-shrink: 0; /* Prevent shrinking */
    visibility: hidden; /* Prevent taking up space when hidden */
}

.small-logo {
    height: 30px; /* Smaller size */
    transition: opacity 0.3s, transform 0.3s;
}

/* HIDE .topbarlogo ON SCREENS UP TO 780PX */
@media only screen and (max-width: 780px) {
    .topbarlogo {
        display: none !important; /* Forcefully hide */
    }
}


.topbarright {
    display: flex; /* Align the searchbox and socialbox side by side */
    align-items: center; /* Vertically center both items */
    gap: 10px; /* Adds spacing between searchbox and socialbox */
    margin-left: auto; /* Push the search box and socials to the right */
}

@media only screen and (max-width: 780px) {
    .topbarright {
        width: 100%; /* Full width */
        display: flex; 
        justify-content: center; 
    }
}

.searchbox {
    display: flex; /* Align input and button side by side */
    align-items: center; /* Vertically align input and button */
    gap: 5px; /* Adds spacing between input and button */
    width: auto; /* Shrink to fit content */
    position: relative; /* Establish a positioning context for autocomplete-box */
}

@media only screen and (max-width: 780px) {
    .searchbox {
        width: 100%; 
    }
}

.socialbox {
    display: flex; /* Aligns icons horizontally */
    align-items: center; /* Vertically align icons */
    gap: 10px; /* Adds spacing between social icons */
}

@media only screen and (max-width: 780px) {
    .socialbox {
        display: none; /* Hide social icons on smaller screens */
    }
}

#search-input {
    height: 40px; /* Match the button height */
    padding: 5px 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px; /* Optional: Aligns with button corners */
    flex: 1; /* Makes input box take up remaining space if needed */
    box-sizing: border-box; /* Ensure padding doesn't affect total height */
}

@media only screen and (max-width: 780px) {
    #search-input {
        width: 100%; 
    }
}

#search-button {
    height: 40px;
    padding: 5px 15px;
    font-size: 16px;
    background-color: #CF3721;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#search-button:hover {
    background-color: #A42B1A;
}

.autocomplete-box {
    display: none; /* Hidden by default */
    position: absolute; /* Position relative to the .searchbox */
    top: 100%; /* Align directly below the input box */
    left: 0; /* Align to the left edge of the input box */
    background-color: white;
    border: 1px solid #ddd;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    width: 100%; /* Match the width of the input box */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.autocomplete-box div {
    padding: 10px;
    cursor: pointer;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Ellipsis for long text */
}

.autocomplete-box div:hover {
    background-color: #f0f0f0;
}

/* END OF TOP BAR */

/* TITLE BAR - HOLDS THE SITE'S MAIN LOGO */

.titlebar {
    width: 100%;
    background-color: #CF3721;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 150px; 
}

@media only screen and (max-width: 780px) {
    .titlebar {
        min-height: 90px; 
    }
}

.title {
    width: 80%; 
    margin: 0 auto;
    text-align: left;
}

@media only screen and (max-width: 1440px) {
    .title {
        width: calc(100% - 80px); /* Consistent with topbar */
        text-align: center;
    }
}

@media only screen and (max-width: 780px) {
    .title {
        width: calc(100% - 20px); 
        text-align: center;
    }
}

.logo {
    max-height: 120px; 
    width: auto; 
}

@media only screen and (max-width: 780px) {
    .logo {
        max-height: 60px; 
        width: auto; 
    }
}

/* END OF TITLE BAR STYLES */


/* START OF NAVIGATION BAR STYLES */

.navbar {
    position: relative;
    width: 100%;
    height: 50px; /* Fixed height for large screens */
    background-color: #A43820;
    z-index: 999;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for a sticky effect */
}

@media only screen and (max-width: 780px) {
    .navbar {
        height: 30px; /* Smaller navbar for mobile */
    }
}

.navoptions {
    width: 80%;
    margin: 0 auto;
    display: flex; 
    justify-content: space-between; 
}

@media only screen and (max-width: 1440px) {
    .navoptions {
        width: 100%;
    }
}

@media only screen and (max-width: 780px) {
    .navoptions {
        width: 100%;
    }
}

a.navbuttons {
    flex: 1; /* Ensures each button takes equal space */
    text-align: center;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
    color: white;
    text-decoration: none;
    transition: 0.3s;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px 1px #4d4d4d;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 50px; /* Ensures consistent height */
    padding: 0 10px; /* Horizontal padding for spacing */
    white-space: nowrap; /* Prevents text from breaking to the next line */
    overflow: hidden; 
    text-overflow: ellipsis; /* Truncate if text overflows */
}

a.navbuttons:hover {
    color: black;
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.5) !important;
}

@media only screen and (max-width: 780px) {
    a.navbuttons {
        font-size: 12px; 
        letter-spacing: 0px; 
        min-height: 30px; 
        padding: 0 5px; 
    }
}

/* END OF NAVIGATION BAR STYLES */


/* START OF MAIN CONTAINER AND CONTENT STYLES */

/* General container styles (applies to both .container and .container2) */
.container, 
.container2 {
    width: 80%;
    margin: auto;
    padding: 0 80px 10px; /* Top: 0px, Left/Right: 80px, Bottom: 10px */
}

@media only screen and (max-width: 1440px) {
    .container, 
    .container2 {
        width: 100%; 
        padding: 0 40px 10px; 
        background-color: white; 
    }
}

@media only screen and (max-width: 780px) {
    .container, 
    .container2 {
        width: 100%; 
        padding: 0 10px 10px; 
        background-color: white;
    }
}

/* Padding-specific styles for container2 only */
.container2 {
    padding-top: 20px; 
}


.breadcrumb {
    width: 100%; 
	float:left;
    margin-bottom: 20px;
    padding-top:20px;
}

@media only screen and (max-width: 780px) and (orientation:portrait) {
	.breadcrumb {
		padding-top:10px;
		}}

.breadbuttons {
	font-family: 'gitan-latin', sans-serif; 
	font-weight: 400; 
	font-style: normal; 
	font-size: clamp(16px, 2vw, 20px); /* Clamps between 16px and 20px */
	letter-spacing: 1px;
}

.breadbuttons:hover {
	color:black;
}

.nonbreadcrumbbreak {
    width: 100%;
    clear: both;
    height: 2rem; /* Uses relative units (rem) for better accessibility */
}

h1 {
    font-family: 'Active', serif;
    font-size: clamp(32px, 5vw, 50px); /* Clamped to be responsive */
    color: #CF3721;
    letter-spacing: 1px;
    padding-bottom: 20px;
    text-align: center; /* Center-align for better mobile presentation */
    padding-top: 0px; /* Remove unnecessary padding */
}

@media only screen and (max-width: 780px) {
    h1 {
        padding-bottom: 10px;
    }
}

/* 🔥 H3 Stylings */
h3 {
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-size: clamp(24px, 4vw, 32px); /* Clamped for responsiveness */
    color: #CF3721;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-bottom: 0px;
    padding-top: 40px;
}

.introtext {
    font-family: 'gitan-latin', sans-serif; 
    font-weight: 400; 
    font-style: normal;
    font-size: clamp(18px, 3vw, 22px); /* Clamped for responsiveness */
    line-height: 1.5; /* Relative line-height to font size */
    letter-spacing: 1px;
    color: #1B1B1B;
    padding-bottom: 30px;
}

@media only screen and (max-width: 780px) {
    .introtext {
        padding-bottom: 20px; /* Reduce padding for smaller screens */
    }
}

.generaltext {
    font-family: 'gitan-latin', sans-serif; 
    font-weight: 400; 
    font-style: normal; 
    font-size: clamp(16px, 2vw, 20px); /* Clamped for responsiveness */
    line-height: 1.6; /* Relative line-height to font size */
    text-align: justify;
    letter-spacing: 0px;
    word-spacing: 0.1em; /* Change from px to em for more scalable layout */
    margin-top: 20px;
    color: #666666;
    display: block;
    clear: both;
}

/* Main Content Layout */

.maincontent {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem; /* The gap between the boxes */
}

.maincontentbox {
    width: calc(70% - 2rem); /* Use calc to account for half the gap */
}

.subcontentbox {
    width: calc(30% - 2rem); /* Use calc to account for half the gap */
}

@media (max-width: 780px) {
    .maincontent {
        justify-content: center; /* This helps center the subcontentbox */
    }

    .maincontentbox {
        width: 100%; /* Full width for smaller screens */
    }

    .subcontentbox {
        width: 90%; /* 90% width for smaller screens */
    }
}


/* 🔥 Main Image Container */
.mainimagecontainer {
    background-color: transparent; 
    width: 100%; 
    border-radius: 10px; 
}

.mainimage {
    max-width: 100%; 
    border-radius: 10px; 
    box-shadow: 10px 10px #cbcbcb; 
    border: 1px solid #cbcbcb; 
}

@media only screen and (max-width: 780px) {
    .mainimage {
        box-shadow: 5px 5px #cbcbcb; 
    }
}

/* Image Holders (Responsive) */
.imageholder100, 
.imageholder80, 
.imageholder60 {
    margin: 0 auto; 
}

.imageholder100 {
    width: 100%; 
}

.imageholder80 {
    width: clamp(60%, 80%, 80%); 
}

.imageholder60 {
    width: clamp(40%, 60%, 60%); 
}

.imageholder {
    display: flex; /* Use flexbox for easy alignment */
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically if needed */
    margin: 20px auto; /* Adds a 20px gap above and centers the container */
    text-align: center; /* Fallback alignment */
}

.imageholder img {
    max-width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; /* Ensures images fill the container while maintaining aspect ratio */
    border-radius: 10px; /* Rounded corners for the image */
    border: 1px solid #cbcbcb; /* Faint border for the image */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for better separation */
}



/* Image Comment */
.image-comment {
    font-size: clamp(0.8em, 1vw, 0.9em); 
    color: #555; 
    margin-top: 10px; 
    text-align: center;
    font-family: gitan-latin, sans-serif;
}

.factbox {
    display: flex; 
    align-items: center; 
    gap: 1rem; 
    margin-top: 2.5rem; /* This is 40px if 1rem = 16px */
    margin-bottom: 1rem; /* This is 16px, close to your previous 15px */
    width: 100%; 
}

.numberbox {
    flex-shrink: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: clamp(40px, 10%, 60px); 
}

.circle {
    width: clamp(40px, 10vw, 60px); 
    height: clamp(40px, 10vw, 60px); 
    border-radius: 50%; 
    background-color: #CF3721; 
    color: #fff; 
    font-size: clamp(1.5rem, 2vw, 2rem);
	font-family: Active, sans-serif;
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.subtitlebox {
    flex-grow: 1; 
    display: flex; 
    align-items: center; 
}

.subtitle {
    font-size: clamp(24px, 3vw, 40px);
	font-family: 'Active', serif; 
}

.facttext {
    font-family: gitan-latin, sans-serif; 
    font-weight: 400; 
    font-style: normal; 
    font-size: clamp(16px, 2vw, 20px); 
    line-height: 1.5; 
    text-align: justify; 
    letter-spacing: 0px; 
    word-spacing: 5px; 
    color: #666666; 
    margin-top: 20px; 
}

/* Color classes */
.yellow .circle { background-color: #f5BE41; }
.yellow hr { background-color: #f5BE41; }
.yellow .subtitle { color: #f5BE41; }

.green .circle { background-color: #258039; }
.green hr { background-color: #258039; }
.green .subtitle { color: #258039; }

.blue .circle { background-color: #31a9b8; }
.blue hr { background-color: #31a9b8; }
.blue .subtitle { color: #31a9b8; }

.red .circle { background-color: #CF3721; }
.red hr { background-color: #CF3721; }
.red .subtitle { color: #CF3721; }

/* HR Bar */
hr {
    margin-top: 40px; 
    height: 10px; 
    border: none; 
    width: 100%; 
    border-radius: 5px; 
}

.bar {
    width: 100%; 
    text-align: center; 
    margin-top: 30px; 
}

.barimg {
    width: 100%; 
}

/* Publish Date */
.publishdate {
    text-align: right;
    font-size: clamp(14px, 1vw, 16px); 
    font-family: 'Palanquin', Arial, Helvetica, sans-serif;
    color: #666666;
}

/* Invisible Divider (For Clearing Floats) */
.invisibledivider {
    height: 1px; 
    clear: both; 
    display: block; 
}

/* Invisible Divider 2 (For Spacing) */
.invisibledivider2 {
    margin-top: clamp(10px, 2vw, 15px); 
    clear: both; 
    display: block; 
}


/* END OF MAIN CONTENT STYLES */

/* START OF SUBCONTENT (MOST RECENT, MOST POPULAR) STYLES */

.mostpopulartitle,
.mostrecenttitle {
    position: relative;
    text-align: center;
}

.mostpopulartitle {
    color: #258039; /* Green for Most Popular */
}

.mostrecenttitle {
    color: #f5BE41; /* Yellow for Most Recent */
    margin-top: 2rem; 
}

.sidebarimg {
    width: 100%;
    border-radius: 10px; 
    box-shadow: 5px 5px #cbcbcb;
    border: 1px solid #cbcbcb; 
}

.centred {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-family: 'Active', serif;
    font-size: clamp(18px, 5vw, 40px); /* Single dynamic font size for all screens */
} 

.mostpopular {
    width: 100%;
    height: 50px;
    font-family: 'Coustard', serif;
    background-color: #31a9b8; 
    color: white;
    font-size: clamp(18px, 2vw, 24px); /* Single dynamic font size for all screens */
    line-height: 50px;
    text-align: center;
    margin-top: 2rem;
}

a.mostpopularbox {
    position: relative;
    text-align: center;
    color: white;
    display: block;
    margin-top: 1rem; 
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

a.mostpopularbox:hover {
    color: black;
    opacity: 0.7;
}

.bottom-left {
    position: absolute;
    height: 40px;
    font-family: 'Active', serif;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 40px;
    bottom: -10px;
    left: -10px;
    font-size: clamp(24px, 2vw, 30px); 
    background-color: #CF3721;
    border-radius: 5px; /* Rounded edges */
}

.top-right {
    position: absolute;
    top: 10px;
    right: -10px;
    height: 40px;
    font-family: 'Active', serif;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 40px;
    font-size: clamp(24px, 2vw, 30px); 
    background-color: #31a9b8;
    border-radius: 5px; /* Rounded edges */
}

@media (max-width: 780px) {
    .mostrecenttitle {
        margin-top: 1rem; 
    }

    .sidebarimg {
        border-radius: 5px; 
        box-shadow: 3px 3px #cbcbcb;
    }

    .bottom-left {
        height: 30px;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 30px;
        bottom: -5px;
        left: -5px;
    }

    .top-right {
        height: 30px;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 30px;
        top: 5px;
        right: -5px;
    }
}

/* END OF SUBCONTENT (MOST RECENT, MOST POPULAR) STYLES */

/* Start of navigation at bottom of the screen (below content, above footer) */
.bottomnav {
    width: 100%;
    display: flex; /* Use flex instead of float for layout */
    justify-content: space-between; /* Spread buttons evenly */
    margin: 2rem 0; /* Top and bottom margins */
}

a.bottomnavbuttons {
    flex: 1; /* Each button takes up equal space */
    text-align: center;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-size: clamp(14px, 2vw, 20px); /* Responsive font size */
    letter-spacing: 2px;
    color: white;
    line-height: 50px; 
    text-decoration: none;
    transition: 0.3s;
    text-transform: uppercase;
    height: 50px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background-color: #A43820; /* Fallback background color */
}

a.bottomnavbuttons:hover {
    color: black;
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.5); 
}

/* Mobile-First Adjustments */
@media (max-width: 780px) {
    .bottomnav {
        flex-wrap: wrap; /* Stack buttons on smaller screens */
    }

    a.bottomnavbuttons {
        width: 100%; /* Full width for each button on mobile */
        margin-bottom: 10px; /* Add space between buttons */
        font-size: clamp(14px, 2vw, 18px); /* Slightly smaller font on mobile */
    }

    a.bottomnavbuttons:last-child {
        margin-bottom: 0; /* No extra margin on the last button */
    }
}

/* End of navigation at bottom of the screen (below content, above footer) */



/* START OF FOOTER STYLES */

.footer {
    width: 100%;
    background-color: #A43820; 
    clear: both;
}

.footernav {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #CF3721;
    height: 100px;
    padding: 0 80px;
}

@media (max-width: 1440px) {
    .footernav {
        width: 100%; 
        padding: 0 40px;
    }
}

@media (max-width: 780px) {
    .footernav {
        flex-wrap: wrap;
        height: auto;
        padding: 0 10px;
    }
}

#sultanabarbecuebox {
    flex: 1; 
    font-size: clamp(12px, 2vw, 14px);
    color: white;
    font-family: gitan-latin, sans-serif; 
    font-weight: 400; 
    text-align: left;
}

@media (max-width: 780px) {
    #sultanabarbecuebox {
        width: 100%; 
        text-align: center;
        padding: 15px 0;
    }
}

.bottombarright {
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 50%;
}

@media (max-width: 780px) {
    .bottombarright {
        width: 100%; 
        align-items: center;
        margin-top: 15px;
    }
}

.footersocialbox {
    display: flex;
    justify-content: flex-end; 
    gap: 10px; 
}

@media (max-width: 780px) {
    .footersocialbox {
        justify-content: center; 
    }
}

.bottombarnav {
    display: flex; 
    justify-content: flex-end;
    gap: 30px; 
    margin-top: 10px;
}

@media (max-width: 780px) {
    .bottombarnav {
        justify-content: center; 
        margin-top: 10px;
    }
}

a.footerbuttons {
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-size: clamp(12px, 2vw, 14px); 
    letter-spacing: 1px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.3s;
}

a.footerbuttons:hover {
    color: #000; 
}

/* END OF FOOTER STYLES */




/* ============================ */
/* START OF TOP FACT STYLES */
/* ============================ */

/* Wrapper for "This Year" and "Previous Year" tables */
.toptentable-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 4rem; /* Space between the two tables on large screens */
    width: 100%;
    margin: auto;
}

@media (max-width: 780px) {
    .toptentable-wrapper {
        flex-direction: column; /* Stack tables vertically on smaller screens */
        gap: 2rem; /* Space between the stacked tables */
    }
}

/* Individual Table */
.toptentable {
    width: 100%;
}

.toptentitle {
    background-color: #258039;
    color: white;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media (max-width: 780px) {
    .toptentitle {
        font-size: 18px;
        line-height: 18px;
    }
}

.toptentopic {
    background-color: #31a9b8;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
    color: white;
    position: relative; /* Required for pseudo-elements */
    transition: 0.3s ease-in-out;
}

@media (max-width: 780px) {
    .toptentopic {
        font-size: 16px;
        line-height: 1.2;
        min-height: 60px;
    }
}

.toptentopic a.tenfacttopiclink {
    display: block; /* Ensures the link fills the entire cell */
    width: 100%;
    height: 100%;
    padding: 10px 20px; /* Space inside the clickable area */
    color: white; 
    text-decoration: none;
    transition: 0.3s ease-in-out;
    letter-spacing: 1px;
}

@media (max-width: 780px) {
    .toptentopic a.tenfacttopiclink {
        padding: 10px;
    }
}

.toptentopic a.tenfacttopiclink:hover {
    color: black; 
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.5) !important;
}

.toptentopicno {
    background-color: #f5BE41;
    padding: 10px;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
    color: black;
    width: 60px; /* Consistent width for all instances */
}

@media (max-width: 780px) {
    .toptentopicno {
        font-size: 16px;
    }
}

/* Placeholder for when a fact is not available */
.placeholder {
    color: #ccc;
    font-style: italic;
}

/* Utility for accessible hover/active state */
a.tenfacttopiclink:hover, 
a.tenfacttopiclink:focus, 
a.tenfacttopiclink:active {
    color: black; 
}

/* ============================ */
/* END OF TOP FACT STYLES */
/* ============================ */



/* Start of Advertising styles */

.topadspace, 
.midadspace, 
.bottomadspace {
    width: 100%;
    margin: auto;
    text-align: center;
    clear: both;
}

ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}


/* End of Advertising styles */

/* ------------------------------------- */
/* Start of A to Z Page Styles */
/* ------------------------------------- */

/* General Styles for A-to-Z Titles and Topics (shared for desktop and mobile) */
.atoztitle {
    background-color: #f5BE41;
    color: black;
    width: 100%;
    padding: 5px;
    font-weight: bold;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0px;
    font-size: 1.2em;
}

.atoztopic {
    background-color: #31a9b8;
    padding: 10px;
    text-align: left;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    text-decoration: none;
    width: 100%;
    margin-bottom: 10px;
}

a.atoztopiclink {
    text-decoration: none;
    color: white;
    transition: 0.3s;
}

a.atoztopiclink:hover {
    color: black;
}

/* ------------------------------------- */
/* Desktop Layout (styles for larger screens) */
/* ------------------------------------- */
@media (min-width: 769px) {

    .atozflex-container {
        display: flex;
        align-items: stretch;
        gap: 5%;
        padding-top: 20px;
    }

    .atozholder {
        width: 55%;
    }

    .filterholder {
        width: 35%;
        position: sticky;
        top: 20px;
    }

    .filterbox {
        background-color: #31a9b8;
        padding: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        font-family: 'Oswald', Arial, Helvetica, sans-serif;
    }

    .filter-option {
        padding: 8px;
        background-color: #f0f0f0;
        margin-bottom: 5px;
        cursor: pointer;
        color: #1B1B1B;
        transition: background-color 0.3s, color 0.3s;
    }

    .filter-option.active {
        background-color: #f0f0f0;
        color: #1B1B1B;
    }

    .filter-option.inactive {
        background-color: #b3b3b3;
        color: #fff;
    }

    .filter-option.categoryselected {
        background-color: #f5BE41;
        color: #000;
    }

    .subcategory-container,
    .sub-subcategory-container {
        display: none;
        margin-left: 15px;
    }

    .subcategory-option,
    .subsubcategory-option {
        padding: 8px;
        background-color: #f0f0f0;
        margin-bottom: 5px;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
    }

    .subcategory-option.active,
    .subsubcategory-option.active {
        background-color: #f0f0f0;
        color: #000;
    }

    .subcategory-option.inactive,
    .subsubcategory-option.inactive {
        background-color: #b3b3b3;
        color: #fff;
    }

    .subcategory-option.subcategoryselected,
    .subsubcategory-option.subsubcategoryselected {
        background-color: #f5BE41;
        color: #000;
    }

    .filter-option:hover {
        background-color: #0073e6;
        color: #ffffff;
    }

    .filter-option.active:hover {
        background-color: #005bb5;
        color: #ffffff;
    }

    .filter-option.inactive:hover {
        background-color: #8c8c8c;
        color: #ffffff;
    }

}

/* ------------------------------------- */
/* Mobile-Specific Layout (styles for smaller screens) */
/* ------------------------------------- */
/* Button to open the mobile filter */
.mobile-filter-toggle { 
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    background-color: #31a9b8; 
    color: white; 
    font-size: 18px; 
    border: none; 
    border-radius: 50px; 
    padding: 15px 20px; 
    cursor: pointer; 
    z-index: 100; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.2s;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
}

.mobile-filter-toggle:hover {
    background-color: #218ea0;
    transform: scale(1.1);
}

.mobile-filter-toggle-icon { 
    font-size: 24px; 
    margin-left: 10px; 
}

/* Fullscreen dark overlay for the filter menu */
.mobile-filter-dropdown { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 999; 
    transition: opacity 0.3s ease-in-out;
}

.mobile-filter-dropdown.active {
    display: block;
    opacity: 1;
}

/* The white sliding filter menu */
.mobile-filter-menu { 
    background-color: #fff; 
    width: 80%; 
    height: 100%; 
    max-height: 90vh; 
    margin-top: 50px;
    padding: 20px; 
    overflow-y: auto; 
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
}

.mobile-filter-close { 
    font-size: 28px; 
    background: none; 
    border: none; 
    color: #555; 
    cursor: pointer; 
    float: right; 
    margin-top: -10px; 
}

.mobile-filter-close:hover {
    color: #d9534f;
}

.mobile-filter-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    color: #1b1b1b;
    margin-bottom: 20px;
}

/* Category Options in the filter */
.mobile-filter-option { 
    padding: 15px 10px; 
    font-size: 18px; 
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #eee;
    color: #1b1b1b; 
    cursor: pointer; 
    transition: background-color 0.3s, color 0.3s;
}

.mobile-filter-option:hover {
    background-color: #31a9b8;
    color: white;
}

.mobile-filter-option.active {
    background-color: #f5be41;
    color: black;
    font-weight: bold;
}

.mobile-reset-option {
    padding: 15px 0; 
    font-size: 18px; 
    font-weight: bold; 
    color: #31a9b8; 
    cursor: pointer;
}

.mobile-reset-option:hover {
    color: #217a8c;
}

@media (max-width: 768px) {
    /* Hide desktop filters on mobile */
    .filterholder { 
        display: none; 
    }
    /* Show mobile filter button on mobile */
    .mobile-filter-toggle { 
        display: block; 
    }
}

/* Ensure body doesn't scroll when mobile filter is active */
body.mobile-filter-open {
    overflow: hidden;
}

/* ------------------------------------- */
/* Loading States */
/* ------------------------------------- */
#atozholder.loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* ------------------------------------- */
/* End of A to Z Page Styles */
/* ------------------------------------- */



/* ------------------------------------- */
/* Start of Latest Topics Section Styles - also used on Search Results */
/* ------------------------------------- */

.latest-container {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vw, 20px); /* Space between each row */
}

.latest-item-row {
    display: flex;
    flex-direction: column;
    gap: 0; /* No gap between .latestbox and .latestdescription */
}

a.latestbox {
    width: 40%; /* Take up 40% of the page */
    background-color: #31a9b8;
    color: white;
    padding: 10px;
    letter-spacing: 2px;
    font-size: 20px;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    transition: 0.3s;
    position: relative;
    margin-bottom: -8px; /* Pull it down by 8px to create the overlap effect */
    z-index: 1; /* Ensure it appears on top of the description */
}

@media only screen and (max-width: 780px) {
    a.latestbox {
        width: 80%; /* On mobile, expand to 80% */
        padding: 10px;
        font-size: 18px;
    }
}

a.latestbox:hover {
    color: black;
    text-decoration: none;
    background-color: #258039;
}

.latestdescription {
    width: 100%; 
    background-color: #f5BE41;
    color: black;
    text-align: left;
    padding: 10px;
    letter-spacing: 2px;
    font-size: 20px;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    margin-left: 10px; /* Indent to achieve the offset */
    position: relative; /* Relative so it plays nicely with z-index */
    z-index: 0; /* Ensures it stays below the latestbox */
}

@media only screen and (max-width: 780px) {
    .latestdescription {
        width: 100%;
        padding: 10px;
        font-size: 16px;
    }
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a {
    padding: 8px 12px;
    margin: 0 5px;
    background-color: #ddd;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
}

.pagination a.active {
    background-color: #31a9b8;
    color: #fff;
    transition: 0.3s ease;
}

.pagination a:hover {
    color: black;
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.5);
}

/* ------------------------------------- */
/* End of Latest Topics Section Styles */
/* ------------------------------------- */


/* ------------------------------------- */
/* Start of Search Results Page Styles */
/* ------------------------------------- */

.search-box-container {
    margin-bottom: 20px;
    text-align: center;
}

.search-box-container input {
    width: 50%;
    padding: 10px;
    font-size: 16px;
}

.search-box-container button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}


/* ------------------------------------- */
/* End of Search Results Page Styles */
/* ------------------------------------- */



/* Start of Categories Page styles */

.categorybutton {
	width:33%;
	height:150px;
	background-color:aqua;
	float:left;
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-size:26px;
	line-height:150px;
	text-align:center;
	color:white;
}

@media only screen and (max-width: 780px) and (orientation:portrait) {
.categorybutton {
    width:100%;
	height:50px;
	background-color:aqua;
	float:left;
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-size:18px;
	line-height:50px;
	text-align:center;
	color:white;
}}

/* End of Categories Page styles */

/* ------------------------------------- */
/* Index Page Styles */
/* ------------------------------------- */

/* General layout for the index page */
.indexleft {
    float: left;
    width: 65%;
}

.indexright {
    float: right;
    width: 30%;
}

@media only screen and (max-width: 780px) and (orientation: portrait) {
    .indexleft, 
    .indexright {
        float: none;
        width: 100%;
    }
}


.index-section {
    margin-bottom: 20px;
}

.index-topic-table {
    width: 100%;
    border-collapse: collapse;
}

.index-topic-table tr {
    border-bottom: 1px solid #e0e0e0;
}

.index-topic-table td {
    padding: 10px 5px;
}



.show-more-container.right-align {
    text-align: right; /* Aligns the button to the right */
    margin-right: 2px;
}

.show-more-button {
    display: inline-block;
    padding: 8px 15px;
    background-color: #31a9b8;
    color: #fff;
    text-decoration: none;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    font-size: 18px;
    transition: 0.3s;
}

.show-more-button:hover {
    color: black;
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.5);
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .index-topic-table td {
        display: block;
        width: 100%;
    }
}

.toptentitle2{
    border-color: white;
    border-width: 2px 2px 0 2px;
    border-style:solid;
    background-color: #258039;
    color: white;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}