/* Website concept design by Manuela, 2025-01-18
 * Web design implementation by Yvette Schudeck, 2025-02-09

DIRECTORY
    1.  =GENERAL & FONT SETTINGS
	2.  =HEADER & NAVIGATION
    3.  =SECTIONS
        3a.  =SECTION: CONTACT
        3b.  =SECTION: PRICELIST
        3c.  =SECTION: MY VISION
        3d.  =SECTION: MASSAGE
    4.  =BREAKPOINTS
*/

/*======================================
	GENERAL & FONT SETTINGS
======================================*/

*{
    margin: 0;
    padding: 0;
}

html{
    scroll-behavior: smooth;
}

body{
    color: #efe3b8;
    background-color: #cd9280;
}

img {
    border-style: none;
}

footer{
    text-align: center;
    padding-top: 15px;
    padding-bottom: 40px;
    font-size: 1.1em;
}

.caladea-regular {
    font-family: "Caladea", serif;
    font-weight: 400;
    font-style: normal;
}
  
.caladea-bold {
    font-family: "Caladea", serif;
    font-weight: 700;
    font-style: normal;
}

.caladea-regular-italic {
    font-family: "Caladea", serif;
    font-weight: 400;
    font-style: italic;
}
  
.caladea-bold-italic {
    font-family: "Caladea", serif;
    font-weight: 700;
    font-style: italic;
}

.cormorant-garamond{
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
}

h1 {
    display: block;
    font-size: 8em;
    margin:0 auto;
    font-weight: 400;
}

h2 {
    display: block;
    font-size: 4em;
    margin:0 auto;
    font-weight: 400;
}

h3 {
    display: block;
    font-size: 2em;
    margin:0 auto;
    font-weight: 400;
}

.font-color-bright{
    color: #fff8dd;
}

.font-color-light{
    color: #fffcf0;
}

.font-color-dark{
    color: #695125;
}

/*======================================
	HEADER & NAVIGATION
======================================*/

header {
    position: sticky;
    top: 0;
    background-color: #e9837082;
    backdrop-filter: blur(10px);
    transition: 1s;
    z-index: 10;
}

.header-scrolled{
    background-color: #cd9280;
    transition: 0.2s;
}

header h3{
    transition: 0.2s;
}

.logo {
    height: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.logo img {
    height: 100%;
    padding: 10px;
    float: left;
    display: block;
    box-sizing: border-box;
    mix-blend-mode: multiply;
}

.logo h2 {
    margin: 0;
}

header div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

nav {
    box-sizing: border-box;
    width: 40%;
    padding-right: 40px;
}

nav ul li {
    list-style: none;
    padding: 20px;
}

nav ul li a {
    color: #fff8dd;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 400;
    box-sizing: border-box;
    transition-duration: 0.5s;
}

nav ul li a:hover {
    color: #7d453a;
}

nav ul li a:after{
    display:block;
    content: '';
    border-bottom: 2px solid #efe3b8;  
    transform: scaleX(0);  
    transition: transform 250ms ease-in-out;
}

nav ul li a:hover:after { 
    transform: scaleX(1); 
}

.sidebar{
    background-color: #cd9280;
    z-index: 999;
    flex-direction: column;
    position: fixed;
    top:0px;
    right:0px;
    width: 300px;
    align-items: flex-start;
    justify-content: flex-start;
    display: none;
}

.sidebar-button{
    display: none; 
}

/*======================================
	SECTIONS
======================================*/

.landing{
    display:block;
    height:100px;
    margin-top:-100px;
    visibility:hidden;
}

#my-vision,
#pricelist,
#contact{
    height: 700px;
}

#contact{
    background-color: white;
}

.content-max-width {
	max-width: 1440px;
	margin: auto;
}

.text-align-left {
    text-align: left;
  }

.text-align-right {
    text-align: right;
}

.centered-area-vertical{
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.centered-area-horizontal{
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
}

table{
    word-wrap: break-word;
    white-space: normal;
    table-layout: auto;
}

/*======================================
	SECTION: CONTACT
======================================*/

#contact{
    color: #56372d;
}
#contact{
    background-color: #f6d6b7;
}

#contact svg{
    color: #cd9280;
    width: 40px;
    height: 40px;
}

#contact .icon-padding{
    padding: 20px 20px 0px 0px;
}

#contact .table-cell-header-padding {
    padding-top: 20px;
}

#contact table{
    font-size: 1.4em;
}

#contact .text-area {
    max-width: 500px;
    height: 535px;
    padding: 0px 20px 0px 20px;
    padding: 0px 1.25rem 0px 1.25rem;
    box-sizing: border-box;
    flex: 1 1 auto;
}

#big-logo-image {
    width: 100%;
    border-radius: 40px;
    /*outline: 2px solid #f6d6b7;*/
    outline-offset: -28px;
    max-width: 600px;
    max-height: 600px;
    mix-blend-mode: multiply;
}

#dark-text-pension{
  padding-top: 30px; 
  color: #5B4620;
}

/*======================================
	SECTION: PRICELIST
======================================*/
#pricelist{
    background-color: #ffeed5;
    background-image: url(images/magnolia-hero.jpg);
    background-size: auto 100%;
    background-repeat:no-repeat;
    background-position: center center;
}

#price-info{
  background-color: #fffcf0cc;
  padding: 20px;
  backdrop-filter: blur(1px);
  border-radius: 10px;
  color: #5B4620;
}

#pricelist h3{
    display: block;
    font-size: 1.8em;
    margin:0 auto;
    font-weight: 400;
    max-width: 682px;
}

#pricelist #price-panels{
    font-size: 1.4em;
    font-weight: 400;
}

.price-panel{
    background-color: #fffcf0cc;
    backdrop-filter: blur(5px);
    color: #5B4620;
    padding: 30px;
    text-align: left;
    margin: 30px;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#price-panel-last {
    position: relative;
}

#price-panels{
    position: relative;
    height: auto;
}

/*
#pricelist td{
    padding: 4px 10px 4px 10px;
}
  
#pricelist td:first-child {
    padding-left:0px;
}

#pricelist td:last-child {
    padding-right:0px;
}

#pricelist table{
    display: table;
    border-collapse: separate;
    border-spacing: 0px;
    border-style: none;
}*/

.grid-bg-dark{
    background-color: #f6d6b7;
}

#icon-area-on-top{
    position: absolute;
    top: -275px;
    right: -100px;
}

#icon-area-on-top p{
    font-size: 0.8em;
    font-weight: 400;
}

#icon-text-section{
    position: absolute;
    top: 127px;
    left: 98px;
    text-align: center;
    max-width: 200px;
}

#pricelist-icon{
    width: 400px;
    height: 400px;
}

.grid{
    display: grid;
    grid-template-rows: 1fr;
}

.grid-row{
    display: grid;
    grid-template-columns: 260px 70px 70px;
}

.grid-row > .grid-column:nth-child(1){
    padding-left: 2px;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: break-spaces;
}

.grid-row > .grid-column:nth-child(3){
    padding-right: 0px;
}

.grid-column{
    padding: 4px 10px 4px 10px;
}

/*======================================
	SECTION: MY VISION
======================================*/

#my-vision-key-concepts{
    height: 650px;
}

#my-vision-key-concepts figure img{
    width: 100%;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 40px;
    outline: 2px solid #efe3b8;
    outline-offset: -35px;
}

#my-vision-key-concepts figure p{
    display: block;
    font-size: 1.4em;
    margin:0 auto;
    font-weight: 400;
    padding-top: 10px;
    max-width: 240px;
}

#my-vision-key-concepts figure{
    max-width: 300px;
    color: #5B4620;
    height: 550px;
    padding-left: 10px;
    padding-right: 10px;
}

#my-vision-key-concepts figure h3{
    display: block;
    font-size: 1.5em;
    margin:0 auto;
    font-weight: 400;
    font-style: italic;
    color: #5B4620;
}

#profile-img {
    width: 100%;
    border-radius: 40px;
    outline: 2px solid #efe3b8;
    outline-offset: -28px;
    max-width: 480px;
    max-height: 640px;  
}

.column-image {
    width: 100%;
    height: auto;
    padding: 20px;
    box-sizing: border-box;
    flex: 1 1 auto;
}

#my-vision{
    background-color: #f3dcb1;
    color: #7c593b;
}

#my-vision p{
    display: block;
    font-size: 1.8em;
    margin:0 auto;
    font-weight: 400;
    text-align: left;
}

#my-vision h2::after{
    display:block;
    content: '';
    border-bottom: 2px solid #d4ae8d;  
}

#my-vision .text-area {
    max-width: 600px;
    height: 570px;
    padding: 0px 20px 0px 20px;
    padding: 0px 1.25rem 0px 1.25rem;
    box-sizing: border-box;
    flex: 1 1 auto;
  }

.header-padding{
    padding-bottom: 24px;
    padding-top: 0px;
}

#my-vision-key-concepts{
    background-color: #d2c5a5;
}

/*======================================
	SECTION: MASSAGE
======================================*/

#massage {
    /*background-image: url("images/pexels-elly-fairytale-3865799.jpg");*/
  background-image: url(images/magnolia-hero.jpg);
	/*background-repeat: no-repeat;*/
	background-position: center; 
    /*background-size: 100%;*/
    height: 700px;
    width: 100%;
    margin: auto;
    margin-top: -100px;
    padding-top: 100px;
    object-fit: cover;
    text-align: center;
}
/*
.background-tint {
    background-color: #3a36354d;
    background-blend-mode: multiply;
}*/

#massage h1 {
    padding-bottom: 60px;
}

.blur-surrounding{
  /*filter: blur(10px);*/
 /*background-image: radial-gradient(circle, #5c0067 0%, #00d4ff 100%);*/
box-shadow: 0 0 40px 40px #fff1d6a1;
  background-color: #fff1d6a1;
  padding: 20px;
}

.border-detail{
    border: 2px solid #efe3b8;
    border-radius: 14px;
}

#massage-keywords{
  color: #fff8dd;
  max-width: 600px;
  padding: 30px 60px 30px 60px;
  background-color: #e9837082;
  backdrop-filter: blur(1px);
  border: 2px solid #fff8dd;
  border-radius: 14px;
}

#massage-keywords-icon {
    position: relative;
    top: 15px;
    right: 7px;
    height: 40px;
    width: 40px;
    padding-left: 8px;
    margin-right: -20px;
  }

/*======================================
	BREAKPOINTS
======================================*/

.breakpoint{
    background: rgb(255, 164, 217);
    position: fixed;
    width: 100px;
    height: 100px;
    z-index: 9999;
}

/* Smallest width (320px and above) */
@media only screen and (max-width : 314px) and (min-width : 0px) {
    #icon-area-on-top {top: -92px; right: -45px;}
    header h3{font-size: 1.2em; transition: 0.2s}
}

@media only screen and (max-width : 600px) and (min-width : 314px) {
    #icon-area-on-top {top: -92px; right: -12px}
    header h3{font-size: 1.5em; transition: 0.2s}
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width : 600px) {
    .breakpoint {background: red;}
    #my-vision{height: auto;}
    #my-vision .text-area{height: auto;}
    #my-vision p{display: block; font-size: 1.4em;}
    #my-vision h2{font-size: 3em;}
    #my-vision image{display: block;}
    #massage {height:700px;width: auto;background-size: cover;}
    #massage h1 {font-size: 4em;}
    #massage-keywords {max-width: 50%; transition: 0.2s;}
    #massage-keywords h3 {font-size: 1.4em;}
    #massage-keywords-icon {height: 32px; width: 38px; margin-top: -20px; top: 12px;}
    #pricelist h3{padding: 0px 20px 0px 20px; font-size: 1.4em; max-width: 90%}
    #pricelist h2{font-size: 3em;}
    .price-panel{font-size: 0.8em; margin: 30px 4px 30px 4px;}
    #price-panel-last {margin-top: 50px;}
    #price-panel-last h4 {width: 100px;}
    .grid-row{grid-template-columns: minmax(116px, 210px) 70px;}
    .grid-row > .grid-column:nth-child(1){grid-row-start: 1; grid-row-end: 3;}
    .grid-row > .grid-column:nth-child(2){grid-column-start: 2; grid-column-end: 3;}
    .grid-row > .grid-column:nth-child(3){grid-column-start: 2; grid-column-end: 3;}
    #contact h2{font-size: 3em;}
    nav{width: 80px;}
    .sidebar{width:100%;align-items: center;justify-content: center;}  

    /*
    .grid-column{
        padding: 4px 10px 4px 10px;
    }*/
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width : 767px) and (min-width : 600px) {
	.breakpoint {background: green;}
    #massage-keywords {max-width: 70%; transition: 0.2s;}
    #pricelist h3{max-width: 460px}
}

@media only screen and (max-width : 1088px) and (min-width : 500px){
    #icon-area-on-top {top: -92px; right: -12px}
}

@media only screen and (max-width : 1088px) {
	.centered-area-horizontal{flex-direction: column; transition: 0.2s}
    #my-vision{height: auto; padding-bottom: 32px; transition: 0.2s}
    .header-padding{padding-top: 24px; padding-bottom: 24px; transition: 0.2s;}
    #my-vision-key-concepts{height: auto; padding-bottom: 40px;}
    #my-vision-key-concepts figure{height: auto; display: block;}
    #my-vision-key-concepts figure figcaption{display: block;}
    #pricelist{height: auto; padding: 40px 0px 40px 0px}
    #contact{height: auto;}
    #contact .text-area {height: auto;}
    #pricelist-icon {width: 200px; height: 200px;}
    #icon-text-section {top: 71px; left: 33px; max-width: 185px;}
    #icon-text-section h2{font-size: 2em;}
    #icon-text-section p{font-size: 0.6em; background-color: #fffcf0; padding: 2px;width:132px} 
    #contact table {padding-bottom: 40px; display: block;}
}

@media only screen and (max-width : 1390px) and (min-width :500px) {
    nav{ width: 108px;}
}

@media only screen and (max-width : 1390px) {
	.hide-on-mobile{display: none;}
    .sidebar-button{ display: block; }
}