/* Visual clean-up layer on top of the exact WordPress copy. Loaded after the theme CSS. */

/* Homepage only. Every rule is scoped to body.home plus a row id, because other pages reuse the same row-unique-N ids.
   row-unique-2: "Hertebos, een intiem huiskamerrestaurant." with the sign photo and the reservation button.
   row-unique-3: the burgundy quote band "Créé par un amour authentique".
   row-unique-4: "Waar tafelen een beleving wordt" with the three formula cards. */

/* Shared photo frame: the same soft corner and shadow as the photos on /menu/. */
body.home #row-unique-2 .t-entry-visual,
body.home #row-unique-3 .t-entry-visual,
body.home #row-unique-4 .t-entry-visual {
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .1);
}
body.home #row-unique-2 .t-entry-visual img,
body.home #row-unique-3 .t-entry-visual img {
  object-fit: cover;
}

/* Row 2: one cream field that continues the intro above, instead of a cream tile next to a burgundy tile. */
body.home #row-unique-2 {
  background-color: #F9EBE0;
}
body.home #row-unique-2 .uncell.style-color-202508-bg {
  background-color: transparent;
}
/* The button sits under the photo as part of the same column, not on its own coloured tile. */
body.home #row-unique-2 .row-internal .uncell {
  padding: 32px 0 0;
}
/* Same rose button as the hero. The theme sets the white button with !important. */
body.home #row-unique-2 .btn-container .btn {
  background-color: #B98994 !important;
  border-color: #B98994 !important;
  color: #fff !important;
}
body.home #row-unique-2 .btn-container .btn:hover,
body.home #row-unique-2 .btn-container .btn:focus-visible {
  background-color: #650A1B !important;
  border-color: #650A1B !important;
  color: #fff !important;
}

/* Row 3: the quote keeps its band, with calmer type and a quieter signature. */
body.home #row-unique-3 h3 {
  line-height: 1.2;
}
body.home #row-unique-3 .text-lead {
  opacity: .8;
}

/* Desktop: rows 2 and 3 share the 1224px content width and the 144px rhythm of the cream rows. */
@media (min-width: 960px) {
  body.home #row-unique-2 > .row {
    max-width: 1296px;
    margin: 0 auto;
    padding: 0 36px 144px;
  }
  body.home #row-unique-2 .column_parent:first-child > .uncol > .uncoltable > .uncell {
    padding: 0 72px 0 0;
  }

  body.home #row-unique-3 > .row {
    max-width: 1296px;
    margin: 0 auto;
    padding: 144px 36px;
  }
  /* Drop the offset columns so the quote and photo sit on the same edges as everything above and below. */
  body.home #row-unique-3 .shift_x_double,
  body.home #row-unique-3 .shift_x_neg_double {
    left: 0 !important;
    right: auto !important;
  }
  body.home #row-unique-3 .column_parent.col-lg-8 {
    width: 58.333%;
  }
  body.home #row-unique-3 .column_parent.col-lg-4 {
    width: 41.667%;
  }
  body.home #row-unique-3 .column_parent.col-lg-8 > .uncol > .uncoltable > .uncell {
    padding-right: 72px;
  }
  body.home #row-unique-3 h3 {
    font-size: 64px;
    max-width: 11em;
  }
  body.home #row-unique-3 .text-lead {
    margin-top: 28px;
  }
}

/* Tablet and mobile: the theme stacks the columns with the photo first. Inset the photo to the same
   side margin as the text around it, so it reads as a framed photo and not as another full-width block. */
@media (max-width: 959px) {
  body.home #row-unique-2 > .row {
    padding: 0 36px 72px;
  }
  body.home #row-unique-2 .column_parent:first-child > .uncol > .uncoltable > .uncell {
    padding: 48px 0 0;
  }
  body.home #row-unique-3 .text-lead {
    margin-top: 20px;
  }
}

/* Phones: scale the quote with the screen so the closing quote mark never ends up alone on a third line. */
@media (max-width: 569px) {
  body.home #row-unique-3 h3 {
    font-size: min(35px, calc((100vw - 72px) / 9.6));
  }
}

/* Announcement bar sits below the menu in the stacking order. When the theme fixes the menu to the top
   on scroll (tablet and phone), the bar slides away underneath it instead of covering the logo. */
body .hb-announce { z-index: 999 !important; }