/* ==========================================================================
   Science Page Styles
   Replicates heatreduction.com/science layout and visual elements.
   Scoped to .science-page to avoid conflicts with Bootstrap theme.
   ========================================================================== */

@font-face {
    font-family: "neue-haas-unica";
    src: url("https://use.typekit.net/af/8a8abc/00000000000000007735bb07/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),
         url("https://use.typekit.net/af/8a8abc/00000000000000007735bb07/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),
         url("https://use.typekit.net/af/8a8abc/00000000000000007735bb07/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
}
@font-face {
    font-family: "neue-haas-unica";
    src: url("https://use.typekit.net/af/92a736/00000000000000007735bb14/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
         url("https://use.typekit.net/af/92a736/00000000000000007735bb14/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
         url("https://use.typekit.net/af/92a736/00000000000000007735bb14/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
}
@font-face {
    font-family: "neue-haas-unica";
    src: url("https://use.typekit.net/af/d7f1e9/00000000000000007735bb2a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
         url("https://use.typekit.net/af/d7f1e9/00000000000000007735bb2a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
         url("https://use.typekit.net/af/d7f1e9/00000000000000007735bb2a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

.science-page {
    /* Reset & Base within this page to avoid bootstrap conflict */
    font-size: 18px;
    line-height: normal;
    font-weight: 350;
    font-family: "neue-haas-unica", "Helvetica Neue", Helvetica, sans-serif;
    color: #323232;
    padding-top: 100px; /* Offset for fixed navbar */
}

.science-page * {
    font-family: "neue-haas-unica", "Helvetica Neue", Helvetica, sans-serif;
}

.science-page h1, .science-page h2, .science-page h3, .science-page h4, .science-page h5, .science-page h6 {
    color: #323232;
    margin-bottom: 15px;
    margin-top: 0;
}

.science-page h1 {
    font-size: 43px;
    font-weight: 800;
    line-height: 103%;
}

.science-page h2, .science-page h2 * {
    font-size: 28px;
    font-weight: 800;
    line-height: 145.6%;
    text-align: left;
    color: #e95c24;
}

.science-page h3 {
    font-size: 20px;
    line-height: 145.6%;
    color: #e95c24;
    font-weight: 800;
}

.science-page h4 {
    font-size: 18px;
    font-weight: 800;
    line-height: 24px;
}

.science-page p {
    font-weight: normal;
    margin-bottom: 12px;
}

.science-page a {
    color: #e95c24;
    text-decoration: none;
    cursor: pointer;
}

.science-page a:hover {
    color: #e95c24;
}

.science-page ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.science-page strong {
    font-weight: bold !important;
}

.science-page .clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Page Layout */
.science-page .page-wrapper .content-main {
    position: relative;
    min-height: 600px;
}

/* Buttons */
.science-page .button {
    color: #fff;
    background-color: #e95c24;
    border-radius: 25px;
    display: inline-block;
    text-align: center;
    margin-top: 15px;
}

.science-page .button a {
    color: #fff;
    padding: 10px 25px;
    font-size: 14px;
    display: block;
    font-weight: 500;
}

.science-page .button:hover {
    opacity: .8;
}

/* Article / Sections */
.science-page article {
    background: #fff;
    border-radius: 0px 100px 0px 0px;
    position: relative;
    z-index: 3;
}

.science-page section {
    margin: 0 auto;
    padding: 50px 0;
    position: relative;
    z-index: 3;
}

.science-page .section-container {
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
}

.science-page .section-container .section-content {
    text-align: left;
}

/* Reduce spacing between Charts and Expertise sections */
.science-page .section1 section.visual-chart-list {
    padding-bottom: 10px;
}
.science-page .section2 section.default {
    padding-top: 10px;
}

.science-page .chart-list-footer {
    max-width: 1200px;
    margin: 15px auto 0;
    padding-left: 0;
}

@media only screen and (max-width: 1280px) {
    .science-page .chart-list-footer {
        padding-left: 44px;
        padding-right: 44px;
    }
}
@media only screen and (max-width: 1195px) {
    .science-page .chart-list-footer {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
}

/* Lists */
.science-page section .section-header .body-content ul {
    list-style: none;
    margin-left: 0;
}

.science-page section .section-header .body-content ul li {
    background: url(/themes/custom/heatreduction/images/icon_ghr_plus.svg) no-repeat left 5px;
    background-size: 18px;
    padding-left: 35px;
    margin-bottom: 12px;
}

.science-page section .section-columns li ul, .science-page section .body-content ul {
    list-style-type: disc;
}

.science-page section .section-columns li ul li, .science-page section .body-content ul li {
    margin: 0 0 10px 20px;
}

.science-page section .section-columns li ul.default, .science-page section .body-content ul.default {
    list-style-type: disc !important;
}

.science-page section .section-columns li ul.default li, .science-page section .body-content ul.default li {
    background: none !important;
    padding-left: 0 !important;
}

/* Hero Section */
.science-page .section-first {
    height: 335px;
}

.science-page .section-first section {
    padding-top: 0px;
}

.science-page .section-first h1, .science-page .section-first p {
    color: #323232;
}

.science-page .section-first .section-header, .science-page .section-first .body-content p, .science-page .section-first .button {
    text-align: left;
}

.science-page .section-first .section-header {
    padding-top: 130px; /* Push text down to middle of mountain */
}

.science-page .section-first .section-header h1 {
    position: relative;
}

.science-page .section-first .section-header .body-content p {
    line-height: normal;
}

.science-page .section-first .section-header .body-content .button {
    float: none !important; /* Remove float so it contributes to container height */
    display: inline-block;
    margin-bottom: 30px; /* Add space below the button before the curve starts */
}

/* Clearfix to absolutely guarantee the section-first expands */
.science-page .section-first .section-header .body-content::after {
    content: "";
    display: table;
    clear: both;
}

.science-page .section-content .background-image {
    background-repeat: no-repeat;
    background-position: 0 -140px;
    background-size: 100%;
}

.science-page .section-content .bg-image {
    position: relative; /* RESTORED TO NORMAL FLOW! This stops it from covering the header */
    width: 100%;
    height: 550px !important; /* Huge height guarantees it extends far behind the white section below */
    overflow: hidden;
    z-index: 0;
}

.science-page .section-content .bg-image img {
    width: 100%;
    height: 100% !important; /* Force image to stretch into the 550px container */
    object-fit: cover;
    margin-top: -10%;
}

/* Make sure the title has space since the image is now overlapping */
.science-page .section-first {
    margin-top: -550px; /* Physically pull the text container UP so it perfectly overlaps the normal-flow background image! */
    position: relative;
    z-index: 10;
}

.science-page .section-first .section-fade {
    background-image: linear-gradient(#FFFFFF, transparent);
    background-size: 100%;
    width: 100%;
    height: 500px;
    position: absolute;
    z-index: -1;
}

/* Visual Chart List Section */
.science-page section.visual-chart-list .section-container {
    max-width: 100%;
}

.science-page section.visual-chart-list .section-container .section-header {
    max-width: 1200px;
    text-align: center;
    margin: 0 auto 100px;
}

.science-page section.visual-chart-list .section-columns {
    margin-top: 35px;
}

.science-page section.visual-chart-list .section-columns > li {
    margin: 0 0 0 44px;
    position: relative;
    background: #f4f4f4;
    border-radius: 30px 0 0 30px;
    display: block; /* override standard li */
    padding-top: 80px;
}

.science-page section.visual-chart-list .section-columns > li .column-content {
    margin-bottom: 90px;
}

.science-page section.visual-chart-list .section-columns > li:last-child .column-content {
    margin-bottom: 0;
}

.science-page section.visual-chart-list .section-columns > li .column-content > div {
    max-width: 1200px;
    margin: 0 auto;
    width: calc(100% - 44px);
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
    padding-right: 44px;
}

.science-page section.visual-chart-list .section-columns > li .column-content > div .chart-content {
    max-width: 285px;
    padding-left: 44px;
}

.science-page section.visual-chart-list .section-columns > li .column-content > div .chart-image {
    text-align: right;
}

.science-page section.visual-chart-list .section-columns > li .column-content > div .chart-image.has-note img {
    margin-bottom: 15px;
}

.science-page section.visual-chart-list .section-columns > li .column-content > div .chart-image .footnote,
.science-page section.visual-chart-list .section-columns > li .column-content > div .chart-image .footnote a {
    font-size: 11px;
}

.science-page section.visual-chart-list .section-columns > li .column-content > div .chart-image .footnote {
    margin: 0 40px 20px 0;
}

.science-page section.visual-chart-list .section-columns > li .column-content > div .chart-image img {
    width: 100%;
    height: auto;
    max-width: 650px;
    margin-bottom: 50px;
}

.science-page section.visual-chart-list .section-columns > li .column-content > div .chart-image img:first-child {
    margin-top: -40px;
}

.science-page section.visual-chart-list .section-columns > li .column-content > div h4 {
    font-size: 20px;
}

.science-page section.visual-chart-list .section-columns > li:nth-child(even) {
    margin: 0 44px 0 0;
    border-radius: 0 30px 30px 0;
}

.science-page section.visual-chart-list .section-columns > li:nth-child(even) .column-content > div {
    flex-direction: row;
    padding: 0 0 0 44px;
}

/* Responsiveness */
@media only screen and (max-width: 1500px) {
    .science-page .section-content .bg-image img {
        margin-top: -7%;
    }
}

@media only screen and (max-width: 1280px) {
    .science-page .section-container {
        width: calc(100% - 88px);
        margin: 0 44px;
    }
    .science-page section.visual-chart-list .section-container {
        margin: 0;
        width: 100%;
    }
}

@media only screen and (max-width: 1195px) {
    .science-page h1 { font-size: 40px; }
    .science-page h2 { font-size: 28px; }
    .science-page h3 { font-size: 18px; }
    .science-page h4, .science-page h5, .science-page h6 { font-size: 18px; }
    .science-page p, .science-page li { font-size: 16px; }
    
    .science-page section.visual-chart-list .section-columns > li .column-content {
        padding-bottom: 90px;
        margin-bottom: 0;
    }
    .science-page section.visual-chart-list .section-columns > li .column-content > div {
        display: block;
        text-align: center;
    }
    .science-page section.visual-chart-list .section-columns > li .column-content > div .chart-content {
        margin-left: calc(50% - 300px);
        max-width: initial;
        padding: 0;
        text-align: left;
    }
    .science-page section.visual-chart-list .section-columns > li .column-content > div .chart-image {
        text-align: center;
    }
    .science-page section.visual-chart-list .section-columns > li:nth-child(even) {
        margin: 0;
        background: none;
    }
    .science-page section.visual-chart-list .section-columns > li:nth-child(even) .column-content {
        justify-content: flex-start;
    }
    .science-page section.visual-chart-list .section-columns > li:nth-child(even) .column-content > div {
        flex-direction: column-reverse;
    }
}

@media only screen and (max-width: 885px) {
    .science-page h1 { font-size: 30px; }
    .science-page p { font-size: 16px; }
    
    .science-page .section-content.background-image {
        background-size: auto 42%;
        background-position: center top;
    }
    .science-page article {
        border-radius: 60% 180px 0 0 !important; /* Graceful sweeping curve on the left */
    }
    
    .science-page .section-first {
        height: auto !important;
        min-height: 260px;
    }
    .science-page .section-first section {
        padding-top: 0;
    }
    .science-page .section-first .section-header {
        max-width: 100%;
        padding-top: 100px; /* Push text down on smaller screens too */
    }
    .science-page .section-first p {
        font-size: 16px !important;
    }
    
    .science-page section.visual-chart-list .section-columns > li .column-content > div {
        width: 80%;
        padding: 0;
    }
    .science-page section.visual-chart-list .section-columns > li .column-content > div .chart-content {
        margin-left: 0;
    }
}

@media only screen and (max-width: 580px) {
    .science-page .section-container {
        margin: 0 30px;
        width: calc(100% - 60px);
    }
    .science-page section.visual-chart-list .section-container .section-header {
        margin-left: 30px;
        margin-right: 30px;
    }
    .science-page section.visual-chart-list .section-columns > li {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 475px) {
    .science-page section.visual-chart-list .section-columns > li .column-image img {
        max-width: 350px;
    }
    .science-page section.visual-chart-list .section-columns > li .column-content {
        padding-bottom: 0;
        min-height: initial;
    }
    .science-page section.visual-chart-list .section-columns > li .column-content:first-child {
        padding-bottom: 90px;
    }
}