/* ==========================================================
   NurseLink Unified Responsive Typography v622
   Desktop + Mobile + Senior-Friendly Readability
   ========================================================== */

:root {
  --nl-font-base: 17px;
  --nl-font-mobile: 18px;

  --nl-text-small: 15px;
  --nl-text-secondary: 15px;
  --nl-text-body: 17px;
  --nl-text-control: 16px;

  --nl-heading-1: clamp(30px, 2.1vw, 38px);
  --nl-heading-2: clamp(23px, 1.6vw, 30px);
  --nl-heading-3: clamp(19px, 1.2vw, 23px);

  --nl-line-body: 1.55;
  --nl-line-compact: 1.4;

  --nl-control-height: 44px;
  --nl-control-mobile-height: 48px;
}

/* ----------------------------------------------------------
   BASE
   ---------------------------------------------------------- */

html {
  font-size: var(--nl-font-base);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--nl-text-body) !important;
  line-height: var(--nl-line-body) !important;
}

/*
   Do not globally size every DIV or SPAN.
   Text inherits naturally so icons/layout elements remain intact.
*/

p,
li,
dd,
dt {
  font-size: inherit;
  line-height: var(--nl-line-body);
}

/* ----------------------------------------------------------
   HEADINGS
   ---------------------------------------------------------- */

h1 {
  font-size: var(--nl-heading-1) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--nl-heading-2) !important;
  line-height: 1.22 !important;
}

h3 {
  font-size: var(--nl-heading-3) !important;
  line-height: 1.3 !important;
}

h4,
h5,
h6 {
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

/* ----------------------------------------------------------
   FORMS
   ---------------------------------------------------------- */

label {
  font-size: 16px !important;
  line-height: 1.45 !important;
}

input,
select,
textarea {
  font-size: 16px !important;
  line-height: 1.4 !important;
  min-height: var(--nl-control-height);
}

button {
  font-size: 16px !important;
  line-height: 1.3 !important;
  min-height: var(--nl-control-height);
}

/* ----------------------------------------------------------
   NAVIGATION
   ---------------------------------------------------------- */

nav a,
nav button,
aside a,
aside button,
.sidebar a,
.sidebar button,
[role="navigation"] a,
[role="navigation"] button {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

/* ----------------------------------------------------------
   TABLES / DASHBOARDS
   ---------------------------------------------------------- */

table {
  font-size: 16px !important;
}

th {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

td {
  font-size: 16px !important;
  line-height: 1.45 !important;
}

/* ----------------------------------------------------------
   SECONDARY TEXT
   Never allow useful information to become microscopic.
   ---------------------------------------------------------- */

small,
.muted,
.subtitle,
.description,
.helper,
.help-text,
.caption,
.meta,
[class*="muted"],
[class*="subtitle"],
[class*="description"],
[class*="helper"],
[class*="help-text"],
[class*="caption"],
[class*="meta"] {
  font-size: var(--nl-text-secondary) !important;
  line-height: 1.45 !important;
}

/* ----------------------------------------------------------
   EYEBROWS / STATUS / BADGES
   ---------------------------------------------------------- */

.eyebrow,
[class*="eyebrow"],
[class*="section-label"],
[class*="section-kicker"] {
  font-size: 14px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.07em;
}

.badge,
[class*="status-badge"],
[class*="status-pill"] {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

/* ----------------------------------------------------------
   COMMON CARDS / PANELS
   ---------------------------------------------------------- */

.card p,
.panel p,
[class*="card"] p,
[class*="panel"] p {
  line-height: 1.5 !important;
}

.card strong,
.panel strong,
[class*="card"] strong,
[class*="panel"] strong {
  line-height: 1.35;
}

/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */

a {
  text-underline-offset: 2px;
}

/* ----------------------------------------------------------
   MOBILE / TABLET
   Senior-friendly touch and reading sizes
   ---------------------------------------------------------- */

@media (max-width: 900px) {
  html {
    font-size: 17px;
  }

  body {
    line-height: 1.55 !important;
  }

  nav a,
  nav button,
  aside a,
  aside button,
  .sidebar a,
  .sidebar button {
    font-size: 16px !important;
  }
}

@media (max-width: 680px) {

  html {
    font-size: var(--nl-font-mobile);
  }

  body {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  p,
  li,
  dd,
  dt {
    line-height: 1.6 !important;
  }

  label {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  input,
  select,
  textarea,
  button {
    font-size: 17px !important;
    min-height: var(--nl-control-mobile-height);
  }

  nav a,
  nav button,
  aside a,
  aside button,
  .sidebar a,
  .sidebar button,
  [role="navigation"] a,
  [role="navigation"] button {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }

  table {
    font-size: 16px !important;
  }

  th,
  td {
    font-size: 16px !important;
  }

  small,
  .muted,
  .subtitle,
  .description,
  .helper,
  .help-text,
  .caption,
  .meta,
  [class*="muted"],
  [class*="subtitle"],
  [class*="description"],
  [class*="helper"],
  [class*="help-text"],
  [class*="caption"],
  [class*="meta"] {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .eyebrow,
  [class*="eyebrow"],
  [class*="section-label"],
  [class*="section-kicker"] {
    font-size: 14px !important;
  }

  .badge,
  [class*="status-badge"],
  [class*="status-pill"] {
    font-size: 14px !important;
  }
}

/* ----------------------------------------------------------
   VERY SMALL PHONES
   Maintain readability without excessive wrapping
   ---------------------------------------------------------- */

@media (max-width: 390px) {
  html {
    font-size: 17px;
  }

  body {
    font-size: 17px !important;
  }

  label,
  input,
  select,
  textarea,
  button,
  nav a,
  nav button {
    font-size: 16px !important;
  }
}