/* ==========================================================================
   Contents
   1. Base / reset
   2. Typography
   3. Lists
   4. Buttons
   5. Background utilities
   6. Hero & nav
   7. Column layouts
   8. Image background sections
   9. Infographics
   10. Get to know
   11. Form
   12. Footer
   13. Responsive
   ========================================================================== */


/* 1. Base / reset
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

/* 100vw includes the vertical scrollbar, which caused a horizontal scroll;
   use 100% and clip any stray overflow on the x-axis */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

img {
    max-width: 100%;
}

/* browsers center hr with auto side margins; pin it to the left */
hr {
    border: none;
    border-top: 1px solid #7D5E34;
    height: 0;
    width: 8rem;
    margin-left: 0;
}


/* 2. Typography
   ========================================================================== */

h1 {
    font-family: proxima-nova;
    font-size: 16px;
    color: #fff;
}

h2, h3 {
    font-family: eb-garamond;
    font-weight: 500;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    color: #006341;
}

p, li {
    font-family: proxima-nova;
    font-size: 1rem;
}

a, .videoPrompt {
    color: #7D5E34;
    font-family: proxima-nova;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: none;
}

.videoText{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

p.emphasize {
    font-family: eb-garamond;
    font-size: 1.5rem;
    font-weight: 500;
}

.sub {
    font-family: eb-garamond;
    font-style: italic;
    color: #7D5E34;
    font-size: 1.25rem;
    font-weight: 600;
}

.citation {
    font-size: .75rem;
    font-style: italic;
}


/* 3. Lists
   ========================================================================== */

ul {
    list-style: none;
    padding-left: 0;
}

ul li {
    position: relative;
    padding-left: 1.75rem;
}

ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    width: 1em;
    height: 1em;
    background: url(https://touchmark.com/wp-content/uploads/Bullet.svg) no-repeat center / contain;
}


/* 4. Buttons
   ========================================================================== */

button {
    font-family: proxima-nova;
    background-color: #006341;
    color: white;
    text-transform: uppercase;
    font-weight: 500;
    border: none;
    padding: .75rem;
}

button:hover,
input[type="submit"]:hover {
    cursor: pointer;
}


/* 5. Background utilities
   ========================================================================== */

.sift {
    background-color: #f7f7f6;
}

.alt {
    background-color: #efefec;
}


/* 6. Hero & nav
   ========================================================================== */

#hero {
    height: 100vh;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 40%), url(../images/texas_AdobeStock_357109701.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nav {
    padding: 2.5rem 8rem;
    display: flex;
    justify-content: space-between;
}

.logo img {
    width: 200px;
}

.header-copy {
    padding: 2.5rem 8rem;
}

.header-copy p {
    font-size: 3.75rem !important;
    font-family: eb-garamond;
    color: #fff;
    margin-top: 0;
}


/* 7. Column layouts
   ========================================================================== */

/* One column */
.oneCol {
    padding: 2.5rem 8rem;
    margin: 0;
}

#flower {
    background-image: url(https://touchmark.com/wp-content/uploads/TM-Flower-Accent-Gold-5per.svg);
    background-repeat: no-repeat;
    background-position: top 40px right 40px;
}

/* Two column */
.twoCol {
    margin: 0;
    display: flex;
}

.firstCol, .secondCol {
    padding: 2.5rem 8rem;
    flex: 1 1 0;
    min-width: 0;
}

/* side-by-side columns: split a combined 4rem gutter between them */
@media (min-width: 769px) {
    .firstCol:has(+ .secondCol) {
        padding-right: 2rem;
    }

    .firstCol + .secondCol {
        padding-left: 2rem;
    }
}

/* vertically center text columns that sit beside an image column */
.twoCol:has(> .imgCol) > .firstCol,
.twoCol:has(> .imgCol) > .secondCol {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.twoCol:has(> .imgCol) > .firstCol > :first-child,
.twoCol:has(> .imgCol) > .secondCol > :first-child {
    margin-top: 0;
}

.twoCol:has(> .imgCol) > .firstCol > :last-child,
.twoCol:has(> .imgCol) > .secondCol > :last-child {
    margin-bottom: 0;
}

/* video with an open-ended border behind it: starts 20% across the
   player, extends 3rem above and below, and runs off the page to the right
   (clipped by the overflow-x on html/body) */
.vidBorder {
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
}

.vidFrame {
    z-index: 0;
}

.vidFrame::before {
    content: "";
    position: absolute;
    top: -3rem;
    bottom: -3rem;
    left: 20%;
    right: -100vw;
    border: #7D5E34 solid 1px;
    border-right: none;
    z-index: -1;
}

/* Image column */
.imgCol {
    flex: 0 0 50%;
    max-width: 50% !important;
}

.imgCol img {
    display: block;
    width: 100%;
}

/* community photos: same height, cropped from the top so the bottom stays in view */
.communityPhotos img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: bottom;
}


/* 8. Image background sections
   ========================================================================== */

.imgBackground {
    height: 120vh;
    display: flex;
    align-items: flex-end;
}

.imgBck1,
.imgBck2 {
    background-repeat: no-repeat;
    background-size: cover;
    isolation: isolate;
    overflow: hidden;
}

.imgBck1 {
    background-image: url(../images/TM-Lifestyle-1-580-web.jpg);
}

.imgBck2 {
    background-image: url(../images/TM-Lifestyle-4-5196-web.jpg);
    background-position: center;
}

/* Two-thirds card */
.twoThirdWrap {
    margin-left: 8rem;
    max-width: 65vw;
    background-color: #fff;
    padding: 19px;
}

.twoThirdCol {
    background-color: #fff !important;
    border: #7D5E34 solid 1px;
    padding: 1.25rem;
}

.imgBck1 .twoThirdWrap,
.imgBck2 .twoThirdWrap {
    position: relative;
}

/* color overlay from the bottom of the section up to the card's midpoint */
.imgBck1 .twoThirdWrap::before,
.imgBck2 .twoThirdWrap::before {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    left: -8rem;
    width: 100vw;
    z-index: -1;
}

.imgBck1 .twoThirdWrap::before {
    background-color: #efefec;
}

.imgBck2 .twoThirdWrap::before {
    background-color: #f7f7f6;
}


/* 9. Infographics
   ========================================================================== */

#infoContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 8rem;
}

.infographic {
    width: 12rem;
    text-align: center;
}

/* fixed box so every graphic is centered in the same space and the h3s line up */
.infographic img {
    display: block;
    width: 12rem;
    height: 12rem;
    object-fit: contain;
}


/* 10. Get to know
   ========================================================================== */

#getToKnow {
    padding: 20px;
    background-color: #fff;
}

#getToKnowContent {
    padding: 2rem 6.688rem;
    border: #7D5E34 solid 1px;
}


/* 11. Form
   ========================================================================== */

#form {
    padding: 2.5rem;
    text-align: center;
}

.questionLine {
    margin-left: auto;
}

/* flow-root contains the form's margins so the color fills around it as it loads */
#formWrap {
    display: flow-root;
    background-color: #f7f7f6;
}


/* 12. Footer
   ========================================================================== */

footer {
    background-color: #006341;
    margin-bottom: 0;
    padding: 2.5rem 8rem;
}

footer img {
    width: 200px;
    padding-right: 2.5rem;
}

footer p {
    color: #fff;
    font-size: 1.5rem;
    font-family: eb-garamond;
    font-style: italic;
}

.footer-logo {
    display:flex
}


/* 13. Responsive
   ========================================================================== */

/* tablet and below */
@media (max-width: 768px) {
    /* section padding */
    .nav,
    .header-copy,
    .oneCol,
    .firstCol,
    .secondCol {
        padding: 2.5rem;
    }

    .vidFrame::before {
        display: none;
    }

    #infoContainer {
        padding: 0 2.5rem;
    }

    /* stack columns */
    .twoCol {
        display: block;
    }

    .imgCol {
        max-width: 100% !important;
    }

    /* when stacked, an image ending one row lands directly above an image
       starting the next; hide the second */
    .twoCol:has(> .imgCol:last-child) + .twoCol > .imgCol:first-child {
        display: none;
    }

    /* two-thirds card */
    .twoThirdWrap {
        flex: 1 1 auto;
        max-width: none;
        margin: 0 2.5rem;
    }

    .imgBck1 .twoThirdCol {
        background-color: #efefec;
    }

    .imgBck2 .twoThirdCol {
        background-color: #f7f7f6;
    }

    /* keep the overlay aligned with the card's new left margin */
    .imgBck1 .twoThirdWrap::before,
    .imgBck2 .twoThirdWrap::before {
        left: -2.5rem;
    }
}

/* phones */
@media (max-width: 639px) {
    .imgBackground {
        height: auto;
        padding: 0 0 2.5rem;
    }

    /* two-thirds card spans the full screen width */
    .twoThirdWrap {
        margin: 0;
    }

    .imgBck1 .twoThirdWrap::before,
    .imgBck2 .twoThirdWrap::before {
        left: 0;
    }

    /* swap the photo for a solid color */
    .imgBck1 {
        background: #efefec;
    }

    .imgBck2 {
        background: #f7f7f6;
    }
}