/* ==========================================================================
   Reset / Normalize
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    line-height: 1.5;
}

canvas, iframe, img, picture, svg, video {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
    letter-spacing: 0.125rem;
}

p, h1, h2, h3, h4, h5, h6, li, dl, dt, blockquote {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* ==========================================================================
   Root
   ========================================================================== */

:root {
    /* Font families */
    --font-serif: abril-text, serif;
    --font-sans-serif: owners-text, sans-serif;

    /* Font weights */
	--weight-regular: 400;
	--weight-bold: 700;

    /* Font size */
    --font-size-medium: clamp(1.125rem, 2vw, 1.25rem);      /* ~18px → 20px */
    --font-size-regular: clamp(1rem, 1.5vw, 1rem);          /* ~16px (mostly stable) */
    --font-size-small: clamp(0.875rem, 1vw, 0.875rem);      /* ~14px (mostly stable) */
    --font-size-very-small: clamp(0.75rem, 0.8vw, 0.75rem); /* ~12px (mostly stable) */

    /* Line height */
    --line-height-regular: 1.5;
    --line-height-loose: 1.7;

    /* Letter spacing */
    --letter-spacing: 0.0625rem;

    /* Colours */
    --colour-dark: rgba(44, 32, 0, 1);
    --colour-light: rgba(255, 255, 255, 1);
    --colour-brand: rgba(199, 181, 155, 1);
    --colour-accent: rgba(88, 148, 184, 1);

    /* Backgrounds */
    --background-brand: rgba(249, 247, 245, 1);

    /* Margins */
    --margin-regular: 0 auto;

    /* Padding */
    --padding-regular: 3.125rem 1.25rem;
    --padding-content: 3.125rem 0 0 0;
    --padding-image-wall: 3.125rem 0.625rem;
    --padding-headings: 0 0 0.625rem 0;
}

@media (max-width: 40em) {
    :root {
        /* Margins */
        ---margin-regular: 3.125rem auto 0 auto;
    }
}



/* ==========================================================================
   Tags
   ========================================================================== */

body {
    color: var(--colour-dark);
    font-family: var(--font-serif);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-regular);
    font-style: normal;
    letter-spacing: var(--letter-spacing);
}

a {
    color: var(--colour-dark);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
}

a:hover {
    color: var(--colour-brand);
}

address {
    font-style: normal;
}

address p {
    margin-top: 0.625rem;
}

button {
    background: var(--colour-accent);
    border-radius: 1.25rem;
    color: var(--colour-light);
    min-width: 12.5rem;
    padding: 0.3125rem 1.25rem;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.3s;
    transition-timing-function: ease-in-out;
    width: fit-content;
}

button:hover {
    background: var(--colour-brand);
	transform: scale(1.05);
}

/* H1 – main page title */
h1 {
    color: var(--colour-dark);
    font-size: clamp(1.75rem, 5vw, 3rem); /* 28px → 48px */
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

/* H2 – section title */
h2 {
    color: var(--colour-dark);
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* 24px → 40px */
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
}

/* H3 – sub-section title */
h3 {
    color: var(--colour-dark);
    font-size: clamp(1.25rem, 3.5vw, 2rem); /* 20px → 32px */
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
}

/* H4 – smaller heading / card title */
h4 {
    color: var(--colour-dark);
    font-size: clamp(1.125rem, 3vw, 1.75rem); /* 18px → 28px */
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
}

/* H5 – minor heading / label */
h5 {
    color: var(--colour-brand);
    font-size: clamp(1.125rem, 2.5vw, 1.5rem); /* 16px → 24px */
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
}

/* H6 – small heading / caption */
h6 {
    color: var(--colour-brand);
    font-size: clamp(1.125rem, 2vw, 1.25rem); /* 14px → 20px */
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
}

input {
    border: 1px solid var(--colour-brand);
    border-radius: 1.25rem;
    padding: 0.25rem 0.625rem;
    width: 100%;
}

label {
    font-weight: var(--weight-regular) !important;
    padding: 0.625rem 0 0 1.25rem;
    text-align: left;
}

main {
    padding: 5rem 0 0 0;
}

@media (max-width: 40em) {
    main {
        padding: 3.75rem 0 0 0;
    }
}

strong {
    font-weight: var(--weight-bold);
}

textarea {
    border: 1px solid var(--colour-brand);
    border-radius: 1.25rem;
    padding: 0.25rem 0.625rem;
    width: 100%;
}


/* ==========================================================================
   Header
   ========================================================================== */

.header {
    align-items: center;
    background: rgba(255, 255, 255, 1);
    display: grid;
    gap: 2.25rem;
    grid-template-areas: "logo nav social-media book-a-table";
    grid-template-columns: auto 1fr auto auto;
    height: 5rem;
    padding: 0.625rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1;
}

@media (max-width:64em) {
    .header {
        grid-template-areas: "burger . logo social-media book-a-table";
        grid-template-columns: auto 1fr 1fr auto auto;
        gap: 1.25rem;
    }
}

@media (max-width: 48em) {
    .header {
        grid-template-areas: "burger logo social-media";
        grid-template-columns: 1fr auto 1fr;
        gap: 1.5rem;
        height: 3.75rem;
    }
}

/* Header nav */
.header-nav {
    grid-area: nav;
    justify-self: right;
}

@media (max-width:64em) {
    .header-nav {
        grid-area: unset;
        justify-self: normal;
        display: none;
    }
}

.header-nav--list {
    display: inline-block;
    list-style-type: none;
    padding: 0;
}

.header-nav--list li {
    display: inline-block;
}

.header-nav--list li + li {
    margin-left: 1.75rem;
}

/* Header social media */
.header-social-media {
    grid-area: social-media;
    justify-self: right;
}

.header-social-media--list {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    position: relative;
}

.header-social-media--list li {
    display: inline-block;
    position: relative;
    top: 0.25rem;
}

.header-social-media--list li + li {
    margin-left: 1.25rem;
}

/* Social media icons */
.social-media-icon {
    display: block;
    height: 1.5rem;
    width: auto;
}

.social-media-icon svg {
    color: var(--colour-brand);
    fill: currentColor;
    height: 100%;
    transition: all 0.3s;
    width: auto;
}

.social-media-icon:hover svg {
    color: var(--colour-dark);
    fill: currentColor;
}

@media (max-width: 64em) {
    .social-media-icon--instagram, .social-media-icon--facebook {
        display: none
    }
}

.social-media-icon--whatsapp {
	animation: whatsapp-wiggle 10s infinite;
    animation-delay: 5s; /* wait 5s before first run */
	display: inline-block;
    transform-origin: center;
}

/* Wiggle keyframes */
@keyframes whatsapp-wiggle {
	0%   { transform: scale(1) rotate(0deg); }
	5%   { transform: scale(1.2) rotate(10deg); }
	10%  { transform: scale(1.2) rotate(-10deg); }
	15%  { transform: scale(1.2) rotate(10deg); }
	20%  { transform: scale(1) rotate(0deg); }
	100% { transform: scale(1) rotate(0deg); } /* Rest period */
}

/* Hover-triggered animation */
.social-media-icon--whatsapp:hover {
	animation: whatsapp-hover .8s ease-in-out;
	transform: scale(1.2);
}

/* Hover keyframes */
@keyframes whatsapp-hover {
	0%   { transform: scale(1.2) rotate(0deg); }
	25%  { transform: scale(1.2) rotate(10deg); }
	50%  { transform: scale(1.2) rotate(-10deg); }
	75%  { transform: scale(1.2) rotate(10deg); }
	100% { transform: scale(1.2) rotate(0deg); }
}

/* Header book a table panel */
.header-book-a-table {
    grid-area: book-a-table;
    justify-self: right;
}

@media (max-width: 48em) {
    .header-book-a-table {
        grid-area: unset;
        display: none;
    }
}

/* Logo */
.logo {
    display: block;
    grid-area: logo;
    height: 3.75rem;
    width: auto;
}

@media (max-width:64em) {
    .logo {
        justify-self: center; /* Display logo in centre on mobile */
    }
}

@media (max-width: 48em) {
    .logo {
        height: 2.5rem;
    }
}

.logo svg {
    height: 100%;
    width: auto;
}

/* Burger */
.burger {
	cursor: pointer;
	display: none;
	grid-area: burger;
	height: 1.25rem;   /* total height of burger */
	width: 2.25rem;    /* total width of burger */
}

@media (max-width:64em) {
	.burger {
		align-items: center; /* keeps spans centered */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
}

.burger span {
	background: var(--colour-brand);
	border-radius: 2px;
	display: block;
	height: 2px;          /* line thickness */
	transition: all 0.3s ease;
	transform-origin: center; /* rotate around center */
	width: 100%;              /* full width in burger state */
}

/* Animate to cross */
.burger.open span:nth-child(1) {
	transform: translateY(0.5625rem) rotate(45deg);  /* moves down into center */
	width: 80%;
}

.burger.open span:nth-child(2) {
	opacity: 0;
}

.burger.open span:nth-child(3) {
	transform: translateY(-0.5625rem) rotate(-45deg); /* moves up into center */
	width: 80%;
}

/* Hover effect */
.burger:hover span {
	background: var(--colour-dark);
}

/* ==========================================================================
   Floating call to action
   ========================================================================== */

.call-to-action--floating {
    bottom: 0.625rem;
    display: none;
    left: 0;
    margin: 0 auto;
    position: fixed;
    right: 0;
    width: fit-content;
    z-index: 1;
}

@media (max-width: 40em) {
    .call-to-action--floating {
        display: block;
    }
}

/* Mobile nav */
.mobile-nav {
    background: rgba(255, 255, 255, 1);
    display: none;
    height: 100%;
    left: 0;
    padding: 6.25rem 1.25rem;
    overflow-y: scroll;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
}

.mobile-nav.open {
	display: block;
}

@media (min-width:64em) {
	.mobile-nav.open {
		display: none;
	}
}

.mobile-nav--list {
    display: inline-block;
    list-style-type: none;
    padding: 0;
}

/* ==========================================================================
   Book a table panel
   ========================================================================== */

.book {
    background: rgba(255, 255, 255, 1);
    display: none;
    height: 100%;
    left: 0;
    padding: 6.25rem 1.25rem;
    overflow-y: scroll;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 2;
}

.header-book {
    align-items: center;
    background: rgba(255, 255, 255, 1);
    display: grid;
    gap: 2.25rem;
    grid-template-areas: "cross .";
    grid-template-columns: auto 1fr;
    height: 3.75rem;
    left: 0;
    padding: 0 1.25rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}

.cross {
	align-items: center; /* keeps spans centered */
	cursor: pointer;
    display: flex;
	grid-area: cross;
	height: 1.25rem;   /* total height of cross */
    position: relative;
	width: 2.25rem;    /* total width of cross */
}

.cross span {
	background: var(--colour-brand);
	height: 0.125rem;   /* thickness of the lines */
	left: 50%;
	position: absolute;
	top: 50%;
	transform-origin: center;
	width: 80%;
}

.cross span:first-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

.cross span:last-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Hover effect */
.cross:hover span {
	background: var(--colour-dark);
}

.panel-book-a-table {
    width: 100%;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    align-items: top;
    background: rgba(255, 255, 255, 1);
    border-top: 25px solid var(--colour-accent);
    color:  var(--colour-brand);
    display: grid;
    font-size: var(--font-size-small);
    gap: 1.25rem 2.25rem;
    grid-template-areas: "opening-hours nav social-media contact" "policies policies policies copyright";
    grid-template-columns: minmax(20rem, 1fr) 1fr 1fr 1fr;
    grid-template-rows: auto;
    line-height: var(--line-height-loose);
    padding: 3.125rem 1.25rem;
    width: 100%;
}

@media (max-width:64em) {
    .footer {
        grid-template-areas: "nav social-media" "opening-hours contact" "policies copyright";
        grid-template-columns: 1fr minmax(20rem, 20rem);
    }

}

@media (max-width:40em) {
    .footer {
        grid-template-areas: "nav nav" "opening-hours opening-hours" "social-media social-media" "contact contact" "policies copyright";
        grid-template-columns: 1fr ;
        gap: 2.25rem 1.25rem;
    }
}

.footer h6 {
    color: var(--colour-dark);
    margin-bottom: 0.3125rem;
}

.footer-nav {
    grid-area: nav;
    justify-self: left;
}

.footer-nav--list {
    display: inline-block;
    list-style-type: none;
    padding: 0;
}

.footer-nav--list li {
    display: block;
    margin-bottom: 0;
}

.footer-nav--list li:last-child {
    margin-bottom: 0;
}

.footer-nav--policies {
    display: block;
    list-style-type: none;
    padding: 0;
}

.footer-nav--policies li {
    display: inline-block;
    margin-bottom: 0;
}

.footer-nav--policies li + li {
    margin-left: 1.25rem;
}

@media (max-width:40em) {
    .footer-nav--policies li + li {
        margin-left: 0
    }

    .footer-nav--policies li {
        margin-right: 0.3125rem;
    }

    .footer-nav--policies li:last-child {
        margin-right: 0;
    }
}

.footer-policies {
    font-size: var(--font-size-very-small);
    grid-area: policies;
    justify-self: left;
}

/* Contact information */
.footer-information {
    grid-area: contact;
    justify-self: left;
}

@media (max-width:40em) {
    .footer-information {
        justify-self: center;
        text-align: center;
    }

    .footer-information .logo {
        display: inline-block;
        margin: auto;
        width: fit-content;
    }

}

.footer-social-media {
    grid-area: social-media;
    justify-self: left;
}

@media (max-width:40em) {
    .footer-social-media {
        background: var(--colour-accent);
        border-radius: 1.25rem;
        justify-self: center;
        padding: 1.25rem;
        text-align: center;
    }

    .footer-social-media button {
        background-color: var(--colour-brand);
    }

    .footer-social-media button:hover {
        background-color: var(--colour-dark);
    }

    .footer-social-media h6 {
        color: var(--colour-light);
    }

    .footer-social-media svg {
        color: var(--colour-brand);
    }
}

/* Footer social media */
.footer-social-media--list {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    position: relative;
}

.footer-social-media--list li {
    display: inline-block;
    position: relative;
    top: 0.25rem;
}

.footer-social-media--list li + li {
    margin-left: 1.25rem;
}

.footer-opening-hours {
    align-items: top;
    display: grid;
    gap: 0 2.25rem;
    grid-area: opening-hours;
    grid-template-areas: "heading heading" "days hours";
    grid-template-columns: auto auto;
    grid-template-rows: auto 1fr;
    justify-self: left;
}

@media (max-width:40em) {
    .footer-opening-hours {
        justify-self: center;
        width: 100%;
    }
}

.footer-opening-hours--heading {
    grid-area: heading;
}

.footer-opening-hours--days {
    grid-area: days;
}

.footer-opening-hours--hours {
    grid-area: hours;
}

@media (max-width:40em) {
    .footer-opening-hours--hours {
        justify-self: right;
    }
}

.today {
    color: var(--colour-accent);
}

.copyright {
    font-size: var(--font-size-very-small);
    grid-area: copyright;
    justify-self: right;
}

.newsletter {
    margin-top: 1.25rem;
}

.newsletter input {
    margin: 0.625rem auto;
}

.newsletter label {
    padding: 0;
}

.small-button {
    background: var(--colour-accent);
    border-radius: 1.25rem;
    color: var(--colour-light);
    font-size: var(--font-size-small);
    min-width: 10rem;
    padding: 0.2734375rem 1.09375rem;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.3s;
    transition-timing-function: ease-in-out;
    width: fit-content;
}

.small-button button:hover {
    background: var(--colour-brand);
}

.newsletter-list-groups {
    display: none;
}

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

.hero-full-screen {
    height: calc(100vh - 5rem);
    overflow: hidden;
    position: relative;
    width: 100%;
}

@media (max-width: 40em) {
    .hero-full-screen {
        height: calc(60vh - 3.75rem);
    }
}

.hero-full-screen img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hero-letterbox {
    height: calc(60vh - 5rem);
    overflow: hidden;
    position: relative;
    width: 100%;
}

@media (max-width: 40em) {
    .hero-letterbox {
        height: calc(60vh - 3.75rem);
    }
}

.hero-letterbox img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hero-full-screen video {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

/* Hero carousel */
.hero-carousel {
	position: relative;
	height: calc(100vh - 5rem);
	width: 100%;
	overflow: hidden;
	--total-slides: 3;      /* overridden by Twig */
	--slide-duration: 4s;   /* duration each slide is visible */
}

@media (max-width: 40em) {
	.hero-carousel {
		height: calc(60vh - 3.75rem);
	}
}

.hero-carousel-cell {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation-name: fade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: calc(var(--total-slides) * var(--slide-duration));
	animation-delay: calc(var(--index) * var(--slide-duration));
}

.hero-carousel-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* seamless fade keyframes */
@keyframes fade {
	0% { opacity: 0; }
	10% { opacity: 1; }
	30% { opacity: 1; }
	40% { opacity: 0; }
	100% { opacity: 0; }
}

/* ==========================================================================
   Introduction
   ========================================================================== */

.introduction {
    color: var(--colour-dark);
    font-size: var(--font-size-regular);
    font-family: var(--font-serif);
    line-height: var(--line-height-regular);
    margin: var(--margin-regular);
    max-width: 70rem;
    padding: var(--padding-regular);
    text-align: center;
    width: 100%;
}

.introduction p {
    color: var(--colour-brand);
    font-size: var(--font-size-medium);
    margin-top: 1.25rem;
}

/* Desktop bullets */
.introduction ul {
    display: inline-flex;      /* inline row for bullets */
    flex-wrap: wrap;           /* wrap if needed */
    justify-content: center;   /* center horizontally */
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;          /* align li content inside each */
}

.introduction li {
    align-items: center;       /* vertical centering */
    color: var(--colour-brand);
    display: flex;             /* align bullet and text */
    font-size: var(--font-size-medium);
    margin: 0 1rem 0 0;         /* spacing */
    position: relative;
    padding-left: 1.2rem;       /* space for bullet */
}

.introduction li::before {
    content: "•";
    color: var(--colour-accent);
    font-size: var(--font-size-medium);
    left: 0;
    line-height: 1;
    position: absolute;
}

/* Eyebrow */
.introduction .eyebrow {
    color: var(--colour-brand);
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-small);
    margin-top: 0;
    text-transform: uppercase;
}

/* Mobile adjustments */
@media (max-width: 40em) {

    .introduction ul {
        align-items: center;      /* center horizontally */
        display: flex;
        flex-direction: column;   /* stack bullets vertically */
        margin: 0;
        padding-left: 0;
    }

    .introduction p + u {
        margin-bottom: 0;
    }

    .introduction li {
        align-items: center;      /* vertical center bullet with text */
        display: flex;
        margin: 0.25rem 0;         /* spacing between items */
        padding-left: 1.2rem;
        position: relative;
    }

    .introduction li::before {
        margin-right: 0.4rem;      /* spacing between bullet and text */
        position: relative;       /* flex handles vertical centering */
        top: 0;                   /* no vertical offset needed */
    }
}

/* ==========================================================================
   Content
   ========================================================================== */

.content {
    color: var(--colour-dark);
    font-size: var(--font-size-regular);
    font-family: var(--font-serif);
    line-height: var(--line-height-regular);
    margin: var(--margin-regular);
    max-width: 70rem;
    padding: var(--padding-regular);
    text-align: center;
    width: 100%;
}

.content p {
    color: var(--colour-brand);
    font-size: var(--font-size-medium);
    margin-top: 1.25rem;
}

.content > p:first-of-type {
    margin-top: 0;
}

.content h2 {
    padding: var(--padding-headings);
}

.content h3 {
    padding: var(--padding-content);
}

/* Desktop bullets */
.content ul {
    align-items: center;
    display: inline-flex;      /* inline row for bullets */
    flex-direction: column;
    flex-wrap: wrap;           /* wrap if needed */
    justify-content: center;   /* center horizontally */
    list-style: none;
    margin: 1.25rem 0 0 0;
    padding: 0;
    text-align: left;          /* align li content inside each */
}

.content li {
    align-items: center;       /* vertical centering */
    color: var(--colour-brand);
    display: flex;             /* align bullet and text */
    font-size: var(--font-size-medium);
    margin: 0.5rem 1rem 0 0;         /* spacing */
    position: relative;
    padding-left: 1.2rem;       /* space for bullet */
}

.content li::before {
    content: "•";
    color: var(--colour-accent);
    font-size: var(--font-size-medium);
    left: 0;
    line-height: 1;
    position: absolute;
}

/* Eyebrow */
.content .eyebrow {
    color: var(--colour-brand);
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-small);
    text-transform: uppercase;
}

/* Mobile adjustments */
@media (max-width: 40em) {
    .content ul {
        display: flex;
        flex-direction: column;   /* stack bullets vertically */
        padding-left: 0;
        align-items: center;      /* keep if you want centered list items */
    }

    .content p + u {
        margin-bottom: 0;
    }

    .content li {
        margin: 0.25rem 0;        /* only spacing needs changing */
    }

    .content li::before {
        margin-right: 0.4rem;     /* extra spacing between bullet and text */
        position: relative;       /* overrides absolute */
    }
}

.content-call-to-action {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin: var(--margin-regular);
    padding: var(--padding-content);
}

.content-call-to-action > div {
    align-items: center;          /* center within the item */
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;       /* stack button + copy vertically */
    max-width: 18.75rem;
    text-align: center;           /* optional: center the copy text */
}

.content-call-to-action--button {
    background: var(--colour-accent);
    border-radius: 1.25rem;
    color: var(--colour-light);
    display: block;
    letter-spacing: var(--letter-spacing);
    margin: auto;
    max-width: 16.5rem;
    text-align: center;
    padding: 0.3125rem 1.25rem;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    width: 100%;
}

.content-call-to-action--button:hover {
    background: var(--colour-brand);
    color: var(--colour-light);
    transform: scale(1.05);
}

.content-call-to-action p {
    color: var(--colour-brand);
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-regular);
    margin-top: 0.625rem;
}

/* Stack all call-to-actions in a column below 40em */
@media (max-width: 40em) {
    .content-call-to-action {
        align-items: center;
        flex-direction: column;
        gap: 2.25rem;
    }

    .content-call-to-action > div {
        max-width: 18.75rem;
        width: 100%;
    }
}



/* ==========================================================================
   Image wall
   ========================================================================== */

.image-wall {
    color: var(--colour-dark);
    font-family: var(--font-serif);
    font-size: var(--font-size-regular);
    line-height: var(--line-height-regular);
    margin: var(--margin-regular);
    padding: var(--padding-image-wall);
    text-align: center;
    width: 100%;
}

.image-wall div + div {
    padding-top: 1.25rem;
}

/* --- Single image layout --- */
.image-wall--single-image {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 auto;
    width: 100%;
}

.image-wall--single-image figure {
    margin: 0;
    overflow: hidden;
    padding: 0 0.625rem;
    position: relative;
}

.image-wall--single-image img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.image-wall--single-image figcaption {
    background: rgba(0, 0, 0, 0.5);  /* semi-transparent for contrast */
    border-radius: 1.25rem;
    color: var(--colour-light);
    font-size: var(--font-size-regular);
    left: 50%;
    max-width: 80%;
    padding: 0.5rem 1rem;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* --- Double image layout --- */
.image-wall--double-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    width: 100%;
}

.image-wall--double-image figure {
    margin: 0;
    overflow: hidden;
    padding: 0 0.625rem;
    position: relative;
}

.image-wall--double-image img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.image-wall--double-image figcaption {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 1.25rem;
    color: var(--colour-light);
    font-size: var(--font-size-regular);
    left: 50%;
    max-width: 80%;
    padding: 0.5rem 1rem;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* --- Triple image (large small small) --- */

.image-wall--large-small-small {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    margin: 0 auto;
    width: 100%;
}

.image-wall--large-small-small figure {
    margin: 0;
    overflow: hidden;
    padding: 0 0.625rem;
    position: relative;
}

.image-wall--large-small-small img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.image-wall--large-small-small figcaption {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 1.25rem;
    color: var(--colour-light);
    font-size: var(--font-size-regular);
    left: 50%;
    max-width: 80%;
    padding: 0.5rem 1rem;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* --- Triple image (small small large) --- */

.image-wall--small-small-large {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    margin: 0 auto;
    width: 100%;
}

.image-wall--small-small-large figure {
    margin: 0;
    overflow: hidden;
    padding: 0 0.625rem;
    position: relative;
}

.image-wall--small-small-large img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.image-wall--small-small-large figcaption {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 1.25rem;
    color: var(--colour-light);
    font-size: var(--font-size-regular);
    left: 50%;
    max-width: 80%;
    padding: 0.5rem 1rem;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 40em) {
    .image-wall div + div {
        padding-top: 0.625rem;
    }

    .image-wall--single-image figure,
    .image-wall--double-image figure,
    .image-wall--large-small-small figure,
    .image-wall--small-small-large figure {
        padding: 0 0.3125rem;
    }

    /* image wall small small large two rows */

    .image-wall--large-small-small {
        grid-template-columns: 1fr; /* stack items */
        row-gap: 0.625rem;
    }

    .image-wall--large-small-small > :first-child {
        grid-column: 1 / -1; /* make the large (2fr) item full width */
    }

    .image-wall--large-small-small > :nth-child(2),
    .image-wall--large-small-small > :nth-child(3) {
        grid-column: span 1; /* each of the two 1fr items takes half */
    }

    .image-wall--large-small-small {
        grid-template-columns: 1fr 1fr; /* two columns for the smaller items */
        grid-auto-rows: auto;
    }

    /* image wall large small small in two rows */

    .image-wall--small-small-large {
        grid-template-columns: 1fr 1fr; /* two columns for the smaller items */
        grid-auto-rows: auto;
        row-gap: 0.625rem;
    }

    .image-wall--small-small-large > :nth-child(1),
    .image-wall--small-small-large > :nth-child(2) {
        grid-column: span 1; /* each small item half width */
    }

    .image-wall--small-small-large > :nth-child(3) {
        grid-column: 1 / -1; /* large item full width below */
    }
}



/* ==========================================================================
   Call to action
   ========================================================================== */

.call-to-action {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin: var(--margin-regular);
    padding: var(--padding-regular);
}

.call-to-action > div {
    align-items: center;          /* center within the item */
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;       /* stack button + copy vertically */
    max-width: 18.75rem;
    text-align: center;           /* optional: center the copy text */
}

.call-to-action--button {
    background: var(--colour-accent);
    border-radius: 1.25rem;
    color: var(--colour-light);
    display: block;
    letter-spacing: var(--letter-spacing);
    text-align: center;
    padding: 0.3125rem 1.25rem;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    width: 100%;
}

.call-to-action--button:hover {
    background: var(--colour-brand);
    color: var(--colour-light);
    transform: scale(1.05);
}

.call-to-action p {
    color: var(--colour-brand);
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-regular);
    margin-top: 0.625rem;
}

/* Stack all call-to-actions in a column below 40em */
@media (max-width: 40em) {
    .call-to-action {
        align-items: center;
        flex-direction: column;
        gap: 2.25rem;
    }

    .call-to-action > div {
        max-width: 18.75rem;
        width: 100%;
    }
}



/* ==========================================================================
   Columns Wrapper
   ========================================================================== */

.columns {
    max-width: 82rem;
    margin: 0 auto;
    padding: var(--padding-regular);
    text-align: center;
}

.columns h2 {
    margin-bottom: 1.25rem;
}

/* ==========================================================================
   Three columns
   ========================================================================== */

.three-columns {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2.25rem;
    row-gap: 6.25rem;
    justify-content: center;
}

.three-columns .card {
    flex: 1 1 calc(33.333% - 2.25rem);
    max-width: calc(33.333% - 2.25rem);
}

/* ==========================================================================
   Two columns
   ========================================================================== */

.two-columns {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2.25rem;
    row-gap: 6.25rem;
    justify-content: center;
}

.two-columns .card {
    flex: 1 1 calc(50% - 2.25rem);
    max-width: calc(50% - 2.25rem);
}

/* ==========================================================================
   Features
   ========================================================================== */

.features .card {
    align-items: center;
    display: flex;
}

.features--image,
.features--content {
    flex: 1 1 50%;
}

/* Center the text content vertically */
.features--content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1.25rem;
}

/* Alternate every second card */
.features .card:nth-child(even) {
    flex-direction: row-reverse;
}

.features .card:nth-child(even) .features--content {
    padding-left: 0;
    padding-right: 1.25rem;
}

.features--image img {
    aspect-ratio: 1/1 !important;
}

/* Responsive stacking */
@media (max-width: 64em) {
    .features .card {
        flex-direction: column;
        text-align: center;
    }

    .features .card + .card {
        margin-top: 3.125rem;
    }

    .features .card:nth-child(even) {
        flex-direction: column;
    }

    .features--image,
    .features--content {
        width: 100%;
    }
}


/* ==========================================================================
   Menus
   ========================================================================== */

.menus {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2.25rem;
    row-gap: 3.125rem;
    justify-content: center;
}

.menus .card {
    border: 1px solid var(--colour-brand);
    flex: 1 1 calc(33.333% - 2.25rem);
    max-width: calc(33.333% - 2.25rem);
    padding-bottom: 0.625rem;
}

/* ==========================================================================
   Shared card styling
   ========================================================================== */

.card {
    text-align: center;
    width: 100%;
}

.card .call-to-action--button {
    margin: 0 auto;
    min-width: 12.5rem;
    width: fit-content;
}

.card .date {
    color: var(--colour-brand);
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-small);
    margin-top: 0.625rem;
    text-transform: uppercase;
}

.card h3 + div {
    margin-bottom: 1.25rem;
    padding: 0 0.625rem;
}

.card figure {
    overflow: hidden;
}

.card h3 {
    margin: 0.625rem 0;
    padding: 0 0.625rem;
}

.card img {
    height: 100%;
    object-fit: cover;
    aspect-ratio: 6/4;
    transition: all 0.3s ease-in-out;
    width: 100%;
}

.card img:hover {
    transform: scale(1.05);
}

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

/* Tablet: two-columns and three-columns both drop to 2 cards */
@media (max-width: 64em) {
    .three-columns .card,
    .two-columns .card,
    .menus .card {
        flex: 1 1 calc(50% - 2.25rem);
        max-width: calc(50% - 2.25rem);
    }

    .three-columns,
    .two-columns {
        row-gap: 3.125rem;
    }
}

/* Mobile: single column */
@media (max-width: 40em) {
    .three-columns .card,
    .two-columns .card,
    .menus .card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}



/* ==========================================================================
   Flickity carousel
   ========================================================================== */

.carousel {
    position: relative;
    width: 100%;
}

.carousel-cell {
    height: auto;
    width: 33.3333%;
}

.carousel-cell.card {
    flex: none !important;
    height: fit-content;
    padding: 0 1.125rem;
    max-width: 100%;
}

.flickity-button {
    background-color: var(--colour-accent);
    border-radius: 1.25rem;
    color: var(--colour-light);
    height: 1.875rem;
    min-width: fit-content;
    width: 1.875rem;
}

.flickity-button:hover {
    background-color: var(--colour-brand);
}

.flickity-prev-next-button {
    top: -3rem;
    transform: none;
    z-index: 1;
}

.flickity-prev-next-button.next {
    right: 1.125rem;
}

.flickity-prev-next-button.previous {
    left: 1.125rem;
}

.flickity-page-dots {
    bottom: -2.1875rem;
}

.flickity-page-dots .dot {
    background-color: var(--colour-brand);
    height: 1.25rem;
    opacity: 1;
    width: 1.25rem;
}

.dot.is-selected {
    background-color: var(--colour-accent);
}

@media (max-width: 64em) {
    .carousel-cell {
        width: 50%;
    }
}

@media (max-width: 40em) {
    .carousel-cell {
        width: 100%;
    }
}



/* ==========================================================================
   Flickity menus carousel
   ========================================================================== */

.carousel-menus {
    position: relative;
    width: 100%;
}

.carousel-menus .card {
    flex: none;
    padding-bottom: 0.625rem;
}

.carousel-menus figure {
    display: none;
}

.carousel-menus .carousel-cell {
	display: flex;
	flex-direction: column; /* keeps content stacked vertically */
    height: 100%;
}

.carousel-menus .carousel-cell.card {
    height: fit-content;
}

.carousel-menus .box {
    border: 1px solid var(--colour-brand);
    padding-bottom: 0.625rem;
}


/* ==========================================================================
   Menu
   ========================================================================== */

.menu {
    max-width: 82rem;
    margin: 0 auto;
    padding: var(--padding-regular);
    text-align: left;
}

.menu header {
    text-align: center;
}

.menu header p {
    text-align: center;
    margin-top: 0;
}

.menu header h2 {
    padding-top: 0;
}

.menu header h2 + p {
    margin-top: 1.25rem;
}

.menu h2 {
    font-family: var(--font-sans-serif);
    padding: var(--padding-content);
    letter-spacing: var(--letter-spacing);
}

.menu h3 {
    border-bottom: 1px solid var(--colour-brand);
    color: rgba(44, 32, 0, 1);
    display: block;
    font-family: var(--font-sans-serif);
    font-weight: 700;
    letter-spacing: var(--letter-spacing);
    padding: var(--padding-content);
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}

.menu h3 span {
    color: var(--colour-brand);
    font-size: var(--font-size-regular);
    font-weight: normal;
}

.menu p {
    color: var(--colour-dark);
    font-size: var(--font-size-regular);
    font-family: var(--font-sans-serif);
    margin-top: 1.25rem;
    text-align: left;
}

.menu--dish {
    text-transform: uppercase;
}

.menu--allergens {
    color: var(--colour-brand);
}


/* ==========================================================================
   Menu columns
   ========================================================================== */

.menu-columns--three {
    display: grid;
    gap: 2.25rem;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 64em) {
    .menu-columns--three {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 40em) {
    .menu-columns--three {
        gap: 0;
        grid-template-columns: 1fr;
    }
}

.menu-columns--two {
    display: grid;
    gap: 2.25rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 40em) {
    .menu-columns--two {
        gap: 0;
        grid-template-columns: 1fr;
    }
}

.menu-columns--one {
    align-items: center;
    display: grid;
    gap: 2.25rem;
    grid-template-columns: 1fr;
    justify-content: center;
}

.menu-columns--three section header p,
.menu-columns--two section header p {
    margin-top: 1.25rem;
    text-align: left;
}

.menu-columns--one section header h3 {
    text-align: center;
}

.menu-columns--one section header p {
    margin-top: 1.25rem;
    text-align: center;
}

.menu-columns--one p {
    text-align: center;
}



/* ==========================================================================
   Wine
   ========================================================================== */

.wine {
    color: var(--colour-dark);
    display: grid;
    font-size: var(--font-size-regular);
    font-family: var(--font-sans-serif);
    column-gap: 2.25rem;
    grid-template-areas: "name small-glass large-glass bottle" "description . . .";
    grid-template-columns: 50% 1fr 1fr 1fr;
    margin-top: 1.25rem;
}

.wine--bottle {
    grid-area: bottle;
    text-align: right;
}

.wine-columns {
    display: grid;
    gap: 2.25rem;
    grid-template-columns: 1fr;
}

.wine-columns h3 {
    border: 0;
    text-align: left;
    padding: 0;
}

.wine-columns section + section {
    border-top: 1px solid var(--colour-brand);
    margin-top: 1.25rem;
    padding-top: 3.125rem;
}

.wine--country {
    color: var(--colour-brand);
    text-transform: capitalize;
}

.wine--description {
    grid-area: description;
}

.wine--large-glass {
    grid-area: large-glass;
    text-align: right;
}

.wine--name {
    grid-area: name;
    text-transform: uppercase;
}

.wine-measurements {
    align-items: end;
    margin-top: 0;
}

.wine-measurements--mobile {
    display: none;
}

.wine--small-glass {
    grid-area: small-glass;
    text-align: right;
}

@media (max-width: 40em) {
    .wine {
        grid-template-areas: "name name name" "description description description" "small-glass large-glass bottle";
        grid-template-columns: 1fr 1fr 1fr;
    }

    .wine + .wine {
        margin-top: 3.125rem;
    }

    .wine--bottle,
    .wine--large-glass,
    .wine--small-glass {
        margin-top: 1.25rem;
        text-align: center;
    }

    .wine-measurements {
        grid-template-areas: "name name name"; 
    }

    .wine-measurements--desktop {
        display: none;
    }

    .wine-measurements--mobile {
        display: block;
    }
}


/* ==========================================================================
   Drinks
   ========================================================================== */

.drinks-columns {
    display: grid;
    gap: 2.25rem;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense; /* fills gaps with smaller items */
}

.drinks-columns h3 {
    border: 0;
    text-align: left;
    padding: 0;
}

.drinks {
    color: var(--colour-dark);
    display: grid;
    font-size: var(--font-size-regular);
    font-family: var(--font-sans-serif);
    column-gap: 2.25rem;
    grid-template-areas: "name price";
    grid-template-columns: auto 1fr;
    margin-top: 1.25rem;
}

.drinks--info {
    grid-area: name;
}

.drinks--name {
    text-transform: uppercase;
}

.drinks--price {
    grid-area: price;
    text-align: right;
}

@media (max-width: 40em) {
    .drinks-columns {
        gap: 0;
        grid-template-columns: 1fr;
    }

    .drinks-columns section + section {
        border-top: 1px solid var(--colour-brand);
        margin-top: 3.125rem;
        padding-top: 3.125rem;
    }
}

.menu {
    border-top: 1px solid var(--colour-brand);
}


/* ==========================================================================
   Tea, coffee and hot chocolate
   ========================================================================== */

.coffee {
    color: var(--colour-dark);
    display: grid;
    font-size: var(--font-size-regular);
    font-family: var(--font-sans-serif);
    column-gap: 2.25rem;
    grid-template-areas: "name small regular large" "description . . .";
    grid-template-columns: 50% 1fr 1fr 1fr;
    margin-top: 1.25rem;
}

.coffee-columns {
    display: grid;
    gap: 2.25rem;
    grid-template-columns: 1fr;
}

.coffee-columns h3 {
    border: 0;
    text-align: left;
    padding: 0;
}

.coffee-columns section + section {
    border-top: 1px solid var(--colour-brand);
    margin-top: 1.25rem;
    padding-top: 3.125rem;
}

.coffee--description {
    grid-area: description;
}

.coffee--large {
    grid-area: large;
    text-align: right;
}

.coffee--name {
    grid-area: name;
    text-transform: uppercase;
}

.coffee--regular {
    grid-area: regular;
    text-align: right;
}

.coffee--small {
    grid-area: small;
    text-align: right;
}

@media (max-width: 40em) {
    .coffee {
        column-gap: 0.3125rem;
        grid-template-areas: "name small regular large" "description description description description";
        grid-template-columns: 30% 1fr 1fr 1fr;
    }

    .coffee + .coffee {
        margin-top: 3.125rem;
    }
    
    .coffee--large,
    .coffee--regular,
    .coffee--small {
        font-size: var(--font-size-small);
        text-align: center;
    }
    
    .coffee--large strong,
    .coffee--regular strong,
    .coffee--small strong {
        font-size: var(--font-size-regular);
    }
}



/* ==========================================================================
   Contact us form
   ========================================================================== */

.form {
    background: var(--background-brand);
}

.form section {
    color: var(--colour-dark);
    font-size: var(--font-size-regular);
    font-family: var(--font-serif);
    line-height: var(--line-height-regular);
    margin: var(--margin-regular);
    max-width: 70rem;
    padding: var(--padding-regular);
    text-align: center;
    width: 100%;
}

/* ==========================================================================
   Legend
   ========================================================================== */

.legend {
    background-color: var(--background-brand);
    height: fit-content;
    margin-top: 3.125rem;
    padding: 1.25rem;
}

.legend p {
    color: var(--colour-dark);
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-small);
}

.legend p {
    margin-top: 0;
}

.legend p + p {
    margin-top: 1.25rem;
}


/* ==========================================================================
   Logos
   ========================================================================== */

.logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centers last row if not full */
    gap: 2rem;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
    align-items: center;
}

.logos figure {
    flex: 0 0 calc(20% - 2rem); /* fixed width: 5 columns */
    margin: 0;
}

.logos img {
    display: block;
    height: auto;
    width: 100%;
}

/* Tablet breakpoint (≤64em): 3 columns */
@media (max-width: 64em) {
    .logos figure {
        flex: 0 0 calc(33.333% - 1.5rem);
    }
}

/* Mobile breakpoint (≤40em): 2 columns */
@media (max-width: 40em) {
    .logos figure {
        flex: 0 0 calc(50% - 1rem);
    }
}


/* ==========================================================================
   Padding
   ========================================================================== */

.padding-none {
    padding: 0;
}

.padding-bottom-none {
    padding-bottom: 0;
}

/* ==========================================================================
   Backgrounds
   ========================================================================== */

.background-brand {
    background-color: var(--background-brand);
    width: 100%;
}


/* ==========================================================================
   CK Editor styles
   ========================================================================== */

.text-dark {
    color: var(--colour-dark);
}

.text-brand {
    color: var(--colour-brand);
}

.text-accent {
    color: var(--colour-accent);
}