/* =============================================================================
 * style-responsive.css   (inscription site overlay)
 * -----------------------------------------------------------------------------
 * Loaded AFTER style2025.css and the per-concours CSS so it can override
 * the mobile rules in style2025.css (which currently just stacks the sidebar
 * above the content at <= 860px).
 *
 * Phase 1 scope:
 *   - Burger button toggle (mobile only)
 *   - Sidebar becomes a slide-in drawer (off-canvas)
 *   - Backdrop click closes the drawer
 *   - Defensive @media (min-width: 861px) block so desktop never sees the
 *     drawer / burger even if a stale stylesheet is cached
 *
 * Phases 2 & 3 (forms + messages) will be added later in this same file.
 * ============================================================================= */

/* ----------------------------------------------------------------------------
 * Safe-everywhere helpers
 * ---------------------------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}
html, body {
    overflow-x: hidden;
}

/* Hidden by default; only revealed inside the mobile @media block below. */
.burger-toggle {
    display: none;
}
.menu-backdrop {
    display: none;
}

/* ----------------------------------------------------------------------------
 * Compact read-only info rows (used by account_data row templates).
 * Replaces the old <table class="XFormularTable"> which got linearised on
 * mobile and ended up taking 2 lines per field. With these classes the
 * label and value stay on the same line on all viewports (the label wraps
 * to its own line only if the value is long).
 * ---------------------------------------------------------------------------- */
.info-card-row {
    font-size: 14px;
    line-height: 1.6em;
    padding: 2px 0;
    color: #333333;
}
.info-card-label {
    font-weight: bold;
    display: inline-block;
    min-width: 130px;
    color: #555555;
}
.account-info,
.account-address {
    margin: 4px 0 8px 0;
}
.account-address {
    line-height: 1.5em;
}

@media (max-width: 860px) {
    .info-card-label {
        min-width: 110px;
    }
}

/* ----------------------------------------------------------------------------
 * Messages (Phase 3)
 * -----------------------------------------------------------------------------
 * Replaces the PNG-based message styles from style2025.css with a modern
 * design: a colored left accent, a CSS-only pastille icon, and a soft tinted
 * background per variant (error/warning/confirm/info/normal).
 *
 * No external image dependency, accessible, and visually distinct per type.
 *
 * The shorthand "background: color none" intentionally resets the
 * background-image url() from style2025.css.
 * ---------------------------------------------------------------------------- */
.message_error,
.message_warning,
.message_confirm,
.message_info,
.message_normal {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 10px 0;
    padding: 12px 14px;
    background: #f4f4f4 none;
    border: 1px solid #d6d6d6;
    border-left: 4px solid #999999;
    border-radius: 4px;
    color: #333333;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    /* Reset the legacy PNG positioning rules from style2025.css */
    background-position: 0 0;
    background-repeat: no-repeat;
}
.message_error::before,
.message_warning::before,
.message_confirm::before,
.message_info::before,
.message_normal::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
}

.message_error {
    background: #fdecea none;
    border-color: #f5c6c0;
    border-left-color: #d93025;
    color: #5e1414;
}
.message_error::before { content: "\2715"; background: #d93025; }  /* X */
.message_error a { color: #b40e1c; }

.message_warning {
    background: #fff4e5 none;
    border-color: #f5dca6;
    border-left-color: #e8a019;
    color: #6b4500;
}
.message_warning::before { content: "!"; background: #e8a019; }

.message_confirm {
    background: #e6f4ea none;
    border-color: #b7e0c2;
    border-left-color: #1e8e3e;
    color: #1d4f25;
}
.message_confirm::before { content: "\2713"; background: #1e8e3e; }  /* checkmark */

.message_info {
    background: #e8f0fe none;
    border-color: #b8cffb;
    border-left-color: #1967d2;
    color: #102e5e;
}
.message_info::before {
    content: "i";
    background: #1967d2;
    font-style: italic;
    font-family: Georgia, serif;
}

.message_normal {
    background: #f4f4f4 none;
    border-color: #d6d6d6;
    border-left-color: #888888;
    color: #333333;
}
.message_normal::before { content: "\2022"; background: #888888; }  /* bullet */

/* The site also uses .account_message for inline session-expired messages.
 * Style it like an info message for consistency. */
.account_message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 10px 0;
    padding: 12px 14px;
    background: #e8f0fe;
    border: 1px solid #b8cffb;
    border-left: 4px solid #1967d2;
    border-radius: 4px;
    color: #102e5e;
    font-size: 14px;
    line-height: 1.5em;
}
.account_message::before {
    content: "i";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    background: #1967d2;
    color: #ffffff;
    border-radius: 50%;
    font-weight: bold;
    font-style: italic;
    font-size: 14px;
    font-family: Georgia, serif;
    line-height: 1;
}

@media (max-width: 860px) {
    .message_error,
    .message_warning,
    .message_confirm,
    .message_info,
    .message_normal,
    .account_message {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* ============================================================================
 * BREAKPOINT: viewports up to 860px (matches existing style2025.css cut-off)
 * ============================================================================ */
@media (max-width: 860px) {

    body {
        font-size: 100%;
    }

    /* -- Burger toggle button --------------------------------------------- */
    .burger-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border: 1px solid var(--brand-red, #b00b19);
        color: var(--brand-red, #b00b19);
        width: 44px;
        height: 44px;
        font-size: 22px;
        line-height: 1;
        padding: 0;
        cursor: pointer;
        border-radius: 4px;
        flex-shrink: 0;
        -webkit-appearance: none;
        /* Always first in the banner's flex row */
        order: -1;
    }
    .burger-toggle:hover,
    .burger-toggle:focus {
        background: var(--brand-red, #b00b19);
        color: #ffffff;
        outline: none;
    }

    /* -- Pull the sidebar out of the grid -------------------------------- */
    /* style2025.css line ~854 stacks the sidebar above the content in a
     * 1-col grid. We want it as a fixed-position drawer instead, so we drop
     * the "sidebar" grid area from the template entirely. */
    #wrapper {
        grid-template-areas:
            "banner"
            "lang"
            "content"
            "footer" !important;
    }

    /* -- Sidebar as a slide-in drawer (off-canvas) ----------------------- */
    /* Over-specified (body aside#sidebar) to win against the base rule
     * even in case of a stale cached stylesheet. */
    body #sidebar,
    body aside#sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 0.25s ease-out;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #d1d4d7;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
        padding: 16px 0 24px 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    body.menu-open #sidebar {
        transform: translateX(0);
    }

    /* -- Backdrop behind the open drawer ---------------------------------- */
    .menu-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    body.menu-open .menu-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Prevent page scroll while the drawer is open. */
    body.menu-open {
        overflow: hidden;
    }

    /* -- Nav links: bigger touch targets inside the drawer --------------- */
    #navcontainer a {
        padding: 12px 18px !important;
        font-size: 16px;
        border-bottom: 1px solid #ffffff;
    }

    /* ====================================================================
     * Phase 2 - Forms & buttons (mobile)
     * ==================================================================== */

    /* -- Linearize the <table class="XFormularTable"> -------------------- */
    /* style2025.css uses XFormularTable as a 2-column form (label | input).
     * On mobile we collapse each cell to block-level so labels sit ABOVE
     * their inputs, and everything stretches to the available width. */
    table.XFormularTable,
    table.XFormularTable tbody,
    table.XFormularTable tr,
    table.XFormularTable th,
    table.XFormularTable td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        height: auto !important; /* override .XFormularTable tr { height: 15px } */
        min-height: 0;
    }
    table.XFormularTable tr {
        margin-bottom: 8px;
        padding: 0;
    }
    table.XFormularTable th {
        padding: 8px 0 4px 0;
        text-align: left;
        vertical-align: top;
        font-weight: bold;
    }
    table.XFormularTable td {
        padding: 0 0 6px 0;
        vertical-align: top;
    }
    table.XFormularTable th label {
        display: block;
        min-width: 0;
        width: 100%;
        padding: 0;
    }
    /* Nested helper tables (radio grids etc.): keep them readable */
    table.XFormularTable table th,
    table.XFormularTable table td {
        padding: 2px 6px 2px 0;
    }

    /* -- Form fields: full width, big enough to be tap-friendly ---------- */
    /* font-size: 16px on inputs prevents iOS Safari from zooming on focus. */
    input[type=text],
    input[type=email],
    input[type=password],
    input[type=tel],
    input[type=number],
    input[type=date],
    input[type=datetime-local],
    input[type=search],
    input[type=url],
    input[type=file],
    select,
    textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        padding: 8px;
        margin: 2px 0;
    }
    textarea {
        min-height: 80px;
    }
    /* Radios / checkboxes: keep inline, just enlarge slightly for thumbs */
    input[type=radio],
    input[type=checkbox] {
        width: auto !important;
        transform: scale(1.2);
        margin: 4px 6px 4px 0;
    }
    /* Select2 widget specific (used heavily on the inscription site) */
    .select2-container,
    .select2-container--default {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    .select2-selection {
        min-height: 40px;
    }

    /* -- Buttons: 5 variants for clear visual hierarchy ------------------ */
    /*
     * .buttons / div.buttons                          : the container, allows
     *                                                   row-wrap so inline
     *                                                   variants flow horizontally
     * <button class="negative">                       : primary submit (forms)
     * <a class="a_button a_button--primary">          : main action (default)
     * <a class="a_button a_button--secondary">        : important, full-width
     * <a class="a_button a_button--secondary-inline"> : same outlined look as
     *                                                   secondary, but auto width
     *                                                   so multiple buttons sit
     *                                                   side-by-side (wraps)
     * <a class="a_button a_button--link">             : tertiary, text-link style
     * <a class="a_button a_button--danger">           : destructive (delete...)
     *
     * The variant comes from the 5th param of DisplayButton().
     */
    .buttons,
    div.buttons {
        display: flex;
        flex-flow: row wrap;   /* allow inline buttons to flow horizontally */
        gap: 8px;
        margin: 10px 0;
        overflow: visible;
        align-items: stretch;
        justify-content: flex-start;
    }

    /* Native <button> elements remain primary-styled (filled) on mobile */
    .buttons button,
    .buttons button[type] {
        float: none !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        margin: 0 !important;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 16px;
        text-align: center;
    }

    /* All a_button variants share the same touch geometry + reset */
    .buttons .a_button,
    .buttons a.a_button {
        float: none !important;
        display: block !important;
        box-sizing: border-box;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        min-height: 44px;
        font-size: 16px !important;
        font-weight: bold !important;
        text-align: center !important;
        text-decoration: none !important;
        line-height: 1.3 !important;
    }
    .buttons .a_button img {
        vertical-align: middle;
        margin-right: 6px;
    }

    /* --- primary : filled brand red ----------------------------------- */
    .buttons .a_button--primary,
    .buttons a.a_button--primary {
        background: var(--brand-red, #b00b19) !important;
        background-image: none !important;
        color: #ffffff !important;
        border: 1px solid var(--brand-red, #b00b19) !important;
    }
    .buttons .a_button--primary:hover,
    .buttons .a_button--primary:focus {
        background: #8d0915 !important;
        color: #ffffff !important;
    }

    /* --- secondary : outlined brand red, full-width ------------------- */
    .buttons .a_button--secondary,
    .buttons a.a_button--secondary {
        background: transparent !important;
        background-image: none !important;
        color: var(--brand-red, #b00b19) !important;
        border: 1px solid var(--brand-red, #b00b19) !important;
    }
    .buttons .a_button--secondary:hover,
    .buttons .a_button--secondary:focus {
        background: var(--brand-red, #b00b19) !important;
        color: #ffffff !important;
    }

    /* --- secondary-inline : same look as secondary, but auto width ---- */
    /* Multiple of these wrap horizontally on the same row (and break to
     * a new row when there's no more space). Use it for groups of sibling
     * actions: "Add wine / Add spirit / Add beer / Add mead". */
    .buttons .a_button--secondary-inline,
    .buttons a.a_button--secondary-inline {
        background: transparent !important;
        background-image: none !important;
        color: var(--brand-red, #b00b19) !important;
        border: 1px solid var(--brand-red, #b00b19) !important;
        width: auto !important;
        flex: 0 1 auto;
        min-width: 130px;
        padding: 8px 14px !important;
        font-size: 15px !important;
    }
    .buttons .a_button--secondary-inline:hover,
    .buttons .a_button--secondary-inline:focus {
        background: var(--brand-red, #b00b19) !important;
        color: #ffffff !important;
    }

    /* --- link : text-only, no background, underlined ------------------ */
    .buttons .a_button--link,
    .buttons a.a_button--link {
        background: transparent !important;
        background-image: none !important;
        border: none !important;
        color: var(--brand-red, #b00b19) !important;
        font-size: 14px !important;
        font-weight: normal !important;
        text-decoration: underline !important;
        min-height: 36px;
        padding: 6px 10px !important;
    }
    .buttons .a_button--link:hover,
    .buttons .a_button--link:focus {
        color: #7c050e !important;
        text-decoration: none !important;
        background: transparent !important;
    }
    .buttons .a_button--link img {
        display: none !important;
    }

    /* --- danger : destructive (delete) -------------------------------- */
    .buttons .a_button--danger,
    .buttons a.a_button--danger {
        background: #ffffff !important;
        background-image: none !important;
        color: #7c050e !important;
        border: 1px solid #7c050e !important;
    }
    .buttons .a_button--danger:hover,
    .buttons .a_button--danger:focus {
        background: #7c050e !important;
        color: #ffffff !important;
    }

    /* -- Blocks ----------------------------------------------------------- */
    .reg_bloc,
    .reg_regfile {
        margin: 10px 0;
        padding: 12px;
    }

    /* -- Defensive box-sizing on key containers -------------------------- */
    /* style2025.css sets #wrapper { width: 100%; padding: 0 12px; border: 5px }
     * without box-sizing: border-box, which makes the wrapper ~34px wider than
     * the viewport on phones and causes everything inside to appear shifted
     * right. Force border-box on the major containers to fix it. */
    #wrapper,
    #content,
    .reg_bloc,
    .reg_regfile {
        box-sizing: border-box;
        max-width: 100%;
    }
}

/* ============================================================================
 * Belt-and-suspenders: explicit desktop rules with !important.
 * Guarantee correct rendering even with a stale cached copy of an earlier
 * version of this file.
 * ============================================================================ */
@media (min-width: 861px) {
    .burger-toggle  { display: none !important; }
    .menu-backdrop  { display: none !important; }
}