:root {
    --color-light-cream: #FCF2E8;
    --color-light-brown: #B68264;
    --color-dark-brown: #2F2520;
    --color-dark-yellow: #D3B574;
    --color-dark-grey: #343741;
    --color-red: #d66565;

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

    --color-handwritten: #C77F13;
    --bg-color-button: var(--color-dark-yellow);
    --color-button:  var(--color-dark-brown);
    --color-heading: var(--color-dark-grey);
    --color-body-text: var(--color-dark-brown);
    --color-light-border: #F3DACC;

    --color-oca-form-bg: #FFFBF7;
    --color-oca-form-border: #F3EAE0;

    --header-height: 5.5rem;
}
:root:not([data-theme=dark]),
[data-theme=light] {
    --pico-primary-background: var(--bg-color-button);
    --pico-primary-border: var(--bg-color-button);
}

@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(--bg-color-button);
    --pico-primary-border: var(--bg-color-button);
}

/**
 * Global Styles
 **/

body {
    font-family: var(--font-body), sans-serif;
    color: var(--color-body-text);
    -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(--color-heading);
}
h1, .handwritten {
    position: relative;
}
h1 {
    margin: 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(--color-light-cream);
    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(--color-light-cream);*/
    border-top: 1px solid var(--color-light-border);
    padding: 0 var(--pico-spacing) !important;
    background-color: #F1E2DA;
}
footer .mobile-toolbar {
    padding: var(--pico-spacing) 0;
}
footer .footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background-color: #F1E2DA;
    border-top: 1px solid #ddc2b1;
    padding-top: .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: #F1E2DA;
    text-align: left;
    font-size: .85rem;
    margin-bottom: 0;
}

/**
 * Components
 **/

.button {
    background: var(--bg-color-button);
    text-align: center;
    color: var(--color-button);
    font-size: 1.25rem;
    font-weight: 500;
    text-decoration: none;
    padding: var(--pico-spacing);
}
.button.icon-right svg,
.button.icon-right i {
    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: .9rem;
}

#oca-form .row {
    background-color: var(--color-oca-form-bg);
    border-bottom: 2px solid var(--color-oca-form-border);
    padding: .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(--color-oca-form-border); }

#oca-form.mobile .row {
    border: 1px solid var(--color-oca-form-border);
    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(--color-oca-form-border);
}
#oca-form.desktop .form-actions {
    text-align: right;
    margin-top: 1rem;
}
#oca-form.desktop button[type="submit"] {
    width: auto;
    font-size: 1rem;
    padding-block: .7rem;
    padding-inline: 2rem;
}

button.answer {
    border-color: var(--color-dark-grey);
    background-color: transparent;
    color: var(--color-dark-grey);
    font-size: .8rem;
}
.desktop .row button.answer {
    padding: .3rem 1rem;
}
button.answer:hover,
button.answer:active,
button.answer:focus,
button.answer.checked { background-color: var(--bg-color-button); }

/**
 * 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: .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: .4rem;}
.fs05 {font-size: .5rem;}
.fs06 {font-size: .6rem;}
.fs07 {font-size: .7rem;}
.fs08 {font-size: .8rem;}
.fs09 {font-size: .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: .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: .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: .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: .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: .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: .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: .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: .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: .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: .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: .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: .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(--color-body-text);
}

/* Responsive */
@media screen and (min-width: 768px) {
    footer .footer-content {
        border-top: 0;
        padding-top: 0;
    }
    footer .footer-content .lang-select {
        gap: .6rem;
    }
    footer .flag-link {font-size: 1.5rem;}
    footer .copyright-text {font-size: .85rem}
}