/**
 * Grandezza Restaurant — the only stylesheet written for this project.
 *
 * Everything else under assets/css is the Grand Restaurant theme, unmodified.
 * The rules here exist for one reason: the theme's logo slots are proportioned
 * for a wide wordmark (the demo shipped a 142x42 mark), and Grandezza's logo is
 * a crest that is taller than it is wide. Sizing by height keeps each placement
 * at the visual weight the design intends, instead of a 200px-tall header.
 *
 * Selectors are deliberately long: the preloader and footer logos are pinned to
 * explicit pixel widths by loftloader.css and post-9.css respectively, so these
 * rules have to out-specify those rather than merely follow them.
 */

/* ==========================================================================
   Section backgrounds — Grandezza's own photographs
   The theme's Elementor CSS (post-2.css) hard-codes the demo photos for these
   five full-bleed bands. Overriding here keeps the theme stylesheets pristine.
   Each selector mirrors the original so the parallax variant is covered too.
   ========================================================================== */

.elementor-2 .elementor-element.elementor-element-2f9bfd8:not(.elementor-motion-effects-element-type-background),
.elementor-2 .elementor-element.elementor-element-2f9bfd8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url('../img/gallery/hero-grandezza.jpg');
}

/* The demo's hero was a dark interior, so a 10% black wash was enough to hold
   white type. This facade is pale stone under a bright sky (~160/255 behind the
   headline), which left the wordmark at roughly 3.4:1. Darkening the middle of
   the frame lifts it to ~7:1 while leaving the building itself bright at the
   top and bottom of the crop. */
.elementor-2 .elementor-element.elementor-element-2f9bfd8 > .elementor-background-overlay {
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.52) 42%,
    rgba(0, 0, 0, 0.52) 62%,
    rgba(0, 0, 0, 0.3) 100%
  );
  opacity: 1;
}

.elementor-2 .elementor-element.elementor-element-a347273:not(.elementor-motion-effects-element-type-background),
.elementor-2 .elementor-element.elementor-element-a347273 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url('../img/gallery/kb-0014.jpg');
}

.elementor-2 .elementor-element.elementor-element-cb261d1:not(.elementor-motion-effects-element-type-background),
.elementor-2 .elementor-element.elementor-element-cb261d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background: url('../img/gallery/kb-0008.jpg') 50% 50%;
  background-size: cover;
}

.elementor-2 .elementor-element.elementor-element-8379c14:not(.elementor-motion-effects-element-type-background),
.elementor-2 .elementor-element.elementor-element-8379c14 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url('../img/gallery/gr-int-0009.jpg');
}

.elementor-2 .elementor-element.elementor-element-d5f490a:not(.elementor-motion-effects-element-type-background),
.elementor-2 .elementor-element.elementor-element-d5f490a > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url('../img/gallery/kb-0005.jpg');
}

/* The gallery photos are 3:2 where the demo shipped tall crops, so the image
   slots have to cover their frame rather than stretch to fill it. */
img[src*='/img/gallery/'] {
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   Top contact bar — everything on one row
   The demo's right-hand links were single short words ("Locate", "Demos",
   "Purchase Theme"). Grandezza's are a full e-mail address and two labels,
   which overflowed the 50/50 split and pushed the social icons onto a second
   line. Re-proportioning the columns gives the right-hand group the width it
   needs; the content itself measures ~1050px inside a 1170px container.
   Below 1025px the theme hides the link list anyway, so this is desktop-only.
   ========================================================================== */
@media (min-width: 1025px) {
  .elementor-26 .elementor-element.elementor-element-821f68b {
    width: 34%;
  }

  .elementor-26 .elementor-element.elementor-element-17b52e3 {
    width: 66%;
  }

  .elementor-26 .elementor-element.elementor-element-17b52e3 > .elementor-widget-wrap {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
  }

  /* Both widgets carry their own vertical offsets in the demo layout; with
     them side by side the row centres itself instead. */
  .elementor-26 .elementor-element.elementor-element-c72016b,
  .elementor-26 .elementor-element.elementor-element-99b5da9 {
    margin: 0;
  }

  .elementor-26 .elementor-element.elementor-element-99b5da9 .elementor-social-icon {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Menu browser
   The demo's arrangement is kept: the black intro panel at the top-left with
   the dish lists flowing around it in two columns. The difference is that all
   five real menus share one column flow, hidden except the selected one, so
   the intro can sit at the head of that flow without being repeated per menu.
   Individual rows reuse the theme's own .food-menu-* markup, which is why
   there are no styles here for the dish name, dotted leader or price.
   ========================================================================== */

/* Elementor's widget-wrap is a flex container, so a child sizes itself from
   its content unless told otherwise — which let long drinks rows push the
   browser wider than a phone screen. min-width:0 lets it shrink again. */
.gr-menu {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.gr-menu-flow,
.gr-menu-group {
  min-width: 0;
}

/* --- menu switcher ------------------------------------------------------- */
.gr-menu-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-bottom: 26px;
}

.gr-menu-switch-item {
  padding: 0 0 3px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #9a9a9a;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.gr-menu-switch-item:hover {
  color: #cfa670;
}

.gr-menu-switch-item.is-active {
  color: #cfa670;
  border-bottom-color: #cfa670;
}

.gr-menu-switch-item:focus-visible {
  outline: 2px solid #cfa670;
  outline-offset: 3px;
}

/* The date range or title the source page carries above each menu. */
.gr-menu-note {
  margin: -12px 0 30px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9a9a9a;
}

/* --- the flow ------------------------------------------------------------ */
.gr-menu-flow {
  column-count: 2;
  column-gap: 70px;
}

/* First in the flow, so it takes the top-left corner exactly as in the demo
   and the dish lists wrap around it. */
.gr-menu-intro {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 44px;
}

.gr-menu-group {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 42px;
}

.gr-menu-group-title {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  text-transform: none;
}

.gr-menu-group-note {
  margin: -8px 0 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9a9a9a;
}

/* Wine categories head several country sections, so they span both columns.
   A hairline either side turns them into dividers rather than just larger
   text, which is what keeps a 101-wine list navigable. */
.gr-menu-category {
  column-span: all;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 26px 0 34px;
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 600;
  color: #cfa670;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.gr-menu-category::before,
.gr-menu-category::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: rgba(207, 166, 112, 0.4);
}

.gr-menu-category-en {
  display: block;
  margin-top: 2px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #b9b9b9;
  text-align: center;
}

/* The English half of a "Czech / English" heading, set as a subtitle. */
.gr-menu-group-en {
  display: block;
  margin-top: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b9b9b9;
}

.gr-menu-measure {
  flex: 0 0 auto;
  min-width: 44px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #9a9a9a;
  letter-spacing: 0.5px;
}

/* --- rows ---------------------------------------------------------------- */
/* The theme sizes dish names for a short, hand-picked list: 26px with
   white-space:nowrap, laid out as table cells. Grandezza's real menus include
   names like "Contarini milesimato, extra dry, Prosecco, Veneto", which at
   that size overflow a column instead of wrapping. Inside the browser the row
   becomes a flex line that can wrap, with the dotted leader as the flexible
   middle — same look, but it survives a long name. */
.gr-menu .food-menu-content {
  padding: 7px 0 7px 2px;
  margin-top: 0;
}

.gr-menu .food-menu-content-top-holder {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.gr-menu .food-menu-content-title-holder {
  display: block;
  width: auto;
  flex: 0 1 auto;
  white-space: normal;
  padding-right: 0;
}

.gr-menu .food-menu-title {
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.2px;
  text-transform: none;
  margin: 0;
}

.gr-menu .food-menu-content-title-line {
  display: block;
  flex: 1 1 14px;
  min-width: 14px;
  position: static;
  bottom: auto;
  height: 0;
  border-bottom: 2px dotted rgba(0, 0, 0, 0.3);
  border-width: 0 0 2px;
  transform: translateY(-4px);
}

.gr-menu .food-menu-content-price-holder {
  display: block;
  flex: 0 0 auto;
  width: auto;
  padding-left: 0;
  font-size: 15px;
  font-weight: 600;
  color: #cfa670;
  white-space: nowrap;
}

.gr-menu .food-menu-content-price-holder .food-menu-content-price-normal {
  padding-left: 0;
}

.gr-menu .food-menu-desc {
  margin-top: 1px;
  padding-left: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #9a9a9a;
}

/* --- seasonal offer -------------------------------------------------------
   A set menu, not a priced list, so it gets a card of its own: the script
   invitation the theme uses elsewhere, then the courses with a gold rule
   between them in place of the source page's "***". It sits in the column
   flow so that selecting it lands the card beside the intro panel. */
.gr-menu-special {
  /* A set menu is one object, not a list to scan, so it spans the columns and
     centres as a card rather than being squeezed into one of them. */
  column-span: all;
  max-width: 620px;
  margin: 10px auto 42px;
  padding: 34px 30px 30px;
  border: 1px solid rgba(207, 166, 112, 0.45);
  text-align: center;
}

.gr-menu-special-script {
  margin: 0;
  font-family: 'Herr Von Muellerhoff', cursive;
  font-size: 46px;
  line-height: 1;
  color: #cfa670;
}

.gr-menu-special-sub {
  margin: 2px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b9b9b9;
}

.gr-menu-special-title {
  margin: 12px 0 4px;
  font-family: 'Cinzel', serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #000;
}

.gr-menu-special-dates {
  margin: 0 0 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #9a9a9a;
}

.gr-menu-courses {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gr-menu-course {
  padding: 24px 0 0;
}

/* Stands in for the "***" the source page puts between courses. */
.gr-menu-course + .gr-menu-course {
  margin-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.gr-menu-course-cs {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
}

.gr-menu-course-en {
  margin: 4px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.4px;
  color: #9a9a9a;
}

.gr-menu-course-price {
  margin: 8px 0 0;
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 600;
  color: #cfa670;
}

.gr-menu-special-note {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  line-height: 1.7;
  color: #9a9a9a;
}

.gr-menu-special-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 11px 26px;
  border: 1px solid #cfa670;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #cfa670;
  transition: background 0.3s ease, color 0.3s ease;
}

.gr-menu-special-cta:hover {
  background: #cfa670;
  color: #fff;
}

@media (max-width: 767px) {
  .gr-menu-flow {
    column-count: 1;
  }

  .gr-menu-switch {
    gap: 8px 18px;
  }

  .gr-menu-switch-item {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .gr-menu-category {
    font-size: 21px;
  }

  .gr-menu-measure {
    min-width: 34px;
    font-size: 11px;
  }

  .gr-menu .food-menu-title,
  .gr-menu .food-menu-content-price-holder {
    font-size: 14px;
  }
}

/* --- preloader, over the white page ------------------------------------- */
#loftloader-wrapper.pl-imgloading #loader {
  width: 52px;
}

#loftloader-wrapper.pl-imgloading #loader img[src*='grandezza-logo'] {
  width: 100%;
  height: auto;
}

#loftloader-wrapper.pl-imgloading .imgloading-container span {
  background-size: contain;
  background-repeat: no-repeat;
}

/* --- main header, transparent over the hero photo ------------------------ */
#elementor-header img[src*='grandezza-logo'] {
  width: auto;
  height: 62px;
  max-width: 100%;
}

/* --- compact bar that slides in on scroll -------------------------------- */
#elementor-sticky-header img[src*='grandezza-logo'] {
  width: auto;
  height: 46px;
  max-width: 100%;
}

/* --- footer, on the near-black band -------------------------------------- */
.elementor-9 .elementor-element.elementor-element-6d0a7a95 img[src*='grandezza-logo'] {
  width: auto;
  height: 78px;
  max-width: 100%;
}

@media (max-width: 767px) {
  #elementor-header img[src*='grandezza-logo'],
  #elementor-sticky-header img[src*='grandezza-logo'] {
    height: 44px;
  }

  .elementor-9 .elementor-element.elementor-element-6d0a7a95 img[src*='grandezza-logo'] {
    height: 64px;
  }
}

/* ==========================================================================
   Czech / English
   Both languages are in the markup — the source menus already carry each dish
   in both — so switching is only a matter of which one is displayed. Nothing
   here depends on JavaScript for the content to exist; without it the page
   simply stays in Czech.
   ========================================================================== */
html[data-lang='cs'] .lang-en,
html[data-lang='en'] .lang-cs {
  display: none !important;
}

/* One unambiguous navigation state. This overrides stale WordPress current
   classes and browser :visited styling on all three header copies. */
#elementor-header .nav > li > a,
#elementor-header .nav > li > a:visited,
#elementor-sticky-header .nav > li > a,
#elementor-sticky-header .nav > li > a:visited {
  position: relative;
  background: transparent !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

#elementor-header .nav > li > a::after,
#elementor-sticky-header .nav > li > a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 2px;
  margin: auto;
  background: #cfa670;
  transition: width 0.25s ease;
}

#elementor-header .nav > li > a.gr-nav-active,
#elementor-header .nav > li > a.gr-nav-active:visited,
#elementor-sticky-header .nav > li > a.gr-nav-active,
#elementor-sticky-header .nav > li > a.gr-nav-active:visited,
#elementor-header .nav > li > a:hover,
#elementor-sticky-header .nav > li > a:hover {
  background: transparent !important;
  color: #cfa670 !important;
}

#elementor-header .nav > li > a.gr-nav-active::after,
#elementor-sticky-header .nav > li > a.gr-nav-active::after {
  width: 100%;
}

.mobile_main_nav li a.gr-nav-active,
.mobile_main_nav li a.gr-nav-active:visited {
  background: transparent !important;
  color: #cfa670 !important;
}

#tg_reservation.gr-nav-active,
#tg_sidemenu_reservation.gr-nav-active {
  border-color: #cfa670 !important;
  background: #cfa670 !important;
  color: #fff !important;
}

.gr-lang {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 4px;
}

.gr-lang-btn {
  padding: 2px 1px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #9a9a9a;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.gr-lang-btn:hover {
  color: #222;
}

.gr-lang-btn.is-active {
  color: #222;
  border-bottom-color: #cfa670;
}

.gr-lang-btn:focus-visible {
  outline: 2px solid #cfa670;
  outline-offset: 2px;
}

.gr-lang-sep {
  font-size: 10px;
  color: #c9c9c9;
}

/* ==========================================================================
   Standalone pages — o-nas, kariera, rezervace
   They reuse index.html's header, footer and scripts; everything between is
   plain markup styled here, in the theme's own idiom (Cinzel headings, the
   script face for the eyebrow, #cfa670 for accents).
   ========================================================================== */
.gr-page {
  color: #222;
}

/* --- page hero ----------------------------------------------------------- */
.gr-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58vh;
  margin-bottom: 70px;
  padding: 190px 20px 90px;
  background-position: center;
  background-size: cover;
  text-align: center;
}

.gr-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.42) 100%);
}

.gr-hero-inner {
  position: relative;
}

.gr-hero-script {
  margin: 0;
  font-family: 'Herr Von Muellerhoff', cursive;
  font-size: 54px;
  line-height: 1;
  color: #cfa670;
}

.gr-hero-title {
  margin: 4px 0 0;
  font-family: 'Cinzel', serif;
  font-size: 54px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: #fff;
}

/* --- section scaffolding -------------------------------------------------- */
.gr-section {
  padding: 60px 0;
}

.gr-section-tint {
  background: #faf8f5;
}

.gr-wrap {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.gr-heading {
  margin-bottom: 34px;
  text-align: center;
}

.gr-heading-script {
  margin: 0;
  font-family: 'Herr Von Muellerhoff', cursive;
  font-size: 44px;
  line-height: 1;
  color: #cfa670;
}

.gr-heading-title {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 34px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: #000;
}

.gr-prose {
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.9;
}

.gr-prose p {
  margin: 0 0 16px;
}

.gr-center {
  text-align: center;
}

.gr-cta-row {
  margin-top: 30px;
  text-align: center;
}

.gr-btn {
  display: inline-block;
  margin: 6px 5px 0;
  padding: 13px 30px;
  border: 1px solid #cfa670;
  background: #cfa670;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.gr-btn:hover {
  background: transparent;
  color: #cfa670;
}

.gr-btn-ghost {
  background: transparent;
  color: #cfa670;
}

.gr-btn-ghost:hover {
  background: #cfa670;
  color: #fff;
}

/* --- about: facts, photos, hours ----------------------------------------- */
.gr-facts,
.gr-jobs,
.gr-hours,
.gr-contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gr-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
}

.gr-fact h3 {
  margin: 0 0 8px;
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 600;
  color: #000;
}

.gr-fact p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #6f6f6f;
}

.gr-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.gr-photo {
  display: block;
  overflow: hidden;
}

.gr-photo img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gr-photo:hover img {
  transform: scale(1.05);
}

.gr-hours {
  max-width: 560px;
  margin: 0 auto;
}

.gr-hours li,
.gr-contact li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.gr-hours-label,
.gr-contact-label {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}

.gr-hours-value {
  color: #6f6f6f;
}

.gr-contact {
  max-width: 560px;
  margin: 0 auto;
}

.gr-contact a {
  color: #cfa670;
}

/* --- careers -------------------------------------------------------------- */
.gr-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.gr-job {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
}

.gr-job-head {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(207, 166, 112, 0.5);
}

.gr-job-role {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 19px;
  font-weight: 600;
  color: #000;
}

.gr-job-type {
  margin: 6px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #cfa670;
}

.gr-job-body p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.75;
  color: #6f6f6f;
}

/* --- reservation form ----------------------------------------------------- */
.gr-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px 26px;
  max-width: 860px;
  margin: 40px auto 0;
}

.gr-field {
  display: flex;
  flex-direction: column;
}

.gr-field-wide {
  grid-column: 1 / -1;
}

.gr-field label {
  margin-bottom: 7px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #6f6f6f;
}

.gr-field input,
.gr-field select,
.gr-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #222;
  transition: border-color 0.3s ease;
}

.gr-field input:focus,
.gr-field select:focus,
.gr-field textarea:focus {
  outline: none;
  border-color: #cfa670;
}

.gr-field input[aria-invalid='true'],
.gr-field select[aria-invalid='true'] {
  border-color: #c0392b;
}

.gr-form-hint,
.gr-form-error,
.gr-form-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.gr-form-hint {
  padding: 12px 16px;
  border-left: 2px solid #cfa670;
  background: #faf6f0;
  color: #6f6f6f;
}

.gr-form-error {
  color: #c0392b;
  font-weight: 600;
}

.gr-form-note {
  margin-top: 4px;
  text-align: center;
  font-size: 12px;
  color: #9a9a9a;
}

@media (max-width: 767px) {
  .gr-hero {
    min-height: 46vh;
    padding: 150px 18px 60px;
  }

  .gr-hero-title {
    font-size: 34px;
  }

  .gr-hero-script,
  .gr-heading-script {
    font-size: 36px;
  }

  .gr-heading-title {
    font-size: 25px;
  }

  .gr-section {
    padding: 46px 0;
  }
}

/* ========================================================================
   Standalone page visual refresh
   The theme constrains ordinary WordPress pages to its old 1170px content
   frame. These pages are editorial landing pages, so their canvas, hero and
   section backgrounds deliberately span the viewport.
   ======================================================================== */
body.gr-subpage {
  background: #f5f2ec;
}

body.gr-subpage #page_content_wrapper,
body.gr-subpage #page_content_wrapper > .inner,
body.gr-subpage #page_content_wrapper .inner_wrapper,
body.gr-subpage #page_content_wrapper .sidebar_content.full_width {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
  box-sizing: border-box;
}

body.gr-subpage .gr-page {
  overflow: hidden;
  background: #f8f6f2;
}

body.gr-subpage .gr-hero {
  min-height: clamp(500px, 66vh, 690px);
  margin: 0;
  padding: 180px 32px 96px;
  box-sizing: border-box;
  background-position: center 48%;
}

body.gr-subpage .gr-hero-overlay {
  background:
    radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42) 68%),
    linear-gradient(180deg, rgba(10, 9, 8, 0.52) 0%, rgba(10, 9, 8, 0.2) 42%, rgba(10, 9, 8, 0.66) 100%);
}

body.gr-subpage .gr-hero-inner {
  width: min(900px, 100%);
  margin: auto;
  transform: translateY(22px);
}

body.gr-subpage .gr-hero-script {
  font-size: clamp(54px, 5vw, 76px);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

body.gr-subpage .gr-hero-title {
  margin-top: 8px;
  font-size: clamp(46px, 5.4vw, 76px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.08em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.38);
}

body.gr-subpage .gr-hero-inner::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin: 30px auto 0;
  background: #d5ae72;
  box-shadow: -78px 0 rgba(255, 255, 255, 0.35), 78px 0 rgba(255, 255, 255, 0.35);
}

body.gr-subpage .gr-section {
  position: relative;
  padding: 104px 0;
}

body.gr-subpage .gr-wrap {
  max-width: 1240px;
  padding: 0 44px;
}

body.gr-subpage .gr-heading {
  margin-bottom: 46px;
}

body.gr-subpage .gr-heading-script {
  font-size: 52px;
}

body.gr-subpage .gr-heading-title {
  margin-top: -2px;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: 0.035em;
}

/* About — opening editorial story */
.gr-story-section .gr-wrap {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
  gap: clamp(54px, 8vw, 120px);
  align-items: start;
}

.gr-story-section .gr-heading {
  position: relative;
  margin: 4px 0 0;
  text-align: left;
}

.gr-story-section .gr-heading::after {
  content: '';
  display: block;
  width: 78px;
  height: 1px;
  margin-top: 28px;
  background: #cfa670;
}

.gr-story-section .gr-prose {
  max-width: none;
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 1.95;
  color: #55514b;
}

.gr-story-section .gr-prose p:first-child {
  font-size: 20px;
  line-height: 1.75;
  color: #24211d;
}

.gr-story-mark {
  position: absolute;
  right: -18px;
  bottom: -96px;
  font-family: 'Cinzel', serif;
  font-size: 300px;
  line-height: 1;
  color: rgba(207, 166, 112, 0.07);
  pointer-events: none;
}

/* About — services become a confident dark feature band */
body.gr-subpage .gr-section-dark {
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 20%, rgba(207, 166, 112, 0.1), transparent 30%),
    #181714;
  color: #fff;
}

.gr-section-dark .gr-heading-title,
.gr-section-dark .gr-fact h3 {
  color: #fff;
}

.gr-section-dark .gr-heading-script {
  color: #d5ae72;
}

.gr-facts-section .gr-facts {
  counter-reset: grandezza-fact;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.gr-facts-section .gr-fact {
  position: relative;
  min-height: 190px;
  padding: 38px 30px 32px;
  background: #181714;
  box-sizing: border-box;
  counter-increment: grandezza-fact;
  transition: background 0.3s ease, transform 0.3s ease;
}

.gr-facts-section .gr-fact::before {
  content: '0' counter(grandezza-fact);
  display: block;
  margin-bottom: 42px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #cfa670;
}

.gr-facts-section .gr-fact:hover {
  z-index: 1;
  background: #211f1b;
  transform: translateY(-5px);
}

.gr-facts-section .gr-fact h3 {
  font-size: 18px;
  line-height: 1.4;
}

.gr-facts-section .gr-fact p {
  color: rgba(255, 255, 255, 0.62);
}

/* About — varied editorial gallery instead of six identical tiles */
.gr-gallery-section {
  background: #efebe4;
}

.gr-gallery-section .gr-photos {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 165px;
  gap: 16px;
}

.gr-gallery-section .gr-photo {
  position: relative;
  grid-column: span 4;
  box-shadow: 0 16px 40px rgba(34, 29, 22, 0.1);
}

.gr-gallery-section .gr-photo:nth-child(1),
.gr-gallery-section .gr-photo:nth-child(4) {
  grid-column: span 7;
  grid-row: span 2;
}

.gr-gallery-section .gr-photo:nth-child(2),
.gr-gallery-section .gr-photo:nth-child(3),
.gr-gallery-section .gr-photo:nth-child(5),
.gr-gallery-section .gr-photo:nth-child(6) {
  grid-column: span 5;
}

.gr-gallery-section .gr-photo img {
  height: 100%;
}

.gr-gallery-section .gr-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  pointer-events: none;
}

/* About — opening hours */
.gr-hours-section {
  background: #fff;
}

.gr-hours-section .gr-wrap {
  max-width: 900px;
}

.gr-hours-section .gr-hours {
  max-width: 720px;
  padding: 12px 42px;
  border-top: 1px solid #cfa670;
  border-bottom: 1px solid #cfa670;
}

.gr-hours-section .gr-hours li {
  padding: 20px 0;
}

/* Careers — opening cards */
.gr-careers-section {
  background: #f4f0e9;
}

.gr-careers-section .gr-jobs {
  counter-reset: grandezza-job;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gr-careers-section .gr-job {
  position: relative;
  min-height: 280px;
  padding: 42px 34px 34px;
  border: 0;
  border-top: 2px solid #cfa670;
  box-shadow: 0 18px 50px rgba(42, 35, 27, 0.08);
  counter-increment: grandezza-job;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.gr-careers-section .gr-job::after {
  content: '0' counter(grandezza-job);
  position: absolute;
  right: 26px;
  bottom: 18px;
  font-family: 'Cinzel', serif;
  font-size: 56px;
  color: rgba(207, 166, 112, 0.12);
}

.gr-careers-section .gr-job:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(42, 35, 27, 0.14);
}

.gr-careers-section .gr-job-head {
  margin-bottom: 22px;
  padding-bottom: 20px;
}

.gr-careers-section .gr-job-role {
  padding-right: 20px;
  font-size: 21px;
  line-height: 1.35;
}

.gr-careers-section > .gr-wrap > .gr-prose {
  margin-top: 44px;
  font-size: 15px;
  color: #6d675f;
}

/* Shared high-contrast contact band */
body.gr-subpage .gr-contact-band {
  background:
    linear-gradient(120deg, rgba(207, 166, 112, 0.08), transparent 38%),
    #191815;
  color: #fff;
}

.gr-contact-band .gr-heading-title,
.gr-contact-band .gr-hours-label,
.gr-contact-band .gr-contact-label {
  color: #fff;
}

.gr-contact-band .gr-prose {
  color: rgba(255, 255, 255, 0.68);
}

.gr-contact-band .gr-contact li {
  padding: 20px 0;
  border-color: rgba(255, 255, 255, 0.13);
}

.gr-contact-band .gr-contact > li > span:last-child {
  color: rgba(255, 255, 255, 0.72);
}

.gr-contact-band .gr-btn-ghost {
  border-color: rgba(255, 255, 255, 0.44);
  color: #fff;
}

.gr-contact-band .gr-btn-ghost:hover {
  border-color: #cfa670;
}

/* Reservation — turn the form into a premium card */
.gr-reservation-section {
  background: #eee9e1;
}

.gr-reservation-section .gr-form {
  max-width: 920px;
  margin-top: 52px;
  padding: 54px 58px 44px;
  border-top: 3px solid #cfa670;
  background: #fff;
  box-shadow: 0 24px 70px rgba(42, 35, 27, 0.12);
  box-sizing: border-box;
}

.gr-reservation-section .gr-field input,
.gr-reservation-section .gr-field select,
.gr-reservation-section .gr-field textarea {
  min-height: 48px;
  border-color: #d8d1c7;
  background: #fcfbf9;
}

.gr-reservation-section .gr-field textarea {
  min-height: 120px;
  resize: vertical;
}

@media (max-width: 980px) {
  body.gr-subpage .gr-section {
    padding: 82px 0;
  }

  body.gr-subpage .gr-wrap {
    padding: 0 30px;
  }

  .gr-story-section .gr-wrap {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .gr-story-section .gr-heading {
    text-align: center;
  }

  .gr-story-section .gr-heading::after {
    margin-right: auto;
    margin-left: auto;
  }

  .gr-facts-section .gr-facts,
  .gr-careers-section .gr-jobs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  body.gr-subpage .gr-hero {
    min-height: 500px;
    padding: 150px 22px 74px;
  }

  body.gr-subpage .gr-hero-inner {
    transform: translateY(8px);
  }

  body.gr-subpage .gr-hero-title {
    font-size: 38px;
    letter-spacing: 0.06em;
  }

  body.gr-subpage .gr-hero-script,
  body.gr-subpage .gr-heading-script {
    font-size: 44px;
  }

  body.gr-subpage .gr-section {
    padding: 64px 0;
  }

  body.gr-subpage .gr-wrap {
    padding: 0 20px;
  }

  .gr-story-section .gr-wrap {
    gap: 28px;
  }

  .gr-story-section .gr-prose p:first-child {
    font-size: 18px;
  }

  .gr-story-mark {
    display: none;
  }

  .gr-facts-section .gr-facts,
  .gr-careers-section .gr-jobs {
    grid-template-columns: 1fr;
  }

  .gr-facts-section .gr-fact {
    min-height: 0;
  }

  .gr-gallery-section .gr-photos {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 250px;
  }

  .gr-gallery-section .gr-photo,
  .gr-gallery-section .gr-photo:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
  }

  .gr-hours-section .gr-hours {
    padding: 8px 0;
  }

  .gr-hours-section .gr-hours li,
  .gr-contact-band .gr-contact li {
    align-items: flex-start;
    flex-direction: column;
  }

  .gr-reservation-section .gr-form {
    padding: 34px 22px 28px;
  }
}

/* --- daily menu, date-aware ----------------------------------------------
   The lunch menu is published a week at a time. Days that have passed are
   removed by grandezza.js; these style what is left. */
.gr-menu-today {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 9px;
  vertical-align: middle;
  background: #cfa670;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
}

.gr-menu-group.is-today .gr-menu-group-title {
  border-bottom-color: #cfa670;
}

.gr-menu-stale {
  column-span: all;
  max-width: 620px;
  margin: 0 0 30px;
  padding: 16px 20px;
  border-left: 2px solid #cfa670;
  background: #faf6f0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: #6f6f6f;
}

/* The last published day, kept on show once the week has expired. Muted, and
   tagged, so it reads as an example of the lunch menu rather than as today's. */
.gr-menu-last {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 9px;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.18);
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #9a9a9a;
}

.gr-menu-group.is-last-published {
  opacity: 0.72;
}

.gr-menu-group.is-last-published:hover {
  opacity: 1;
}