/* Move content-bottom region to align with content area */
.region--content-bottom {
  display: flex;
  width: 960px !important;
  margin-left: 320px !important; /* Push right by sidebar width */
  margin-right: 0 !important;
  padding: 0 15px !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* Updated block styling with width constraints */
#block-flexi-style-scrchours-2, #block-flexi-style-scrchours, #block-flexi-style-scrcchat {
  margin-left: 5px !important; 
  flex: 1; 
  border: 1px solid black;
  max-width: calc(33.333% - 5px) !important;
  box-sizing: border-box !important;
}

/* Fix chatbox overflow by constraining all content within the chat block */
#block-flexi-style-scrcchat * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Specifically target common chat widget elements that might overflow */
#block-flexi-style-scrcchat iframe,
#block-flexi-style-scrcchat div,
#block-flexi-style-scrcchat embed,
#block-flexi-style-scrcchat object {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure the chat block content has overflow handling */
#block-flexi-style-scrcchat .block-content {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Additional overflow protection */
#block-flexi-style-scrcchat {
  overflow: hidden !important;
}

/* Center content within block content areas but keep text left-aligned */
#block-flexi-style-scrchours-2 .block-content,
#block-flexi-style-scrchours .block-content,
#block-flexi-style-scrcchat .block-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 15px !important;
  height: 100% !important;
  text-align: left !important; /* Keep text left-aligned */
}

/* Center only the main title strong elements for SCRC Hours and News blocks (not "Appointment Only") */
#block-flexi-style-scrchours-2 > .block-content > div > strong,
#block-flexi-style-scrchours > .block-content > div > strong {
  display: block !important; /* Change from inline to block */
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: rgb(66, 66, 66) !important;
}

/* Preserve original styling for "Appointment Only" and other nested strong elements with smaller font */
#block-flexi-style-scrchours-2 span strong,
#block-flexi-style-scrchours span strong,
#block-flexi-style-scrchours-2 p strong,
#block-flexi-style-scrchours p strong {
  display: inline !important; /* Keep original inline display */
  text-align: inherit !important; /* Keep original alignment */
  width: auto !important; /* Keep original width */
  margin: 0 !important; /* Keep original margin */
  font-size: 14px !important; /* Smaller font size for "Appointment Only" */
  font-weight: 700 !important;
  color: rgb(66, 66, 66) !important;
}

/* Also target the parent div containing the main title strong element */
#block-flexi-style-scrchours-2 > .block-content > div:first-child,
#block-flexi-style-scrchours > .block-content > div:first-child {
  text-align: center !important;
  width: 100% !important;
}

/* Center ALL heading types for SCRC Hours and News blocks */
#block-flexi-style-scrchours-2 h1,
#block-flexi-style-scrchours-2 h2,
#block-flexi-style-scrchours-2 h3,
#block-flexi-style-scrchours-2 h4,
#block-flexi-style-scrchours-2 h5,
#block-flexi-style-scrchours-2 h6,
#block-flexi-style-scrchours-2 .block-title,
#block-flexi-style-scrchours h1,
#block-flexi-style-scrchours h2,
#block-flexi-style-scrchours h3,
#block-flexi-style-scrchours h4,
#block-flexi-style-scrchours h5,
#block-flexi-style-scrchours h6,
#block-flexi-style-scrchours .block-title {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* Keep Chat heading and other elements left-aligned */
#block-flexi-style-scrcchat h1,
#block-flexi-style-scrcchat h2,
#block-flexi-style-scrcchat h3,
#block-flexi-style-scrcchat h4,
#block-flexi-style-scrcchat h5,
#block-flexi-style-scrcchat h6,
#block-flexi-style-scrcchat .block-title,
#block-flexi-style-scrcchat strong,
#block-flexi-style-scrchours-2 p,
#block-flexi-style-scrchours p,
#block-flexi-style-scrcchat p,
#block-flexi-style-scrchours-2 ul,
#block-flexi-style-scrchours ul,
#block-flexi-style-scrcchat ul,
#block-flexi-style-scrchours-2 li,
#block-flexi-style-scrchours li,
#block-flexi-style-scrcchat li {
  text-align: left !important;
  width: 100% !important; /* Ensure content takes full width of centered container */
}

/* Keep links left-aligned */
#block-flexi-style-scrchours-2 a,
#block-flexi-style-scrchours a,
#block-flexi-style-scrcchat a {
  text-align: left !important;
  display: inline !important;
}

/* Remove margin from first block for proper alignment */
#block-flexi-style-scrcchat {
  margin-left: 0 !important;
}

/* Existing styles below */
.scrcnewslist {
  margin-top: 1em;
  text-align: left !important; /* Keep news list left-aligned */
  width: 100% !important;
}

.scrcnewslist li {
  margin-bottom: 1em;
  text-align: left !important; /* Keep news list items left-aligned */
}

#block-flexi-style-scrcnavblock {
  border: 1px solid black; 
  border-radius: 9px;
}

/* Increase line spacing to 1.5 for the SCRC navigation block */
#block-flexi-style-scrcnavblock ul li {
    line-height: 1.5;
}

/* Also apply to nested list items */
#block-flexi-style-scrcnavblock ul li ul li {
    line-height: 1.5;
}

/* Apply to paragraphs within the block */
#block-flexi-style-scrcnavblock p {
    line-height: 1.5;
}

/* Apply to spans within the block (since your links have spans with inline styles) */
#block-flexi-style-scrcnavblock span {
    line-height: 1.5;
}

/* Responsive design for smaller screens */
@media (max-width: 1024px) {
  .region--content-bottom {
    width: 100% !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 15px !important;
  }
}

@media (max-width: 768px) {
  .region--content-bottom {
    flex-direction: column !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 15px !important;
  }
  
  #block-flexi-style-scrchours-2, #block-flexi-style-scrchours, #block-flexi-style-scrcchat {
    margin-left: 0 !important;
    margin-bottom: 15px !important;
    max-width: 100% !important;
  }
}