/**
 * Eetkamer Bredius – theme styles that theme.json can't express.
 * Loaded on the front end and in the editor (add_editor_style).
 */

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */

.wp-site-blocks {
  overflow-x: clip;
}

/* Header, main and footer sit flush against each other. */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

:where(.wp-block-group.has-background) > :first-child {
  margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.eb-site-header {
  position: relative;
  z-index: 50;
}

/*
 * Layout: logo centred, navigation on the right (large screens).
 * At ≤1650px the logo jumps to the left (still full size) so the menu keeps
 * enough room and never wraps; at ≤1080px the logo is scaled down.
 */
/*
 * Logo "pops" over the bottom edge of the bar in the same proportion at every
 * size (template: 274px logo, 34px from the top, 65px overlap, 168px bar).
 * Only --eb-logo-w changes per breakpoint; bar height, top offset and overlap
 * scale with it, so smaller screens get a lower bar rather than a bigger logo.
 */
.eb-header__bar.eb-header__bar {
  --eb-logo-w: 274px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: calc(var(--eb-logo-w) * 168 / 274);
  gap: 24px;
}

.eb-header__bar > .eb-logo {
  grid-column: 2;
  align-self: start;
  margin: calc(var(--eb-logo-w) * 34 / 274) 0 calc(var(--eb-logo-w) * -65 / 274) !important;
  position: relative;
  z-index: 2;
}

.eb-logo a,
.eb-logo img {
  display: block;
}

.eb-logo img {
  width: var(--eb-logo-w, 274px) !important;
  max-width: none;
  height: auto;
}

.eb-header__bar > .eb-nav {
  grid-column: 3;
  justify-self: end;
}

/* Menu labels never wrap to two lines. */
.eb-nav .wp-block-navigation-item__content,
.eb-nav .wp-block-navigation-item__label {
  white-space: nowrap;
}

/* Active page: magenta underline (also on the parent of an active sub-item). */
.eb-nav .current-menu-item > .wp-block-navigation-item__content,
.eb-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.eb-nav
  .wp-block-navigation-item:has(.current-menu-item)
  > .wp-block-navigation-item__content {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--magenta);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

/* Submenu triangle instead of the default chevron. */
.eb-nav .wp-block-navigation__submenu-icon {
  width: 13px;
  height: 12px;
  margin-left: 8px;
  background-color: var(--wp--preset--color--charcoal);
  -webkit-mask: url(../icons/triangle-down.svg) center / contain no-repeat;
  mask: url(../icons/triangle-down.svg) center / contain no-repeat;
  transition: transform 0.2s ease;
}

.eb-nav .wp-block-navigation__submenu-icon svg {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Dropdown (Figma: MacBook Pro 16" - 16)
 * Open = magenta tab behind "Menu" that flows into a magenta panel.
 * Only on the desktop bar, not in the mobile overlay.
 * ------------------------------------------------------------------------ */

.eb-nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) li.wp-block-navigation-submenu {
  /* Padding gives the tab its size; the negative margin keeps the menu items
     exactly where they are when closed. */
  padding: 8px 20px 10px 24px;
  margin: -8px -20px -10px -24px !important;
  border-radius: 8px 8px 0 0;
  transition: background-color 0.15s ease;
}

.eb-nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) li.wp-block-navigation-submenu:is(:hover, :focus-within),
.eb-nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) li.wp-block-navigation-submenu:has(> [aria-expanded="true"]) {
  background-color: var(--wp--preset--color--magenta);
}

.eb-nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) li.wp-block-navigation-submenu:is(:hover, :focus-within) > .wp-block-navigation-item__content,
.eb-nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) li.wp-block-navigation-submenu:has(> [aria-expanded="true"]) > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--white);
  text-decoration-color: var(--wp--preset--color--white);
}

.eb-nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) li.wp-block-navigation-submenu:is(:hover, :focus-within) > .wp-block-navigation__submenu-icon,
.eb-nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) li.wp-block-navigation-submenu:has(> [aria-expanded="true"]) > .wp-block-navigation__submenu-icon {
  background-color: var(--wp--preset--color--white);
  transform: rotate(180deg);
}

.eb-nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .wp-block-navigation__submenu-container {
  top: 100% !important;
  left: 0 !important;
  min-width: 338px !important;
  padding: 18px 0 22px;
  border: 0 !important;
  border-radius: 0 10px 10px 10px;
  background-color: var(--wp--preset--color--magenta) !important;
  color: var(--wp--preset--color--white) !important;
  box-shadow: none;
}

.eb-nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 7px 24px !important;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
}

.eb-nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible),
.eb-nav :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--white);
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--white);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Mobile overlay menu */
.eb-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: 32px 24px;
}

.eb-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  gap: 20px;
  font-size: var(--wp--preset--font-size--large);
}

.eb-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
}

/* Large-medium: logo jumps to the left, keeps its full size. */
@media (max-width: 1650px) {
  .eb-header__bar.eb-header__bar {
    grid-template-columns: auto 1fr;
  }

  .eb-header__bar > .eb-logo {
    grid-column: 1;
  }

  .eb-header__bar > .eb-nav {
    grid-column: 2;
  }
}

/* Medium and smaller: only the logo width changes, the rest follows. */
@media (max-width: 1080px) {
  .eb-header__bar.eb-header__bar {
    --eb-logo-w: 180px;
  }
}

@media (max-width: 960px) {
  .eb-header__bar.eb-header__bar {
    --eb-logo-w: 140px;
  }

  .eb-nav {
    font-size: var(--wp--preset--font-size--small) !important;
  }

  .eb-nav .wp-block-navigation__container {
    gap: 22px !important;
  }
}

@media (max-width: 600px) {
  .eb-header__bar.eb-header__bar {
    --eb-logo-w: 120px;
  }
}

/* ---------------------------------------------------------------------------
 * Front page hero – fader
 * Editor view: slides side by side so each image stays editable.
 * Front end: stacked cross-fade, see assets/css/fader.css + assets/js/fader.js.
 * ------------------------------------------------------------------------ */

.eb-fader {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.eb-fader > .eb-fader__slide {
  margin: 0 !important;
}

.eb-fader > .eb-fader__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Cover blocks: the colour overlay always spans the full block.
 * (Constrained layout would otherwise give it a max-width and a top margin.)
 * ------------------------------------------------------------------------ */

.wp-block-cover > .wp-block-cover__background,
.wp-block-cover > .wp-block-cover__image-background {
  max-width: none !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Page hero (cover with page title)
 * ------------------------------------------------------------------------ */

.eb-hero .wp-block-post-title,
.eb-hero .wp-block-query-title {
  margin: 0;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
 * Buttons – green pill with arrow
 * ------------------------------------------------------------------------ */

.wp-block-button:not(.is-style-no-arrow) > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wp-block-button:not(.is-style-no-arrow) > .wp-block-button__link::before {
  content: '';
  flex: none;
  width: 28px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask: url(../icons/arrow.svg) center / contain no-repeat;
  mask: url(../icons/arrow.svg) center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
 * Arrow links (list + paragraph style)
 * ------------------------------------------------------------------------ */

ul.is-style-arrow-links {
  list-style: none;
  margin-block-end: 0;
  padding-left: 0 !important;
}

.is-style-arrow-links li,
p.is-style-arrow-link {
  position: relative;
  padding-left: 40px;
  font-weight: 700;
}

.is-style-arrow-links li {
  color: var(--wp--preset--color--magenta);
  margin: 0 0 12px;
  font-size: var(--wp--preset--font-size--medium);
}

.is-style-arrow-links li::before,
p.is-style-arrow-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: url(../icons/arrow.svg) center / contain no-repeat;
  mask: url(../icons/arrow.svg) center / contain no-repeat;
}

.is-style-arrow-links a,
p.is-style-arrow-link a {
  color: inherit;
  text-decoration: none;
}

.is-style-arrow-links a:hover,
.is-style-arrow-links a:focus,
p.is-style-arrow-link a:hover,
p.is-style-arrow-link a:focus {
  color: inherit;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Card that bleeds off the left edge of the viewport
 * ------------------------------------------------------------------------ */

/*
 * The card itself is stretched to the viewport edge (negative margin + matching
 * padding), so background, radius and shadow are painted by ONE box. No pseudo
 * element, so no doubled shadow where two boxes would meet.
 *
 * --eb-bleed = distance from the content column's left edge to the viewport edge
 * = max(root padding, (viewport - content size) / 2). 100vw includes the
 * scrollbar, so the box may overshoot by a few px; .wp-site-blocks clips that.
 * Intended for blocks that start at the left edge of the content column
 * (e.g. inside the first column of a Columns block).
 */
.is-style-bleed-left {
  --eb-bleed: max(
    var(--wp--style--root--padding-left, 0px),
    (100vw - var(--wp--style--global--content-size, 1350px)) / 2
  );
  margin-left: calc(var(--eb-bleed) * -1) !important;
  padding-left: var(--eb-bleed) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Front page – welcome section
 * ------------------------------------------------------------------------ */

.eb-band.wp-block-cover {
  padding-top: 0;
  padding-bottom: 0;
}

.eb-welcome__cards {
  position: relative;
  z-index: 2;
}

/* Opening hours card */
.wp-block-table.is-style-opening-hours {
  margin: 4px 0 6px;
}

.is-style-opening-hours table {
  width: 100%;
  border-collapse: collapse;
}

.is-style-opening-hours td,
.is-style-opening-hours th {
  border: 0 !important;
  padding: 5px 16px 5px 0;
  vertical-align: top;
}

.is-style-opening-hours td:first-child {
  width: 60%;
}

/* Pink menu card with chalkboard illustration */
.eb-menu-card {
  position: relative;
}

.eb-menu-card > .eb-menu-board {
  position: absolute;
  top: -32px;
  right: -30px;
  width: 179px;
  margin: 0 !important;
  pointer-events: none;
}

@media (max-width: 1280px) {
  .eb-menu-card > .eb-menu-board {
    width: 130px;
    right: -10px;
  }

  .eb-menu-card.eb-menu-card {
    padding-right: 140px !important;
  }
}

@media (max-width: 480px) {
  .eb-menu-card > .eb-menu-board {
    width: 96px;
    top: -24px;
  }

  .eb-menu-card.eb-menu-card {
    padding-right: 96px !important;
  }
}

/* ---------------------------------------------------------------------------
 * Front page – temporary special (red banner)
 * ------------------------------------------------------------------------ */

.eb-special.eb-special {
  position: relative;
  z-index: 3;
}

.eb-special > .wp-block-columns {
  position: relative;
}

.eb-special .eb-special__badge {
  align-self: stretch;
  position: relative;
  min-height: 135px;
}

p.is-style-tag {
  display: inline-block;
  margin: 0;
  padding: 6px 22px 8px;
  border-radius: 10px;
  background-color: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--off-white);
  font-family: var(--wp--preset--font-family--caveat);
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  transform: rotate(-13.44deg);
  transform-origin: left center;
}

.eb-special__badge > p.is-style-tag {
  position: absolute;
  top: 2px;
  left: 0;
  z-index: 2;
}

/* Anchored to the label (top), so it stays put when the banner text wraps. */
.eb-special__badge > .eb-special__illustration {
  position: absolute;
  left: 90px;
  top: 14px;
  width: 198px;
  margin: 0 !important;
  z-index: 3;
}

@media (max-width: 781px) {
  .eb-special .eb-special__badge {
    min-height: 60px;
  }

  .eb-special__badge > p.is-style-tag {
    top: -60px;
    font-size: 36px;
  }

  .eb-special__badge > .eb-special__illustration {
    left: auto;
    right: 0;
    bottom: auto;
    top: -70px;
    width: 110px;
  }
}

/* Price tags (Caveat) */
.eb-price {
  font-weight: 700;
  line-height: 1 !important;
  margin: 0;
  white-space: nowrap;
}

.eb-price__currency {
  font-size: 0.54em;
}

.eb-price__cents {
  font-size: 0.5em;
}

.eb-price--on-image {
  position: relative;
  z-index: 1;
  margin-top: calc(-1em + 10px) !important;
  margin-bottom: -10px !important;
  padding-right: 10px;
}

.eb-price--on-image .eb-price__currency {
  font-size: 0.36em;
}

.eb-price--on-image .eb-price__cents {
  font-size: 0.55em;
}

/* ---------------------------------------------------------------------------
 * Front page – magenta highlights band
 * ------------------------------------------------------------------------ */

.eb-highlights.wp-block-cover {
  overflow: visible;
  align-items: flex-start;
}

.eb-highlights .wp-block-heading {
  color: var(--wp--preset--color--off-white);
}

@media (max-width: 781px) {
  .eb-highlights.wp-block-cover {
    margin-top: var(--wp--preset--spacing--70) !important;
  }
}

/* ---------------------------------------------------------------------------
 * Location / contact
 * ------------------------------------------------------------------------ */

ul.is-style-contact {
  list-style: none;
  margin-block-end: 0;
  padding-left: 0 !important;
}

.is-style-contact li {
  position: relative;
  padding-left: 32px;
  margin: 0 0 4px;
}

.is-style-contact li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.2em;
  width: 20px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.is-style-contact li.eb-contact-phone::before {
  -webkit-mask-image: url(../icons/phone.svg);
  mask-image: url(../icons/phone.svg);
}

.is-style-contact li.eb-contact-mail::before {
  -webkit-mask-image: url(../icons/mail.svg);
  mask-image: url(../icons/mail.svg);
}

.is-style-contact a {
  color: inherit;
  text-decoration: none;
}

.is-style-contact a:hover,
.is-style-contact a:focus {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

.eb-footer__row p {
  margin: 0;
}

.eb-footer a {
  text-decoration: none;
}

.eb-footer a:hover,
.eb-footer a:focus {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .eb-footer__sep {
    display: none;
  }

  .eb-footer__row {
    flex-direction: column;
    gap: 6px !important;
  }
}

/* ---------------------------------------------------------------------------
 * Content pages
 * ------------------------------------------------------------------------ */

.eb-menukaart .wp-block-image {
  margin: 0;
}

.eb-menukaart .wp-block-image img {
  width: 100%;
  height: auto;
}

@media (max-width: 781px) {
  .is-style-bleed-left.is-style-bleed-left {
    padding-right: 24px !important;
  }

  .eb-hero.wp-block-cover {
    min-height: 200px !important;
  }

  .eb-band.wp-block-cover:not(.eb-highlights) {
    min-height: 260px !important;
  }
}