/*
Theme Name: Aan de Meul Editorial
Theme URI: https://aandemeul.com/
Author: TPF Hospitality
Description: The Aan de Meul editorial design, apartment galleries, interactive mood impressions, booking and reservations experience.
Version: 1.0.10
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: aan-de-meul-editorial
*/
body.admin-bar .site-header { margin-top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { margin-top: 46px; } }
.adm-wp-content { max-width: 1180px; margin: 120px auto 80px; padding: 32px; border-radius: 32px; background: #fbf8f1; }
.adm-wp-content img { max-width: 100%; height: auto; border-radius: 24px; }
/* The open assistant sits above navigation and cannot scroll sideways. */
@media (max-width: 760px) {
  body .stay-assistant:has(.assistant-panel:not([hidden])) { z-index: 5000; }
  body .stay-assistant .assistant-panel {
    min-width: 0; max-width: calc(100vw - 1rem); box-sizing: border-box; overflow-x: hidden;
  }
  body .stay-assistant .assistant-panel > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
  body .stay-assistant .assistant-panel > header { width: auto; left: auto; right: auto; flex-wrap: nowrap; }
  body .stay-assistant .assistant-panel > header > div { min-width: 0; overflow-wrap: anywhere; }
  body .stay-assistant .assistant-panel > header strong { white-space: normal; }
}


/* Phone layouts: photo-first hero, reachable controls and keyboard-aware panels. */
@media (max-width: 760px) {
  body { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  body.quadro-home .campaign .campaign-stage,
  body.quadro-home .campaign.is-ready .campaign-slide { min-height: 0; }
  body.quadro-home .campaign-slide img[data-compact-image],
  body.quadro-home .campaign-slide > .header-film,
  body.quadro-home .campaign-slide > .header-film.has-played > video {
    aspect-ratio: 3 / 2 !important; object-fit: cover;
  }
  body.quadro-home .campaign.is-ready .campaign-caption {
    margin: .75rem; padding: 1.15rem; min-height: 0;
  }
  body.quadro-home .campaign-caption :is(h1,h2) {
    font-size: clamp(1.75rem,7.5vw,2.25rem); line-height: 1.12 !important;
  }
  body.quadro-home .campaign-caption > p { margin-bottom: .75rem; font-size: .875rem; line-height: 1.45; }
  body.quadro-home .campaign .campaign-actions { gap: .5rem .75rem; margin-top: .9rem; }
  body.quadro-home .campaign .campaign-actions .button { min-height: 44px; font-size: .9375rem; }
  body.quadro-home .campaign-pagination { display: none; }
  body.quadro-home .campaign > .photo-reel-controls button {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    background: rgb(27 35 26 / .35); backdrop-filter: blur(8px);
  }
  body.quadro-home .campaign > .photo-reel-controls button svg { width: 28px; height: 28px; }
  body .site-header #mobile-menu { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body .site-header #mobile-menu :is(a,summary) { min-height: 44px; display: flex; align-items: center; }
  body .site-header .menu-toggle { min-width: 44px; }
  body .reservations-fields { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  body .reservations-fields label { display: block; }
  body .reservations-section { padding: 1.25rem; }
  body .reservations-form textarea { min-height: 10rem; }
  body .reservations-form .reservations-submit { width: 100%; min-height: 48px; }
  body .reservations-close {
    position: sticky; top: max(.5rem,env(safe-area-inset-top)); right: auto;
    display: grid; place-items: center; margin: .5rem .5rem -3.25rem auto;
    background: #fcfaf5; box-shadow: 0 2px 10px #27312d20; z-index: 5;
  }
  body .reservations-dialog { max-height: calc(var(--adm-visible-height,100dvh) - 1rem); overscroll-behavior: contain; }
  body :is(.reservations-form,.stay-date-fields,.assistant-form) :is(input,textarea,select) { font-size: 16px; min-width: 0; }
  body .photo-dialog-header { padding: max(.75rem,env(safe-area-inset-top)) .75rem .75rem; }
  body .stay-assistant {
    left: max(.75rem,env(safe-area-inset-left)); right: max(.75rem,env(safe-area-inset-right));
    bottom: max(.65rem,env(safe-area-inset-bottom)); max-width: none;
  }
  body .stay-assistant > :is(a,button) { min-height: 48px; font-size: .875rem; }
  body .stay-assistant .assistant-panel {
    position: fixed; left: max(.5rem,env(safe-area-inset-left)); right: max(.5rem,env(safe-area-inset-right));
    top: calc(var(--adm-visible-top,0px) + .5rem); bottom: auto; width: auto;
    height: min(46rem,calc(var(--adm-visible-height,100dvh) - 1rem));
    max-height: calc(var(--adm-visible-height,100dvh) - 1rem); overflow: auto; overscroll-behavior: contain;
  }
  body .stay-assistant .assistant-panel > header { position: sticky; top: 0; z-index: 2; flex-shrink: 0; }
  body .stay-assistant .assistant-form { position: sticky; bottom: 0; flex-shrink: 0; background: #fff; }
  body .stay-assistant .assistant-messages { min-height: 4rem; flex: 1 1 auto; }
  body .stay-assistant .assistant-form :is(input,button) { min-height: 44px; }
  body.adm-field-editing .stay-assistant > :is(a,button),
  body.adm-cookie-visible .stay-assistant > :is(a,button),
  body:has(dialog[open]) .stay-assistant { visibility: hidden; pointer-events: none; }
  body .stay-assistant:has(.assistant-panel:not([hidden])) > :is(a,button) { visibility: hidden; pointer-events: none; }
  body #cookie-law-info-bar { box-sizing: border-box; max-height: 45dvh; overflow-y: auto; padding: 1rem !important; font-size: .875rem; line-height: 1.45; }
  body #cookie-law-info-bar .cli_action_button { min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; }
}
@media (max-width: 600px) {
  body .mood-inline .mood-stage { height: 365px; }
  body .mood-inline .mood-controls {
    display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
    width: calc(100% - 24px); max-width: 340px; box-sizing: border-box; gap: 4px; border-radius: 22px;
  }
  body .mood-inline .mood-controls button { min-width: 44px; height: 44px; padding: 0 4px; }
  body .mood-inline .mood-controls .mood-word-control { grid-column: span 2; font-size: .875rem; }
  body .mood-inline #mood-canvas,body .mood-inline .mood-loading { bottom: 132px; }
  body .mood-inline .mood-floating-help { bottom: 113px; }
  body .mood-inline .mood-caption { font-size: .8125rem !important; }
}
@media (max-width: 520px) {
  body :is(.offer-booking,.booking,.apartment-booking-content) .stay-date-fields { grid-template-columns: minmax(0,1fr); }
  body .stay-date-fields :is(input,select,.button) { min-height: 48px; }
}

/* Mobile catalog dialogs and comfortable map controls. */
@media (max-width: 760px) {
  body .stay-tools button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: .5rem;
  }
  body .stay-tools-dialog {
    height: calc(var(--adm-visible-height, 100dvh) - 1rem);
    max-height: calc(var(--adm-visible-height, 100dvh) - 1rem);
    margin: auto;
    overflow: hidden;
  }
  body .stay-tools-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  body .stay-tools-dialog .stay-tool-content {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 520px) {
  body .finder-title {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  body .finder-title .stay-tools { margin-block: 0; }
}

@media (max-width: 760px) {
  body :is(.nearby-filters button,.nearby-map-heading button,.nearby-card-actions button,.nearby-card-actions a,.nearby-card h2 button,.map-view-switch button,#arrival-fit,.cookie-settings) {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  body .map-view-switch button { min-width: 44px; }
  body .nearby-card h2 button { justify-content: flex-start; }
  body :is(.room-finder,.stay-tool-form,.stay-compare-picker,.stay-guest-context) select { font-size: 16px; min-height: 44px; }
  body :is(#arrival-map,#nearby-map) .maplibregl-ctrl-group button,
  body :is(#arrival-map,#nearby-map) .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
  body :is(#arrival-map,#nearby-map) .maplibregl-popup-close-button,
  body :is(#arrival-map,#nearby-map) .leaflet-popup-close-button { width: 44px; height: 44px; line-height: 44px; }
  body :is(#arrival-map,#nearby-map) .maplibregl-popup-content { padding-right: 48px; }
  body :is(#arrival-map,#nearby-map) .leaflet-popup-content { margin-right: 42px; }
}

/* Early Bird offer: a compact callout beneath the homepage gallery. */
body.quadro-home .early-bird-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1rem 2rem; margin: 1.5rem auto; padding: clamp(1.25rem,3vw,2rem);
  box-sizing: border-box; border-radius: 28px; background: #f5f1e6;
}
body.quadro-home .early-bird-banner > div { flex: 1 1 20rem; min-width: 0; }
body.quadro-home .early-bird-banner h2 { margin: 0 0 .4rem; font-size: clamp(1.5rem,3vw,2rem); line-height: 1.15; }
body.quadro-home .early-bird-banner p { margin: 0; font-size: 1rem; line-height: 1.6; }
body.quadro-home .early-bird-banner > a { flex-shrink: 0; min-height: 48px; }
@media (max-width: 520px) {
  body.quadro-home .early-bird-banner > a { width: 100%; justify-content: center; }
}

/* Keep mobile date fields inside their cards, including iOS native controls. */
@media (max-width: 760px) {
  body [data-booking-form],
  body [data-booking-form] .stay-date-fields,
  body [data-booking-form] .stay-date-fields > label {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  body [data-booking-form] .stay-date-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  body [data-booking-form] .stay-date-fields > label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-inline: 0;
  }
  body [data-booking-form] .stay-date-fields input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    min-height: 48px;
    margin-inline: auto;
    font-size: 16px;
  }
  body [data-booking-form] .stay-date-fields input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }
  body [data-booking-form] .stay-date-fields > .button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* Mobile photo navigation: visible controls on every photograph. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body .photo-reel-controls,
  body.quadro-home .campaign > .photo-reel-controls {
    visibility: visible;
    opacity: 1;
  }
  body .photo-reel-controls button,
  body.quadro-home .campaign > .photo-reel-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .55);
    border-radius: 50%;
    color: #fff;
    background: rgb(27 35 26 / .72);
    box-shadow: 0 2px 10px rgb(0 0 0 / .16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    touch-action: manipulation;
  }
  body .photo-reel-controls [data-reel-prev] { left: 8px; }
  body .photo-reel-controls [data-reel-next] { right: 8px; }
  body .photo-reel-controls button svg,
  body.quadro-home .campaign > .photo-reel-controls button svg {
    width: 26px;
    height: 26px;
  }
  body .photo-reel-controls button:active { background: rgb(27 35 26 / .92); }
  body .photo-reel-controls button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
  body .photo-fade-track { touch-action: pan-y pinch-zoom; }
}

/* Apartment photographs are browsable in place on phones. */
body .photo-reel-controls.apartment-mobile-photo-controls { display: none; }
body [data-photo-status] { display: none; }
@media (max-width: 650px) {
  body .has-photo-viewer [data-photo-home] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 1.25rem;
    overflow: hidden;
  }
  body .has-photo-viewer [data-photo-home] .photo-mosaic {
    display: flex !important;
    width: 100%;
    height: 100%;
    gap: 0;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y pinch-zoom;
    scrollbar-width: none;
  }
  body .has-photo-viewer [data-photo-home] .photo-mosaic::-webkit-scrollbar { display: none; }
  body .has-photo-viewer [data-photo-home] .photo-mosaic > figure {
    display: block !important;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: 100%;
    grid-area: auto !important;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  body .has-photo-viewer [data-photo-home] .photo-reel-controls.apartment-mobile-photo-controls {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  body .apartment-photos.has-photo-viewer .photo-gallery-actions {
    position: static;
    display: flex;
    justify-content: flex-end;
    max-width: 100%;
    margin-top: .75rem;
  }
  body .photo-viewer-controls { flex-wrap: nowrap; gap: .75rem; }
}

/* Automatic mobile slideshows: layered fades and restrained photographic motion. */
@keyframes adm-mobile-photo-drift { from { scale: 1; } to { scale: 1.055; } }
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body .photo-fade-track > .photo-fade-slide {
    transition: opacity .85s ease !important;
  }
  body .photo-blur-track { transform: none !important; }
  body .photo-blur-edge { display: none; }
  body .photo-reel-layer > .photo-fade-slide.is-active > img {
    animation: adm-mobile-photo-drift 6.5s ease-in-out both !important;
    animation-play-state: paused !important;
  }
  body .photo-motion-playing .photo-reel-layer > .photo-fade-slide.is-active > img {
    animation-play-state: running !important;
  }
  body .has-photo-viewer [data-photo-home][data-inline-slideshow="active"] {
    position: relative; width: 100%; aspect-ratio: 3 / 2;
    overflow: hidden; border-radius: 1.25rem;
  }
  body .has-photo-viewer [data-photo-home][data-inline-slideshow="active"] .photo-mosaic {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: minmax(0,1fr) !important;
    width: 100%; height: 100%; gap: 0 !important;
    overflow: hidden !important; scroll-snap-type: none;
    touch-action: pan-y pinch-zoom;
  }
  body .has-photo-viewer [data-photo-home][data-inline-slideshow="active"] .photo-mosaic > figure {
    display: block !important; position: relative;
    grid-area: 1 / 1 !important;
    width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0;
    opacity: 0; pointer-events: none; z-index: 0;
    transition: opacity .85s ease !important;
  }
  body .has-photo-viewer [data-photo-home][data-inline-slideshow="active"] .photo-mosaic > figure.is-inline-active {
    opacity: 1; pointer-events: auto; z-index: 1;
  }
  body .has-photo-viewer [data-photo-home][data-inline-slideshow="active"] .is-inline-active img {
    animation: adm-mobile-photo-drift 6.5s ease-in-out both !important;
    animation-play-state: paused !important;
  }
  body .has-photo-viewer [data-photo-home][data-inline-playing="true"] .is-inline-active img {
    animation-play-state: running !important;
  }
  body .has-photo-viewer [data-photo-home][data-inline-slideshow="active"] .apartment-mobile-photo-controls {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  }
  body .apartment-photos.has-photo-viewer .photo-gallery-actions {
    position: static; display: flex; justify-content: flex-end;
    max-width: 100%; margin-top: .75rem;
  }
}
html[data-site-motion="paused"] body .photo-reel-layer img,
html[data-site-motion="paused"] body [data-inline-slideshow="active"] img { animation: none !important; }
html[data-site-motion="paused"] body [data-inline-slideshow="active"] .photo-mosaic > figure { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  body .photo-reel-layer img, body [data-inline-slideshow="active"] img { animation: none !important; }
  body .photo-fade-track > .photo-fade-slide,
  body [data-inline-slideshow="active"] .photo-mosaic > figure { transition: none !important; }
}