/* ================================================================
   AURELIA — readability-enhancements.css
   Typography and readability improvements
   Load LAST for highest priority
   ================================================================ */

/* ── TYPOGRAPHY IMPROVEMENTS ── */

/* Better line heights for readability */
body {
  line-height: 1.6 !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
}

p, li, label, span, a {
  line-height: 1.7 !important;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
}

h1 {
  letter-spacing: -1px !important;
}

/* ── SECTION TYPOGRAPHY ── */

.hero-h1 {
  letter-spacing: -1.5px !important;
  font-weight: 700 !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-kerning: auto !important;
  font-kerning: auto !important;
}

.section-h2 {
  letter-spacing: -0.8px !important;
  font-weight: 700 !important;
}

.service-title, .project-title, .member-name {
  letter-spacing: -0.4px !important;
  font-weight: 600 !important;
}

/* ── LINK IMPROVEMENTS ── */

a {
  text-decoration: none !important;
  transition: color 0.2s ease, opacity 0.2s ease !important;
  position: relative !important;
}

a:hover {
  opacity: 0.85 !important;
}

/* Underline on hover for better accessibility */
.nav-links a:hover,
.mobile-nav-links a:hover,
.footer-links a:hover {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

/* ── BUTTON IMPROVEMENTS ── */

button {
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

button:hover {
  transform: translateY(-2px) !important;
}

button:active {
  transform: translateY(0) !important;
}

.btn-primary, .btn-outline, .btn-submit {
  transition: all 0.3s ease !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  border-radius: 4px !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(200, 16, 46, 0.3) !important;
}

/* ── FORM IMPROVEMENTS ── */

input, select, textarea {
  font-size: 16px !important; /* Prevent zoom on iOS */
  font-family: 'Montserrat', sans-serif !important;
  transition: all 0.2s ease !important;
  border-radius: 4px !important;
}

input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1) !important;
  transform: translateY(-1px) !important;
}

textarea {
  resize: vertical !important;
  min-height: 120px !important;
}

input::placeholder, textarea::placeholder {
  opacity: 0.6 !important;
}

/* ── CARD IMPROVEMENTS ── */

.service-card, .project-card, .team-member-card, .review-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 8px !important;
}

.service-card:hover, .team-member-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .service-card:hover,
body.theme-light .team-member-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

/* ── TEXT CONTRAST & READABILITY ── */

/* Ensure minimum contrast ratios for accessibility */
body.theme-light {
  background-color: #f4f4f2 !important;
  color: #0f0f0f !important;
}

body {
  background-color: #0a0a0a !important;
  color: #f0f0f0 !important;
}

/* Better contrast for secondary text */
.text-muted, .secondary-text, .footer-copy {
  opacity: 0.75 !important;
}

body.theme-light .text-muted,
body.theme-light .secondary-text {
  color: #333333 !important;
}

/* ── CODE IMPROVEMENTS ── */

code, pre {
  font-family: 'Courier New', monospace !important;
  font-size: 0.95em !important;
  background: rgba(200, 16, 46, 0.1) !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}

pre {
  padding: 16px !important;
  overflow-x: auto !important;
  line-height: 1.5 !important;
}

/* ── LIST IMPROVEMENTS ── */

ul, ol {
  margin-left: 1.5em !important;
}

li {
  margin-bottom: 8px !important;
}

/* ── TABLE IMPROVEMENTS ── */

table {
  width: 100% !important;
  border-collapse: collapse !important;
}

th {
  font-weight: 700 !important;
  text-align: left !important;
  padding: 12px !important;
  border-bottom: 2px solid var(--border) !important;
}

td {
  padding: 12px !important;
  border-bottom: 1px solid var(--border) !important;
}

tr:hover {
  background: var(--surface) !important;
}

/* ── BLOCKQUOTE IMPROVEMENTS ── */

blockquote {
  border-left: 4px solid var(--red) !important;
  padding-left: 16px !important;
  margin-left: 0 !important;
  font-style: italic !important;
  opacity: 0.9 !important;
}

/* ── DESCRIPTION LIST IMPROVEMENTS ── */

dt {
  font-weight: 600 !important;
  margin-top: 12px !important;
}

dd {
  margin-left: 16px !important;
  margin-bottom: 12px !important;
}

/* ── STRONG & EMPHASIS ── */

strong, b {
  font-weight: 700 !important;
}

em, i {
  font-style: italic !important;
}

mark {
  background: rgba(200, 16, 46, 0.2) !important;
  padding: 2px 4px !important;
  border-radius: 2px !important;
}

body.theme-light mark {
  background: rgba(158, 11, 32, 0.15) !important;
}

/* ── FOCUS STATES FOR ACCESSIBILITY ── */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--red) !important;
  outline-offset: 2px !important;
}

/* ── SPACING IMPROVEMENTS ── */

/* Better margins between sections */
section + section {
  margin-top: 0 !important;
}

/* Better spacing within sections */
.section-tag {
  margin-bottom: 16px !important;
}

.section-h2 {
  margin-bottom: 32px !important;
  margin-top: 0 !important;
}

/* ── LABEL IMPROVEMENTS ── */

label {
  display: block !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
}

/* ── QUOTE & CITATION ── */

cite {
  font-style: italic !important;
  color: var(--text-3) !important;
}

small {
  font-size: 0.875em !important;
}

/* ── ABBREVIATION ── */

abbr[title] {
  text-decoration: underline !important;
  text-decoration-style: dotted !important;
  cursor: help !important;
  border-radius: 50% !important;
  z-index: 9998 !important;
}

.cursor-follower {
  pointer-events: none !important;
  border: 1px solid var(--red) !important;
  border-radius: 50% !important;
  z-index: 9997 !important;
  opacity: 0.6 !important;
}

/* ── SKIP LINK FOR ACCESSIBILITY ── */

.skip-link {
  position: absolute !important;
  top: -40px !important;
  left: 0 !important;
  background: var(--red) !important;
  color: white !important;
  padding: 8px !important;
  z-index: 100 !important;
}

.skip-link:focus {
  top: 0 !important;
}