/* Layout */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Flexbox */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

/* Grid */
.grid {
    display: grid;
}

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

/* Typography */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Visibility */
.hidden {
    display: none;
}

.visible {
    display: block;
}

/* Accessibility */
.sr-only,
.visually-hidden {
    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;
}

/* Show when focused (for skip links) */
.sr-only:focus,
.visually-hidden:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: initial !important;
    margin: initial !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Typography Utilities */
.heading-1 {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    color: var(--neutral-900);
}

.heading-2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
}

/* Content Styles */
.body-large {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

/* Button Styles */
.btn-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    transition: var(--transition-normal);
}

/* Card Styles */
.card-shadow {
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
}
/* Special Cases */
.hero-title {
    font-size: var(--text-5xl);
    line-height: 1.1;
    font-weight: 700;
}

.card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.news-title {
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    font-weight: 600;
}

.footer-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Section Headers */
.section-title {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    margin-bottom: 2rem;
}

/* Typography Classes */
.page-title {
    font-family: var(--font-primary);
    font-size: var(--text-4xl);
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: var(--text-3xl);
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
}

.card-title {
    font-size: var(--text-2xl);
    color: var(--primary-dark);
}

/* Common Card Styles */
.tcl-card {
    background: white;
    box-shadow: var(--shadow-sm);
    border-radius: 8px;
    padding: var(--spacing-lg);
}

/* Button Styles */
.tcl-button {
    background: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
}

/* Corporate Gradient Utilities */
.primary-gradient {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
}

.secondary-gradient {
    background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary) 50%, var(--secondary-light) 100%);
}

.corporate-gradient {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary) 50%, var(--primary-light) 100%);
}

/* Common styles for gradient backgrounds */
[class*="-gradient"] {
    color: white;
}

/* Focus styles */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.business-shadow {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15),
                0 8px 10px -6px rgba(0,0,0,0.15);
}

.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

.accent-border-left {
    border-left: 3px solid var(--primary);
    padding-left: 1.5rem;
}

/* Government Web Standards */
.national-emblem {
    max-width: 60px;
    height: auto;
    margin-right: 1rem;
}

.gov-alert {
    background: #1A3650;
    border-left: 4px solid #C5A267;
    padding: 1rem;
    margin: 1rem 0;
}

.official-links {
    column-count: 2;
    column-gap: 2rem;
}

.disclaimer-text {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
}

/* TCL Style Header */
.tcl-style-header {
    background: var(--primary, #4CAF50);
    padding: 20px 0;
    margin: 0;
    color: #fff;
    border-bottom: 2px solid var(--primary-dark, #357a38);
}

.header-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tcl-page-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

.tcl-breadcrumb {
    margin-top: 5px;
    margin-bottom: 5px;
}

.breadcrumb-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

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

.breadcrumb-list li:not(:last-child):after {
    content: '/';
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-list a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.2s;
}



/* Hide original header elements */
.hero-section, .ultra-minimal-header {
    display: none !important;
}



/* Document Icons */
.document-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    font-size: 1.1rem;
    position: relative;
    top: 1px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    padding: 2px 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, color 0.2s ease;
}

/* PDF Icon Specifically */
.pdf-icon {
    color: #B71C1C; /* Darker red color with contrast ratio > 4.5:1 */
}

/* Word Document Icon */
.doc-icon {
    color: #0D47A1; /* Dark blue for Word docs with good contrast */
}

/* Excel Document Icon */
.excel-icon {
    color: #1B5E20; /* Dark green for Excel with good contrast */
}

/* PowerPoint Icon */
.ppt-icon {
    color: #B71B00; /* Dark orange/red for PowerPoint with good contrast */
}

/* Image Icon */
.img-icon {
    color: #4A148C; /* Purple for image files with good contrast */
}

/* Generic Document Icon */
.file-icon {
    color: #424242; /* Dark gray for generic files with good contrast */
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .document-icon {
        background-color: rgba(255, 255, 255, 0.9);
    }
    
    .pdf-icon {
        color: #E53935; /* Brighter red for dark mode */
    }
    
    .doc-icon {
        color: #2196F3; /* Brighter blue for dark mode */
    }
    
    .excel-icon {
        color: #4CAF50; /* Brighter green for dark mode */
    }
    
    .ppt-icon {
        color: #FF5722; /* Brighter orange for dark mode */
    }
    
    .img-icon {
        color: #9C27B0; /* Brighter purple for dark mode */
    }
    
    .file-icon {
        color: #9E9E9E; /* Lighter gray for dark mode */
    }
}

/* Hover Effects */
.document-icon:hover,
[class*="-icon"]:hover {
    transform: scale(1.1);
}

.pdf-icon:hover {
    color: #7f0000; /* Darker on hover for emphasis */
}

.doc-icon:hover {
    color: #002171; /* Darker on hover */
}

.excel-icon:hover {
    color: #003300; /* Darker on hover */
}

.ppt-icon:hover {
    color: #870000; /* Darker on hover */
}

.img-icon:hover {
    color: #260040; /* Darker on hover */
}

.file-icon:hover {
    color: #212121; /* Darker on hover */
}

.content-focus {
    outline: 2px solid #1B4332;
    animation: pulse-content-focus 1.5s ease-in-out;
}

@keyframes pulse-content-focus {
    0% { outline-color: transparent; }
    50% { outline-color: #1B4332; }
    100% { outline-color: transparent; }
}

/* Set main content focus styles for skip link */
#main-content:focus {
    outline: 3px solid #1B4332 !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Ensure main content is focusable for skip link */
#main-content {
    scroll-margin-top: 2rem; /* Account for fixed header */
}