/*
Theme Name: Costes Catering (Classic)
Theme URI: https://smartbits.hu/
Author: Smartbits
Description: Classic PHP theme converted from the Elementor build of catering.smartbits.hu. No Elementor, no page builder — plain templates, hand-written CSS, a ~40-line vanilla slider and IntersectionObserver reveals.
Version: 0.7.5
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: costes-catering
*/

/* ---------------------------------------------------------------------------
   Design tokens — lifted from the Elementor kit (post-63) and the site's
   global code snippet, so the classic build stays on the same palette.
   --------------------------------------------------------------------------- */
:root {
    /* Costes Events & Catering — brandbook palette.
       See design/cec/brandbook/NOTES.md for the usage rules. The one that
       shapes this file: burgundy is an ACCENT in minimal proportion, never a
       large field. Oyster and coffee carry the surfaces. */
    --cc-bg:            #E8DFD6;   /* Costes Oyster Beige,     Pantone 9225 U */
    --cc-ink:           #4B413A;   /* Costes Coffee Brown,     Pantone 7519 U */
    --cc-accent:        #8A2637;   /* Costes Classic Burgundy, Pantone 1955 U */
    --cc-support:       #98A854;   /* Costes Bright Olive,     Pantone 576 U  */
    --cc-text:          #4B413A;
    --cc-white:         #FFFFFF;

    --cc-radius:        32px;
    --cc-pad:           32px;
    --cc-gap:           20px;
    --cc-container:     1400px;
    --cc-shell:         1440px;   /* --cc-container + 2 x 20px padding */

    /* Centrale Sans — the brand face (confirmed by the brand designer,
       2026-09-22), self-hosted under Costes' MyFonts webfont license; see
       assets/fonts/centrale-sans.css. Only Book (400), Book Italic and Bold
       (700) are licensed, so there is no 500/600: weights in this file are
       400 or 700, and font-synthesis stops the browser faking the rest. */
    --cc-font-body:     "Centrale Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --cc-font-display:  var(--cc-font-body);
}

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

body {
    margin: 0;
    background-color: var(--cc-bg);
    font-family: var(--cc-font-body);
    font-synthesis: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--cc-text);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }

/* Elementor's heading widget typography, as a plain class. */
.cc-heading {
    margin: 0;
    font-family: var(--cc-font-display);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--cc-white);
}

/*
 * The site's own `.bubble-*` helpers, set as bubblefood.com sets them: a
 * large, light, sentence-case heading (theirs is Bodoni Moda; ours is the
 * brand's Centrale Sans), small body copy, an underlined text link and a
 * small rounded button.
 */
.bubble-title {
    margin: 0;
    font-family: var(--cc-font-display);
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: .005em;
    text-wrap: balance;
}

.bubble-text {
    font-size: 15px;
    line-height: 1.6;
}

.bubble-link {
    display: inline-block;
    font-size: 15px;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.bubble-link:hover { color: var(--cc-accent); }

.bubble-button {
    display: inline-block;
    padding: 5px 16px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    line-height: 20px;
    text-decoration: none !important;
    transition: background-color .2s, color .2s, border-color .2s;
}

.bubble-button:hover { background: var(--cc-accent); border-color: var(--cc-accent); color: var(--cc-white); }

/* The dark, filled variant bubblefood uses on light backgrounds. */
.bubble-button--solid {
    border-color: var(--cc-ink);
    background: var(--cc-ink);
    color: var(--cc-white);
}

/* ---------------------------------------------------------------------------
   Scroll reveal — replaces the site's GSAP + ScrollTrigger snippet.
   Base state is visible, so with JS off (or if the observer never fires) the
   content still renders. The Elementor original set `opacity: 0` in CSS and
   relied on GSAP to undo it, which is why sections went blank when the
   animation didn't run.
   --------------------------------------------------------------------------- */
.cc-reveal { opacity: 1; transition: opacity .6s ease; }
.js .cc-reveal { opacity: 0; }
.js .cc-reveal.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .js .cc-reveal { opacity: 1; transition: none; }
}

/* ---------------------------------------------------------------------------
   Header — the Vibe site's header in the CEC brand (CEC-16): a fixed bar with
   the logo left, the menu centred with dropdowns, the language switch and the
   call-to-action right. Under 860px a burger opens a slide-in panel with the
   subpages listed flat — no dropdowns on mobile (M10).
   --------------------------------------------------------------------------- */
:root {
    --cc-header-h: 84px;
    --cc-line: rgba(75, 65, 58, .18);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--cc-header-h);
    display: flex;
    align-items: center;
    background: rgba(232, 223, 214, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cc-line);
}

/* Keep the bar below the admin toolbar when logged in. */
.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
    .admin-bar .site-header { top: 46px; }
}

.site-header__inner {
    width: 100%;
    max-width: var(--cc-shell);
    margin-inline: auto;
    padding-inline: clamp(20px, 3vw, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 40px);
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
/* The logo SVG carries wide margins of its own, so it is sized close to the bar. */
.brand img { width: auto; height: clamp(60px, 5.4vw, 78px); }

/* --- Primary nav --- */
.nav { display: flex; align-items: center; }

.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 34px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__item { position: relative; }

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .4em 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cc-ink);
    transition: color .2s;
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--cc-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
}

a.nav__link:hover,
.nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link { color: var(--cc-accent); }

a.nav__link:hover::after,
.nav__item:hover > .nav__link::after,
.nav__item:focus-within > .nav__link::after { transform: scaleX(1); }

.nav__caret {
    width: .5em;
    height: .5em;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s;
    opacity: .8;
}

.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret { transform: rotate(225deg) translateY(-1px); }

/* --- Dropdown --- */
.nav__dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    min-width: 240px;
    margin: 0;
    padding: 10px;
    list-style: none;
    background: var(--cc-bg);
    border: 1px solid var(--cc-line);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(75, 65, 58, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
    transition: opacity .25s, transform .25s, visibility .25s;
}

/* Hover bridge, so crossing the gap does not close the menu. */
.nav__dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

.nav__item:hover > .nav__dropdown,
.nav__item:focus-within > .nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav__dropdown a,
.nav__dropdown .nav__pending {
    display: block;
    padding: .7em .9em;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.35;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cc-ink);
    transition: background-color .2s, color .2s;
}

.nav__dropdown a:hover { background: rgba(138, 38, 55, .08); color: var(--cc-accent); }

/* Entries with no page yet: same type, but not pretending to be clickable. */
.nav__pending { opacity: .45; cursor: default; }

/* --- Right cluster: language, call-to-action, burger --- */
.header-actions { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 22px); }

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
}

.lang-toggle a { padding: .2em .15em; text-decoration: none; color: rgba(75, 65, 58, .6); }
.lang-toggle a:hover { color: var(--cc-ink); }
.lang-toggle a[aria-current="true"] { color: var(--cc-accent); }
.lang-toggle .sep { color: rgba(75, 65, 58, .3); }
.lang-toggle__pending { color: rgba(75, 65, 58, .3); }

.header-cta { display: inline-flex; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75em 1.5em;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background-color .2s, color .2s, border-color .2s;
}

.btn--primary { background: var(--cc-accent); border-color: var(--cc-accent); color: var(--cc-white) !important; }
.btn--primary:hover { background: transparent; color: var(--cc-accent) !important; }

.burger {
    display: none;
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--cc-line);
    border-radius: 999px;
    cursor: pointer;
}

.burger span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 1.5px;
    background: var(--cc-ink);
    transform: translate(-50%, -50%);
    transition: transform .25s, opacity .2s;
}

.burger span:nth-child(1) { margin-top: -5px; }
.burger span:nth-child(3) { margin-top: 5px; }
.burger.is-active span:nth-child(1) { margin-top: 0; transform: translate(-50%, -50%) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; }
.burger.is-active span:nth-child(3) { margin-top: 0; transform: translate(-50%, -50%) rotate(-45deg); }

/* --- Mobile panel --- */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    padding: calc(var(--cc-header-h) + 8px) 24px 24px;
    background: var(--cc-bg);
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .3s, visibility .3s;
}

.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.admin-bar .mobile-nav { padding-top: calc(var(--cc-header-h) + 54px); }

.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__list > li { border-bottom: 1px solid var(--cc-line); }

.mobile-nav__link {
    display: block;
    padding: .55em 0;
    font-size: clamp(22px, 6vw, 30px);
    text-decoration: none;
    color: var(--cc-ink);
}

/* Subpages listed flat under their parent: no dropdown on mobile (M10). */
.mobile-nav__sub { list-style: none; margin: 0 0 .7em; padding: 0; }

.mobile-nav__sub a,
.mobile-nav__sub .nav__pending {
    display: block;
    padding: .45em 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(75, 65, 58, .8);
}

.mobile-nav__foot {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: auto;
    padding-top: 32px;
}

body.nav-open { overflow: hidden; }

@media (max-width: 1180px) {
    .nav__list { gap: 14px; }
    .nav__link { font-size: 11px; letter-spacing: .08em; }
}

@media (max-width: 860px) {
    :root { --cc-header-h: 68px; }
    .nav,
    .header-cta,
    .header-actions > .lang-toggle { display: none; }
    .burger { display: block; }
}

@media (min-width: 861px) {
    .mobile-nav { display: none; }
}

/* ---------------------------------------------------------------------------
   Image section — the classic replacement for `ucaddon_image_section`, set as
   bubblefood's full-screen sections: the photo fills the screen under the
   header, the copy sits centred in one half.
   --------------------------------------------------------------------------- */
.image-section { position: relative; }

.image-section__viewport {
    min-height: calc(100vh - var(--cc-header-h));
    min-height: calc(100svh - var(--cc-header-h));
    display: grid;
}

.image-section__slides,
.image-section__overlay { grid-area: 1 / 1; }

.image-section__slides {
    z-index: 1;
    position: relative;
}

.image-section__slide,
.image-section__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: var(--background);
    background-position: center;
    background-size: cover;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s ease;
}

.image-section__video,
.image-section__slide.is-active { opacity: 1; }

/* An upright photo would lose the dish to a full-bleed crop (Maya, 2026-10-12,
   CEC-23): it is shown whole in the photo's half, over a blurred, darkened
   copy of itself. On phones the viewport is upright too, so cover is fine. */
.image-section__slide--portrait { background-image: none; }

.image-section__slide--portrait::before,
.image-section__slide--portrait::after {
    content: "";
    position: absolute;
    background-image: var(--background);
    background-repeat: no-repeat;
    background-position: center;
}

.image-section__slide--portrait::before {
    inset: -40px;
    background-size: cover;
    filter: blur(28px) brightness(.55);
}

.image-section__slide--portrait::after {
    inset: 32px 50% 32px 0;
    background-size: contain;
}

.image-section--text-left .image-section__slide--portrait::after { inset: 32px 0 32px 50%; }

.image-section__slides { overflow: hidden; }

/* A single-image section needs no transition machinery. */
.image-section--static .image-section__slide { opacity: 1; }

.image-section__overlay {
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    pointer-events: none;
}

.image-section__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.image-section__inner {
    max-width: 480px;
    padding: 20px;
    pointer-events: auto;
}

/* text_position: right — content sits in the second overlay column. */
.image-section--text-right .image-section__content { grid-column: 2; }
.image-section--text-left  .image-section__content { grid-column: 1; }

.image-section__inner .bubble-title { margin-bottom: 22px; }
.image-section__inner .bubble-text { font-size: 15px; line-height: 1.6; }
.image-section__inner p { margin: 0 0 1em; }
.image-section__inner p:last-child { margin-bottom: 0; }
.image-section__inner .bubble-text + a,
.image-section__inner .bubble-title + a { margin-top: 22px; }

/* Light photos (plated food on white, bubblefood's first section): dark type. */
.image-section--light .image-section__content { color: var(--cc-ink); }

/* Dark or busy photos: white type over a shade on the copy's side. */
.image-section--dark .image-section__content { color: var(--cc-white); }

.image-section--dark .image-section__slides::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(0, 0, 0, .65), rgba(0, 0, 0, .15) 65%);
}

.image-section--dark.image-section--text-right .image-section__slides::after {
    background: linear-gradient(to left, rgba(0, 0, 0, .65), rgba(0, 0, 0, .15) 65%);
}

/* The light variant still needs a veil when the photo is not white, or the
   copy is lost; a pale wash on the copy's side keeps the photo readable. */
.image-section--light .image-section__slides::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to left, rgba(232, 223, 214, .92) 38%, rgba(232, 223, 214, 0) 70%);
}

.image-section--light.image-section--text-left .image-section__slides::after {
    background: linear-gradient(to right, rgba(232, 223, 214, .92) 38%, rgba(232, 223, 214, 0) 70%);
}

@media (max-width: 767px) {
    .image-section__viewport { min-height: calc(100svh - var(--cc-header-h)); }
    .image-section__overlay { grid-template-columns: 1fr; align-items: end; }
    .image-section--text-right .image-section__content,
    .image-section--text-left  .image-section__content { grid-column: 1; }
    .image-section__inner { padding: 32px 24px 56px; }

    .image-section__slide--portrait { background-image: var(--background); }
    .image-section__slide--portrait::before,
    .image-section__slide--portrait::after { content: none; }

    .image-section--dark .image-section__slides::after,
    .image-section--dark.image-section--text-right .image-section__slides::after {
        background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .05) 65%);
    }

    .image-section--light .image-section__slides::after,
    .image-section--light.image-section--text-left .image-section__slides::after {
        background: linear-gradient(to top, rgba(232, 223, 214, .95) 40%, rgba(232, 223, 214, 0) 75%);
    }
}

/* ---------------------------------------------------------------------------
   Feature grid (Elementor grid container 54eb323)
   --------------------------------------------------------------------------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--cc-gap);
    padding: var(--cc-pad);
}

.feature-grid__hero {
    grid-row: 1 / 3;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 514px;
    border-radius: var(--cc-radius);
    overflow: hidden;
}

/* Background slideshow, the classic stand-in for Elementor's
   `background_background: slideshow`. */
.feature-grid__hero .bg-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bg-slideshow__slide {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    opacity: 0;
    transition: opacity .8s ease;
}

.bg-slideshow__slide.is-active { opacity: 1; }

.feature-grid__hero > *:not(.bg-slideshow) {
    position: relative;
    z-index: 1;
}

.feature-grid__hero-copy {
    padding: 20px;
    text-align: center;
    color: var(--cc-white);
}

.feature-grid__hero-copy .cc-heading { margin-bottom: 20px; }
.feature-grid__hero-copy p { margin: 0; color: var(--cc-white); }
.feature-grid__hero-copy a { color: var(--cc-white); text-decoration: underline; }

.feature-card {
    border-radius: var(--cc-radius);
    padding: 40px;
    background-position: center center;
    background-size: cover;
}

.feature-card--blog {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-decoration: none;
}

.feature-card--blog .cc-icon { color: var(--cc-white); }
.feature-card--blog .cc-icon svg { width: 1em; height: 1em; fill: currentColor; font-size: 50px; }

.feature-card--form { background-color: var(--cc-ink); }

/* FluentForm, styled to match what the Elementor widget was applying. */
.feature-card--form { font-family: var(--cc-font-body); }

.feature-card--form .ff-el-input--label label { color: var(--cc-bg); }

/* Form controls do not inherit font from their container, so without an
   explicit size they fall back to the browser's 13.33px default. The
   Elementor build got 16px from the old theme's base styles. */
.feature-card--form input,
.feature-card--form textarea,
.feature-card--form select,
.feature-card--form button,
.feature-card--form .ff-btn-submit {
    font-family: var(--cc-font-body);
    font-size: 16px;
}

.feature-card--form .ff-el-group { margin: 0 !important; }

.feature-card--form input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.feature-card--form textarea,
.feature-card--form select {
    border-radius: var(--cc-radius);
}

.feature-card--form .ff-btn-submit,
.feature-card--form form .ff-btn-submit:not(.ff_btn_no_style) {
    background-color: var(--cc-accent) !important;
    color: var(--cc-white) !important;
    border-radius: var(--cc-radius);
    width: 100% !important;
    margin-top: 20px;
}

@media (max-width: 1024px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    /* One column, but the hero still spans two of four equal rows — that is
       what makes the blog and form cards match each other's height instead of
       collapsing to their content. */
    .feature-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   Footer — the Vibe site's structure (CEC-18): brand column, contact with the
   call-to-action, explore links, then a legal row. No map or opening hours.
   --------------------------------------------------------------------------- */
.site-footer {
    padding-top: clamp(40px, 4.4vw, 68px);
    border-top: 1px solid var(--cc-line);
    color: var(--cc-ink);
}

.site-footer__inner {
    max-width: var(--cc-shell);
    margin-inline: auto;
    padding-inline: clamp(20px, 3vw, 48px);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: clamp(26px, 3.2vw, 52px);
    padding-bottom: clamp(28px, 3.4vw, 48px);
}

.footer-brand img { width: 220px; height: auto; }
.footer-brand p { max-width: 32ch; margin: 0; font-size: 14px; color: rgba(75, 65, 58, .75); }
.footer-brand__follow { margin-top: 26px; }

.footer-col h4,
.footer-brand__follow {
    margin: 0 0 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-accent);
}

.footer-brand .footer-brand__follow { margin: 26px 0 14px; }

.footer-address { font-style: normal; }
.footer-address p { margin: 0 0 10px; font-size: 14px; }
.footer-col a:not(.btn) { color: var(--cc-ink); text-decoration: none; transition: color .2s; }
.footer-col a:not(.btn):hover { color: var(--cc-accent); }
.footer-cta { margin-top: 22px; }

.footer-explore { list-style: none; margin: 0; padding: 0; }
.footer-explore li { margin-bottom: 12px; font-size: 14px; }
.footer-col .footer-explore a { color: var(--cc-accent); }
.footer-col .footer-explore a:hover { color: var(--cc-ink); }

.footer-socials { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-socials a { display: inline-flex; width: 24px; height: 24px; color: var(--cc-ink); }
.footer-socials svg { width: 100%; height: 100%; fill: currentColor; }

.footer-legal {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-block: clamp(18px, 2vw, 24px);
    border-top: 1px solid var(--cc-line);
    font-size: 12px;
    color: rgba(75, 65, 58, .7);
}

.footer-legal p { margin: 0; }
.footer-legal .legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { color: rgba(75, 65, 58, .75); text-decoration: none; }
.footer-legal a:hover { color: var(--cc-accent); }

@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-legal { flex-direction: column; }
}

/* ---------------------------------------------------------------------------
   Slider arrows (teszt hero) — the Unlimited Elements hero widget's nav.
   --------------------------------------------------------------------------- */
.image-section__nav {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 30px;
    padding: 5px;
    background: #28282866;
    border-radius: 40px;
}

.image-section__nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--cc-white);
    cursor: pointer;
}

.image-section__nav svg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------------------
   Team — bubblefood's team rows: a rounded portrait beside the name, role and
   bio, alternating sides; a dark "Image coming soon" tile without a photo.
   --------------------------------------------------------------------------- */
.team-listing {
    display: grid;
    gap: 56px;
    margin: 40px 0;
}

.team-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    width: 100%;          /* auto margins would shrink the row to its content */
    max-width: 980px;
    margin: 0 auto;
}

.team-card__media {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 4 / 5;
    justify-self: center;
    border-radius: 28px;
    background-position: center;
    background-size: cover;
}

.team-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c1714;
    color: var(--cc-white);
    font-size: 15px;
}

/* Every second member flips: copy on the left, portrait on the right. */
.team-card:nth-of-type(even) .content { order: -1; }

.team-card__name { margin: 0 0 8px; font-size: clamp(24px, 2.2vw, 30px); color: var(--cc-ink); }
.team-card__bio { font-size: 14px; line-height: 1.7; color: var(--cc-ink); }
.team-card__bio p { margin: 0 0 1em; }
.team-card__bio p:first-child { margin-bottom: 14px; font-weight: 700; }
.team-card__bio p:first-child strong { font-weight: 700; }
.team-card__bio p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
    .team-card { grid-template-columns: 1fr; gap: 20px; }
    .team-card:nth-of-type(even) .content { order: 0; }
}

/* ---------------------------------------------------------------------------
   Venues — bubblefood's venue grid: four across, rounded photo, the name, and
   a row of small facts with icons.
   --------------------------------------------------------------------------- */
.venue-listing {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 20px;
    margin: 48px 0 0;
    align-items: start;
}

.venue-card__link { display: block; text-decoration: none; color: inherit !important; }

.venue-card__media {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    background-color: rgba(75, 65, 58, .12);
    background-position: center;
    background-size: cover;
    transition: opacity .2s;
}

.venue-card__link:hover .venue-card__media { opacity: .85; }

.venue-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c1714;
    color: var(--cc-white);
    font-size: 14px;
}

.venue-card__name { margin: 14px 0 8px; font-size: 20px; line-height: 1.25; color: var(--cc-ink); }

.venue-card__facts {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--cc-ink);
}

.venue-card__facts li { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.venue-card__icon { display: inline-flex; width: 13px; height: 13px; color: var(--cc-accent); }
.venue-card__icon svg { width: 13px; height: 13px; fill: currentColor; }

@media (max-width: 1100px) { .venue-listing { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .venue-listing { grid-template-columns: 1fr 1fr; gap: 28px 12px; } }

/* ---------------------------------------------------------------------------
   Scratch pages (76 "teszt", 454 "teszt2")
   --------------------------------------------------------------------------- */
.cc-scratch { padding: 20px; }

.cc-scratch__box {
    margin: 0 auto;
    padding: 20px;
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
}

.cc-scratch__box .cc-heading { color: var(--cc-ink); }

/* The scratch page's second container is empty but square, and it is what
   gives the page its height. */
.cc-scratch__filler { aspect-ratio: 1; }

.split-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cc-gap);
    align-items: center;
    max-width: var(--cc-shell);
    margin: 0 auto;
    padding: 20px;
}

.split-section--right .split-section__media { order: 1; }

.split-section__media {
    aspect-ratio: 3 / 2;
    border-radius: var(--cc-radius);
    background-position: center center;
    background-size: cover;
}

.split-section__copy { text-align: center; }
.split-section__copy p { margin: 8px 0 0; }

.three-image {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cc-gap);
    max-width: var(--cc-shell);
    margin: 0 auto;
    padding: 20px;
}

.three-image__tile { margin: 0; }

.three-image__media {
    aspect-ratio: 1;
    border-radius: var(--cc-radius);
    background-position: center center;
    background-size: cover;
}

.three-image figcaption { padding: 12px 4px 0; color: var(--cc-ink); }
.three-image figcaption p { margin: 4px 0 0; }

@media (max-width: 767px) {
    .split-section,
    .three-image { grid-template-columns: 1fr; }
    .split-section--right .split-section__media { order: 0; }
}

.cc-empty {
    max-width: var(--cc-container);
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
    color: var(--cc-ink);
}

/* ---------------------------------------------------------------------------
   Single team member / venue.

   The Elementor build had no theme-builder template for these post types, so
   they rendered through hello-elementor's default single: a 1140px column.
   --------------------------------------------------------------------------- */
.site-main {
    max-width: 1140px;
    margin: 0 auto;
    color: var(--cc-ink);
}

.site-main .entry-title {
    margin: 8px 0 16px;
    font-family: var(--cc-font-body);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

.site-main .page-content h2 {
    font-family: var(--cc-font-body);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin: 24px 0 16px;
}

.site-main .page-content p { margin: 0 0 16px; }
.site-main .page-content p:last-child { margin-bottom: 0; }

/* Single blog post: Elementor template 143 zeroed the container padding, so
   the content ran edge to edge. Kept, so the builds stay comparable. */
.cc-bare-content { color: var(--cc-ink); }
.cc-bare-content p { margin: 0 0 14px; }

/* ---------------------------------------------------------------------------
   Single food item — the ACF `tiles` slideshow plus its caption strip.
   --------------------------------------------------------------------------- */
.food-hero__viewport {
    position: relative;
    display: grid;
    min-height: 80vh;
}

.food-hero__slides {
    position: relative;
    grid-area: 1 / 1;
    min-height: 80vh;
}

.food-hero__caption {
    margin: 0;
    padding: 12px 20px;
    text-align: center;
    font-family: var(--cc-font-display);
    font-size: 24px;
    line-height: 1.2;
    color: var(--cc-ink);
}

/* ---------------------------------------------------------------------------
   Front page — the cards (bubblefood's Corporate / Private pair): rounded
   photo, title, subtitle, small dark button, centred.
   --------------------------------------------------------------------------- */
.cc-cards-row {
    display: grid;
    grid-template-columns: repeat(var(--cc-cols, 2), 1fr);
    gap: 16px;
    padding: 20px 20px 72px;
}

.cc-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--cc-ink);
}

.cc-promo__media-link { display: block; width: 100%; }

.cc-promo__media {
    width: 100%;
    aspect-ratio: 5 / 4;
    border-radius: 28px;
    background-color: var(--cc-ink);
    background-position: center;
    background-size: cover;
}

.cc-promo__title { margin: 28px 0 10px; font-size: clamp(24px, 2.2vw, 32px); }
.cc-promo__text { margin: 0 0 14px; font-size: 13px; font-weight: 700; }
.cc-promo .bubble-button { margin-top: 6px; }

@media (max-width: 900px) {
    .cc-cards-row { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------------------------------------------------------------------------
   Front page — client logos on a dark band (bubblefood's Some of our Clients).
   --------------------------------------------------------------------------- */
.cc-clients {
    padding: 72px 40px 88px;
    background: #14100e;
    color: var(--cc-white);
    text-align: center;
}

.cc-clients__heading { margin-bottom: 48px; font-size: clamp(24px, 2.2vw, 32px); }

.cc-clients__logos {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* A light tile per client: the logos keep their own colours (CEC-19). One
   row on desktop, the tiles sharing it evenly, so a name tile never ends up
   alone on a row of its own. */
.cc-clients__logos li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 180px;
    height: 110px;
    padding: 18px 22px;
    border-radius: 18px;
    background: var(--cc-white);
}

.cc-clients__logos img { width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; }
/* The solid black wordmarks read heavier than the rest; a touch smaller. */
.cc-clients__logos img[src*="ordit"],
.cc-clients__logos img[src*="bortarsasag"] { max-width: 82%; }

/* A client shown by name: set as a wordmark, not a logo. */
.cc-clients__name {
    color: #1c1714;
    font-size: 15px;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
}

/* Narrower screens: rows of four, the last row centred (7 clients → 4 + 3). */
@media (max-width: 900px) {
    .cc-clients { padding-inline: 20px; }
    .cc-clients__logos { flex-wrap: wrap; gap: 12px; }
    .cc-clients__logos li { flex: 0 0 calc(25% - 9px); height: 96px; padding: 14px 16px; }
}

@media (max-width: 560px) {
    .cc-clients__logos { gap: 8px; }
    .cc-clients__logos li { flex-basis: calc(25% - 6px); height: 64px; padding: 8px; border-radius: 12px; }
    .cc-clients__name { font-size: 9px; letter-spacing: .14em; }
}

/* ---------------------------------------------------------------------------
   Front page — closing row: a photo card with a title and an arrow, beside a
   dark contact card (bubblefood's Inspiration + "Our dedicated team…").
   --------------------------------------------------------------------------- */
.cc-closing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
}

.cc-closing__card,
.cc-closing__contact {
    min-height: 300px;
    border-radius: 28px;
}

.cc-closing__card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 32px;
    background-color: var(--cc-ink);
    background-position: center;
    background-size: cover;
    color: var(--cc-white);
    text-decoration: none;
    overflow: hidden;
}

.cc-closing__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 45%);
}

.cc-closing__title,
.cc-closing__arrow { position: relative; }
.cc-closing__title { font-size: clamp(24px, 2.2vw, 32px); }
.cc-closing__arrow svg { width: 36px; height: 36px; fill: currentColor; }

.cc-closing__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px;
    /* Coffee brown rather than black (Maya, 2026-09-28); burgundy stays an
       accent, as the brandbook asks. */
    background: var(--cc-ink);
    color: var(--cc-white);
    text-align: center;
}

.cc-closing__contact .bubble-title { font-size: clamp(22px, 2vw, 28px); }
.cc-closing__body { font-size: 14px; line-height: 1.7; }
.cc-closing__body p { margin: 0; }
.cc-closing__body a { color: inherit; }

@media (max-width: 767px) {
    .cc-closing { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Content pages — bubblefood's inner pages. A page with a featured image
   puts its copy beside the rounded photo (their Corporate page); a page that
   lists things is a centred title over the list (their Venues page).
   --------------------------------------------------------------------------- */
.cc-page {
    max-width: var(--cc-shell);
    margin: 0 auto;
    padding: 56px 40px 88px;
    color: var(--cc-ink);
    font-size: 15px;
    line-height: 1.7;
}

.cc-page h1,
.cc-page h2 {
    font-family: var(--cc-font-display);
    font-weight: 400;
    letter-spacing: .005em;
    line-height: 1.2;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.cc-page h1 { margin: 0 0 28px; font-size: clamp(30px, 3vw, 44px); }
.cc-page h2 { margin: 48px 0 16px; font-size: clamp(24px, 2.2vw, 30px); scroll-margin-top: calc(var(--cc-header-h) + 24px); }
.cc-page h2:first-child { margin-top: 0; }
.cc-page h3 { margin: 28px 0 10px; font-size: 18px; font-weight: 700; }
.cc-page p { margin: 0 0 1em; }
.cc-page ul { margin: 0 0 1.5em; padding-left: 1.2em; }
.cc-page li { margin: 0 0 .35em; }
.cc-page a { color: var(--cc-accent); }

/* Centred: the reading column, title centred like bubblefood's "Venues". */
.cc-page--centred > h1 { text-align: center; }
.cc-page--centred > :not(h1):not(.cc-cards):not(.venue-listing):not(.team-listing):not(.gallery):not(.cc-video) {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Split: copy beside the photo. */
.cc-split {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 64px;
    align-items: center;
}

.cc-split__copy { max-width: 560px; justify-self: center; }

/* The event pages' lists, centred in the copy column (Maya, 2026-09-28). */
.cc-split__copy ul { width: fit-content; margin-inline: auto; }

.cc-split__media {
    aspect-ratio: 4 / 3;
    border-radius: 28px;
    background-position: center;
    background-size: cover;
}

@media (max-width: 900px) {
    .cc-page { padding: 32px 20px 64px; }
    .cc-split { grid-template-columns: 1fr; gap: 32px; }
    .cc-split__media { order: -1; }
}

/* [cc_children] — bubblefood's venue grid: rounded photo, title, a line of
   copy. Cards without a photo get a quiet tile so the grid keeps its rhythm.
   A short row is centred under the copy (Maya, 2026-09-30: Events' three
   cards sat left of the centred text). */
.cc-cards {
    --cc-card-cols: 4;
    --cc-card-gap: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px var(--cc-card-gap);
    margin: 48px 0 0;
}

.cc-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - (var(--cc-card-cols) - 1) * var(--cc-card-gap)) / var(--cc-card-cols));
    color: var(--cc-ink) !important;
    text-decoration: none;
}

.cc-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    background-color: rgba(75, 65, 58, .12);
    background-position: center;
    background-size: cover;
    transition: opacity .2s;
}

.cc-card:not(:has(.cc-card__media))::before {
    content: "";
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    background: rgba(75, 65, 58, .1);
}

.cc-card:hover .cc-card__media { opacity: .85; }

.cc-card__body { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
.cc-card__title { font-size: 20px; line-height: 1.25; }
.cc-card__text { font-size: 13px; line-height: 1.55; }
.cc-card__more { display: none; }

@media (max-width: 1100px) { .cc-cards { --cc-card-cols: 3; } }
@media (max-width: 767px)  { .cc-cards { --cc-card-cols: 2; --cc-card-gap: 12px; row-gap: 28px; } }

/* WordPress [gallery] — a square grid. Five pictures (the venue and
   fine-dining sets) make a mosaic: the first one large, four beside it.
   Four sit in one row, eight in two (Street Food). */
.cc-page .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.cc-page .gallery-item {
    margin: 0;
    width: auto !important;   /* WordPress sets a percentage per column */
    float: none !important;
}

.cc-page .gallery-icon,
.cc-page .gallery-icon a { display: block; height: 100%; }

.cc-page .gallery-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 16px;
    transition: opacity .2s;
}

.cc-page .gallery-icon a:hover img { opacity: .85; }
.cc-page .gallery br { display: none; }

.cc-page .gallery:has(> .gallery-item:nth-child(4):last-child),
.cc-page .gallery:has(> .gallery-item:nth-child(8):last-child) {
    grid-template-columns: repeat(4, 1fr);
}

.cc-page .gallery:has(> .gallery-item:nth-child(5):last-child) {
    grid-template-columns: repeat(4, 1fr);
}

.cc-page .gallery:has(> .gallery-item:nth-child(5):last-child) > .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

@media (max-width: 767px) {
    .cc-page .gallery,
    .cc-page .gallery:has(> .gallery-item:nth-child(4):last-child),
    .cc-page .gallery:has(> .gallery-item:nth-child(5):last-child),
    .cc-page .gallery:has(> .gallery-item:nth-child(8):last-child) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Venue page: capacity and location under the title. */
.cc-venue-facts {
    list-style: none;
    margin: -16px 0 32px !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
}

.cc-venue-facts__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cc-accent);
}

/* Venue page: capacity and location under the title. */
.cc-venue-facts {
    list-style: none;
    margin: -16px 0 32px !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
}

.cc-venue-facts__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cc-accent);
}

/* ---------------------------------------------------------------------------
   Gallery lightbox (assets/js/theme.js, initLightbox)
   --------------------------------------------------------------------------- */
.cc-lightbox {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}

.cc-lightbox::backdrop { background: rgba(20, 16, 14, .92); }

.cc-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    margin: 0;
    padding: 56px 72px;
}

.cc-lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    width: auto;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
}

.cc-lightbox__count {
    font-size: 13px;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .7);
}

.cc-lightbox__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--cc-white);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s;
}

.cc-lightbox__btn:hover,
.cc-lightbox__btn:focus-visible { background: var(--cc-accent); }

.cc-lightbox__close { top: 16px; right: 16px; font-size: 30px; }
.cc-lightbox__prev  { top: 50%; left: 16px; transform: translateY(-50%); }
.cc-lightbox__next  { top: 50%; right: 16px; transform: translateY(-50%); }

.cc-lightbox.is-single .cc-lightbox__prev,
.cc-lightbox.is-single .cc-lightbox__next { display: none; }

@media (max-width: 767px) {
    .cc-lightbox__figure { padding: 64px 12px; }
    .cc-lightbox__prev,
    .cc-lightbox__next { top: auto; bottom: 16px; transform: none; }
}

/* Long single-word Hungarian titles ("RENDEZVÉNYHELYSZÍNEK") are wider than a
   phone in 30px letterspaced caps; step them down, and break as a last resort
   rather than scroll the page sideways. */
@media (max-width: 480px) {
    .cc-page h1 { font-size: 24px; letter-spacing: .04em; }
}

.cc-page h1,
.cc-page h2 { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Silent videos ([cc_video]) — rounded like the photos, full content width.
   --------------------------------------------------------------------------- */
.cc-video { margin: 32px 0; }

.cc-video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 20 / 9;
    border-radius: 20px;
    background: #14100e;
    object-fit: cover;
}

/* A gallery of one picture (most venues) is just the picture, full width. */
.cc-page .gallery:has(> .gallery-item:only-child) { grid-template-columns: 1fr; }
.cc-page .gallery:has(> .gallery-item:only-child) .gallery-item img { aspect-ratio: 3 / 2; }

/* ---------------------------------------------------------------------------
   Forms on content pages (the Join Us application — CEC-17, and the enquiry
   form). FluentForm's markup, set in the site's type.
   --------------------------------------------------------------------------- */
.cc-page .fluentform { margin-top: 28px; font-size: 15px; }
.cc-page .fluentform .ff-el-input--label label { font-weight: 700; color: var(--cc-ink); }

.cc-page .fluentform input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=file]),
.cc-page .fluentform textarea,
.cc-page .fluentform select {
    font-family: var(--cc-font-body);
    font-size: 16px;
    border: 1px solid var(--cc-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .55);
}

.cc-page .fluentform .ff-btn-submit,
.cc-page .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
    padding: .85em 1.8em;
    border-radius: 999px;
    background-color: var(--cc-accent) !important;
    color: var(--cc-white) !important;
    font-family: var(--cc-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}