/* Main Stylesheet for Solvang IT Website */

/* =====================
   Import CSS Modules
   ===================== */

/* CSS Variables */
@import url('variables.css');

/* Base/Reset Styles */
@import url('base.css');

/* Layout */
@import url('layout.css');

/* Components */
@import url('components.css');

/* Theme: Dark Mode */
@import url('theme-dark.css');

/* Responsive Design */
@import url('responsive.css');

/* =====================
   Quick Links Section
   ===================== */
.quick-links {
    padding: var(--spacing-8) var(--container-padding);
    max-width: var(--container-max-width);
    margin: 0 auto var(--spacing-12);
}

.quick-links-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    text-align: var(--text-align-center);
    margin-bottom: var(--spacing-6);
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--spacing-4);
}

.quick-link-card {
    background: var(--color-card-bg);
    border: var(--border-1) solid var(--color-card-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    text-align: var(--text-align-center);
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--transition), box-shadow var(--transition);
}

.quick-link-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.quick-link-icon {
    font-size: var(--font-size-3xl);
    color: var(--color-primary-accent);
    margin-bottom: var(--spacing-3);
}

.quick-link-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}

.quick-link-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* =====================
   Content Styles
   ===================== */
.content-section {
    padding: var(--spacing-8) 0;
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.content-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-6);
    color: var(--color-text);
}

.content-subtitle {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-8);
}

/* =====================
   Featured Posts
   ===================== */
.featured-posts {
    max-width: var(--container-max-width);
    margin: 0 auto var(--spacing-12);
    padding: 0 var(--container-padding);
}

.featured-posts-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    text-align: var(--text-align-center);
    margin-bottom: var(--spacing-6);
}

.post-card {
    background: var(--color-card-bg);
    border: var(--border-1) solid var(--color-card-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-4);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}

.post-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.post-card-featured-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius) var(--radius) 0 0;
    margin: -1px -1px var(--spacing-4) -1px;
    border: var(--border-1) solid var(--color-card-border);
}

.post-card-header {
    margin-bottom: var(--spacing-3);
}

.post-card-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin: 0;
}

.post-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: var(--spacing-2);
}

.post-card-date {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.post-card-date i {
    font-size: var(--font-size-xs);
}

.post-card-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.post-card-excerpt {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
}

.post-card-read-more {
    margin-top: var(--spacing-4);
    display: inline-block;
    font-weight: var(--font-weight-medium);
}

/* =====================
   Pagination
   ===================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: var(--text-align-center);
    gap: var(--spacing-1);
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    display: block;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--spacing-3);
    line-height: 40px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    text-align: var(--text-align-center);
    border: var(--border-1) solid var(--color-border);
    border-radius: var(--radius);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pagination a:hover {
    background-color: var(--color-background-dark);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination-prev,
.pagination-next {
    padding: 0 var(--spacing-4);
}

.pagination-prev.disabled,
.pagination-next.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-bold);
    cursor: default;
}

.pagination-ellipsis {
    color: var(--color-text-light);
    cursor: default;
}

/* =====================
   PDF Viewer
   ===================== */
.pdf-viewer-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-6) var(--container-padding);
}

.pdf-viewer-header {
    margin-bottom: var(--spacing-6);
    text-align: var(--text-align-center);
}

.pdf-viewer-wrapper {
    background: var(--color-card-bg);
    border: var(--border-1) solid var(--color-card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.pdf-viewer iframe,
.pdf-viewer embed,
.pdf-viewer object {
    width: 100%;
    height: 700px;
    max-height: 80vh;
    border: none;
    display: block;
}

.pdf-viewer-actions {
    padding: var(--spacing-4);
    background: var(--color-background-dark);
    border-top: var(--border-1) solid var(--color-border);
    display: flex;
    gap: var(--spacing-2);
    justify-content: var(--text-align-center);
}

.pdf-viewer-download {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* =====================
   Utility Classes
   ===================== */
.text-center { text-align: var(--text-align-center); }
.text-left { text-align: var(--text-align-left); }
.text-right { text-align: var(--text-align-right); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* =====================
   Tooltip
   ===================== */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-text);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: var(--z-tooltip);
    pointer-events: none;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* =====================
   Print Styles
   ===================== */
@media print {
    .no-print {
        display: none;
    }
    
    .site-header,
    .main-navigation,
    .site-footer,
    .mobile-menu-overlay,
    .theme-toggle,
    .language-toggle,
    .menu-toggle {
        display: none !important;
    }
    
    body {
        background-color: white;
        color: black;
    }
    
    a {
        text-decoration: none;
        color: inherit;
    }
    
    .container {
        max-width: 100%;
    }
}