/* ==========================================================================
   Allergen information (/allergens). Loaded only by
   front_end/allergens/index.blade.php. Tokens and the Style One title
   (.dh-section-title) come from css/design-system.css.

   The title, the allergen chart and the kitchen's notice, centred. Fluid
   throughout: the chart's phone layout is chosen by its <picture>.
   ========================================================================== */

/* The page is short: on a tall screen (an iPad Pro upright) it ends above the
   bottom of the viewport, and the canvas below the footer continues its red
   instead of showing the legacy body's grey. */
html {
    background: var(--dh-surface-brand);
}

/* White, not the legacy body's grey: the chart is drawn on white. */
.dh-allergens {
    padding-block: clamp(56px, 6vw, 96px);
    background: var(--dh-surface-page);
    font-family: var(--dh-font);
    color: var(--dh-text-primary);
}

.dh-allergens__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 3vw, 44px);
    text-align: center;
}

.dh-allergens .dh-section-title {
    margin: 0;
}

/* The design's 900px slot. Both images have at least twice the pixels they
   are shown at, so they stay sharp on high-density screens. */
.dh-allergens__chart {
    display: block;
    width: 100%;
    max-width: 900px;
}

.dh-allergens__chart img {
    display: block;
    width: 100%;
    height: auto;
}

/* Style Three — the centred supporting paragraph. */
.dh-allergens__note {
    max-width: 620px;
    margin: 0;
    font: var(--dh-weight-regular) 19px/1.55 var(--dh-font);
    color: var(--dh-text-secondary);
    text-wrap: pretty;
}