:root {

    --primary: #1f2a44;
    --secondary: #d8b445;
    --neutral-grey: #d2d6da;
    --neutral-blue: #dde6f0;
    --neutral-light: #f9fafc;

    --dark-text-color: var(--primary);
    --light-text-color: var(--neutral-light);

    --bg-color-button: var(--secondary);
    --header-footer-bg: var(--neutral-grey);
    --copyright-color: var(--dark-text-color);

    --color-dark-grey: #1f2a44;
    --color-red: #d66565;

    --font-handwritten: "TheWeddingSignature", sans-serif;
    --font-heading: "Abril Fatface", sans-serif;
    --font-body: "Inter", sans-serif;

    --color-handwritten: var(--secondary);
    --color-button: var(--light-text-color);
    --color-body-text: var(--light-text-color);

    --color-oca-form-bg: #f9fafc;

    --color-button--border: #d2d6da;

    --header-height: 5.5rem;
}

:root:not([data-theme="dark"]),
[data-theme="light"] {
    --pico-primary-background: var(--secondary);
    --pico-primary-border: var(--secondary);
}

@font-face {
    font-family: "TheWeddingSignature";
    src: url("/assets/fonts/TheWeddingSignature-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Pico overwrites */
[role="button"],
[type="button"],
[type="file"]::file-selector-button,
[type="reset"],
[type="submit"],
button {
    --pico-primary-background: var(--secondary);
    --pico-primary-border: var(--secondary);
}

/**
 * Global Styles
 **/
html {
    background-color: var(--neutral-light);
}

body {
    font-family: var(--font-body), sans-serif;
    color: var(--light-text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--header-height);
    padding-bottom: var(--header-height);
}

.handwritten {
    font-family: "TheWeddingSignature", sans-serif;
    font-size: 4.3rem;
    color: var(--color-handwritten);
    text-align: center;
    margin: 0 0 -2.5rem 0;
    transform: rotate(-2deg);
    z-index: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading), sans-serif;
    color: var(--dark-text-color);
}

h1,
.handwritten {
    position: relative;
}

h1 {
    margin: 0 0 0.68rem 0;
    z-index: 1;
    font-size: 2.3rem;
}

h2 {
    font-size: 1.34rem;
    font-weight: 400;
}

h1,
h2 {
    text-wrap: balance;
}

strong {
    font-weight: 800;
}

ul li {
    list-style: disc;
}

header,
footer {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 2;
}

header {
    height: var(--header-height);
}

header {
    top: 0;
    background-color: var(--header-footer-bg);
    text-align: center;
    height: 4.5rem;
    /*border-bottom: 1px solid var(--color-light-border);*/
}

header img {
    width: 100%;
    max-width: 8rem;
    height: auto;
}

footer {
    bottom: 0;
    background-color: var(--header-footer-bg);
    /*border-top: 1px solid var(--color-light-border);*/
    padding: 0 var(--pico-spacing) !important;
}

footer .mobile-toolbar {
    padding: var(--pico-spacing) 0;
}

footer .footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background-color: var(--header-footer-bg);
    /*border-top: 1px solid var(--borderolor-light-);*/
    padding-top: 0.5rem;
}

footer .footer-content .lang-select {
    display: flex;
    align-items: center;
    gap: 1rem;
}

footer .flag-link {
    font-size: 2.5rem;
    line-height: 1rem;
}

footer .mobile-toolbar a i {
    margin-right: 5px;
}

footer .copyright-text {

    width: auto;
    /*margin-left: calc(var(--pico-spacing) - 2 * var(--pico-spacing));*/
    padding: calc(var(--pico-spacing) / 2);
    padding-left: 0;
    background-color: var(--header-footer-bg);
    color: var(--copyright-color) !important;

    text-align: left;
    font-size: 0.85rem;
    margin-bottom: 0;
}

/**
 * Components
 **/

.button {
    background: var(--secondary);
    text-align: center;
    color: var(--light-text-color) !important;
    font-size: 1.25rem;
    font-weight: 500;
    text-decoration: none;
    padding: var(--pico-spacing);
}

.button::hov {
    border: var(--secondary);
    ;
}

.button.icon-right svg,
.button.icon-right i {
    color: var(--light-text-color) !important;
    margin-left: 5px;
}

.button.block {
    display: block;
    width: 100%;
}

.notification {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    border: 1px solid #d66565;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 25px;
}

.notification .icon i {
    font-size: 40px;
    color: var(--color-red);
}

.notification .content h3 {
    margin: 0 0 5px;
    font-size: 1.2rem;
    color: var(--color-red);
    font-weight: 300;
}

.notification .content p {
    margin: 0;
}

.desktop-toolbar .tools a {
    font-size: 0.9rem;
}

#oca-form .row {
    background-color: var(--neutral-light);
    border-bottom: 2px solid var(--neutral-grey);
    padding: 0.6rem 1.3rem;
}

#oca-form.desktop .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

#oca-form .row p {
    margin: 0;
}

#oca-form .row [role="group"] {
    margin: 0;
}

#oca-form .row:last-child {
    border-bottom: none;
}

#oca-form .row:hover {
    background-color: var(--neutral-blue);
}

#oca-form.mobile .row {
    border: 1px solid var(--neutral-grey);
    padding: 0;
}

#oca-form.mobile .row .question {
    font-weight: 800;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6rem;
    margin: 2rem 1rem;
}

#oca-form.mobile .row .answers {
    padding: 1.5rem 1rem;
    border-top: 2px solid var(--neutral-grey);
}

#oca-form.desktop .form-actions {
    text-align: right;
    margin-top: 1rem;
}

#oca-form.desktop button[type="submit"] {
    width: auto;
    font-size: 1rem;
    padding-block: 0.7rem;
    padding-inline: 2rem;
}

button.answer {
    border-color: var(--primary);
    background-color: transparent;
    color: var(--primary);
    font-size: 0.8rem;
}

.desktop .row button.answer {
    padding: 0.3rem 1rem;
}

button.answer:hover,
button.answer:active,
button.answer:focus,
button.answer.checked {
    background-color: var(--neutral-grey);
}

/**
 * Helper Classes
 **/

/* Layout */
.fsb {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (min-width: 768px) {
    .split {
        display: flex;
        gap: 1rem;
    }

    .split>* {
        flex-basis: 100%;
        width: 100%;
    }
}

.gap1 {
    gap: 0.5rem;
}

.gap2 {
    gap: 1rem;
}

.gap3 {
    gap: 1.5rem;
}

.gap4 {
    gap: 2rem;
}

/* Font Weight */
.fw500 {
    font-weight: 500;
}

.fw600 {
    font-weight: 600;
}

.fw700 {
    font-weight: 700;
}

.fw800 {
    font-weight: 800;
}

/* Font Size */
.fs04 {
    font-size: 0.4rem;
}

.fs05 {
    font-size: 0.5rem;
}

.fs06 {
    font-size: 0.6rem;
}

.fs07 {
    font-size: 0.7rem;
}

.fs08 {
    font-size: 0.8rem;
}

.fs09 {
    font-size: 0.9rem;
}

.fs11 {
    font-size: 1.1rem;
}

.fs12 {
    font-size: 1.2rem;
}

.fs13 {
    font-size: 1.3rem;
}

.fs14 {
    font-size: 1.4rem;
}

.fs15 {
    font-size: 1.5rem;
}

.fs16 {
    font-size: 1.6rem;
}

/* Margin */
.mb1 {
    margin-bottom: 0.5rem;
}

.mb2 {
    margin-bottom: 1rem;
}

.mb3 {
    margin-bottom: 1.5rem;
}

.mb4 {
    margin-bottom: 2rem;
}

.mb5 {
    margin-bottom: 2.5rem;
}

.mb6 {
    margin-bottom: 3rem;
}

.mt1 {
    margin-top: 0.5rem;
}

.mt2 {
    margin-top: 1rem;
}

.mt3 {
    margin-top: 1.5rem;
}

.mt4 {
    margin-top: 2rem;
}

.mt5 {
    margin-top: 2.5rem;
}

.mt6 {
    margin-top: 3rem;
}

.ml1 {
    margin-left: 0.5rem;
}

.ml2 {
    margin-left: 1rem;
}

.ml3 {
    margin-left: 1.5rem;
}

.ml4 {
    margin-left: 2rem;
}

.ml5 {
    margin-left: 2.5rem;
}

.ml6 {
    margin-left: 3rem;
}

.mr1 {
    margin-right: 0.5rem;
}

.mr2 {
    margin-right: 1rem;
}

.mr3 {
    margin-right: 1.5rem;
}

.mr4 {
    margin-right: 2rem;
}

.mr5 {
    margin-right: 2.5rem;
}

.mr6 {
    margin-right: 3rem;
}

.m-block1 {
    margin-block: 0.5rem;
}

.m-block2 {
    margin-block: 1rem;
}

.m-block3 {
    margin-block: 1.5rem;
}

.m-block4 {
    margin-block: 2rem;
}

.m-block5 {
    margin-block: 2.5rem;
}

.m-block6 {
    margin-block: 3rem;
}

.m-inline1 {
    margin-inline: 0.5rem;
}

.m-inline2 {
    margin-inline: 1rem;
}

.m-inline3 {
    margin-inline: 1.5rem;
}

.m-inline4 {
    margin-inline: 2rem;
}

.m-inline5 {
    margin-inline: 2.5rem;
}

.m-inline6 {
    margin-inline: 3rem;
}

.margin-inline-auto {
    margin-inline: auto;
}

/* Padding */
.pb1 {
    padding-bottom: 0.5rem;
}

.pb2 {
    padding-bottom: 1rem;
}

.pb3 {
    padding-bottom: 1.5rem;
}

.pb4 {
    padding-bottom: 2rem;
}

.pb5 {
    padding-bottom: 2.5rem;
}

.pb6 {
    padding-bottom: 3rem;
}

.pt1 {
    padding-top: 0.5rem;
}

.pt2 {
    padding-top: 1rem;
}

.pt3 {
    padding-top: 1.5rem;
}

.pt4 {
    padding-top: 2rem;
}

.pt5 {
    padding-top: 2.5rem;
}

.pt6 {
    padding-top: 3rem;
}

.pl1 {
    padding-left: 0.5rem;
}

.pl2 {
    padding-left: 1rem;
}

.pl3 {
    padding-left: 1.5rem;
}

.pl4 {
    padding-left: 2rem;
}

.pl5 {
    padding-left: 2.5rem;
}

.pl6 {
    padding-left: 3rem;
}

.pr1 {
    padding-right: 0.5rem;
}

.pr2 {
    padding-right: 1rem;
}

.pr3 {
    padding-right: 1.5rem;
}

.pr4 {
    padding-right: 2rem;
}

.pr5 {
    padding-right: 2.5rem;
}

.pr6 {
    padding-right: 3rem;
}

.p-block1 {
    padding-block: 0.5rem;
}

.p-block2 {
    padding-block: 1rem;
}

.p-block3 {
    padding-block: 1.5rem;
}

.p-block4 {
    padding-block: 2rem;
}

.p-block5 {
    padding-block: 2.5rem;
}

.p-block6 {
    padding-block: 3rem;
}

.p-inline1 {
    padding-inline: 0.5rem;
}

.p-inline2 {
    padding-inline: 1rem;
}

.p-inline3 {
    padding-inline: 1.5rem;
}

.p-inline4 {
    padding-inline: 2rem;
}

.p-inline5 {
    padding-inline: 2.5rem;
}

.p-inline6 {
    padding-inline: 3rem;
}

/* Width */
.w100 {
    width: 100%;
}

.w50 {
    width: 50%;
}

.w33 {
    width: 33.33%;
}

/* Max Width */
.max-w-500 {
    max-width: 500px;
}

.max-w-600 {
    max-width: 600px;
}

.max-w-700 {
    max-width: 700px;
}

.max-w-800 {
    max-width: 800px;
}

.max-w-900 {
    max-width: 900px;
}

.max-w-1000 {
    max-width: 1000px;
}

/* Text, Typography */
.text-center {
    text-align: center;
}

.text-balance {
    text-wrap: balance;
}

a.unstyled {
    text-decoration: none;
    color: var(--dark-text-color);
}

/* Responsive */
@media screen and (min-width: 768px) {
    footer .footer-content {
        border-top: 0;
        padding-top: 0;
    }

    footer .footer-content .lang-select {
        gap: 0.6rem;
    }

    footer .flag-link {
        font-size: 1.5rem;
    }

    footer .copyright-text {
        font-size: 0.85rem;
    }
}