/* What the chosen design needs in order to be a real page rather than a mock.
 *
 * libs/css/v33.css is the authored stylesheet, copied out of the approved
 * source without a single edit, so that the built page can be compared with
 * it line by line. Everything below is the site's own: the few rules that
 * follow from the branch switch and the language switch being ordinary form
 * submissions here instead of page-local script, so that both work with no
 * JavaScript at all and leave a real address behind them.
 */

/* The forms are plumbing, not layout: each one lets its children sit exactly
   where the design puts them. */
.atelier-header .lang-form {
    display: contents;
}

form.location-options,
form.location-cards {
    margin: 0;
}

/* A submit button carries no link styling of its own. */
.location-card,
.branch-chooser .location-options button,
.language-toggle {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* The chooser's rows are grids in the design; a <small> that is missing — a
   branch with no recorded address — must not leave the name off-centre. */
.atelier-header .branch-chooser .location-options button > small:only-of-type {
    justify-self: end;
}

/* The field behind the branch that has not opened sits inside its own panel,
   which is where the design puts it once that branch is chosen. */
.branch-message > #emeraldField {
    display: block;
}

/* ------------------------------------------------- menu, as real requests */

.category-nav button,
.menu-go {
    font: inherit;
    cursor: pointer;
}

/* Searching and choosing a category are submissions, so each control has a
   button beside it. With JavaScript the select submits itself and these
   disappear, which is the design; without it they are how the page works. */
.menu-go {
    flex: 0 0 auto;
    border: 1px solid #647451;
    background: transparent;
    color: inherit;
    padding: 14px 18px;
    font-size: 12px;
    min-height: 50px;
    white-space: nowrap;
}

/* The category list is the control on wide screens and the select on narrow
   ones, exactly as the design switches them. */
.menu-picker {
    display: none;
    gap: 10px;
    align-items: stretch;
    margin: 0 0 10px;
}

.menu-picker .menu-select {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 760px) {
    .menu-picker {
        display: flex;
    }
}

/* A dish the owner has switched off in the panel stays on the menu and says
   so, rather than disappearing from a printed list that still has it. */
.dish[data-available="0"] .dish-name,
.dish[data-available="0"] .dish-price {
    color: #8a9280;
}

.dish-out {
    font-size: 10px;
    white-space: nowrap;
    color: #8a9280;
}

/* ---------------------------------------------------------------- gallery */

/* Each photograph is a link to the photograph, so that it opens with no
   JavaScript at all; these give the link the frame the design draws around
   its button. */
.gallery-feature a.photo-open {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ddd9ce;
    cursor: zoom-in;
}

.gallery-view .gallery-grid a.photo-open {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

.gallery-view .gallery-grid a.photo-open:hover img {
    transform: scale(1.025);
}

/* ---------------------------------------------------------------- contact */

/* The design's map is a picture of a map. Here it is the branch's own point
   on the real map, in the frame the design draws. */
.map-picture > iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}