/*
Theme Name: FullTurf
Theme URI:
Author: Tech-Turf
Author URI: https://tech-turf.com/
Description: FullTurf is a versatile and deeply customizable WordPress theme designed for professional blogs, educational portals, and business websites.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.9
Requires PHP: 7.2
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fullturf
Tags: blog, education, news, right-sidebar, left-sidebar, three-columns, one-column, custom-background, custom-colors, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, theme-options, translation-ready
*/

:root {
    --site-width: 1200px;
    --content-width: 70%;
    --sidebar-width: 25%;
    --gap: 5px;
}

* { box-sizing: border-box; }

body { 
    margin: 0; 
    font-family: var(--font-family); 
    font-size: var(--body-size); 
    color: var(--body-color); 
    background-color: var(--site-bg-color); 
    line-height: 1.6; 
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; transition: 0.3s; }

/* Wrapper */
.site-wrapper { 
    margin: 0 auto; 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column;
}

/* Boxed Layout */
body.layout-boxed .site-wrapper { 
    max-width: var(--site-width); 
    margin: 20px auto; 
    background-color: #fff; 
    box-shadow: 0 0 20px rgba(0,0,0,0.05); 
}
body.layout-full .site-wrapper { max-width: 100%; background: #fff; }

/* ---------------------------------------------------------
   HEADER STYLES
--------------------------------------------------------- */
.site-header { 
    background-color: var(--header-bg-color); 
    padding: 20px 0 0 0;
}

.header-inner { 
    max-width: var(--site-width); 
    margin: 0 auto; 
    padding: 0 5px; 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap;
}

/* --- Layout: Default (Logo Left / Menu Right) --- */
.header-default .header-inner {
    justify-content: space-between;
}

.header-default .site-branding {
    flex: 0 0 40%;
    max-width: 40%;
    text-align: left;
    padding-right: 20px; 
}

.header-default .main-navigation {
    flex: 0 0 60%;
    max-width: 60%;
    width: 60%;
}

.header-default .main-navigation ul {
    justify-content: var(--menu-align); 
}

/* --- Layout: Centered --- */
.header-centered .header-inner {
    flex-direction: column;
    text-align: center;
}

.header-centered .site-branding {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
}

.header-centered .main-navigation {
    width: 100%;
}

.header-centered .main-navigation ul {
    justify-content: var(--menu-align); 
}

/* Alignment Classes */
.header-centered.header-align-left .site-branding   { text-align: left; }
.header-centered.header-align-center .site-branding { text-align: center; }
.header-centered.header-align-right .site-branding  { text-align: right; }

/* Site Identity Styling */
.site-title { 
    font-size: var(--site-title-size); 
    color: var(--site-title-color); 
    margin: 0; 
    line-height: 1.15; 
    padding: 60px 20px 10px 20px;
    text-decoration: none;
}

.site-title a:hover {
    text-decoration: none; /* Ensures no underline on hover */
    color: var(--site-title-color); /* Keeps the color exactly the same */
    opacity: 0.8; /* Optional: Adds a subtle fade instead of a color change */
}

.site-description { 
    font-size: var(--site-desc-size); 
    color: var(--site-desc-color); 
    margin: 5px 0 40px 0; 
} 

/* ---------------------------------------------------------
   CONTENT AREA
--------------------------------------------------------- */
.site-content { 
    display: flex; 
    flex-wrap: wrap; 
    max-width: var(--site-width); 
    margin: 5px auto;
    padding: 0 5px; 
    gap: var(--gap); 
    flex: 1; 
}

.content-area { 
    flex-grow: 1; 
    min-width: 0;
    background-color: var(--content-bg-color); 
    padding: 20px; 
    border-radius: 4px;
} 

.widget-area { flex-shrink: 0; }

/* Layout Logic */
.layout-right-sidebar .content-area { width: var(--content-width); }
.layout-right-sidebar .sidebar-right { width: var(--sidebar-width); display: block; }
.layout-right-sidebar .sidebar-left { display: none; }

.layout-left-sidebar .content-area { width: var(--content-width); order: 2; }
.layout-left-sidebar .sidebar-left { width: var(--sidebar-width); order: 1; display: block; }
.layout-left-sidebar .sidebar-right { display: none; }

.layout-double-sidebar .content-area { width: calc(100% - (var(--sidebar-width) * 2) - (var(--gap) * 2)); order: 2; }
.layout-double-sidebar .sidebar-left { width: var(--sidebar-width); order: 1; display: block; }
.layout-double-sidebar .sidebar-right { width: var(--sidebar-width); order: 3; display: block; }

.layout-no-sidebar .content-area { width: 100%; }
.layout-no-sidebar .sidebar-left, .layout-no-sidebar .sidebar-right { display: none; }

/* Sidebar Style */
.site-content .widget-area {
    background-color: var(--sidebar-bg-color); 
    padding: 20px;
    border-radius: 4px;
    color: var(--sidebar-text-color);
}
/* Boosted specificity to avoid need for !important */
.site-content .widget-area a, 
.site-content .widget-area li, 
.site-content .widget-area p, 
.site-content .widget-area span { 
    color: var(--sidebar-text-color); 
}

/* Sidebar Hover */
.site-content .widget-area a { transition: color 0.2s ease; }
.site-content .widget-area a:hover {
    color: var(--sidebar-link-hover);
    text-decoration: none;
}

.widget { margin-bottom: 10px; font-size: var(--sidebar-text-size); }
.widget-title { font-size: 18px; border-bottom: 2px solid rgba(0,0,0,0.1); padding-bottom: 10px; margin-bottom: 15px; color: var(--h4-color); }
.widget ul { list-style: none; padding: 0; }
.widget li { border-bottom: 1px solid rgba(0,0,0,0.1); padding: 8px 0; }

/* Typography */
h1 { font-size: var(--h1-size); color: var(--h1-color); line-height: 1.15; }
h2 { font-size: var(--h2-size); color: var(--h2-color); line-height: 1.15; }
h3 { font-size: var(--h3-size); color: var(--h3-color); line-height: 1.15; }
h4 { font-size: var(--h4-size); color: var(--h4-color); line-height: 1.15; }
h5 { font-size: var(--h5-size); color: var(--h5-color); line-height: 1.15; }
h6 { font-size: var(--h6-size); color: var(--h6-color); line-height: 1.15; }

/* Footer */
/* Footer Background & Padding */
.site-footer-widgets { 
    background: var(--footer-bg-color); 
    padding: 60px 0 40px 0; 
}

/* FIX: We use ".site-footer-widgets .footer-widgets-inner" 
   This "Double Class" selector is very strong. 
   It forces the color to apply WITHOUT needing !important.
*/
.site-footer-widgets .footer-widgets-inner,
.site-footer-widgets .footer-widgets-inner a, 
.site-footer-widgets .footer-widgets-inner li, 
.site-footer-widgets .footer-widgets-inner p, 
.site-footer-widgets .footer-widgets-inner span,
.site-footer-widgets .footer-widgets-inner h1,
.site-footer-widgets .footer-widgets-inner h2,
.site-footer-widgets .footer-widgets-inner h3,
.site-footer-widgets .footer-widgets-inner h4,
.site-footer-widgets .footer-widgets-inner h5,
.site-footer-widgets .footer-widgets-inner h6 { 
    color: var(--footer-text-color); 
}

/* Footer Hover */
.site-footer-widgets .footer-widgets-inner a { 
    transition: color 0.2s ease; 
}

.site-footer-widgets .footer-widgets-inner a:hover {
    color: var(--footer-link-hover);
    text-decoration: none;
}

/* Footer Padding */
.footer-widgets-inner { 
    max-width: var(--site-width); 
    margin: 0 auto; 
    padding: 0 40px; 
    display: grid; 
    grid-template-columns: repeat(var(--footer-cols, 4), 1fr); 
    gap: 30px; 
}

/* Footer Credit Widget Area */

.site-credit-bar { 
    background: var(--footer-credit-bg); 
    color: var(--footer-credit-color); 
    padding: 20px 0; 
    text-align: center; 
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;  /* <--- Add this line. Adjust "13px" to your preferred size. */
}

.footer-credit-content {
    margin-bottom: 10px;
    display: block;
}
.footer-credit-content .widget {
    margin-bottom: 0;
}

/* Article Link Styles */
.entry-content a, 
.entry-excerpt a,
.post-tags a {
    color: var(--link-color);
    text-decoration: var(--link-decoration);
    transition: color 0.2s ease;
}

.entry-content a:hover, 
.entry-excerpt a:hover,
.post-tags a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.entry-content .button, 
.entry-content .btn, 
.entry-content input[type="submit"] {
    text-decoration: none;
    color: #fff; 
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .site-content { flex-direction: column; }
    
    /* FIX: Force Content to appear first (Order 1) */
    .content-area { 
        width: 100% !important; 
        order: 1 !important; 
    }
    
    /* FIX: Force Sidebars to appear after content (Order 2) */
    .sidebar-left, .sidebar-right { 
        width: 100% !important; 
        order: 2 !important; 
    }

    .footer-widgets-inner { grid-template-columns: 1fr; padding: 0 20px; }
    
    .header-inner, .header-default .header-inner { flex-direction: column; text-align: center; gap: 15px; }
    .site-branding, .header-default .site-branding, 
    .main-navigation, .header-default .main-navigation { 
        flex: 0 0 100%; 
        max-width: 100%; 
        width: 100%; 
        text-align: center;
        padding-right: 0;
    }
    .main-navigation ul, .header-default .main-navigation ul { justify-content: center; }
}

/* ==========================================================================
   WORDPRESS STANDARD CLASSES
   ========================================================================== */

/* Alignments */
.alignleft { display: inline; float: left; margin-right: 1.5em; }
.alignright { display: inline; float: right; margin-left: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Captions */
.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img { display: block; margin: 0 auto; }
.wp-caption-text { text-align: center; font-size: 0.9em; margin-top: 5px; color: #666; }
.gallery-caption { font-size: 0.8em; color: #666; }

/* Sticky Post */
.sticky { display: block; }
.bypostauthor { display: block; }

/* ==========================================================================
   NEW: Styles Migrated from PHP files to Clean Up Theme
   ========================================================================== */

/* From index.php and archive.php (Blog Loops) */
.blog-loop-wrapper {
    width: 100%;
    box-sizing: border-box;
}
.blog-layout-list .post-article {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.blog-layout-list .post-thumb {
    margin-bottom: 15px;
}
.blog-layout-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0; 
}
.blog-layout-grid .post-article {
    width: 50%; 
    padding: 15px;
    margin-bottom: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
.blog-layout-grid .entry-title {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.blog-layout-grid .entry-excerpt {
    margin-bottom: 15px;
}
.read-more-link {
    font-weight: bold;
    margin-top: auto; 
    display: inline-block;
    text-decoration: none;
}
.post-thumb img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
@media (max-width: 768px) {
    .blog-layout-grid .post-article {
        width: 100%;
    }
}
.pagination {
    margin-top: 40px;
    width: 100%;
    text-align: center;
    clear: both;
}

/* Archive Header Specifics */
.archive-header {
    margin-bottom: 30px; 
    border-bottom: 2px solid #eee; 
    padding-bottom: 10px;
}

/* From single.php (Single Post) */
.single-post-meta {
    color: #888;
    margin-bottom: 15px;
    font-size: 0.9em;
}
.single-post-thumb {
    margin-bottom: 25px;
}
.single-post-thumb img {
    width: 100%;
    height: auto;
    display: block;
}
.entry-content {
    line-height: 1.6;
    margin-bottom: 30px;
}
.page-links {
    margin-top: 20px;
    font-weight: bold;
}
.post-tags {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
}

/* From 404.php */
.error-404-content {
    justify-content: center; 
    text-align: center;
}
.error-404-title {
    font-size: 80px; 
    margin-bottom: 0;
}

/* From comments.php */
.comments-area-styled {
    margin-top: 40px; 
    border-top: 1px solid #eee; 
    padding-top: 20px;
}
.comment-list-styled {
    list-style: none; 
    padding: 0;
}

/* From header.php */
.custom-header-media {
    margin-bottom: 20px;
}
.custom-header-img {
    display: block; 
    margin: 0 auto; 
    max-width: 100%; 
    height: auto;
}

/* Utility (for page.php) */
.mb-4 {
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

/* 1. GLOBAL RESET */
.main-navigation ul,
.main-navigation ul li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* 2. BASE CONTAINER */
.main-navigation {
    display: block;
    position: relative;
    z-index: 1000;
    background-color: var(--menu-bg); 
}

/* 3. LINKS */
.main-navigation a {
    display: block;
    text-decoration: none;
    transition: 0.2s all ease;
    color: var(--menu-color);
    font-size: var(--menu-size);
    padding: 0 20px;
    line-height: 60px;
}

/* Hover Effect */
.main-navigation li:hover > a,
.main-navigation li.current-menu-item > a {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--menu-color);
}

/* ==========================================================================
   DESKTOP LAYOUT 
   Screens > 768px
   ========================================================================== */
@media (min-width: 769px) {

    /* 1. FLEXBOX LAYOUT */
    .main-navigation > div > ul,
    .main-navigation > ul {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
    }

    /* Customizer Alignment Hooks */
    .nav-aligned-center .main-navigation > ul,
    .nav-aligned-center .main-navigation > div > ul { justify-content: center; }
    .nav-aligned-right .main-navigation > ul,
    .nav-aligned-right .main-navigation > div > ul { justify-content: flex-end; }

    /* Parent Items */
    .main-navigation li {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* --- 2. FIRST DROPDOWN (Level 2) --- */
    .main-navigation ul ul {
        display: block;
        position: absolute;
        overflow: visible !important; 
        
        top: 100%; 
        left: 50%; 
        margin-left: -110px; 
        width: 220px;
        
        transform: none !important; 
        
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
        
        background-color: var(--menu-bg);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        z-index: 99999;
        flex-direction: column; 
        align-items: flex-start;
    }

    /* Bridge 1 */
    .main-navigation ul ul::before {
        content: "";
        display: block;
        position: absolute;
        top: -20px; 
        left: 0;
        width: 100%;
        height: 20px; 
        background: transparent;
        z-index: 10;
    }

    /* Show on Hover */
    .main-navigation li:hover > ul,
    .main-navigation li:focus-within > ul {
        opacity: 1;
        visibility: visible;
    }

    /* --- 3. LEVEL 3 & 4 (Pop to the RIGHT) --- */
    .main-navigation ul ul ul {
        top: 0;
        left: 100%; 
        margin-left: -5px; 
        
        opacity: 0;
        visibility: hidden;
    }

    /* Bridge 2 */
    .main-navigation ul ul ul::before {
        content: "";
        display: block;
        position: absolute;
        top: -10%; 
        height: 120%;
        left: -80px; 
        width: 80px;
        background: transparent; 
        z-index: 10;
    }

    /* Show Level 3 & 4 */
    .main-navigation ul ul li:hover > ul {
        top: 0;
        left: 100%;
        opacity: 1;
        visibility: visible;
    }

    /* --- 4. LEVEL 5+ (Drops BELOW Parent) --- */
    .main-navigation ul ul ul ul ul {
        top: 100%; 
        left: 0; 
        margin-left: 0; 
        margin-top: -5px; 
        
        opacity: 0;
        visibility: hidden;
    }

    /* Bridge 3 */
    .main-navigation ul ul ul ul ul::before {
        content: "";
        display: block;
        position: absolute;
        top: -20px;
        left: 0;
        width: 100%;
        height: 20px;
        background: transparent;
        z-index: 10;
    }

    /* Show Level 5+ Below Parent */
    .main-navigation ul ul ul ul li:hover > ul {
        top: 100%;
        left: 0;
        opacity: 1;
        visibility: visible;
    }

    /* Dropdown Items Style */
    .main-navigation ul ul li {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        justify-content: flex-start;
    }
    
    .main-navigation ul ul a {
        padding: 12px 20px;
        line-height: 1.4;
        font-size: 0.95em; 
        text-align: left;
    }

    /* Hide Mobile Elements */
    .menu-toggle, .dropdown-toggle { display: none !important; }
}


/* ==========================================================================
   MOBILE LAYOUT
   Screens <= 768px
   ========================================================================== */
@media (max-width: 768px) {
    
  /* Hamburger Button */
    .main-navigation .menu-toggle {
        display: flex;
        align-items: center;    
        justify-content: center; 
        font-size: 16px;
        gap: 10px;               

        width: 100%;
        background: transparent;
        border: none;
        color: var(--menu-color);
        font-weight: bold;
        cursor: pointer;
        padding: 15px 0; 
        line-height: normal; 
    }

    /* Hide Main Menu Initially */
    .main-navigation ul {
        display: none; 
        flex-direction: column;
        width: 100%;
    }

    /* Show Main Menu When Toggled */
    .main-navigation.toggled ul {
        display: block;
    }

    .main-navigation li {
        display: block;
        width: 100%;
        position: relative; 
        border-top: 2px solid rgba(255,255,255,0.05);
    }

    .main-navigation a {
        line-height: 50px;
    }

    /* --- EXPAND ARROW --- */
    .dropdown-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
        color: var(--menu-color);
        background-color: rgba(255,255,255,0.05);
        z-index: 50;
        font-weight: bold;
        font-size: 1.5em;
    }

    /* --- SUBMENUS --- */
    .main-navigation ul ul {
        display: none !important; 
        padding-left: 0; 
        margin-left: 0;
        background-color: rgba(0,0,0,0.05); 
        width: 100%;
        box-shadow: none;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* Open State */
    .main-navigation ul ul.toggled-on {
        display: block !important;
    }
}

/* ==========================================================================
   FINAL FIX: OVERRIDE HARD-CODED WIDTHS
   ========================================================================== */

.entry-content .wp-caption,
.entry-content figure,
.entry-content img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.entry-content .alignleft,
.entry-content .alignright,
.entry-content .aligncenter {
    max-width: 100%;
}

/* Mobile Reset */
@media (max-width: 768px) {
    .entry-content .alignleft,
    .entry-content .alignright {
        float: none !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px !important;
    }
    
    .entry-content img {
        display: block;
        margin: 0 auto 20px auto;
    }
}

/* ==========================================================================
   FINAL MOBILE OVERFLOW + VISIBLE SCROLLBARS + SPACING
   ========================================================================== */

/* PRE TAGS */
pre {
    white-space: pre !important;    
    overflow-x: scroll !important;
    max-width: 100% !important;
    display: block !important;
    padding-bottom: 25px !important;
    margin-bottom: 30px !important;
}

/* CODE TAGS */
code, kbd, tt, var, samp {
    white-space: pre-wrap !important; 
    overflow-wrap: break-word !important; 
    word-wrap: break-word !important;
    max-width: 100% !important;
}

pre code {
    white-space: inherit !important;
    overflow-wrap: normal !important;
    padding-bottom: 0 !important;
}

/* TABLES */
table {
    display: block !important;
    overflow-x: scroll !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    margin-bottom: 30px !important;
}

/* SCROLLBARS (Mobile) */
pre::-webkit-scrollbar,
table::-webkit-scrollbar {
    height: 7px;
    display: block;
    background-color: #f5f5f5; 
}

pre::-webkit-scrollbar-thumb,
table::-webkit-scrollbar-thumb {
    background-color: #bbbbbb; 
    border-radius: 5px; 
    border: 2px solid #f5f5f5;
}

/* MOBILE CONTAINER SAFETY */
.site-content, 
.widget-area, 
.entry-content,
.site-main {
    min-width: 0 !important; 
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

/* ==========================================================================
   SEARCH FORM STYLES
   ========================================================================== */
.search-form .search-input-group {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    max-width: 100%;
}

.search-form .search-field {
    border: none;
    padding: 10px 15px;
    flex-grow: 1;
    font-size: 16px;
    color: var(--body-color);
    background: #fff;
    width: 100%; 
}

.search-form .search-field:focus {
    outline: none;
    background: #fafafa;
}

.search-form .search-submit {
    background-color: var(--link-color);
    color: #fff;
    border: none;
    padding: 0 15px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-form .search-submit:hover {
    background-color: var(--link-hover-color);
}

.search-form .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Fix for Menu Toggle Icon */
.menu-toggle .dashicons {
    font-family: "dashicons";
    font-size: var(--menu-size);       /* Ensures icon matches text size */
    vertical-align: middle; /* Aligns icon perfectly with the "Menu" text */
    margin-right: 5px;      /* Adds a small gap between icon and text */
}

/* SVG Icon Styling */
.fullturf-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px; /* Spacing for the menu text */
}
.search-submit .fullturf-icon {
    margin-right: 0;
    fill: #ffffff; /* Make search icon white */
}

/* ==========================================================================
   TABLE STYLING
   ========================================================================== */

/* Add spacing and borders to all table cells */
table th, 
table td {
    padding: 8px 10px;      /* 8px top/bottom, 10px left/right */
    border: 1px solid #ddd; /* Clean grey border */
    text-align: left;       /* Keeps text readable */
    vertical-align: middle; /* Centers text vertically if rows are tall */
}

/* Make the Header Row stand out slightly */
table th {
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.05); /* Very light grey background */
}

/* Optional: Zebra striping for better readability on long tables */
table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}