/*========================================================

Northern Tree Website
Version 0.2

Design Goals

• Friendly
• Calm
• Canadian
• Spacious
• Nature-inspired
• Easy to read

=========================================================*/


/*--------------------------------------------------------
    COLOURS
--------------------------------------------------------*/

:root {

/* Logo colours for text and other layout elements */

    --canada-red: #A92622;
    --white: #FFFFFF;
    --forest-green: #2B6301;
    --deep-forest: #1a3c01;
    --leaf-green: #508c01;
    --foliage: #a8ca62;
    --dark-foliage: #7cb146;
    --apple-green: #98ba1c;
    --sunshine-green: #c0d030;

/* Text Colours that are not using the logo colours */

    --charcoal: #333333;
    --terrain: #675846;
    --ingredients: #525252; /* drop-down box */


/* Colours for layout elements not derived from logo */

    --light-grey: #777777; /* This does not appear to have been used; keeping just in case */
    --divider: #DDDDDD;
    --background: var(--white);

}


/*--------------------------------------------------------
    GLOBAL
--------------------------------------------------------*/

* {

    box-sizing: border-box;

}


body {

    margin: 0;

    background: var(--background);

    color: var(--charcoal);

    font-family: "Nunito Sans", sans-serif;

}



/*--------------------------------------------------------
    HERO BANNER
--------------------------------------------------------*/

.hero {

    margin: 0;

}

.banner {

    display: block;

    width: 100%;

    height: 390px;

    object-fit: cover;

    object-position: center 28%;

}


.interior-banner {

     width: 100%;

     height: auto;

     display: block;

}


/*--------------------------------------------------------
    SITE HEADER
--------------------------------------------------------*/

.site-header {

    max-width: 1100px;

    margin: 0 auto;

    padding: 0 85px 20px;

}

.header-inner {

    display: flex;

    align-items: flex-start;

    gap: 48px;

}

.logo-column {

    flex: 0 0 180px;

    margin-top: -70px;

}

.site-logo {

    width: 180px;

    height: auto;

    display: block;

}

.title-column {

    flex: 1;

    padding-top: 10px;

}

.title-column h1 {

    margin: 0;

    color: var(--forest-green);

    font-size: 2.4rem;

    font-weight: 700;

}


.main-nav {

    display: flex;

    gap: 40px;

    margin-top: 20px;

}

.main-nav a {

    text-decoration: none;

    color: var(--apple-green);

    font-weight: 700;

    letter-spacing: 0.02em;

}

.main-nav a:hover {

    color: var(--canada-red);

}

/*--------------------------------------------------------
    SECTION DIVIDER (between site header and page)
--------------------------------------------------------*/

.section-divider {

    max-width: 1400px;
    margin: 22px auto 50px;
    border-top: 2px solid var(--divider);

}


/*--------------------------------------------------------
    PAGE LAYOUT
--------------------------------------------------------*/

.page-intro,        /*-- all pages except "index.html" and "products.html" --*/
.products-intro {  /*-- specific to products page --*/

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 70px;

    align-items: start;

    margin: 40px 0 0;


}


.intro-left {

    min-width: 0;

}

.intro-right {

    min-width: 0;

}

.intro-tree-left {

    display: block;

    width: 100%;

    border-radius: 8px;

    margin-bottom: 34px;

}

.intro-tree-right {

    position: relative;

    margin-top: 34px;

    margin-bottom: 34px;


}

.intro-tree-right-about { /*-- for tree (or other) image specific to About page --*/

    display: block;

    width: 100%;

    height: auto;

    border-radius: 10px;

    margin-top: 60px;

}


.intro-right blockquote {

    margin: 8px 0 0;

    color: var(--forest-green);

    font-size: 1.35rem;

    font-style: italic;

    line-height: 1.8;

    text-align: center;

}

.quote-divider {

    width: 100%;

    max-width: 425px;

    height: 0.5px;

    background: var(--forest-green);

    margin-top: 28px;

}

.product-hero-wrapper {

    position: relative;

    margin-top: 34px;

    margin-bottom: 34px;

}

.product-hero-image {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 10px;

    cursor: pointer;

    transition: transform .25s ease;

}

.product-hero-image:hover {

    transform: scale(1.02);

}

.product-open-box-image {

    display: block;

    width: 100%;

    border-radius: 8px;

    margin-bottom: 0px;

}

.content {

    max-width: 900px;

    margin: 60px auto;

    padding: 0 40px;

}


.content section {

    margin-bottom: 70px;

    padding-bottom: 0px;


}

.content .home-body {

    margin-bottom: 25px;

    padding-bottom: 0;


}


.content .page-intro {

    margin-bottom: 0;

    padding-bottom: 0;


}

.content .page-body {

    margin-top: 0;

    padding-top: 0;

}

/*--------------------------------------------------------
    PAGE TYPOGRAPHY
--------------------------------------------------------*/


.intro-left h2 {

    margin: 0;

}


.intro-left p {

    width: 100%;

    max-width: none;

}

.coming-soon {

    margin: 22px 0 28px;

}

.content h2 {

    color: var(--dark-foliage);

    font-size: 1.7rem;

    font-weight: 700;

    margin-bottom: 18px;

}

.content h3 {

    color: var(--forest-green);

    font-size: 1.35rem;

    font-weight: 600;

    margin: 0 0 15px;

}

.content p {

    font-size: 1.12rem;

    line-height: 1.7;

}

/*--------------------------------------------------------
    PAGE ICONS AND BUTTONS
--------------------------------------------------------*/


.feature-quote-icon {

    height: 0.7em;

    width: auto;

    margin-left: 0.2em;

    vertical-align: -0.08em;
}


.gallery-button {

    position: absolute;

    right: 18px;

    bottom: 18px;

    padding: 10px 18px;

    border: none;

    border-radius: 999px;

    background: rgba(34,34,34,.65);

    color: white;

    font-size: .9rem;

    cursor: pointer;

    backdrop-filter: blur(5px);

    transition: background .2s ease;

}

.gallery-button:hover {

    background: rgba(34,34,34,.85);

}


.amazon-button {

    display: inline-block;

    background: var(--dark-foliage);

    color: white;

    text-decoration: none;

    padding: 12px 24px;

    border-radius: 8px;

    font-weight: bold;

    transition: background 0.2s;
}

.amazon-button:hover {
    background: var(--apple-green);
}
    

/*--------------------------------------------------------
    PAGE LINKS
--------------------------------------------------------*/

.content-link {

    color: var(--leaf-green);

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 2px;

    transition: color 0.2s ease;

}

.content-link:visited {

    color: var(--forest-green);

}

.content-link:hover {

    color: var(--leaf-green);

}

.content-link:active {

    color: var(--forest-green);

}

/*--------------------------------------------------------
    COLLECTION GALLERY POPUP
--------------------------------------------------------*/


.gallery{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.88);

    z-index:9999;

}

.gallery img{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    max-width:90%;

    max-height:85%;

    border-radius:6px;

    box-shadow:0 12px 40px rgba(0,0,0,.5);

    opacity:1;

    transition:opacity .25s ease;

}

.gallery-close{

    position:absolute;

    top:25px;

    right:40px;

    color:white;

    font-size:48px;

    cursor:pointer;

}

.gallery-prev,

.gallery-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    font-size:50px;

    background:none;

    border:none;

    color:white;

    cursor:pointer;

    padding:20px;

}

.gallery-prev{

    left:25px;

}

.gallery-next{

    right:25px;

}

/* ==============================================================
   SOAP GALLERY
================================================================= */


/*--------------------------------------------------------------
   SOAP GALLERY LAYOUT
--------------------------------------------------------------*/

.soap-gallery {

    margin-top: 0;

}

.gallery-divider {

    width: 100%;

    height: 1px;

    background: #d7ddd3;

    margin: 0 0 55px;

}

.soap-gallery-intro {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 210px;

    padding: 0 70px;

    text-align: center;

}

.gallery-title {

    display: inline-block;

}

.soap-gallery-intro::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image: url("../images/banners-logos/at-soap-feature-stone-banner.jpg");

    background-repeat: no-repeat;

    background-position: center;

    background-size: 100% auto;

    opacity: 0.4;   /* subtle stone texture behind title */

    z-index: -1;

}

.soap-feature {

    display: flex;

    align-items: flex-start;

    gap: 25px;

    margin-bottom: 35px;

}

.soap-feature img {

    width: 250px;

    height: auto;

    flex-shrink: 0;

}

.soap-text {

    flex: 1;

}


/*--------------------------------------------------------------
   SOAP GALLERY TYPOGRAPHY
--------------------------------------------------------------*/

.soap-gallery-intro h2 {

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 2.8rem;

    font-weight: 500;

    letter-spacing: 0.01em;

    line-height: 1.05;

    color: var(--terrain);

    margin-top: 0;

    margin-bottom: 14px;

}

.soap-gallery-intro p {

    max-width: 650px;

    margin: 0 auto;

    font-family: "Nunito Sans", sans-serif;

    font-size: 1.2rem;

    font-weight: 600;

    color: #5f5f5f;

}

.soap-text h3 {

    color: var(--forest-green);

    font-size: 1.5rem;

    font-weight: 600;

    margin: 0 0 15px;

}

.soap-text p {

    line-height: 1.7;

}

.soap-text p.soap-text-ingredients {

    margin-top: 18px;

    font-size: 0.75rem;

    line-height: 1.35;

    color: var(--ingredients);

}

/*--------------------------------------------------------------
   SOAP GALLERY BUTTONS
--------------------------------------------------------------*/

.amazon-button-large {
    display: inline-block;

    background: var(--dark-foliage);

    font-size: 1.2rem;

    color: white;

    text-decoration: none;

    padding: 16px 34px;

    border-radius: 8px;

    font-weight: bold;

    transition: background 0.2s;
}

.amazon-button:hover {
    background: var(--apple-green);
}


/* ----------------------------------------------------------
   SOAP INFO BOXES
------------------------------------------------------------- */

.soap-details {

    margin-top: 0px;
    
}


.info-box {

    margin-bottom: 12px;

    display: block;

    border: 1px solid white;

    border-radius: 8px;

    background: var(--background);

    overflow: hidden;

}


.info-box summary {

    padding: 5px 5px;

    cursor: pointer;

    background: var(--background);

    font-family: "Nunito Sans", sans-serif;

    font-size: 0.95rem;

    font-weight: 600;

    opacity: .70;

    color: var(--forest-green);

}


.info-box[open] {

    width: 100%;

}


.info-box[open] summary {

    background: var(--background);

    color: var(--forest-green);

}


.info-content {

    padding: 10px 10px 10px;

    background: var(--background);

    color: #444;

}


.info-content h4 {

    margin: 0px 0 8px;

    font-family: "Nunito Sans", sans-serif;

    font-size: 0.9rem;

    font-weight: 700;

    color: #5d5d5d;

}


.info-content p {

    margin: 0 0 14px;

    font-size: 0.8rem;

    line-height: 1.35;
    
}


.info-content ul {

    margin: 0 0 14px;

    font-size: 0.8rem;

    line-height: 1.45;

}


.product-details {

    width: 100%;

    border-collapse: collapse;

    margin: 0 0 14px;

}

.product-details th {

    padding: 0 0 8px;

    text-align: left;

    font-family: "Nunito Sans", sans-serif;

    font-size: 0.8rem;

    font-weight: 700;

    color: var(--ingredients);

    vertical-align: top;

}

.product-details td {

    width: 50%;

    padding-right: 10px;

    vertical-align: top;

    font-size: 0.8rem;

    line-height: 1.45;

    color: var(--ingredients);

}

.product-details td ul {

    margin: 0 0 8px;

}


/*======================================================
    CONTACT FORM
=======================================================*/

/*--------------------------------------------------------
    CONTACT FORM LAYOUT
--------------------------------------------------------*/


.contact-form {

    max-width: 550px;

    margin: 30px 0 0;

}

.contact-form > label {

    display: block;

    margin-top: 24px;

    margin-bottom: 8px;

    font-weight: 600;

    color: var(--forest-green);

}

.contact-form input,
.contact-form textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid var(--divider);

    border-radius: 8px;

    font-family: inherit;

    font-size: 1rem;

    color: var(--charcoal);

}

.contact-form textarea {

    resize: vertical;

}

.contact-form input:focus,
.contact-form textarea:focus {

    outline: none;

    border-color: var(--leaf-green);

}

.quiz-intro {

    margin-top: 24px;

    margin-bottom: 10px;

    color: var(--charcoal);

    font-style: italic;

}


.honeypot {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


.form-errors {

    margin: 24px 0;

    padding: 16px 20px;

    border: 1px solid var(--divider);

    border-radius: 8px;

    background: #f8f8f8;

    color: var(--charcoal);

}

.form-errors p {

    margin-top: 0;

    margin-bottom: 8px;

    font-weight: 600;

}

.form-errors ul {

    margin: 0;

    padding-left: 22px;

}

.form-errors li {

    margin-bottom: 4px;

}


/*--------------------------------------------------------
    CONTACT FORM MODAL
--------------------------------------------------------*/

.contact-modal {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.45);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    z-index: 1000;

}


.contact-modal-box {

    width: 100%;
    max-width: 420px;

    padding: 30px;

    background: var(--white);

    border-radius: 10px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20);

    text-align: center;

}


.contact-modal-box h2 {

    margin-top: 0;

    margin-bottom: 12px;

    color: var(--forest-green);

}


.contact-modal-box p {

    margin-bottom: 24px;

    color: var(--charcoal);

}


.contact-modal-box .modal-close {

    margin-top: 0;

    padding: 12px 24px;

    background: var(--forest-green);

    color: var(--white);

    border: none;

    border-radius: 8px;

    font-family: inherit;

    font-size: 1rem;

    cursor: pointer;

}


.contact-modal-box .modal-close:hover {

    background: var(--leaf-green);

}

/*--------------------------------------------------------
    CONTACT FORM - RECEIPT
--------------------------------------------------------*/

.receipt-box {

    max-width: 600px;

    max-height: 90vh;

    overflow-y: auto;

}

.receipt-date {

    margin-top: -8px;

    font-size: 0.8rem;

    color: var(--charcoal);

}

.receipt-details {

    margin: 24px 0;

    padding: 16px 20px;

    border: 1px solid var(--divider);

    border-radius: 8px;

    background: #f8f8f8;

    text-align: left;

}

.receipt-details p {

    margin: 6px 0;

}

.receipt-message {

    margin: 24px 0;

    text-align: left;

}

.receipt-message > p {

    margin-bottom: 8px;

}

.receipt-message-text {

    max-height: 300px;

    overflow-y: scroll;

    padding: 16px;

    border: 1px solid var(--divider);

    border-radius: 8px;

    background: #f8f8f8;

    white-space: normal;

    overflow-wrap: anywhere;

}

.receipt-save-question {

    margin-top: 28px;

    margin-bottom: 16px;

    font-weight: 600;

}

.receipt-buttons {

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

}

.receipt-buttons button {

    margin-top: 0;

    min-width: 160px;

    padding: 14px 24px;

    font-size: 1rem;

    line-height: 1.2;

    border-radius: 8px;

}

.receipt-print {

    background: var(--forest-green);

    color: var(--white);

}

.receipt-print:hover {

    background: var(--leaf-green);

}

.receipt-no-thanks {

    background: var(--charcoal) !important;

}

.receipt-no-thanks:hover {

    background: var(--forest-green) !important;

}

.receipt-close {

    background: var(--white);

    color: var(--forest-green);

    border: 1px solid var(--forest-green);

}

.receipt-close:hover {

    background: var(--forest-green);

    color: var(--white);

}

.receipt-contact {

    margin-top: 30px;

    padding-top: 24px;

    border-top: 1px solid var(--divider);

}

.receipt-contact p {

    margin-bottom: 14px;

}

.receipt-email-image {

    display: block;

    width: 100%;

    max-width: 420px;

    height: auto;

    margin: 0 auto;

}

@media print {

    body > * {
        display: none !important;
    }

    body > main.content {
        display: block !important;
    }

    main.content > *:not(#receipt-modal) {
        display: none !important;
    }

    #receipt-modal {
        display: block !important;
    }

    .receipt-box {

        font-size: 0.8rem;

    }

.receipt-box > p,
.receipt-details p,
.receipt-message > p,
.receipt-message-text,
.receipt-contact p {

    font-size: 0.8rem !important;

}

    .receipt-modal {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: auto;

        padding: 0;

        background: none;
    }

    .receipt-box {

        max-width: 700px;

        max-height: none;

        overflow: visible;

        margin: 0 auto;

        padding: 20px;

        border-radius: 0;

        box-shadow: none;

    }

    .receipt-buttons,
    .receipt-save-question {

        display: none;

    }

    .receipt-email-image {

        max-width: 300px;

    }

    .receipt-message-text {

        max-height: none;

        overflow: visible;

    }

}


/*--------------------------------------------------------
    CONTACT FORM - QUIZ
--------------------------------------------------------*/

.quiz-section {

    margin-top: 24px;

}

.quiz-question {

    margin-top: 12px;

    margin-bottom: 8px;

    font-weight: 600;

    color: var(--forest-green);

}

.quiz-options {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.quiz-option {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;

    padding: 4px 0;

    font-weight: normal;

    color: var(--charcoal);

    cursor: pointer;

}

.quiz-option input {

    width: auto;

    padding: 0;

    margin: 0;

    border: none;

    border-radius: 0;

    accent-color: var(--leaf-green);

}

/*--------------------------------------------------------
    CONTACT FORM - SUBMIT BUTTON
--------------------------------------------------------*/


.contact-form button {

    margin-top: 14px;

    padding: 14px 28px;

    background: var(--forest-green);

    color: var(--white);

    border: none;

    border-radius: 8px;

    font-family: inherit;

    font-size: 1rem;

    cursor: pointer;

}

.contact-form button:hover {

    background: var(--leaf-green);

}


/*--------------------------------------------------------
    SMALLER SCREENS
--------------------------------------------------------*/

@media (max-width: 750px) {

    .intro-wrapper {

        flex-direction: column;

        align-items: flex-start;

    }

    .logo-column {

        margin-top: -60px;

    }

    .site-logo {

        width: 150px;

    }

    .intro-text {

        padding-top: 0;

    }

    .main-nav a {

        display: inline-block;

        margin-bottom: 10px;

    }

    }   /* <-- closes the @media block */

/*--------------------------------------------------------
    FOOTER
--------------------------------------------------------*/

.site-footer {

    margin-top: 90px;

    padding: 45px 20px 55px;

    text-align: center;

    background: var(--deep-forest);

}

.copyright {

    margin: 0 0 20px;

    color: var(--white);

    font-size: 0.93rem;

}

.company {

    margin: 0 0 8px;

    color: var(--white);

    font-size: 1.4rem;

}

.tagline {

    margin: 0 0 28px;

    color: var(--white);

    font-size: 0.98rem;

    font-variant: small-caps;

    letter-spacing: .08em;

}


.footer-links {

    margin: 0 0 34px;

    font-size: 1.02rem;

}


.footer-links a {

    color: var(--white);

    text-decoration: underline;
    
    margin: 0 14px;

}


.footer-links a:hover {

    color: var(--canada-red);

}

.footer-links a:visited {

  color: var(--sunshine-green);

}


.photo-credit {

    margin: 0 0 36px;

    opacity: .80;

    color: var(--white);

    font-size: 0.8rem;

}


.footer-maple {

    display: block;

    width: 35px;

    margin: 38px auto 0;

}

/*--------------------------------------------------------
    Below css code sections for social links have been
    deactivated since I decided to merge them with
    the other footer links. To reactivate these
    simply remove the letter x in front of them.
--------------------------------------------------------*/



.xfooter-social {

    margin-top: 18px;

}


.xfooter-social a {

    color: var(--white);

    text-decoration: none;

    font-weight: 700;

    margin: 0 14px;

    letter-spacing: .02em;

}


.xfooter-social a:hover {

    color: var(--sunshine-green);

}