:root {
    --meylu-accent: #C27A33;
    --meylu-dark: #2A3236;
    --meylu-light: #efefef;
    --meylu-white: #ffffff;
}

html,
body {
    background-color: var(--meylu-white);
    color: var(--meylu-dark);
}

.meylu-header-logo {
    display: block;
    width: 48px;
    height: 56px;
    object-fit: contain;
}

/* Overrides for the imported landing-page utility classes. */
.bg-grey,
.bg-black { background-color: var(--meylu-dark) !important; }

.bg-blue { background-color: var(--meylu-accent) !important; }

.bg-white,
.bg-ricePaper { background-color: var(--meylu-light) !important; }
.bg-ricePaperWhite { background-color: var(--meylu-white) !important; }

.text-black,
.text-grey { color: var(--meylu-dark) !important; }

.text-blue { color: var(--meylu-accent) !important; }

.text-white { color: var(--meylu-white) !important; }

.border-black,
.border-grey { border-color: var(--meylu-dark) !important; }

.border-white { border-color: var(--meylu-light) !important; }

.hover\:bg-blue:hover,
.hover\:bg-grey:hover,
.hover\:bg-black:hover { background-color: var(--meylu-accent) !important; }

/* Normalize literal colors embedded in the imported markup and SVG icons. */
[style*="color: rgb(51, 51, 51)"],
[style*="color:#333"] { color: var(--meylu-dark) !important; }

svg [fill="black"] { fill: var(--meylu-dark); }
svg [stroke="black"] { stroke: var(--meylu-dark); }
svg [fill="white"] { fill: var(--meylu-light); }
svg [stroke="white"] { stroke: var(--meylu-light); }

/* Header slider controls slide in from the image edges on hover. */
:is(#hero-wrapper, #meylu-cafes-carousel) .meylu-hero-arrow {
  position: absolute;
  top: 350px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 37px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--meylu-light, #fff);
  color: var(--meylu-dark, #333);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: transform 300ms ease, opacity 180ms ease;
}

:is(#hero-wrapper, #meylu-cafes-carousel) .meylu-hero-arrow--left {
  left: 0;
  transform: translate(-100%, -50%);
}
:is(#hero-wrapper, #meylu-cafes-carousel) .meylu-hero-arrow--right {
  right: 0;
  transform: translate(100%, -50%);
}
:is(#hero-wrapper, #meylu-cafes-carousel) .meylu-hero-arrow--left svg { transform: rotate(180deg); }

:is(#hero-wrapper, #meylu-cafes-carousel):hover .meylu-hero-arrow,
:is(#hero-wrapper, #meylu-cafes-carousel) .meylu-hero-arrow:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}

:is(#hero-wrapper, #meylu-cafes-carousel) .meylu-hero-arrow:hover { opacity: .7; }
:is(#hero-wrapper, #meylu-cafes-carousel) .meylu-hero-arrow:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  :is(#hero-wrapper, #meylu-cafes-carousel) .meylu-hero-arrow { display: none; }
}

@media (min-width: 768px) {
  #hero-wrapper .meylu-hero-arrow { top: 350px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(#hero-wrapper, #meylu-cafes-carousel) .meylu-hero-arrow { transition: none; }
}

/* Keep the shared hero controls centered on the membership image, above its caption. */
#meylu-cafes-carousel .meylu-membership-arrows {
  position: absolute;
  inset-inline: 0;
  top: 0;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  z-index: 20;
}
#meylu-cafes-carousel .meylu-hero-arrow { top: 50%; }
#meylu-cafes-carousel-items {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#meylu-cafes-carousel-items::-webkit-scrollbar { display: none; }