/**
* Stylesheet for flatMark theme
* 
* @package flatMark
* @subpackage Theme
*/
     
/* FONTS */

@font-face {
    font-family: 'opensans'; /* Light */
    src: url('../fonts/opensans/OpenSans-Light.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Light.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Light Italic*/
    src: url('../fonts/opensans/OpenSans-LightItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-LightItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Normal */
    src: url('../fonts/opensans/OpenSans-Regular.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Regular.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400; /* entspricht font-weight: normal */
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Regular Italic */
    src: url('../fonts/opensans/OpenSans-Italic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Italic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400; /* entspricht font-weight: normal */
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Semi Bold */
    src: url('../fonts/opensans/OpenSans-Semibold.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Semibold.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Semi Bold Italic */
    src: url('../fonts/opensans/OpenSans-SemiboldItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-SemiboldItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Bold */
    src: url('../fonts/opensans/OpenSans-Bold.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Bold.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;  /* entspricht font-weight: bold */
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Bold Italic */
    src: url('../fonts/opensans/OpenSans-BoldItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-BoldItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;  /* entspricht font-weight: bold */
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Extra Bold */
    src: url('../fonts/opensans/OpenSans-ExtraBold.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-ExtraBold.woff') format('woff'),
         url('../fonts/opensans/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Extra Bold Italic */
    src: url('../fonts/opensans/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-ExtraBoldItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}


/* VARIABLES */
:root {  --content-width: 900px;}
:root {  --website-background: #424242;}

:root {  --colorblack: #000000;}
:root {  --colordark: #666666;}
:root {  --colorlight: #FFFFFF;}

:root {  --color-01: #DBA901;} 
:root {  --color-02: #B43104;}
:root {  --color-gray-01: #E6E6E6;}

:root {  --fontsize-s: 12px;}
:root {  --fontsize-m: 16px;} /* Font Size Default */
:root {  --fontsize-l: 24px;} 
:root {  --fontsize-xl: 34px;} 
:root {  --fontsize-xxl: 64px;} 

:root {  --space-below-00: 5px;} 
:root {  --space-below-01: 15px;} 
:root {  --space-below-02: 25px;} 
:root {  --side-space-01: 15px;} 
:root {  --side-space-02: 25px;} 
:root {  --gap-01: 15px;} 
:root {  --animation-01: all 0.4s ease-in-out 0s;} 


* {margin: 0;padding: 0;box-sizing: border-box;}
header, footer, section, article, nav {display: block;}

body {background: var(--website-background);color: var(--colordark);font-family: 'opensans', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;font-size: var(--fontsize-m); line-height: 1.4;}

#wrapper {max-width: var(--content-width);margin: 0 auto;padding: var(--space-below-02) var(--side-space-01);}
header, main {background: var(--colorlight);}

h1 {font-size: var(--fontsize-xxl); font-weight: 800;color: var(--colordark);margin-bottom: var(--space-below-01);}
h2 {font-size: var(--fontsize-xl); font-weight: 800;color: var(--color-01);}
h3 {font-size: var(--fontsize-l); font-weight: 700;}

h2, h3, p, ul, ol, table {margin-bottom: var(--space-below-01);}

a {color: var(--color-02); text-decoration: underline;}
a:hover {text-decoration: none;outline: 0;}
ul {list-style: none;}
img {border: none;max-width: 100%;height: auto;}
strong {font-weight: 700;}
hr {height: 1px;border: none;width: 100%;background: var(--color-01);margin-bottom: var(--space-below-00);}
table {border-collapse: collapse;border-spacing: 0;}

header ul {display: none;} /* prevent output of menu-lists before they are rendered in /theme/js/presets.js */
header {min-height: 148px; /* hotfix: set min-height to prevent jump on first pageload */ display: flex;flex-wrap: wrap; position: relative;padding: var(--space-below-02) var(--side-space-02) var(--space-below-01) var(--side-space-02) ;}

header p {margin-bottom: 0;color: var(--colorblack);width: calc(100% - 74px);}
header p:has(img) {width: auto;}
header p:has(img) img {width: 64px;display: block;margin-right: 10px;}
header > p > a {color: var(--colorblack);display: block;text-decoration: none;font-size: var(--fontsize-xl);line-height: 1.2;font-weight: 500;}

header .extras {position: absolute;top: var(--space-below-02);right: var(--side-space-02);}
header .extras ul {display: block;text-align: right;}
header .extras li a {display: block;color: var(--color-01);font-size: var(--fontsize-s);line-height: 1.6;font-weight: 600;text-decoration: none;text-transform: uppercase;}
header .extras li a:hover {text-decoration: underline;}
header .extras li a.active {color: var(--colorblack);}

header #main-nav {padding-top: var(--space-below-01);width: 100%;}
header #main-nav ul {display: flex;background: var(--color-01);margin-bottom: 0;}
header #main-nav ul a {display: block;font-size: var(--fontsize-m);line-height: 1.6;font-weight: 700;color: var(--colorlight); text-decoration: none;padding: 0 var(--side-space-01);border-bottom: 2px solid var(--color-01);border-top: 2px solid var(--color-01);}
header #main-nav ul a:is(:hover, :focus, .active) {background: var(--colorlight);color: var(--color-01);    outline: 0;} 

/* Menu Subpages*/
@media screen and (min-width: 782px) {
    header #main-nav ul li:has(ul) {position: relative;}
    header #main-nav ul > li > ul {position: absolute; display: block;}
    header #main-nav ul > li > ul > li > a {white-space: nowrap;border: none;display: block; height: 0;overflow: hidden;transition: var(--animation-01);}
    header #main-nav ul li:is(:hover, :focus-within) > ul > li > a {height: 26px;}
}

#toggle-nav {display: none;}

main {padding: 0 var(--side-space-02) var(--space-below-01) var(--side-space-02);margin-bottom: var(--space-below-01);}

main > h1 {background: var(--color-02);color: var(--colorlight);padding: var(--space-below-00) var(--side-space-01);text-align: right;}
main ul {padding-left: var(--side-space-01);list-style: disc;}
main ol {padding-left: var(--side-space-01);}
main table {width: 100%;}
main table tr {border-bottom: 1px solid var(--color-gray-01);}
main table th,
main table td {text-align: left;border: none;min-width: 100px;vertical-align: top;padding: var(--space-below-00) 0;}
main table tr > td:first-child {font-weight: 600;}

main .columns {display: grid;grid-template-rows: auto;gap: var(--gap-01);box-sizing: border-box;}
main .columns p:empty {display: none;}
main .columns,
main .columns.cols-50-50 {grid-template-columns: 1fr 1fr;}
main .columns.cols-33-66 {grid-template-columns: 1fr 2fr;}
main .columns.cols-66-33 {grid-template-columns: 2fr 1fr;}
main .columns.cols-33-33-33 {grid-template-columns: 1fr 1fr 1fr;}

main .background {padding: var(--space-below-01) var(--side-space-01);background:var(--color-gray-01);margin-bottom: var(--space-below-01);}
main .background.bg-color-01 {background:var(--color-01);}
main .background.bg-color-02 {background:var(--color-02);}
main .background:is(.bg-color-01, .bg-color-02) * {color:var(--colorlight);}
main .background:is(.bg-color-01, .bg-color-02) p {font-weight: 600;}

main .img-rounded {aspect-ratio: 1/1;border-radius: 50%;overflow: hidden;}
main .background .img-rounded {border: var(--space-below-01) solid var(--colorlight); margin-top: calc(0px - var(--space-below-02));}
main .img-rounded img {object-fit: cover;width: 100%;height: 100%;display: block;}

main .button a {display: inline-block;background: var(--colordark);color: var(--colorlight);text-decoration:none;padding: var(--space-below-00) var(--side-space-01);font-weight: 700;}
main .button a:hover {opacity: 0.5;}
main .button.bg-color-01 a {background: var(--color-01);}
main .button.bg-color-02 a {background: var(--color-02);}

main code {font-family: courier 'Courier New', Courier, monospace;font-size: var(--fontsize-m);background: var(--color-gray-01);color: var(--colordark);}

main pre:has(code) {word-break: normal;word-wrap: normal;overflow: scroll;background: var(--color-gray-01);padding: var(--space-below-01) var(--space-below-01);border-radius: 10px;margin-bottom: var(--space-below-01);}

main .readme h1,
main .readme em {display: none;}

footer {text-align: center;font-size: var(--fontsize-s);}
footer p {margin-bottom: var(--space-below-00);}
footer * {color: var(--colorlight);}
footer a:is(:hover, :focus) {text-decoration: none;}

@media screen and (max-width: 781px) {

    #wrapper {padding: 0;}

    header .extras {top: 0;}
    header .extras ul {display: flex; gap: 10px;}

    header p {margin-bottom: var(--space-below-01);}
    header #toggle-nav {cursor: pointer;position: relative;display: block;border:none;background: var(--color-01);padding: 4px 0 4px 14px;width: 100%;}
    header #toggle-nav span {background: var(--colorlight);display: block;width: 36px;height: 4px;margin: 6px 0;transition: var(--animation-01);}
    header.menu-active #toggle-nav span {opacity: 0;transform-origin: 4px center;}
    header.menu-active #toggle-nav span:first-child {opacity: 1;transform: rotate(45deg);}
    header.menu-active #toggle-nav span:last-child {opacity: 1;transform: rotate(-45deg);}
    header #main-nav {padding-top: 0;}
    header #main-nav ul {display: block;}
    header #main-nav ul li a {overflow: hidden;height: 0;transition: var(--animation-01);}
    header #main-nav ul a {font-size: var(--fontsize-l);border: none;}
    header #main-nav ul ul a {font-size: var(--fontsize-m); padding-left: var(--side-space-02);}
    header.menu-active #main-nav ul li a {height: 40px;}
    header.menu-active #main-nav ul ul li a {height: 26px;}

    h1 {font-size: var(--fontsize-xl);}

}

@media screen and (max-width: 400px) {
 
    main .columns {display: block;}

}