/* Custom Tailwind Configuration (from main.js and style.css) */
/*
    The body uses bg-main-beige from the custom config.
    We define the custom colors here directly as Tailwind cannot read external JS configs in the head.
    The Inter font is included via the body style, though Tailwind's config also defines it.
*/
:root {
    --primary-leaf: #d97706; /* Amber 600 */
    --secondary-brown: #92400e; /* Amber 800 */
    --main-beige: #FFF4E3; 
}

body {
    font-family: 'Inter', sans-serif;
    /* Ensure sticky positioning works by avoiding overflow:hidden on body if possible */
    overflow-x: hidden; 
}

/* Load Inter Font from Google Fonts for robustness */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');


/* Custom styles for the eye-catching article layout */
.article-content {
    /* Basic text styling */
    line-height: 1.75;
    font-size: 1.125rem; /* lg:text-xl equivalent */
}
.article-content p {
    margin-bottom: 1.5rem;
    color: #4a4a4a; /* Slightly darker gray for readability */
}

/* Link Styles in Article */
.article-content a {
    color: #d97706;
    font-weight: 700;
    text-decoration: underline;
    transition: color 0.2s;
}
.article-content a:hover {
    color: #92400e;
}

/* Highlighting for Key Statistics */
.highlight-stat {
    background-color: var(--main-beige);
    color: var(--secondary-brown);
    padding: 1rem 1.5rem;
    border-left: 5px solid var(--primary-leaf);
    font-weight: 800;
    font-size: 1.25rem;
    margin: 2rem 0;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Keyword Highlighting */
.keyword {
    font-weight: 700;
    color: var(--secondary-brown); /* Use the deep brown for contrast */
}
        
/* Table Styling matching the original index.html style.css */
.data-table-container {
    width: 100%;
    max-width: 100%;
    margin: 2rem auto;
    border-collapse: collapse; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    border-radius: 8px;
    overflow-x: auto; /* <-- It adds a scrollbar ONLY if needed */
    -webkit-overflow-scrolling: touch; /* <-- For smooth scrolling on iPhones */
    /*overflow: hidden;*/
    border: 1px solid #e0e0e0;
}
/* Force the table to fill the container */
.data-table-container table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Forces the table to stay wide, triggering the scrollbar on mobile */
}
.data-table-container th, 
.data-table-container td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0; /* Lighter border between rows */
    font-size: 1rem;
}
.data-table-container th {
    background-color: var(--main-beige);
    color: var(--secondary-brown);
    font-weight: 700;
    text-transform: uppercase;
}
.data-table-container tbody tr:last-child td {
    border-bottom: none;
}
.data-table-container a {
    color: var(--primary-leaf);
    text-decoration: underline;
}

/* Custom Element Styles from style.css */
page-header {
    color: #1f2937; /* Fallback */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-size: 2.0rem;
    font-weight: 700;
    text-align: center;
    display: block;
}