.elementor-82 .elementor-element.elementor-element-29c0339{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-82 .elementor-element.elementor-element-e5cb849{width:100%;max-width:100%;}.elementor-82 .elementor-element.elementor-element-e5cb849 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-82 .elementor-element.elementor-element-29c0339{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-e5cb849 */@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500&display=swap');

:root {
  --dc-nav-h: 104px;
  --dc-nav-pad-top: 18px;
  --dc-bg: #061923;
  --dc-bg-translucent: rgba(6, 25, 35, 0.85);
  --dc-text: #f4ede0;
  --dc-text-muted: rgba(244, 237, 224, 0.65);
  --dc-accent: #c8a96a;
  --dc-rule: rgba(244, 237, 224, 0.18);
  --dc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dc-font-serif: 'Cormorant Garamond', Georgia, serif;
  --dc-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ─── Body lock when menu open ─────────────────────────────────────────── */
body.dc-menu-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ─── Header ───────────────────────────────────────────────────────────── */
.dc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--dc-nav-h);
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  padding-top: var(--dc-nav-pad-top);
  transition:
    background 0.4s var(--dc-ease),
    border-color 0.4s var(--dc-ease);

  /* GPU-isolated layer prevents iOS paint flicker during scroll */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: background;
  contain: layout style;
}

.dc-header.is-scrolled,
body.dc-menu-open .dc-header {
  background: var(--dc-bg-translucent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--dc-rule);
}

.dc-header__inner {
  position: relative;
  height: calc(100% - var(--dc-nav-pad-top));
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* ─── Hamburger trigger ─────────────────────────────────────────────────── */
.dc-menu-trigger {
    justify-self: start;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--dc-text);
    z-index: 1001;
    -webkit-tap-highlight-color: transparent;
}

/* Gold hover */
.dc-menu-trigger:hover {
    color: var(--dc-accent);
}

.dc-menu-trigger,
.dc-menu-trigger:hover,
.dc-menu-trigger:focus,
.dc-menu-trigger:active {
  background: transparent;
  box-shadow: none;
}

.dc-menu-trigger:focus-visible {
  outline: 1px solid var(--dc-accent);
  outline-offset: 4px;
}

.dc-burger {
  position: relative;
  display: block;
  width: 24px;
  height: 14px;
}

.dc-burger > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.45s var(--dc-ease),
    opacity 0.25s var(--dc-ease),
    top 0.45s var(--dc-ease);
}

.dc-burger > span:nth-child(1) { top: 0; }
.dc-burger > span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.dc-burger > span:nth-child(3) { top: 100%; transform: translateY(-100%); }

.dc-menu-trigger[aria-expanded="true"] .dc-burger > span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.dc-menu-trigger[aria-expanded="true"] .dc-burger > span:nth-child(2) {
  opacity: 0;
}

.dc-menu-trigger[aria-expanded="true"] .dc-burger > span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* ─── Logo ──────────────────────────────────────────────────────────────── */
.dc-logo {
  text-align: center;
  text-decoration: none;
  color: var(--dc-text);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

/* Don Camillo logo — gold on hover */
.dc-logo {
  transition: color 0.3s ease;
}

.dc-logo:hover,
.dc-logo:focus-visible,
.dc-logo:hover .dc-logo__mark,
.dc-logo:hover .dc-logo__eyebrow,
.dc-logo:hover .dc-logo__rule,
.dc-logo:focus-visible .dc-logo__mark,
.dc-logo:focus-visible .dc-logo__eyebrow,
.dc-logo:focus-visible .dc-logo__rule {
  color: var(--dc-accent);
}

.dc-logo__mark,
.dc-logo__eyebrow,
.dc-logo__rule {
  transition: color 0.3s ease;
}

.dc-logo__eyebrow {
  font-family: var(--dc-font-sans);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 400;
}

/* FIXED font-size in px (was: clamp with vw — caused subpixel wobble on iOS) */
.dc-logo__mark {
  font-family: var(--dc-font-serif);
  font-size: 32px;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin: 2px 0;
}

@media (min-width: 1200px) {
  .dc-logo__mark { font-size: 36px; }
}

.dc-logo__rule {
  font-family: var(--dc-font-sans);
  font-size: 8px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
}

/* ─── Menu container ────────────────────────────────────────────────────── */
.dc-menu {
  position: fixed;
  inset: var(--dc-nav-h) 0 0 0;
  z-index: 999;
  display: grid;
  grid-template-columns: 50% 50%;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.55s;
}

body.dc-menu-open .dc-menu {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.dc-menu__panel {
    background: var(--dc-bg);
    color: var(--dc-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* More breathing room at the top */
    padding: 82px 32px 48px;

    text-align: center;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.55s var(--dc-ease);
    will-change: transform;
}

body.dc-menu-open .dc-menu__panel { transform: translateX(0); }

.dc-menu__blur {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  opacity: 0;
  transition: opacity 0.55s var(--dc-ease);
}

body.dc-menu-open .dc-menu__blur { opacity: 1; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dc-menu__blur { background: rgba(6, 25, 35, 0.88); }
  .dc-header.is-scrolled,
  body.dc-menu-open .dc-header { background: var(--dc-bg); }
}

/* ─── Menu nav ──────────────────────────────────────────────────────────── */
.dc-menu__nav ul { list-style: none; margin: 0; padding: 0; }
.dc-menu__nav li { margin: 0.45rem 0; }

/* FIXED font-size (was: clamp with vw) */
.dc-menu__nav a {
  font-family: var(--dc-font-serif);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--dc-text);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 4px 12px;
  transition: color 0.3s ease;
}

@media (min-width: 1200px) {
  .dc-menu__nav a { font-size: 44px; }
}

.dc-menu__nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 1px;
  background: var(--dc-accent);
  transition:
    left 0.35s var(--dc-ease),
    right 0.35s var(--dc-ease);
}

.dc-menu__nav a:hover { color: var(--dc-accent); }
.dc-menu__nav a:hover::after { left: 12px; right: 12px; }

.dc-menu__cta {
  display: inline-block;
  margin-top: 2.25rem;
  padding: 14px 38px;
  font-family: var(--dc-font-sans);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dc-text);
  text-decoration: none;
  border: 1px solid var(--dc-rule);
  transition:
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

.dc-menu__cta:hover {
  background: var(--dc-accent);
  border-color: var(--dc-accent);
  color: var(--dc-bg);
}

.dc-menu__divider {
  margin: 3rem auto 2rem;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(360px, 80%);
}

.dc-divider__line { flex: 1; height: 1px; background: var(--dc-rule); }

.dc-divider__plate {
  width: 26px;
  height: 26px;
  color: var(--dc-accent);
  flex-shrink: 0;
}

.dc-menu__hours { font-family: var(--dc-font-sans); }

.dc-hours__title {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--dc-accent);
  margin: 0 0 1.25rem;
}

.dc-hours__row {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  color: var(--dc-text-muted);
  margin: 0.4rem 0;
}

.dc-hours__row span:first-child {
  color: var(--dc-text);
  letter-spacing: 0.06em;
}

/* ─── Stagger animation ─────────────────────────────────────────────────── */
.dc-menu__nav li,
.dc-menu__cta,
.dc-menu__divider,
.dc-menu__hours {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--dc-ease),
    transform 0.5s var(--dc-ease);
}

body.dc-menu-open .dc-menu__nav li:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.20s; }
body.dc-menu-open .dc-menu__nav li:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.26s; }
body.dc-menu-open .dc-menu__nav li:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.32s; }
body.dc-menu-open .dc-menu__nav li:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.38s; }
body.dc-menu-open .dc-menu__cta     { opacity: 1; transform: none; transition-delay: 0.44s; }
body.dc-menu-open .dc-menu__divider { opacity: 1; transform: none; transition-delay: 0.52s; }
body.dc-menu-open .dc-menu__hours   { opacity: 1; transform: none; transition-delay: 0.58s; }

/* ─── Hide scrollbars ───────────────────────────────────────────────────── */
body.dc-menu-open {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body.dc-menu-open::-webkit-scrollbar { display: none; }

.dc-menu__panel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dc-menu__panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ─── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dc-menu { grid-template-columns: 60% 40%; }
}

/* ─── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --dc-nav-h: 80px;
    --dc-nav-pad-top: 12px;
  }

  /* Header — locked to viewport, no transitions that flicker on iOS */
  .dc-header {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    transition: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(6, 25, 35, 0.94);
  }

  /* On mobile, don't change background on scroll (no flicker) */
  .dc-header.is-scrolled,
  body.dc-menu-open .dc-header {
    background: rgba(6, 25, 35, 0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .dc-header__inner {
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    margin: 0 auto;
  }

  /* Logo — fixed pixel size on mobile, no clamp */
  .dc-logo__mark    { font-size: 22px; }
  .dc-logo__eyebrow { font-size: 7px; letter-spacing: 0.3em; }
  .dc-logo__rule    { display: none; }

  /* Menu — full-screen panel on mobile */
  .dc-menu {
    grid-template-columns: 1fr;
    position: fixed;
    top: var(--dc-nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: block;
  }

  .dc-menu__panel {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 44px 22px;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translate3d(-100%, 0, 0);
  }

  body.dc-menu-open .dc-menu__panel {
    transform: translate3d(0, 0, 0);
  }

  .dc-menu__blur { display: none; }

  /* Menu nav — fixed font-size on mobile */
  .dc-menu__nav a { font-size: 26px; }

  .dc-menu__nav,
  .dc-menu__nav ul,
  .dc-menu__nav li,
  .dc-menu__cta,
  .dc-menu__divider,
  .dc-menu__hours {
    max-width: 100%;
    width: 100%;
    overflow-wrap: anywhere;
  }

  .dc-hours__row {
    flex-direction: column;
    gap: 4px;
  }

  /* Hamburger smaller on mobile */
  .dc-menu-trigger { width: 38px; height: 38px; }
  .dc-header__spacer { display: none; }
}

/* ─── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dc-burger > span,
  .dc-menu__panel,
  .dc-menu__blur,
  .dc-menu__nav li,
  .dc-menu__cta,
  .dc-menu__divider,
  .dc-menu__hours,
  .dc-menu__nav a,
  .dc-menu__nav a::after {
    transition: none;
  }
}/* End custom CSS */