/* Created May 1 2023 by SV
Last Modified June 28 2024 by SV
*/
/* Global Variables (colours) */
:root {
    --white: #fff;
    --black: #000;
    --onyx: #454545;
    --lavender: #E6E6FA;
    --turquoise: #06BAB5;
    --purple: #5A3270;
    --mainPrimary: var(--lavender);
    --mainSecondary: var(--white);
    --footerBackground: #E6BFB3;
}
* { /* Sets fonts and default margins */
    font-family: 'Futura Std', 'Didact Gothic', sans-serif;
    color: var(--onyx);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    height: 100%;
    background-color: var(--white);
}
/* Classes for horizontal and vertical flows */
.horzbox { /* sets 3-column layout on large screens*/
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.equalcolumn > * {
    flex: 1 1 0;
}
.vertbox { /* fixed flexbox layout for all screens */
    display: flex;/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
    flex-direction:column;
}
.permhorz { /* sets row flexbox layout, no change with screen size */
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Header and nav items */
header {
    flex-flow: row nowrap;
    align-items: center;
    padding: 1vw;
    padding-bottom: 0;
    background-color: var(--white);
    z-index: 999999;
}
nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    width: 100%;
}
nav a {
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 30px;
    border: 2px solid var(--purple);
}
nav a:hover {
    transition: 0.5s;
    background-color: var(--lavender);
}
.topnav .icon {
    display:none;
}
.logo {
    min-width: 100%;
    height: 6vw;
    padding: .5vw;
    border-radius: 10px;
    border: 2px solid var(--purple);
}

/* Sticky menu/footer specific items */
.sticky {
    position: fixed;
    top: 0;
    width: 100%
}
footer {
    width: 100%;
    background-color: var(--footerBackground);
    flex: 0 0 auto;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999999;
}
footer p {
    font-size: 10pt;
    text-align:center;
}

/* General Text Styles */
h1 {
    font-family: 'ITC Century Std (Bold)','Kaisei Opti', serif;
    color: var(--black);
    font-size: 30pt;
    margin-bottom: 15pt;
}
h2 {
    font-family: 'ITC Century Std (Bold)','Kaisei Opti', serif;
    color: var(--black);
    font-size: 20pt;
    margin: 5pt;
}
h3 {
    font-size: 15pt;
    margin: 5pt;
}
p, li {
    font-size: 15pt;
    margin: 5pt;
    text-align: left;
    line-height: 1.5;
}
.notes {
    list-style: '\266B  '; /*UTF-8 Eighth note symbol \266A*/
    list-style-position: inside; /* https://www.w3schools.com/css/css_list.asp */
    margin-left: 15pt;
}
.eightnotes {
    list-style: '\266A  '; /*UTF-8 Eighth note symbol \266A*/
    list-style-position: inside; /* https://www.w3schools.com/css/css_list.asp */
    margin-left: 15pt;
}
.eightnotes > li {
    list-style: '\266A  ';
    list-style-position: inside; /* https://www.w3schools.com/css/css_list.asp */
    margin-left: 0;
}

/* Background Colours and Gradient Settings */
.shade {
    background-color: var(--mainPrimary);
}
.shade2white {
    min-height: 75px;
    background-image: linear-gradient(var(--mainPrimary), var(--mainSecondary))
}
.white2shade {
    min-height: 75px;
    background-image: linear-gradient(var(--mainSecondary), var(--mainPrimary))
}

/* Styles to show/hide mobile-device elements */
.YesMob { /* Hides mobile-only elements */
    display:none;
}
.NoMob { /* shows desktop-only elements */
    display:initial;
}

/* Styles for Specific Items */
img {
    object-fit: cover;
}
.imageBox {     /* background for the quote*/
    position: relative;
    text-align: center;
    color: white;
}
.overImage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75vw;
}
.textOverImage {
    text-align: center;
    font-size: 18pt;
    font-style: italic;
    font-weight: bold;
    line-height: 1;
}
.banner {
    padding: 0;
    height: 500px;
    object-fit: cover;
}
figure {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
}
figcaption {    /* centers text beneath the bio images */
    text-align: center;
}
.right {    /* for right-aligned text */
    text-align: right;
}
.center {
    text-align: center;
}
section { /* Some padding around all main items */
    padding: 3vw;
    z-index: 1;
}
#About >article>* {
    margin: 0 3vw;
}
#about>hr {
    margin: 1.5vw 15vw;
}
#WIMT {
    align-items: center;
}
.narrow {
    padding: 0 15vw;
}
.bio { /* bio entries to have the picture beside them, so row layout is required */
    flex-direction: row;
    align-items: flex-start;
}
.bio > article { /* Allows to change up the order between Desktop and Mobile */
    order:2;
}
.bio > figure { /* Image and space settings for the bio pic */
    order:1;
    margin:  0 3vw 0 0 ;
}
.biopic > img {
    max-height: 500px;
}
.pagepic { /* Settings for the vertical banner images */
    margin: 0 1vw 0 1vw;
    min-width: 33vw;
    height: auto;
}
.centerbutton {
    align-items: center;
}
#sessions { /* Sets spacing for the Types of Sessions elements */
    justify-content: space-evenly;
    /* margin-bottom: 4vw; */
}
#sessions > * {
    flex: 1 1 0;
}
#sessions > div {
    margin: 0 1vw;
    align-items: center;
}
.bookNow { /* Styles for the booking buttons */
    font-size: 20pt;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    width: 50vw;
    height: 60px;
    padding: 10px;
    margin: 4vw;
    background-color: var(--footerBackground);
    border: 2px solid var(--black);
    border-radius: 10px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);    
}
.benefits { /* Adds some space between the benefits sections */
    margin: 0 2vw;
}
.centerme > * { /* Centers the contact info items, and spaces them nicely */
    justify-content: space-around;
    text-align: center;
}


/* The following insanity is to allow the flip boxes in Services to work.
Details at https://www.w3schools.com/howto/howto_css_flip_image.asp
*/
.flip-box {
    width: 25vw;
    min-height: 400px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}
.flip-box:hover .flip-box-front {
    color: var(--lavender);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    /* border-radius: 60px;
    border: 8px solid var(--white); */
    /* background-color: var(--turquoise); */
    background-position: center;
    /* background-size: 50vw; */
}
/* .option1 {
    background-image: url("images/WatercolourSplatters_LightBlue2_small.png");
    background-size:contain;
    background-repeat: no-repeat;
}
.option2 {
    background-image: url("images/WatercolourSplatters_LightBlue2_small.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.option3 {
    background-image: url("images/WatercolourSplatters_LightBlue2_small.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.option4 {
    background-image: url("images/WatercolourSplatters_LightBlue2_small.png");
    background-size: contain;
    background-repeat: no-repeat;
} */

/* Style the front side */
.flip-box-front {
    background-image: url("images/WatercolourSplatters_LightBlue2_small.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Style the back side */
.flip-box-back {
    transform: rotateY(180deg);
    padding: 40px;
    background-image: url("images/CoffeeRing.png");
    background-size: contain;
    background-repeat: no-repeat;
}


/* For small screens */
@media screen and (max-width: 600px) {
    .horzbox { /* Change all layouts to vertical */
        flex-direction: column;
    }
    nav {
        flex-direction: column;
        justify-content: flex-end;
    }
    a {
        display: flex;
        align-items: center;
    }
    /* Navigation */
    .topnav {
        overflow: hidden;
    }
    .topnav a{
        display: block;
        float: left;
    }
    .topnav a:not(:last-child) {display: none;}
    .topnav a.icon {
    float: right;
    display: block;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
    .topnav.responsive a:not(:last-child) {text-align: right;}
    .NoMob { /* hides desktop-only elements */
        display:none;
    }
    .YesMob { /* Shows mobile-only elements */
        display:initial;
    }
    #Team {
        padding: 3vw;
    }
    .bookNow { /* Changes the button height for condensed viewing */
        height: 120px;
    }
    hr {
        margin: 8vw 15vw;
    }
    .bio {
        align-items: center;
    }
    .bio > figure { /* Image and space settings for the bio pic */
        order: 1;
        margin: 0;
    }
}