@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,100;0,400;1,100;1,400&display=swap');
/* imported the lora font that City of Boston uses for its branding from Google Fonts */

.separator-bar {
    width: 100%;
    height: 100px;
    background-color: #091f2f;
    display: flex;
    align-items: center;
    position: relative;
}

.top-placeholder-heading {
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 4.3em;
    font-weight: 900;
    color: #091f2f;
    text-transform: uppercase;
    margin: 250px auto 0 auto;
    padding: 60px 40px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    background-color: #ffffff;
    max-width: 90%;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
} /* used inspect to determine spacing and font size for the main heading from the City of Boston website. Maxed out the font-weight to 900 for emphasis */

.placeholder-subheader {
    font-family: Lora, Georgia, "Times New Roman", serif;
    font-size: 1.6em;
    color: #091f2f;
    font-style: italic;
    font-weight: 80;
    margin: -5px auto 30px auto;
    padding: 0 20px;
    max-width: 90%;
    box-sizing: border-box;
    line-height: 1.9;
} /* used a similar approach to the City of Boston website for the subheader */

.separator-logo {
    height: 90%;
    margin-left: 8px;
    object-fit: contain;
}

body {
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

p {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1em;
    color: #333;
    line-height: 1.8;
    font-weight: 400;
}

ul, li {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1em;
    color: #333;
    line-height: 1.8;
    font-weight: 400;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
    color: #0b2a4a;
    font-weight: 900;
    text-transform: uppercase;
    display: block;
    padding-bottom: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    position: relative;
    padding-right: 0;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 7px;
    width: calc(90vw - 40px);
    background-color: #0b2a4a;
} 

h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    color: #0b2a4a;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 7px solid #0b2a4a;
    display: block;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 30px;
    width: 100%;
    box-sizing: border-box;
}

h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    color: #0b2a4a;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 7px solid #0b2a4a;
    display: block;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 30px;
    width: 100%;
    box-sizing: border-box;
}

h2.smaller-header {
    font-size: 1.5em;
}

.site-header {
    text-align: left;
    padding: 0;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    background-color: #fff;
    height: 80px;
}

/* Logo */
.logo {
    max-width: 460px;
    width: 460px;
    height: auto;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

/* Top Navigation Bar */
.top-nav {
  background-color: #ffffff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  padding: 0 20px;
  box-sizing: border-box;
  height: auto;
  flex: 1;
  flex-wrap: wrap;
}

.nav-link {
  color: #0b2a4a;
  text-decoration: none;
  font-weight: 250;
  text-transform: uppercase;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 0.87em;
  white-space: nowrap;
  letter-spacing: 0.7px;

}  /* set the font size to .87 to try the guess the exact size of the tabs in the City of Boston website */

.nav-link:hover {
  color: red;
}  /* whenever a user hovers over a tab, this turns the color to red */

/* Header text left-aligned */
.header-text {
    margin: 0;
    padding: 20px 30px;
    font-size: 2em;
    color: #0b2a4a;
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 1px;
    position: relative;
}

.header-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30px;
    height: 7px;
    width: calc(90vw - 70px);
    background-color: #0b2a4a;
}  /*adjusts the width of the underline for the header text in 'Mapping out the top repeat offenders' */

.separator-bar {
    width: 100%;
    height: 100px;
    background-color: #091f2f;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: auto;
}

.full-width-image-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 74px;
    z-index: 1;
}  

.full-width-image-section img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

/* Body content section */
.content-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap:wrap;
    padding: 20px;
    max-width: 1200px;
    margin: 20px auto;
    gap: 10px;
    box-sizing: border-box;
}

.side-by-side-content-section {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 20px;
    max-width: 90%;
    margin: 20px auto;
    margin-bottom: 70px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.95);
    align-items: center;
}

.content-wrapper {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.content-wrapper h2 {
    width: 100%;
    margin: 0 0 20px 0;
    text-align: left;
}

.header-top-section {
    padding: 20px;
    align-items: flex-start;
    margin-bottom: 0 !important;
    margin-top: -20px !important;
    background-color: rgba(255, 255, 255, 0.95);
}

.header-top-section h2 {
    margin: 0;
    text-align: left;
}

.header-top-section + .side-by-side-content-section {
    margin-top: 0 !important;
}

.side-by-side-content-section .text {
    flex: 1;
    min-width: 250px;
    max-width: 100%;
    margin: 0;
    text-align: left;
}

.side-by-side-content-section .image-item {
    flex: 1.8;
    min-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}  /* increased the size of the image container to better display images. Some of the maps would be hard to read otherwise  */



.side-by-side-section {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    max-width: 70%;
    margin: 5px auto;
    box-sizing: border-box;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.95);
}

.side-by-side-section .image-item img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 400px;
}

.image-item {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.image-item img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

img[src*="top_five"] {
    border: 1px solid #e8e8e8;
}

.allston-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 700px;
    max-width: 900px;
}

.content-section .text {
    flex: 1;
    max-width: 500px;
    margin: 0;
    text-align:left; 


}
.content-section .image-container{
 margin-left: 100px;
 flex-shrink: 0;

}

/*make image in square container*/ 
.content-section .image-container img {  
  width: 500px;
  max-width: 500px;
  object-fit: cover;
  border: 3px solid #0b2a4a;
  border-radius: 8px;
            
}

.disclaimer-container {
    width: 100%;
    background-color: #c74650;
    padding: 15px 0;
    text-align: center;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0;
    opacity: 0.85;
}

.methodology-page-disclaimer {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
}

.blue-background-section {
    width: 100%;
    background-color: #091f2f;
    padding: 60px 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 10;
    margin-top: 0;
     /* set the background color and padding for the blue section to match the City of Boston website. Thi was so that the user did not become bored with the navigation experience */
}

.blue-background-section .side-by-side-content-section {
    background-color: transparent;
    margin-left: 20px !important;
    margin-right: auto !important;
}

.blue-background-section .side-by-side-content-section h2,
.blue-background-section .header-top-section h2 {
    color: white;
    border-bottom-color: white;
}

.blue-background-section .header-top-section h2::after {
    background-color: white;
}

.blue-background-section .text,
.blue-background-section p {
    color: white;
}

.disclaimer-container h3 {
    text-align: center;           
    font-size: 1.0em;             
    font-family: Helvetica, sans-serif;  
    color: #ffffff;
    font-style: normal;
    font-weight: bold;
    margin: 0;
    border-bottom: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Back to Top Button */
.back-to-top-btn {
    position: fixed;
    bottom: 40px;
    right: 18px;
    padding: 12px 10px;
    background-color: #808080;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;
}

.button-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.button-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.button-text {
    font-weight: bold;
    font-size: 11px;
    font-family: Arial, sans-serif;
    white-space: nowrap;
    line-height: 1;
}

.back-to-top-btn:hover {
    background-color: #696969;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}  /* set the color of the back-to-top navigation button to a light gray */

.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}