/**
* CSS File for Coder application
* 
* @version 0.0.2
* 
* @since 0.0.2 2024-12-27 added sleep/active attributes
* @since 0.0.1 2024-03-07 cleaned copy from tatchi css
* 
* @author Hans Druyts <hans.druyts@custom8.be>
*/

/*@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500&family=Roboto:wght@300;400;500&display=swap');

:root{ 
    /* variables used in different elements */

    --view-h-min: 1024;  /* min height */
    --view-h-max: 3840; /* max height */

    --font-min: 14;     /* font size at min height (28)*/
    --font-max: 36;     /* font size at max height (72) */
    
    --font-size: calc( var(--font-min)*1px + (var(--font-max) - var(--font-min)) * ((100vh - var(--view-h-min)*1px) / (var(--view-h-max) - var(--view-h-min))) );

    --height-header: 6vh;                                                         /* header is 8% of total viewport height */
    --height-footer: 5vh;                                                         /* footer is 6% of total viewport height */

    /*--margin-logo: 10vw;*/
    --margin-logo: 0.25rem;
    --height-logo: calc(var(--height-header) - 2*var(--margin-logo));
    --width-logo: calc(var(--height-logo) * 205/50);                               /* LOGO_custom8: 665x589 // svg: 205x50*/

    /*--margin-settings: 3vw;*/
    --margin-settings: 0.4rem;
    /*--height-settings: calc(var(--height-footer) - var(--margin-settings));*/
    --height-settings: calc(var(--height-footer) - var(--margin-settings));

    --height-main: calc(100vh - (var(--height-header) + var(--height-footer)));   /* calculated portion main (viewport - header & footer) */
    --height-main-xl: calc((100vh - var(--height-header)));                       /* calculated portion main (no footer) */

    /* COLORS */
    --color-custom8-orange: rgb(223, 103, 6);
    --color-deep-orange: rgb(196, 82, 6);
    --color-dark-grey: rgb(65, 63, 63);
    --color-light-grey: rgb(230, 229, 229);
	--color-light-ivory: rgb(255,255,250);
	--color-dark-blue: #0c0230;

}

/* GENERAL PAGE SETTINGS */
html, body {

	height: 100%;

	font-size: var(--font-size);
    /* color: var(--color-dark-grey); */

    background-color: var(--color-dark-blue);
	color: #795548; 

    font-family: 'Roboto Slab', serif;
    /*font-family: 'Roboto', serif;*/
    font-weight: 400;

}

body.sleep {
    background-color: var(--color-dark-blue);
}

body.active {
    background-color: var(--color-light-ivory);
}

header {
	background: var(--color-dark-blue); 			
}

main.active {
    background: var(--color-light-ivory);
}

main.sleep {
    background: var(--color-dark-blue);
}

footer {
	/* background: #c0c4c6;*/ 			/* grey */
	background-color: var(--color-light-ivory);
}

/* SPECIFIC FONT WEIGHTS & SIZES */
h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 3rem;
}
h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 2rem;
}
h3 {
    font-weight: 400;
    font-size: 1.5rem;
}
h3.center {
    text-align: center;
}
p.settings{
    font-weight: 300;
    font-size: 0.8rem;
}

.modal-footer {
    color: var(--color-morning-grey);
}

/* GENERAL SETTINGS - BUTTONS */

.btn-primary {

    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--color-custom8-orange);
    --bs-btn-hover-bg: var(--color-deep-orange);
    font-weight: 500;
    padding: 0.5rem 1.5rem;

}

.btn-secondary {

    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--color-night-blue);
    --bs-btn-hover-bg: var(--color-morning-grey);
}

button.logo {

    height: -webkit-calc(var(--height-logo));
    height: -moz-calc(var(--height-logo));
    height: var(--height-logo);
    width: var(--width-logo);

    outline: none; 
    border: 0;

    background-image: url('../img/btn/logo_sleepcoder.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: block;
    margin-left: auto;
    margin-right: var(--margin-logo);

}
button.settings{
    
    height: -webkit-calc(var(--height-settings));
    height: -moz-calc(var(--height-settings));
    height: var(--height-settings);
    width: var(--height-settings);

    outline: none; 
    border: 0;

    background-image: url('../img/btn/settings_orange.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;

    display: block;
    margin-left: auto;
    margin-right: var(--margin-settings);

}

button.exit{

	display: block;

	/*padding-top: 1rem;*/

	margin-left: auto;
	margin-right: var(--margin-settings);

}

.button.config {
    /*display: block;
    margin-right: auto;*/
    margin-left: var(--margin-settings);
    /*display: none;*/
    height: calc(var(--height-footer)*0.8);
    object-fit: contain;
}

.button.next {
    /*display: block;*/
    /*margin-left: auto;*/
    margin-right: var(--margin-settings);
    display: none;
}

/*
button.start {
    display: none;
}

.tooltip {
    display: none;
}
*/


/* PAGE SETUP - GENERAL DIVISIONS */

/* header (with LOGO) */
#header {
    height: -webkit-calc(var(--height-header));
    height: -moz-calc(var(--height-header));
    height: var(--height-header);
    padding-top: calc(var(--margin-logo)/2);
}

/* main part, BETWEEN header and footer */
#main {
    height: -webkit-calc(var(--height-main));
    height: -moz-calc(var(--height-main));
    height: var(--height-main);
    /*width: 100%;*/
    
    margin-right: var(--margin-logo);
    margin-left: var(--margin-logo);
}

/* main part extended : BELOW header BUT NO FOOTER */
#main.no-footer {
    height: -webkit-calc(var(--height-main-xl));
    height: -moz-calc(var(--height-main-xl));
    height: var(--height-main-xl);  
}

/* footer (with settings wheel) */
#footer {
    height: -webkit-calc(var(--height-footer));
    height: -moz-calc(var(--height-footer));
    height: var(--height-footer);
}

/* PAGE SETUP - SUBPARTS  */

.wrapper {
    position: relative;

}

/* Status window */
#status {
    justify-content: space-between;
    display: flex;
    /*margin-top: 1.5rem;*/
    /*margin-bottom: 1rem;*/
}
.wrapper.status {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}
.subtitle {
    position: absolute;
    left: 0;
    bottom: -0.75rem;
}

.content {
    /*margin-top: 0.5rem;
    margin-bottom: 0.5rem;*/
    padding-top: 0.4rem;

}


/* Animations (measuring, timer, taper...) */
.anim {
    position: relative;
}
.anim img {
    position: absolute;
    z-index: 1; 
    visibility: hidden;
    left: 50%;
    transform: translate(-50%);
    max-height: 100%;
}
.anim img.active { 
    z-index: 3; 
    visibility: visible;
}

/* GRAPH */
.graph {
    height: 56vh;
	width: 100%; /*8vh;*/
}


/* Action division (start measurement button) */
.action{
    margin-top: 1.5rem;
    text-align: center;
}

/* Result Page */
.result {
    position: relative;
    height: 48vh;
}

.demo{
    font-size:1rem;
    position: fixed;
    top: 5px;
    left: 60px;
}

.timing{
    font-size:1rem;
    position: fixed;
    top: 5px;
    left: 10px;
}

.debug{
    font-size:1rem;
    position: fixed;
    top: 25px;
    left: 10px;
    display: none;
}