/* Mobile / narrow-viewport overrides — loaded last, highest priority */

@media (max-width: 1100px) {

  /* 1. Nothing may be wider than the screen */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }
  body * { max-width: 100% !important; box-sizing: border-box !important; }

  /* 2. Convert the fixed 1000px Drupal shell to fluid */
  #shadow_box, #shadow_middle, #shadow_top, #shadow_bottom,
  #page, #header, #site_header, .site_header, .logo,
  #main, #main-nosidebar, #leftmain, #rightmain, #topleftmain, #bottomleftmain,
  #content-inner, #content-area, #main-content, .main-content, .section_header,
  #sidebar-right, #sidebar-right-inner, #sidebar-left,
  #navigation, #navigation .primary, #navigation .links, #navigation .menu,
  .block, .block-inner, .node, .node-inner, .content, ul.buttons {
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
  }

  /* 3. Put the article BEFORE the sidebar on phones */
  #main, #main-nosidebar { display: flex !important; flex-direction: column !important; }
  #rightmain { order: 1 !important; }
  #leftmain  { order: 2 !important; }
  #sidebar-right { order: 3 !important; margin-top: 20px; }

  /* 4. Navigation wraps instead of running off-screen */
  #navigation { height: auto !important; padding: 4px 0 !important; }
  #navigation ul.links, #navigation .menu {
    display: flex !important; flex-wrap: wrap !important; float: none !important;
  }
  #navigation li { float: none !important; }
  #navigation li a { display: block !important; padding: 3px 10px !important; }

  /* 5. Media can't overflow */
  img, table, iframe, object, embed, video { max-width: 100% !important; height: auto !important; }
  pre, code { white-space: pre-wrap !important; word-break: break-word; }

  /* 6. Readable type and gutters */
  #content-area, .content { font-size: 17px !important; line-height: 1.65 !important; }
  #content-area p { margin: 0 0 14px 0; }
  h1.title { font-size: 24px !important; line-height: 1.25 !important; }
  h2 { font-size: 21px !important; line-height: 1.3 !important; }
  h3 { font-size: 18px !important; }
  #content-area { padding: 0 14px !important; }

  /* 7. Decorative background images break at narrow widths */
  #main, #main-nosidebar, #shadow_middle, #shadow_box { background-image: none !important; }
}

@media (max-width: 480px) {
  h1.title { font-size: 22px !important; }
  #content-area { padding: 0 12px !important; }
  ul, ol { padding-left: 20px !important; }
  #content-area, .content { font-size: 17px !important; }
}

/* Header polish for phones */
@media (max-width: 1100px) {
  .element-invisible, .element-focusable { position: absolute !important; left: -9999px !important; top: -9999px !important; }
  #header, #site_header, .site_header { height: auto !important; min-height: 0 !important; padding: 6px 0 !important; background-image: none !important; }
  .logo { margin: 0 !important; padding: 4px 12px !important; }
  .logo img, .logo a img { max-height: 64px !important; width: auto !important; }
  #navigation { margin: 0 !important; }
  #navigation ul.links, #navigation .menu { justify-content: flex-start; }
  #navigation li a { font-size: 15px !important; line-height: 1.35 !important; padding: 5px 10px !important; }
  ul.primary, ul.secondary { margin: 0 !important; padding: 0 !important; }
  ul.primary li, ul.secondary li { float: none !important; display: inline-block !important; }
  ul.primary li a, ul.secondary li a { font-size: 15px !important; padding: 4px 10px !important; display: inline-block; }
}

/* Compact header/nav for phones */
@media (max-width: 1100px) {
  p.login, #block-block-10, .header_b { display: none !important; }
  .site_header { position: relative !important; }
  #navigation { padding: 2px 0 !important; }
  #navigation ul.links, #navigation .menu { gap: 0 !important; }
  #navigation li { flex: 0 0 auto !important; }
  #navigation li a { font-size: 13.5px !important; padding: 4px 9px !important; white-space: nowrap !important; line-height: 1.3 !important; }
  ul.primary li a, ul.secondary li a { font-size: 13.5px !important; padding: 4px 9px !important; }
  #content-inner, #content-area { padding-top: 0 !important; }
}

/* Single-row swipeable nav on phones */
@media (max-width: 1100px) {
  #navigation ul.links, #navigation .menu {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px !important;
  }
  #navigation ul.links::-webkit-scrollbar, #navigation .menu::-webkit-scrollbar { display: none; }
  #navigation li { flex: 0 0 auto !important; }
  #navigation li a { white-space: nowrap !important; font-size: 14px !important; padding: 6px 10px !important; }
  ul.primary, ul.secondary { flex-wrap: nowrap !important; overflow-x: auto !important; white-space: nowrap !important; }
}

/* FIX: #content was still float:left on narrow screens, so it left the flow
   and the sidebar blocks rendered on top of it (blocked taps on the player). */
@media (max-width: 1100px) {
  #content, #content .content, #content-inner, #content-area,
  #main-content, #rightmain, #leftmain, #bottomleftmain, #sidebar-right, #sidebar-left {
    float: none !important;
    clear: both !important;
    position: static !important;
  }
  #content { width: 100% !important; max-width: 100% !important; }
  #rightmain { overflow: visible !important; height: auto !important; }
  #main { display: block !important; }
  #sidebar-right, #sidebar-left { margin-top: 24px !important; }
}

/* The collapsible panel already prints "Top 10 Challenges" — hide the block's duplicate heading */
@media (max-width: 1100px) {
  .m-top10 .block-title, .m-top10 h2.block-title, .m-top10 .title.block-title { display: none !important; }
}

/* Header: restore the tiling halftone graphic that fills to the right of the wordmark.
   The theme CSS pointed at /themes/... which 404s; this uses the real assets path. */
#header { background: #000 !important; border: 0 !important; padding: 0 !important; }
.site_header {
  width: 100% !important;
  height: 80px !important;
  min-height: 80px !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #000 !important;
  background-image: url("assets/themes/iloveatheists/images/main_hdr_bg.png") !important;
  background-repeat: repeat-x !important;
  background-position: left top !important;
  background-size: auto 80px !important;
}
.site_header .logo { margin: 0 !important; padding: 0 !important; height: 80px !important; }
.site_header .logo img { height: 80px !important; width: auto !important; max-width: none !important; display: block; }

@media (max-width: 1100px) {
  .site_header { height: 64px !important; min-height: 64px !important; background-size: auto 64px !important; }
  .site_header .logo { height: 64px !important; }
  .site_header .logo img { height: 64px !important; width: auto !important; }
}

/* Brand colour: carry the logo's maroon into article headings (not sidebar chrome) */
#content-header h1.title,
#content-area h1, #content-area h2, #content-area h3,
.node .content h1, .node .content h2, .node .content h3 {
  color: #8b0000 !important;
}
#content-area h1 a, #content-area h2 a, #content-area h3 a { color: #8b0000 !important; }
/* keep sidebar / block titles neutral so the red stays meaningful */
#sidebar-left .block-title, #sidebar-right .block-title,
.block-title, h3.title.block-title { color: #444 !important; }

/* Category tag on the Top 100 list */
.cat-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8b0000;
  background: #f6ecec;
  border: 1px solid #e3cccc;
  border-radius: 3px;
  white-space: nowrap;
  vertical-align: 1px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .cat-tag { display: block; margin: 3px 0 0 0; width: fit-content; font-size: 10px; }
}

/* desktop gutter so the left category column never touches the article */
@media (min-width: 901px) {
  #content-area, #content-inner { padding-left: 16px; box-sizing: border-box; }
}

/* ordered lists: leave room for two-digit markers so "10." isn't clipped */
@media (max-width: 900px) {
  #content-inner ol, #content-area ol, .content ol {
    padding-left: 2.6em !important;
    margin-left: 0 !important;
    list-style-position: outside;
  }
  #content-inner ol > li, #content-area ol > li, .content ol > li {
    padding-left: 0.3em;
    text-indent: 0;
  }
}

/* section label bar ("About ILA" tab) was redundant with the breadcrumb */
p.header_bg { display: none !important; }