/**
 * Theme Name:      A&F-Main Classic Theme
 * Description:     Default Theme for the A&F-Group
 * Version:         0.1.2
 * Author:          Fabian Kaplan
 * Author URI:      https://af-kaplan.com
**/


/*
 *  Basic
 */

:root {
    --cl_m_black: #1d1d1b;
    --cl_m_white: #ffffff;
    
    --cl_m_gray: #323745;
    --cl_m_gray75: #5a5a67;
    --cl_m_gray50: #898792;
    --cl_m_gray30: #b5b3ba;
    --cl_m_gray10: #e5e4e7;

    --cl_d_bluedrk: #065b66;
    --cl_d_blue: #0892a5;
    --cl_d_blue75: #6cabba;
    --cl_d_blue50: #a4c6d1;
    --cl_d_blue30: #cbdce3;

    --cl_d_greendrk: #427346;
    --cl_d_green: #6ab970;
    --cl_d_green75: #98cb95;
    --cl_d_green50: #bfddba;
    --cl_d_green30: #daebd7;

    --cl_d_yellowdrk: #997c56;
    --cl_d_yellow: #edbf85;
    --cl_d_yellow75: #f2cfa4;
    --cl_d_yellow50: #f7dfc3;
    --cl_d_yellow30: #faecdb;

    --cl_d_reddrk: #8d3938;
    --cl_d_red: #ec5f5d;
    --cl_d_red75: #f18d82;
    --cl_d_red50: #f7b6ab;
    --cl_d_red30: #fbd5cd;

    --cl_d_liladrk: #563973;
    --cl_d_lila: #856ca7;
    --cl_d_lila75: #a28fbe;
    --cl_d_lila50: #c0b4d5;
    --cl_d_lila30: #d9d2e7;

    --cl_maindrk: var(--cl_m_gray);
    --cl_main: var(--cl_m_gray75);
    --cl_mainlgt3: var(--cl_m_gray50);
    --cl_mainlgt2: var(--cl_m_gray30);
    --cl_mainlgt: var(--cl_m_gray10);
}

* {
    font-family: "Titillium Web", sans-serif;
    font-weight: 400;
    color: var(--cl_m_black);
    padding: 0;
    margin: 0;

    border: 0px red solid;

}

html {
    font-size: 110%;
}

body {
    background-color: var(--cl_m_gray10);
}




/*
 *  Basic Text Layout
 */

h1 {
    color: inherit;
    font-weight: 600;
    font-size: 3.6rem;
}

h2 {
    color: inherit;
    font-weight: 600;
    font-size: 2.2rem;
}

h3 {
    color: inherit;
    font-weight: 600;
    font-size: 1.9rem;
}

h4 {
    color: inherit;
    font-weight: 600;
    font-size: 1.6rem;
}

p {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

b {
    color: inherit;
    font-weight: 700;
}

img {
	max-width: 100%;
}

.material-symbols-outlined {
    font-size: inherit;
    color: inherit;
}





/*
 *  Full Header Configuration
 */

#af-header {
    height: 5rem;
    padding: 0.5rem;
    font-size: 1.6rem;

    position: sticky;
    top: 0;
    
    background-color: var(--cl_main);
    color: var(--cl_mainlgt);
}

/* Left Menu with Site links */

#page_menu {
	display: flex;
	flex-wrap: wrap;
	padding-top: 1.4rem;
	z-index: 9000;
}

#page_menu a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

#page_menu a::before {
    content: "/ ";
}

#page_menu .menu-item {
	display: flex;
	margin-right: 1em;
	position: relative;
	list-style-type: none;
}

#page_menu .menu-item-has-children {
	padding-bottom: 1rem;
}

#page_menu .menu-item a {
    color: var(--cl_mainlgt);
}

#page_menu .menu-item a:hover {
    color: var(--cl_m_white);
}

#page_menu .menu-item .sub-menu {
	position: absolute;
	top: 3rem;
	left: -0.6em;
	min-width: 14em;
	padding: 0.8em;
	border-radius: 0.4em;
	font-size: 1.1rem;
	background-color: var(--cl_mainlgt);
	visibility: hidden;
}

#page_menu .menu-item-has-children:hover .sub-menu {
	visibility: visible;
}

#page_menu .menu-item .sub-menu .menu-item {
	list-style-type: none;
}

#page_menu .menu-item .sub-menu .menu-item a {
	color: var(--cl_m_black);
	font-weight: 400;
}

#page_menu .menu-item .sub-menu .menu-item a:hover {
    color: var(--cl_maindrk);
	font-weight: 600;
}

/* Right Menu with Icons */

#menu_buttons {
    height: 100%;
    float: right;
	list-style-type: none;
}

/* Logo on left Side */

#af-header .custom-logo {
    float: left;
    margin: 0.5rem 2rem;
    height: 4rem;
}

.logo {
    float: left;
    margin: 0.5rem 2rem;
}

#af-header img{
    height: 4rem;
}






















button {
    margin: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    font-size: inherit;

    float: left;
    text-align: left;

    background-color: var(--cl_maindrk);
    color: var(--cl_mainlgt);
}

.btn_icon {
    height: 4rem;
    width: 4rem;
    margin: 0.5rem;
    border-radius: 0.6rem;
    font-size: 3.2rem;

    float: left;
    text-align: center;

    background-color: var(--cl_maindrk);
    color: var(--cl_mainlgt);
}

.btn_icon:hover {
    background-color: var(--cl_mainlgt);
    color: var(--cl_maindrk);
}

.btn_text {
    margin: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;

    float: left;
    text-align: left;

    background-color: var(--cl_maindrk);
    color: var(--cl_mainlgt);
}

.btn_text:hover {
    background-color: var(--cl_mainlgt);
    color: var(--cl_maindrk);
}

.dc_gray {
    background-color: var(--cl_m_gray);
    color: var(--cl_m_gray10);
}

.dc_gray:hover {
    background-color: var(--cl_m_gray);
    color: var(--cl_m_gray10);
}

.dc_blue {
    background-color: var(--cl_d_bluedrk);
    color: var(--cl_d_blue30);
}

.dc_blue:hover {
    background-color: var(--cl_d_blue30);
    color: var(--cl_d_bluedrk);
}

.dc_green {
    background-color: var(--cl_d_greendrk);
    color: var(--cl_d_green30);
}

.dc_green:hover {
    background-color: var(--cl_d_green30);
    color: var(--cl_d_greendrk);
}

.dc_yellow {
    background-color: var(--cl_d_yellowdrk);
    color: var(--cl_d_yellow30);
}

.dc_yellow:hover {
    background-color: var(--cl_d_yellow30);
    color: var(--cl_d_yellowdrk);
}

.dc_red {
    background-color: var(--cl_d_reddrk);
    color: var(--cl_d_red30);
}

.dc_red:hover {
    background-color: var(--cl_d_red30);
    color: var(--cl_d_reddrk);
}

.dc_lila {
    background-color: var(--cl_d_liladrk);
    color: var(--cl_d_lila30);
}

.dc_lila:hover {
    background-color: var(--cl_d_lila30);
    color: var(--cl_d_liladrk);
}


/*
 *  Footer
 */

#af-footer {
    padding: auto 0;
    text-align: center;
    font-size: 1rem;
    height: 2rem;
    
    position: sticky;
    bottom: 0;
    
    background-color: var(--cl_main);
    color: var(--cl_mainlgt);
}

#af-footer a {
    margin: 0rem 0.5rem;
    color: var(--cl_mainlgt);
}

/*
 *  Content
 */

#af-content {
    width: 60%;
    min-height: calc(100vh - 6rem - 2rem - 2rem);
    margin: 0 auto;
    padding: 1rem;
    
    background-color: var(--cl_m_white);
}

#af-login {
    width: 30%;
    min-height: calc(100vh - 6rem - 2rem);
    margin: 0 auto;
    padding: 1rem;
    
    background-color: var(--cl_m_white);
}

#af-login input.btn_text {
    width: 15rem;
    font-size: 1rem;
}