:root {
    --bliss-purple:   #9F1C6D;
    --test-border:    1px solid black;


}

/*****************************************************************************************************************************/

html {
    background-color: white;
    font-family:      'Lato', Helvetica, Arial, Lucida, sans-serif;
}

html * { 
    box-sizing:       border-box; 
    margin:           0;
    padding:          0;
    border:           none;
}

html ul {
    list-style: none;
}

/*****************************************************************************************************************************/

.accent {
    /* font-family: "Rock Salt", cursive; */
    /* font-style:  normal; */

    /* font-family:         "Manrope", sans-serif; */
    /* font-optical-sizing: auto; */
    /* font-weight:         normal; */
    /* font-style:          normal; */

    font-family: inherit;
}


.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;
}


h1, h2, h3, h4, h5, h6 {
    color:       var(--bliss-purple);
    font-family: "DM Serif Display", serif;
    /* font-weight: bold; */
    /* text-align:  center; */
}

button { font: inherit; }

img { width: 100%; height: 100%; }

/*****************************************************************************************************************************/
/* i styles */

i {
    font-weight:   normal;
    font-style:    normal;
    /* padding-left:  5px; */
    /* padding-right: 5px; */
}

i.service {
    grid-column:   1;
    font-weight:   bold;
    border-bottom: 1px dotted black;
    /* padding-left:  5px; */
    /* padding:       0 5px; */
}

i.description {
    grid-column:  1;
    font-style:   italic;
    border:       none;
    /* padding:      0 5px; */
}

/* i.description:not(:last-of-type) {
    padding-bottom: 5px;
} */

i.price {
    grid-column:  2;
    /* padding:      0 5px; */
    /* border-bottom: 1px dotted black; */

}

/*****************************************************************************************************************************/

body {
    background-color: white;
    width:            auto;
    height:           100svh;
    margin:           0;
    padding:          5px;

    display:         grid;
    grid-template:   'header . nav'         15%
                     'main main main'       auto
                     'footer footer footer' 15% / auto 1fr auto;
}

body > * {
    box-sizing:       border-box; 
    width:            100%;
    height:           100%;
}

/*****************************************************************************************************************************/

header {
    grid-area:        header;
    position:         relative;
    width:            auto;
    height:           100%;
    background-color: inherit;
    display:          flex;
}

header > #logo  { 
    content:         url('/images/bliss-logo.png') / 'bliss-logo'; 
    width:           auto;
    height:          100%;
    padding-bottom:  5px;
}

/* header { border: var(--test-border); } */

/*****************************************************************************************************************************/

nav {
    grid-area:        nav;
    background-color: inherit;
    width:            fit-content;
    height:           fit-content;    
    align-self:       flex-end;
}

nav * {
    background-color: inherit;
    font-family:      "DM Serif Display", serif;
    font-size:        1.10em;
    font-weight:      normal;
    color:            black;
    text-decoration:  none;
}

nav > ul {
    width:            100%;
    height:           100%;
    display:          flex;
    /* gap:              10px; */
}

/* nav > *       { border: var(--test-border); } */
/* nav > ul      { border: var(--test-border); } */
/* nav > ul > li { border: var(--test-border); } */

nav button, nav a, nav > ul > li { 
    /* width:            100%; */
    /* height:           100%; */
    display:          flex;
    padding:          0 5px;
    /* gap:              10px; */
    font-weight:      normal;
    border:           none;
    border-bottom:    1px solid transparent;
}

nav > ul > li > * { color: inherit; font-weight: inherit; }

nav button { font-family: 'Material Icons'; }

/* nav > button:hover,  */
nav > ul > li:hover { 
    /* filter:       brightness(110%); */
    font-weight:  normal;
    color:        black;
    border-color: black;
    
}

/* nav > button:active,  */
nav > ul > li:active { 
    /* filter:       brightness(110%); */
    font-weight:  bold;
    color:        black;
    border-color: var(--bliss-purple);
}

nav > ul > li:has(a[aria-current='page']) {
    font-weight:  bold;
    color:        var(--bliss-purple);
    border-color: var(--bliss-purple);
}

/*****************************************************************************************************************************/

main {
    grid-area:        main;
    /* background-color: lightpink; */
}

main > * { padding: 5px; }

/*****************************************************************************************************************************/

footer {
    grid-area:        footer;
    /* background-color: lightgreen; */
}


/*****************************************************************************************************************************/
/* CLASSES */

.flex-container {
    width:   100%;
    height:  100%;
    display: flex;
}

.flex-row {
    width:   100%;
    display: flex;
}

.flex-column {
    height:         100%;
    display:        flex;
    flex-direction: column;
}

.banner-standard {
    background-color: black;
    border: var(--test-border);
    width:   100%;
    height:  250px;
}

.banner-small {
    border: var(--test-border);
    display: flex;
    width:   100%;
    height:  200px;
}

.banner-large {
    border: var(--test-border);
    display: flex;
    width:   100%;
    height:  300px;
}

/*****************************************************************************************************************************/
/* HOME PAGE */

main[id="home"] {
    padding: 5px;
}

/* section { border: var(--test-border); } */

/* main#home > section#banner {} */

main#home > section#banner > div {
    /* border:           1px solid white; */
    background-color: black;
    color:            white;
    aspect-ratio:    3 / 1; 
    align-content:    center;
    text-align:       center;
}

main#home > section#about {
    width:   100%;
    height:  auto;
    display: grid;
    grid-template: 'heading image' auto 'paragraph image' 1fr 'call image' auto  / 1fr 1fr;
}
/* main#home > section#about > * { border: var(--test-border); } */

main#home > section#about > h2  { grid-area: heading;   }
main#home > section#about > p   { grid-area: paragraph; }
main#home > section#about > img { grid-area: image;     }
main#home > section#about > h3  { grid-area: call;      }


main#home > section#services {
    width:           100%;
    aspect-ratio:    3 / 1; 
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             5px;
    color:           var(--bliss-purple);
    font-family:     "DM Serif Display", serif;
    font-size:       1.25em;
}

main#home > section#services > a {
    width:           100%;
    height:          100%;
    align-content:   center;
    text-align:      center;
    text-decoration: none;
    color:           white;
    position:        relative;
    z-index:         1;    
}

main#home > section#services > a#manicure::before {
    content:             "";
    position:            absolute;
    z-index:             -1;
    top:                 0;
    bottom:              0;
    left:                0;
    right:               0;
    background-image:    url('/images/manicure.png');
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     cover;
    filter:              brightness(60%);
}

main#home > section#services > a#pedicure::before {
    content:             "";
    position:            absolute;
    z-index:             -1;
    top:                 0;
    bottom:              0;
    left:                0;
    right:               0;
    background-image:    url('/images/pedicure.png');
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     cover;
    filter:              brightness(60%);
}

main#home > section#services > a#nails::before {
    content:             "";
    position:            absolute;
    z-index:             -1;
    top:                 0;
    bottom:              0;
    left:                0;
    right:               0;
    background-image:    url('/images/acrylic.png');
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     cover;
    filter:              brightness(60%);
}

main#home > section#services > a:hover { filter: brightness(80%); }


main#home > section#blog {
    aspect-ratio:    3 / 1; 
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

main#home > section#blog > * {
    border:           1px solid white;
    background-color: black;
    color:            white;

    width:         100%;
    height:        100%;
    align-content: center;
    text-align:    center;
}


/* section.row {
    background-color: orange;
    width:            100%;
    display:          grid;
    grid-template:    'heading image' auto 'paragraph image' 1fr / 1fr 250px;
}

section.row > h2 { grid-area: heading;   }
section.row > p  { grid-area: paragraph; }
section.row > img {
    grid-area: image;
    width: 100%;
    height: auto;
} */



.block {
    background-color: orange;
    width:            100%;
    height:           200px;

    /* display:         flex;
    justify-content: flex-start;
    justify-content: space-between; */

    display:      grid;
    grid-template-columns: auto 1fr;
    grid-template-rows:    auto auto;
}

.block > img {
    height: 100%;
}





/*****************************************************************************************************************************/
/* ABOUT PAGE */


/*****************************************************************************************************************************/
/* SERVICES PAGE */

main[id="services"] {

    display:       grid;
    grid-template: 'heading heading'     auto 
                   'manicure pedicure'   auto /* 1fr */
                   'gel-x add-ons'       auto /* 1fr */
                   'acrylic add-ons'     auto /* 1fr */
                   / 1fr 1fr;
                   /* 'pedicure .'        auto / 1fr 1fr; */

                 
    /* align-content: start; */
    gap:           10px;
    /* padding:       5px; */
    padding:       0 10px 10px 10px;


}

/* main[id="services"] * { border:  var(--test-border); } */

main[id="services"] > *  {
    padding: 5px 0;
}

/* main[id="services"] > h2 {  */
    /* justify-content: flex-end; */
/* } */

main[id="services"] > div {
    background-color: lightpink;
    display:          flex;
    align-items:      center;
    /* border:           var(--test-border); */
    /* border-bottom:    2px solid var(--bliss-purple); */


}



main[id="services"] > div > h2 { /* , main[id="about"] > div > h1 { */
    /* background-color: lightblue; */
    flex-direction:   column;
    text-align:       center;
    writing-mode:     tb-rl;
    transform:        rotate(-180deg);
    /* border:           2px solid transparent; */
    /* padding:          10px 0; */
}

main[id="services"] > div > div {
    /* background-color:      lightgreen; */
    flex:                  1;
    display:               grid;
    grid-template-columns: auto 4.25ch;
    align-content:         start;
    gap:                   5px;

    /* border:                2px solid var(--bliss-purple);  */
    /* border-top:            2px solid var(--bliss-purple);  */
    /* border-bottom:         2px solid var(--bliss-purple);  */
    border-left:           2px solid var(--bliss-purple); 
    /* border-right:          2px solid var(--bliss-purple);  */

    /* padding:               10px; */
    /* padding:               10px 0 10px 10px; */
    /* padding: 0 5px 5px 0; */
    padding-left:   5px;
    padding-bottom: 5px;


}

/* main[id="services"] > div > div > * { */
    /* background-color: lightgoldenrodyellow; */
    /* display:         flex; */
    /* justify-content: space-between; */
    /* align-items:     center; */
    /* padding:         0 5px; */
    
/* } */

main[id="services"] > h2                 { grid-area: heading;  }
main[id="services"] > div[id="manicure"] { grid-area: manicure; }
main[id="services"] > div[id="pedicure"] { grid-area: pedicure; 
    /* background-image: url("/images/IMG_7658.JPG");  */
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
}
main[id="services"] > div[id="acrylic"]  { grid-area: acrylic;  }
main[id="services"] > div[id="gel-x"]    { grid-area: gel-x;    }
main[id="services"] > div[id="add-ons"]  { grid-area: add-ons;  }


/*****************************************************************************************************************************/
/* CONTACT PAGE */

main[id="contact"] {
    background-color: lightpink;
    display:        grid;
    grid-template:  'map visit'   auto
                    'map contact' auto
                    'map follow'  auto
                    'map .'       1fr / 1fr auto;
    gap:            10px;
    padding:        10px;
}

main[id="contact"] > div { margin: 5px;  }

/* testing only */
/* main[id="contact"] > div { border: var(--test-border); } */
/* main[id="contact"] * { border: var(--test-border); } */

/* map formatting */
main[id="contact"] > iframe[id="map"] {
    grid-area: map;
    width:     100%; /* 600px; */
    height:    100%; /* 450px; */
}

/* hours formatting */
main[id="contact"] > div[id="visit"] {
    grid-area: visit;
}

main[id="contact"] > div[id="visit"] > h3 {
    display:         flex;
    justify-content: flex-start;
    align-items:     center;
    gap:             5px;
}

main[id="contact"] > div[id="visit"] > ul > li {
    display:         flex;
    flex-wrap:       nowrap;
    justify-content: space-between;
    align-items:     center;
    gap:             5px;
}

/* contact formatting */
main[id="contact"] > div[id="contact"] {
    grid-area:       contact;
    display:         flex;
    flex-direction:  column;
    gap:             5px;
}

main[id="contact"] > div[id="contact"] > a {
    display:         flex;
    justify-content: flex-start;
    align-items:     center;
    gap:             5px;
}

/* follow formatting */
main[id="contact"] > div[id="follow"] {
    grid-area:       follow;
    display:         flex;
    justify-content: flex-start;
    align-items:     center;
    gap:             10px;
}

main[id="contact"] > div[id="follow"] > a {
    display:   flex;
    font-size: 1.5em;
}

/* image formatting */
main[id="contact"] > div > * > img { height: 1.1875em; width: auto; }
/* main[id="contact"] > div[id="hours"]   img { height: 1.225em; } */
/* main[id="contact"] > div[id="contact"] img { height: 1.225em; } */
/* main[id="contact"] > div[id="follow"]  img { height: 1.225em; } */

/*****************************************************************************************************************************/
/* BLOG PAGE */

main[id="blog"] {
    padding: 5px;
}

/*****************************************************************************************************************************/
/* MOBILE VIEWS */

@media only screen and (max-width: 600px) {
    
    html { font-size: 0.90em; }

    nav > ul {
        position:        fixed;

        top:              0;
        right:            -100%; /* use -100% after formatting */

        width:            33%;
        height:           100%;

        flex-direction:  column;
        justify-content: flex-start;
        align-items:     flex-start;
        
         z-index:           10; 
        transition:      right 300ms ease-in-out;
    }  

    nav > ul > li {
        border:           none;
        padding:          10px 0;
        border-left:      1px solid transparent;
    }

    nav > ul > li > * {
        width:      100%;
        text-align: left;
    }


    nav > ul.show {
        right: 0;
    }


    main[id="contact"] {
        /* grid-template:  '. visit .'     auto
                        'map map map'   1fr
                        '. contact .'   auto
                        '. follow .'    auto / auto 1fr auto; */
        grid-template:  'visit'   auto
                        'map'     1fr
                        'contact' auto
                        'follow'  auto / 1fr;                        
    }

    main[id="services"] {
        grid-template:  'heading'  auto
                        'manicure' auto /* 1fr */
                        'pedicure' auto /* 1fr */
                        'acrylic'  auto /* 1fr */
                        'gel-x'    auto /* 1fr */
                        'add-ons'  auto /* 1fr */
                        'add-ons'  auto /* 1fr */
                        / 1fr;
    }

    /* main[id="services"] > div { padding: 0 10px; } */
}

/*****************************************************************************************************************************/
/* MOBILE VIEWS */

@media only screen and (min-width: 600px) {


    nav #open, nav #close { display: none; }
}