/* ==========================================================================
   Registration / Thank-you — styled to match the Media Forum agenda card.
   Palette, Expo Office font and layout mirror code/agenda-en.php and the
   reference designs in docs/referance_files/dan/.
   ========================================================================== */

/* --- Expo Office (same font used by the agenda) -------------------------- */
@font-face {
    font-family: "Expo Office";
    src: url("fonts/ExpoOffice-Regular.otf") format("opentype");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Expo Office";
    src: url("fonts/ExpoOffice-RegularItalic.otf") format("opentype");
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "Expo Office";
    src: url("fonts/ExpoOffice-Bold.otf") format("opentype");
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Expo Office";
    src: url("fonts/ExpoOffice-BoldItalic.otf") format("opentype");
    font-weight: 700; font-style: italic; font-display: swap;
}

/* --- Palette (sampled from the agenda A4 card) --------------------------- */
:root {
    --ink:  #3f221a;   /* body text */
    --gold: #c49236;   /* accents / submit button */
    --sand: #ecdfcd;   /* field outline / rules */
    --ph:   #76655d;   /* placeholder */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    overflow-x: hidden;
    font-family: "Expo Office", "Segoe UI", Tahoma, Arial, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* --- Decorative wave bands ---------------------------------------------- */
.wave {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}
.wave-bottom { margin-top: auto; }

/* --- Page column --------------------------------------------------------- */
.page {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px 28px;
    container-type: inline-size;
}

/* --- Brand lockup: authority logo on top, Media Forum below (as agenda) --- */
.logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2.4cqw, 20px);
    margin: clamp(14px, 3cqw, 28px) 0 clamp(28px, 6cqw, 48px);
}
.brand { display: block; height: auto; }
.brand-authority { width: 64%; }
.brand-forum { width: 100%; }

@media (max-width: 480px) {
    .brand-authority { width: 92%; }
}

/* Visually-hidden labels */
.sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Form ---------------------------------------------------------------- */
.title { margin: 0 0 clamp(18px, 3.5cqw, 28px); text-align: center; font-size: inherit; }
.title span {
    display: inline-block;
    color: var(--ink);
    font-weight: 700;
    font-size: clamp(22px, 3.8cqw, 30px);
}

form { display: flex; flex-direction: column; gap: clamp(10px, 1.8cqw, 14px); }
.field { display: flex; flex-direction: column; gap: 6px; }

.field input,
.field select {
    width: 100%;
    min-height: clamp(52px, 8cqw, 60px);
    padding: 10px clamp(16px, 3.4cqw, 26px);
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--sand);
    border-radius: clamp(8px, 1.6cqw, 12px);
    font: inherit;
    font-size: max(16px, 2.4cqw);
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}
.field input::placeholder { color: var(--ph); opacity: 1; }
.field input:focus-visible,
.field select:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 1px;
    border-color: var(--gold);
}
.field input[aria-invalid="true"] { border-color: #a3342a; }

/* Inline / per-field error (server-rendered) */
.err {
    margin: 0;
    padding-inline: 4px;
    text-align: left;
    font-size: 14px;
    color: #a3342a;
}
.form-err { margin: 0; text-align: center; font-size: 14px; color: #a3342a; }

button.submit {
    margin-top: clamp(8px, 2cqw, 14px);
    width: 100%;
    min-height: clamp(54px, 8cqw, 62px);
    border: 0;
    border-radius: clamp(8px, 1.6cqw, 12px);
    background: var(--gold);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: max(18px, 2.8cqw);
}
button.submit:hover { background: #b6872f; }
button.submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
button.submit[disabled] { opacity: .65; cursor: progress; }

/* --- Thank-you card ------------------------------------------------------ */
.thanks {
    border: 1px solid var(--sand);
    border-radius: clamp(10px, 2cqw, 16px);
    background: #fff;
    padding: clamp(28px, 7cqw, 56px) clamp(20px, 5cqw, 48px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2.4cqw, 20px);
}
.tick { width: clamp(56px, 10cqw, 76px); height: clamp(56px, 10cqw, 76px); }
.thanks h1 { margin: 0; font-size: clamp(22px, 4.2cqw, 30px); font-weight: 700; line-height: 1.6; }
.thanks .en { margin: 0; font-size: clamp(17px, 3cqw, 22px); font-weight: 400; line-height: 1.6; }
.thanks .ar-sub { margin: 0; font-size: clamp(16px, 2.8cqw, 20px); font-weight: 400; line-height: 1.6; }
.rule { width: 64px; height: 2px; background: var(--sand); border: 0; margin: 0; }

.thanks .qr {
    width: clamp(180px, 46cqw, 260px);
    height: auto;
    border: 1px solid var(--sand);
    border-radius: clamp(8px, 1.6cqw, 12px);
    padding: clamp(8px, 1.6cqw, 12px);
    background: #fff;
}

.thanks .back {
    margin-top: clamp(6px, 1.6cqw, 12px);
    display: inline-block;
    padding: 12px clamp(22px, 5cqw, 40px);
    border-radius: clamp(8px, 1.6cqw, 12px);
    background: var(--gold);
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: max(16px, 2.4cqw);
}
.thanks .back:hover { background: #b6872f; }