/**
 * LOGB.dk Design Tokens
 * All CSS custom properties for the site: colors, spacing, typography, shadows, etc.
 * Expanded from the original _colors.css
 */

:root {
    /* ========================================
       COLORS
       ======================================== */

    /* Primary Brand Colors */
    --color-logb-blue: #4a6fa5;
    --color-logb-blue-dark: #3a5a85;
    --color-logb-blue-light: #5a7fb5;
    --color-logb-blue-75: rgba(74, 111, 165, 0.75);

    /* Gradient Colors */
    --color-gradient-start: #2b87da;
    --color-gradient-end: #25406d;

    /* Text Colors */
    --color-text-primary: #333;
    --color-text-secondary: #555;
    --color-text-heading: #2c3e50;
    --color-text-muted: #888;
    --color-text-placeholder: #999;

    /* Background Colors */
    --color-bg-white: #ffffff;
    --color-bg-light: #f9f9f9;
    --color-bg-muted: #f8f9fa;
    --color-bg-hover: #e9ecef;
    --color-bg-overlay: rgba(0, 0, 0, 0.1);

    /* Border Colors */
    --color-border-light: #e0e0e0;
    --color-border-medium: #444;
    --color-border-footer: #4A5568;
    --color-border-input: #dee2e6;
    --color-border-card: #e5e7eb;

    /* Footer Colors */
    --color-footer-bg: #1A202C;
    --color-footer-text: #FFFFFF;

    /* Navigation Colors */
    --color-nav-text: #2c3e50;
    --color-nav-hover: #325690;

    /* Link / Action Colors */
    --color-link: #248FD6;
    --color-link-hover: #1a6ba3;

    /* Accent Color (buttons, active states, badges) — matches gradient-start */
    --color-accent: #2b87da;

    /* Gray Scale (for secondary UI elements) */
    --color-gray-500: #6c757d;
    --color-gray-600: #718096;
    --color-gray-700: #4a5568;
    --color-gray-800: #2d3748;
    --color-gray-900: #1a202c;

    /* Utility Colors */
    --color-white: #ffffff;
    --color-white-80: rgba(255, 255, 255, 0.8);

    /* ========================================
       TYPOGRAPHY (fluid with clamp)
       ======================================== */

    --font-size-h1: clamp(2rem, 4vw + 1rem, 2.5rem);
    --font-size-h2: clamp(1.75rem, 3vw + 1rem, 2rem);
    --font-size-h3: clamp(1.5rem, 2vw + 1rem, 1.75rem);
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;

    /* ========================================
       SPACING
       ======================================== */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;
    --spacing-2xl: 60px;

    /* Layout */
    --layout-max-width: 1300px;
    --v3-side-padding: clamp(var(--spacing-lg), 5vw, 80px);
    --v3-content-max-width: var(--layout-max-width);

    /* Full-bleed gradient hero: default vertical padding (job, konsulenter, home, etc.) */
    --gradient-hero-pad-block: clamp(3rem, 8vw, 5.5rem);

    /*
     * Tagcloud detail pages only — hero followed by .kolonner--tagcloud-overlap.
     * Must stay in sync with margin-top pull-up in _sections.css (.kolonner--tagcloud-overlap).
     */
    --tagcloud-hero-pad-block: clamp(3rem, 8vw, 5.5rem);

    /* Events listing page (sider/events) — tune independently from tagcloud */
    --events-hero-pad-block: clamp(2rem, 3vw, 5.5rem);

    /*
     * Detail pages (event + kursus): blue hero + sidebar overlapping kolonner.
     * --detail-hero-pull-up must match |margin-top| on .kolonner--*-detail
     * and padding-top on the first column (see _events.css, _kurser-detalje.css).
     */
    --detail-hero-pad-block: 5.5rem;
    /* Less top padding when hero has breadcrumb pill (kurser); event uses pad-block top + bottom */
    --detail-hero-pad-top-breadcrumb: 3rem;
    --detail-hero-pull-up: 10rem;
    /* Shared minimum height for event + kursus hero banners. Keeps banner height consistent
       regardless of whether the hero contains only an h1 (events) or a breadcrumb pill + h1 (kurser). */
    --detail-hero-min-height: 15rem;

    /* ========================================
       BORDER RADIUS
       ======================================== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-pill: 20px;

    /* ========================================
       SHADOWS
       ======================================== */

    --shadow-card: 0 2px 18px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-dropdown: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* ========================================
       TRANSITIONS
       ======================================== */

    --transition-fast: 0.2s ease;
    --transition-default: 0.3s ease;

    /* ========================================
       BUTTON TOKENS (single source of truth)
       ======================================== */

    --button-bg: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
    --button-bg-hover: linear-gradient(135deg, var(--color-logb-blue-dark), var(--color-gradient-end));
    --button-color: var(--color-white);
    --button-radius: var(--radius-pill);
    --button-shadow-hover: 0 5px 15px rgba(43, 135, 218, 0.3);
    --button-shadow-hover-sm: 0 2px 8px rgba(43, 135, 218, 0.3);
}

/* ========================================
   COMPONENT-LEVEL COLOR RULES
   ======================================== */

/* LOGB signature blue background for "Hvem er vi?" text box */
.section-with-bg .content-column:not(:empty):first-child {
    background-color: var(--color-logb-blue-75);
}

.section-with-bg .content-column:first-child h1,
.section-with-bg .content-column:first-child h2,
.section-with-bg .content-column:first-child h3,
.section-with-bg .content-column:first-child p,
.section-with-bg .content-column:first-child a {
    color: var(--color-white);
}

.section-with-bg .content-column:first-child a:hover {
    color: var(--color-white-80);
}

/* LOGB signature blue background for video section */
.section-video-bg {
    background-color: var(--color-logb-blue);
}

.section-video-bg .content-column h1,
.section-video-bg .content-column h2,
.section-video-bg .content-column h3,
.section-video-bg .content-column p,
.section-video-bg .content-column a {
    color: var(--color-white);
}

.section-video-bg .content-column a:hover {
    color: var(--color-white-80);
}