/* ==========================================================================
   styles-home.css
   Home page specific styles for Northside Mental Health
   Companion to front-page.php
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

.home h2{text-transform: uppercase;}

/* ==========================================================================
   WHAT WE DO - #wwdSection
   ========================================================================== */

#wwdSection {
	scroll-margin-top: 80px;
    background: #d5a66e;
    color: #fff;
}

#wwdSection .container-xl {
    padding-top: 57px;
    padding-bottom: 67px;
}

#wwdSection h2 {
    font-size: 36px;
    color: #fff;
    margin-bottom: 43px;
    text-align: center;
}

#wwdText {
    font-size: 18px;
    letter-spacing: .075em;
}

#wwdText a {
    color: #fff;
    text-decoration: underline;
}

#wwdText a:hover {
    color: #17415a;
    text-decoration: underline;
}

#wwdButton {
    text-align: center;
}

#wwdButton a {
    font-size: 24px;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #fff;
    display: inline-block;
    border: 2px solid #fff;
    padding: 7px 20px;
    margin-top: 15px;
    text-decoration: none;
    transition: all .25s linear;
}

#wwdButton a:hover {
    color: #D5A66E;
    background: #fff;
    text-decoration: none;
}


/* ==========================================================================
   SERVICES - #serviceSection
   ========================================================================== */

#serviceSection {
    display: flex;
}

#serviceSection a{text-decoration: underline;}

#ssLeft {
    width: 50%;
    background-image:url("assets/images/common/nmh-pattern.gif");
    background-repeat: repeat;
}

#ssLeft .contentCon {
    width: 550px;
    float: right;
    padding: 55px 6.36363% 60px 0;
}

#ssLeft h2 {
    color: #838180;
    border-bottom: solid #e5c9a6 5px;
    display: inline-block;
    font-size: 48px;
    margin-bottom: .5em;
}

#ssLeft h3 {
    color: #838180;
    font-size: 24px;
    margin-bottom: .75em;
    line-height: 1.4;
}

#ssRight {
    width: 50%;
    background-size: cover;
    background-position: center;
}

.servicesList ul {
    margin: 0 0 1.5em;
    padding: 0;
    list-style: none;
}

.servicesList ul li {
    line-height: 1.4;
    margin: 0 0 .5em;
    padding: 0;
}

#ssButton a {
    font-size: 24px;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #d5a66e;
    display: inline-block;
    border: 2px solid #d5a66e;
    padding: 7px 20px;
    margin-top: 15px;
    text-decoration: none;
    transition: all .25s linear;
}

#ssButton a:hover {
    color: #D5A66E;
    background: #fff;
    text-decoration: none;
}


/* ==========================================================================
   ADDITIONAL CONTENT - #addSection
   ========================================================================== */

/* inherits Bootstrap container padding — add overrides here if needed */


/* ==========================================================================
   GET STARTED - #gsSection
   ========================================================================== */

#gsSection {
    display: flex;
}

#gsSection p a,
#gsSection li a {
    color: #fff;
    text-decoration: underline;
}

#gsSection p a:hover,
#gsSection li a:hover {
    color: #a2adba;
}

#gsLeft {
    width: 50%;
    background-size: cover;
    background-position: center;
}

#gsRight {
    width: 50%;
    background: #313f4f;
}

#gsRight .contentCon {
    width: 550px;
    padding: 55px 0 60px 6.36363%;
    color: #fff;
}

#gsRight h2 {
    color: #fff;
    border-bottom: solid #56626f 5px;
    display: inline-block;
    font-size: 48px;
    margin-bottom: .5em;
}

#gsRight h3 {
    color: #fff;
    font-size: 24px;
    margin-bottom: .75em;
    line-height: 1.4;
}

#gsButton a {
    font-size: 24px;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #fff;
    display: inline-block;
    border: 2px solid #fff;
    padding: 7px 20px;
    margin-top: 15px;
    text-decoration: none;
    transition: all .25s linear;
}

#gsButton a:hover {
    color: #D5A66E;
    background: #fff;
    text-decoration: none;
}


/* ==========================================================================
   LINKS SECTION - Newsletter / Posts / Calendar
   ========================================================================== */

#linksSection {
    background: #fff;
}

#linksSection .container-xl {
    padding-top: 65px;
    padding-bottom: 90px;
}

.linksCol {
    text-align: center;
}

.linksCol .icon {
    margin-bottom: 8px;
}

.linksCol .icon img {
    max-width: 100%;
    height: auto;
    width: 15.625%;
}

.linksCol .title {
    color: #a9a8a7;
    text-transform: uppercase;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

.linksCol hr {
    clear: both;
    width: 54.375%;
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px solid #e1e0e0;
    margin: 20px auto 15px;
    padding: 0;
}

.linksCol ul {
    margin: 0 0 7px;
    padding: 0;
    list-style: none;
}

.linksCol li {
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
}

.linksCol li a {
    text-decoration: none;
}

.linksCol li a .listItem {
    padding: 9px 4px;
    background: #fff;
    transition: all .25s linear;
}

.linksCol li a:hover .listItem {
    background: #f2f1f1;
}

.linksCol li a .listTitle {
    color: #698b9f;
    font-weight: 400;
    line-height: 1.1;
}

.linksCol li a .listDate {
    color: #838180;
    font-size: 14px;
    font-style: italic;
}

/* Newsletter service list */
#serviceCon {
    line-height: 1.4;
}

#homeServices a {
    font-size: 19px;
    color: #698b9f;
    background: #fff;
    display: block;
    padding: 9px 0;
    transition: all .25s linear;
}

#homeServices a:hover {
    background: #f2f1f1;
}

/* Mailchimp embed */
#mc_embed_signup .mc-field-group input[type=checkbox] { margin-right: 5px; }
#mc_embed_signup .mc-field-group { line-height: 1.4; }


/* ==========================================================================
   THERAPIST / KATE INFO - #kateInfoSection
   ========================================================================== */

#kateInfoSection {
    background: #f2f1f1;
}

#kateInfoSection .container-xl {
    padding-top: 79px;
    padding-bottom: 85px;
}

#kateInfoSection h2 {
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: .075em;
    color: #a9a8a7;
}

#homeAboutKate {
    margin-bottom: 25px;
}

#homeAboutKate h3 {
    font-size: 18px;
}

#homeAboutKate p {
    font-size: 14px;
}

#homeAKImage img {
    max-width: 100%;
    height: auto;
}

#homeContactForm {
    border-top: 5px solid #EAE8E8;
    padding-top: 20px;
}

#homeContactForm p {
    font-size: 14px;
    margin-bottom: 5px;
}

#homeContactForm ul,
#homeContactForm li {
    margin: 0;
    padding: 0;
}

/* Gravity Forms overrides */
#homeContactForm .gform_body { width: 100%; max-width: 400px; box-sizing: border-box; }
body #homeContactForm .gform_wrapper .top_label div.ginput_container { margin-top: 5px; }
#homeContactForm .gform_wrapper input,
#homeContactForm .gform_wrapper textarea { font-size: 14px; border: 1px solid #d5d4d4; }
#homeContactForm .gform_wrapper input[type=text],
#homeContactForm .gform_wrapper textarea { width: 100%; color: #838180; margin-top: 0; padding: 6px 8px; box-sizing: border-box; }
#homeContactForm .gform_wrapper textarea { height: 100px; }
#homeContactForm .gform_wrapper input.gform_button { border: 0 none; line-height: 1.7; max-width: 125px; }
#homeContactForm .gform_wrapper .gform_footer { margin-top: 0; padding-top: 5px; }

#kateInfoSection input.gform_button,
#kateInfoSection a.moreBtn { background: #698b9f; }
#kateInfoSection input.gform_button:hover,
#kateInfoSection a.moreBtn:hover { background: #416276; }


/* ==========================================================================
   RESPONSIVE — breakpoints mirror Bootstrap 5
   xl  ≥ 1200px  |  lg  992px–1199px  |  md  768px–991px
   sm  576px–767px  |  xs  < 576px
   ========================================================================== */

/* xl and up: 1200px – 1399px (below xxl, contentCon has room to breathe) */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {

    #ssLeft .contentCon { width: 520px; }
    #gsRight .contentCon { width: 520px; }

}

/* lg: 992px – 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

    #ssLeft .contentCon { width: 440px; }
    #gsRight .contentCon { width: 440px; }
    #ssLeft h2 { font-size: 40px; }
    #gsRight h2 { font-size: 40px; }

}

/* md: 768px – 991px */
@media only screen and (min-width: 768px) and (max-width: 991px) {

    #serviceSection { flex-wrap: wrap; }
    #ssLeft, #ssRight { width: 100%; }
    #ssLeft .contentCon { width: 100%; max-width: 640px; float: none; margin: 0 auto; padding: 50px 5% 55px; }
    #ssRight { padding-bottom: 55%; }
    #ssLeft h2 { font-size: 36px; }
    #ssLeft h3 { font-size: 22px; }
    #ssButton a { font-size: 20px; }

    #gsSection { flex-wrap: wrap; }
    #gsLeft, #gsRight { width: 100%; }
    #gsRight .contentCon { width: 100%; max-width: 640px; margin: 0 auto; padding: 50px 5% 55px; }
    #gsLeft { padding-bottom: 55%; }
    #gsRight h2 { font-size: 36px; }
    #gsRight h3 { font-size: 22px; }
    #gsButton a { font-size: 20px; }

}

/* sm: 576px – 767px */
@media only screen and (min-width: 576px) and (max-width: 767px) {

    #wwdSection .container-xl { padding: 40px 3.5% 45px; }

    #serviceSection { flex-wrap: wrap; }
    #ssLeft, #ssRight { width: 100%; }
    #ssLeft .contentCon { width: 100%; float: none; padding: 10%; }
    #ssRight { padding-bottom: 60%; }
    #ssLeft h2 { font-size: 30px; }
    #ssLeft h3 { font-size: 21px; }
    #ssButton a { font-size: 20px; }

    #gsSection { flex-wrap: wrap; }
    #gsLeft, #gsRight { width: 100%; }
    #gsRight .contentCon { width: 100%; padding: 10%; }
    #gsLeft { padding-bottom: 60%; }
    #gsRight h2 { font-size: 30px; }
    #gsRight h3 { font-size: 21px; }
    #gsButton a { font-size: 20px; }

    #linksSection .container-xl { padding: 50px 0 30px; }
    .linksCol { margin-bottom: 40px; }
    .linksCol .icon img { width: 80px; }
    .linksCol .title { font-size: 30px; }

    #homeAKImage { width: 40%; float: left; margin-right: 5%; }
    #homeAKContent { float: left; width: 55%; }
    #homeContactForm { width: 100%; }

}

/* xs: max 575px */
@media only screen and (max-width: 575px) {

    #wwdSection .container-xl { padding: 40px 3.5% 45px; }
    #wwdSection h2 { font-size: 28px; margin-bottom: 20px; }
    #wwdText { font-size: 16px; line-height: 1.6; }
    #wwdButton a { font-size: 18px; }

    #serviceSection { flex-wrap: wrap; }
    #ssLeft, #ssRight { width: 100%; }
    #ssLeft .contentCon { width: 100%; float: none; padding: 10%; }
    #ssRight { padding-bottom: 50%; }
    #ssLeft h2 { font-size: 26px; }
    #ssLeft h3 { font-size: 21px; }
    #ssButton a { font-size: 18px; }

    #gsSection { flex-wrap: wrap; }
    #gsLeft, #gsRight { width: 100%; }
    #gsRight .contentCon { width: 100%; padding: 10%; }
    #gsLeft { padding-bottom: 50%; }
    #gsRight h2 { font-size: 26px; }
    #gsRight h3 { font-size: 21px; }
    #gsButton a { font-size: 18px; }

    #linksSection .container-xl { padding: 35px 0 30px; }
    .linksCol { margin-bottom: 40px; }
    .linksCol .icon img { width: 70px; }
    .linksCol .title { font-size: 26px; }

    #homeAKImage { float: none; width: 100%; margin-right: 0; text-align: center; margin-bottom: 15px; }
    #homeAKImage img { max-width: 50%; margin: 0 auto; display: block; }
    #homeAKContent { float: none; width: 100%; text-align: center; }
    #homeAKContent p { text-align: left; }
    #homeContactForm { width: 100%; }
    #homeContactForm h2 { text-align: center; }

}