.elementor-kit-6{--e-global-color-primary:#D4A24E;--e-global-color-secondary:#7A2D2A;--e-global-color-text:#B5AC9F;--e-global-color-accent:#F1E8D7;--e-global-color-7c6c5d4:#181210;--e-global-color-b6d024a:#100C09;--e-global-color-f0c7e94:#211913;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:500;--e-global-typography-primary-font-style:normal;--e-global-typography-secondary-font-family:"Playfair Display";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-font-style:normal;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-text-font-style:normal;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-font-style:normal;background-color:#181210;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   v6 FIX — DEFINITIVE, and using a reliable font source.

   Root cause (confirmed via DevTools "Rendered Fonts"): a plugin/
   theme registered a local font family "Inter" whose file is
   Inter28pt-ThinItalic. Any request for Inter resolves to that
   italic file, which font-style:normal cannot straighten.

   A previous attempt pointed at specific hardcoded font
   file URLs — those failed to load, so the alias fell back and the
   browser fell back to the bad local Inter. This version imports
   Google's stylesheet (always serves correct files for the
   visitor's browser) and, crucially, does NOT list "Inter" as a
   fallback anywhere — so the rogue local file can never be chosen.

   Keep this @import as the VERY FIRST line of the Custom CSS box.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* Upright everywhere. Fallback chain is Arial/Georgia — NEVER "Inter"
   — so if anything fails to load we still get an upright system font,
   not the broken italic local file. High-specificity + !important so
   these beat the theme's own nav/heading rules. */
body,
header .elementor-nav-menu li a.elementor-item,
.elementor-location-header .elementor-nav-menu li a.elementor-item,
.carlos-nav li a.elementor-item,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-button,
.elementor-widget-button .elementor-button .elementor-button-text,
.elementor-field-label,
.elementor-widget-icon-list .elementor-icon-list-text {
  font-family: "Inter", Arial, sans-serif !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-variation-settings: "slnt" 0 !important;
}

.elementor-heading-title,
.elementor-widget-price-list .elementor-price-list-title {
  font-family: "Playfair Display", Georgia, serif !important;
  font-style: normal !important;
  font-synthesis: none !important;
}

/* Intentional italics (Playfair italic face loaded via the @import above) */
.carlos-hero .elementor-heading-title span,
.carlos-giftcard .elementor-heading-title span,
.carlos-quote .elementor-widget-text-editor em,
.elementor-widget-text-editor em,
.elementor-widget-text-editor i {
  font-family: "Playfair Display", Georgia, serif !important;
  font-style: italic !important;
}
/* menu descriptions: sans, italic */
.elementor-widget-price-list .elementor-price-list-description {
  font-family: "Inter", Arial, sans-serif !important;
  font-style: italic !important;
}

/* ============================================================
   CARLO'S RESTAURANT — Global Custom CSS for Elementor Pro
   Paste into: Elementor → Site Settings → Custom CSS
   Palette matched to the Lovable design (dark candlelit theme).
   ============================================================ */

:root {
  --carlos-bg:       #181210;  /* base warm near-black */
  --carlos-bg-deep:  #100C09;  /* top bar, darker bands */
  --carlos-panel:    #211913;  /* raised panels / package cards */
  --carlos-cream:    #F1E8D7;  /* display headings */
  --carlos-gold:     #D4A24E;  /* buttons, prices, eyebrows */
  --carlos-gold-d:   #B98938;  /* gold button hover fill */
  --carlos-maroon:   #7A2D2A;  /* Learn More / Off-Site / 1996 badge */
  --carlos-maroon-d: #5C1F1D;
  --carlos-text:     #B5AC9F;  /* body */
  --carlos-darktxt:  #1A130E;  /* text on gold buttons */
  --carlos-ease:     cubic-bezier(.22, 1, .36, 1);
}

body { background: var(--carlos-bg); }

/* ---------- Buttons: sliding fill on hover ---------- */
.carlos-btn .elementor-button,
.carlos-form .elementor-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--carlos-ease),
              border-color .35s var(--carlos-ease),
              transform .35s var(--carlos-ease);
}
.carlos-btn .elementor-button::before,
.carlos-form .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--carlos-ease);
}
.carlos-btn .elementor-button:hover::before,
.carlos-form .elementor-button:hover::before { transform: scaleX(1); }
.carlos-btn .elementor-button:hover { transform: translateY(-2px); }

/* Solid gold → fills deeper gold, keeps dark text */
.carlos-btn--solid .elementor-button::before,
.carlos-form .elementor-button::before { background: var(--carlos-gold-d); }

/* Maroon → fills deeper maroon */
.carlos-btn--maroon .elementor-button::before { background: var(--carlos-maroon-d); }

/* Cream outline → fills cream, text goes dark */
.carlos-btn--outline .elementor-button::before { background: var(--carlos-cream); }
.carlos-btn--outline .elementor-button:hover {
  color: var(--carlos-darktxt) !important;
  border-color: var(--carlos-cream) !important;
}

/* Gold outline → fills gold, text goes dark */
.carlos-btn--outline-gold .elementor-button::before { background: var(--carlos-gold); }
.carlos-btn--outline-gold .elementor-button:hover {
  color: var(--carlos-darktxt) !important;
}

/* ---------- Arrow links (gold): slide right + underline sweep ---------- */
.carlos-link-arrow .elementor-button {
  padding: 0 !important;
  background: transparent !important;
  letter-spacing: 2px;
}
.carlos-link-arrow .elementor-button-text {
  display: inline-block;
  transition: transform .35s var(--carlos-ease);
}
.carlos-link-arrow .elementor-button:hover .elementor-button-text { transform: translateX(6px); }
.carlos-link-arrow .elementor-button::after {
  content: "";
  display: block;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--carlos-ease);
}
.carlos-link-arrow .elementor-button:hover::after { transform: scaleX(1); }

/* ---------- Cards: lift + deep shadow on hover ---------- */
.carlos-card {
  transition: transform .4s var(--carlos-ease), box-shadow .4s var(--carlos-ease);
}
.carlos-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 48px -20px rgba(0, 0, 0, .65);
}

/* ---------- Nav: gold underline sweep ---------- */
.carlos-nav .elementor-item { position: relative; }
.carlos-nav .elementor-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--carlos-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--carlos-ease);
}
.carlos-nav .elementor-item:hover::after,
.carlos-nav .elementor-item.elementor-item-active::after { transform: scaleX(1); }

/* ---------- Hero: slow Ken Burns zoom ---------- */
.carlos-hero { overflow: hidden; }

/* ---------- Eyebrows & ornament ---------- */
.carlos-eyebrow .elementor-heading-title { letter-spacing: .24em; }
.carlos-ornament .elementor-divider-separator { opacity: .85; }

/* ---------- Menu price lists ---------- */
.carlos-pricelist .elementor-price-list-item { padding: 15px 0; }
.carlos-pricelist .elementor-price-list-header { align-items: baseline; }
.carlos-pricelist .elementor-price-list-description { font-style: italic; }

/* ---------- Contact form: underline-style fields (as designed) ---------- */
.carlos-form input:not([type="submit"]),
.carlos-form textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(241, 232, 215, .25) !important;
  border-radius: 0 !important;
  color: var(--carlos-cream) !important;
  padding-left: 0 !important;
  transition: border-color .3s var(--carlos-ease);
}
.carlos-form input:not([type="submit"]):focus,
.carlos-form textarea:focus {
  border-bottom-color: var(--carlos-gold) !important;
  outline: none !important;
  box-shadow: none !important;
}
.carlos-form .elementor-field-label {
  color: var(--carlos-gold);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---------- Map: match the muted look ---------- */
.carlos-map iframe { filter: grayscale(1) contrast(.95); }

/* ---------- Gift card panel: subtle tilt on hover ---------- */
.carlos-giftcard {
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .7);
  transition: transform .5s var(--carlos-ease);
}
.carlos-giftcard:hover { transform: rotate(-1deg) translateY(-4px); }

/* ---------- 1996 badge ---------- */
.carlos-badge { box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .6); }

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .carlos-btn .elementor-button,
  .carlos-btn .elementor-button::before,
  .carlos-card,
  .carlos-link-arrow .elementor-button-text,
  .carlos-nav .elementor-item::after,
  .carlos-giftcard {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   v2 FIXES — italics + spacing (re-paste this whole file)
   ============================================================ */

/* Kill unintended italics everywhere. Intentional italics still work:
   the <em>/<span> accents (tavola nostra, Buon Appetito), the guest
   quote, and menu item descriptions (rule below). */
body,
.elementor-widget-text-editor,
.elementor-heading-title,
.elementor-button,
.elementor-icon-list-text,
.elementor-field-label,
.carlos-nav .elementor-item {
  font-style: normal;
}
em, i, cite, blockquote em { font-style: italic; }
.carlos-pricelist .elementor-price-list-description { font-style: italic !important; }

/* Header: never let the two menus wrap onto a second row on desktop */
@media (min-width: 768px) {
  .carlos-nav .elementor-nav-menu { flex-wrap: nowrap; }
}
.carlos-logo img { max-height: 60px; width: auto; }

/* Hero: keep the subtitle a comfortable reading width */
.carlos-hero .elementor-widget-text-editor {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 1996 badge: cap its size so it sits neatly on the photo corner */
.carlos-badge { max-width: 240px; }
@media (max-width: 767px) {
  .carlos-badge { margin: -40px 0 0 12px !important; }
}

/* Menu switcher buttons: consistent compact sizing */
.carlos-btn .elementor-button { white-space: nowrap; }

/* ============================================================
   v3 FIX — force upright fonts (overrides theme/parent italics)
   ------------------------------------------------------------
   Diagnosis: setting each element to "Normal" in the Elementor
   editor did nothing, which means the slant is inherited from a
   rule with higher specificity than Elementor's inline style
   (a theme default or a global wrapper). These rules win because
   they are more specific AND use !important, while carefully
   preserving the four intentional italic spots.
   ============================================================ */

/* Header / navigation — the most affected area */
header .elementor-nav-menu a,
header .elementor-item,
.elementor-location-header .elementor-item,
.carlos-nav a,
.carlos-nav .elementor-item {
  font-style: normal !important;
  font-family: "Inter", sans-serif !important;
}

/* All headings, body, buttons, labels, list text site-wide */
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-button,
.elementor-button-text,
.elementor-field-label,
.elementor-price-list-title,
.elementor-icon-list-text,
.elementor-widget-container p,
.elementor-widget-container li {
  font-style: normal !important;
}

/* --- Re-enable ONLY the intentional italics --- */
/* 1. Hero accent line "tavola nostra." (wrapped in a styled span) */
.carlos-hero .elementor-heading-title span,
/* 2. Gift-card headline "Buon Appetito" */
.carlos-giftcard .elementor-heading-title span,
/* 3. Guest testimonial quote (wrapped in <em>) */
.carlos-quote .elementor-widget-text-editor em,
.elementor-widget-text-editor em,
.elementor-widget-text-editor i,
/* 4. Menu item descriptions */
.elementor-price-list-description {
  font-style: italic !important;
}

/* The hero/gift accent spans also keep their serif display face */
.carlos-hero .elementor-heading-title span,
.carlos-giftcard .elementor-heading-title span {
  font-family: "Playfair Display", serif !important;
}

/* ============================================================
   CARLO'S — Mobile header dropdown styling
   Add to Elementor → Site Settings → Custom CSS (append to your
   existing Carlo's CSS). Styles the Nav Menu widget's mobile
   hamburger + dropdown to match the site.
   ============================================================ */

/* Hamburger icon → gold, matching weight */
.elementor-nav-menu--dropdown-tablet .elementor-menu-toggle,
.elementor-nav-menu--dropdown-mobile .elementor-menu-toggle,
.elementor-menu-toggle {
  color: var(--carlos-gold) !important;
}
.elementor-menu-toggle svg { fill: var(--carlos-gold) !important; width: 28px; height: 28px; }

/* Dropdown panel: deep background, drops below header full width */
.elementor-nav-menu--dropdown {
  background-color: var(--carlos-bg-deep) !important;
  border-top: 1px solid var(--carlos-gold);
}

/* Menu links: centered, cream, uppercase, gold on tap */
.elementor-nav-menu--dropdown a.elementor-item {
  text-align: center !important;
  color: var(--carlos-cream) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(241,232,215,.06) !important;
  transition: color .25s ease, background .25s ease !important;
}
.elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
  color: var(--carlos-gold) !important;
  background: rgba(212,162,78,.05) !important;
}

/* The "Reserve a Table" custom-link item → gold button.
   (Give that menu item the CSS class: mobile-reserve) */
.elementor-nav-menu--dropdown .mobile-reserve a.elementor-item {
  margin: 16px 24px 22px !important;
  background: var(--carlos-gold) !important;
  color: var(--carlos-darktxt) !important;
  border-radius: 2px !important;
  border-bottom: none !important;
  font-weight: 600 !important;
}
.elementor-nav-menu--dropdown .mobile-reserve a.elementor-item:hover {
  background: var(--carlos-gold-d) !important;
  color: var(--carlos-darktxt) !important;
}

/* Center the logo in the mobile header row if needed */
@media (max-width: 767px) {
  .carlos-logo img { margin: 0 auto; }
}

/* ============================================================
   CARLO'S — Mobile header dropdown styling
   Add to Elementor → Site Settings → Custom CSS (append to your
   existing Carlo's CSS). Styles the Nav Menu widget's mobile
   hamburger + dropdown to match the site.
   ============================================================ */

/* Hamburger icon → gold, matching weight */
.elementor-nav-menu--dropdown-tablet .elementor-menu-toggle,
.elementor-nav-menu--dropdown-mobile .elementor-menu-toggle,
.elementor-menu-toggle {
  color: var(--carlos-gold) !important;
}
.elementor-menu-toggle svg { fill: var(--carlos-gold) !important; width: 28px; height: 28px; }

/* Dropdown panel: deep background, drops below header full width */
.elementor-nav-menu--dropdown {
  background-color: var(--carlos-bg-deep) !important;
  border-top: 1px solid var(--carlos-gold);
}

/* Menu links: centered, cream, uppercase, gold on tap */
.elementor-nav-menu--dropdown a.elementor-item {
  text-align: center !important;
  color: var(--carlos-cream) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(241,232,215,.06) !important;
  transition: color .25s ease, background .25s ease !important;
}
.elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
  color: var(--carlos-gold) !important;
  background: rgba(212,162,78,.05) !important;
}

/* The "Reserve a Table" custom-link item → gold button.
   (Give that menu item the CSS class: mobile-reserve) */
.elementor-nav-menu--dropdown .mobile-reserve a.elementor-item {
  margin: 16px 24px 22px !important;
  background: var(--carlos-gold) !important;
  color: var(--carlos-darktxt) !important;
  border-radius: 2px !important;
  border-bottom: none !important;
  font-weight: 600 !important;
}
.elementor-nav-menu--dropdown .mobile-reserve a.elementor-item:hover {
  background: var(--carlos-gold-d) !important;
  color: var(--carlos-darktxt) !important;
}

/* Center the logo in the mobile header row if needed */
@media (max-width: 767px) {
  .carlos-logo img { margin: 0 auto; }
}

/* ============================================================
   Mobile top utility bar — show only "Open Daily · 11am–9:30pm",
   centered. On mobile the phone/address text is hidden so the
   hours stand alone (matches the preview).
   The hours live in the FIRST text widget of the top bar; the
   phone/address live in the SECOND. We target by order.
   ============================================================ */
@media (max-width: 767px) {
  /* center everything in the top bar */
  .carlos-topbar,
  header .elementor-element:first-child .elementor-widget-container {
    text-align: center !important;
  }
  /* hide the phone + address (the right-hand text widget) on mobile */
  .carlos-topbar-contact { display: none !important; }
}/* End custom CSS */