/**
 * @file
 * Typography reset and base text styles for TDSpares D10 theme.
 *
 * Loaded at weight -20 (before all component CSS) via td_theme/typography library.
 * Depends on td_theme/tokens for CSS custom properties.
 *
 * Google Font: Istok Web is loaded via td_theme.info.yml / html.html.twig
 * preconnect tags — not imported here to avoid render-blocking.
 *
 * Design decisions:
 * - box-sizing: border-box applied globally — simplifies all layout maths.
 * - Font stack matches live D7 site: Istok Web primary, Arial fallback.
 * - Heading scale matches live _base.scss ratios (2/1.5/1.17/1).
 * - No underlines on links by default; underline on :hover for body links
 *   (navigation contexts override separately in navigation CSS).
 * - List reset only removes list-style; margin/padding reset done selectively
 *   to avoid wiping Drupal's accessible markup.
 */

/* ==========================================================================
   Box model reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ==========================================================================
   Base body
   ========================================================================== */

html {
  font-size: 87.5%; /* Respect user browser font-size preference */
}

body {
  font-family: var(--td-font-body);
  font-size: var(--td-font-size-base);
  line-height: var(--td-line-height);
  color: var(--td-color-text);
  background-color: var(--td-color-bg-subtle);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   Headings
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--td-font-heading);
  font-weight: var(--td-font-weight-bold);
  line-height: 1.25;
  color: var(--td-color-primary);   /* Brand blue for all headings — matches live site */
  margin: 0 0 var(--td-space-sm) 0;
}

h1 { font-size: var(--td-font-size-h1); }
h2 { font-size: var(--td-font-size-h2); }
h3 { font-size: var(--td-font-size-h3); }
h4 { font-size: var(--td-font-size-h4); }

h5,
h6 {
  font-size: var(--td-font-size-base);
}


/* ==========================================================================
   Paragraphs and inline elements
   ========================================================================== */

p {
  margin: 0 0 var(--td-space-md) 0;
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: var(--td-font-weight-bold);
}

/* Text emphasis utility — replaces inline red text from legacy content.
   Available in CKEditor 5 via the Styles dropdown. */
.text-emphasis {
  color: var(--td-color-sale);
  font-weight: var(--td-font-weight-bold);
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--td-font-size-sm);
}


/* ==========================================================================
   Links
   ========================================================================== */

a {
  color: var(--td-color-link);
  text-decoration: none;        /* No underline by default — matches live site */
  transition: color var(--td-transition-duration) var(--td-transition-easing);
}

a:hover,
a:focus {
  color: var(--td-color-link-hover);
  text-decoration: underline;   /* Underline on hover for clarity */
}

a:focus-visible {
  /* WCAG 2.1 AA — visible focus ring for keyboard users */
  outline: 2px solid var(--td-color-primary-light);
  outline-offset: 2px;
  border-radius: var(--td-radius-sm);
}

/* Body content links (within prose) get underlines by default for legibility */
.field--type-text-long a,
.field--type-text-with-summary a,
.text-formatted a {
  text-decoration: underline;
}


/* ==========================================================================
   Lists
   ========================================================================== */

ul,
ol {
  margin: 0 0 var(--td-space-md) 0;
  padding-left: var(--td-space-xl);  /* 32px indent */
}

li {
  margin-bottom: var(--td-space-xs);
}

/* Utility class: strip list styles for nav menus, card lists, etc. */
.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-reset li {
  margin-bottom: 0;
}


/* ==========================================================================
   Horizontal rule
   ========================================================================== */

hr {
  border: 0;
  border-top: 1px solid var(--td-color-border);
  margin: var(--td-space-lg) 0;
}


/* ==========================================================================
   Code and pre
   ========================================================================== */

code,
kbd,
pre,
samp {
  font-family: var(--td-font-mono);
  font-size: var(--td-font-size-sm);
}

pre {
  overflow-x: auto;
  background: var(--td-color-bg-alt);
  border: 1px solid var(--td-color-border);
  border-radius: var(--td-radius-sm);
  padding: var(--td-space-md);
  margin: 0 0 var(--td-space-md) 0;
}


/* ==========================================================================
   Images
   ========================================================================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}