/* Mcuire site style: touch-ups and animation for the restaurant theme
   (Patterns Restaurant). Loaded on every page of mcuire.ca when "Site style"
   is on in Cooking Courses → Settings. Content is untouched; switch it off
   and the site looks exactly as before. */

:root {
  --mcu-orange: #f39c12;
  --mcu-orange-deep: #d9810a;
  --mcu-brown: #5e2d12;
  --mcu-clay: #b45a33;
  --mcu-green: #2f6b3a;
  --mcu-gold: #e0a22a;
  --mcu-night: #041314;
  --mcu-cream: #fbf6ee;
  --mcu-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mcu-kente: repeating-linear-gradient(90deg,
    var(--mcu-orange) 0 22px, var(--mcu-brown) 22px 30px, var(--mcu-night) 30px 34px,
    var(--mcu-green) 34px 52px, var(--mcu-gold) 52px 60px, var(--mcu-night) 60px 64px);
}

::selection { background: var(--mcu-orange); color: #fff; }
html { scroll-behavior: smooth; }

/* ------------------------------------------------------------------ Header */
.patterns-restaurant-header.at-pos {
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 999;
  transition: transform 0.4s var(--mcu-ease);
  animation: mcu-drop 0.8s var(--mcu-ease) backwards; /* backwards: once finished it leaves no transform, which would trap the phone menu */
}
body.admin-bar .patterns-restaurant-header.at-pos { top: 32px; }
@media (max-width: 782px) { body.admin-bar .patterns-restaurant-header.at-pos { top: 46px; } }
@keyframes mcu-drop { from { transform: translateY(-110%); opacity: 0; } to { transform: none; opacity: 1; } }

/* The white bar: frosted glass, rounded, with a woven kente edge */
.patterns-restaurant-header .wp-block-group.alignwide.has-background {
  position: relative; overflow: hidden;
  /* Solid (no backdrop blur): a blur would trap the phone menu inside this bar */
  background: rgba(255, 255, 255, 0.97) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 40px -22px rgba(4, 19, 20, 0.55);
  padding: 10px 22px 14px !important;
  flex-wrap: nowrap !important; gap: 18px !important; align-items: center !important;
  transition: padding 0.3s var(--mcu-ease), box-shadow 0.3s var(--mcu-ease), border-radius 0.3s var(--mcu-ease);
}
.patterns-restaurant-header .wp-block-group.alignwide.has-background::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--mcu-kente); background-size: 64px 5px;
  animation: mcu-weave 12s linear infinite;
}
@keyframes mcu-weave { to { background-position: 640px 0; } }
.patterns-restaurant-header > .wp-block-template-part > .wp-block-group > .wp-block-group {
  padding-top: 14px !important; padding-bottom: 0 !important; transition: padding 0.3s var(--mcu-ease);
}

/* The logo already says MCUIRE, so the long site name is kept for screen readers only */
.patterns-restaurant-header .wp-block-site-title {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.patterns-restaurant-header .wp-block-site-logo img { height: 58px !important; width: auto !important; transition: height 0.3s var(--mcu-ease), transform 0.3s var(--mcu-ease); }
.patterns-restaurant-header .wp-block-site-logo a:hover img { transform: rotate(-3deg) scale(1.04); }
.patterns-restaurant-header .wp-block-group.is-nowrap { flex: 1 1 auto; min-width: 0; gap: 18px; }

/* Menu: one tidy row, animated underline */
.patterns-restaurant-header .wp-block-navigation { flex: 1 1 auto; justify-content: center; }
.patterns-restaurant-header .wp-block-navigation__container { gap: 4px 14px !important; flex-wrap: wrap; justify-content: center; }
@media (min-width: 1300px) and (max-width: 1400px) { .patterns-restaurant-header .wp-block-navigation__container { gap: 4px 11px !important; } .patterns-restaurant-header .wp-block-navigation-item__content { font-size: 11.5px !important; letter-spacing: 0.06em !important; } }
/* Tablets and small laptops: use the tidy ☰ menu instead of a menu that wraps */
@media (min-width: 600px) and (max-width: 1299px) {
  .patterns-restaurant-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid !important; }
  .patterns-restaurant-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
  .patterns-restaurant-header .wp-block-navigation { flex: 0 0 auto; margin-left: auto; }
}
.patterns-restaurant-header .wp-block-navigation-item__content {
  position: relative; padding: 8px 2px !important; font-size: 12.5px !important; font-weight: 600 !important;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; color: var(--mcu-night) !important;
  transition: color 0.2s var(--mcu-ease);
}
.patterns-restaurant-header .wp-block-navigation-item__content::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--mcu-orange); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--mcu-ease);
}
.patterns-restaurant-header .wp-block-navigation-item__content:hover,
.patterns-restaurant-header .current-menu-item > .wp-block-navigation-item__content { color: var(--mcu-orange-deep) !important; }
.patterns-restaurant-header .wp-block-navigation-item__content:hover::after,
.patterns-restaurant-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* Reserve button: sits on the right and gently calls for attention */
.patterns-restaurant-header .wp-block-buttons { flex: none; margin: 0 !important; }
.patterns-restaurant-header .wp-block-button__link {
  border-radius: 999px !important; padding: 12px 22px !important; font-size: 12.5px !important; letter-spacing: 0.1em;
  animation: mcu-call 3.2s ease-in-out 2s infinite;
}
@keyframes mcu-call {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.55); }
  85% { box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); }
}

/* Compact header once the visitor scrolls */
body.mcu-scrolled .patterns-restaurant-header > .wp-block-template-part > .wp-block-group > .wp-block-group { padding-top: 8px !important; }
body.mcu-scrolled .patterns-restaurant-header .wp-block-group.alignwide.has-background { padding-top: 6px !important; padding-bottom: 11px !important; box-shadow: 0 14px 34px -18px rgba(4, 19, 20, 0.6); }
body.mcu-scrolled .patterns-restaurant-header .wp-block-site-logo img { height: 46px !important; }
body.mcu-hide-header .patterns-restaurant-header.at-pos { transform: translateY(-120%); }

/* Phone menu: warm dark overlay, big links that slide in one by one */
.wp-block-navigation__responsive-container.is-menu-open {
  background: radial-gradient(120% 80% at 100% 0%, rgba(243, 156, 18, 0.22), transparent 60%), var(--mcu-night) !important;
  color: #fff !important; animation: mcu-fade 0.3s ease both;
}
.wp-block-navigation__responsive-container.is-menu-open::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--mcu-kente); background-size: 64px 6px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: 'Playfair Display', Georgia, serif !important; font-size: 26px !important; font-weight: 700 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; padding: 6px 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { background: var(--mcu-orange); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation: mcu-rise 0.5s var(--mcu-ease) both; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.05s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.1s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.15s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.2s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.25s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 0.3s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: 0.35s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; }
.wp-block-navigation__responsive-container-open { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mcu-cream) !important; transition: transform 0.2s var(--mcu-ease); }
.wp-block-navigation__responsive-container-open:active { transform: scale(0.92); }
@keyframes mcu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcu-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 781px) {
  .patterns-restaurant-header .wp-block-group.alignwide.has-background { padding: 8px 12px 12px !important; border-radius: 14px !important; }
  .patterns-restaurant-header > .wp-block-template-part > .wp-block-group > .wp-block-group { padding-top: 10px !important; }
  .patterns-restaurant-header .wp-block-site-logo img { height: 44px !important; }
  body.mcu-scrolled .patterns-restaurant-header .wp-block-site-logo img { height: 38px !important; }
  /* Reserve moves to the bar at the bottom of the screen on phones */
  .patterns-restaurant-header .wp-block-buttons { display: none !important; }
}

/* ------------------------------------------------------------------ Hero */
.mcu-hero:not(.has-parallax) .wp-block-cover__image-background {
  animation: mcu-kenburns 22s ease-in-out infinite alternate; transform-origin: 60% 40%;
}
@keyframes mcu-kenburns { from { transform: scale(1); } to { transform: scale(1.09) translate(-1%, -1%); } }
.mcu-js .mcu-hero .wp-block-cover__inner-container > * { animation: mcu-rise 0.9s var(--mcu-ease) both; }
.mcu-js .mcu-hero .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 0.15s; }
.mcu-js .mcu-hero .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: 0.3s; }
.mcu-js .mcu-hero .wp-block-cover__inner-container > *:nth-child(4) { animation-delay: 0.45s; }
.mcu-js .mcu-hero .wp-block-cover__inner-container > *:nth-child(n+5) { animation-delay: 0.6s; }

/* ------------------------------------------------------------------ Buttons everywhere */
.wp-block-button:not([class*="scroll-to-top"]) > .wp-block-button__link {
  position: relative; overflow: hidden; isolation: isolate;
}
.wp-block-button__link, .wp-element-button {
  transition: transform 0.2s var(--mcu-ease), box-shadow 0.25s var(--mcu-ease), background-color 0.2s var(--mcu-ease) !important;
}
.wp-block-button:not([class*="scroll-to-top"]) > .wp-block-button__link::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.7s var(--mcu-ease);
}
@media (hover: hover) {
  .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(217, 129, 10, 0.75); }
  .wp-block-button:not([class*="scroll-to-top"]) > .wp-block-button__link:hover::before { transform: translateX(120%); }
}
.wp-block-button__link:active { transform: translateY(0) scale(0.97); }
:where(.wp-block-button__link, .wp-block-navigation-item__content, a):focus-visible { outline: 3px solid var(--mcu-orange); outline-offset: 3px; }

/* Section labels ("— ABOUT US —"): the little lines draw themselves in */
.mcu-js main .wp-block-separator.has-primary-background-color { transform-origin: center; transition: transform 0.9s var(--mcu-ease) 0.2s; }
.mcu-js main .mcu-reveal:not(.mcu-in) .wp-block-separator.has-primary-background-color { transform: scaleX(0); }

/* Photos: soft corners and a slow zoom under the pointer */
main .wp-block-image:not(.is-style-rounded) img { border-radius: 10px; }
main .wp-block-image { overflow: hidden; border-radius: 10px; }
main .wp-block-image img { transition: transform 0.8s var(--mcu-ease), filter 0.4s var(--mcu-ease); }
@media (hover: hover) { main .wp-block-image:hover img { transform: scale(1.05); filter: saturate(1.1); } }

/* Menu lists with prices: rows light up */
main .wp-block-columns .wp-block-group:has(> .wp-block-heading + p) { transition: background-color 0.25s var(--mcu-ease), transform 0.25s var(--mcu-ease); border-radius: 8px; }

/* ------------------------------------------------------------------ Scroll reveal */
.mcu-js .mcu-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--mcu-ease), transform 0.8s var(--mcu-ease); transition-delay: var(--mcu-delay, 0s); }
.mcu-js .mcu-reveal.mcu-in { opacity: 1; transform: none; }
.mcu-js .mcu-reveal.mcu-zoom { transform: scale(0.94); }
.mcu-js .mcu-reveal.mcu-zoom.mcu-in { transform: none; }

/* ------------------------------------------------------------------ Footer */
footer.wp-block-template-part { position: relative; }
/* Reservations band: woven edge, warm glow and a subtle dotted pattern */
footer.wp-block-template-part > .wp-block-group.has-base-background-color {
  position: relative; overflow: hidden;
  background-image:
    radial-gradient(60% 120% at 0% 0%, rgba(243, 156, 18, 0.18), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) !important;
  background-size: auto, 18px 18px !important;
}
footer.wp-block-template-part > .wp-block-group.has-base-background-color::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: var(--mcu-kente); background-size: 64px 8px; animation: mcu-weave 14s linear infinite;
}
footer.wp-block-template-part > .wp-block-group.has-base-background-color h2 { font-size: clamp(2rem, 5vw, 3.2rem) !important; }
footer .wp-block-button__link { border-radius: 999px !important; animation: mcu-call 3.2s ease-in-out 1s infinite; }

/* Logo row: logo on a cream badge so it shows on the dark background */
footer .has-secondary-background-color .wp-block-image img[src*="Mcuire"] {
  height: 52px !important; width: auto !important; background: var(--mcu-cream); padding: 8px 14px; border-radius: 12px;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8); transition: transform 0.3s var(--mcu-ease);
}
footer .has-secondary-background-color .wp-block-image:hover img[src*="Mcuire"] { transform: rotate(-3deg) scale(1.04); }
footer .wp-block-site-title { margin: 0 !important; max-width: none !important; }
@media (min-width: 782px) { footer .has-secondary-background-color .wp-block-site-title { flex: 0 1 auto !important; width: auto !important; } footer .wp-block-site-title a { white-space: nowrap; } }
/* The theme's own back-to-top button: round, on the right, above the phone bar */
[class*="is-style-scroll-to-top"] .wp-block-button__link { border-radius: 50% !important; box-shadow: 0 14px 28px -12px rgba(217, 129, 10, 0.9); animation: none !important; }
@media (max-width: 781px) { [class*="is-style-scroll-to-top"] .wp-block-button__link { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; } }
footer .wp-block-site-title a {
  display: block; font-family: 'Roboto', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; color: rgba(255, 255, 255, 0.78) !important; text-decoration: none;
}
footer .has-secondary-background-color .wp-block-group.is-nowrap { gap: 18px !important; align-items: center; }

/* Social icons: round buttons that hop and fill with orange */
footer .wp-block-social-links { gap: 12px !important; }
footer .wp-social-link { background: transparent !important; }
footer .wp-social-link a {
  width: 46px; height: 46px; display: grid !important; place-items: center; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28); padding: 0 !important;
  transition: transform 0.25s var(--mcu-ease), background-color 0.25s var(--mcu-ease), border-color 0.25s var(--mcu-ease);
}
footer .wp-social-link a:hover { transform: translateY(-4px) rotate(-6deg); background: var(--mcu-orange); border-color: var(--mcu-orange); }

/* Footer columns */
footer h5.wp-block-heading { position: relative; padding-bottom: 12px; margin-bottom: 18px !important; }
footer h5.wp-block-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--mcu-orange); transition: width 0.4s var(--mcu-ease); }
footer .wp-block-column:hover h5.wp-block-heading::after { width: 64px; }
footer .has-secondary-background-color a:not(.wp-block-social-link-anchor):not([rel="home"]) { transition: color 0.2s var(--mcu-ease); }
footer .has-secondary-background-color a:not(.wp-block-social-link-anchor):not([rel="home"]):hover { color: #fff !important; }
footer .has-secondary-background-color .wp-block-columns { border-bottom-style: solid !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
footer .has-secondary-background-color > .wp-block-group.alignwide { border-bottom-style: solid !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; }

/* ------------------------------------------------------------------ Extras added by site.js */
.mcu-top {
  position: fixed; right: 18px; bottom: 22px; z-index: 998; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--mcu-orange); color: #fff; box-shadow: 0 14px 28px -12px rgba(217, 129, 10, 0.9);
  display: grid; place-items: center; opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none;
  transition: opacity 0.3s var(--mcu-ease), transform 0.3s var(--mcu-ease);
}
.mcu-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mcu-top:hover { transform: translateY(-3px); }
.mcu-top svg { width: 22px; height: 22px; }
.mcu-bar { display: none; }
@media (max-width: 781px) {
  .mcu-bar {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 998;
    display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(4, 19, 20, 0.92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.7);
    transform: translateY(140%); transition: transform 0.4s var(--mcu-ease);
  }
  .mcu-bar.is-on { transform: none; }
  .mcu-bar a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 999px;
    font: 700 13px/1 'Roboto', system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: #fff;
  }
  .mcu-bar a.mcu-bar-main { background: var(--mcu-orange); }
  .mcu-bar a:active { transform: scale(0.97); }
  .mcu-bar svg { width: 18px; height: 18px; }
  .mcu-top { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
  footer.wp-block-template-part { padding-bottom: 76px; background: var(--mcu-night); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .mcu-js .mcu-reveal { opacity: 1 !important; transform: none !important; }
}