/* TJAAA - Calm accessible theme overrides for Paradigm Shift */

:root {
  --indigo: #5C6BC0;
  --indigo-dark: #3F51B5;
  --teal: #26A69A;
  --teal-dark: #00897B;
  --bg: #FAFAFA;
  --surface: #F5F5F5;
  --text: #263238;
  --text-light: #546E7A;
}

/* Global light/accessible theme */
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Atkinson Hyperlegible', Georgia, serif !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', 'Helvetica Neue', sans-serif !important;
  color: var(--text) !important;
  font-weight: 600 !important;
}

p, li, td, th, span, label, dd, dt, blockquote {
  color: var(--text) !important;
}

a {
  color: var(--indigo) !important;
}

a:hover {
  color: var(--teal) !important;
}

strong, b {
  color: var(--text) !important;
}

/* Intro/hero section - Paradigm Shift uses ::before for panel backgrounds */
#wrapper > section.intro > header:before {
  background: var(--indigo) !important;
}

#wrapper > section.intro > header h1 {
  color: #fff !important;
  font-size: 2em !important;
}

#wrapper > section.intro > header p,
#wrapper > section.intro > header span,
#wrapper > section.intro > header li {
  color: rgba(255,255,255,0.85) !important;
}

#wrapper > section.intro > header p a {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,0.4) !important;
}

#wrapper > section.intro > header .actions .arrow span {
  color: #fff !important;
}

/* Content sections - left panel uses ::before for background */
#wrapper > section > header:before {
  background: var(--surface) !important;
}

#wrapper > section > header h2 {
  color: var(--text) !important;
}

#wrapper > section > header p {
  color: var(--text-light) !important;
}

/* Override the decorative h2::before bar color */
#wrapper > section > header h2:before {
  background: var(--indigo) !important;
}

section > .content {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

section > .content p {
  font-size: 1em !important;
  line-height: 1.8 !important;
}

section > .content img {
  border-radius: 6px;
}

/* Feature icons */
.feature-icons li {
  color: var(--text) !important;
}

.feature-icons li .icon {
  color: var(--indigo) !important;
}

.feature-icons li a {
  color: var(--text) !important;
  border-bottom: none !important;
}

.feature-icons li a:hover {
  color: var(--teal) !important;
}

/* Buttons */
.button {
  font-family: 'Raleway', sans-serif !important;
  font-weight: 600 !important;
}

.button.primary {
  background-color: var(--teal) !important;
  color: #fff !important;
}

.button.primary:hover {
  background-color: var(--teal-dark) !important;
}

/* Gallery */
.gallery a img {
  border-radius: 6px;
}

/* Footer area (last section) - uses ::before for panel bg */
#wrapper > section:last-of-type > header:before {
  background: var(--text) !important;
}

#wrapper > section:last-of-type > header:after {
  background: var(--text) !important;
}

#wrapper > section:last-of-type > header h2 {
  color: #fff !important;
}

#wrapper > section:last-of-type > .content {
  background-color: var(--text) !important;
}

#wrapper > section:last-of-type > .content p,
#wrapper > section:last-of-type > .content li,
#wrapper > section:last-of-type > .content a {
  color: rgba(255,255,255,0.65) !important;
}

#wrapper > section:last-of-type > .content a:hover {
  color: var(--teal) !important;
}

#wrapper > section:last-of-type > .content ul {
  list-style: none;
  padding: 0;
}

#wrapper > section:last-of-type > .content ul li {
  padding: 0.3em 0;
}

/* Community guide card */
.community-card {
  background: var(--surface);
  border-left: 4px solid var(--indigo);
  padding: 1.25em 1.75em;
  margin: 2em 0;
  border-radius: 0 6px 6px 0;
}

.community-card h3 {
  margin-top: 0 !important;
  color: var(--indigo-dark) !important;
}

.community-card a {
  color: var(--indigo) !important;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 600 !important;
}

/* Accessibility emphasis */
.access-note {
  background: #E8F5E9;
  border-left: 4px solid var(--teal);
  padding: 1em 1.5em;
  margin: 1.5em 0;
  border-radius: 0 6px 6px 0;
  font-size: 0.95em;
}

.access-note strong {
  color: var(--teal-dark) !important;
}

/* Responsive */
@media screen and (max-width: 736px) {
  .intro header h1 {
    font-size: 1.5em !important;
  }
  body {
    font-size: 16px !important;
  }
}