/**
 * [menu_long_page] — one long Menu / Catering page.
 *
 * Layout follows the Cheesecake Factory menu page from the addendum:
 * a title row, a sticky category bar with an underline indicator, a centred
 * search block, then one section per category with two columns of cards whose
 * image sits on the right. Colours are Aladdin's, not the reference site's.
 */

.mlp {
    --mlp-red: #973921;
    --mlp-red-dark: #7d2f1b;
    --mlp-gold: #b59460;
    --mlp-border: #e2d7c0;
    --mlp-ink: #3f391b;
    --mlp-brown: #52463c;
    --mlp-cream: #fbf8f4;
    --mlp-bar-bg: #f1e7d6;
    /* Both set by the script. --mlp-header-offset is how far down the admin
       bar and the site's sticky header reach; --mlp-bar-height adds our own
       bar on top of that. */
    --mlp-header-offset: 0px;
    --mlp-bar-height: 0px;

    color: var(--mlp-ink);
    background-color: var(--mlp-cream);
    font-family: "Interstate Condensed Regular", "Interstate Condensed", sans-serif;

    /* The wrapper itself breaks out to the full viewport width, once. The
       blocks inside then only need padding. Previously each block broke out
       on its own while this element clipped its overflow, which sliced the
       section headings off at the left edge on narrow screens. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: clip;
}

/* One shared gutter, so the title, the category bar, the search and the
   sections all line up however the Elementor container is padded. */
.mlp-head,
.mlp-bar,
.mlp-hero,
.mlp-sections {
    padding-left: max(16px, calc(50vw - 620px));
    padding-right: max(16px, calc(50vw - 620px));
}

/* ========================================
   Title row (scrolls away)
   ======================================== */

.mlp-head {
    background-color: #fff;
    padding-top: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--mlp-border);
}

.mlp-head__inner {
    display: flex;
    flex-wrap: wrap;
    /* Baseline, not centre. Centring lines up the boxes, but the title's box
       is much taller than its letters, so the intro looked to float above the
       heading. Baseline puts the intro's first line on the same line as the
       title's letters, which is what reads as aligned. */
    align-items: centre;
    gap: 16px 32px;
}

.mlp-head__title {
    margin: 0;
    flex: 0 0 auto;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 44px;
    line-height: 1.05;
    color: var(--mlp-ink);
}

.mlp-head__intro {
    /* Capped so it wraps to two short lines beside the title, as on the
       reference, instead of stretching across the whole row. */
    flex: 1 1 260px;
    max-width: 420px;
    margin: 0 !important;
    font-size: 16px;
    line-height: 1.5;
    color: var(--mlp-brown);
    text-wrap: pretty;
}

/* Qualified with the tag so these beat the theme's content-area link color
   (.entry-content a), which was painting dark red text on the red button. */
.mlp a.mlp-head__cta {
    flex: 0 0 auto;
    /* The button is a block, so keep it centred in the row rather than
       sitting on the text baseline. */
    align-self: center;
    margin-left: auto;
    display: inline-block;
    padding: 14px 30px;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background-color: var(--mlp-red);
    border-radius: 2px;
}

.mlp a.mlp-head__cta:hover,
.mlp a.mlp-head__cta:focus-visible {
    color: #fff;
    background-color: var(--mlp-red-dark);
}

/* ========================================
   Sticky category bar
   ======================================== */

.mlp-bar {
    position: sticky;
    /* Set by the script: the height of the WP admin bar plus the site's own
       sticky header, so this bar parks underneath them instead of behind. */
    top: var(--mlp-header-offset, 0px);
    z-index: 30;
    background-color: var(--mlp-bar-bg);
}

/* The theme styles bare <button> elements with a solid brand background, which
   turned our arrows and the "View all categories" link into brown pills with
   brown text on them. Reset them back to plain text buttons. */
.mlp button.mlp-bar__arrow,
.mlp button.mlp-bar__all {
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    text-shadow: none;
    /* The theme sets white button text, which was nearly invisible on the
       tan bar. Dark ink on #f1e7d6 clears WCAG AA comfortably. */
    color: var(--mlp-ink);
}

/* Reads as a real control rather than stray text: bold, separated from the
   category strip by a rule, and underlined on hover. */
.mlp button.mlp-bar__all {
    margin-left: 4px;
    padding: 0 2px 0 18px;
    border-left: 1px solid rgba(82, 70, 60, 0.3);
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.mlp button.mlp-bar__all:hover,
.mlp button.mlp-bar__all:focus-visible,
.mlp button.mlp-bar__all[aria-expanded="true"] {
    color: var(--mlp-red);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.mlp button.mlp-bar__arrow:hover,
.mlp button.mlp-bar__arrow:focus,
.mlp button.mlp-bar__all:hover,
.mlp button.mlp-bar__all:focus {
    background-color: transparent;
    background-image: none;
    color: var(--mlp-red);
}

.mlp-bar__inner {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.mlp-bar__arrow {
    flex: 0 0 auto;
    width: 26px;
    min-width: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    color: var(--mlp-ink);
    background: none;
    border: none;
    cursor: pointer;
}

.mlp-bar__arrow[hidden] {
    display: none;
}

.mlp-bar__arrow:hover {
    color: var(--mlp-red);
}

.mlp-bar__all {
    flex: 0 0 auto;
    padding: 0 0 0 18px;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mlp-ink);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.mlp-bar__all:hover,
.mlp-bar__all[aria-expanded="true"] {
    color: var(--mlp-red);
}

/* ---- Chip strip ---- */

.mlp-cats {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

/* Fade the trailing edge while there is more to scroll to, so it is obvious
   the strip swipes. The script adds .is-at-end when it is fully scrolled. */
.mlp-cats.is-overflowing:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, #000 82%, transparent 100%);
}

.mlp-bar__all-short {
    display: none;
}

.mlp-cats::-webkit-scrollbar {
    display: none;
}

.mlp-cats__list {
    display: flex;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mlp-cats__item {
    margin: 0;
    flex: 0 0 auto;
}

.mlp-cats__link {
    display: block;
    padding: 18px 0 16px;
    white-space: nowrap;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mlp-ink);
    border-bottom: 2px solid transparent;
}

.mlp-cats__link:hover,
.mlp-cats__link:focus-visible {
    color: var(--mlp-red);
}

/* The underline that tracks the section you are reading. */
.mlp-cats__link.is-active {
    color: var(--mlp-ink);
    border-bottom-color: var(--mlp-ink);
}

.mlp-cats__link.is-dimmed {
    opacity: 0.35;
}

/* ---- View all categories panel ---- */

.mlp-allcats {
    padding: 20px 0 24px;
    border-top: 1px solid rgba(181, 148, 96, 0.5);
}

.mlp-allcats[hidden] {
    display: none;
}

.mlp-allcats__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mlp-allcats__link {
    display: block;
    padding: 4px 0;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mlp-ink);
}

.mlp-allcats__link:hover {
    color: var(--mlp-red);
}

.mlp-allcats__count {
    color: var(--mlp-brown);
}

/* ========================================
   Hero search
   ======================================== */

.mlp-hero {
    padding-top: 44px;
    padding-bottom: 44px;
    text-align: center;
}

.mlp-hero__title {
    margin: 0 0 24px;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 38px;
    line-height: 1.1;
    color: var(--mlp-ink);
}

.mlp-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 620px;
    margin: 0 auto;
}

.mlp-search__input {
    width: 100%;
    margin: 0;
    padding: 14px 76px 14px 18px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px; /* 16px stops iOS zooming the page on focus */
    color: var(--mlp-ink);
    background-color: #fff;
    border: 1px solid var(--mlp-gold);
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
}

.mlp-search__input:focus {
    outline: 2px solid var(--mlp-red);
    outline-offset: -1px;
}

.mlp-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.mlp-search__icon {
    position: absolute;
    right: 18px;
    display: flex;
    color: var(--mlp-red);
    pointer-events: none;
}

.mlp-search__clear {
    position: absolute;
    right: 48px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    color: #fff;
    background-color: var(--mlp-red);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.mlp-search__clear[hidden] {
    display: none;
}

.mlp-status {
    margin: 14px 0 0;
    font-size: 15px;
    color: var(--mlp-brown);
}

.mlp-status:empty {
    display: none;
}

/* ========================================
   Sections
   ======================================== */

.mlp-sections {
    /* Clearance so the floating Order Now button never covers the last card. */
    padding-bottom: 96px;
}

.mlp-section {
    padding: 40px 0 4px;
    /* Keeps headings clear of the sticky bar when jumping to a section;
       the script keeps this in step with the bar's real height. */
    scroll-margin-top: calc(var(--mlp-bar-height) + 16px);
}

.mlp-section[hidden] {
    display: none;
}

.mlp-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: 22px;
}

.mlp-section__heading {
    flex: 1 1 260px;
}

.mlp-section__title {
    margin: 0;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 40px;
    line-height: 1.1;
    color: var(--mlp-ink);
}

.mlp-section__desc {
    margin-top: 6px;
    font-size: 16px;
    color: var(--mlp-brown);
}

.mlp-section__desc p {
    margin: 0;
}

a.mlp-section__count {
    flex: 0 0 auto;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mlp-red);
    cursor: pointer;
}

a.mlp-section__count:hover,
a.mlp-section__count:focus-visible {
    color: var(--mlp-red-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Clears the single-category view set by an "All …" link. */
.mlp button.mlp-showall {
    margin-top: 14px;
    padding: 9px 20px;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--mlp-red);
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.mlp button.mlp-showall[hidden] {
    display: none;
}

.mlp button.mlp-showall:hover,
.mlp button.mlp-showall:focus-visible {
    background-color: var(--mlp-red-dark);
}

.mlp-section__empty {
    margin: 0 0 16px;
    color: var(--mlp-brown);
    font-size: 15px;
}

/* ========================================
   Item cards: text left, image right
   ======================================== */

.mlp-items {
    display: grid;
    grid-template-columns: repeat(var(--mlp-columns, 2), minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mlp-item {
    display: grid;
    grid-template-columns: 1fr 180px;
    align-items: stretch;
    min-height: 170px;
    margin: 0;
    background-color: #fff;
    border: 1px solid var(--mlp-border);
    overflow: hidden;
}

.mlp-item--no-image {
    grid-template-columns: 1fr;
}

.mlp-item[hidden] {
    display: none;
}

.mlp-item__body {
    padding: 22px 24px;
}

.mlp-item__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 21px;
    line-height: 1.2;
    color: var(--mlp-ink);
}

/* The item name links through to its own page. */
.mlp a.mlp-item__name {
    color: inherit;
    text-decoration: none;
}

.mlp a.mlp-item__name:hover,
.mlp a.mlp-item__name:focus-visible {
    color: var(--mlp-red);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.mlp-item__price {
    flex: 0 0 auto;
    color: var(--mlp-red);
}

/* Two lines maximum, then a "more…" link through to the item page. */
.mlp-item__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--mlp-brown);
}

/* Inline, directly after the text, so it continues the sentence and the card
   stays two lines tall instead of three. The script trims the text to fit. */
.mlp a.mlp-item__more {
    display: inline;
    /* A real gap, rather than relying on a trailing space in the text, which
       the browser collapses at a line end. Keeps "included." from running
       straight into "more…". */
    margin: 0 0 0 0.35em;
    font-size: inherit;
    line-height: inherit;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--mlp-red);
}

.mlp a.mlp-item__more:hover,
.mlp a.mlp-item__more:focus-visible {
    color: var(--mlp-red-dark);
}

/* The script hides this when the description was not actually trimmed. */
.mlp-item__more[hidden] {
    display: none;
}

.mlp-item__imglink {
    display: block;
    height: 100%;
}

/* Centred in its column rather than stretched, so the picture is shown whole.
   'cover' filled the full card height and cut the tops and bottoms off the
   plates; 'contain' plus height:auto never crops at any size. */
.mlp-item__media {
    align-self: center;
    padding: 14px 14px 14px 0;
}

.mlp-item__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
}

/* ---- Dietary / allergen labels ----
   Addendum 2 asks for these to be more prominent: brand red, uppercase,
   stronger weight. */

.mlp-item__labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.mlp-label {
    margin: 0;
    padding: 4px 10px;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--mlp-red);
    border-radius: 2px;
}

/* ========================================
   Back to search
   ======================================== */

.mlp-backtosearch {
    position: fixed;
    z-index: 25;
    top: calc(var(--mlp-bar-height) + 16px);
    left: max(16px, calc(50vw - 620px));
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--mlp-red);
    border: none;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    /* Must stay on one line — it wrapped to two on phones and covered the
       card underneath. */
    white-space: nowrap;
    line-height: 1.2;
}

.mlp-backtosearch[hidden] {
    display: none;
}

.mlp-backtosearch:hover,
.mlp-backtosearch:focus-visible {
    background-color: var(--mlp-red-dark);
}

.mlp-backtosearch__icon {
    display: flex;
}

/* ========================================
   Persistent Order Now button
   ======================================== */

.mlp a.mlp-order {
    position: fixed;
    z-index: 24;
    right: max(16px, calc(50vw - 620px));
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    padding: 14px 32px;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    background-color: var(--mlp-red);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.mlp a.mlp-order:hover,
.mlp a.mlp-order:focus-visible {
    color: #fff;
    background-color: var(--mlp-red-dark);
}

/* Paired with the title-row button: hidden until that one scrolls away, so
   the two are never on screen together. Hidden by default rather than shown,
   so it cannot flash before the script runs. */
.mlp a.mlp-order--toggle {
    display: none;
}

.mlp a.mlp-order--toggle.is-visible {
    display: inline-flex;
}

/* ========================================
   No results + editor notice
   ======================================== */

.mlp-noresults {
    margin: 40px 0;
    padding: 24px;
    text-align: center;
    font-size: 18px;
    color: var(--mlp-brown);
    background-color: #fff;
    border: 1px solid var(--mlp-border);
}

.mlp-notice {
    padding: 10px 14px;
    border-left: 4px solid var(--mlp-red);
    background-color: var(--mlp-cream);
    font-size: 14px;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 1024px) {
    .mlp-items {
        grid-template-columns: repeat(var(--mlp-columns-tablet, 1), minmax(0, 1fr));
    }

    /* With a full-width card there is room for a larger picture again. */
    .mlp-item__img {
        max-height: 170px;
    }

    .mlp-head__title {
        font-size: 36px;
    }

    .mlp-section__title {
        font-size: 32px;
    }

    .mlp-hero__title {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    /* Below 783px the admin bar is fixed, so sticky top 0 is correct. */
    .admin-bar .mlp-bar {
        top: 0;
    }

    .mlp-head {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .mlp-head__inner {
        gap: 12px;
    }

    /* Stack the three parts on phones: title, intro, then the button. */
    .mlp-head__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .mlp-head__title {
        font-size: 30px;
        flex: 1 1 100%;
    }

    .mlp-head__intro {
        flex: 1 1 100%;
        max-width: none;
        font-size: 15px;
    }

    .mlp a.mlp-head__cta {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

    /* No room for the arrows on a phone -- the strip is swiped instead -- but
       "View all" stays, so every category is still reachable. */
    .mlp-bar__arrow {
        display: none;
    }

    .mlp-bar__all-long {
        display: none;
    }

    .mlp-bar__all-short {
        display: inline;
    }

    .mlp button.mlp-bar__all {
        padding-left: 12px;
        font-size: 13px;
    }

    .mlp-cats__list {
        gap: 20px;
    }

    .mlp-cats__link {
        padding: 14px 0 12px;
        font-size: 13px;
    }

    .mlp-hero {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .mlp-hero__title {
        font-size: 26px;
        margin-bottom: 18px;
    }

    .mlp-items {
        grid-template-columns: repeat(var(--mlp-columns-mobile, 1), minmax(0, 1fr));
        gap: 16px;
    }

    .mlp-item {
        grid-template-columns: 1fr 120px;
        min-height: 128px;
    }

    .mlp-item__body {
        padding: 16px 16px;
    }

    .mlp-item__media {
        padding: 10px 10px 10px 0;
    }

    .mlp-item__img {
        max-height: 110px;
    }

    .mlp-item__title {
        font-size: 18px;
    }

    .mlp-item__desc,
    .mlp a.mlp-item__more {
        font-size: 15px;
    }

    .mlp-section {
        padding-top: 30px;
    }

    .mlp-section__title {
        font-size: 26px;
    }

    .mlp-section__count {
        font-size: 13px;
    }

    .mlp-backtosearch {
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 18px;
        font-size: 13px;
        letter-spacing: 0.06em;
    }

    .mlp a.mlp-order {
        right: 16px;
        bottom: 16px;
        padding: 12px 24px;
        font-size: 14px;
    }

    /* Room so the floating button never sits on the last card. */
    .mlp-sections {
        padding-bottom: 76px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .mlp-cats__link,
    .mlp-head__cta,
    .mlp-backtosearch {
        transition: none;
    }
}