/*
Author: Carrie Lofquist
Date: Apr 18, 2025
File Name: styles.css
*/

/* Style additions for the bootstrap example */
.hero {
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), 
    rgba(255, 255, 255, 0.7)), url(../images/hair-flowing.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
}

.welcome {
    margin-top: 10%;
}

.bg-dark-purple {
    background-color: #373684;
}

.text-dark-purple {
    color: #373684;
}

td.gray-background {
  background-color: #f0f0f0;
}

/* CSS Reset */
body, header, nav, main, footer, img, h1, ul{
    
    padding: 0;
    border: 0;
}
table{
    padding:1px;
    border:0px;
}
td, th {
  vertical-align: top;
  padding: 10px;
}

header.hero {
  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(../images/hair-flowing.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 300px;
}



/* Style rule for images */
img {
    max-width:100%;
    display: block;
}

/* Style rule for mobile viewport */


/* Hide tab-desk class */
.tab-desk{
    display:none;
}

.dm-serif-display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}

.dm-serif-display-regular-italic {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
}


.roboto-<uniquifier> {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


/* Style rules for header content */
header {
    text-align: center;
    font-size: 1.5em;
    color: #B87333;
}

header h1 {
    font-style: italic;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    color: #B87333;
}

header h2 {

    font-family: "DM Serif Display", serif;
    font-weight: 200;
    color: #B87333;
}


/* Style rules for main content */
main {
    padding: 2%;
    background-color: #fff;
    overflow: auto;
    font-family: "Roboto", serif;
    font-style: normal;

}

main p {
    font-size: 1.25em;
}

.action {
    font-size: 1.25em;
    color: #B87333;
    font-weight: bold;
}



#info {
    clear: left;
    background-color: #c0caf7;
    padding: 1% 2%;
}

#info ul {
    margin: 0 10%;
}


#contact {
    text-align: center;
}

#contact .email-link {
    color: #4645a8;
    text-decoration: none;
    font-weight: bold;
}


.round {
    border-radius: 8px;
}

.tel-link{
    background-color:#373684;
    padding: 2%;
    margin: 0 auto;
    width: 80%;
    text-align: center;
    border-radius: 5px;
}

.email-link{
    color: #fff;
    text-decoration: none;
    font-size: 1.5em;
    display: block;
}
.map {
    border: 5px solid #373684;
    width: 95%;
    height: 50%;
}

/* Style rules for footer content */
footer {
    text-align: center;
    font-size: 0.65em;
    clear: left;
}

footer a {
    color: #4645a8;
    text-decoration: none;
}

/* Media Query for Mobile Viewport */
@media screen and (max-width: 480px) {
    
    h1{
        font-size: 1.5em;
        padding: 4%;
        margin-right: 15%;
    }
    
    aside {
        text-align: center;
        font-size: 1.5em;
        font-weight: bold;
        color: #373684;
        text-shadow: 3px 3px 10px #8280cb;
    }
    
    figure {
        position: relative;
        max-width: 275px;
        margin: 2% auto;
        border: 8px solid #373684;
    }
    
    figcaption {
        position: absolute;
        bottom: 0;
        background: rgba(55, 54, 132, 0.7);
        color: #fff;
        width: 100%;
        padding: 5% 0;
        text-align: center;
        font-family: Verdana, Arial, sans-serif;
        font-size: 1.5em;
        font-weight: bold;
    }
    
    /* Style rules for form elements */
    fieldset, input {
        bottom:2%;
        font-weight:bold;
        font-size:1.25em;
    }

    label {
        display: block;
        padding:3%;
    }
    
    #submit {
        top:0;
        bottom:0;
        left:auto;
        right:auto;
        display: block;
        padding: 3%;
        background-color:#b7be1;
        font-size:1em;
    }
    
    .desktop-nav{
        display: none;
    }
    
    .mobile-nav a{
        color:#fff;
        text-align: center;
        font-size: 2em;
        text-decoration: none;
        padding: 3%;
        display: block;    
    }
    
    .mobile-nav a.menu-icon{
        display: block;
        position: absolute;
        right:0;
        top: 0;
    }
    
    .social img{
        display: inline-block;
        padding: 4%;
    }
    
    .menu-icon div{
        height: 50px;
        width: 50px;
        background-color: #373684;
    }
    
    #menu-links{
        display:none;
    }
}
/* Media Query for Tablet Viewport */
@media screen and (min-width: 550px), print{
    
    /* Tablet Viewport: Show tab-desk class, hide mobile class  */
    .tab-desk{
        display:block;
    }
    .mobile{
        display:none;
    }
    /* Tablet Viewport: Style rule for header content */
    span.tab-desk {
        display:inline;
    }
    /* Tablet Viewport: Style rules for nav area */
    .mobile-nav nav li{
        border-top: none;
        display: inline-block;
        font-size: 1.5em;
        border-right: 1px solid #e5e9fc;
    }

    /* Remove right border for the last navigation list item */
    .mobile-nav nav li:last-child {
        border-right: none;
    }
    
    
    /* Style for navigation links */
    .mobile-nav nav li a {
        padding: 0.25em 0.5em;
    }
    
    @media screen and (max-width: 768px) {
    
        /* Tablet Viewport: Style rule for map */
        .map {
            width: 500px;
            height: 450px;
        }

    }

    /* Media Query for Desktop Viewport */
    @media screen and (min-width: 769px), print {
    
        .desktop-nav{
            display: block;
        }
        
        .mobile-nav{
            display: none;
        }
        
        /* Desktop Viewport: Style rule for header */
        header {
            padding: 2%;
        }
    
        /* Desktop Viewport: Style rules for nav area */
        .desktop-nav nav li a {
            padding: 0.5em 1.5em;
        }
    
        .desktop-nav nav li a:hover {
            color: #373684;
            background-color: #e5e9fc;
        }
    }
    
    /* Tablet media query */
    @media screen and (max-width: 768px) {
        
        /* Tablet Viewport: Style rule for map */
        .map {
            width: 500px;
            height: 450px;
        }
    
    }
    
    /* Media Query for Desktop Viewport */
    @media screen and (min-width: 769px), print {
    
        /* Desktop Viewport: Style rule for header */
        header {
            padding: 2%;
        }
    
        /* Desktop Viewport: Style rules for nav area */
        .desktop-nav nav li a {
            padding: 0.5em 1.5em;
        }
    
        .desktop-nav nav li a:hover {
            color: #B87333;
            background-color: #e5e9fc;
        }
    
        /* Desktop Viewport: Style rules for main content */
        #info ul {
            margin-left: 5%;
        }
    
        main h3 {
            font-size: 1.5em;
        }
    

    }
    
    /* Media Query for Print */
    @media print {
    
        /* Print Viewport: Style rule for body */
        body {
            background-color: #fff;
            color: #000;
        }
    }
    
}