/*  ********************************************************************************  **
**  ********************************************************************************  **

    Set up our sites variables.

**  ********************************************************************************  **
**  ********************************************************************************  */

:root {
    --eat-colour-primary: #E2542C;
    --eat-colour-primary-dark: #C84420;
    --eat-colour-primary-light: #FCE9E3;
    --eat-colour-primary-hover: #EB704F;
    --eat-colour-rating: #F39A24;
    --eat-colour-text: #333333;
    --eat-colour-text-light: #777777;
    --eat-colour-white: #FFFFFF;
    --eat-colour-very-light-grey: #FDFDFD;
    --eat-colour-off-white: #F7F6F4;
    --eat-colour-light-grey: #E9E9E7;
    --eat-colour-black: #0B0C0D;
    --eat-colour-dark-grey: #2B2E33;
    --eat-colour-banner-background: var(--eat-colour-dark-grey);
    --eat-font-family: "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif;
    --eat-font-size-p: 17px;
    --eat-font-size-h6: 17px;
    --eat-font-size-h5: 18px;
    --eat-font-size-h4: 20px;
    --eat-font-size-h3: 23px;
    --eat-font-size-h2: clamp(24px, 3.4vw, 30px);
    --eat-font-size-h1: clamp(30px, 5vw, 42px);
    --eat-font-line-height-standard: 1.5em;
    --eat-font-line-height-small: 1.25em;
    --eat-font-line-height-narrow: 1.1em;
    --eat-spacing-base: 10px;
    --eat-container-padding-x: 5%;
    --eat-container-padding-y: calc(var(--eat-spacing-base) * 2);
    --eat-container-max-width: 1200px;
    --eat-slick-arrow-size: 26px;
    --eat-slick-arrow-offset: 10px;
    --eat-banner-overlay-opacity: 0.35;
    --eat-banner-min-height: 140px;
    --eat-banner-min-height-image: 280px;
    --eat-logo-height-header: 40px;
    --eat-colour-accent: #21ADAE;
    --eat-colour-accent-dark: #00888A;
    --eat-colour-accent-hover: #50BEBF;
    --eat-colour-accent-light: #E0F7F7;
    --eat-colour-bg: #FFFFFF;
    --eat-colour-surface: #FFFFFF;
    --eat-colour-surface-soft: #F7F4EE;
    --eat-colour-border: #E1DFDB;
    /*  Fraunces: a warm, high-contrast serif with a little wonk in it. It
        carries the headings against Manrope, which is quiet enough on the
        body to let it. Loaded in Setup::enqueueFonts ().  */
    --eat-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --eat-radius: 8px;
    --eat-radius-lg: 16px;
    --eat-radius-pill: 999px;
    --eat-card-padding: 15px;
    --eat-shadow: 0 1px 2px rgba(11, 12, 13, 0.04), 0 4px 14px rgba(11, 12, 13, 0.06);
    --eat-shadow-lg: 0 6px 18px rgba(11, 12, 13, 0.10), 0 2px 6px rgba(11, 12, 13, 0.06);
    --eat-transition: 0.2s ease;
}









/*  ********************************************************************************  **
**  ********************************************************************************  **

    Site Styles

**  ********************************************************************************  **
**  ********************************************************************************  */




/*  ********************************************************************************  **

    Fonts

**  ********************************************************************************  */

p, 
li,
.p {
    font-size: var(--eat-font-size-p);
    line-height: var(--eat-font-line-height-standard);
    margin: 20px 0;
}
li {
    margin: 10px 0;
}
h6,
 .h6 {
    font-size: var(--eat-font-size-h6);
    line-height: var(--eat-font-line-height-standard);
    font-weight: 500;
    margin: 20px 0;
}
h5,
.h5 {
    font-size: var(--eat-font-size-h5);
    line-height: var(--eat-font-line-height-standard);
    font-weight: 500;
    margin: 20px 0;
}
h4,
.h4 {
    font-size: var(--eat-font-size-h4);
    line-height: var(--eat-font-line-height-standard);
    font-weight: 500;
    margin: 20px 0;
}
h3,
.h3 {
    font-size: var(--eat-font-size-h3);
    line-height: var(--eat-font-line-height-small);
    font-weight: 600;
    margin: 30px 0 20px 0;
}
h2,
.h2 {
    font-size: var(--eat-font-size-h2);
    line-height: 1.18;
    font-weight: 700;
    margin: 30px 0 20px 0;
}
h1,
.h1 {
    font-size: var(--eat-font-size-h1);
    line-height: 1.08;
    font-weight: 700;
    margin: 30px 0 20px 0;
}

p:first-child,
li:first-child,
h6:first-child,
h5:first-child,
h4:first-child,
h3:first-child,
h2:first-child,
h1:first-child {
    margin-top: 0;
}
p:last-child,
li:last-child,
h6:last-child,
h5:last-child,
h4:last-child,
h3:last-child,
h2:last-child,
h1:last-child {
    margin-bottom: 0;
}




/*  ********************************************************************************  **

    Containers

**  ********************************************************************************  */

.fuse-container {
    margin: 0;
    padding: var(--eat-container-padding-y) var(--eat-container-padding-x);
}
.fuse-container > .wrap {
    margin: 0 auto;
    padding: 0;
    max-width: var(--eat-container-max-width);
}

.fuse-container.narrow {
    padding-left: calc(var(--eat-container-padding-x) * 2);
    padding-right: calc(var(--eat-container-padding-x) * 2);
}
.fuse-container.thin {
    padding-left: calc(var(--eat-container-padding-x) * 4);
    padding-right: calc(var(--eat-container-padding-x) * 4);
}




/*  ********************************************************************************  **

    Standard HTML Tags

**  ********************************************************************************  */

body {
    background: var(--eat-colour-bg);
    color: var(--eat-colour-text);
    font-family: var(--eat-font-family);
    font-size: var(--eat-font-size-p);
    line-height: var(--eat-font-line-height-standard);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--eat-colour-accent-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--eat-transition);
}
a:hover {
    color: var(--eat-colour-primary-hover);
}

a,
button {
    transition: all 0.2s;
}




/*  ********************************************************************************  **

    Header

**  ********************************************************************************  */

#site-header.fuse-container {
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--eat-colour-surface);
    border-bottom: 1px solid var(--eat-colour-border);
    box-shadow: var(--eat-shadow);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: transform 0.25s ease;
}
#site-header.fuse-container > .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#eat-header-logo {
    display: block;
    width: auto;
    height: var(--eat-logo-height-header);
}




/*  ********************************************************************************  **

    Menus

**  ********************************************************************************  */

/* **********  Mobile toggle button  **********  */

button#menu-toggle {
    border: none;
    background: transparent;
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
button#menu-toggle .bar {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 9000px;
    background: var(--eat-colour-primary);
}
button#menu-toggle:hover .bar {
    background: var(--eat-colour-primary-hover);
}




/*  **********  Desktop menu  **********  */

#eat-header-menu {
    display: none;
}

.sf-menu,
.sf-menu li {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}
.sf-menu {
    float: none;
}
.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu ul li,
.sf-menu ul li:hover,
.sf-menu ul li.sfHover,
.sf-menu ul ul li,
.sf-menu ul ul li:hover,
.sf-menu ul ul li.sfHover {
    background: transparent;
}




/*  **********  First level  **********  */

.sf-menu li a {
    display: block;
    width: auto;
    line-height: var(--eat-logo-height-header);
    padding: 0 10px;
    background: transparent;
    color: var(--eat-colour-text);
    font-size: var(--eat-font-size-p);
    font-weight: 600;
    border: none;
    border-radius: var(--eat-radius);
    transition: color var(--eat-transition), background var(--eat-transition);
}
.sf-menu li a:hover,
.sf-menu li.current-menu-item > a,
.sf-menu li.current-menu-parent > a,
.sf-menu li.current-menu-ancestor > a {
    background: transparent;
    color: var(--eat-colour-primary);
}




/*  **********  Sub levels  **********  */

.sf-menu ul {
    padding: 5px 0;
    background: var(--eat-colour-surface);
    border: 1px solid var(--eat-colour-border);
    border-radius: var(--eat-radius);
    box-shadow: var(--eat-shadow-lg);
    overflow: hidden;
}
.sf-menu ul li a {
    padding: 5px 20px;
    font-size: 0.9em;
    line-height: 1.1em;
}




/*  ********************************************************************************  **

    Footer

**  ********************************************************************************  */

#site-footer.fuse-container {
    background: var(--eat-colour-dark-grey);
    color: var(--eat-colour-white);
}




/*  ********************************************************************************  **

    Footer Credits Bar

**  ********************************************************************************  */

#site-credits.fuse-container {
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--eat-colour-dark-grey);
    color: var(--eat-colour-white);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
#site-credits.fuse-container > .wrap {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 5px;
}
#site-credits.fuse-container p {
    margin: 0;
    padding: 0;
    font-size: calc(var(--eat-font-size-p) * 0.8);
    line-height: var(--eat-font-line-height-small);
    text-align: center;
    color: var(--eat-colour-white);
}
#site-credits.fuse-container a {
    color: var(--eat-colour-primary-light);
    text-decoration: none;
}
#site-credits.fuse-container a:hover {
    color: var(--eat-colour-primary-light);
    text-decoration: underline;
}




/*  ********************************************************************************  **

    Breadcrumbs

**  ********************************************************************************  */

/*  The breadcrumb band is spaced tighter than a full content band -- the
    fuse-container's vertical padding scales up hard at the wide breakpoints,
    so it is pinned to 10px top and bottom here.  */
.fuse-container.eat-breadcrumbs-container {
    padding-top: 10px;
    padding-bottom: 10px;
}

.eat-breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9em;
    line-height: 1;
    text-align: left;
}

/*  A separator between crumbs, drawn rather than typed so it is not read out
    and cannot be selected as text.  */
/*  The item margins are zeroed on purpose: the theme's global li rules give
    list items vertical margins, and its li:first-child / li:last-child rules
    make those margins asymmetric per item -- which, with align-items: center,
    sits each crumb at a slightly different height and steps the row. Flat
    margins keep every crumb on one centred line.  */
.eat-breadcrumbs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.eat-breadcrumbs-item:not(:first-child)::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid var(--eat-colour-text-light);
    border-right: 2px solid var(--eat-colour-text-light);
    transform: rotate(45deg);
}

.eat-breadcrumbs-item a {
    color: var(--eat-colour-text-light);
    text-decoration: none;
}
.eat-breadcrumbs-item a:hover,
.eat-breadcrumbs-item a:focus {
    color: var(--eat-colour-accent);
}

.eat-breadcrumbs-item [aria-current="page"] {
    color: var(--eat-colour-text);
    font-weight: 600;
}




/*  ********************************************************************************  **

    Feature Banner

**  ********************************************************************************  */

.eat-feature-banner {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    min-height: var(--eat-banner-min-height);
    background-color: var(--eat-colour-banner-background);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--eat-colour-white);
    padding-top: var(--eat-spacing-base);
    padding-bottom: var(--eat-spacing-base);
    border-radius: 0;
}

/*  With no image the banner is just the title on the flat colour, so it sits
    truly centred -- both paddings off, so nothing offsets it within the height.  */
.eat-feature-banner:not(.has-image) {
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
}

/*  With a picture behind it the banner stands taller, so as much of the image
    shows as the shape allows.  */
.eat-feature-banner.has-image {
    min-height: var(--eat-banner-min-height-image);
}

/*  The banner colour laid back over the picture, so the image reads through it
    and the title keeps its contrast whatever the photograph is doing.  */
.eat-feature-banner.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--eat-colour-banner-background);
    opacity: var(--eat-banner-overlay-opacity);
}

.eat-feature-banner > .wrap {
    position: relative;
    width: 100%;
}

.eat-feature-banner .page-title {
    margin: 0;
    color: var(--eat-colour-white);
    text-wrap: pretty;
    font-family: var(--eat-font-display);
    letter-spacing: normal;
}

.eat-feature-banner .page-description {
    font-weight: 400;
}




/*  ********************************************************************************  **

    Archive Pages

**  ********************************************************************************  */

.eat-archive-container {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--eat-spacing-base);
    row-gap: calc(var(--eat-spacing-base) * 1.5);
}

/*  Space the sort filter off the listing beneath it.  */
.venue-archive-filter {
    padding-bottom: var(--eat-spacing-base);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eat-spacing-base);
}

/*  The location's own content area is centred within its thin column.  */
.eat-location-content {
    text-align: center;
}

/*  A showcase page's content sits centred in its thin column.  */
.eat-page-content {
    text-align: center;
}

.eat-archive-container img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.3 / 1;
    object-fit: cover;
}


/*  Venues carry the treatment their homepage block uses, so a venue looks the
    same in a listing wherever it appears. Scoped to the venue rather than the
    container, so ordinary posts keep the ratio above.  */
.eat-archive-container .type-venue img {
    aspect-ratio: 3 / 2;
}
.eat-archive-container .entry-title {
    margin: 10px 0;
}
.eat-archive-container .entry-title a {
    text-decoration: none;
    color: var(--eat-colour-black);
}
.eat-archive-container .entry-title a:hover,
.eat-archive-container .entry-title a:focus {
    color: var(--eat-colour-primary);
}



/*  What a venue serves, above the write-up.  */
.eat-venue-meta {
    margin-bottom: 20px;
}

/*  The location trail in the contact column, under the address. The venue's own
    suburb leads it, so that is the one set in the text colour and in bold; the
    places containing it stay muted behind it.  */
.eat-venue-contact .eat-venue-location {
    margin-bottom: 20px;
}
.eat-venue-location-current a {
    color: var(--eat-colour-text);
    font-weight: 600;
}

.eat-venue-cuisines {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.eat-venue-cuisines li {
    margin: 0;
}

/*  The venue's location, small and muted, sitting just under its name.  */
.eat-venue-card-location {
    margin: 0;
    font-size: 0.85em;
    color: var(--eat-colour-text-light);
}


/*  The rating + cuisine overlay on a venue card. The star rule is here rather
    than in posttype_venue.css because that file only loads on a single venue,
    and the card shows in the archives and on a location too.  */
.eat-venue-card-media {
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
}

.eat-venue-card-image {
    display: block;
}

.eat-venue-card-overlay {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;

    /*  A little shade top and bottom so gold stars and the tags read over a
        pale photograph.  */
    background: linear-gradient(
        to bottom,
        rgba(11, 12, 13, 0.35),
        rgba(11, 12, 13, 0) 30%,
        rgba(11, 12, 13, 0) 60%,
        rgba(11, 12, 13, 0.45)
    );

    /*  The overlay must not steal clicks from the image link beneath it; the
        cuisine tags turn pointer events back on for themselves.  */
    pointer-events: none;
}

.eat-rating-stars {
    --eat-rating-max: 5;

    display: inline-block;
    width: calc(1em * var(--eat-rating-max));
    height: 1em;
    background: linear-gradient(
        to right,
        var(--eat-colour-rating) calc(100% * var(--eat-rating, 0) / var(--eat-rating-max)),
        var(--eat-colour-light-grey) calc(100% * var(--eat-rating, 0) / var(--eat-rating-max))
    );
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 15.27 16.18 19l-1.64-7.03L20 7.24l-7.19-.61L10 0 7.19 6.63 0 7.24l5.46 4.73L3.82 19z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 15.27 16.18 19l-1.64-7.03L20 7.24l-7.19-.61L10 0 7.19 6.63 0 7.24l5.46 4.73L3.82 19z'/%3E%3C/svg%3E");
    -webkit-mask-size: 1em 1em;
    mask-size: 1em 1em;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
}

.eat-venue-card-cuisines {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: auto;
}
.eat-venue-card-cuisines li {
    margin: 0;
}

/*  Cuisine tags: the house button, shrunk to a small tag.  */
.eat-venue-card-cuisines .button.eat-tag,
.eat-post-card-categories .button.eat-tag,
.eat-venue-cuisines .button.eat-tag {
    padding: 3px 8px;
    border-radius: var(--eat-radius-pill);
    font-size: 0.7em;
    line-height: 1.4;
    box-shadow: none;
}


/*  Locations carry the homepage carousel's treatment for the same reason: the
    same image ratio, the same grey placeholder where a location has no image,
    and the same title under it. One across on mobile, three from tablet up --
    the lists stop at three where the homepage carousel goes on to six.  */
.eat-location-list-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--eat-spacing-base);
}

/*  Post cards.

    The same card as a location -- picture, overlay, title beneath, no excerpt --
    with the venue count swapped for the publication date, and the post's
    categories as small buttons beside it.  */

.eat-archive-container .type-post {
    display: flex;
    flex-direction: column;
    background: var(--eat-colour-surface);
    border: 1px solid var(--eat-colour-border);
    border-radius: var(--eat-radius-lg);
    overflow: hidden;
    box-shadow: var(--eat-shadow);
    transition: box-shadow var(--eat-transition);
}
.eat-archive-container .type-post:hover {
    box-shadow: var(--eat-shadow-lg);
}

.eat-post-card-media {
    position: relative;
    overflow: hidden;
}

.eat-post-card-image {
    display: block;
}

/*  The picture grows a little on hover, clipped by the media so the card itself
    stays put.  */
.eat-archive-container .type-post .eat-post-card-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.eat-archive-container .type-post:hover .eat-post-card-media img {
    transform: scale(1.05);
}

.eat-post-card-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--eat-colour-light-grey);
}

/*  The date sits at one end and the categories at the other. The overlay takes
    no clicks, so the picture behind it is still a link; the category buttons
    take theirs back.  */
.eat-post-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    background: linear-gradient(to bottom, rgba(11, 12, 13, 0) 55%, rgba(11, 12, 13, 0.4));
    pointer-events: none;
}

.eat-date-tag {
    display: inline-block;
    padding: 3px 8px;
    background: var(--eat-colour-primary);
    color: var(--eat-colour-white);
    border-radius: var(--eat-radius-pill);
    font-size: 0.7em;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.eat-post-card-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: auto;
}
.eat-post-card-categories li {
    margin: 0;
}

.eat-archive-container .type-post .entry-title {
    margin: 0;
    padding: var(--eat-card-padding);
    font-family: var(--eat-font-display);
    font-weight: 600;
}

.eat-location-list-link {
    display: block;
    text-decoration: none;
    color: var(--eat-colour-text);
    background: var(--eat-colour-surface);
    border: 1px solid var(--eat-colour-border);
    border-radius: var(--eat-radius-lg);
    overflow: hidden;
    box-shadow: var(--eat-shadow);
    transition: box-shadow var(--eat-transition);
}
.eat-location-list-link:hover h2,
.eat-location-list-link:focus h2 {
    color: var(--eat-colour-primary);
}

.eat-location-list-link img,
.eat-location-list-placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.eat-location-list-placeholder {
    background: var(--eat-colour-light-grey);
}

.eat-location-list-link h2 {
    margin: 0;
    font-weight: 600;
    padding: var(--eat-card-padding);
    font-family: var(--eat-font-display);
}




/*  ********************************************************************************  **

    FAQs

**  ********************************************************************************  */

.fuse-faqs-container {
    margin: 0;
    padding: 0;
}
.fuse-faq-container {
    margin: 0;
    padding: 20px 0;
    border-top: 1px solid var(--eat-colour-light-grey);
}
.fuse-faq-container:last-child {
    border-bottom: 1px solid var(--eat-colour-light-grey);
}

.fuse-faq-container h6 {
    margin: 0;
    cursor: pointer;
    padding-right: 30px;
    position: relative;
}
.fuse-faq-container h6::after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    content: "▼";
    text-align: right;
    color: var(--eat-colour-primary);
    font-size: calc(var(--eat-font-size-h6) * 0.7);
}
.fuse-faq-container.active h6::after {
    content: "▲";
}

.fuse-faq-answer {
    padding-top: 20px;
}




/*  ********************************************************************************  **

    Buttons

**  ********************************************************************************  */

.wp-block-buttons {
    margin: var(--eat-spacing-base) 0;
    gap: 10px;
}
.wp-block-buttons:first-child {
    margin-top: 0;
}
.wp-block-buttons:last-child {
    margin-bottom: 0;
}


button,
a.button,
.wp-block-button a,
.block-editor-rich-text__editable.wp-element-button {
    margin: 0;
    padding: 11px 22px;
    background: var(--eat-colour-primary);
    color: var(--eat-colour-white);
    border: 1px solid var(--eat-colour-primary);
    border-radius: var(--eat-radius-pill);
    font-weight: 600;
    text-transform: none;
    font-size: var(--eat-font-size-p);
    text-decoration: none;
    letter-spacing: 0.01em;
    box-shadow: var(--eat-shadow);
    transition: background var(--eat-transition), box-shadow var(--eat-transition), transform var(--eat-transition);
}
button:not(.slick-arrow):hover,
a.button:hover,
.wp-block-button:hover a,
.block-editor-rich-text__editable.wp-element-button:hover {
    background: var(--eat-colour-primary-hover);
    color: var(--eat-colour-white);
    border: 1px solid var(--eat-colour-primary-hover);
    box-shadow: var(--eat-shadow-lg);
    transform: translateY(-1px);
}

button.outline,
a.button.outline,
.wp-block-button.outline a,
.outline .block-editor-rich-text__editable.wp-element-button {
    background: var(--eat-colour-white);
    color: var(--eat-colour-black);
    border: 1px solid var(--eat-colour-primary);
}
button.outline:hover,
a.button.outline:hover,
.wp-block-button.outline:hover a,
.outline .block-editor-rich-text__editable.wp-element-button:hover {
    background: var(--eat-colour-white);
    color: var(--eat-colour-primary-hover);
    border: 1px solid var(--eat-colour-primary-hover);
}




/*  ********************************************************************************  **

    Backgrounds

**  ********************************************************************************  */

.background-off-white {
    background-color: var(--eat-colour-off-white);
}




/*  ********************************************************************************  **

    Slick Slider arrows

    Slick outputs plain buttons reading "Previous" and "Next", which the button
    rules above would otherwise turn into full-sized primary buttons. These are
    circles with a chevron instead, sitting on the left and right edges of the
    slider and centred vertically.

    Only slick.css is loaded, not slick-theme.css, so there is nothing else
    styling these and no need to undo anything first.

**  ********************************************************************************  */

.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--eat-slick-arrow-size);
    height: var(--eat-slick-arrow-size);
    padding: 0;
    margin: 0;

    background: var(--eat-colour-primary);
    border: 0;
    border-radius: 50%;

    /*  The label stays in the markup for screen readers; only its size goes.  */
    font-size: 0;
    line-height: 0;

    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

/*  Pulled out past the slider by the offset, so the arrow overhangs the edge
    rather than clearing it entirely.  */
.slick-prev {
    left: calc(var(--eat-slick-arrow-offset) * -1);
}
.slick-next {
    right: calc(var(--eat-slick-arrow-offset) * -1);
}

.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
    background: var(--eat-colour-primary-hover);
}

.slick-prev.slick-disabled,
.slick-next.slick-disabled {
    opacity: 0.3;
}

/*  The chevron: two sides of a square, turned to point.  */
.slick-prev::before,
.slick-next::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--eat-colour-white);
    border-right: 2px solid var(--eat-colour-white);
}

.slick-prev::before {
    /*  Nudged right so the chevron reads as centred rather than measuring as it.  */
    margin-left: 2px;
    transform: rotate(-135deg);
}
.slick-next::before {
    margin-right: 2px;
    transform: rotate(45deg);
}








/*  ********************************************************************************  **

    Advertising

**  ********************************************************************************  */




/*  An ad unit, wherever it comes from -- an automatic placement or a Banner Ad
    block. Centred, with the same vertical rhythm as a columns block.

    overflow: hidden matters: a fixed unit wider than the space it is given
    would otherwise push the page sideways on a phone, and a horizontal scroll
    bar on every page is a worse problem than a clipped ad.  */
.eat-ad {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: calc(var(--eat-spacing-base) * 2) 0;
    max-width: 100%;
    overflow: hidden;
}
.eat-ad:first-child {
    margin-top: 0;
}
.eat-ad:last-child {
    margin-bottom: 0;
}

/*  AdSense writes its own inline width and height onto the <ins>, so the only
    job here is to stop it overflowing.  */
.eat-ad .adsbygoogle {
    max-width: 100%;
}

/*  What the editor sees in place of a live ad. Sized like the real unit so the
    layout reads true, but obviously not an advertisement.  */
.eat-ad-placeholder {
    min-height: 90px;
    border: 1px dashed var(--eat-colour-text-light);
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.03) 10px,
        rgba(0, 0, 0, 0.03) 20px
    );
}
.eat-ad-placeholder-label {
    padding: var(--eat-spacing-base);
    font-size: 0.8rem;
    text-align: center;
    opacity: 0.7;
}




/*  ********************************************************************************  **

    Block editor blocks

**  ********************************************************************************  */




/*  Columns.

    Core leaves the block with no gap of its own -- block gap comes from
    theme.json and this is a classic theme -- and gives it a flat 1.75em bottom
    margin with nothing on top, written as :where() so it carries no
    specificity. Both are put on the theme's spacing scale here, so a columns
    block breathes the same amount as everything else on the page and grows
    with the breakpoint rather than staying at one fixed size.

    One gap value covers both axes, which matters below 782px where core forces
    the columns to wrap and the row gap is what separates them.  */
.wp-block-columns {
    gap: var(--eat-spacing-base);
    margin: calc(var(--eat-spacing-base) * 2) 0;
}
.wp-block-columns:first-child {
    margin-top: 0;
}
.wp-block-columns:last-child {
    margin-bottom: 0;
}




/*  ********************************************************************************  **
**  ********************************************************************************  **
    
    Responsive Media Queries
    
    Responsive breakpoints:
        xs      < 576px
        s       >= 576px
        m       >= 768px
        l       >= 992px
        xl      >= 1200px
        xxl     >= 1450px

**  ********************************************************************************  **
**  ********************************************************************************  */




/*  ********************************************************************************  **

    Custom to over-ride Gutenberg settings

**  ********************************************************************************  */

@media screen and (max-width: 992px) {
	
	
	
}

@media screen and (min-width: 783px) {
	
	
	
}




/*  ********************************************************************************  **

    Small - 576px

**  ********************************************************************************  */

@media screen and (min-width: 576px) {
    
	
    
}




/*  ********************************************************************************  **

    Medium - 768px

**  ********************************************************************************  */

@media screen and (min-width: 768px) {

    /*  **********************************************************************  **

        Variables

    **  **********************************************************************  */

    :root {

        /*  **********  Layout  **********  */

        --eat-spacing-base: 20px;

        --eat-banner-min-height: 180px;
        --eat-banner-min-height-image: 420px;

    }


	
	/*  **********************************************************************  **

        Archive Pages

    **  **********************************************************************  **/

    .eat-archive-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .eat-location-list-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
}





/*  ********************************************************************************  **

    Large - 992px

**  ********************************************************************************  */

@media screen and (min-width: 992px) {

    /*  **********************************************************************  **

        Variables

    **  **********************************************************************  */

    :root {

        /*  **********  Layout  **********  */

        --eat-spacing-base: 40px;

    }



	
	/*  **********************************************************************  **

        Menus

    **  **********************************************************************  **/

    /*  **********  Mobile toggle  **********  */

    button#menu-toggle {
        display: none;
    }




    /*  **********  Desktop menu  **********  */

    #eat-header-menu {
        display: block;
    }



	
	/*  **********************************************************************  **

        Archive Pages

    **  **********************************************************************  **/

    .eat-archive-container {
        grid-template-columns: repeat(3, 1fr);
    }
    
}




/*  ********************************************************************************  **

    Extra Large - 1200px

**  ********************************************************************************  */

@media screen and (min-width: 1200px) {
	
	/*  **********************************************************************  **

        Variables

    **  **********************************************************************  */

    :root {

        /*  **********  Layout  **********  */

        --eat-spacing-base: 60px;

        --eat-banner-min-height: 200px;
        --eat-banner-min-height-image: 380px;

    }




    /*  **********************************************************************  **

        Feature Banner

    **  **********************************************************************  */

    /*  On desktop an image banner is shallower and its title steps up to about
        twice the size, held to half the inner width so it reads as a heading
        over the picture rather than a full-width band.  */
    .eat-feature-banner.has-image .page-title {
        font-size: calc(var(--eat-font-size-h1) * 2);
        max-width: 50%;
    }

}




/*  ********************************************************************************  **

    Extra Extra Large - 1450px

**  ********************************************************************************  */

@media screen and (min-width: 1450px) {
	
	
    
}





/*  ********************************************************************************  **

    Re-skin

    The modern, bright treatment: added accent and surface colours, the display
    and body type pairing, and the card, comment and footer styling built on
    top of the base rules above.

**  ********************************************************************************  */





/*  ********************************************************************************  **

    Base

**  ********************************************************************************  */

/*  Bring the content bands closer together on desktop. The parent's vertical
    rhythm (container top/bottom padding = spacing-base x 2) grows to 120px at the
    widest breakpoint; this pulls it back to about two-thirds (x 1.33) from the
    laptop breakpoint up, leaving horizontal spacing and the mobile/tablet rhythm
    as they were.  */
@media screen and (min-width: 992px) {
    :root {
        --eat-container-padding-y: calc(var(--eat-spacing-base) * 1.33);
        --eat-card-padding: 20px;
    }
}
a:hover,
a:focus {
    color: var(--eat-colour-accent);
}

::selection {
    background: var(--eat-colour-accent-light);
}

img {
    max-width: 100%;
    height: auto;
}




/*  ********************************************************************************  **

    Typography

**  ********************************************************************************  */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--eat-font-display);
    letter-spacing: normal;
    text-wrap: balance;
    color: var(--eat-colour-text);
    margin: 14px 0;

    /*  Fraunces' own axes. opsz lets it set its contrast to the size it is
        drawn at; SOFT rounds the terminals a little; WONK swaps in the
        alternate, slightly off-kilter letterforms that give the face its
        character. Ignored by any fallback serif.  */
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 30, "WONK" 1;
}

p {
    text-wrap: pretty;
}

/*  A secondary button style on the teal accent, for anything marked .accent.  */
a.button.accent,
.wp-block-button.accent a {
    background: var(--eat-colour-accent);
    border-color: var(--eat-colour-accent);
    color: var(--eat-colour-white);
}
a.button.accent:hover,
.wp-block-button.accent:hover a {
    background: var(--eat-colour-accent-dark);
    border-color: var(--eat-colour-accent-dark);
    color: var(--eat-colour-white);
}

/*  eatSetupStickyHeader () adds this as the reader scrolls, and takes it off again
    when they turn around. The header keeps its place in the flow either way --
    it is sticky, not fixed -- so nothing below it jumps when it slides away.  */
#site-header.fuse-container.eat-header-hidden {
    transform: translateY(-100%);
}

/*  Anyone who has asked for less movement gets the header appearing and
    disappearing outright, with no slide.  */
@media (prefers-reduced-motion: reduce) {
    #site-header.fuse-container {
        transition: none;
    }
}




/*  ********************************************************************************  **

    Listings — venue and location cards

**  ********************************************************************************  */

/*  Venue cards become real cards: white, rounded, a hairline border and a soft
    shadow that lifts on hover. The image sits flush to the top; the text is
    padded in.  */
.eat-archive-container .type-venue {
    display: flex;
    flex-direction: column;
    background: var(--eat-colour-surface);
    border: 1px solid var(--eat-colour-border);
    border-radius: var(--eat-radius-lg);
    overflow: hidden;
    box-shadow: var(--eat-shadow);
    transition: box-shadow var(--eat-transition);
}
.eat-archive-container .type-venue:hover {
    box-shadow: var(--eat-shadow-lg);
}
/*  Hovering anywhere on the card turns its title the primary colour.  */
.eat-archive-container .type-venue:hover .entry-title a {
    color: var(--eat-colour-primary);
}
.eat-archive-container .type-venue > *:not(.eat-venue-card-media) {
    padding-left: var(--eat-card-padding);
    padding-right: var(--eat-card-padding);
}
.eat-archive-container .type-venue .entry-title {
    margin-top: var(--eat-card-padding);
}
.eat-archive-container .type-venue > :last-child {
    margin-bottom: 0;
    padding-bottom: var(--eat-card-padding);
}

/*  The feature image grows a little on hover. The media clips it, so the card
    itself stays put — no bounce.  */
.eat-venue-card-media img {
    transition: transform 0.35s ease;
}
.eat-archive-container .type-venue:hover .eat-venue-card-media img {
    transform: scale(1.05);
}

/*  The "View all venues" button closing the Best Rated, Most Popular and Last
    Visited pages. Centred under the grid, and set off from it by the standard
    container rhythm. The bottom margin is left to the theme, which already
    zeroes it as the last child of the band.  */
.eat-venue-showcase-more {
    margin-top: var(--eat-spacing-base);
    text-align: center;
}
.eat-location-list-link:hover {
    box-shadow: var(--eat-shadow-lg);
}

/*  A small venue-count tag over the location image, in the same style as the
    cuisine tags on venue cards.  */
.eat-location-card-media {
    position: relative;
    overflow: hidden;
}

/*  The location image grows a little on hover, clipped by the media.  */
.eat-location-card-media img {
    transition: transform 0.35s ease;
}
.eat-location-list-link:hover .eat-location-card-media img {
    transform: scale(1.05);
}
.eat-location-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10px;
    background: linear-gradient(to bottom, rgba(11, 12, 13, 0) 55%, rgba(11, 12, 13, 0.4));
    pointer-events: none;
}
.eat-count-tag {
    display: inline-block;
    padding: 3px 8px;
    background: var(--eat-colour-primary);
    color: var(--eat-colour-white);
    border-radius: var(--eat-radius-pill);
    font-size: 0.7em;
    font-weight: 600;
    line-height: 1.4;
}

/*  The home page's locations area runs four across on desktop (other location
    lists stay at three).  */
@media screen and (min-width: 992px) {
    .eat-locations-4up {
        grid-template-columns: repeat(4, 1fr);
    }
}

/*  The home-page venue columns use the shared venue card, but stacked one per
    row inside their narrow column rather than the archive's multi-column grid.
    A tight row gap keeps each column reading as one defined list.  */
.eat-venue-column-list .eat-archive-container {
    grid-template-columns: 1fr;
    gap: 16px;
}

/*  Locations carousel. The prev/next arrows are centred at 50% of the carousel,
    so they only stay put if every slide is the same height. The image is a fixed
    ratio, so the one thing that varies is the title wrapping to a second line at
    some widths — giving the title a consistent height evens the cards out and
    keeps the arrows still. A little padding on the track window stops the card
    shadow being clipped at the bottom.  */
.eat-location-carousel {
    position: relative;
}
/*  Give the card titles a consistent height so every slide's card matches.  */
.eat-location-carousel .eat-location-list-link h2 {
    min-height: 2.4em;
}




/*  ********************************************************************************  **

    Filters & form controls

**  ********************************************************************************  */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background: var(--eat-colour-surface);
    border: 1px solid var(--eat-colour-border);
    border-radius: var(--eat-radius);
    padding: 9px 12px;
    color: var(--eat-colour-text);
    font-family: inherit;
    transition: border-color var(--eat-transition), box-shadow var(--eat-transition);
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--eat-colour-accent);
    box-shadow: 0 0 0 3px var(--eat-colour-accent-light);
}
.venue-archive-filter label {
    font-weight: 600;
    font-size: var(--eat-font-size-h6);
}




/*  ********************************************************************************  **

    Posts

**  ********************************************************************************  */

/*  A post is read down the page, so its measure is narrower than the site's own
    1200px -- long lines are hard to track back from at the end of each one.  */
.fuse-container > .wrap.eat-post-content {
    max-width: 800px;
}

/*  Pictures fill the measure, with room to breathe above and below and the
    same corner radius as the rest of the site.  */
.eat-post-content img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--eat-radius);
}
.eat-post-content figure,
.eat-post-content .wp-caption {
    margin: 0;
    padding: 30px 0;
}

/*  An image written without a figure around it -- the classic editor did that --
    takes the same spacing as margin, since padding on an image would sit inside
    the rounded corner rather than around it.  */
.eat-post-content > img,
.eat-post-content > p > img {
    margin: 30px 0;
}

/*  A captioned picture reads as one object: the caption is a dark bar sitting
    flush under the image, so the rounding is split between them -- the top two
    corners on the picture, the bottom two on the caption, and none where they
    meet.  */
.eat-post-content figure:has(figcaption) img,
.eat-post-content .wp-caption img {
    border-radius: var(--eat-radius) var(--eat-radius) 0 0;
}

/*  Smaller than the body copy and heavier, so it reads as a label rather than
    as more of the prose. No margin above it: any gap would break the two
    apart.  */
.eat-post-content figcaption,
.eat-post-content .wp-caption-text {
    margin: 0;
    padding: 10px 15px;
    background: var(--eat-colour-dark-grey);
    color: var(--eat-colour-white);
    border-radius: 0 0 var(--eat-radius) var(--eat-radius);
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.4;
}

/*  ********************************************************************************  **

    Comments

**  ********************************************************************************  */

/*  The comments sit flat on the page -- no border, no shadow, no background of
    their own, so the page white shows through. All the spacing around them
    comes from the .fuse-container the child's comments.php wraps them in, the
    same as every other band on the site, so the area itself carries none.  */
.comments-area {
    padding: 0;
    margin: 0;
}
.comment-reply-title,
.comments-title {
    font-family: var(--eat-font-display);
    margin-top: 0;
}
.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}




/*  ********************************************************************************  **

    Review points block

**  ********************************************************************************  */

.eat-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--eat-spacing-base) * 2);
    text-align: center;
}
@media screen and (min-width: 576px) {
    .eat-points {
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (min-width: 992px) {
    .eat-points {
        grid-template-columns: repeat(4, 1fr);
    }
}

.eat-point {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*  Every icon sits in the same fixed-size area so the columns line up and the
    spacing stays even whatever each icon's shape is. The icon itself is capped
    well under the 120px maximum.  */
.eat-point-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
    color: var(--eat-colour-primary);
}
.eat-point-icon svg {
    width: 88px;
    height: 88px;
    max-width: 120px;
    max-height: 120px;
}

.eat-point-title {
    margin: 0 0 6px;
    font-family: var(--eat-font-display);
    font-size: var(--eat-font-size-h4);
}
.eat-point-tagline {
    margin: 0;
    max-width: 24ch;
    color: var(--eat-colour-text-light);
    font-size: 0.9em;
    line-height: 1.4;
}

/*  Three footer columns: brand, locations, policies & contact. They stack on
    small screens and become 50 / 25 / 25 on desktop.  */
.eat-footer-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--eat-spacing-base) * 2);
}
@media screen and (min-width: 992px) {
    .eat-footer-columns {
        grid-template-columns: 2fr 1fr 1fr;
        align-items: start;
    }
}

.eat-footer-logo {
    display: block;
    width: auto;
    height: var(--eat-logo-height-header);
    margin-bottom: 12px;
}
.eat-footer-tagline {
    margin: 0;
    font-family: var(--eat-font-display);
    font-size: var(--eat-font-size-h5);
    line-height: 1.3;
    color: var(--eat-colour-white);
    max-width: 24em;
}

.eat-footer-heading {
    margin: 0 0 12px;
    font-family: var(--eat-font-display);
    font-size: var(--eat-font-size-h5);
    color: var(--eat-colour-white);
}

.eat-footer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.eat-footer-menu li {
    margin: 0 0 8px;
}
.eat-footer-menu li:last-child {
    margin-bottom: 0;
}

/*  All footer links: white, no underline, primary on hover.  */
#site-footer a,
#site-credits.fuse-container a {
    color: var(--eat-colour-white);
    text-decoration: none;
}
#site-footer a:hover,
#site-footer a:focus,
#site-credits.fuse-container a:hover,
#site-credits.fuse-container a:focus {
    color: var(--eat-colour-primary);
}

/*  The two credit lines stack on small screens; from large tablets up they sit
    on one row, pushed to the left and right edges.  */
@media screen and (min-width: 992px) {
    #site-credits.fuse-container > .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--eat-spacing-base);
    }
}
.comment-list .children {
    list-style: none;
    margin: 10px 0 0;
    /*  padding-left is left at the browser default so WordPress's reply
        indentation is preserved.  */
}
.comment-list li.comment {
    margin: 0 0 10px;
    padding: 0;
}

/*  Each comment is a two-column row: the avatar in a fixed left column, and
    everything else -- name, date, content, reply -- in the column beside it.
    The avatar is taken out of flow and pinned to the left so the whole of the
    rest of the comment lines up as a single right-hand column.  */
/*  A hairline around the top, bottom and right, and a thicker bar down the left
    that the author/admin rule below re-colours. Standard comments keep the same
    bar in grey, so every comment is outlined and none of the text shifts.  */
.comment-body {
    position: relative;
    min-height: 70px;
    padding: 10px 10px 10px 70px;
    border: 1px solid var(--eat-colour-border);
    border-left: 3px solid var(--eat-colour-border);
    border-radius: var(--eat-radius);
}
.comment-author img.avatar {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.comment-author,
.comment-metadata {
    margin: 0;
}

/*  The date is supporting detail, so it is set smaller and quieter than the
    name above it.  */
.comment-metadata,
.comment-metadata a,
.comment-metadata time {
    font-size: calc(var(--eat-font-size-p) * 0.8);
    line-height: 1.4;
    color: var(--eat-colour-text-light);
    text-decoration: none;
}
.comment-content {
    margin-top: 6px;
}

/*  A comment left by the post author or by an administrator is given a soft
    tint and an accent edge to set it apart from members' comments.  */
.comment-list li.bypostauthor > .comment-body,
.comment-list li.comment-by-admin > .comment-body {
    background: var(--eat-colour-accent-light);
    border-left: 3px solid var(--eat-colour-accent);
}

/*  The reply link as a small button.  */
.reply {
    margin-top: 8px;
}
.comment-reply-link,
.comment-reply-login {
    display: inline-block;
    padding: 4px 12px;
    background: var(--eat-colour-accent);
    color: #fff;
    font-size: calc(var(--eat-font-size-p) * 0.8);
    line-height: 1.5;
    border-radius: var(--eat-radius-pill);
    text-decoration: none;
    transition: background-color var(--eat-transition);
}
.comment-reply-link:hover,
.comment-reply-link:focus,
.comment-reply-login:hover,
.comment-reply-login:focus {
    background: var(--eat-colour-accent-hover);
    color: #fff;
}

/*  The "add a comment" form is its own area below the thread, set apart by a
    soft panel and a clear gap above it. Inside a comment (a threaded reply) the
    form sits in the flow instead, so the panel is dropped there.  */
.comment-respond {
    /*  A fixed gap, not the scaling --eat-spacing-base: that token reaches 40px
        and 60px at the wider breakpoints, which doubled to a 120px chasm above
        the form.  */
    margin-top: 40px;
    padding: var(--eat-card-padding);
    background: var(--eat-colour-surface-soft);
    border: 1px solid var(--eat-colour-border);
    border-radius: var(--eat-radius);
}
.comment-list .comment-respond {
    margin-top: 10px;
    padding: 0;
    background: none;
    border: 0;
}
.comment-respond .comment-reply-title {
    margin-top: 0;
}

/*  Each field sits underneath its own label, not beside it.  */
.comment-form p {
    margin: 0 0 14px;
}
/*  The submit paragraph is the last thing shown, but WordPress prints a hidden
    input and a script after it, so :last-child never reaches it. Name it
    directly, or its margin stacks on top of the panel's bottom padding.  */
.comment-form p:last-child,
.comment-form .form-submit {
    margin-bottom: 0;
}
.comment-form label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}
/*  border-box keeps the field's own padding and border inside the 100% width,
    so it sits within the form panel instead of overflowing it. The theme sets
    border-box only on a couple of elements, not globally.  */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/*  The consent tick keeps its label beside it — the box belongs with its words.  */
.comment-form .comment-form-cookies-consent label {
    display: inline;
    margin-bottom: 0;
    font-weight: normal;
}

/*  The submit control is an <input>, not a <button>, so it does not pick up the
    site's button styling on its own. Give it the same primary treatment.  */
.comment-form input[type="submit"] {
    margin: 0;
    padding: 11px 22px;
    background: var(--eat-colour-primary);
    color: var(--eat-colour-white);
    border: 1px solid var(--eat-colour-primary);
    border-radius: var(--eat-radius-pill);
    font-family: inherit;
    font-size: var(--eat-font-size-p);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--eat-shadow);
    transition: background var(--eat-transition), box-shadow var(--eat-transition), transform var(--eat-transition);
}
.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus {
    background: var(--eat-colour-primary-hover);
    border-color: var(--eat-colour-primary-hover);
    color: var(--eat-colour-white);
    box-shadow: var(--eat-shadow-lg);
    transform: translateY(-1px);
}