/* ==========================================================
   /assets/ui/ljh-fonts.css
   LJH GLOBAL TYPOGRAPHY SYSTEM
   --------------------------------------------
   ANSVAR:
   - ALL typografi i systemet
   - Rubrikhierarki
   - Brödtext
   - Form-text (input / textarea / placeholder)
   --------------------------------------------
   ❌ INGEN layout
   ❌ INGA backgrounds
   ❌ INGA paddings
========================================================== */


/* ==========================================================
   1. BAS – GENERELL TEXT
========================================================== */

.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. RUBRIKHIERARKI – GLOBAL
   --------------------------------------------
   H1 → Hero / startsida
   H2 → Sektioner
   H3 → Paneler / verktyg / steg
========================================================== */

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.04em;
}

h1 {
  color: var(--ljh-aqua-light);
}

h2 {
  color: var(--ljh-aqua);
}

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


/* ==========================================================
   4. TITEL-KLASSER (ALTERNATIV TILL HTML-Hx)
========================================================== */

/* Sektion / panel */
.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;
}

/* Panel / verktyg */
.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;
}

/* Mindre rubrik */
.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 I STÖRRE BLOCK
========================================================== */

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


/* ==========================================================
   7. ADMIN-TITLAR (HEADER)
========================================================== */

.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. FORM TITLAR & INTRO
========================================================== */

.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 TYPOGRAPHY
   --------------------------------------------
   SINGLE SOURCE OF TRUTH
   Gäller ALLA formulär i systemet
========================================================== */

.ljh-form input,
.ljh-form textarea {
  font-size: 1.18rem;
  line-height: 1.55; /* ⬅ mer andning för text */
  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;
}

/* Optional: förstärkt input-text */
.ljh-input-text {
  font-size: 1.18rem;     /* lite större */
  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;
}


/* ==========================================================
   FORM INPUT TYPOGRAPHY – GLOBAL DEFAULT
   Gäller ALLA inputs & textarea i .ljh-form
========================================================== */

.ljh-form input,
.ljh-form textarea {
  font-size: 1.14rem;
  line-height: 1.5;
  font-weight: 500;

  color: rgba(235, 245, 255, 0.95);
  letter-spacing: 0.01em;
}


/* Radio-pills */
.ljh-type-pill strong {
  font-size: 0.95rem;
  font-weight: 600;
}

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