/* FONTS
- MONTSERRAT / RALEWAY - HEADLINES
- OPEN SANS / ROBOTO - BODY TEXT
- PLAYFAIR DISPLAY - ACCENT
*/

/* COLOR SCHEME
- DEEP NAVY (#1F3B4D) - HEADER BACKGROUND, PRIMARY BUTTONS
- COOL LIGHT GREY (#F3F5F7) - PACK BACKGROUND SECTIONS, CARDS BEHIND LISTING PHOTOS
- CHARCOAL (#222831) - MAIN BODY TEXT, HEADINGS ON LIGHT BACKGROUNDS
- TAUPE (#A1867F) - ACCENTS
- SAGE GREEN (#7EA16B) - ACCENTS / CALL TO ACTION
*/

/* ESTABLISH FONT SETS*/ 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/*
- MONTSERRAT / RALEWAY - HEADLINES - "Montserrat", "Arial", Sans-serif / "Raleway","Arial Narrow", sans-serif 
- ROBOTO - BODY TEXT - "Roboto", "Arial Black", sans-serif
- PLAYFAIR DISPLAY - ACCENT - "Playfair Display", "Times New Roman", serif
*/

/**** LOCATION FORMATTING ****/
/*------------------------------------------------------------------------------------*/
body{
    max-width: 95vw;
    margin: 0 auto;
    padding: 1%;
}

/**** TEXT FORMATTING  ****/
/*------------------------------------------------------------------------------------*/
h2 {
    font-family: "Raleway","Arial Narrow", sans-serif ;
    color: #1f3b4d;
}

h3 {
    font-family: "Raleway","Arial Narrow", sans-serif;
    color: #222831;
}

p {
    font-family: "Roboto", "Arial Black", sans-serif;
    color: #222831;
}

/**** HEADER & NAV FORMATTING ****/
/*------------------------------------------------------------------------------------*/
/* LOGO FORMATTING */
.logo {
    display: block;
    max-height: 200px;
    padding-left: 5px;
}

/* PLACES NAV BAR LINK IN A HORIZONTAL LINE */
.main-nav li {
    display: inline;
    list-style-type: none;
    padding: 0;
    margin: 1em auto;
    text-align: justify;
    font-weight: bold;
}

/* CONTROLS LINK SPACING */
.main-nav li a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 0.25em 0.75em;
    margin: 1em;
    line-height: 1.2;
    font-family: "Montserrat", "Arial", Sans-serif ;
    font-size: 125%;
    background-color: #1F3B4D;
    color: #FFFFFF;
    border-radius: 2px;
}

/*adds hover effect*/
.main-nav li a:hover {
    background-color: #A1867F;
    color: #222831;
    transform: scale(125%);
}

/* removes underline*/
li {
    text-decoration: none;
}

/* secret footer link */
.hidden {
    text-decoration: none;
    color: #222831;
}

/**** BUTTON FORMATTING  ****/
/*------------------------------------------------------------------------------------*/
#submit{
    background-color: #A1867F;
    border-radius: 4px;
    border: none;
    padding: 10px;
}
#submit:hover, 
#submit:focus {
    transform: scale(125%);
}

.contact-btn{
    background-color: #7EA16B;
    border-radius: 4px;
    border: none;
    padding: 10px;
}

/* KEYFRAME */
@keyframes contactAnimation{
    0%   {background-color: #7EA16B; color: #000000;}
    50%  {background-color: #567E59; color: #E5ECEF;}
    100% {background-color: #1F3B4D; color: #FFFFFF;}
} 

.contact-btn:hover, 
.contact-btn:focus {
    transform: scale(125%);
    animation-name: contactAnimation;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;  
    animation-direction: alternate;
}


/**** IMAGE FORMATTING  ****/
/*------------------------------------------------------------------------------------*/
.featuredProperty{
    max-width: 75%;
    max-height: 75%;
    border-radius: 8px;
}

.listProperty{
    max-width: 75%;
    max-height: 75%;
    border-radius: 8px;  
}

.contactImage{
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
}

/**** FOR-SALE AND HOME-LIST FORMATTING ****/
/*------------------------------------------------------------------------------------*/
.property-divider{
    border: none;
    height: 2px;
    background-color: #A1867F;
    margin: 2rem 0;
}

.property-card {
    position: relative;
    padding: 20px;
}

.sold-property {
    background-color: #F3F5F7 !important;
}

.featured-property::before{
    content: "⭐ FEATURED";
    position: absolute;
    top: -8px;
    right: 15px;
    background: #7EA16B;
    color: #FFFFFF;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: "Montserrat", "Arial", Sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}


/**** HOME PAGE FORMATTING ****/
/*------------------------------------------------------------------------------------*/
.bar {
    background-color: #A1867F;
    padding: 1%;
    border-radius: 4px;
}
.featured {
    background-color: #F3F5F7;
    padding: 1%;
}

/**** CONTACT FORM FORMATTING ****/
/*------------------------------------------------------------------------------------*/
.contact li {
    display: inline-block;
    list-style-type: none;
    padding: 0.2em 1em;
    margin: 1em auto;
    text-align: center;
}

#contactProperty{
    font-size: smaller;
}