/* ==========================================================================
   BASE STYLES
   --------------------------------------------------------------------------
   PURPOSE:
   This file defines how RAW HTML ELEMENTS look by default.
   No branding decisions, no layout decisions.

   Base styles should make content:
   - readable
   - accessible
   - predictable

   WHY THIS FILE EXISTS:
   - Normalises browser differences
   - Keeps typography consistent
   - Prevents plugin/editor surprises

   RULES:
   - Target elements only (body, h1, p, a, img)
   - NO layout decisions
   - NO component styling
   - NO section styling

   ASK YOURSELF:
   "If this CSS was removed, would the site still function?"
   If yes → base is correct.

   EXAMPLES OF WHAT BELONGS HERE:
   body font-family
   h1–h6 typography
   default paragraph spacing
   img max-width
   link behaviour

   EXAMPLES OF WHAT DOES NOT BELONG HERE:
   Buttons
   Forms
   Navigation
   Cards
   Grids
   ========================================================================== */

html { font-size: 15px; }

body {
  color: var(--text-main);
  background-color: var(--bg-body);
  font-family: var(--font-body);
   line-height: 1.7; 
  font-weight: 300;
  letter-spacing: 0.01em;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, .h6, h6 {
  font-family: var(--font-heading);
  color: var(--brand-black);
  font-weight: 600;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  font-variation-settings: "opsz" 100, "wght" 400;
}

  h5, .h5 {font-size: 0.9rem;margin-bottom: 0.5rem;color: var(--brand-primary);font-weight: 300;text-transform: uppercase;}


  

  h4, .h4 { font-size: 1.15rem; }
  h5, .h5 {/* font-size: 1.1rem; */}
p {margin-bottom: 1.5rem;}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

#content a:not(.btn) {
  font-weight: 500;
  text-decoration: underline;
}

a:hover { text-decoration: underline; }

img { max-width: 100% !important; height: auto; }

hr { border-color: var(--brand-secondary) !important; opacity: 1; margin: 0; }


.small, small {
    font-size: 14px;
}

.lead {
	font-size: 1.4rem;
}

@media (min-width: 1199px) {
  
  html { font-size: 15px; }
  h1, .h1 {font-size: 2.75rem;}
  h2, .h2 {font-size: 2rem;}
  h3, .h3 {font-size: 1.6rem;}
  h4, .h4 { font-size: 1.15rem; }
  h5, .h5 {font-size: 0.9rem;margin-bottom: 0.5rem;color: var(--brand-primary);font-weight: 300;text-transform: uppercase;}
  
}