/*
Theme Name: Løbeklubben
Theme URI: https://lobeklubben.dk
Author: Løbeklubben.dk
Author URI: https://lobeklubben.dk
Description: Et sportsligt WordPress tema til Løbeklubben.dk med fuld integration af Community Run Calendar, Club-Index og RunRoute.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lobeklubben
Tags: sports, running, community, full-width-template, custom-menu, featured-images, widgets
*/

/* ============================================================
   DESIGN SYSTEM — PACE
   Aesthetic: Dark athletic editorial. Bold condensed display
   type, electric accent palette, sharp diagonal geometry.
   Fonts: Barlow Condensed (display) + Jost (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&family=Jost:wght@300;400;500;600;700&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    /* ── Brand ── */
    --lb-orange:         #FF4D00;
    --lb-orange-dark:    #CC3A00;
    --lb-orange-glow:    rgba(255, 77, 0, 0.35);
    --lb-lime:           #C8FF00;
    --lb-lime-dark:      #A3D000;
    --lb-blue:           #1A8FFF;
    --lb-green:          #00D46A;

    /* ── Dark surfaces (header, hero, footer) ── */
    --lb-dark-base:      #07090F;
    --lb-dark-surface:   #0D1220;
    --lb-dark-panel:     #131B2C;
    --lb-dark-card:      #192235;
    --lb-dark-border:    rgba(255, 255, 255, 0.07);
    --lb-dark-border-hi: rgba(255, 255, 255, 0.14);

    /* ── Light surfaces (plugin content areas) ── */
    --lb-bg:             #F0F2F6;
    --lb-bg-white:       #FFFFFF;
    --lb-bg-card:        #FFFFFF;
    --lb-bg-panel:       #E8EBF2;

    /* ── Typography ── */
    --lb-text:           #111827;
    --lb-text-secondary: #4B5563;
    --lb-text-muted:     #9CA3AF;
    --lb-text-light:     #F0F2F6;
    --lb-text-dim:       rgba(240, 242, 246, 0.55);

    /* ── Borders & Shadows ── */
    --lb-border:         rgba(17, 24, 39, 0.10);
    --lb-separator:      rgba(17, 24, 39, 0.06);
    --lb-shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --lb-shadow:         0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
    --lb-shadow-lg:      0 16px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
    --lb-shadow-glow:    0 0 40px var(--lb-orange-glow);

    /* ── Glassmorphism ── */
    --lb-glass-dark:     rgba(13, 18, 32, 0.82);
    --lb-glass-light:    rgba(255, 255, 255, 0.88);
    --lb-glass-border:   rgba(255, 255, 255, 0.10);

    /* ── Spacing scale ── */
    --lb-space-xs:       4px;
    --lb-space-sm:       8px;
    --lb-space-md:       16px;
    --lb-space-lg:       24px;
    --lb-space-xl:       40px;
    --lb-space-2xl:      72px;
    --lb-space-3xl:      112px;

    /* ── Radius ── */
    --lb-radius-xs:      4px;
    --lb-radius-sm:      6px;
    --lb-radius:         10px;
    --lb-radius-lg:      16px;
    --lb-radius-xl:      24px;
    --lb-radius-2xl:     32px;
    --lb-radius-pill:    999px;

    /* ── Typography scale ── */
    --lb-font-display:   'Barlow Condensed', 'Arial Narrow', sans-serif;
    --lb-font-body:      'Jost', 'Helvetica Neue', Arial, sans-serif;
    --lb-font-mono:      'JetBrains Mono', 'Fira Code', monospace;

    /* ── Motion ── */
    --lb-ease:           cubic-bezier(0.22, 1, 0.36, 1);
    --lb-ease-in:        cubic-bezier(0.4, 0, 1, 1);
    --lb-ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --lb-transition:     0.28s var(--lb-ease);
    --lb-transition-sm:  0.18s var(--lb-ease);
    --lb-transition-lg:  0.45s var(--lb-ease);

    /* ── Layout ── */
    --lb-max-width:      1320px;
    --lb-content-width:  860px;
    --lb-header-height:  68px;

    /* ── Diagonal angle (used in clip-path) ── */
    --lb-cut-height:     72px;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--lb-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--lb-text);
    background: var(--lb-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video     { max-width: 100%; height: auto; display: block; }
a              { color: var(--lb-orange); text-decoration: none; transition: color var(--lb-transition-sm); }
a:hover        { color: var(--lb-orange-dark); }
button, input, select, textarea { font: inherit; }
ul, ol         { list-style: none; }
svg            { flex-shrink: 0; }

/* ── Headings — Barlow Condensed for display impact ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--lb-font-display);
    font-weight: 800;
    line-height: 1.1;
    color: var(--lb-text);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

h1 { font-size: clamp(2.8rem, 7vw, 5.5rem);  letter-spacing: 0.02em; }
h2 { font-size: clamp(2rem,   4.5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 3vw,   2.2rem); }
h4 { font-size: 1.25rem; }

p  { margin-bottom: var(--lb-space-md); }
p:last-child { margin-bottom: 0; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.lb-container {
    max-width: var(--lb-max-width);
    margin: 0 auto;
    padding: 0 var(--lb-space-lg);
}

.lb-container--narrow {
    max-width: var(--lb-content-width);
    margin: 0 auto;
    padding: 0 var(--lb-space-lg);
}

.lb-section        { padding: var(--lb-space-2xl) 0; }
.lb-section--sm    { padding: var(--lb-space-xl) 0; }
.lb-section--dark  { background: var(--lb-dark-base); }
.lb-section--panel { background: var(--lb-bg-panel); }

.lb-grid            { display: grid; gap: var(--lb-space-lg); }
.lb-grid--2         { grid-template-columns: repeat(2, 1fr); }
.lb-grid--3         { grid-template-columns: repeat(3, 1fr); }
.lb-grid--4         { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   BUTTONS  — kinetic with shimmer and glow
   ============================================================ */
.lb-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--lb-radius-sm);
    font-family: var(--lb-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--lb-transition);
    white-space: nowrap;
    text-decoration: none;
    overflow: hidden;
    min-height: 44px;
}

/* Shimmer sweep on primary */
.lb-btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(255,255,255,0.18) 50%,
        transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.55s var(--lb-ease);
}
.lb-btn--primary:hover::after { transform: translateX(100%); }

.lb-btn--primary {
    background: var(--lb-orange);
    color: #fff;
    border-color: var(--lb-orange);
    box-shadow: 0 0 0 0 var(--lb-orange-glow);
}
.lb-btn--primary:hover {
    background: var(--lb-orange-dark);
    border-color: var(--lb-orange-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--lb-shadow-glow);
}

.lb-btn--secondary {
    background: transparent;
    color: var(--lb-orange);
    border-color: var(--lb-orange);
}
.lb-btn--secondary:hover {
    background: var(--lb-orange);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--lb-shadow-glow);
}

.lb-btn--lime {
    background: var(--lb-lime);
    color: var(--lb-dark-base);
    border-color: var(--lb-lime);
}
.lb-btn--lime:hover {
    background: var(--lb-lime-dark);
    border-color: var(--lb-lime-dark);
    color: var(--lb-dark-base);
    transform: translateY(-2px);
    box-shadow: 0 0 32px rgba(200,255,0,0.35);
}

.lb-btn--white {
    background: #fff;
    color: var(--lb-orange);
    border-color: #fff;
}
.lb-btn--white:hover {
    background: rgba(255,255,255,0.9);
    color: var(--lb-orange-dark);
    transform: translateY(-2px);
}

.lb-btn--ghost {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.lb-btn--ghost:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

.lb-btn--sm  { padding: 8px 18px;  font-size: 0.85rem; }
.lb-btn--lg  { padding: 16px 36px; font-size: 1.15rem; }
.lb-btn--xl  { padding: 18px 44px; font-size: 1.3rem; }

/* ============================================================
   CARDS  — glass light with gradient border
   ============================================================ */
.lb-card {
    background: var(--lb-bg-card);
    border-radius: var(--lb-radius-lg);
    border: 1px solid var(--lb-border);
    box-shadow: var(--lb-shadow-sm);
    overflow: hidden;
    transition: transform var(--lb-transition), box-shadow var(--lb-transition), border-color var(--lb-transition);
}
.lb-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lb-shadow-lg);
    border-color: rgba(255,77,0,0.2);
}

.lb-card__body   { padding: var(--lb-space-lg); }
.lb-card__footer {
    padding: var(--lb-space-md) var(--lb-space-lg);
    border-top: 1px solid var(--lb-separator);
}

/* ── Dark card variant ── */
.lb-card--dark {
    background: var(--lb-dark-card);
    border-color: var(--lb-dark-border);
    box-shadow: none;
}
.lb-card--dark:hover {
    border-color: rgba(255,77,0,0.3);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

/* ── Gradient-border card ── */
.lb-card--gradient-border {
    background: var(--lb-bg-card);
    border: none;
    position: relative;
}
.lb-card--gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--lb-orange), var(--lb-lime));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--lb-transition);
}
.lb-card--gradient-border:hover::before { opacity: 1; }

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.lb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--lb-radius-sm);
    font-family: var(--lb-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lb-badge--orange { background: rgba(255,77,0,0.12);   color: var(--lb-orange);  border: 1px solid rgba(255,77,0,0.2); }
.lb-badge--lime   { background: rgba(200,255,0,0.12);  color: var(--lb-lime-dark); border: 1px solid rgba(200,255,0,0.2); }
.lb-badge--blue   { background: rgba(26,143,255,0.12); color: var(--lb-blue);    border: 1px solid rgba(26,143,255,0.2); }
.lb-badge--green  { background: rgba(0,212,106,0.12);  color: var(--lb-green);   border: 1px solid rgba(0,212,106,0.2); }
.lb-badge--dark   { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border: 1px solid var(--lb-dark-border); }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.lb-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--lb-space-md);
    margin-bottom: var(--lb-space-xl);
    flex-wrap: wrap;
}

.lb-section-head__title        { margin: 0; }
.lb-section-head__title span   { color: var(--lb-orange); }
.lb-section-head__title--light { color: var(--lb-text-light); }

.lb-section-head__kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--lb-font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--lb-orange);
    margin-bottom: var(--lb-space-sm);
}

.lb-section-head__kicker--lime { color: var(--lb-lime); }

/* ============================================================
   DIVIDER / ACCENT SLASH
   ============================================================ */
.lb-divider {
    display: block;
    width: 48px;
    height: 3px;
    background: var(--lb-orange);
    border-radius: 2px;
    margin: var(--lb-space-md) 0;
    position: relative;
}
.lb-divider::after {
    content: '';
    position: absolute;
    left: 56px;
    top: 0;
    width: 16px;
    height: 3px;
    background: var(--lb-lime);
    border-radius: 2px;
}

/* ============================================================
   FORMS
   ============================================================ */
.lb-input, .lb-select {
    width: 100%;
    padding: 13px 16px;
    background: var(--lb-bg-card);
    border: 1.5px solid var(--lb-border);
    border-radius: var(--lb-radius);
    font-family: var(--lb-font-body);
    font-size: 0.95rem;
    color: var(--lb-text);
    transition: border-color var(--lb-transition-sm), box-shadow var(--lb-transition-sm);
    outline: none;
}
.lb-input:focus, .lb-select:focus {
    border-color: var(--lb-orange);
    box-shadow: 0 0 0 3px rgba(255,77,0,0.12);
}

/* ============================================================
   WORDPRESS ENTRY CONTENT
   ============================================================ */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 { margin: 1.6em 0 0.6em; }

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content table,
.entry-content blockquote { margin-bottom: 1.3em; }

.entry-content ul { list-style: disc; padding-left: 1.6em; }
.entry-content ol { list-style: decimal; padding-left: 1.6em; }

.entry-content blockquote {
    border-left: 3px solid var(--lb-orange);
    padding: var(--lb-space-md) var(--lb-space-lg);
    background: rgba(255,77,0,0.04);
    border-radius: 0 var(--lb-radius) var(--lb-radius) 0;
    font-style: italic;
    color: var(--lb-text-secondary);
}

.entry-content a {
    color: var(--lb-orange);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.entry-content img {
    border-radius: var(--lb-radius-lg);
    margin: var(--lb-space-lg) 0;
}

.entry-content table        { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.entry-content table th,
.entry-content table td     { padding: 10px 14px; border: 1px solid var(--lb-border); text-align: left; }
.entry-content table th     { background: var(--lb-bg); font-family: var(--lb-font-display); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem; }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px; margin: -1px;
    overflow: hidden; padding: 0;
    position: absolute; width: 1px;
    word-wrap: normal !important;
}

:focus-visible {
    outline: 2px solid var(--lb-orange);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-to-content {
    position: absolute; left: -9999px;
    top: auto; width: 1px; height: 1px;
    overflow: hidden; z-index: 9999;
}
.skip-to-content:focus {
    left: var(--lb-space-md); top: var(--lb-space-md);
    width: auto; height: auto;
    padding: 12px 20px;
    background: var(--lb-orange); color: #fff;
    border-radius: var(--lb-radius);
    font-family: var(--lb-font-display);
    font-weight: 700; letter-spacing: 0.05em;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.lb-pagination {
    display: flex;
    justify-content: center;
    gap: var(--lb-space-sm);
    margin-top: var(--lb-space-2xl);
    flex-wrap: wrap;
}

.lb-pagination a,
.lb-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--lb-radius-sm);
    font-family: var(--lb-font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    border: 1.5px solid var(--lb-border);
    transition: all var(--lb-transition-sm);
    color: var(--lb-text-secondary);
}
.lb-pagination a:hover {
    border-color: var(--lb-orange);
    color: var(--lb-orange);
    background: rgba(255,77,0,0.05);
}
.lb-pagination .current {
    background: var(--lb-orange);
    border-color: var(--lb-orange);
    color: #fff;
}

/* ============================================================
   WIDGETS
   ============================================================ */
.widget {
    background: var(--lb-bg-card);
    border-radius: var(--lb-radius-lg);
    border: 1px solid var(--lb-border);
    padding: var(--lb-space-lg);
    box-shadow: var(--lb-shadow-sm);
    margin-bottom: var(--lb-space-lg);
}

.widget-title {
    font-family: var(--lb-font-display);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lb-text);
    margin-bottom: var(--lb-space-md);
    padding-bottom: var(--lb-space-sm);
    border-bottom: 2px solid var(--lb-orange);
}

.widget ul li {
    padding: 7px 0;
    border-bottom: 1px solid var(--lb-separator);
    font-size: 0.875rem;
}
.widget ul li:last-child { border-bottom: none; }
.widget ul li a          { color: var(--lb-text-secondary); }
.widget ul li a:hover    { color: var(--lb-orange); }

/* ============================================================
   COMMENTS
   ============================================================ */
.comment-list { padding: 0; }
.comment-body {
    background: var(--lb-bg-card);
    border-radius: var(--lb-radius);
    padding: var(--lb-space-lg);
    margin-bottom: var(--lb-space-md);
    border: 1px solid var(--lb-border);
}
.comment-meta { margin-bottom: var(--lb-space-sm); font-size: 0.875rem; color: var(--lb-text-secondary); }

.comment-form input,
.comment-form textarea,
.comment-form select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--lb-border);
    border-radius: var(--lb-radius);
    margin-bottom: var(--lb-space-md);
    font-size: 0.95rem;
    font-family: var(--lb-font-body);
    transition: border-color var(--lb-transition-sm);
    outline: none;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--lb-orange); }
.comment-form input[type="submit"] {
    width: auto;
    background: var(--lb-orange); color: #fff;
    font-family: var(--lb-font-display); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    border: none; border-radius: var(--lb-radius-sm);
    padding: 12px 28px; cursor: pointer;
    transition: all var(--lb-transition-sm);
}
.comment-form input[type="submit"]:hover {
    background: var(--lb-orange-dark);
    transform: translateY(-1px);
    box-shadow: var(--lb-shadow-glow);
}

/* ============================================================
   SEARCH FORM
   ============================================================ */
.search-form {
    display: flex;
    gap: var(--lb-space-sm);
    flex-wrap: wrap;
}
.search-field {
    flex: 1; min-width: 200px;
    padding: 11px 16px;
    border: 1.5px solid var(--lb-border);
    border-radius: var(--lb-radius-pill);
    background: var(--lb-bg-card);
    font-family: var(--lb-font-body);
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--lb-transition-sm);
}
.search-field:focus { border-color: var(--lb-orange); }
.search-submit {
    padding: 11px 22px;
    background: var(--lb-orange); color: #fff;
    border: none; border-radius: var(--lb-radius-pill);
    font-family: var(--lb-font-display); font-size: 0.9rem;
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer; transition: all var(--lb-transition-sm);
}
.search-submit:hover { background: var(--lb-orange-dark); }

/* ============================================================
   RESPONSIVE BASE
   ============================================================ */
@media (max-width: 1024px) {
    .lb-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .lb-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root {
        --lb-header-height: 60px;
        --lb-space-2xl:     48px;
        --lb-space-3xl:     72px;
    }
    .lb-grid--2,
    .lb-grid--3,
    .lb-grid--4 { grid-template-columns: 1fr; }
    .lb-section-head { flex-direction: column; align-items: flex-start; }
    .lb-container { padding: 0 var(--lb-space-md); }
    h1 { font-size: clamp(2.4rem, 10vw, 3.5rem); }
    h2 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
}

@media (pointer: coarse) {
    .lb-btn { min-height: 44px; }
    .lb-nav__link { min-height: 44px; }
    a, button { -webkit-tap-highlight-color: transparent; }
}