@import url("../index.html");

/* accessibility.css */

:root {
  /* Define your primary colors used throughout the site */
  --mahogany: #4a2c2a; /* Dark Reddish-Brown (Footer Background) */
  --cream: #fdf5e6; /* Light Creamy White (Background) */
  --gold: #d4af37; /* Gold Accent (Links, Highlights) */
  --chocolate: #7b3f00; /* Secondary Brown */
  --text: #5a4a42; /* Primary Text Color */
}

/* The rest of the accessibility-specific styles can follow below */
/* ... */
/* Ensure the body and HTML use the same basic setup as the main site */
body {
  font-family: "Crimson Text", serif;
  line-height: 1.6;
  background-color: var(
    --cream
  ); /* Assuming var(--cream) is defined in index.css */
  color: var(--text); /* Assuming var(--text) is defined in index.css */
  margin: 0;
  padding: 0;
}

/* Basic container for content centering */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Styling for the main content block */
.content-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 80px 20px;
  background-color: var(--cream);
}

/* Title styling to match main site's heading look */
.content-container h1 {
  font-family: "Warbler Text", serif;
  color: var(--mahogany); /* Assuming var(--mahogany) is defined in index.css */
  font-size: 3em;
  text-align: center;
  border-bottom: 2px solid var(--gold); /* Assuming var(--gold) is defined in index.css */
  padding-bottom: 10px;
  margin-bottom: 40px;
}

.content-container h2 {
  font-family: "Crimson Text", serif;
  font-weight: 700;
  color: var(
    --chocolate
  ); /* Assuming var(--chocolate) is defined in index.css */
  margin-top: 30px;
  font-size: 1.8em;
}

.content-container p,
.content-container ul {
  font-family: "Crimson Text", serif;
  color: var(--text);
  font-size: 1.1em;
  line-height: 1.7;
  margin-bottom: 15px;
}

.content-container li {
  margin-bottom: 5px;
}

/* Link styling */
.content-container a {
  color: var(--mahogany);
  text-decoration: underline;
  transition: color 0.3s ease;
}

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

/* --- Header and Footer Styling Inheritance --- */

/* Assuming all header, nav, logo, footer, footer-column, and social-links styles 
are defined in your main index.css and are globally applicable. 
If not, you may need to copy those specific styles from index.css into this file. 
Since they are linked, they should look identical. */

/* Basic Header/Footer overrides if needed */
header {
  /* Ensure colors match the main site */
  background-color: var(--mahogany);
  color: var(--cream);
  width: 100%;
}

.logo a {
  text-decoration: none;
  color: var(--gold);
}

.copyright {
  /* Ensure the copyright area has links that stand out on the dark background */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  text-align: center;
  font-size: 0.9em;
  color: var(--cream);
}

.copyright a {
  color: var(--cream);
  text-decoration: none;
  padding: 0 5px;
}

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

/* Ensure the fixed logo is not too distracting on a clean page */
.fixed-logo-bottom {
  display: none; /* Hide or style minimally */
}