@import url("reset-XA8WCXp.css");

:root {
    --color-primary: #0a2ea3;
    --color-primary-teint: #2c5af2;
    --color-primary-shade: #072073;

    --color-secondary: #FA8518;
    --color-secondary-teint: #fcab5f;
    --color-secondary-shade: #dc6d04;

    --color-medium: #8a8b91;

    --color-light: #f3efef;
    --color-light-trans: #f3efefa0;

    --color-dark: #1a1919;
    --color-dark-trans: #1a1919a0;

    --border-radius: 0.75rem;
    --border-size: 2px;

    --padding-default: 0.75rem;
    --padding-large: 1.5rem;

    --margin-s: 0.25rem;
    --margin-m: 0.5rem;
    --margin-l: 0.75rem;
    --margin-xl: 1rem;

    --font-size-xl: 1.6rem;
    --font-size-l: 1.4rem;
    --font-size-m: 1.2rem;
    --font-size-s: 0.8rem;

    --col-width-1: calc((1/12) * 100%);
    --col-width-2: calc((2/12) * 100%);
    --col-width-3: calc((3/12) * 100%);
    --col-width-4: calc((4/12) * 100%);
    --col-width-5: calc((5/12) * 100%);
    --col-width-6: calc((6/12) * 100%);
    --col-width-7: calc((7/12) * 100%);
    --col-width-8: calc((8/12) * 100%);
    --col-width-9: calc((9/12) * 100%);
    --col-width-10: calc((10/12) * 100%);
    --col-width-11: calc((11/12) * 100%);
    --col-width-12: calc((12/12) * 100%);

    --breakpoint-xl: 1200px;
    --breakpoint-lg: 992px;
    --breakpoint-md: 768px;
    --breakpoint-sm: 576px;
}

html,
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-primary-shade);
    height: 100%;
}

body {
    background-image: url(/images/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--padding-default);
}

header,
nav,
footer,
main {
    box-sizing: border-box;
    max-width: 1200px;
    width: calc(100vw - 2rem);
}

header {
    height: 128px;

    border-radius: 0 0 var(--border-radius) var(--border-radius);
    background-color: var(--color-light-trans);
    backdrop-filter: blur(5px);

    display: flex;
    align-items: flex-end;
}

header>#logo {
    margin: var(--margin-m) var(--margin-xl) var(--margin-m) var(--margin-m);
    padding-bottom: var(--margin-m);
    cursor: pointer;
    background-image: -webkit-linear-gradient(var(--color-primary), var(--color-primary));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

header>#logo:hover {
    background-image: -webkit-linear-gradient(var(--color-secondary), var(--color-primary));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

header>#title {
    margin: var(--margin-m) var(--margin-m) var(--margin-m) var(--margin-xl);
    padding-bottom: var(--margin-m);
    flex-grow: 1;
    text-align: right;
    font-size: var(--font-size-m);
}

header>div#logo>span {
    display: block;
    text-align: right;
    font-weight: bold;
    font-size: 2rem;
    line-height: 2.1rem;
}

nav {
    height: 48px;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 64px;

    background-color: var(--color-light-trans);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    padding: var(--padding-default);
    backdrop-filter: blur(5px);
}

ul#menu-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--padding-default);
}

main {
    flex-grow: 1;
}

/** DEFAULT STYLES */
div.no-display {
    display: none;
}

h1 {
    font-size: var(--font-size-xl);
    line-height: var(--font-size-xl);
    margin: var(--margin-s) 0 var(--margin-l) 0;
}

h2 {
    font-size: var(--font-size-l);
    line-height: var(--font-size-l);
    margin: var(--margin-s) 0 var(--margin-m) 0;
}

h3 {
    font-size: var(--font-size-m);
    line-height: var(--font-size-m);
    margin: var(--margin-s) 0 var(--margin-s) 0;
}

h4 {
    font-weight: bold;
    margin: var(--margin-s) 0 var(--margin-s) 0;
}

p {
    margin: var(--margin-s) 0 var(--margin-s) 0;
}

small {
    font-size: var(--font-size-s);
}

b,
strong {
    font-weight: bold;
}

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

.text-nowrap {
    white-space: nowrap;
}

.font-bold {
    font-weight: bold;
}

p.warning,
p.alert {
    text-align: center;
    padding: var(--padding-default);
    border-radius: var(--border-radius);
}

p.warning {
    color: var(--color-light);
    background-color: var(--color-primary);
    background-image: linear-gradient(170deg, var(--color-primary-teint), var(--color-primary-shade));
}

p.alert {
    color: var(--color-dark);
    background-color: var(--color-secondary);
    background-image: linear-gradient(170deg, var(--color-secondary-teint), var(--color-secondary-shade));
}

a {
    color: var(--color-primary-teint);
    text-decoration: none;
    transition: color 250ms;
}
a:hover, 
a:active {
    color: var(--color-secondary);
}

form label {
    display: block;
    text-transform: uppercase;
    font-size: var(--font-size-s);
    color: var(--color-medium);
    margin-top: var(--margin-m);
}

form button[type="submit"],
form input[type="submit"] {
    background-color: var(--color-primary);
    background-image: linear-gradient(170deg, var(--color-primary-teint), var(--color-primary-shade));
    border: var(--border-size) solid var(--color-medium);
    border-radius: var(--border-radius);
    padding: calc(var(--padding-default) * 0.5);
    box-sizing: border-box;
    width: 100%;
    color: var(--color-light);
}

form button[type="submit"]:hover,
form input[type="submit"]:hover {
    background-color: var(--color-primary);
    background-image: linear-gradient(170deg, var(--color-secondary-teint), var(--color-secondary-shade));
}

form input[type="text"],
form input[type="email"],
form input[type="password"] {
    border: var(--border-size) solid var(--color-medium);
    border-radius: var(--border-radius);
    padding: calc(var(--padding-default) * 0.5);
    box-sizing: border-box;
    width: 100%;
    color: var(--color-dark);
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="text"]:hover,
form input[type="email"]:hover,
form input[type="password"]:hover {
    border: var(--border-size) solid var(--color-primary-teint);
}

/** HOMEPAGE LAYOUT */
main#homepage {
    display: flex;
    gap: var(--padding-default);
}

main#homepage main#homepage>section,
main#homepage>section>div {
    /*    box-sizing: border-box;*/
}

main#homepage>section.information {
    width: var(--col-width-4);
    min-width: 370px;
}

main#homepage>section.price-list {
    width: var(--col-width-8);

    display: flex;
    gap: var(--padding-default);
}

main#homepage>section.price-list>div.price-list-start {
    width: var(--col-width-6);
}

main#homepage>section.price-list>div.price-list-end {
    width: var(--col-width-6);
}

main#homepage section.information,
main#homepage div.price-list-start,
main#homepage div.price-list-end {
    position: relative;
    box-sizing: border-box;
    padding: var(--padding-default);

    border-radius: var(--border-radius);
    background-color: var(--color-light-trans);
    backdrop-filter: blur(5px);
}

@media only screen and (max-width: 992px) {
    main#homepage>section.price-list {
        flex-direction: column;
        gap: 0;

        border-radius: var(--border-radius);
        background-color: var(--color-light-trans);
        backdrop-filter: blur(5px);
    }

    main#homepage>section.price-list>div.price-list-start,
    main#homepage>section.price-list>div.price-list-end {
        width: var(--col-width-12);

        border-radius: initial;
        background-color: initial;
        backdrop-filter: initial;
    }

    main#homepage>section.price-list>div.price-list-end {
        flex-grow: 1;
        padding-top: 0;
    }
}

@media only screen and (max-width: 768px) {
    main#homepage {
        flex-direction: column;
    }

    main#homepage>section.information,
    main#homepage>section.price-list,
    main#homepage>section.price-list>div.price-list-start,
    main#homepage>section.price-list>div.price-list-end {
        width: var(--col-width-12);
    }
}

/** DEFAULT PAGE LAYOUT */
main#page > section {
    position: relative;
    box-sizing: border-box;
    padding: var(--padding-default) var(--padding-large);

    border-radius: var(--border-radius);
    background-color: var(--color-light-trans);
    backdrop-filter: blur(5px);

    min-height: 100%;
}

/** LOGIN PAGE */
main#loginpage {
    display: flex;
    justify-content: center;
    align-items: center;
}

main#loginpage>form {
    position: relative;
    box-sizing: border-box;
    padding: calc(var(--padding-default) * 2);

    border-radius: var(--border-radius);
    background-color: var(--color-light-trans);
    backdrop-filter: blur(5px);
}

/** HCARD */
.h-card>.p-name,
.h-card>.p-street-address,
.h-card>.p-tel,
.h-card>.p-mail {
    display: block;
}

.h-card>.p-name {
    font-weight: bold;
    margin-bottom: var(--margin-m);
}

.h-card>.p-tel {
    margin: var(--margin-m) 0;
}

.h-card>.p-mail {
    margin-bottom: var(--margin-m);
}

/** REMINDER */
div.reminder {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;

    font-size: var(--font-size-s);
    color: var(--color-light);
    text-align: center;

    background-color: var(--color-primary);
    background-image: linear-gradient(180deg, var(--color-primary-teint), var(--color-primary-shade));

    padding: var(--padding-default);
    width: 235px;

    transform: skewY(-2.5deg);
    box-shadow: 5px 5px 5px var(--color-dark-trans);
    box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
    section.information {
        margin-top: calc(54px + (var(--padding-default)*3));
    }

    div.reminder {
        top: calc((54px + (var(--padding-default)*3)) * -1);
        left: 0;
        right: 0;
        max-width: 1200px;
        width: calc(100vw - 2rem);
        transform: unset;
        box-shadow: unset;
        border-radius: var(--border-radius);
    }
}

/** PRICE LIST */
table.product-table {
    width: 100%;
}

table.product-table tr.mb {
    border-bottom: var(--margin-xl) solid transparent;
}