/* ==========================================================
   /ui/css/core/ljh-fonts.css
   LJH – Typography System
   ----------------------------------------------------------
   Ansvar:
   - Bastext och muted-varianter
   - Etiketter och kickers
   - Rubrikhierarki (h3 + titel-klasser)
   - Underrubriker och introtext
   - Brödtext i större block
   - Admin-titlar
   - Formulärtitlar, labels och input-typografi
   - Kalender-länkneutralisering
   - Radio-pills typografi
   ----------------------------------------------------------
   OBS: h1/h2 global styling finns i ljh-core.css
   ❌ Ingen layout, bakgrund eller padding
   ----------------------------------------------------------
   Prefix: ljh-
   Version: 1.0 – 2025-12-05
   Laddas via: head_loader.php (globalt)
========================================================== */


/* ==========================================================
   1. BASTEXT
========================================================== */

.ljh-text {
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(210,225,255,0.82);
}

.ljh-text-muted { opacity: 0.65; }


/* ==========================================================
   2. ETIKETTER & KONTEXT
========================================================== */

.ljh-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(200,220,255,0.75);
}

.ljh-kicker {
    font-size: 0.7rem;
    opacity: 0.65;
}


/* ==========================================================
   3. H3 – Panel / verktyg / steg
   OBS: h1/h2 hanteras i ljh-core.css
========================================================== */

h3 {
    font-size: 1.46rem;
    font-weight: 700;
    margin: 0 0 0.8rem 0;
    color: rgba(200,220,255,0.9);
}


/* ==========================================================
   4. TITEL-KLASSER
========================================================== */

.ljh-title-lg {
    font-size: 1.82rem;
    font-weight: 700;
    line-height: 1.3;
    color: rgba(190,215,255,0.9);
    margin: 0 0 1.4rem 0;
}

.ljh-title-md {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: rgba(200,225,255,0.94);
    text-shadow: 0 0 12px rgba(120,170,255,0.2);
    margin: 0 0 1rem 0;
}

.ljh-title-sm {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(190,215,255,0.9);
    margin: 0 0 0.6rem 0;
}


/* ==========================================================
   5. UNDERRUBRIKER & INTROTEXT
========================================================== */

.ljh-subtitle {
    font-size: 1.32rem;
    line-height: 1.55;
    font-weight: 500;
    color: rgba(200,225,255,0.88);
    margin: 0 0 2.2rem 0;
}

.ljh-glass-sub {
    font-size: 1.38rem;
    line-height: 1.55;
    font-weight: 520;
    color: rgba(205,230,255,0.92);
    text-shadow: 0 0 14px rgba(140,190,255,0.18);
    margin: 0 0 2.4rem 0;
}


/* ==========================================================
   6. BRÖDTEXT
========================================================== */

.ljh-step-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(210,225,255,0.82);
    margin: 0;
}


/* ==========================================================
   7. ADMIN-TITLAR
========================================================== */

.admin-header-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.admin-header-user { font-size: 14px; color: #fff; }


/* ==========================================================
   8. FORMULÄRTITLAR & LABELS
========================================================== */

.ljh-form-title {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: rgba(210,230,255,0.95);
    text-shadow: 0 2px 8px rgba(120,180,255,0.25);
    margin: 0 0 0.6rem 0;
}

.ljh-form-subtitle {
    font-size: 1.05rem;
    line-height: 1.55;
    font-weight: 500;
    color: rgba(190,215,255,0.85);
    margin: 0 0 1.8rem 0;
}

.ljh-form-label {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(200,220,255,0.75);
    display: inline-block;
    margin-bottom: 0.35rem;
}


/* ==========================================================
   9. FORM INPUT TYPOGRAFI
========================================================== */

.ljh-form input,
.ljh-form textarea {
    font-size: 1.18rem;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(235,245,255,0.95);
}

.ljh-form input::placeholder,
.ljh-form textarea::placeholder {
    font-size: 1.18rem;
    font-weight: 400;
    color: rgba(205,225,255,0.78);
    opacity: 0.65;
    text-shadow: 0 0 6px rgba(120,180,255,0.35);
}

.ljh-form input:focus::placeholder,
.ljh-form textarea:focus::placeholder { opacity: 0.45; }

.ljh-input-text {
    font-size: 1.18rem;
    font-weight: 520;
    margin-bottom: 0.22rem;
}


/* ==========================================================
   10. KALENDER – LÄNKNEUTRALISERING
========================================================== */

.ljh-calendar a.calendar-day             { color: inherit; text-decoration: none; }
.ljh-calendar a.calendar-day:visited     { color: inherit; }
.ljh-calendar a.calendar-day:hover       { text-decoration: none; }
.ljh-calendar a.calendar-day:focus       { outline: none; }


/* ==========================================================
   11. RADIO-PILLS
========================================================== */

.ljh-type-pill strong { font-size: 0.95rem; font-weight: 600; }
.ljh-type-pill small  { font-size: 0.72rem; opacity: 0.75; }