@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Vinterbaderne Brand Design System */
:root {
    /* Blå toner - hovedfarver for vinterbadning */
    --primary-blue: #0066cc;
    --primary-blue-hover: #0052a3;
    --primary-blue-light: #e3f2fd;
    --primary-blue-dark: #003d7a;
    
    /* Sekundære farver */
    --accent-teal: #006064;
    --accent-teal-light: #e0f2f1;
    
    /* Status farver */
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: var(--primary-blue);
    
    /* Neutrale farver */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #8e9297;
    --background-primary: #ffffff;
    --background-secondary: #f8f9fa;
    --background-tertiary: #e9ecef;
    
    /* UI elementer */
    --border-radius: 8px;
    --border-radius-small: 4px;
    --border-radius-large: 12px;
    --box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --box-shadow-hover: 0 4px 8px rgba(0,0,0,0.15);

    /* Legacy compatibility */
    --body-font: "Lora", serif;
    --font-sans: "Montserrat", sans-serif;
    --color-accent: var(--primary-blue);
    --color-accent-hover: var(--primary-blue-hover);
    --color-border: var(--background-tertiary);
    --color-border-strong: #c5b2a6;
    --color-bg-card: var(--background-primary);
    --color-bg-muted: var(--background-secondary);
    --color-text: var(--text-primary);
    --color-text-muted: var(--text-muted);
    --color-danger: var(--danger-color);
    --radius: var(--border-radius);
    --hero-heading-color: white;
    --hero-subheading-color: white;

    /* Color mappings for compatibility with existing styles */
    --heading-color-primary: #214b44;
    --heading-color-secondary: #b3481f;
}

/* Font hierarki */
.text-display {
    font-size: 2.5rem;    /* 40px - Store overskrifter */
    font-weight: 700;
    line-height: 1.2;
}

.text-h1 {
    font-size: 2rem;      /* 32px - H1 overskrifter */
    font-weight: 600;
    line-height: 1.3;
}

.text-h2 {
    font-size: 1.5rem;    /* 24px - H2 overskrifter */
    font-weight: 600;
    line-height: 1.4;
}

.text-body {
    font-size: 1rem;      /* 16px - Body text */
    font-weight: 400;
    line-height: 1.6;
}

.text-caption {
    font-size: 0.875rem;  /* 14px - Captions og metadata */
    font-weight: 400;
    line-height: 1.5;
}

/* Skip link accessibility */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    padding: .5rem .75rem;
    background: #111827;
    color: #fff;
    border-radius: .25rem;
    margin-right: .75rem;
}

/* Base typography */
h1, h2, h3, h4, .fluent-nav-text {
    font-family: var(--font-sans);
}

h1 {
    color: var(--heading-color-primary);
}

h2 {
    color: var(--heading-color-secondary);
}

h3, h4 {
    color: var(--heading-color-primary);
}

body {
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    margin: 0;
}

/* Loading States */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: var(--text-muted);
}

.loading-text {
    margin-top: 1rem;
    font-size: 0.875rem;
}

/* Error States */
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

.error-state h3 {
    color: var(--danger-color);
    margin: 1rem 0 0.5rem 0;
}

.error-state p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Admin UI Differentiation */
.admin-container {
    border-top: 3px solid var(--accent-teal);
}

.admin-header {
    background: linear-gradient(135deg, var(--primary-blue-light), var(--accent-teal-light));
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-badge {
    background: var(--accent-teal);
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-small);
    text-transform: uppercase;
    font-weight: 600;
}

/* Stats Grid for Admin */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--background-primary);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.stat-card h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 600;
}

.stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--primary-blue);
    font-family: var(--font-sans);
}

/* Footer Styles */
.site-footer {
    background: var(--primary-blue-dark);
    color: white;
    padding: 2.5rem 2rem 1.5rem;
    margin-top: auto;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-col h4 {
    color: white;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    border-bottom: 2px solid var(--accent-teal);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.footer-col p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.footer-col.about p {
    font-size: 0.95rem;
}

.footer-col.links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col.links li {
    margin-bottom: 0.75rem;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: white;
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-bottom img {
    width: 120px;
    height: auto;
    /*filter: brightness(0) invert(1);
    opacity: 0.9;*/
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Responsive footer */
@media (max-width: 768px) {
    .site-footer {
        padding: 2rem 1rem 1rem;
    }
    
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .footer-col.about {
        order: 1;
    }
    
    .footer-col.links {
        order: 2;
    }
    
    .footer-col.contact {
        order: 3;
    }
}

@media (max-width: 480px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-bottom img {
        width: 50px;
    }
}

/* Responsive Design Breakpoints */
.responsive-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

/* Tablet og op */
@media (min-width: 768px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Animationer og Transitions */
.smooth-transition {
    transition: all 0.2s ease;
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card-hover-effect {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* News/Nyheder UI Specifikationer - Global news card styles */
.news-card {
    background: var(--background-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.news-card:hover {
    box-shadow: var(--box-shadow-hover);
    transform: translateY(-1px);
}

.news-meta {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.news-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    font-family: var(--font-sans);
}

.news-title a {
    color: inherit;
    text-decoration: none;
}

.news-title a:hover {
    color: var(--primary-blue);
    text-decoration: none;
}

.news-excerpt {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.news-read-more {
    color: var(--primary-blue);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s ease;
}

.news-read-more:hover {
    color: var(--primary-blue-hover);
}

/* Status farver for nyheds-tilstande */
.news-published {
    color: var(--success-color);
}

.news-scheduled {
    color: var(--warning-color);
}

.news-draft {
    color: var(--text-muted);
}

/* Home grid layout */
.home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 800px) {
    .home-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .home-grid > .hero {
        grid-column: 1 / -1; /* span both columns */
    }
}

/* Optional: keep readable measure in text column */
.readable { 
    max-width: 72ch;
    line-height: 1.5;
}

/* Hero section */
.hero {
    position: relative;
    min-height: 38vh;
    display: grid;
    place-items: center;
    padding: 3rem 1rem;
    color: #fff;
    margin-bottom: 20px;
    background: linear-gradient(
                    to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35)
                ),
                url('/images/hero.jpg') center/cover no-repeat;
}

.hero .hero-content {
    text-align: center;
    max-width: 72ch;
    margin-inline: auto;
}

.hero h1 {
    margin: 0 0 .5rem 0;
    font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem);
    color: var(--hero-heading-color);
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.hero p {
    margin: 0;
    font-size: clamp(1rem, 1vw + .7rem, 1.25rem);
    color: var(--hero-subheading-color);
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}