/**
 * Fossil Trail - Joomla Elements Stylesheet
 * Comprehensive styling for all common Joomla components
 */

/* ==========================================================================
   Design Tokens / CSS Variables
   ========================================================================== */

:root {
    /* Colors */
    --j-primary: #333333;
    --j-primary-hover: #1a1a1a;
    --j-success: #28a745;
    --j-success-hover: #218838;
    --j-danger: #dc3545;
    --j-danger-hover: #c82333;
    --j-warning: #ffc107;
    --j-warning-hover: #e0a800;
    --j-info: #17a2b8;
    --j-info-hover: #138496;
    --j-light: #f8f9fa;
    --j-dark: #1a1a1a;
    
    /* Text */
    --j-text: #333333;
    --j-text-muted: #666666;
    --j-text-light: #ffffff;
    
    /* Backgrounds */
    --j-bg-light: #ffffff;
    --j-bg-dark: #2d2d2d;
    --j-bg-muted: #f5f5f5;
    
    /* Borders */
    --j-border: #dee2e6;
    --j-border-dark: #495057;
    --j-border-radius: 4px;
    --j-border-radius-lg: 8px;
    
    /* Spacing */
    --j-spacing-xs: 0.25rem;
    --j-spacing-sm: 0.5rem;
    --j-spacing-md: 1rem;
    --j-spacing-lg: 1.5rem;
    --j-spacing-xl: 2rem;
    --j-spacing-xxl: 3rem;
    
    /* Transitions */
    --j-transition: 0.2s ease;
    
    /* Shadows */
    --j-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --j-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Content Components
   ========================================================================== */

.com-content {
    padding: var(--j-spacing-lg) 0;
}

.item-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--j-spacing-xl);
}

.blog {
    padding: var(--j-spacing-lg) 0;
}

.blog .items-leading {
    margin-bottom: var(--j-spacing-xl);
}

.blog .items-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--j-spacing-lg);
    margin-bottom: var(--j-spacing-lg);
}

.blog .item {
    flex: 1 1 300px;
    background: var(--j-bg-light);
    border-radius: var(--j-border-radius);
    padding: var(--j-spacing-lg);
    box-shadow: var(--j-shadow);
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    padding: var(--j-spacing-sm) 0;
    border-bottom: 1px solid var(--j-border);
}

.category-list li:last-child {
    border-bottom: none;
}

.category-list a {
    color: var(--j-primary);
    text-decoration: none;
    transition: color var(--j-transition);
}

.category-list a:hover {
    color: var(--j-primary-hover);
}

/* ==========================================================================
   Article Elements
   ========================================================================== */

.article-header {
    margin-bottom: var(--j-spacing-lg);
}

.article-header h1,
.article-header h2 {
    margin: 0 0 var(--j-spacing-sm);
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    color: var(--j-text);
}

.article-header h1 {
    font-size: 2.25rem;
}

.article-header h2 {
    font-size: 1.75rem;
}

.article-header h2 a {
    color: inherit;
    text-decoration: none;
    transition: color var(--j-transition);
}

.article-header h2 a:hover {
    color: var(--j-primary);
}

.article-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--j-spacing-md);
    font-size: 0.875rem;
    color: var(--j-text-muted);
    margin-bottom: var(--j-spacing-md);
}

.article-info dd {
    margin: 0;
}

.article-info .createdby,
.article-info .category-name,
.article-info .create,
.article-info .modified,
.article-info .hits {
    display: inline-flex;
    align-items: center;
    gap: var(--j-spacing-xs);
}

.article-info a {
    color: var(--j-primary);
    text-decoration: none;
}

.article-info a:hover {
    text-decoration: underline;
}

.article-body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--j-text);
}

.article-body p {
    margin-bottom: var(--j-spacing-md);
}

.article-body h2,
.article-body h3,
.article-body h4 {
    margin-top: var(--j-spacing-xl);
    margin-bottom: var(--j-spacing-md);
    font-weight: 600;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--j-border-radius);
}

.article-body a {
    color: var(--j-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--j-transition);
}

.article-body a:hover {
    border-bottom-color: var(--j-primary);
}

.article-aside {
    background: var(--j-bg-muted);
    padding: var(--j-spacing-lg);
    border-radius: var(--j-border-radius);
    margin: var(--j-spacing-lg) 0;
}

.readmore {
    margin-top: var(--j-spacing-md);
}

.readmore a {
    display: inline-block;
    color: var(--j-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--j-transition);
}

.readmore a:hover {
    color: var(--j-primary-hover);
}

.readmore a::after {
    content: " →";
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-block;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: var(--j-spacing-sm) var(--j-spacing-lg);
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--j-border-radius);
    transition: color var(--j-transition), background-color var(--j-transition), border-color var(--j-transition), box-shadow var(--j-transition);
}

.btn:hover {
    text-decoration: none;
}

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.25);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    pointer-events: none;
}

.btn-primary {
    color: var(--j-text-light);
    background-color: var(--j-primary);
    border-color: var(--j-primary);
}

.btn-primary:hover {
    color: var(--j-text-light);
    background-color: var(--j-primary-hover);
    border-color: var(--j-primary-hover);
}

.btn-secondary {
    color: var(--j-text-light);
    background-color: var(--j-text-muted);
    border-color: var(--j-text-muted);
}

.btn-secondary:hover {
    color: var(--j-text-light);
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-success {
    color: var(--j-text-light);
    background-color: var(--j-success);
    border-color: var(--j-success);
}

.btn-success:hover {
    color: var(--j-text-light);
    background-color: var(--j-success-hover);
    border-color: var(--j-success-hover);
}

.btn-danger {
    color: var(--j-text-light);
    background-color: var(--j-danger);
    border-color: var(--j-danger);
}

.btn-danger:hover {
    color: var(--j-text-light);
    background-color: var(--j-danger-hover);
    border-color: var(--j-danger-hover);
}

.btn-warning {
    color: var(--j-dark);
    background-color: var(--j-warning);
    border-color: var(--j-warning);
}

.btn-warning:hover {
    color: var(--j-dark);
    background-color: var(--j-warning-hover);
    border-color: var(--j-warning-hover);
}

.btn-info {
    color: var(--j-text-light);
    background-color: var(--j-info);
    border-color: var(--j-info);
}

.btn-info:hover {
    color: var(--j-text-light);
    background-color: var(--j-info-hover);
    border-color: var(--j-info-hover);
}

.btn-light {
    color: var(--j-dark);
    background-color: var(--j-light);
    border-color: var(--j-light);
}

.btn-light:hover {
    color: var(--j-dark);
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.btn-dark {
    color: var(--j-text-light);
    background-color: var(--j-dark);
    border-color: var(--j-dark);
}

.btn-dark:hover {
    color: var(--j-text-light);
    background-color: #2d2d2d;
    border-color: #2d2d2d;
}

.btn-outline-primary {
    color: var(--j-primary);
    border-color: var(--j-primary);
}

.btn-outline-primary:hover {
    color: var(--j-text-light);
    background-color: var(--j-primary);
}

.btn-outline-secondary {
    color: var(--j-text-muted);
    border-color: var(--j-text-muted);
}

.btn-outline-secondary:hover {
    color: var(--j-text-light);
    background-color: var(--j-text-muted);
}

.btn-outline-success {
    color: var(--j-success);
    border-color: var(--j-success);
}

.btn-outline-success:hover {
    color: var(--j-text-light);
    background-color: var(--j-success);
}

.btn-outline-danger {
    color: var(--j-danger);
    border-color: var(--j-danger);
}

.btn-outline-danger:hover {
    color: var(--j-text-light);
    background-color: var(--j-danger);
}

.btn-lg {
    padding: var(--j-spacing-md) var(--j-spacing-xl);
    font-size: 1.125rem;
    border-radius: var(--j-border-radius-lg);
}

.btn-sm {
    padding: var(--j-spacing-xs) var(--j-spacing-sm);
    font-size: 0.875rem;
}

.btn-group {
    display: inline-flex;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--j-border-radius);
    border-bottom-left-radius: var(--j-border-radius);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--j-border-radius);
    border-bottom-right-radius: var(--j-border-radius);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control {
    display: block;
    width: 100%;
    padding: var(--j-spacing-sm) var(--j-spacing-md);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--j-text);
    background-color: var(--j-bg-light);
    background-clip: padding-box;
    border: 1px solid var(--j-border);
    border-radius: var(--j-border-radius);
    transition: border-color var(--j-transition), box-shadow var(--j-transition);
}

.form-control:focus {
    color: var(--j-text);
    background-color: var(--j-bg-light);
    border-color: var(--j-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.25);
}

.form-control::placeholder {
    color: var(--j-text-muted);
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--j-bg-muted);
    opacity: 1;
}

.form-control-lg {
    padding: var(--j-spacing-md) var(--j-spacing-lg);
    font-size: 1.125rem;
    border-radius: var(--j-border-radius-lg);
}

.form-control-sm {
    padding: var(--j-spacing-xs) var(--j-spacing-sm);
    font-size: 0.875rem;
}

.form-select {
    display: block;
    width: 100%;
    padding: var(--j-spacing-sm) var(--j-spacing-xl) var(--j-spacing-sm) var(--j-spacing-md);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--j-text);
    background-color: var(--j-bg-light);
    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='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--j-spacing-md) center;
    background-size: 16px 12px;
    border: 1px solid var(--j-border);
    border-radius: var(--j-border-radius);
    appearance: none;
    transition: border-color var(--j-transition), box-shadow var(--j-transition);
}

.form-select:focus {
    border-color: var(--j-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.15);
}

.form-select:disabled {
    background-color: var(--j-bg-muted);
    opacity: 1;
}
/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    list-style: none;
    gap: var(--j-spacing-xs);
    margin: var(--j-spacing-xl) 0;
    justify-content: center;
}

.page-item {
    display: inline-block;
}

.page-link {
    display: block;
    padding: var(--j-spacing-sm) var(--j-spacing-md);
    color: var(--j-primary);
    text-decoration: none;
    background-color: var(--j-bg-light);
    border: 1px solid var(--j-border);
    border-radius: var(--j-border-radius);
    transition: color var(--j-transition), background-color var(--j-transition), border-color var(--j-transition);
}

.page-link:hover {
    color: var(--j-primary-hover);
    background-color: var(--j-bg-muted);
    border-color: var(--j-border);
}

.page-link:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.25);
}

.page-item.active .page-link {
    color: var(--j-text-light);
    background-color: var(--j-primary);
    border-color: var(--j-primary);
}

.page-item.disabled .page-link {
    color: var(--j-text-muted);
    pointer-events: none;
    background-color: var(--j-bg-light);
    border-color: var(--j-border);
}

.pagination-counter {
    text-align: center;
    color: var(--j-text-muted);
    font-size: 0.875rem;
    margin-top: var(--j-spacing-sm);
}

/* ==========================================================================
   Alerts & Messages
   ========================================================================== */

.alert {
    position: relative;
    padding: var(--j-spacing-md) var(--j-spacing-lg);
    margin-bottom: var(--j-spacing-md);
    border: 1px solid transparent;
    border-radius: var(--j-border-radius);
}

.alert-heading {
    color: inherit;
    font-weight: 600;
}

.alert-link {
    font-weight: 600;
}

.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: var(--j-spacing-md) var(--j-spacing-lg);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.25rem;
    opacity: 0.5;
}

.alert-dismissible .btn-close:hover {
    opacity: 1;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-success .alert-link {
    color: #0b2e13;
}

.alert-danger,
.alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-danger .alert-link,
.alert-error .alert-link {
    color: #491217;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-warning .alert-link {
    color: #533f03;
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.alert-info .alert-link {
    color: #062c33;
}

.alert-light {
    color: #636464;
    background-color: #fefefe;
    border-color: #fdfdfe;
}

.alert-dark {
    color: #141619;
    background-color: #d3d3d4;
    border-color: #bcbebf;
}

#system-message-container {
    margin: var(--j-spacing-lg) 0;
}

#system-message-container .alert {
    margin-bottom: var(--j-spacing-sm);
}

joomla-alert {
    display: block;
    margin-bottom: var(--j-spacing-md);
}

/* ==========================================================================
   User Component
   ========================================================================== */

/* Container - max-width and centering (targets actual DOM classes) */
.com-users,
.com-users-login,
.com-users-registration,
.com-users-profile,
.com-users-reset,
.com-users-remind {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--j-spacing-xl);
}

/* Card appearance for user forms */
.com-users-login,
.com-users-registration,
.com-users-profile,
.com-users-reset,
.com-users-remind {
    background: var(--j-bg-light);
    border-radius: var(--j-border-radius-lg);
}

/* Headings */
.com-users h1,
.com-users h2,
.com-users-login h1,
.com-users-login h2 {
    margin-bottom: var(--j-spacing-lg);
    text-align: center;
}

/* Fieldset & well - remove default browser border */
.com-users-login fieldset,
.com-users-login .well {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.com-users-login .well {
    background: none;
    box-shadow: none;
}

/* Form layout - control groups */
.com-users-login .control-group,
.com-users .control-group {
    margin-bottom: var(--j-spacing-lg);
}

.com-users-login .control-label label {
    display: block;
    margin-bottom: var(--j-spacing-xs);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--j-text);
}

.com-users-login .control-label label .star {
    color: var(--j-danger);
}

.com-users-login .controls {
    width: 100%;
}

/* Input fields */
.com-users-login .form-control {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--j-border);
    border-radius: var(--j-border-radius);
    transition: border-color var(--j-transition), box-shadow var(--j-transition);
}

.com-users-login .form-control:focus {
    border-color: #555;
    box-shadow: 0 0 0 3px rgba(85, 85, 85, 0.15);
    outline: none;
}

/* Password input group - flex layout */
.com-users-login .input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--j-border);
    border-radius: var(--j-border-radius);
    overflow: hidden;
    background: var(--j-bg-light);
    transition: border-color var(--j-transition), box-shadow var(--j-transition);
}

.com-users-login .input-group:focus-within {
    border-color: #555;
    box-shadow: 0 0 0 3px rgba(85, 85, 85, 0.15);
}

.com-users-login .input-group .form-control {
    flex: 1;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.com-users-login .input-group .form-control:focus {
    box-shadow: none;
}

/* Show Password toggle button */
.com-users-login .input-password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.875rem;
    background: #f0f0f0;
    color: #555;
    border: none;
    border-left: 1px solid var(--j-border);
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--j-transition), color var(--j-transition);
    min-width: 44px;
}

.com-users-login .input-password-toggle:hover {
    background: #e0e0e0;
    color: #333;
}

/* Eye icon - SVG via CSS since no icon font is loaded (global) */
.icon-eye {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Eye-slash icon for when password is visible */
.icon-eye-slash {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Remember me checkbox */
.com-users-login .com-users-login__remember {
    margin-bottom: var(--j-spacing-lg);
}

.com-users-login .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.com-users-login .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #555;
    cursor: pointer;
}

.com-users-login .form-check-label {
    font-size: 0.9rem;
    color: #666;
    cursor: pointer;
}

/* Submit button - true gray with white text for contrast */
.com-users-login .btn-primary {
    display: block;
    width: 100%;
    padding: 0.875rem var(--j-spacing-lg);
    background-color: #555;
    border-color: #555;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--j-border-radius);
    cursor: pointer;
    transition: background-color var(--j-transition), transform 0.15s ease;
}

.com-users-login .btn-primary:hover {
    background-color: #444;
    border-color: #444;
    color: #fff;
    transform: translateY(-1px);
}

.com-users-login .btn-primary:active {
    transform: translateY(0);
}

/* Options links (Forgot password / username) */
.com-users-login__options.list-group {
    margin-top: var(--j-spacing-lg);
    padding-top: var(--j-spacing-md);
    border-top: 1px solid var(--j-border);
    display: flex;
    flex-direction: column;
    gap: var(--j-spacing-sm);
}

.com-users-login__options .list-group-item {
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    background: none;
    border: none;
    padding: 0.25rem 0;
    transition: color var(--j-transition);
}

.com-users-login__options .list-group-item:hover {
    color: #333;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .com-users-login,
    .com-users-registration,
    .com-users-profile,
    .com-users-reset,
    .com-users-remind {
        padding: var(--j-spacing-lg);
        margin: 0 var(--j-spacing-md);
    }
}

/* ==========================================================================
   Contact Component
   ========================================================================== */

.com-contact {
    padding: var(--j-spacing-xl);
}

.com-contact .page-header {
    margin-bottom: var(--j-spacing-xl);
}

.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--j-spacing-xl);
}

@media (max-width: 768px) {
    .contact {
        grid-template-columns: 1fr;
    }
}

.contact-address {
    background: var(--j-bg-muted);
    padding: var(--j-spacing-lg);
    border-radius: var(--j-border-radius);
}

.contact-address dt {
    font-weight: 600;
    margin-bottom: var(--j-spacing-xs);
}

.contact-address dd {
    margin: 0 0 var(--j-spacing-md);
}

.contact-form {
    background: var(--j-bg-light);
    padding: var(--j-spacing-lg);
    border-radius: var(--j-border-radius);
    box-shadow: var(--j-shadow);
}

.contact-misc {
    margin-top: var(--j-spacing-lg);
    padding: var(--j-spacing-lg);
    background: var(--j-bg-muted);
    border-radius: var(--j-border-radius);
}

/* ==========================================================================
   Navigation & Breadcrumbs
   ========================================================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: var(--j-spacing-sm) 0;
    margin-bottom: var(--j-spacing-lg);
    list-style: none;
    background: transparent;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: var(--j-spacing-sm);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding-right: var(--j-spacing-sm);
    color: var(--j-text-muted);
}

.breadcrumb-item a {
    color: var(--j-primary);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--j-text-muted);
}

.mod-menu .nav,
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   Tags
   ========================================================================== */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--j-spacing-sm);
    padding: 0;
    margin: var(--j-spacing-md) 0;
    list-style: none;
}

.tags .tag-item,
.tag-item {
    display: inline-block;
}

.tags .tag-item a,
.tag-item a,
.tag {
    display: inline-block;
    padding: var(--j-spacing-xs) var(--j-spacing-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--j-text);
    background-color: var(--j-bg-muted);
    border-radius: 20px;
    text-decoration: none;
    transition: background-color var(--j-transition), color var(--j-transition);
}

.tags .tag-item a:hover,
.tag-item a:hover,
.tag:hover {
    background-color: var(--j-primary);
    color: var(--j-text-light);
}

/* ==========================================================================
   Search (Finder)
   ========================================================================== */

.com-finder {
    padding: var(--j-spacing-xl);
}

.finder-search {
    max-width: 600px;
    margin: 0 auto var(--j-spacing-xl);
}

.finder-search .input-group {
    box-shadow: var(--j-shadow-lg);
    border-radius: var(--j-border-radius-lg);
    overflow: hidden;
}

.finder-search .form-control {
    border: none;
    padding: var(--j-spacing-md) var(--j-spacing-lg);
    font-size: 1.125rem;
}

.finder-search .btn {
    border-radius: 0;
    padding: var(--j-spacing-md) var(--j-spacing-xl);
}

.search-results {
    margin-top: var(--j-spacing-xl);
}

.search-results .result-title {
    font-size: 1.25rem;
    margin-bottom: var(--j-spacing-xs);
}

.search-results .result-title a {
    color: var(--j-primary);
    text-decoration: none;
}

.search-results .result-title a:hover {
    text-decoration: underline;
}

.search-results .result-text {
    color: var(--j-text);
    margin-bottom: var(--j-spacing-sm);
}

.search-results .result-url {
    font-size: 0.875rem;
    color: var(--j-success);
}

.search-results li {
    padding: var(--j-spacing-lg) 0;
    border-bottom: 1px solid var(--j-border);
}

.search-results li:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
    width: 100%;
    margin-bottom: var(--j-spacing-lg);
    color: var(--j-text);
    vertical-align: top;
    border-color: var(--j-border);
    border-collapse: collapse;
}

.table > :not(caption) > * > * {
    padding: var(--j-spacing-sm) var(--j-spacing-md);
    border-bottom: 1px solid var(--j-border);
}

.table > thead {
    vertical-align: bottom;
    background-color: var(--j-bg-muted);
}

.table > thead th {
    font-weight: 600;
    text-align: left;
}

.table > tbody > tr:last-child > * {
    border-bottom: none;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(0, 0, 0, 0.04);
}

.table-bordered > :not(caption) > * {
    border: 1px solid var(--j-border);
}

.table-bordered > :not(caption) > * > * {
    border: 1px solid var(--j-border);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header {
    padding-bottom: var(--j-spacing-md);
    margin-bottom: var(--j-spacing-xl);
    border-bottom: 1px solid var(--j-border);
}

.page-header h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
    display: inline-block;
    padding: var(--j-spacing-xs) var(--j-spacing-sm);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--j-border-radius);
}

.badge-primary,
.bg-primary {
    color: var(--j-text-light);
    background-color: var(--j-primary);
}

.badge-secondary,
.bg-secondary {
    color: var(--j-text-light);
    background-color: var(--j-text-muted);
}

.badge-success,
.bg-success {
    color: var(--j-text-light);
    background-color: var(--j-success);
}

.badge-danger,
.bg-danger {
    color: var(--j-text-light);
    background-color: var(--j-danger);
}

.badge-warning,
.bg-warning {
    color: var(--j-dark);
    background-color: var(--j-warning);
}

.badge-info,
.bg-info {
    color: var(--j-text-light);
    background-color: var(--j-info);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--j-bg-light);
    background-clip: border-box;
    border: 1px solid var(--j-border);
    border-radius: var(--j-border-radius);
    box-shadow: var(--j-shadow);
}

.card-header {
    padding: var(--j-spacing-md) var(--j-spacing-lg);
    margin-bottom: 0;
    background-color: var(--j-bg-muted);
    border-bottom: 1px solid var(--j-border);
}

.card-header:first-child {
    border-radius: calc(var(--j-border-radius) - 1px) calc(var(--j-border-radius) - 1px) 0 0;
}

.card-body {
    flex: 1 1 auto;
    padding: var(--j-spacing-lg);
}

.card-title {
    margin-bottom: var(--j-spacing-sm);
    font-weight: 600;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-footer {
    padding: var(--j-spacing-md) var(--j-spacing-lg);
    background-color: var(--j-bg-muted);
    border-top: 1px solid var(--j-border);
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--j-border-radius) - 1px) calc(var(--j-border-radius) - 1px);
}

.card-img-top {
    width: 100%;
    border-top-left-radius: calc(var(--j-border-radius) - 1px);
    border-top-right-radius: calc(var(--j-border-radius) - 1px);
}

/* ==========================================================================
   Dropdown Menus
   ========================================================================== */

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: var(--j-spacing-sm) 0;
    margin: 0;
    font-size: 1rem;
    color: var(--j-text);
    text-align: left;
    list-style: none;
    background-color: var(--j-bg-light);
    background-clip: padding-box;
    border: 1px solid var(--j-border);
    border-radius: var(--j-border-radius);
    box-shadow: var(--j-shadow-lg);
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: var(--j-spacing-sm) var(--j-spacing-lg);
    clear: both;
    font-weight: 400;
    color: var(--j-text);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: background-color var(--j-transition), color var(--j-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--j-text);
    background-color: var(--j-bg-muted);
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--j-text-light);
    background-color: var(--j-primary);
}

.dropdown-divider {
    height: 0;
    margin: var(--j-spacing-sm) 0;
    overflow: hidden;
    border-top: 1px solid var(--j-border);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.lead {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.6;
}

.small {
    font-size: 0.875rem;
}

.text-muted {
    color: var(--j-text-muted) !important;
}

.text-primary {
    color: var(--j-primary) !important;
}

.text-success {
    color: var(--j-success) !important;
}

.text-danger {
    color: var(--j-danger) !important;
}

.text-warning {
    color: var(--j-warning) !important;
}

.text-info {
    color: var(--j-info) !important;
}

.text-center {
    text-align: center !important;
}

.text-start,
.text-left {
    text-align: left !important;
}

.text-end,
.text-right {
    text-align: right !important;
}

.fw-bold,
.font-weight-bold {
    font-weight: 700 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fst-italic {
    font-style: italic !important;
}

/* Spacing Utilities */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--j-spacing-xs) !important; }
.mt-2 { margin-top: var(--j-spacing-sm) !important; }
.mt-3 { margin-top: var(--j-spacing-md) !important; }
.mt-4 { margin-top: var(--j-spacing-lg) !important; }
.mt-5 { margin-top: var(--j-spacing-xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--j-spacing-xs) !important; }
.mb-2 { margin-bottom: var(--j-spacing-sm) !important; }
.mb-3 { margin-bottom: var(--j-spacing-md) !important; }
.mb-4 { margin-bottom: var(--j-spacing-lg) !important; }
.mb-5 { margin-bottom: var(--j-spacing-xl) !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--j-spacing-xs) !important; margin-bottom: var(--j-spacing-xs) !important; }
.my-2 { margin-top: var(--j-spacing-sm) !important; margin-bottom: var(--j-spacing-sm) !important; }
.my-3 { margin-top: var(--j-spacing-md) !important; margin-bottom: var(--j-spacing-md) !important; }
.my-4 { margin-top: var(--j-spacing-lg) !important; margin-bottom: var(--j-spacing-lg) !important; }
.my-5 { margin-top: var(--j-spacing-xl) !important; margin-bottom: var(--j-spacing-xl) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--j-spacing-xs) !important; }
.p-2 { padding: var(--j-spacing-sm) !important; }
.p-3 { padding: var(--j-spacing-md) !important; }
.p-4 { padding: var(--j-spacing-lg) !important; }
.p-5 { padding: var(--j-spacing-xl) !important; }

/* Display Utilities */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Flex Utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.gap-1 { gap: var(--j-spacing-xs) !important; }
.gap-2 { gap: var(--j-spacing-sm) !important; }
.gap-3 { gap: var(--j-spacing-md) !important; }
.gap-4 { gap: var(--j-spacing-lg) !important; }

/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Screen Reader Only */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   Icons
   ========================================================================== */

[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: var(--j-spacing-xs);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .item-page,
    .com-users,
    .com-contact,
    .com-finder {
        padding: var(--j-spacing-md);
    }
    
    .article-header h1 {
        font-size: 1.75rem;
    }
    
    .page-header h1 {
        font-size: 1.5rem;
    }
    
    .btn {
        padding: var(--j-spacing-sm) var(--j-spacing-md);
    }
    
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .pagination {
        justify-content: center;
    }
    
    .page-link {
        padding: var(--j-spacing-xs) var(--j-spacing-sm);
        font-size: 0.875rem;
    }
    
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        border-radius: 0;
        width: 100%;
    }
    
    .btn-group .btn:first-child {
        border-radius: var(--j-border-radius) var(--j-border-radius) 0 0;
    }
    
    .btn-group .btn:last-child {
        border-radius: 0 0 var(--j-border-radius) var(--j-border-radius);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .btn,
    .pagination,
    .breadcrumb,
    .alert-dismissible .btn-close,
    #system-message-container {
        display: none !important;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    a {
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* ==========================================================================
   Global Typography Overrides - Match Template
   ========================================================================== */

/* Headers - Use Open Sans, neutral colors */
h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    color: #333333;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: var(--j-spacing-md);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

/* Links - Muted gray, black on hover */
.com-content a,
.item-page a,
.blog a,
.article-body a,
.typography a {
    color: #555555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.com-content a:hover,
.item-page a:hover,
.blog a:hover,
.article-body a:hover,
.typography a:hover {
    color: #000000;
    text-decoration: none;
}

/* Category/article title links */
.article-header h2 a,
.blog-item h2 a,
.category-list a {
    color: #333333;
}

.article-header h2 a:hover,
.blog-item h2 a:hover,
.category-list a:hover {
    color: #000000;
}

/* Read more links */
.readmore a {
    color: #555555;
    font-weight: 600;
}

.readmore a:hover {
    color: #000000;
}

/* ==========================================================================
   Button Color Overrides - Match Template
   ========================================================================== */

/* Primary button - Dark gray */
.btn-primary {
    color: #ffffff;
    background-color: #333333;
    border-color: #333333;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff;
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}

/* Outline primary - Dark gray outline */
.btn-outline-primary {
    color: #333333;
    border-color: #333333;
}

.btn-outline-primary:hover {
    color: #ffffff;
    background-color: #333333;
    border-color: #333333;
}

/* Secondary button */
.btn-secondary {
    color: #ffffff;
    background-color: #666666;
    border-color: #666666;
}

.btn-secondary:hover {
    color: #ffffff;
    background-color: #555555;
    border-color: #555555;
}

/* Light button for dark backgrounds */
.btn-light {
    color: #333333;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.btn-light:hover {
    color: #1a1a1a;
    background-color: #e9ecef;
    border-color: #e9ecef;
}

/* Link-style button */
.btn-link {
    color: #555555;
    text-decoration: none;
}

.btn-link:hover {
    color: #000000;
    text-decoration: none;
}

/* Focus states - neutral */
.btn:focus,
.btn-primary:focus,
.btn-secondary:focus {
    box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.25);
}

/* Form focus states */
.form-control:focus,
.form-select:focus {
    border-color: #333333;
    box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.15);
}

/* Pagination - neutral colors */
.page-link {
    color: #555555;
}

.page-link:hover {
    color: #000000;
}

.page-item.active .page-link {
    background-color: #333333;
    border-color: #333333;
}

/* Tags - neutral */
.tags .tag-item a:hover,
.tag-item a:hover,
.tag:hover {
    background-color: #333333;
    color: #ffffff;
}

/* Breadcrumb links */
.breadcrumb-item a {
    color: #555555;
}

.breadcrumb-item a:hover {
    color: #000000;
}

/* Badge primary */
.badge-primary,
.bg-primary {
    background-color: #333333;
}

/* Alert links */
.alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* Dropdown active state */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #333333;
}

/* ==========================================================================
   Page Header Fixes - Ensure neutral colors
   ========================================================================== */

/* Page header h2 with links */
.page-header h2,
.page-header h2 a {
    font-family: serif !important;
    color: #333333 !important;
    font-weight: 600;
    text-decoration: none;
}

.page-header h2 a:hover {
    color: #000000 !important;
}

/* Override any inherited link colors in headings */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit !important;
    text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #000000 !important;
}

/* Ensure typography wrapper links in headers are neutral */
.typography h1 a,
.typography h2 a,
.typography h3 a {
    color: #333333 !important;
}

.typography h1 a:hover,
.typography h2 a:hover,
.typography h3 a:hover {
    color: #000000 !important;
}

/* ==========================================================================
   Override Template Link Colors
   ========================================================================== */

/* Override the --color-link CSS variable */
:root {
    --color-link: #555555 !important;
}

/* Ensure typography links use neutral colors */
.typography a {
    color: #555555 !important;
}

.typography a:hover {
    color: #000000 !important;
}

/* Item content links (category listings) */
.item-content a,
.item-content h2 a,
.item-content .page-header a {
    color: #333333 !important;
    font-family: serif !important;
}

.item-content a:hover,
.item-content h2 a:hover,
.item-content .page-header a:hover {
    color: #000000 !important;
}

/* WYSIWYG block links */
.wysiwyg_block a {
    color: #555555 !important;
}

.wysiwyg_block a:hover {
    color: #000000 !important;
    border-bottom-color: #000000 !important;
}

/* Global link reset for content areas */
.main_content a,
.page_content a {
    color: #555555;
}

.main_content a:hover,
.page_content a:hover {
    color: #000000;
}

/* Heading links - always inherit heading color */
.main_content h1 a,
.main_content h2 a,
.main_content h3 a,
.page_content h1 a,
.page_content h2 a,
.page_content h3 a {
    color: #333333 !important;
}

.main_content h1 a:hover,
.main_content h2 a:hover,
.main_content h3 a:hover,
.page_content h1 a:hover,
.page_content h2 a:hover,
.page_content h3 a:hover {
    color: #000000 !important;
}

/* ==========================================================================
   Ultra-Specific Blog/Category Overrides
   ========================================================================== */

/* Blog and category item headings */
.com-content-category-blog h2 a,
.com-content-category-blog .page-header h2 a,
.blog h2 a,
.blog-item h2 a,
.blog-item .page-header h2 a,
.blog-items h2 a,
.category-blog h2 a {
    color: #333333 !important;
    font-family: serif !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.com-content-category-blog h2 a:hover,
.com-content-category-blog .page-header h2 a:hover,
.blog h2 a:hover,
.blog-item h2 a:hover,
.blog-item .page-header h2 a:hover,
.blog-items h2 a:hover,
.category-blog h2 a:hover {
    color: #000000 !important;
}

/* All links inside blog items */
.blog-item a,
.blog-items a,
.com-content-category-blog a {
    color: #555555;
}

.blog-item a:hover,
.blog-items a:hover,
.com-content-category-blog a:hover {
    color: #000000;
}

/* Force headings in typography wrapper */
.typography .page-header h2,
.typography .page-header h2 a,
.typography h2 a,
.typography.page_background h2 a,
.wysiwyg_block h2 a {
    color: #333333 !important;
    font-family: serif !important;
}

.typography .page-header h2 a:hover,
.typography h2 a:hover,
.typography.page_background h2 a:hover,
.wysiwyg_block h2 a:hover {
    color: #000000 !important;
}

/* Absolute nuclear option - any h2 with a link */
h2 > a,
h2 a {
    color: #333333 !important;
    font-family: serif !important;
    text-decoration: none !important;
}

h2 > a:hover,
h2 a:hover {
    color: #000000 !important;
}

/* ==========================================================================
   Force H2 Font Override
   ========================================================================== */

/* Force all h2 elements to use Open Sans */
h2,
.page-header h2,
.item-content h2,
.blog-item h2,
.com-content h2,
.typography h2,
.wysiwyg_block h2,
.main_content h2,
.page_content h2,
article h2 {
    font-family: serif !important;
    font-weight: 600 !important;
    color: #333333 !important;
}

/* Also force h2 links */
h2 a,
.page-header h2 a,
.item-content h2 a,
.blog-item h2 a {
    font-family: inherit !important;
}

/* ==========================================================================
   Heading Font Weight Adjustments
   ========================================================================== */

/* H2-H5 should not be bold */
h2, h3, h4, h5,
.page-header h2,
.item-content h2,
.blog-item h2,
.typography h2, .typography h3, .typography h4, .typography h5,
.main_content h2, .main_content h3, .main_content h4, .main_content h5,
article h2, article h3, article h4, article h5 {
    font-weight: 400 !important;
}

/* ==========================================================================
   Content Grid - Sidebar Column Support
   ========================================================================== */

/* Content Grid - Supports sidebars */
.content-grid {
    display: grid;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* No sidebars - full width */
.content-grid:not(:has(.sidebar)) {
    grid-template-columns: 1fr;
}

/* Left sidebar only */
.content-grid:has(.sidebar-left):not(:has(.sidebar-right)) {
    grid-template-columns: 300px 1fr;
}

/* Right sidebar only */
.content-grid:has(.sidebar-right):not(:has(.sidebar-left)) {
    grid-template-columns: 1fr 300px;
}

/* Both sidebars */
.content-grid:has(.sidebar-left):has(.sidebar-right) {
    grid-template-columns: 300px 1fr 300px;
}

/* Sidebar styling */
.sidebar {
    padding: 1rem;
}

.sidebar .moduletable,
.sidebar .module {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.sidebar .moduletable:last-child,
.sidebar .module:last-child {
    margin-bottom: 0;
}

.sidebar h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #dee2e6;
}

.sidebar ul li:last-child {
    border-bottom: none;
}

.sidebar a {
    color: #555555;
    text-decoration: none;
}

.sidebar a:hover {
    color: #000000;
}

/* Main column adjustments */
.main-column {
    min-width: 0;
}

/* Responsive - Stack on tablet and mobile */
@media (max-width: 992px) {
    .content-grid {
        grid-template-columns: 1fr !important;
    }
    
    .sidebar-left {
        order: -1;
    }
    
    .main-column {
        order: 0;
    }
    
    .sidebar-right {
        order: 1;
    }
}

/* Fallback for browsers without :has() support */
@supports not (selector(:has(*))) {
    /* Default to full width */
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    /* Use JavaScript or PHP to add classes like .has-left-sidebar */
    .content-grid.has-left-sidebar {
        grid-template-columns: 300px 1fr;
    }
    
    .content-grid.has-right-sidebar {
        grid-template-columns: 1fr 300px;
    }
    
    .content-grid.has-both-sidebars {
        grid-template-columns: 300px 1fr 300px;
    }
}

/* ==========================================================================
   Joomla Native Column Layouts (Blog/Category)
   ========================================================================== */

/* Blog items with columns */
.blog-items,
.com-content-category-blog__items {
    display: grid;
    gap: 2rem;
    margin-bottom: 2rem;
}

/* 1 column (default) */
.blog-items,
.columns-1 {
    grid-template-columns: 1fr;
}

/* 2 columns */
.blog-items.columns-2,
.blog-items.masonry-2,
.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 columns */
.blog-items.columns-3,
.blog-items.masonry-3,
.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 columns */
.blog-items.columns-4,
.blog-items.masonry-4,
.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Blog item styling */
.blog-item,
.com-content-category-blog__item {
    background: var(--j-bg-light);
    border: 1px solid var(--j-border);
    border-radius: var(--j-border-radius);
    padding: 1.5rem;
    transition: box-shadow var(--j-transition);
}

.blog-item:hover,
.com-content-category-blog__item:hover {
    box-shadow: var(--j-shadow);
}

/* Responsive columns - stack on smaller screens */
@media (max-width: 1200px) {
    .blog-items.columns-4,
    .blog-items.masonry-4,
    .columns-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .blog-items.columns-3,
    .blog-items.columns-4,
    .blog-items.masonry-3,
    .blog-items.masonry-4,
    .columns-3,
    .columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-items.columns-2,
    .blog-items.columns-3,
    .blog-items.columns-4,
    .blog-items.masonry-2,
    .blog-items.masonry-3,
    .blog-items.masonry-4,
    .columns-2,
    .columns-3,
    .columns-4 {
        grid-template-columns: 1fr;
    }
}

/* Leading articles (full width featured articles) */
.items-leading {
    margin-bottom: 2rem;
}

.items-leading .blog-item {
    margin-bottom: 2rem;
}

/* Category description */
.category-desc {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--j-bg-muted);
    border-radius: var(--j-border-radius);
}