/* ============================================================
   READABILITY ENHANCEMENTS
   Improved typography, spacing, and contrast
   ============================================================ */

/* ── Enhanced Typography ── */
:root {
  /* Base font size increased for better readability */
  --base-font-size: 1.05rem;
  
  /* Improved line heights for better readability */
  --heading-line-height: 1.15;
  --body-line-height: 1.75;
  --tight-line-height: 1.6;
  --loose-line-height: 1.9;
  
  /* Enhanced spacing */
  --section-padding: 120px;
  --component-gap: 22px;
  --mobile-padding: 48px;
  
  /* Improved color opacity for better contrast */
  --muted-opacity: 0.75;
  --secondary-opacity: 0.85;
}

/* ── Body Text Improvements ── */
body {
  font-size: var(--base-font-size);
  line-height: var(--body-line-height);
  letter-spacing: 0.01em;
}

/* ── Heading Improvements ── */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--heading-line-height);
  letter-spacing: -0.03em;
  margin-bottom: 0.5em;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.15;
}

h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  line-height: 1.2;
}

h4 {
  font-size: 1.1rem;
  line-height: 1.25;
}

h5 {
  font-size: 1rem;
  line-height: 1.3;
}

h6 {
  font-size: 0.95rem;
  line-height: 1.3;
}

/* ── Paragraph Improvements ── */
p {
  line-height: var(--body-line-height);
  margin-bottom: 1.2em;
  max-width: 65ch;
}

/* ── List Improvements ── */
ul, ol {
  line-height: var(--body-line-height);
  margin-bottom: 1.2em;
}

li {
  margin-bottom: 0.6em;
  line-height: var(--body-line-height);
}

/* ── Link Improvements ── */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--gold);
}

/* ── Navigation Text Improvements ── */
.navlinks a {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

.navlinks a:hover,
.navlinks a.active {
  color: var(--white);
}

/* ── Eyebrow/Label Improvements ── */
.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  text-transform: uppercase;
}

/* ── Form Label Improvements ── */
label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green2);
  display: block;
  margin-bottom: 0.5em;
}

/* ── Form Input Improvements ── */
input,
textarea,
select {
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.75em 1em;
}

input::placeholder,
textarea::placeholder {
  color: rgba(93, 102, 95, 0.6);
  font-size: 0.95rem;
}

/* ── Section Improvements ── */
.section {
  padding: var(--section-padding) 0;
}

/* ── Component Spacing Improvements ── */
.wrap {
  display: flex;
  flex-direction: column;
  gap: var(--component-gap);
}

/* ── Card Improvements ── */
.card {
  padding: 2em;
  line-height: var(--body-line-height);
}

.card h3 {
  margin-top: 0;
  margin-bottom: 1em;
}

.card p {
  margin-bottom: 1em;
}

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

/* ── Muted Text Improvements ── */
.muted,
.secondary-text {
  color: rgba(93, 102, 95, var(--muted-opacity));
  line-height: var(--body-line-height);
}

/* ── Small Text Improvements ── */
small,
.small-text {
  font-size: 0.92rem;
  line-height: var(--tight-line-height);
}

/* ── Code Block Improvements ── */
code {
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.25em 0.5em;
  background: rgba(16, 20, 17, 0.08);
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}

pre {
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 1.5em;
  background: rgba(16, 20, 17, 0.1);
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5em 0;
}

pre code {
  background: none;
  padding: 0;
}

/* ── Blockquote Improvements ── */
blockquote {
  font-size: 1.1rem;
  line-height: var(--loose-line-height);
  font-style: italic;
  border-left: 4px solid var(--gold);
  padding-left: 1.5em;
  margin: 1.5em 0;
  color: var(--muted);
}

/* ── Table Improvements ── */
table {
  font-size: 0.95rem;
  line-height: 1.6;
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
}

th, td {
  padding: 1em;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

th {
  font-weight: 700;
  background: rgba(16, 20, 17, 0.05);
  color: var(--green2);
}

/* ── Button Text Improvements ── */
.btn,
.pill {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ── Mobile Readability Improvements ── */
@media (max-width: 860px) {
  :root {
    --section-padding: 80px;
    --mobile-padding: 40px;
  }

  body {
    font-size: 1.1rem;
    line-height: var(--body-line-height);
  }

  h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  h2 {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  h3 {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }

  p {
    font-size: 1.05rem;
    line-height: var(--body-line-height);
  }

  .navlinks a {
    font-size: 0.9rem;
  }

  label {
    font-size: 0.9rem;
  }

  input,
  textarea,
  select {
    font-size: 1.05rem;
    padding: 0.8em 1.1em;
  }

  .section {
    padding: 80px 0;
  }

  .wrap {
    width: min(calc(100% - 24px), var(--max));
  }
}

/* ── Mobile Small Screens (< 480px) ── */
@media (max-width: 480px) {
  :root {
    --section-padding: 60px;
    --mobile-padding: 32px;
  }

  body {
    font-size: 1.1rem;
    line-height: var(--body-line-height);
  }

  h1 {
    font-size: clamp(1.6rem, 10vw, 2.2rem);
  }

  h2 {
    font-size: clamp(1.2rem, 7vw, 1.8rem);
  }

  h3 {
    font-size: clamp(1rem, 5vw, 1.2rem);
  }

  p {
    font-size: 1.05rem;
    line-height: var(--body-line-height);
  }

  .section {
    padding: 60px 0;
  }

  .wrap {
    width: min(calc(100% - 20px), var(--max));
  }

  input,
  textarea,
  select {
    font-size: 1.1rem;
    padding: 0.9em 1.2em;
  }

  label {
    font-size: 0.85rem;
  }
}

/* ── Large Screens (> 1200px) ── */
@media (min-width: 1200px) {
  body {
    font-size: 1.08rem;
  }

  p {
    font-size: 1.08rem;
  }

  .section {
    padding: 140px 0;
  }
}

/* ── Print Readability ── */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.8;
    color: #000;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    line-height: 1.3;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  a {
    text-decoration: underline;
  }
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Accessibility: High Contrast ── */
@media (prefers-contrast: more) {
  body {
    color: #000;
    background: #fff;
  }

  a {
    color: #0000ee;
    text-decoration: underline;
  }

  .muted {
    color: #333;
  }
}

/* ── Accessibility: Dark Mode ── */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #f0f0f0;
  }

  .muted {
    color: #b0b0b0;
  }

  code {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* ── Focus Visibility ── */
*:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Selection Styling ── */
::selection {
  background: var(--gold);
  color: var(--green);
}

::-moz-selection {
  background: var(--gold);
  color: var(--green);
}

/* ── Scrollbar Styling ── */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(16, 20, 17, 0.05);
}

::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--green);
}

/* ── Text Rendering ── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Prevent Text Zoom on Input Focus (Mobile) ── */
input,
textarea,
select {
  font-size: 1rem;
}

@media (max-width: 860px) {
  input,
  textarea,
  select {
    font-size: 1.05rem;
  }
}