/*#region [ Variables ] */
:root {
    --layoutContentWidth:                   72rem;
    --layoutContentPadding:                 2rem;
    --layoutNavigationMargin:               20px;
    --layoutNavigationHeight:               5rem;
}

.mainMenu {
	--burgerMenuSpace:                      6px;
	--burgerMenuWeight:                     2px;
	--burgerMenuWidth:                      27px
}
/*#endregion [ Variables ] */

/*#region [ Colours ] */

    /* Global theme */
    :root {
        color-scheme:                       light dark;

        --mainBrightColour:					#ededec;
        --mainDarkColour:				    #171717; 
        --mainAccentColour:					#00aeff;

        --mainBackgroundGradientBright:		linear-gradient(white, white 5vh, transparent 15vh, transparent 65vh, white 90vh, white);
        --mainBackgroundGradientDark:		linear-gradient(#161616, transparent 15vh, transparent 65vh, #161616);

        --themeTransition:                  200ms;
    }

    :root {
        --mainTextColour:				    var(--mainDarkColour);
        --mainBackgroundColour:			    var(--mainBrightColour);
        --mainBackgroundGradient:		    var(--mainBackgroundGradientBright);
        --mainEndColour:                    white;
    }
    /* Browser default themes */
    @media (prefers-color-scheme: dark/* //TODO light */) {
        :root {
            --mainTextColour:				var(--mainDarkColour);
            --mainBackgroundColour:			var(--mainBrightColour);
            --mainBackgroundGradient:		var(--mainBackgroundGradientBright);
            --mainEndColour:                white;
        }
    }
    /*
    @media (prefers-color-scheme: light/* //TODO dark *//*) {
        :root {
            --mainTextColour:				var(--mainBrightColour);
            --mainBackgroundColour:			var(--mainDarkColour);
            --mainBackgroundGradient:		var(--mainBackgroundGradientDark);
            --mainEndColour:                black;
        }
    }
    */
    html, body {
        color:                              var(--mainTextColour);
        background-image:                   var(--mainBackgroundGradient, var(--mainBackgroundColour));
        background-color:                   var(--mainBackgroundColour);
        background-attachment:              fixed;
    }

    @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

    * { transition: color var(--themeTransition), background-color var(--themeTransition), border-color var(--themeTransition), fill var(--themeTransition), stroke var(--themeTransition); }

/*#endregion [ Colours ] #*/

/*#region [ Fonts ] */

    /*#region [ Font files ] */

    @font-face {	font-family: 'Open Sans';		    font-style: normal; font-weight: 300;		src: local('Open Sans Light'),                  local('OpenSans-Light'),		    	url('../fnt/open-sans-v17-latin-300.woff2') format('woff2'),                    url('../fnt/open-sans-v17-latin-300.woff') format('woff'); 	}
    @font-face {	font-family: 'Open Sans';		    font-style: italic; font-weight: 300;		src: local('Open Sans Light Italic'),           local('OpenSans-LightItalic'),			url('../fnt/open-sans-v17-latin-300italic.woff2') format('woff2'),              url('../fnt/open-sans-v17-latin-300italic.woff') format('woff'); 	}

    @font-face {	font-family: 'Open Sans';		    font-style: normal; font-weight: 400;		src: local('Open Sans Regular'),                local('OpenSans-Regular'),			    url('../fnt/open-sans-v17-latin-regular.woff2') format('woff2'),                url('../fnt/open-sans-v17-latin-regular.woff') format('woff'); 	}
    @font-face {	font-family: 'Open Sans';		    font-style: italic; font-weight: 400;		src: local('Open Sans Italic'),                 local('OpenSans-Italic'),			    url('../fnt/open-sans-v17-latin-italic.woff2') format('woff2'),                 url('../fnt/open-sans-v17-latin-italic.woff') format('woff'); 	}

    @font-face {	font-family: 'Open Sans';		    font-style: normal; font-weight: 600;		src: local('Open Sans SemiBold'),               local('OpenSans-SemiBold'),			    url('../fnt/open-sans-v17-latin-600.woff2') format('woff2'),                    url('../fnt/open-sans-v17-latin-600.woff') format('woff'); 	}
    @font-face {	font-family: 'Open Sans';		    font-style: italic; font-weight: 600;		src: local('Open Sans SemiBold Italic'),        local('OpenSans-SemiBoldItalic'),   	url('../fnt/open-sans-v17-latin-600italic.woff2') format('woff2'),              url('../fnt/open-sans-v17-latin-600italic.woff') format('woff'); 	}

    @font-face {	font-family: 'Open Sans';		    font-style: normal; font-weight: 700;		src: local('Open Sans Bold'),                   local('OpenSans-Bold'),			        url('../fnt/open-sans-v17-latin-700.woff2') format('woff2'),                    url('../fnt/open-sans-v17-latin-700.woff') format('woff'); 	}
    @font-face {	font-family: 'Open Sans';		    font-style: italic; font-weight: 700;		src: local('Open Sans Bold Italic'),            local('OpenSans-BoldItalic'),			url('../fnt/open-sans-v17-latin-700italic.woff2') format('woff2'),              url('../fnt/open-sans-v17-latin-700italic.woff') format('woff'); 	}

    @font-face {	font-family: 'Open Sans';		    font-style: normal; font-weight: 800;		src: local('Open Sans ExtraBold'),              local('OpenSans-ExtraBold'),			url('../fnt/open-sans-v17-latin-800.woff2') format('woff2'),                    url('../fnt/open-sans-v17-latin-800.woff') format('woff'); 	}
    @font-face {	font-family: 'Open Sans';		    font-style: italic; font-weight: 800;		src: local('Open Sans ExtraBold Italic'),       local('OpenSans-ExtraBoldItalic'),	    url('../fnt/open-sans-v17-latin-800italic.woff2') format('woff2'),              url('../fnt/open-sans-v17-latin-800italic.woff') format('woff'); 	}

    @font-face {	font-family: 'Open Sans Condensed'; font-style: normal; font-weight: 300;		src: local('Open Sans Condensed Light'),        local('OpenSansCondensed-Light'),	    url('../fnt/open-sans-condensed-v14-latin-300.woff2') format('woff2'),          url('../fnt/open-sans-condensed-v14-latin-300.woff') format('woff'); 	}
    @font-face {	font-family: 'Open Sans Condensed'; font-style: italic; font-weight: 300;		src: local('Open Sans Condensed Light Italic'), local('OpenSansCondensed-LightItalic'), url('../fnt/open-sans-condensed-v14-latin-300italic.woff2') format('woff2'),    url('../fnt/open-sans-condensed-v14-latin-300italic.woff') format('woff'); 	}
    
    @font-face {	font-family: 'Open Sans Condensed'; font-style: normal; font-weight: 700;		src: local('Open Sans Condensed Bold'),         local('OpenSansCondensed-Bold'),	    url('../fnt/open-sans-condensed-v14-latin-700.woff2') format('woff2'),          url('../fnt/open-sans-condensed-v14-latin-700.woff') format('woff'); 	}

    @font-face {	font-family: 'Roboto';				font-style: normal;	font-weight: 100;	    src: local('Roboto Thin'), 						local('Roboto-Thin'),					url('/fnt/roboto-v20-latin-100.woff2') format('woff2'), 					    url('/fnt/roboto-v20-latin-100.woff') format('woff'); }
    @font-face {	font-family: 'Roboto';				font-style: italic;	font-weight: 100;	    src: local('Roboto Thin Italic'), 		        local('Roboto-ThinItalic'),		        url('/fnt/roboto-v20-latin-100italic.woff2') format('woff2'), 			        url('/fnt/roboto-v20-latin-100italic.woff') format('woff'); }

    @font-face {	font-family: 'Roboto';				font-style: normal;	font-weight: 300;	    src: local('Roboto Light'), 					local('Roboto-Light'),				    url('/fnt/roboto-v20-latin-300.woff2') format('woff2'), 					    url('/fnt/roboto-v20-latin-300.woff') format('woff'); }
    @font-face {	font-family: 'Roboto';				font-style: italic;	font-weight: 300;	    src: local('Roboto Light Italic'), 		        local('Roboto-LightItalic'),	        url('/fnt/roboto-v20-latin-300italic.woff2') format('woff2'), 			        url('/fnt/roboto-v20-latin-300italic.woff') format('woff'); }

    @font-face {	font-family: 'Roboto';				font-style: normal;	font-weight: 400;	    src: local('Roboto'), 							local('Roboto-Regular'),			    url('/fnt/roboto-v20-latin-regular.woff2') format('woff2'), 				    url('/fnt/roboto-v20-latin-regular.woff') format('woff'); }
    @font-face {	font-family: 'Roboto';				font-style: italic;	font-weight: 400;	    src: local('Roboto Italic'), 					local('Roboto-Italic'),				    url('/fnt/roboto-v20-latin-italic.woff2') format('woff2'), 				        url('/fnt/roboto-v20-latin-italic.woff') format('woff'); }

    @font-face {	font-family: 'Roboto';				font-style: normal;	font-weight: 500;	    src: local('Roboto Medium'), 					local('Roboto-Medium'),				    url('/fnt/roboto-v20-latin-500.woff2') format('woff2'), 					    url('/fnt/roboto-v20-latin-500.woff') format('woff'); }
    @font-face {	font-family: 'Roboto';				font-style: italic;	font-weight: 500;	    src: local('Roboto Medium Italic'), 	        local('Roboto-MediumItalic'),	        url('/fnt/roboto-v20-latin-500italic.woff2') format('woff2'),			        url('/fnt/roboto-v20-latin-500italic.woff') format('woff'); }

    @font-face {    font-family: 'Roboto';				font-style: normal;	font-weight: 700;	    src: local('Roboto Bold'), 						local('Roboto-Bold'),					url('/fnt/roboto-v20-latin-700.woff2') format('woff2'), 					    url('/fnt/roboto-v20-latin-700.woff') format('woff'); }
    @font-face {	font-family: 'Roboto';				font-style: italic;	font-weight: 700;	    src: local('Roboto Bold Italic'), 		        local('Roboto-BoldItalic'),		        url('/fnt/roboto-v20-latin-700italic.woff2') format('woff2'), 			        url('/fnt/roboto-v20-latin-700italic.woff') format('woff'); }

    @font-face {	font-family: 'Roboto';				font-style: normal;	font-weight: 900;	    src: local('Roboto Black'), 					local('Roboto-Black'),				    url('/fnt/roboto-v20-latin-900.woff2') format('woff2'), 					    url('/fnt/roboto-v20-latin-900.woff') format('woff'); }
    @font-face {	font-family: 'Roboto';				font-style: italic;	font-weight: 900;	    src: local('Roboto Black Italic'), 		        local('Roboto-BlackItalic'),			url('/fnt/roboto-v20-latin-900italic.woff2') format('woff2'), 			        url('/fnt/roboto-v20-latin-900italic.woff') format('woff'); }

    @font-face {	font-family: 'Roboto Condensed';	font-style: normal;	font-weight: 300;	    src: local('Roboto Condensed Light'),   		local('RobotoCondensed-Light'),			url('/fnt/roboto-condensed-v19-latin-300.woff2') format('woff2'), 		        url('/fnt/roboto-condensed-v19-latin-300.woff') format('woff'); }
    @font-face {	font-family: 'Roboto Condensed';	font-style: italic;	font-weight: 300;	    src: local('Roboto Condensed Light Italic'), 	local('RobotoCondensed-LightItalic'),	url('/fnt/roboto-condensed-v19-latin-300italic.woff2') format('woff2'), 	    url('/fnt/roboto-condensed-v19-latin-300italic.woff') format('woff'); }

    @font-face {	font-family: 'Roboto Condensed';	font-style: normal;	font-weight: 400;	    src: local('Roboto Condensed'), 				local('RobotoCondensed-Regular'),		url('/fnt/roboto-condensed-v19-latin-regular.woff2') format('woff2'), 	        url('/fnt/roboto-condensed-v19-latin-regular.woff') format('woff'); }
    @font-face {	font-family: 'Roboto Condensed';	font-style: italic;	font-weight: 400;	    src: local('Roboto Condensed Italic'), 			local('RobotoCondensed-Italic'),		url('/fnt/roboto-condensed-v19-latin-italic.woff2') format('woff2'), 		    url('/fnt/roboto-condensed-v19-latin-italic.woff') format('woff'); }

    @font-face {	font-family: 'Roboto Condensed';	font-style: normal;	font-weight: 700;	    src: local('Roboto Condensed Bold'), 			local('RobotoCondensed-Bold'),			url('/fnt/roboto-condensed-v19-latin-700.woff2') format('woff2'), 		        url('/fnt/roboto-condensed-v19-latin-700.woff') format('woff'); }
    @font-face {	font-family: 'Roboto Condensed';	font-style: italic;	font-weight: 700;	    src: local('Roboto Condensed Bold Italic'), 	local('RobotoCondensed-BoldItalic'),    url('/fnt/roboto-condensed-v19-latin-700italic.woff2') format('woff2'),         url('/fnt/roboto-condensed-v19-latin-700italic.woff') format('woff'); }

    @font-face {    font-family: 'Bebas Neue';          font-style: normal; font-weight: normal;    src: local('☺'),                                                                        url('/fnt/BebasNeue.woff') format('woff'); }

    /*#endregion [ Font files ] */

    /*#region [ Font assignements ] */

    body {  	
      font-family: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
    }

/*
    .pageHeadline {
        font-family: 'Open Sans', Calibri, 'Trebuchet MS', Arial, sans-serif;
    }
*/

    /*#endregion [ Font assignements ] */

    /*#region [ Font styling ] */

    /* //TODO check the new values */
    body {
        h1, h3 
        {
            font-weight: 100;
        }
        h2 {
            font-size: 26pt;
            font-weight: 400;
            text-align: center;
        }
        font-weight: 300;
    }
    main {
        font-size: 15pt;
        line-height: 150%;
    }
    .pageNavItemActive {
        font-weight: 600;
    }
    .pageHeadline {
        h1 {
            font-size:      clamp(21pt, 7cqi, 45pt); 
            font-weight:    400;
            line-height:    1;
        }
        h2 {
            font-size:      clamp(16pt, 6cqi, 18pt);
            font-weight:    300;
            line-height:    1.5;
        }
        p {
            font-size:      clamp(12pt, 5cqi, 18pt);
            font-weight:    400;
        }
        text-align:         center;
    }
    .mainButton {
        text-decoration: none;
        
        font-size: 0.9rem;
        letter-spacing: 0.02em;
    }
    .pictograms {
        font-size: 12pt;
        text-align: center;
    }

    /* //TODO check the new values */
    footer, footer h3 {
        font-size:          10.5pt;
        line-height:        16pt;
    }

    /*#endregion [ Font styling ] */

/*#endregion [ Fonts ] */



/* Main structure */
html {
	height: 100%;
    scroll-padding-top: calc(var(--layoutNavigationHeight) + 1.5rem);
}
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
body {
    min-height: 100dvh;
}
main {
    flex: 1 0 auto;
}
header,
footer {
    flex: 0 1 auto;
}



/* Properties overrides */
a {
    text-decoration: none;
    color: inherit;
}

nav, footer {
    ul {
        list-style: none; 
        margin: 0;
        padding-left: 0;
        padding-inline-start: 0;
    }

    li {
        margin: 0;
        padding: 0;
        text-indent: 0;
    }
}



/* Global properties */
body,
html {
    margin: 0;
}

.pageHeadline {
    h1, h2, h3, p {
        margin: 0;
    }
    margin: 4rem;
    gap: 50px;
}

main h2::after {
    content: '';
    
    display: block;
    position: relative;

    height: 2px;
    top: 1rem;
    width: 4rem;
    left: 50%;
    transform: translateX(-50%);
    
    background-color: var(--mainAccentColour);
}



/* Global classes */
.flexColumn {
    display: flex;
    flex-direction: column;
}
.flexRow {
    display: flex;
    flex-direction: row;
}
.flexWrap {
    flex-wrap: wrap;
}
.flexCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flexEqual {
    gap: 20px;
}
.flexEqual > * {
    flex: 1 1 0;
    min-width: 0;
}
.heroImage img {
    width: 80%;
    border-radius: 12px;
}
.coverImage img {
    object-fit: cover;
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
}

.pageContent {
    gap: 4rem;
}

.layoutBoxed {
    box-sizing: border-box;
    max-width: min(var(--layoutContentWidth), calc(100% - 2 * (var(--layoutContentPadding))));
    margin: 0 auto;
}
.layoutSpacer {
    height: 2em;
}






/* Main elements layout */
.mainNav {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    padding: var(--layoutNavigationMargin) 0;

    z-index: 10;

    background-color: color-mix(in srgb, var(--mainEndColour) 50%, transparent); 
    backdrop-filter: blur(12px);
}
.mainNavContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    width: var(--layoutContentWidth);
    margin: 0 auto;
    padding: 0 var(--layoutNavigationMargin)
}
.mainNavContent ul {
    gap: 1rem;
}

#logo {
    position: relative;
    top: 2px;
    width: 210px;
}

/* #region Mobile Menu */

    /* Functionality */
    .mainMenu.burgerMenu .mainMenuButton {
        display: none;
    }
    .mainMenu.burgerMenu .mainMenuIcon { /* Clickable area */
        cursor: pointer;
        float: right;
        padding: calc(var(--burgerMenuSpace)*1.5) 0;
        user-select: none;
    }

    /*#region [ Main Menu Mobile Icon Design ] */
    /* Open */
    .mainMenu.burgerMenu .mainMenuIcon .mainMenuIconGfx {
        display: block;
        position: relative;
        width: var(--burgerMenuWidth);
        height: var(--burgerMenuWeight);
        background: var(--mainTextColour);
        transition: background .2s ease-out;
    }

    .mainMenu.burgerMenu .mainMenuIcon .mainMenuIconGfx:before,
    .mainMenu.burgerMenu .mainMenuIcon .mainMenuIconGfx:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--mainTextColour);
        transition: all .2s ease-out;
    }
    .mainMenu.burgerMenu .mainMenuIcon .mainMenuIconGfx:before {
        top: var(--burgerMenuSpace);
    }
    .mainMenu.burgerMenu .mainMenuIcon .mainMenuIconGfx:after {
        top: calc(var(--burgerMenuSpace) * -1);
    }

    /* Close */
    .mainMenu.burgerMenu .mainMenuButton:checked ~ .mainMenuIcon .mainMenuIconGfx {
        background: transparent;
    }
    .mainMenu.burgerMenu .mainMenuButton:checked ~ .mainMenuIcon .mainMenuIconGfx:before {
        transform: rotate(-45deg);
    }
    .mainMenu.burgerMenu .mainMenuButton:checked ~ .mainMenuIcon .mainMenuIconGfx:after {
        transform: rotate(45deg);
    }
    .mainMenu.burgerMenu .mainMenuButton:checked ~ .mainMenuIcon:not(.steps) .mainMenuIconGfx:before,
    .mainMenu.burgerMenu .mainMenuButton:checked ~ .mainMenuIcon:not(.steps) .mainMenuIconGfx:after {
        top: 0;
    }
    /*#endregion*/

    /*#region [ Mobile menu layout ] */
    /* Menu Mobile Items Layout */
    .mainMenu.burgerMenu .mainMenuItemsMobile {
        display: none;
    }
    .mainMenu.burgerMenu .mainMenuButton:checked ~ .mainMenuItems .mainMenuItemsMobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        position: absolute;

        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;

        z-index: -99;
    }
    @media only screen and (min-width: 768px) {
        .mainMenu.burgerMenu .mainMenuButton:checked ~ .mainMenuItems .mainMenuItemsMobile {
            display: none;
        }
    }

    /* Menu Mobile Background */
    .mainMenu.burgerMenu .mainMenuBackground {
        display: none;
    }
    .mainMenu.burgerMenu .mainMenuButton:checked ~ .mainMenuBackground {
        display: block;

        position: fixed;

        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;

        z-index: -100;
        
        background: var(--mobileMenuBackgroundColor, var(--mainBackgroundColour));

        opacity: 0.95;
    }
    @media only screen and (min-width: 768px) {
        .mainMenu.burgerMenu .mainMenuButton:checked ~ .mainMenuBackground {
            display: none;
        }
    } 
    /*#endregion [ Mobile menu layout ] */

    .mainMenuBurgerMenuBlockBody {
        overflow: hidden;
    }

/* #endregion Mobile Menu */



/* Main elements styling */
@media only screen and (max-width: 767px) {
	.___desktopOnly {
		display: none;
	}
}
@media only screen and (min-width: 768px) {
	.___mobileOnly {
		display: none;
	}
}

/* Present to assistive technology, invisible on screen - for headings and labels
   the layout does not show but the document outline needs */
.___visuallyHidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}



::selection {
	color:                                  var(--mainBackgroundColour);
	background:                             var(--mainAccentColour); 
}



.pageNavItemActive {
    position: relative;
}

.pageNavItemActive::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: calc(-8px - var(--layoutNavigationMargin));
  width: 100%;
  height: 2px;
  
  background-color: var(--mainAccentColour);
  transition: width 0.3s ease;
}