/* iLoveAtheists.org — layout & accessibility fixes */

/* 1. Navigation contrast (was #777 on #999) */
#navigation a,
#primary a,
#navigation .menu a {
  color: #1a1a1a !important;
  font-weight: 600;
}
#navigation a:hover { color: #8b0000 !important; }

/* 2. Images never overflow their column */
img { max-width: 100%; height: auto; }

/* 3. Long words / URLs don't blow out the layout */
body { overflow-wrap: break-word; }

/* 4. Readable body text */
#content-area, .content { font-size: 16px; line-height: 1.6; }

/* 5. Tables scroll instead of breaking the page */
table { max-width: 100%; }

/* 6. Mobile: stack the sidebar under the content and let the page go fluid */
@media (max-width: 900px) {
  #shadow_box, #shadow_middle, #page, #main, #leftmain, #content-inner,
  #content-area, #main-content { width: auto !important; max-width: 100% !important; }
  #leftmain, #main-content, #sidebar-right, #rightmain,
  #sidebar-right-inner { float: none !important; width: 100% !important; }
  #sidebar-right { margin-top: 28px; }
  #header, #site_header, #logo { max-width: 100% !important; }
  #navigation { height: auto !important; }
  #navigation .menu li { display: inline-block; }
  #content-area { padding: 0 12px; }
}

/* 7. Search results / long lists on small screens */
@media (max-width: 600px) {
  body { font-size: 16px; }
  h1.title { font-size: 22px; line-height: 1.25; }
  #content-area h1, #content-area h2, #content-area h3 { line-height: 1.3; }
}

/* 8. Header overlap: the logo block was painting over the navigation bar */
#navigation { position: relative !important; z-index: 20 !important; }
#navigation .menu, #navigation ul, #navigation li { position: relative; z-index: 20; }
#navigation li a { display: inline-block; padding: 0 12px; line-height: 25px; }
.logo { position: relative; z-index: 1; }

/* 9. Menu labels were hidden by a theme rule (span display:none) */
#navigation a span, #primary a span, #navigation .menu a span {
  display: inline !important;
  text-indent: 0 !important;
}

/* 10. Navigation wraps cleanly instead of overflowing onto the hero */
#navigation {
  height: auto !important;
  background: #9a9a9a !important;
  padding: 4px 0 !important;
}
#navigation ul.links,
#navigation .menu {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
#navigation li {
  float: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
#navigation li a { display: block !important; padding: 3px 12px !important; line-height: 20px !important; }