:root {
    --header-height: auto;
    --footer-height: 5vh;
    --header-footer-color: #f58220;
    --hamburger-menu-color: black;
}

@font-face {
  font-family: Norwester;
  src: url('../../fonts/norwester.otf');
}

@font-face{
           font-family: NexaRust;
           src: url('../../fonts/NexaRustSlab.otf');
 }

 @font-face{
           font-family: RacingSansOne;
           src: url('../../fonts/RacingSansOne-Regular.ttf');
 }

 @font-face{
    font-family: Montserrat;
    src: url('../../fonts/Montserrat-VariableFont_wght.ttf');
 }


/* Default styles for mobile devices */
html, body {
    font-size: 62.5%;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 100%;
    display: flex; /* Make the body a flex container */
    flex-direction: column; /* Stack children vertically */
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box;
     font-family: Norwester;
}

a {
    color: white;
    -webkit-text-stroke: 4px black; /* Applies a 4px black stroke */
    paint-order: stroke fill; /* Ensures stroke is drawn first */

}

a:hover {
  color: hotpink;
}

.header{
    background-color: var(--header-footer-color);
    height: var(--header-height);
    z-index: 2; /* make sure this layer is at the bottom */
    /* overflow: hidden; /* needed to increase div height to  match logo */
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    flex-shrink: 0; /* Prevent header/footer from shrinking */
    border-bottom: white solid 4px;
}

.header img {
    /*width: 300px; */
    width: clamp(200px, 40%, 500px);
    float: left;
    z-index: 5;
    display: block;
    min-height: 50px;
}

.off-screen-menu {
    background-color: var(--header-footer-color);
    height: 100vh;
    width: 80vw;
    max-width: 600px;
    position: fixed;
    top: 0;
    right: -600px;
    display: flex;
    flex-direction: column;
    
    text-align: center;
    font-size: 5vw;
    transition: .3s ease;
    z-index: 1001;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box;

    ul {
        list-style: none;

        li{
            margin-bottom: 40px;
        }
    }   
}

.off-screen-menu.active {
    right: 0px;
    padding-top: 50px;
    background-color: var(--hamburger-menu-color);
}

nav {
    padding: 10px 20px 0 20px;
    display: flex;
    justify-content: center;
    background-color: var(--header-footer-color);
    z-index: 1001;
}

.ham-menu {
    background-color: var(--header-footer-color);
    height: 50px;
    width: 50px;
    margin-left: auto;
    position: relative;
    z-index: 1002;
}

.ham-menu span {
    height: 5px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
 }

.ham-menu span:nth-child(1){
    top: 25%;
}

.ham-menu.active{
    background-color: var(--hamburger-menu-color);
}

.ham-menu span:nth-child(3){
    top: 75%;
}

.ham-menu.active span:nth-child(1){
    top:50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.ham-menu.active span:nth-child(2){
    opacity: 0;
}

.ham-menu.active span:nth-child(3){
    top:50%;
    transform: translate(-50%, 50%) rotate(-45deg);
}

.announcement{
    width: 100%;
    color: rgb(10, 211, 10);
    background-color: black;
    font-size: 2.5rem;
    border-bottom: white solid 4px;
    padding-left: 8px;
    padding-right: 8px;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    font-family: RacingSansOne;
}

.main{
    width: 100%;
    position: sticky;
    z-index: 1;
    flex-grow: 1; /* Allow main to grow and fill available space */
    overflow-y: auto; /* Add scrollbar if content exceeds main's height */
    background-image: url('images/mobile_main_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: center;
    font-family: Norwester;    
    z-index: 1;
}

.petaluma{
    background-image: url('images/petaluma_bg.jpg');
}

.berkeley{
    background-image: url('images/berkeley_bg.jpg');
}

.sanrafael{
    background-image: url('images/sanrafael_mobile_bg.jpg');
}

.santarosa{
    background-image: url('images/santarosa_desktop_bg.jpg');
}

.locations {
    background-image: url('images/mobile_locations_bg.jpg');
    background-position: center top;
    text-align: center;
}

.main .front-page-title{
    font-size: 8.5vw;
    margin-top: 50px;
    -webkit-text-stroke: 4px black; /* Applies a 4px black stroke */
    paint-order: stroke fill; /* Ensures stroke is drawn first */
}

.main .page-title{
    font-size: 8vw;
    margin-top: 15px;
    -webkit-text-stroke: 4px black; /* Applies a 4px black stroke */
    paint-order: stroke fill; /* Ensures stroke is drawn first */
}

.main .list{
    padding: 10px;
    height: auto;
    font-size: 4rem;
    
}

.main .description-box{
    display: inline-block;
    margin-top: 20px;
    width: 75vw;
    padding: 0;
    font-size: 1rem;
    border: black solid 4px;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;

    .description-title{
        font-size: clamp(24px, 5rem, 5vw);
        width: 100%;
        color: white;
        background-color: black;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
    }


    .description-text{
        text-align: left;
        padding: 5px 20px 5px 5px;
        font-size: clamp(2vw, 3vw, 3vw);
        background-color: rgba(255,255,255,.7);
        color: black;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        font-family: Montserrat;
        font-weight: Bold;
    }

    ul{
        list-style: none;
    }


  }

.locationListBox{
    width: 80vw;
    height: auto;
    padding: 0 0 0 0;
    margin: 0 0 10px 0;
    /* text-align: center; */
    display: inline-grid;
     grid-template-areas:
    "name name"
    "contact map";
    grid-template-columns: 2fr 1fr;
    border: black solid 2px;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    gap: 0;

    div.sectionTitle{
        grid-area: name;
        background-color: black;
        color: white;
        text-align: left;
        padding: 3px 0 5px 8px;
        font-size: 4.5rem;
    }

    div.locationContact{
        grid-area: contact;
        height: auto;
        text-align: left;
        /*border: black solid 1px; */
        padding: 5px 0 5px 8px;
        font-size: 4rem;
        background-color: rgba(0,0,0,.6);
        color: black;
    }

    div.locationAddress{
        grid-area: map;
        justify-self: end;
        border-left: black solid 2px;
        padding: 0px 0 0px 0px;
        margin: 0 0 0 0;
    }

}

iframe {
    border: none;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

.oneTwoEvenListBox{
    width: 70vw;
    height: auto;
    padding: 0 0 0 0;
    margin: 20px 0 0 0;
    /* text-align: center; */
    display: inline-grid;
    grid-template-areas:
    "name name"
    "contentTitle contentInfo";
    grid-template-rows: "contentTitle" auto "contentInfo" auto;
    gap: 0;
    grid-template-columns: 1fr 1fr;
    /* grid-template-rows: repeat(auto-fill, 1fr); */
    grid-auto-rows: auto;
    border: black solid 2px;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;

    div.sectionTitle{
        grid-area: name;
        grid-column:  1fr;
        background-color: black;
        color: white;
        text-align: center;
        padding: 3px 0 5px 0px;
        font-size: 6vw;
    }

    div.contentTitle{
        height: auto;
        text-align: right;
        font-size: 5vw;
        color: white;
        margin: 0 0 0 0;
        padding: 12px 20px 10px 0;
    }

    div.contentInfo{
        /* grid-area: contentInfo; */
        /* justify-self: end; */
        text-align:left;
        font-size: 5vw;
        color: white;
        margin: 0 0 0 0;
        padding: 12px 0px 10px 20px;
        padding-left: 20px;
        padding-bottom: 10px;
    }
}

.oneTwoLeftListBox{
    width: 75vw;
    height: auto;
    padding: 0 0 0 0;
    margin: 0 0 20px 0;
    /* text-align: center; */
    display: inline-grid;
    grid-template-areas:
    "name name"
    "contentTitle contentInfo";
    grid-template-rows: "contentTitle" auto "contentInfo" auto;
    gap: 0;
    grid-template-columns: 25% 1fr;
    grid-template-rows: repeat(auto-fill, 1fr);
    grid-auto-rows: auto;
    border: black solid 2px;
        -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box;

    div.sectionTitle{
        grid-area: name;
        grid-column:  1fr;
        background-color: black;
        color: white;
        text-align: center;
        padding: 3px 0 5px 8px;
        font-size: 5vw;
    }

    div.contentTitle{
        /* grid-area: contentTitle; */
        height: auto;
        text-align: left;
        font-size: 4vw;
        background-color: rgba(255,255,255,.75);
        color: black;
        margin: 0 0 0 0;
        padding-left: 3px;
        border-bottom: black solid 1px;
    }

    div.contentInfo{
        /* grid-area: contentInfo; */
        /* justify-self: end; */
        text-align:left;
        font-size: 4vw;
        background-color: rgba(255,255,255,.75);
        color: black;
        margin: 0 0 0 0;
        padding: 3px;
        border-bottom: black solid 1px;

        .cashCard{
            font-size: 2vw;
        }
    }

    div.contentDesc{
        text-align: left;
        font-size: 3vw;
        color: black;
        margin: 0 0 0 0;
        padding: 3px;
    }
}

.oneOneListBox{
    width: 75vw;
    height: auto;
    padding: 0 0 0 0;
    margin: 0 0 20px 0;
    display: inline-grid;
     grid-template-areas:
        "name"
        "content";
    grid-template-columns: 1fr;
    border: black solid 2px;
        -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box;

    div.sectionTitle{
        /* first three are for centering the title */
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        grid-area: name;
        background-color: black;
        color: white;
        text-align: center;
        padding: 3px 0 5px 8px;
        font-size: 5vw;
    }

    div.content{
        grid-area: content;
        height: auto;
        text-align: center;
        /*border: black solid 1px; */
        padding: 3px 0 5px 8px;
        font-size: 4vw;
        background-color: rgba(255,255,255,.75);
        color: black;
    }
}

.openHours{
    color: rgb(10, 211, 10);
}

.footer{
    display: block;
    width: 100%;
    height: var(--footer-height);
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    overflow: hidden; /* needed to increase div height to  match logo */
    flex-shrink: 0; /* Prevent header/footer from shrinking */
    background-color:  var(--header-footer-color);
    z-index: 1; /* make sure this layer is at the bottom */
    border-top: white solid 4px;
}

.stylistContainer{
     position: relative;
     width: 60%;
     height: auto;
     margin-left:auto;
     margin-right:auto;
     margin-top:20px;
     margin-bottom: 20px;
     border: 2px solid black;
     vertical-align: top;
     background-color: rgba(255,255,255,.8);
                font-family: Norwester;
}

.stylistPicContainer{
           display:inline-block;
           width: 20%;
           text-align: left;
 }

.stylistPic {
            width: 100%;
            max-width: 200px;
            height: auto;
            max-height: 100%;
            border-radius: 8px;
            float: left;
            margin: 5px;
            border: 2px solid black;
}

.stylistText {
             display: inline-block;
             width: 75%;
             margin: 5px;
             vertical-align: top;
             border: solid blue 2px;
 }

.stylistName {

             color: black;
             font-weight:bold;
             text-align: left;
             float: left;
             font-size: clamp(18px, 1.5vw, 2vw);
             vertical-align: top;
             display: inline;
             text-decoration: underline;
             
}

.stylistBlurb {

              color: black;
              text-align: left;
              font-size: 18px;
              border: solid red 1px;
 }

 .stylistContainer button {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
 
 .book-now-btn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f58220; /* Orange */
  border: 2px solid #000000; /* Black outline */
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.book-now-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.book-now-btn:active {
  transform: scale(0.98);
}

/* ============================================================*/
/* Styles for tablets and desktops (screens wider than 1000px) */
@media (min-width: 1000px) {
 /*   :root {
      --header-height: auto;
      --footer-height: auto;
      --header-footer-color: rgb(236, 156, 8);
    } */

    html, body {
        font-size: 36px;
    }

    .header{
        display: flex;
        justify-content: space-between; /* Puts maximum space between logo and nav */
        overflow: hidden;
        align-items: center;

        a {
            -webkit-text-stroke: 2px black; /* Applies a 4px black stroke */
        }
        
        nav {
            display: none;
        }

        .ham-menu {
            display: none;
        }

        .off-screen-menu {
            padding: 0 0 0 0;
            width: auto;
            height: auto;
            max-height: 100%;
            color: white;
            display: inline;
            flex-direction: row;
            text-align: center;
            /* justify-content: center; */
            right: 0;
            top: 0px;
            font-size: 30px;
            z-index: 1;
           
            -moz-box-sizing: border-box; 
            -webkit-box-sizing: border-box; 
            box-sizing: border-box;
            vertical-align: bottom;
            align-self: flex-end;
            overflow: hidden;

            ul {
                list-style-type: none;
                padding: 0 0 0 0;
                margin: auto 0 5px 0;
                /*vertical-align: bottom;*/

                li {
                    margin: auto 0 auto 0;
                    padding: 0 25px 0 0;
                    font-family: Norwester;
                    display: inline-block;
                }
            }   
        }
    }
        
    .header img {
        /* width: 300px; */
        height: auto;
     }

    .announcement{
        font-size: .75rem;
}

    .main {
        background-image: url('images/desktop_main_bg.jpg');
        background-position: top left;
        align-items: center;
    }

    .petaluma{
        background-image: url('images/petaluma_bg.jpg');
        background-position: center center;
    }

    .berkeley{
        background-image: url('images/berkeley_desktop_bg.jpg');
        background-position: center center;
    }

    .sanrafael{
        background-image: url('images/sanrafael_desktop_bg.jpg');
        background-position: center center;
    }

    .santarosa{
        background-image: url('images/santarosa_desktop_bg.jpg');
        background-position: center center;
    }

    .locations {
        background-image: url('images/locations_desktop_bg.jpg');
        background-position: left center;
    }

    .main .front-page-title{
        font-size: 7vw;
        margin-top: 60px;
    }

    .main .page-title{
        font-size: 3rem;
        margin-top: 20px;
    }

    .main .list{
        padding: 5px;
        height: auto;
        -webkit-text-stroke: 3px black; /* Applies a 4px black stroke */
        paint-order: stroke fill; /* Ensures stroke is drawn first */
        font-size: 4vw;
    }

    .locationListBox{
    width: 60vw;

        div.sectionTitle{
            font-size: 1.75rem;
        }

        div.locationContact{
            font-size: 1.25rem;
        }

        div.locationAddress{
            width: 100%;
        }
    }

 .main .description-box{

    .description-text{
        font-size: clamp(1vw, 2vw, 2vw);
    }
  }


    .oneOneListBox{
        width: 60vw;
        margin: 0 0 20px 0;
        
        div.sectionTitle{
            font-size: 3vw;
        }

        div.content{
            font-size: 2vw;
        }
    }

    .oneTwoEvenListBox{
        width: 60vw;

        div.sectionTitle{
            font-size: 4vw;
        }

        div.contentTitle{
            font-size: 3vw;
        }

        div.contentInfo{
            font-size: 3vw;
        }
    }

    .oneTwoLeftListBox{
    width: 60vw;
    
        div.sectionTitle{
            font-size: 3vw;
        }

        div.contentTitle{
            font-size: 2vw;

            .openHours{
                color: rgb(10, 211, 10);
            }
        }

 
        div.contentInfo{
            font-size: 2vw;

            .cashCard{
                font-size: 1.5vw;
            }
        }
        div.contentDesc{
            font-size: 1vw;
        }
    }

 
    .footer{
        display: block;
        background-color: var(--header-footer-color);
        height: var(--footer-height);
        z-index: 1;
        overflow: hidden; /* needed to increase div height to  match logo */
        width: 100%;
        flex-shrink: 0;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
    }


 } /*end of desktop media query */