/* /templates/workshopjam/css/theme.css */
    /* Based on original workshopjam theme.css */

    /* --- Core Variables and Font Setup --- */
    :root {
        --wsj-bg: #1A1128;
        --wsj-text: #EAE6F5;
        --wsj-purple-accent: #8A2BE2; /* BlueViolet */
        --wsj-purple-accent-light: #9e4ff0; /* Lighter BlueViolet */
        --wsj-heading-font: 'Inter', sans-serif; /* Ensure 'Inter' is loaded via WAM/template params */
        --wsj-body-font: 'Inter', sans-serif;

        /* Override Bootstrap variables */
        --bs-body-bg: var(--wsj-bg);
        --bs-body-color: var(--wsj-text);
        --bs-body-font-family: var(--wsj-body-font);
        --bs-link-color: var(--wsj-purple-accent);
        --bs-link-hover-color: var(--wsj-purple-accent-light);
        --bs-border-color: rgba(234, 230, 245, 0.2); /* Your thin border color */
        --bs-border-radius: 0.3rem; /* Consistent border radius */
        --bs-primary: var(--wsj-purple-accent); /* Align BS primary with your accent */
        --bs-primary-rgb: 138, 43, 226; /* RGB for Bootstrap opacity functions */
        --bs-secondary-color: #c1b7d8; /* Adjusted secondary/muted color for better contrast */
        --bs-emphasis-color-rgb: 234, 230, 245; /* Use light text color for emphasis */
    }

    /* --- Base Layout & Typography --- */
    html {
        height: 100%;
    }

    body.site { /* Target body with class added in index.php */
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
        font-family: var(--bs-body-font-family);
    }

    main.site-main { /* Target main with class from index.php */
        flex: 1 0 auto; /* Allow main to grow */
    }

    header.site-header,
    footer.site-footer {
        flex-shrink: 0; /* Prevent header/footer from shrinking */
    }

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: var(--wsj-heading-font);
        font-weight: 700; /* Bold headings */
        color: var(--wsj-text); /* Ensure headings use main text color */
    }

    a {
        color: var(--bs-link-color);
        text-decoration: none; /* Optional: remove default underline */
        transition: color 0.2s ease-in-out;
    }

    a:hover {
        color: var(--bs-link-hover-color);
        text-decoration: underline; /* Optional: add underline on hover */
    }

    /* --- Specific Link Styles --- */
    /* Remove underline from logo link on hover */
    .site-logo:hover {
        text-decoration: none;
    }

    /* Apply thin borders to common elements */
    .card,
    .alert,
    .list-group-item,
    .modal-content,
    .accordion-item,
    .table { /* Add other elements as needed */
      border-color: var(--bs-border-color) !important; /* Ensure override */
    }

    /* --- Navbar Styles (Targets structure in index.php) --- */
    .site-header { /* The <header> element */
       background-color: rgba(16, 10, 24, 0.85); /* Dark, slightly transparent */
       backdrop-filter: blur(6px); /* Frosted glass effect */
       border-bottom: 1px solid var(--bs-border-color); /* Subtle separator */
       /* sticky-top is applied via class in index.php */
    }

    .site-logo img {
        max-height: 40px; /* Adjust as needed */
        width: auto;
    }
    .site-logo .site-title { /* Text fallback */
        font-weight: 900;
        color: var(--wsj-text);
        font-size: 1.5rem;
        text-decoration: none;
    }
    .site-logo:hover .site-title {
        color: var(--wsj-purple-accent-light);
    }


    /* Target Joomla Menu Module Links (common structure: ul.nav > li > a) */
    /* Adjust selector if your menu module output differs */
    .mod-menu .nav-link { /* Assumes menu module uses .nav-link */
        transition: color 0.2s ease-in-out;
        color: var(--wsj-text);
        position: relative;
        text-decoration: none;
        padding-bottom: 0.3rem; /* Space for underline */
        margin: 0 0.5rem; /* Spacing between items */
    }

    .mod-menu .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%; /* Start underline from center */
        background-color: var(--wsj-purple-accent);
        transition: all 0.3s ease-out;
        transform: translateX(-50%); /* Center the underline */
    }

    .mod-menu .nav-link:hover,
    .mod-menu .nav-link.active, /* Joomla adds 'active' class */
    .mod-menu li.active > .nav-link { /* Joomla often adds 'active' to li */
        color: var(--wsj-purple-accent-light); /* Highlight color on hover/active */
    }

    .mod-menu .nav-link:hover::after,
    .mod-menu .nav-link.active::after,
    .mod-menu li.active > .nav-link::after {
        width: 70%; /* Grow underline on hover/active */
    }

    /* Style the Bootstrap navbar toggler if used */
    .navbar-toggler {
         border-color: rgba(234, 230, 245, 0.3);
    }
    .navbar-toggler-icon {
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(234, 230, 245, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }


    /* --- Button Styles --- */
    .btn {
        padding: 0.75rem 1.5rem;
        font-weight: bold;
        border-radius: var(--bs-border-radius);
        transition: all 0.3s ease-in-out;
        border-width: 1px; /* Ensure border is visible */
    }

    .btn-primary,
    button.btn-primary, /* Target specific buttons */
    input[type="submit"].btn-primary {
        background-color: var(--wsj-purple-accent);
        border-color: var(--wsj-purple-accent);
        color: white;
        box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.3); /* Use RGB var */
    }

    .btn-primary:hover,
    .btn-primary:focus,
    button.btn-primary:hover,
    button.btn-primary:focus,
    input[type="submit"].btn-primary:hover,
    input[type="submit"].btn-primary:focus {
        background-color: var(--wsj-purple-accent-light);
        border-color: var(--wsj-purple-accent-light);
        color: white;
        box-shadow: 0 6px 20px rgba(158, 79, 240, 0.4); /* Enhanced glow on hover */
        transform: translateY(-2px); /* Slight lift effect */
    }

    .btn-outline-light {
        border-color: rgba(234, 230, 245, 0.5);
        color: var(--wsj-text);
    }

    .btn-outline-light:hover,
    .btn-outline-light:focus {
        background-color: var(--wsj-purple-accent); /* Change to primary on hover */
        border-color: var(--wsj-purple-accent);
        color: white;
        box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.3); /* Add glow on hover */
        transform: translateY(-2px); /* Slight lift effect */
    }

    /* --- Form Input Styles --- */
    .form-control,
    .form-select {
        background-color: rgba(var(--bs-emphasis-color-rgb), 0.05); /* Subtle light background */
        color: var(--wsj-text);
        border-color: var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
    .form-control::placeholder {
        color: rgba(var(--bs-emphasis-color-rgb), 0.5); /* Lighter placeholder text */
    }
    /* Style for select dropdown arrow */
    .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c1b7d8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    /* Focus Glow Effect for Inputs */
    .form-control:focus,
    .form-select:focus {
        color: var(--wsj-text);
        background-color: rgba(var(--bs-emphasis-color-rgb), 0.08); /* Slightly lighter on focus */
        border-color: var(--wsj-purple-accent-light); /* Use light accent for border */
        outline: 0;
        /* Apply the glow using box-shadow, mimicking BS focus ring */
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.35); /* Use primary color with adjusted alpha */
    }


    /* --- Footer Styles --- */
    .site-footer { /* Target footer element with class from index.php */
        background-color: #110a1f; /* Slightly darker than main bg */
        border-top: 1px solid var(--bs-border-color);
        padding: 1.5rem 0;
        color: var(--bs-secondary-color); /* Use the adjusted secondary color */
        font-size: 0.9rem;
    }

    .site-footer a {
        color: #d8d1e8; /* Slightly lighter than footer text */
    }

    .site-footer a:hover {
        color: var(--wsj-purple-accent-light); /* Accent color on hover */
    }

    .site-footer .copyright {
        color: var(--bs-secondary-color);
        margin-top: 1rem;
    }

    /* --- Joomla Specific Adjustments --- */

    /* System Messages */
    #system-message-container .alert {
        border-color: var(--bs-border-color);
        background-color: rgba(var(--bs-primary-rgb), 0.1); /* Use accent color slightly */
        color: var(--wsj-text);
    }
    #system-message-container .alert-heading {
        color: inherit;
    }
    #system-message-container .alert-success {
        background-color: rgba(40, 167, 69, 0.2); /* Example: Greenish */
    }
     #system-message-container .alert-danger,
     #system-message-container .alert-error { /* Joomla uses alert-error sometimes */
        background-color: rgba(220, 53, 69, 0.2); /* Example: Reddish */
    }
    #system-message-container .alert-warning {
        background-color: rgba(255, 193, 7, 0.2); /* Example: Yellowish */
    }
    #system-message-container .alert-info,
    #system-message-container .alert-message { /* Joomla uses alert-message */
        background-color: rgba(13, 202, 240, 0.2); /* Example: Bluish */
    }

    /* Style module wrappers */
    div.moduletable {
        border: 1px solid var(--bs-border-color); /* Add the thin border */
        padding: 1rem;
        margin-bottom: 1.5rem;
        border-radius: var(--bs-border-radius);
        background-color: rgba(234, 230, 245, 0.03); /* Very subtle background */
    }
    /* Updated Module Title Color */
    div.moduletable h3.module-title { /* Common module title class */
        margin-top: 0;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--bs-border-color);
        font-size: 1.2rem;
        color: var(--wsj-text); /* Changed from accent to main text color */
    }

    /* Article Info Metadata */
    .article-info {
        font-size: 0.85rem;
        color: var(--bs-secondary-color); /* Use the adjusted secondary color for better contrast */
        margin-bottom: 1rem;
    }
    .article-info span {
        margin-right: 1rem;
        display: inline-block; /* Prevents awkward wrapping */
    }
     .article-info a {
        color: var(--bs-secondary-color); /* Match link color to surrounding text */
        text-decoration: underline; /* Add underline to indicate link */
     }
     .article-info a:hover {
         color: var(--bs-link-hover-color); /* Use standard link hover */
     }

    /* --- Module Specific Styles --- */

    /* Popular Tags Module (Example class - check actual output) */
    .tag-list a,
    .tags-popular a { /* Include common Joomla tags module class */
        display: inline-block;
        background-color: rgba(var(--bs-primary-rgb), 0.2);
        /* Updated tag text color for better contrast */
        color: var(--bs-secondary-color);
        padding: 0.2rem 0.5rem;
        border-radius: var(--bs-border-radius);
        margin: 0.2rem;
        font-size: 0.8rem;
        text-decoration: none;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }

    .tag-list a:hover,
    .tags-popular a:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.4);
        color: var(--wsj-text); /* Use main text color on hover */
        text-decoration: none;
    }

    /* Latest News Module (Example class - check actual output) */
    .latestnews .list-group-item { /* Assuming it might use list-group */
        background-color: transparent;
        border: none;
        padding-left: 0;
        padding-right: 0;
    }
     .latestnews .list-group-item a {
        color: var(--bs-secondary-color);
     }
     .latestnews .list-group-item a:hover {
        color: var(--bs-link-hover-color);
     }


    /* --- Styles from original theme.css for specific sections (Commented Out - Adapt later) --- */
    /*
    .hero-section { ... }
    .features-section { ... }
    */