/* ---------------------------------------------------------------
   Time For Worship — teal accent overrides for the Twenty theme.
   Loaded AFTER main.css so these win. Uses the theme's own teal (#83d3c9)
   and its darker link teal (#3fb1a3) to replace washed-out grays/blues.
   --------------------------------------------------------------- */

:root {
  --tfw-teal: #3fb1a3;        /* darker teal, good for text/headings */
  --tfw-teal-bright: #83d3c9; /* the theme's bright teal */
  --tfw-teal-dark: #2f8a7f;   /* hover */
}

/* Banner header (the icon + page title strip) -> teal background */
#main > header.special {
  background-color: var(--tfw-teal);
  color: #fff;
  padding: 3em 2em;
  border-radius: 6px;
}
#main > header.special h2,
#main > header.special .icon { color: #fff; }
#main > header.special p { color: rgba(255,255,255,0.9); }

/* Logo + nav hover accents */
#header #logo a:hover { color: var(--tfw-teal); }
#header nav > ul > li > a:hover { color: var(--tfw-teal); }
#header nav > ul > li.active > a { color: var(--tfw-teal); }

/* Content headings in teal */
.content h2, .content h3, .content h4 { color: var(--tfw-teal); }

/* Links: keep teal but slightly stronger + clearer hover */
a { color: var(--tfw-teal); }
a:hover { color: var(--tfw-teal-dark); }

/* Footer accent — teal background with white text */
#footer {
  background: var(--tfw-teal);
  color: rgba(255,255,255,0.85);
}
#footer a { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
#footer a:hover { color: #fff; border-bottom-color: #fff; }
#footer .copyright li { color: rgba(255,255,255,0.85); }
#footer .copyright li:not(:first-child) { border-left-color: rgba(255,255,255,0.35); }

/* Non-clickable group headings inside dropdown menus */
#nav .nav-header > span {
  display: block;
  padding: 0.5em 1em 0.2em;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tfw-teal);
  opacity: 0.8;
  cursor: default;
}

/* A–Z letter navigation row (on the index pages) */
.az-nav {
  list-style: none;
  margin: 0 0 2em 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: center;
}
.az-nav li { margin: 0; padding: 0; }
.az-nav a {
  display: inline-block;
  min-width: 2.6em;
  padding: 0.5em 0.8em;
  text-align: center;
  background: var(--tfw-teal);
  color: #fff !important;
  border-bottom: none;
  border-radius: 4px;
  font-weight: 600;
}
.az-nav a:hover { background: var(--tfw-teal-dark); color:#fff !important; }

/* Clickable section headings inside the Hymns dropdown */
#nav ul li > a.nav-section,
#nav .nav-section > a {
  font-weight: 700;
  color: var(--tfw-teal) !important;
  text-transform: uppercase;
  font-size: 0.82em;
  letter-spacing: 0.08em;
}

/* Article index lists on the category pages */
.article-index {
  list-style: none;
  margin: 1em 0;
  padding: 0;
}
.article-index li {
  margin: 0;
  border-bottom: 1px solid rgba(124,128,129,0.18);
}
.article-index li:last-child { border-bottom: none; }
.article-index a {
  display: block;
  padding: 0.7em 0.2em;
  font-weight: 600;
  border-bottom: none;
}
/* Darker body + menu text */
body, input, select, textarea {
  color: #222;          /* darker than the theme's #7c8081 */
  font-weight: 380;
}
#header nav ul li a {
  color: #222;          /* menu links a bit darker too */
  font-weight: 380;
}

a,
.content h2, .content h3, .content h4,
#main > header.special h2 a,
#nav .nav-section > a {
  color: #2f8a7f;
   font-weight: 400;
}
a:hover {
  color: #27726a;
   font-weight: 400;
}
/* Fix mobile slide-out menu (#navPanel) items whose text wraps and overlaps */
#navPanel .link {
  height: auto;
  line-height: 1.5em;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}