/* ==========================================================================
   Maccies Design System  —  v1.0
   A token-driven, McDonald's-palette UI layer for the "Root" theme.

   HOW IT WORKS
   - Pure additive stylesheet. It restyles the theme's EXISTING class names
     (.site-header, .main-navigation, .post-card-menu, .cena-menu, etc.) plus
     a small set of new, namespaced `mc-*` components used by the homepage.
   - Nothing here changes markup, so it cannot break the site. Load it AFTER
     the theme's `root-style` handle (see integration notes at end of file)
     or paste it into Appearance → Customize → Additional CSS.

   TABLE OF CONTENTS
     1. Design tokens (:root)        10. Product / menu cards
     2. Base & typography            11. Popular items + favourite control
     3. Buttons & links              12. Panels: What's New / Why Choose
     4. Header / branding bar        13. Popular categories table
     5. Primary navigation           14. Breakfast / Coupons / Wrapsday
     6. Header search                15. WP block tables
     7. Hero (homepage)              16. Footer
     8. Section scaffolding          17. Utilities, a11y & motion
     9. Category grid                18. Responsive
   ========================================================================== */

/* 0. RESET — box model + responsive media. This stylesheet loads AFTER the
   theme's, so it wins on equal specificity; a handful of selectors are scoped
   where the theme is more specific (header nav, etc.). ===================== */
*, *::before, *::after { box-sizing: border-box; }
img, svg, picture, video { max-width: 100%; }
.mc-hero img, .mc-cat__img img, .post-card__image img,
.mc-whatsnew__img img, .coupon-card__img img { height: auto; }

/* 1. DESIGN TOKENS ========================================================= */
:root {
    /* Brand palette — sampled from the McDonald's reference */
    --mc-red:            #da291c;
    --mc-red-600:        #c0210f;
    --mc-red-700:        #a51b0c;
    --mc-yellow:         #ffc72c;
    --mc-yellow-600:     #f3a900;
    --mc-gold-grad:      linear-gradient(135deg, #ffd75e 0%, #ffc72c 48%, #f3a300 100%);
    --mc-red-grad:       linear-gradient(180deg, #e22d1f 0%, #c0210f 100%);

    /* Neutrals (warm-tinted to sit well against the brand) */
    --mc-ink:            #1b1614;
    --mc-ink-2:          #4a4441;
    --mc-muted:          #7c736e;
    --mc-line:           #ece7e1;
    --mc-line-2:         #f3efe9;
    --mc-surface:        #ffffff;
    --mc-bg:             #faf7f2;
    --mc-bg-2:           #f4efe7;
    --mc-hero-ink:       #1a1310;

    /* Typography */
    --mc-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --mc-font-body:    "Roboto", "Helvetica Neue", Arial, sans-serif;

    --mc-fs-hero:  clamp(2.25rem, 1.2rem + 4.4vw, 4rem);
    --mc-fs-h2:    clamp(1.5rem, 1.05rem + 1.9vw, 2.25rem);
    --mc-fs-h3:    clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
    --mc-fs-lead:  clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
    --mc-fs-base:  1rem;
    --mc-fs-sm:    0.8125rem;

    /* Spacing scale (4px base) */
    --mc-1: 0.25rem;  --mc-2: 0.5rem;  --mc-3: 0.75rem; --mc-4: 1rem;
    --mc-5: 1.5rem;   --mc-6: 2rem;    --mc-7: 2.5rem;  --mc-8: 3.5rem;
    --mc-section-y: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

    /* Radius */
    --mc-r-sm: 8px;   --mc-r: 14px;   --mc-r-lg: 22px;   --mc-r-pill: 999px;

    /* Elevation — warm, layered shadows read more premium than flat black */
    --mc-shadow-sm: 0 1px 2px rgba(40,24,12,.06), 0 1px 3px rgba(40,24,12,.05);
    --mc-shadow:    0 6px 16px rgba(40,24,12,.08), 0 2px 6px rgba(40,24,12,.05);
    --mc-shadow-lg: 0 18px 40px rgba(40,24,12,.14), 0 6px 14px rgba(40,24,12,.07);
    --mc-shadow-gold: 0 14px 30px rgba(243,167,0,.28);

    --mc-ring: 0 0 0 3px rgba(255,199,44,.55);
    --mc-ease: cubic-bezier(.2,.7,.3,1);
    --mc-t: 180ms var(--mc-ease);

    --mc-container: 1140px;
}

/* 2. BASE & TYPOGRAPHY ===================================================== */
body {
    font-family: var(--mc-font-body);
    color: var(--mc-ink);
    background: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.entry-title, .mc-section__title, .mc-hero__title,
.site-branding__title, .post-card-menu .entry-name-menu {
    font-family: var(--mc-font-display);
    letter-spacing: -0.01em;
    color: var(--mc-ink);
}

/* Article-body section headings (Burgers, Desserts, …) get a left gold bar.
   The :not([class*="mc-"]) keeps the redesign's own .mc-section__title etc.
   out of this rule so they keep their own centred underline. */
.site-main h2:not([class*="mc-"]),
.entry-content h2:not([class*="mc-"]),
[itemprop="articleBody"] > h2 {
    font-size: var(--mc-fs-h2);
    font-weight: 800;
    margin: var(--mc-7) 0 var(--mc-4);
    padding-bottom: var(--mc-3);
    position: relative;
}
.site-main h2:not([class*="mc-"])::after,
[itemprop="articleBody"] > h2::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 64px; height: 4px; border-radius: 4px;
    background: var(--mc-gold-grad);
}

[itemprop="articleBody"] > p,
.entry-content p { color: var(--mc-ink-2); line-height: 1.7; }

.menu_str {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .5em 1em; margin: .25em .35em .25em 0;
    background: var(--mc-bg-2); border: 1px solid var(--mc-line);
    border-radius: var(--mc-r-pill); color: var(--mc-ink);
    font-weight: 600; text-decoration: none; transition: var(--mc-t);
}
.menu_str:hover { background: var(--mc-yellow); border-color: var(--mc-yellow-600); transform: translateY(-1px); }

/* 3. BUTTONS & LINKS ====================================================== */
.mc-btn,
.wp-block-button__link,
.coupon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    font-family: var(--mc-font-display);
    font-weight: 700; font-size: var(--mc-fs-base); line-height: 1;
    padding: .85em 1.6em; border: 0; border-radius: var(--mc-r-pill);
    background: var(--mc-red); color: #fff !important; cursor: pointer;
    text-decoration: none; transition: var(--mc-t);
    box-shadow: 0 6px 14px rgba(218,41,28,.28);
}
.mc-btn:hover,
.wp-block-button__link:hover,
.coupon-btn:hover { background: var(--mc-red-600); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(218,41,28,.34); }
.mc-btn:active, .coupon-btn:active { transform: translateY(0); }

.mc-btn--gold { background: var(--mc-gold-grad); color: var(--mc-ink) !important; box-shadow: var(--mc-shadow-gold); }
.mc-btn--gold:hover { filter: brightness(1.03); background: var(--mc-gold-grad); }
.mc-btn--ghost { background: transparent; color: var(--mc-red) !important; box-shadow: inset 0 0 0 2px var(--mc-red); }
.mc-btn--ghost:hover { background: var(--mc-red); color: #fff !important; }
.mc-btn--block { display: flex; width: 100%; }

a { color: var(--mc-red-600); text-decoration: none; }
a:hover { color: var(--mc-red-700); }
/* Underline only inside running body copy, for affordance — never on nav,
   buttons, cards, footer columns, etc. (those manage their own decoration).
   .big-img wraps a whole menu card and lives inside articleBody, so it must be
   excluded or the underline (red, the link colour) bleeds onto every card line. */
[itemprop="articleBody"] a:not(.menu_str):not(.wp-block-button__link):not(.coupon-btn):not(.big-img):hover,
.entry-content a:not(.menu_str):not(.wp-block-button__link):not(.coupon-btn):not(.big-img):hover { text-decoration: underline; }
/* Belt-and-braces: never decorate a menu-card link or its text on hover/focus. */
.big-img, .big-img:hover, .big-img:focus,
.big-img:hover *, .big-img:focus * { text-decoration: none; }

/* 4. HEADER / BRANDING BAR =============================================== */
/* COSMETIC ONLY on the theme's real header classes (#masthead.site-header,
   .site-header-inner, .site-branding, .site-title, .top-menu, .mob-hamburger).
   The theme's header layout already works — we only brand it red + white. */
.site-header { background: var(--mc-red-grad); box-shadow: 0 2px 8px rgba(40,24,12,.18); }
.site-title, .site-title a { color: #fff; font-family: var(--mc-font-display); font-weight: 900; }
.site-title a:hover { color: var(--mc-yellow); }
.site-description { color: rgba(255,255,255,.82); }
.site-logotype img,
.mc-site-logo { height: 42px; width: auto; }
.mc-site-logo { margin-right: 12px; vertical-align: middle; }   /* injected logo (see maccies.js) */

/* Top menu (real: .top-menu > .menu > li > a) — recolour only, keep theme layout. */
.top-menu .menu a {
    color: rgba(255,255,255,.92); font-weight: 600; text-decoration: none;
    border-radius: var(--mc-r-sm); padding: .4rem .7rem; transition: var(--mc-t);
}
.top-menu .menu a:hover,
.top-menu .menu .current-menu-item > a { color: var(--mc-ink); background: var(--mc-yellow); }

/* Mobile hamburger uses border lines in the theme — make them white on red. */
.mob-hamburger { border-color: #fff; }
.mob-hamburger:before, .mob-hamburger:after,
.mob-hamburger span { background: #fff; }

/* The header separator the theme prints when the main nav is empty. */
.header-separator { border: 0; }

.burger-menu {
    display: none; width: 44px; height: 44px; border-radius: var(--mc-r-sm);
    align-items: center; justify-content: center; cursor: pointer; flex: none;
    background: transparent; border: 0; transition: var(--mc-t);
}
.burger-menu:hover,
.burger-menu[aria-expanded="true"] { background: rgba(0,0,0,.16); }
.burger-menu__lines, .burger-menu__lines::before, .burger-menu__lines::after {
    content: ""; display: block; width: 22px; height: 2.5px; border-radius: 3px;
    background: #fff; transition: var(--mc-t);
}
.burger-menu__lines { position: relative; }
.burger-menu__lines::before { position: absolute; top: -7px; }
.burger-menu__lines::after  { position: absolute; top: 7px; }
.burger-menu[aria-expanded="true"] .burger-menu__lines { background: transparent; }
.burger-menu[aria-expanded="true"] .burger-menu__lines::before { top: 0; transform: rotate(45deg); }
.burger-menu[aria-expanded="true"] .burger-menu__lines::after  { top: 0; transform: rotate(-45deg); }

/* 5. PRIMARY NAVIGATION ================================================== */
.main-navigation { background: var(--mc-red); border-top: 1px solid rgba(255,255,255,.12); }
.main-navigation .container { display: flex; }
.main-navigation__wrap { width: 100%; }
.nav-menu, .main-navigation ul.menu {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: nowrap; gap: .1rem; align-items: center;
}
.nav-menu li { position: relative; }
.nav-menu a {
    display: block; padding: .7rem .8rem; color: rgba(255,255,255,.92);
    font-weight: 600; font-size: .95rem; white-space: nowrap;
    text-decoration: none; border-radius: var(--mc-r-sm); transition: var(--mc-t);
}
/* Nav that lives inside the single red top bar (homepage / reference layout) */
.site-branding-bar__inner .main-navigation { background: transparent; border: 0; }
.site-branding-bar__inner .nav-menu { flex-wrap: nowrap; }
.nav-menu a:hover { color: #fff; background: rgba(0,0,0,.16); }
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a,
.nav-menu a.is-active { color: var(--mc-ink) !important; background: var(--mc-yellow) !important; }

/* The live "Root" theme + Customizer style .main-navigation ul li a (dark text,
   Arial, a grey "current" box) at higher specificity than .nav-menu a, so scope
   these with the bar + nav classes to win and restore the preview's look. */
.site-branding-bar .main-navigation,
.site-branding-bar .main-navigation .main-navigation__wrap,
.site-branding-bar .main-navigation .menu,
.site-branding-bar .main-navigation .nav-menu,
.site-branding-bar .main-navigation .nav-menu li,
.site-branding-bar .main-navigation .nav-menu a { border: 0; box-shadow: none; background-color: transparent; }
.site-branding-bar .main-navigation .nav-menu a {
    display: block; padding: .55rem .8rem; border: 0; border-radius: var(--mc-r-sm);
    color: rgba(255,255,255,.94); background: transparent;
    font-family: var(--mc-font-display); font-weight: 700; font-size: .98rem;
    font-style: normal; text-transform: none; line-height: 1; white-space: nowrap;
    text-decoration: none; transition: var(--mc-t);
}
.site-branding-bar .main-navigation .nav-menu a:hover { color: #fff; background: rgba(0,0,0,.18); }
/* ACTIVE / CURRENT nav item — the yellow pill from the reference.
   The Root theme puts the highlight box on the <li> (.main-navigation ul
   li.current-menu-item { background: rgba(255,255,255,.2) }) and forces the
   <a> text #000, while our own reset zeroes both li and a backgrounds. So we
   override BOTH elements, with !important, to guarantee the yellow wins no
   matter which one the theme/Customizer paints. */
.site-branding-bar .main-navigation .nav-menu li.current-menu-item,
.site-branding-bar .main-navigation .nav-menu li.current_page_item,
.site-branding-bar .main-navigation .nav-menu li.current-menu-ancestor {
    background: var(--mc-yellow) !important; border-radius: var(--mc-r-sm);
}
.site-branding-bar .main-navigation .nav-menu .current-menu-item > a,
.site-branding-bar .main-navigation .nav-menu .current_page_item > a,
.site-branding-bar .main-navigation .nav-menu .current-menu-ancestor > a {
    color: var(--mc-ink) !important; background: var(--mc-yellow) !important;
}
.nav-menu .sub-menu {
    position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 60;
    background: #fff; border-radius: var(--mc-r); padding: .4rem;
    box-shadow: var(--mc-shadow-lg); border: 1px solid var(--mc-line);
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: var(--mc-t);
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .sub-menu a { color: var(--mc-ink); }
.nav-menu .sub-menu a:hover { background: var(--mc-bg-2); color: var(--mc-red-600); }

/* 6. HEADER SEARCH ====================================================== */
/* (a) Live "Root" theme markup — kept compact so the nav always has room. */
.header-search__form { display: flex; align-items: center; }
.header-search__field {
    height: 42px; border: 0; border-radius: var(--mc-r-pill) 0 0 var(--mc-r-pill);
    padding: 0 1rem; min-width: 0; width: 150px; max-width: 26vw;
    font: inherit; background: #fff; color: var(--mc-ink);
}
.header-search__field::placeholder { color: var(--mc-muted); }
.header-search__submit {
    height: 42px; width: 46px; border: 0; cursor: pointer;
    border-radius: 0 var(--mc-r-pill) var(--mc-r-pill) 0;
    background: var(--mc-yellow); color: var(--mc-ink);
    display: inline-flex; align-items: center; justify-content: center; transition: var(--mc-t);
}
.header-search__submit:hover { background: var(--mc-yellow-600); }
.header-search__submit svg { width: 20px; height: 20px; }

/* (b) Compact icon + dropdown panel (preview / reference single-bar layout).
       The magnifier icon keeps the bar tidy so all nav items fit. */
.mc-search { position: relative; flex: none; }
.mc-search__toggle {
    width: 42px; height: 42px; border: 0; cursor: pointer; border-radius: 50%;
    background: var(--mc-yellow); color: var(--mc-ink);
    display: inline-flex; align-items: center; justify-content: center; transition: var(--mc-t);
}
.mc-search__toggle:hover { background: var(--mc-yellow-600); transform: scale(1.05); }
.mc-search__toggle svg { width: 20px; height: 20px; }
.mc-search__panel {
    position: absolute; top: calc(100% + 12px); right: 0; z-index: 70;
    display: flex; width: min(86vw, 360px);
    background: #fff; border-radius: var(--mc-r-pill); box-shadow: var(--mc-shadow-lg);
    overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: var(--mc-t);
}
.mc-search.is-open .mc-search__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.mc-search__panel input {
    flex: 1; min-width: 0; height: 48px; border: 0; font: inherit;
    padding: 0 1.1rem; background: #fff; color: var(--mc-ink);
}
.mc-search__panel button {
    width: 50px; border: 0; cursor: pointer; background: var(--mc-red); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; transition: var(--mc-t);
}
.mc-search__panel button:hover { background: var(--mc-red-600); }
.mc-search__panel button svg { width: 19px; height: 19px; }

/* Search feedback shown in the Popular Items section */
.mc-search-status { text-align: center; color: var(--mc-muted); margin: 0 0 var(--mc-4); min-height: 1.2em; }
.is-search-hidden { display: none !important; }

/* 7. HERO (homepage) ==================================================== */
.mc-hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(120% 120% at 85% -10%, rgba(255,199,44,.20), transparent 55%),
        linear-gradient(160deg, #2a201a 0%, var(--mc-hero-ink) 55%, #120c09 100%);
}
.mc-hero::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
    background: radial-gradient(60% 100% at 70% 100%, rgba(255,199,44,.12), transparent 70%);
    pointer-events: none;
}
.mc-hero__inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--mc-7);
    padding: clamp(2rem, 1rem + 4vw, 4.5rem) 0;
}
.mc-badge {
    display: inline-flex; align-items: center; gap: .5em;
    margin-bottom: var(--mc-5);
    font-family: var(--mc-font-display); font-weight: 800; font-size: .78rem;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--mc-ink); background: var(--mc-gold-grad);
    padding: .5em 1em; border-radius: var(--mc-r-pill); box-shadow: var(--mc-shadow-gold);
}
.mc-hero__title { font-size: var(--mc-fs-hero); font-weight: 900; line-height: 1.04; margin: 0 0 var(--mc-4); color: #fff; letter-spacing: -0.02em; }
.mc-hero__title span { color: var(--mc-yellow); display: block; }
.mc-hero__text { color: rgba(255,255,255,.82); font-size: var(--mc-fs-lead); max-width: 46ch; margin: 0 0 var(--mc-5); }
.mc-hero__search { display: flex; max-width: 520px; box-shadow: var(--mc-shadow-lg); border-radius: var(--mc-r-pill); }
.mc-hero__search input {
    flex: 1; min-width: 0; height: 56px; border: 0; font: inherit;
    padding: 0 1.4rem; border-radius: var(--mc-r-pill) 0 0 var(--mc-r-pill);
    background: #fff; color: var(--mc-ink);
}
.mc-hero__search button {
    height: 56px; width: 58px; border: 0; cursor: pointer; color: #fff;
    background: var(--mc-red); border-radius: 0 var(--mc-r-pill) var(--mc-r-pill) 0;
    display: inline-flex; align-items: center; justify-content: center; transition: var(--mc-t);
}
.mc-hero__search button:hover { background: var(--mc-red-600); }
.mc-hero__media { justify-self: center; width: 100%; }
.mc-hero__media img {
    display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto;
    filter: drop-shadow(0 26px 40px rgba(0,0,0,.5));
    animation: mc-float 6s var(--mc-ease) infinite;
}
@keyframes mc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* 8. SECTION SCAFFOLDING ================================================ */
/* The theme already wraps content in #content.site-content.container (1170px)
   with 20px side padding, so we don't re-constrain the column width — we only
   make the .mc-* sections fill that column so the hero, tiles, card grid and
   panels line up edge-to-edge. The hero gets its own inner padding (sec. 7 /
   below) so its text isn't flush against the dark box. */
#primary.content-area .mc-container { width: 100%; max-width: none; margin-inline: 0; }
/* The full-width rule above strips the container's side gutter, which leaves the
   tinted About band's bare text flush against the band edges on the live site
   (the preview keeps the gutter via .mc-container's own width). Re-inset just the
   tinted band so its content breathes like the preview. Scoped to #primary so the
   standalone preview, which has no gutter problem, is untouched. */
#primary.content-area .mc-section--tint > .mc-container { padding-inline: clamp(1rem, 3vw, 2.5rem); }

.mc-container { width: min(100% - 2rem, var(--mc-container)); margin-inline: auto; }
.mc-section { padding: var(--mc-section-y) 0; }
.mc-section--tint { background: var(--mc-bg-2); }
.mc-section__head { text-align: center; margin-bottom: var(--mc-6); }
.mc-section__title { font-size: var(--mc-fs-h2); font-weight: 800; margin: 0; }
.mc-section__title--bar { position: relative; display: inline-block; padding-bottom: .5rem; }
.mc-section__title--bar::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
    width: 72px; height: 4px; border-radius: 4px; background: var(--mc-gold-grad);
}

/* 9. CATEGORY GRID ===================================================== */
.mc-cat-grid { display: grid; gap: var(--mc-4); grid-template-columns: repeat(7, 1fr); }
.mc-cat {
    display: flex; flex-direction: column; align-items: center; gap: .65rem;
    padding: var(--mc-4) var(--mc-2); text-decoration: none; color: var(--mc-ink);
    background: var(--mc-surface); border: 1px solid var(--mc-line);
    border-radius: var(--mc-r); box-shadow: var(--mc-shadow-sm); transition: var(--mc-t);
}
.mc-cat:hover { transform: translateY(-4px); border-color: var(--mc-yellow); box-shadow: var(--mc-shadow); }
.mc-cat__img { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--mc-bg-2); }
.mc-cat__img img { width: 78px; height: 78px; object-fit: contain; }
.mc-cat__name { font-weight: 700; font-size: .92rem; text-align: center; line-height: 1.2; }

/* 10. PRODUCT / MENU CARDS =============================================== */
/* -------------------------------------------------------------------------
   LIVE THEME CARDS — COSMETIC ONLY.
   The "Root" theme already lays these out with a working grid
   (.posts-container-menu = grid repeat(4,1fr); a.big-img = display:block;
   .post-card-menu = height:100%). We must NEVER set display / grid /
   grid-template-columns / width / flex / aspect-ratio on these classes,
   or the layout collapses. We only restyle appearance.
   ------------------------------------------------------------------------- */
.post-card-menu {
    position: relative;            /* containing block for the heart; does NOT move the card */
    box-sizing: border-box;
    margin: 0;                     /* no outer margin on the card */
    background: var(--mc-surface);
    border: 1px solid var(--mc-line);
    border-radius: var(--mc-r);
    box-shadow: var(--mc-shadow-sm);
    padding: var(--mc-3);
    transition: transform var(--mc-t), box-shadow var(--mc-t), border-color var(--mc-t);
}
.big-img:hover .post-card-menu,
.post-card-menu:hover {
    transform: translateY(-4px);
    box-shadow: var(--mc-shadow-lg);
    border-color: var(--mc-yellow);
}
.post-card-menu .post-card__image {
    position: relative;
    border-radius: var(--mc-r-sm);
    overflow: hidden;
    background: radial-gradient(75% 75% at 50% 40%, #fff 0%, var(--mc-bg-2) 100%);
    /* Uniform, square image area with the product centred in it. */
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: var(--mc-3);
}
.post-card-menu .post-card__image picture { display: contents; }
.post-card-menu .post-card__image img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain;
    transition: transform 280ms var(--mc-ease);
}
.big-img:hover .post-card-menu .post-card__image img,
.post-card-menu:hover .post-card__image img { transform: scale(1.05); }
.post-card-menu .entry-name-menu,
.post-card-menu .entry-name-menu a { font-family: var(--mc-font-display); color: var(--mc-ink); }
.post-card-menu .entry-name-menu a:hover { color: var(--mc-red); }
/* .cena-menu holds the price for products, but the theme reuses it for an excerpt
   on page results (search/archive) — clamp it so a long excerpt can't blow up the
   card height. Real prices are one line, so they're unaffected. */
.post-card-menu .cena-menu {
    color: var(--mc-red); font-family: var(--mc-font-display);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-menu .cal { color: var(--mc-muted); font-size: var(--mc-fs-sm); font-weight: 600; }
/* text_promo: the "New" / "Limited time" flag — pin it to the image corner so
   it doesn't sit in the middle of the (grid-centred) product image. */
.post-card-menu .text_promo {
    /* The theme sets .text_promo { bottom:0; width:100% } — we must reset both,
       or top:8px + bottom:0 stretch it into a full-height bar. */
    position: absolute; top: 8px; left: 8px; right: auto; bottom: auto;
    width: auto; height: auto; z-index: 2; margin: 0;
    padding: .28em .7em; font-size: .62rem; line-height: 1; text-transform: uppercase;
    color: #fff; background: var(--mc-red);
    border-radius: var(--mc-r-pill); font-family: var(--mc-font-display);
    font-weight: 800; letter-spacing: .04em; box-shadow: var(--mc-shadow-sm);
}
/* a.big-img — matches the theme's own treatment (needed when theme CSS is absent, e.g. the preview) */
.big-img { display: block; color: inherit; text-decoration: none; }

/* OWN the menu grid — this loads after the theme's flex rules and overrides them
   on equal specificity, so we no longer depend on them. Cards are equal height
   per row: the grid stretches each cell and the inner card fills it regardless of
   promo badges or name length. */
.posts-container-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--mc-5);
    align-items: stretch;
    margin: var(--mc-5) 0;
}
.posts-container-menu .post-card-block-menu {
    width: auto; margin: 0; padding: 0; border: 0;
    display: flex; flex-direction: column;
}
/* Two card shapes share this grid: menu cards wrap the card in <a.big-img>;
   search/archive cards put .post-card-menu directly in the block. Make whichever
   one is the block's child fill the height so every card box is equal height. */
.posts-container-menu .post-card-block-menu > .big-img,
.posts-container-menu .post-card-block-menu > .post-card-menu { display: flex; flex-direction: column; flex: 1; }
.posts-container-menu .post-card-menu { height: 100%; display: flex; flex-direction: column; }
.posts-container-menu .post-card-menu > .entry-headers-menu { margin-top: auto; }
.posts-container-menu .gds { grid-column: 1 / -1; margin: 0; }
@media (max-width: 900px) { .posts-container-menu { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .posts-container-menu { grid-template-columns: repeat(2, 1fr); gap: var(--mc-4); } }

/* Search / archive results: the theme gives these a sidebar, which squeezes the
   card grid into a narrow column. Drop the sidebar and let the grid use the full
   width so it matches the menu pages and the preview. */
.search #secondary, .search-results #secondary,
.archive #secondary, .blog #secondary { display: none; }
.search #primary.content-area, .search-results #primary.content-area,
.archive #primary.content-area, .blog #primary.content-area {
    float: none; width: auto; max-width: none;
}
.search .page-title, .search-results .page-title { margin-bottom: var(--mc-5); }

/* Ad slots: keep tidy, never let an empty slot push the grid around. */
.gds:empty { display: none; }

/* -------------------------------------------------------------------------
   PREVIEW-ONLY CARDS (.mc-products / .mc-product*) — full layout.
   These classes exist only in preview/index.html, never on the live site,
   so giving them their own grid is safe.
   ------------------------------------------------------------------------- */
.mc-products {
    display: grid; gap: var(--mc-4);
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: var(--mc-5) 0;
}
/* In the preview, cards use the real .post-card-* classes inside .mc-products,
   so give those a sensible image box ONLY within the preview grid. */
.mc-products .post-card__image { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: var(--mc-4); }
.mc-products .post-card__image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mc-products .entry-headers-menu { padding-top: var(--mc-3); }

/* 11. POPULAR ITEMS — favourite control (homepage component) =========== */
.mc-fav {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--mc-line);
    background: #fff; color: var(--mc-muted); cursor: pointer;
    display: grid; place-items: center; box-shadow: var(--mc-shadow-sm); transition: var(--mc-t);
}
.mc-fav:hover { color: var(--mc-red); border-color: var(--mc-red); transform: scale(1.08); }
.mc-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mc-fav.is-active { color: var(--mc-red); border-color: var(--mc-red); }
.mc-fav.is-active svg { fill: currentColor; stroke: currentColor; }
.mc-fav:active { transform: scale(.92); }

/* 12. PANELS: What's New / Why Choose ================================== */
.mc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mc-5); align-items: start; }
.mc-panel {
    background: var(--mc-surface); border: 1px solid var(--mc-line);
    border-radius: var(--mc-r-lg); padding: clamp(1.25rem, 1rem + 1vw, 2rem); box-shadow: var(--mc-shadow-sm);
}
.mc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--mc-5); }
.mc-panel__title { font-size: var(--mc-fs-h3); font-weight: 800; margin: 0; }
.mc-panel__link { font-weight: 700; text-decoration: none; color: var(--mc-red); white-space: nowrap; }
.mc-panel__link:hover { text-decoration: underline; }

.mc-whatsnew { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mc-4); }
.mc-whatsnew__item { text-align: center; text-decoration: none; color: var(--mc-ink); }
.mc-whatsnew__img {
    position: relative; aspect-ratio: 1/1; border-radius: var(--mc-r); overflow: hidden;
    background: radial-gradient(75% 75% at 50% 40%, #fff, var(--mc-bg-2)); display: grid; place-items: center;
    border: 1px solid var(--mc-line); transition: var(--mc-t);
}
.mc-whatsnew__item:hover .mc-whatsnew__img { transform: translateY(-3px); box-shadow: var(--mc-shadow); border-color: var(--mc-yellow); }
.mc-whatsnew__img img { width: 80%; height: 80%; object-fit: contain; }
.mc-whatsnew__name { font-weight: 700; font-size: .9rem; margin: .6rem 0 .2rem; }
.mc-whatsnew__price { color: var(--mc-red); font-weight: 800; }
.mc-whatsnew__kcal { color: var(--mc-muted); font-size: var(--mc-fs-sm); }
.mc-tag-new {
    position: absolute; top: 8px; left: 8px; background: var(--mc-yellow); color: var(--mc-ink);
    font-family: var(--mc-font-display); font-weight: 800; font-size: .62rem; letter-spacing: .05em;
    text-transform: uppercase; padding: .25em .55em; border-radius: var(--mc-r-pill);
}

.mc-why { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mc-5) var(--mc-4); }
.mc-why__item { display: flex; gap: .85rem; align-items: flex-start; }
.mc-why__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mc-bg-2); color: var(--mc-red); font-size: 1.25rem; }
.mc-why__item:nth-child(2) .mc-why__icon { color: #2e7d32; background: #eaf5ea; }
.mc-why__item:nth-child(3) .mc-why__icon { color: var(--mc-yellow-600); background: #fff6dc; }
.mc-why__item:nth-child(4) .mc-why__icon { color: var(--mc-red); background: #fdecea; }
.mc-why__title { font-family: var(--mc-font-display); font-weight: 700; font-size: .98rem; margin: 0 0 .15rem; }
.mc-why__text { color: var(--mc-muted); font-size: var(--mc-fs-sm); line-height: 1.5; margin: 0; }

/* 13. POPULAR CATEGORIES TABLE ========================================= */
.mc-poplist { display: flex; flex-direction: column; }
.mc-poplist__row {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem;
    padding: .85rem .4rem; border-bottom: 1px solid var(--mc-line-2);
}
.mc-poplist__row:last-child { border-bottom: 0; }
.mc-poplist__name { font-weight: 700; }
.mc-poplist__price { color: var(--mc-muted); font-size: .92rem; }
.mc-poplist__link { color: var(--mc-red); font-weight: 700; text-decoration: none; }
.mc-poplist__link:hover { text-decoration: underline; }

/* 14. BREAKFAST / COUPONS / WRAPSDAY =================================== */
.breakfast-info {
    background: var(--mc-gold-grad); color: var(--mc-ink);
    border-radius: var(--mc-r-lg); padding: clamp(1.25rem, 1rem + 1vw, 2rem);
    box-shadow: var(--mc-shadow-gold); margin: var(--mc-6) auto;
    max-width: 720px; text-align: center;
}
.breakfast-info__title { font-family: var(--mc-font-display); font-weight: 800; margin: 0 0 .35rem; }
.breakfast-info__time { font-size: var(--mc-fs-lead); font-weight: 600; margin: 0; }

.coupons-container { display: grid; gap: var(--mc-5); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: var(--mc-5) 0; }
.coupon-card {
    display: flex; flex-direction: column; background: var(--mc-surface);
    border: 1px solid var(--mc-line); border-radius: var(--mc-r-lg); overflow: hidden;
    box-shadow: var(--mc-shadow-sm); transition: var(--mc-t);
}
.coupon-card:hover { transform: translateY(-4px); box-shadow: var(--mc-shadow-lg); border-color: var(--mc-yellow); }
.coupon-card__img { aspect-ratio: 16/10; display: grid; place-items: center; background: var(--mc-bg-2); }
.coupon-card__img img { max-width: 88%; max-height: 88%; object-fit: contain; }
.coupon-card__body { padding: var(--mc-4); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.coupon-card__title { font-family: var(--mc-font-display); font-weight: 800; font-size: 1.05rem; margin: 0; }
.coupon-card__desc { color: var(--mc-muted); font-size: .9rem; margin: 0; }
.coupon-card__code {
    align-self: flex-start; font-family: var(--mc-font-display); font-weight: 800; letter-spacing: .08em;
    color: var(--mc-red); background: #fdecea; border: 1px dashed var(--mc-red);
    padding: .45em .8em; border-radius: var(--mc-r-sm);
}
.coupon-card__expiry { color: var(--mc-muted); font-size: var(--mc-fs-sm); }
.coupon-card .coupon-btn { margin-top: auto; }

.wrapsday-schedule { display: grid; gap: var(--mc-3); grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); margin: var(--mc-5) 0; }
.wrapsday-day {
    display: flex; flex-direction: column; gap: .25rem; padding: var(--mc-4);
    background: var(--mc-surface); border: 1px solid var(--mc-line); border-radius: var(--mc-r); box-shadow: var(--mc-shadow-sm);
}
.wrapsday-day__name { font-family: var(--mc-font-display); font-weight: 800; color: var(--mc-red); }
.wrapsday-day__wrap { color: var(--mc-ink-2); }

/* 15. WP BLOCK TABLES =================================================== */
.wp-block-table { overflow-x: auto; margin: var(--mc-5) 0; }
.wp-block-table table { width: 100%; border-collapse: collapse; background: var(--mc-surface); border-radius: var(--mc-r); overflow: hidden; box-shadow: var(--mc-shadow-sm); }
.wp-block-table th, .wp-block-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--mc-line-2); }
.wp-block-table thead th { background: var(--mc-red); color: #fff; font-family: var(--mc-font-display); }
.wp-block-table tbody tr:nth-child(even) { background: var(--mc-bg); }

/* 16. FOOTER =========================================================== */
/* Real live footer classes (cosmetic only): .site-footer > .site-footer-inner
   > .footer-bottom > .footer-info ( text + .footer-text ). */
.site-footer { background: var(--mc-red-grad); color: rgba(255,255,255,.9); margin-top: var(--mc-8); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--mc-yellow); }
.site-footer-inner { padding-top: var(--mc-6); padding-bottom: var(--mc-6); }
.footer-bottom { padding: var(--mc-4) 0; }
.footer-info { color: #fff; font-weight: 600; }
.footer-text { color: rgba(255,255,255,.78); font-size: var(--mc-fs-sm); font-weight: 400; line-height: 1.6; margin-top: var(--mc-3); }
.footer-counters { color: rgba(255,255,255,.7); margin-top: var(--mc-3); }
/* Back-to-top button the theme prints. */
.scrolltop { background: var(--mc-yellow); border: 0; border-radius: 50%; box-shadow: var(--mc-shadow); }

.mc-footer-logo { height: 42px; width: auto; display: block; margin: 0 0 var(--mc-3); }
.footer-widgets { padding: var(--mc-7) 0 var(--mc-5); }
/* The theme styles this same .footer-widgets class and, at >=768px, applies
   margin-left/right: -20px to bleed into its original footer's padding. Our
   redesign uses .mc-container for gutters instead, so those negative margins
   just push .footer-widgets 40px past the viewport -> horizontal scroll on
   every page. Reset them (and pin width) so the footer stays inside the page. */
.footer-widgets { width: 100%; margin-left: 0; margin-right: 0; }
.footer-widgets__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--mc-6); }
/* Let columns shrink and let the theme's nowrap social row wrap, so a populated
   "Follow Us" column can't reintroduce overflow on narrow screens. */
.footer-widgets__column { min-width: 0; }
.footer-widgets__column .social-buttons { white-space: normal; }
.footer-widgets__column .widget-title,
.footer-widgets__column h2, .footer-widgets__column h3 {
    font-family: var(--mc-font-display); font-weight: 800; color: #fff; margin: 0 0 var(--mc-4);
}
.footer-widgets__column ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-widgets__column a { color: rgba(255,255,255,.85); text-decoration: none; transition: var(--mc-t); }
.footer-widgets__column a:hover { color: var(--mc-yellow); padding-left: 4px; }
.site-info { background: rgba(0,0,0,.18); }
.site-info__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--mc-4) 0; }
.site-info__copyright, .site-info__credits { color: rgba(255,255,255,.85); font-size: var(--mc-fs-sm); }
.site-info a { color: #fff; }
/* Bottom-bar credits menu renders as an inline · separated row */
.site-info__credits ul, .site-info__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.site-info__credits li { position: relative; }
.site-info__credits li:not(:last-child)::after { content: "·"; position: absolute; right: -.5rem; color: rgba(255,255,255,.5); }

.mc-social { display: flex; gap: .5rem; }
.mc-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; transition: var(--mc-t); }
.mc-social a:hover { background: var(--mc-yellow); color: var(--mc-ink); transform: translateY(-2px); }
.mc-social svg { width: 18px; height: 18px; }

/* 17. UTILITIES, A11Y & MOTION ========================================= */
.mc-text-center { text-align: center; }
.mc-mt-0 { margin-top: 0 !important; }
:where(a, button, input, [tabindex]):focus-visible { outline: none; box-shadow: var(--mc-ring); border-radius: var(--mc-r-sm); }
.skip-link:focus { background: var(--mc-yellow); color: var(--mc-ink); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 18. RESPONSIVE ======================================================= */
@media (max-width: 992px) {
    .mc-cat-grid { grid-template-columns: repeat(4, 1fr); }
    .mc-hero__inner { grid-template-columns: 1fr; }
    .mc-hero__media { display: none; }
    .mc-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .burger-menu { display: inline-flex; }
    .header-search, .mc-search { display: none; }

    /* The bar becomes the positioning context for the dropdown panel. */
    .site-branding-bar__inner { position: relative; }

    /* Collapsed by default; maccies.js sets inline display:block to open. When
       open, the nav is a full-width panel that drops straight below the red bar
       (absolute, so it overlays the page instead of being squeezed onto the bar's
       flex row — that squeeze was what scattered the items to the right). */
    .site-branding-bar__inner > .main-navigation {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0; z-index: 80;
        width: 100%; margin: 0;
        background: var(--mc-red-700);
        border-top: 1px solid rgba(255,255,255,.16);
        box-shadow: var(--mc-shadow-lg);
    }
    .site-branding-bar__inner > .main-navigation[style*="block"] { display: block; }
    .site-branding-bar__inner .main-navigation__wrap { width: 100%; }

    /* Stack the items into a clean, full-width list. */
    .nav-menu, .main-navigation ul.menu { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-menu li { float: none; width: 100%; }
    .nav-menu a {
        display: block; width: 100%; padding: .95rem var(--mc-4);
        border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .nav-menu li:last-child > a { border-bottom: 0; }
    .nav-menu .sub-menu { position: static; box-shadow: none; background: rgba(0,0,0,.12); }

    .mc-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .mc-why { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .mc-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .mc-whatsnew { grid-template-columns: 1fr; gap: var(--mc-3); }
    .mc-products { grid-template-columns: repeat(2, 1fr); }   /* preview only; live keeps theme's own breakpoint */
    .site-info__inner { flex-direction: column; text-align: center; }
}

/* 19. LIVE HEADER BAR (preview markup is now the live markup) ============
   The theme templates now emit the single red branding bar from the preview:
   #masthead.site-header > .site-branding-bar > .mc-container >
   .site-branding-bar__inner ( burger · branding · nav · search ).
   .site-header / .nav-menu / .mc-search / .burger-menu colours come from
   sections 4–6 above; here we only lay the bar out. */
.site-branding-bar { width: 100%; }
.site-branding-bar__inner {
    display: flex; align-items: center; gap: var(--mc-5);
    min-height: 74px; padding: .55rem 0;
}
.site-branding { display: flex; align-items: center; gap: .7rem; flex: none; }
.site-branding__logo { display: inline-flex; align-items: center; }
.site-branding__logo img { height: 42px; width: auto; display: block; }
.site-branding__title { display: inline-flex; }
.site-branding__title, .site-branding__title a {
    font-family: var(--mc-font-display); font-weight: 900; font-size: 1.5rem;
    color: #fff; text-decoration: none; line-height: 1; letter-spacing: -0.01em;
}
.site-branding__title a:hover { color: var(--mc-yellow); }
/* Nav floats to the right; the search sits at the far right after it. */
.site-branding-bar__inner .main-navigation { margin-left: auto; }
.site-branding-bar__inner .main-navigation__wrap { width: auto; }
.site-branding-bar__inner .nav-menu { gap: .15rem; }

/* Inset hero — inside the content column the hero is a rounded banner rather
   than a full-bleed strip, so it reads as a deliberate card. */
.mc-hero--inset { border-radius: var(--mc-r-lg); margin: 0 0 var(--mc-6); }
.mc-hero--inset .mc-hero__inner { padding: clamp(1.75rem, 1rem + 3vw, 3rem) clamp(1.5rem, 4vw, 3.5rem); }

/* About + Popular Categories block (was preview-inline; now part of the theme). */
.mc-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mc-6); align-items: start; }
.mc-about__title { font-size: var(--mc-fs-h2); font-weight: 800; margin: 0 0 var(--mc-4); }
.mc-about p { color: var(--mc-ink-2); line-height: 1.7; }
.mc-about .mc-btn { margin-top: var(--mc-3); }
@media (max-width: 768px) { .mc-about-grid { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
    .site-branding-bar__inner { gap: var(--mc-3); min-height: 60px; }
    .site-branding__title, .site-branding__title a { font-size: 1.2rem; }
    /* On small screens the nav drops below the bar and the burger toggles it.
       The search is hidden on mobile, so burger + branding sit left-aligned. */
    .site-branding-bar__inner > .main-navigation { margin-left: 0; }
}

/* =========================================================================
   INTEGRATION (WordPress)
   Option A — Customizer (fastest, no file edits):
     Appearance → Customize → Additional CSS → paste this file's contents,
     and add the fonts in your <head> (or via a plugin):
       <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
   Option B — Child theme (recommended, version-safe):
     In the child theme functions.php:
       add_action('wp_enqueue_scripts', function () {
         wp_enqueue_style('maccies-fonts','https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Roboto:wght@400;500;700;900&display=swap');
         wp_enqueue_style('maccies-design', get_stylesheet_directory_uri().'/maccies-design.css', array('root-style'), '1.0');
       }, 20);
   Do NOT edit the parent "Root" theme files (they are overwritten on update).
   ========================================================================= */

/* AdSense: collapse slots Google couldn't fill so they don't reserve empty
   height (e.g. the 600px auto-ads skyscraper on the Vouchers page). ====== */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }