@font-face {
    font-family: 'Bamberger';
    src: url('./assets/fonts/bamberger-grunge-ultralight-fm.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Bamberger';
    src: url('./assets/fonts/bamberger-grunge-light-fm.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Bamberger';
    src: url('./assets/fonts/bamberger-grunge-regular-fm.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Bamberger';
    src: url('./assets/fonts/bamberger-grunge-bold-fm.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Bamberger';
    src: url('./assets/fonts/bamberger-grunge-black-fm.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'Bamberger Grunge';
    src: url('./assets/fonts/bamberger-grunge-grunge-fm.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

/* Single source of truth for the brand red. var(--red) (the previous value) gives
   white-on-red 4.34:1 and fails WCAG 1.4.3 AA; #DD1D2C gives 4.90:1. */
:root {
    --red: #DD1D2C;
    /* Error red, deliberately NOT var(--red): everything inside the form is already
       brand red (`form { color: var(--red) }`), so a message in that colour reads as
       more body copy. --err is 6.95:1 on white and 6.09:1 on --err-bg; --red on
       --err-bg would be 4.29:1 and fail 1.4.3. */
    --err: #B3121F;
    --err-bg: #FDECEE;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Off-screen but still focusable and still read by screen readers. Used for
   real <label>s the visual design has no room for, and for the file inputs --
   display:none would drop them out of the tab order (WCAG 2.1.1). */
.sr-only,
.upload input,
.review-reupload input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

body {
    font-family: 'Bamberger', Arial, sans-serif;
    background-color: white;
    color: white;
    line-height: 1;
}

.yellow {
    color: #fcde07;
    font-weight: 600;
}

.title-1,
.title-2,
.buy-title,
.thanks-1,
.thanks-2 {
    font-family: 'Bamberger', Arial, sans-serif;
}

.mobile-br {
    display: block;
}

.desktop-br {
    display: none;
}

main {
    display: flex;
    flex-direction: column;
}

.illustration-note {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    font-size: 0.75rem;
    color: white;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--red);
    padding: 1rem;
    gap: 1rem;
    position: relative;
}

.logo {
    width: 6rem;
}

.title-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* One <h1> spans the whole headline (WCAG 1.3.1) -- the two visual halves are
   spans inside it, so the heading itself carries the flex layout the two old
   <h1> elements used to get from .title-container. */
.hero-title {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 4.5rem;
}

.title-1,
.title-2 {
    display: block;
    position: relative;
}

.exclamation {
    position: absolute;
    width: 1.6rem;
    bottom: 0;
}

.small-text {
    position: absolute;
    font-size: 1.2rem;
    background: linear-gradient(to right, #fff 0, #fff calc(100% - 1px), rgba(255, 255, 255, 0) 100%);
    width: 4rem;
    text-align: center;
    top: 1.9rem;
    right: 5rem;
}

.title-2 {
    font-size: 5rem;
    padding: 0 1rem 0 1rem;
    width: fit-content;
    background-color: white;
    color: var(--red);
}

.combinations {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.chocolate-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.amount {
    font-size: 1.7rem;
    font-weight: 300;
}

.chocolate {
    width: 22rem;
}

.or {
    width: 2.3rem;
}

.steps {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.how-to {
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
}

.arrow {
    width: 4rem;
}

form {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--red);
    padding: 1rem 2.5rem;
    gap: 0.3rem;
}

form>*::placeholder {
    color: var(--red);
}

h2 {
    font-size: 4rem;
}

.buy-title {
    color: #fcde07;
    font-size: 5rem;
}

.form-subtitle {
    font-size: 2rem;
}

/* WCAG 3.3.2 -- the fields carry no visible label, so the requirement is stated
   once above them. */
.required-note {
    font-size: 0.85rem;
    font-weight: 500;
    align-self: flex-start;
    margin-bottom: 0.2rem;
}

.upload {
    /* Lightened from #FCEFF0: red-on-pink there is 4.37:1, under the 4.5:1 that
       1.4.3 demands. #FDF6F7 gives 4.60:1 at a visually identical tint. */
    background-color: #FDF6F7;
    font-weight: 500;
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0.1rem dashed var(--red);
    border-radius: 1rem;
    padding: 3rem 2rem;
    width: 100%;
    margin-bottom: 0.5rem;
    cursor: pointer;
    gap: 1rem;
}

/* The input itself is hidden by the .sr-only group at the top of this file, so
   it keeps its place in the tab order. The ring is drawn on the label, which is
   what the user actually sees. */
.upload:focus-within,
.review-reupload:focus-within {
    outline: 0.2rem solid var(--red);
    outline-offset: 0.2rem;
}

.camera {
    width: 2rem;
}

input {
    width: 100%;
    border: 0.1rem solid var(--red);
    border-radius: 0.5rem;
    padding: 0.4rem 0.2rem;
}

input::placeholder {
    text-align: right;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'Bamberger';
    color: var(--red);
}

#fullname,
#mobile {
    background-repeat: no-repeat;
    background-position: left 0.6rem center;
    background-size: 1.1rem;
    padding-left: 2rem;
}

#fullname {
    background-image: url('./assets/images/person.svg');
}

#mobile {
    background-image: url('./assets/images/mobile.svg');
}

.checkbox-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

input[type="checkbox"] {
    appearance: none;
    width: 3em;
    height: 1em;
    border: 1px solid var(--red);
    border-radius: 3px;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: var(--red);
}

.checkbox-text {
    font-size: 0.9rem;
}

.legal-text {
    font-size: 1.1rem;
    text-align: center;
    width: 105%;
    margin-top: 0.5rem;
}

button {
    font-family: 'Bamberger', Arial, sans-serif;
    font-size: 1.5rem;
    padding: 0.6rem 2rem;
    color: white;
    background-color: var(--red);
    border: none;
    border-radius: 2rem;
    cursor: pointer;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.3rem;
}

.contact-links {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* 4 items: 3rem overflows ~375px. Row/column gaps differ so a wrap
       (very small screens) does not leave a 2rem vertical hole. */
    flex-wrap: wrap;
    gap: 1.2rem 1.5rem;
    margin-top: 1.5rem;
}

.contact-item,
.contact-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--red);
    text-decoration: none;
    font-size: 1rem;
    text-align: center;
}

.contact-item {
    position: relative;
}

.contact-toggle,
button.contact-item {
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    font-family: 'Bamberger', Arial, sans-serif;
}

.contact-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.contact-numbers {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    white-space: nowrap;
}

.contact-numbers a {
    color: var(--red);
    text-decoration: none;
}

.contact-numbers[hidden] {
    display: none;
}

.step-img {
    width: 3rem;
    margin-bottom: 0.5rem;
}

.code-input {
    text-align: center;
    letter-spacing: 0.6rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--red);
    margin: 0.5rem 0;
    direction: ltr;
}

.code-input::placeholder {
    text-align: center;
    letter-spacing: 0.6rem;
}

/* Panes are swapped by script.js, which parks focus on the new pane's heading so
   a screen reader announces it. Those headings are not tabbable, so suppressing
   the ring here does not hide focus from keyboard users. */
[tabindex="-1"]:focus {
    outline: none;
}

/* Sits directly under the field it belongs to and reads as an alert, not as copy.
   The audit (3.3.1) asked for both: the message under the offending control, and a
   message a screen reader actually announces. */
.form-error,
.step-error {
    color: var(--err);
    background-color: var(--err-bg);
    border-inline-start: 0.25rem solid var(--err);
    border-radius: 0.4rem;
    padding: 0.5rem 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    /* Logical, so the box still starts on the reading edge if dir ever changes. */
    text-align: start;
    width: 100%;
    margin: 0.35rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

/* Colour is not the only cue (1.4.1): icon + heavier border carry it too.
   It has to be a ::before with an empty content and a background image --
   script.js writes el.textContent, which would delete a real child node, and
   generated *text* ("!") gets spoken inside the live region. */
.form-error::before,
.step-error::before {
    content: '';
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.05rem;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='10' fill='%23B3121F'/><rect x='9' y='4.4' width='2' height='7.4' rx='1' fill='%23fff'/><circle cx='10' cy='14.8' r='1.3' fill='%23fff'/></svg>") no-repeat center / contain;
}

/* Collapse the slot when there is no message -- but never with display:none. A live
   region that is hidden at write time and revealed afterwards is the classic reason
   an alert is not announced, which is the bug the audit reported. The element stays
   rendered; with no content it is simply 0 high. */
.form-error:empty,
.step-error:empty {
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    min-height: 0;
}

.form-error:empty::before,
.step-error:empty::before {
    display: none;
}

/* script.js has always set aria-invalid; until now no rule used it, so an invalid
   field looked identical to a valid one. */
input[aria-invalid="true"] {
    border-width: 0.2rem;
    border-color: var(--err);
    /* background-color, never the `background` shorthand -- that would wipe the
       person/mobile background-image icons on #fullname / #mobile below. */
    background-color: var(--err-bg);
}

input[aria-invalid="true"]::placeholder {
    /* --red on --err-bg is 4.29:1. Placeholder text is text (1.4.3). */
    color: var(--err);
}

/* Border only, no tint: .upload's own 1.5rem text is --red on #FDF6F7 (4.60:1, the
   value that tint was chosen for). Re-tinting to --err-bg would drop it to 4.29:1. */
.upload--error {
    border-width: 0.2rem;
    border-color: var(--err);
    border-style: dashed;
}

.resend {
    background: none;
    color: var(--red);
    font-size: 0.9rem;
    padding: 0.3rem;
    text-decoration: underline;
    border-radius: 0;
}

.resend:disabled {
    color: #8a5b5e;
    text-decoration: none;
    cursor: default;
}

button:disabled {
    opacity: 0.6;
    cursor: default;
}

#receipt-preview {
    max-width: 100%;
    max-height: 40vh;
    border-radius: 0.8rem;
    margin-top: 2rem;
}

/* Hidden until the review step opens. Same mechanism as .thanks and .faq --
   script.js reveals each pane with an inline display:flex. */
.review {
    background-color: white;
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--red);
    padding: 1.5rem 2.5rem;
    gap: 0.6rem;
    min-height: 100vh;
    justify-content: center;
}

.review .logo-thanks {
    width: 5rem;
    margin-bottom: 0.5rem;
}

#review-preview {
    max-width: 100%;
    max-height: 45vh;
    border-radius: 0.8rem;
    margin: 0.5rem 0;
}

.review-question {
    font-size: 1.1rem;
    font-weight: 700;
}

.review #review-approve {
    margin-top: 0.5rem;
}

.review-reupload {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--red);
    text-decoration: underline;
    cursor: pointer;
    margin-top: 0.3rem;
}

.review-reupload .camera {
    width: 1.4rem;
}

.thanks {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(./assets/images/bg-thanks-mob.jpg);
    background-size: cover;
    aspect-ratio: 636 / 1130;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    width: 100%;
    height: 100vh;
    padding: 1rem;
}

.logo-thanks {
    width: 6rem;
}

.thanks-1 {
    font-size: 6rem;
    color: #ffde00;
    font-weight: 400;
}

.thanks-2 {
    font-size: 3.5rem;
    color: #ffde00;
    font-weight: 400;
}

.thanks-3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    color: white;
}

.candies-thanks {
    width: 22rem;
    margin-top: 3rem;
}

/* ---- FAQ view ---- */
.faq {
    display: none;
    flex-direction: column;
    background-color: white;
    color: var(--red);
    min-height: 100vh;
    text-align: right;
}

.faq-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-color: var(--red);
    padding: 2rem 1rem 2.5rem;
}

.faq-logo {
    width: 6rem;
}

.faq-back {
    position: absolute;
    right: 1rem;
    top: 1rem;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.4rem;
    background-color: white;
    color: var(--red);
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Bamberger', Arial, sans-serif;
    cursor: pointer;
}

.faq-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
}

.faq-title span {
    font-size: 4rem;
}

.faq-title-1 {
    color: white;
}

.faq-title-2 {
    background-color: white;
    color: var(--red);
    padding: 0.1rem 0.8rem;
    transform: rotate(6deg);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.5rem 1.5rem 3rem;
}

.faq-col {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.faq-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.faq-item:not(:last-child)::after {
    content: "";
    align-self: center;
    width: 90%;
    height: 0.1rem;
    margin-top: 1.2rem;
    background: #f5dcde;
}

.faq-q {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    max-width: 100%;
    background-color: var(--red);
    color: white;
    text-align: right;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0.3rem 0.5rem;
    border-radius: 0;
    font-family: 'Bamberger', Arial, sans-serif;
}

.faq-toggle {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    position: relative;
}

.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    background-color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.faq-toggle::before {
    width: 1.1rem;
    height: 0.18rem;
}

.faq-toggle::after {
    width: 0.18rem;
    height: 1.1rem;
}

/* expanded -> hide the vertical bar so "+" becomes "-" */
.faq-q[aria-expanded="true"] .faq-toggle::after {
    display: none;
}

.faq-a {
    color: var(--red);
    font-size: 1rem;
    font-weight: 400;
    padding: 1rem 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow: hidden;
    max-height: 100rem;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.2s ease, opacity 0.2s ease, padding 0.2s ease, visibility 0s;
}

/* display:flex here overrides the `hidden` attribute so the collapse can animate.
   That alone only clips the answer visually -- it stays in the accessibility tree
   and a screen reader reads it while aria-expanded says "false". visibility:hidden
   is what actually removes it, and unlike display it can be transitioned, so it is
   held back until the collapse finishes (WCAG 1.3.1 / 4.1.2). */
.faq-a[hidden] {
    display: flex;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    visibility: hidden;
    transition: max-height 0.2s ease, opacity 0.2s ease, padding 0.2s ease, visibility 0s linear 0.2s;
}

.faq-a-note {
    font-weight: 700;
}

.faq-a strong {
    font-weight: 800;
    font-size: inherit;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

.faq-a ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-weight: 300;
}

.faq-a ul li {
    padding-right: 0.6rem;
    position: relative;
}

.faq-a ul li::before {
    content: "–";
    position: absolute;
    right: 0;
}

@media (min-width: 768px) {
    .desktop-br {
        display: block;
    }

    .mobile-br {
        display: none;
    }

    main {
        flex-direction: row;
        background-color: var(--red);
        justify-content: space-between;
        padding-left: 3rem;
        min-height: 100svh;
    }

    .illustration-note {
        font-size: 1.75rem;
    }

    section {
        width: 75%;
        gap: 0;
    }

    .logo {
        align-self: flex-start;
        width: 9rem;
    }

    .title-container {
        position: relative;
        flex-direction: row;
        gap: 2rem;
        margin-top: 2rem;
    }

    .hero-title {
        flex-direction: row;
        gap: 2rem;
        font-size: 10rem;
    }

    .buy-title {
        position: absolute;
        top: -4.5rem;
        font-size: 8rem;
        right: 40%;
        background-color: var(--red);
        width: 13rem;
    }

    .title-2 {
        font-size: 10rem;
        padding: 0 1rem;
    }

    .exclamation {
        width: 3rem;
    }

    .small-text {
        font-size: 2.5rem;
        width: 8rem;
        top: 3.6rem;
        right: 9rem;
    }

    .combinations {
        flex-direction: row;
        position: relative;
        align-items: flex-start;
        gap: 2rem;
        border: 0.3em solid white;
        padding: 2rem 0.5rem 0 0.5rem;
        margin-top: 5rem;
    }

    .amount {
        font-size: 3rem;
    }

    .chocolate {
        width: 29rem;
    }

    .combinations .chocolate-container:first-of-type .chocolate {
        margin-top: 2rem;
    }

    .or {
        align-self: center;
        width: 5rem;
    }

    .steps {
        gap: 3.5rem;
        margin-top: 1rem;
    }

    .how-to {
        font-size: 4.5rem;
    }

    .arrow {
        width: 11rem;
    }

    .step-icon {
        width: 4rem;
    }

    .bigger-icon {
        width: 5rem;
    }


    .step-text {
        font-size: 1.6rem;
    }

    .buyme {
        width: 10rem;
        margin-top: 0.5rem;
    }

    form {
        width: 25%;
        filter: drop-shadow(-7px 0px 6px rgba(0, 0, 0, 0.2)) drop-shadow(9px 0px 8px rgba(0, 0, 0, 0.85));
        gap: 0.6rem;
    }

    h2 {
        font-size: 3rem;
    }

    .form-subtitle {
        font-size: 1.5rem;
    }

    .upload {
        font-size: 1.5rem;
    }

    input {
        padding: 0.7rem 0.5rem;
    }

    input::placeholder {
        font-size: 1.5rem;
    }

    .thanks {
        background: url('./assets/images/bg-thanks-desk.jpg') center / cover no-repeat;
        min-height: 100svh;
        height: unset;
        padding: 3rem;
        aspect-ratio: 1920 / 910;
    }

    .logo-thanks {
        width: 12rem;
    }

    .thanks-1 {
        font-size: 18rem;
    }

    .thanks-2 {
        font-size: 5rem;
    }

    .thanks-3 {
        font-size: 2.5rem;
        margin-top: 1rem;
    }

    .candies-thanks {
        width: 51rem;
    }

    .faq-header {
        padding: 3rem 2rem;
    }

    .faq-back {
        font-size: 1.4rem;
        padding: 0.5rem 1.4rem;
    }

    .faq-logo {
        width: 9rem;
    }

    .faq-title {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }

    .faq-title span {
        font-size: 5rem;
    }

    .faq-title-2 {
        padding: 0.2rem 1.2rem;
        transform: none;
    }

    .faq-list {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 3rem;
        padding: 3rem 4rem 4rem;
        max-width: 90rem;
        margin: 0 auto;
    }

    .faq-col {
        flex: 0 0 26rem;
        width: 26rem;
    }

    .faq-q {
        font-size: 1.6rem;
    }

    .faq-a {
        font-size: 1.2rem;
    }

    .legal-text {
        font-size: 1.5rem;
    }

    .contact-links {
        flex-wrap: nowrap;
        gap: 3rem;
    }
}

@media (min-width: 768px) and (max-width: 1777px) {
    html {
        font-size: 0.9vw;
    }
}