/*
Theme Name: Country Girl Florals
Theme URI: https://dev.eranner.website
Author: Eric Ranner
Author URI: https://dev.eranner.website
Description: Country Girl Florals Custom Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
:root {
    --main: #584F44;
    --yellow: 
    #FAE033;
}
  @import url("https://use.typekit.net/vkg7psl.css");
  @font-face {
      font-family:parisienne;
      src: url('./fonts/Parisienne.ttf')
  }
  
  @font-face {
      font-family:quicksand;
      src: url('./fonts/quicksand.ttf');
  }
.submission-error {
    text-align: center;
    font-size: 2rem;
    font: Calibri;
    color: #ad2324;
    max-width: 800px;
    margin: auto;
}
.single-blog-post-container {
    display: flex;
    flex-direction: column;

}
.items-holder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 5rem;
    margin-bottom: 5rem;
    gap: 2rem;
}

.mini-hero {
    height: 20rem;
    background-image: url('./photos/sunflower-mini.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mini-hero-cover {
    height:100%;
    background-color: rgba(255, 255, 255, 0.514);
    display:flex;
    justify-content: center;
    align-items: center;
}
.mini-hero-cover>h1 {
    font-family: parisienne;
    font-size: 5rem;
    color: var(--main);
    text-align: center;
    text-shadow:3px 3px 3px white;
}
.submission-success {
    text-align: center;
    font-size: 2rem;
    font: Calibri;
    color: #508D40;
    max-width: 800px;
    margin: auto;
}
#navbar-logo {
    height: 125px;
}
#cta-button-nav-mobile{
    display:none;
}
.nav-link {
    color: white!important;
    font-size: 3rem!important;
}

.nav-link:hover {
    color: #333!important;
}
.contact-form-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-form-info-container>h1 {
    margin-top:2rem;
    font-family: quicksand!important;
    text-transform: uppercase;
    font-size: 3rem;
    max-width: 800px;

}
.contact-form-info-container>p {
    font-family: Calibri;
    font-size: 1.5rem;
    max-width: 800px;


}
#cta-button-nav {
    background-color: var(--yellow);
    font-size: 2.25rem;
    border-radius: 10px;
    width: 200px;
    margin-right: 1rem;
    text-decoration: none;
}

#nav-button-link-mobile {
    text-decoration: none;
}

.form-submit-button-holder {
    width:100%;
    display:flex;
    justify-content: center;
    margin-bottom: 3rem;
}
.form-submit-button {
    background-color: var(--yellow);
    font-size: 1.5rem;
    border-radius: 10px;
    width: 200px;
    font-family: parisienne;
    margin:auto;
    color: #333;
}

.main-hero {
    height: 650px;
    background-image: url('./photos/sunflowers-main.jpg');
    background-position: center 30%;
    background-size: cover;
    background-repeat: no-repeat;
}

.main-hero-cover {
    height: 100%; 
    background-color: rgba(255, 255, 255, 0.33);

}

.hero-tagline {
    background-color: #584F44;
    font-family: parisienne;
    color: white;
    font-size: 4rem;
    display: flex;
    justify-content: center;
}

.main-hero-message {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-family: parisienne;
    font-weight:bold;
    font-size: 5rem;
    color: var(--main);
    align-items: center;
    justify-content: center;
    height: 100%;
    text-shadow: 3px 3px 3px white;
}

#signature-florals-section {
    margin-top: 5rem;
}
#signature-florals-section >h2 {
    font-family: quicksand!important;
    text-transform: uppercase;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 2rem;
}

.signature-florals-card-holder {
    display: flex;
    justify-content:center;
    gap: 1rem;
}

/* .florals-card {
    background-color: rgba(88, 79, 68, 0.5);
    display: flex;
    flex-direction: column;
    max-width: 325px;
    border-radius: 10px;
    padding: 5px;
}

.florals-header {
    font-family: fino-sans;
    font-size: 2.5rem;
    text-align: center;
}

.florals-text {
    text-align: center;
    font-family: calibri;
    padding: 0 20px 0 20px;
    flex-grow: 1;
}

.flower-card-order-button {
    width: 200px;
    background-color: var(--yellow);
    color: #333;
    text-align: center;
    margin:auto;
    font-family: relation-two;
    border: none;
    border-radius: 5px;
    font-size: 1.5rem;
}

.floral-button-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
} */

#signature-florals-section {
    margin-top: 10rem;
    margin-bottom: 10rem;
}
#signature-florals-section > h2 {
    font-family: quicksand!important;
    text-transform: uppercase;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 2rem;
}

/* Card holder styling */
.signature-florals-card-holder {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap; /* Wraps cards on smaller screens */
}

/* Card styling */
.florals-card {
    background-color: rgba(88, 79, 68, 0.5);
    max-width: 325px;
    width: 100%; /* Responsive card width */
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto; /* Fixed height for all cards */
}

/* Image styling */
/* .florals-card-image {
    width: 300px;
    height: 300px;
    background-image: url("<?php echo get_theme_file_uri().'/photos/flowers-7233992_1280.jpg';?>");
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin: 10px auto; 
} */

/* Header styling */
.florals-header {
    font-family: quicksand;
    font-size: 2rem;
    text-align: center;
    margin-top: 10px;
    text-transform: uppercase;
}

/* Text styling */
.florals-text {
    text-align: center;
    font-family: calibri;
    padding: 0 10px;
    margin-top: 10px;
    flex-grow: 1; /* Allows the text to grow and fill available space */
    overflow: hidden; /* Prevents text overflow */
}

/* Button styling */
.flower-card-order-button {
    width: 200px;
    background-color: var(--yellow);
    color: #333;
    text-align: center;
    border: none;
    border-radius: 5px;
    font-size: 1.5rem;
    font-family: parisienne;
    margin: 20px auto 0; /* Centers the button and adds spacing */
}

/* Button holder styling */
.floral-button-holder {
    display: flex;
    justify-content: center;
    align-items: center;
}


#flowers-without-the-fluff-section {
    margin-top: 5rem;
    margin-bottom: 10rem;
}
#flowers-without-the-fluff-section >h2 {
    font-family: quicksand!important;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

#flowers-without-the-fluff-section > p {
    max-width: 800px;
    margin:auto;
    text-align: center;
    font-family: Calibri;
    font-size: 1.2rem;
}

.photo-gallery {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.delivering-message {
    font-size: 5rem!important;
    font-family: quicksand;
    font-weight:bold;
    text-align: center;
    max-width: 800px;
    margin:auto;
    text-transform: uppercase;
    
}

#delivering-tagline {
    font-size: 3rem;
    font-family: quicksand;
    text-transform: uppercase;
    text-align: center;
    max-width: 850px;
    margin:auto;
    color: var(--main);
    /* font-weight: bold; */
    letter-spacing: 3px;
}

#reviews-section {
    margin-top: 5rem;
    margin-bottom: 10rem;
}
#reviews-section >h2 {
    font-family: quicksand!important;
    text-transform: uppercase;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 5rem;
}

.review-box {
    background-color: var(--main);
    color: white;
    min-height: 500px;
    border-radius: 10px;
    display:flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    padding: 30px;
}

.review-container {
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:20px;
}

.review-text {
    max-width: 900px;
    font-family: Calibri;
    font-size: 1.5rem;
    text-align:center;
}
#main-contact-form {
    margin: auto;
    max-width: 800px;
}
.country-input {
    font-family:Calibri!important;
    font-size: 1.5rem;
}
.country-label {
    font-family: parisienne;
    font-size: 2rem;
}
.left-arrow-holder {
    /* height: 30px;
    width: 30px;
    background-image: url('./photos/left-arrow.png');
    background-position: center;
    background-size: contain;
    margin:auto;
    background-repeat: no-repeat; */
    display:flex;
    align-items: center;
}

.right-arrow-holder {
   display: flex;
   align-items: center;
}

.review-middle-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.reviewer {
    font-family: quicksand;
    text-transform: uppercase;
    font-size: 4rem;
    text-shadow: 2px 2px 3px #333;
    text-align:center;
}

.star {
    height: 30px;
    width: 30px;
    background-image: url('./photos/motif.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.stars {
    display:flex;
    justify-content: center;
}

.arrow-image {
    height: 40px;
}

#cta-section{
    height: 650px;
    background-image: url('./photos/country_girl.jpg');
    background-size:cover;
    /* background-position: center; */
    background-repeat: no-repeat;
}

.cta-cover {
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: flex-end;
}

.cta-holder {
    width: 50%;
    margin-right: 2rem;
    text-align: center;
    display:flex;
    margin-top: 10%;
    justify-content: center;
}
.cta-content{
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;    
}
.cta-content >h2 {
    font-family: quicksand;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 20px;
    font-size: 3rem;
}

.cta-content >p {
    font-family:Calibri;
    font-weight: 400;
    margin-bottom: 20px;
    font-size: 1.25rem;
}
#cta-button {
    background-color: var(--yellow);
    border: none;
    border-radius: 5px;
    font-family: parisienne;
    font-size: 2.5rem;
    width: 400px;
    color:#333;
    box-shadow: 4px 4px 4px#333;
}
footer {
    background-color: var(--main);
    display:flex;
    justify-content: space-between;
}
.follow-us {
    font-family:parisienne;
    color: white;
    text-shadow: 2px 2px 2px #333;
    font-size: 2.25rem;
    text-align:center;
}
.social-media-image {
    height: 50px;
    width: 50px;
}
.social-media-image:hover {
    cursor: pointer;
}
.social-media {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:30px;
}

.social-media-icons {
    display:flex;
    justify-content: center;
    gap: 10px;
}

.country-footer-holder{
    display: flex;
    justify-content: center;
    height: 150px;
    padding: 30px;
}

.country-girl-footer-image {
    height:150px;
}

.footer-links-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:30px;
}

.footer-links {
    display:flex;
    flex-direction: row;
    gap: 20px;
    font-family:parisienne;
    color: white;
}

.footer-link {
    color: white;
    text-shadow: 2px 2px 2px #333;
    font-size: 2.25rem;
    text-decoration: none;
}

.footer-link:hover {
    color:#333;
}

.copyright {
    color: white;
    font-family:Calibri;
    font-size: 1.25rem;
}
.show-mobile{
    display: none;
}

.blog-header {
    font-family: parisienne;
    text-align: center;
    font-size: 5rem;
    margin-top: 5rem;
    color: var(--main);
}
@media screen and (max-width: 1248px) {
    .nav-link {
        font-size: 2rem!important;
    }
}

@media screen and (max-width: 1086px) {
    .country-girl-footer-image {
        height:120px;
    }

    .social-media-icons {
        height:30px;
        width: 30px;
    }
    .footer-link {
    font-size: 1.75rem;

    }
    footer {
        justify-content: space-around;
        gap: 2rem;
    }
    .country-footer-holder {
        padding:30px 0 30px 0;
    }


    .footer-links-section {
        padding:30px 0 30px 0;

    }
}

@media screen and (max-width: 900px) {
    footer {
        flex-wrap: wrap;
    }
    .cta-holder {
        width: 100%;
        margin-right: 0;
        margin-top: 0;
        align-items:center;
    }
    .cta-cover {
        background-color: rgb(255, 255, 255, .6);
    }

    .hero-tagline {
        font-size: 3rem;
        text-align: center;
    }

    .main-hero-message {
        width: 100%;
        flex-direction: column;
        gap:0;
        justify-content: space-between;
        padding: 1rem 0 1rem 0;
    }
    .hide-mobile {
        display:none;
    }

    .show-mobile {
        display:block;
        text-align: center;
        font-size: 5rem;
    }

    .main-hero-cover {
        background-color: rgb(255, 255, 255, .6);
    }


}

@media screen and (max-width:400px) {
    #cta-button {
        width: 95%;
        margin:auto;
    }
    .delivering-message{
        font-size: 4rem!important
    }


    .cta-link {
        width:100%;
    }
    
}

@media screen and (max-width:560px) {

    .main-hero-message {
        justify-content: center;
    }

    .review-text {
        font-size: 1.2rem;
    }
    .arrow-image {
        height: 25px;
        width: 25px;
    }
    
}
@media screen and (max-width: 542px){
    footer {
        flex-direction: column;
        justify-content: flex-start;
    }
}
@media screen and (max-width: 992px) {
    #cta-button-nav-mobile{
        display:block;
        background-color: var(--yellow);
        font-size: 2.25rem;
        border-radius: 10px;
        width: 200px;
        margin-right: 1rem;
        text-decoration:none;
        color: black;
    }
    #cta-button-nav {
        display:none;
    }

    #nav-button-link-wrapper {
        display:none;
    }
}