/* ==========================================================================
   Huys van Leyden — Elementor Pro stylesheet
   Plaatsen in: Elementor > Site Settings > Custom CSS
   (of in het child theme). Kleuren en fonts ook invullen in
   Site Settings > Global Colors / Global Fonts (zie stijlgids).
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --hvl-ink: #1F1A17;        /* tekst, footer */
  --hvl-walnut: #2E2520;     /* primaire knop, donkere secties */
  --hvl-cream: #FBF8F2;      /* hoofdachtergrond */
  --hvl-sand: #F3ECDF;       /* afwisselende secties */
  --hvl-champagne: #E3CFAA;  /* accentknop op donker */
  --hvl-bronze: #9C7446;     /* decoratie, grote cijfers */
  --hvl-bronze-dark: #7A5530;/* kleine accenttekst, links */
  --hvl-muted: #5E554D;      /* labels, secundaire tekst */
  --hvl-line: #E6DCCB;       /* randen, scheidingslijnen */
  --hvl-serif: 'Cormorant Garamond', Georgia, serif;
  --hvl-sans: 'Jost', 'Helvetica Neue', sans-serif;
  --hvl-ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- Redforts zoekmodule ([ohbe_search]) -------------------------------
   Elementor: Shortcode-widget in een container met CSS-class "hvl-booking".
   Overlap met de hero: container margin-top -72px, z-index 2.
   Selectors zijn bewust generiek; test en verfijn in de testomgeving. */
.hvl-booking {
  background: var(--hvl-cream);
  border-radius: 22px;
  padding: 24px 28px;
  box-shadow: 0 40px 80px -40px rgba(31,26,23,.55);
  font-family: var(--hvl-sans);
}
.hvl-booking label {
  font-family: var(--hvl-sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hvl-muted);
}
.hvl-booking input,
.hvl-booking select {
  font-family: var(--hvl-serif);
  font-size: 24px;
  color: var(--hvl-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hvl-line);
  border-radius: 0;
  padding: 6px 0;
  box-shadow: none;
}
.hvl-booking input:focus,
.hvl-booking select:focus {
  outline: none;
  border-bottom-color: var(--hvl-bronze);
}
.hvl-booking button,
.hvl-booking input[type="submit"] {
  background: var(--hvl-walnut);
  color: var(--hvl-cream);
  border: 0;
  border-radius: 999px;
  min-height: 56px;
  padding: 0 36px;
  font-family: var(--hvl-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .4s;
}
.hvl-booking button:hover,
.hvl-booking input[type="submit"]:hover { background: var(--hvl-bronze-dark); }

@media (max-width: 767px) {
  .hvl-booking { border-radius: 18px; padding: 16px; }
  .hvl-booking input, .hvl-booking select { font-size: 19px; }
  .hvl-booking button, .hvl-booking input[type="submit"] { width: 100%; }
}

/* ---- Knoppen (CSS-class op de Button-widget) --------------------------- */
.hvl-btn .elementor-button {
  border-radius: 999px;
  font-family: var(--hvl-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 18px 32px;
  transition: background-color .4s, color .4s, border-color .4s;
}
.hvl-btn-dark .elementor-button { background: var(--hvl-walnut); color: var(--hvl-cream); }
.hvl-btn-dark .elementor-button:hover { background: var(--hvl-bronze-dark); }
.hvl-btn-light .elementor-button { background: var(--hvl-champagne); color: var(--hvl-ink); }
.hvl-btn-light .elementor-button:hover { background: var(--hvl-cream); }
.hvl-btn-line .elementor-button { background: transparent; color: var(--hvl-ink); border: 1px solid var(--hvl-ink); }
.hvl-btn-line .elementor-button:hover { background: var(--hvl-ink); color: var(--hvl-cream); }

/* ---- Kaarten die licht omhoog komen (class op de container) ----------- */
.hvl-lift { transition: transform .7s var(--hvl-ease), box-shadow .7s var(--hvl-ease); }
.hvl-lift:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -34px rgba(46,37,32,.5); }

/* ---- Boogvormige foto's (class op de Image-widget) --------------------- */
.hvl-arch img { border-radius: 999px 999px 16px 16px; aspect-ratio: 3 / 4; object-fit: cover; }

/* ---- Links met onderstreping die uitschuift ---------------------------- */
.hvl-ul a, a.hvl-ul {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .5s var(--hvl-ease);
}
.hvl-ul a:hover, a.hvl-ul:hover { background-size: 100% 1px; }

/* ---- Eyebrow-labels boven titels -------------------------------------- */
.hvl-eyebrow {
  font-family: var(--hvl-sans);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--hvl-bronze-dark);
}

/* ---- Vaste reserveerbalk onderaan (alleen mobiel) ---------------------- */
@media (max-width: 767px) {
  .hvl-mobile-bar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 999;
    background: var(--hvl-cream); border-radius: 22px; padding: 10px;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
  }
  body { padding-bottom: 96px; }
}

/* ---- Rustige animaties respecteren systeemvoorkeur --------------------- */
@media (prefers-reduced-motion: reduce) {
  .hvl-lift, .hvl-ul a, a.hvl-ul { transition: none; }
  .hvl-lift:hover { transform: none; }
}

/* ---- Vergelijkingstabel kamers (HTML-widget) --------------------------- */
.hvl-compare { width: 100%; min-width: 720px; border-collapse: collapse; font-family: var(--hvl-sans); font-size: 15px; color: var(--hvl-ink); }
.hvl-compare thead th { font-family: var(--hvl-serif); font-weight: 500; font-size: 26px; text-align: left; padding: 0 20px 20px; }
.hvl-compare thead th:first-child { font-family: var(--hvl-sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--hvl-muted); padding-left: 0; vertical-align: bottom; }
.hvl-compare tbody th { text-align: left; font-weight: 400; color: var(--hvl-muted); padding: 18px 0; }
.hvl-compare td { padding: 18px 20px; }
.hvl-compare tr { border-top: 1px solid var(--hvl-line); }

/* ---- Links in donkere secties leesbaar houden -------------------------- */
.elementor-widget-text-editor a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hvl-bronze); }

/* ---- Rustige fade-in bij scrollen (Elementor: Motion Effects > Entrance) */
.elementor-invisible { transition-timing-function: var(--hvl-ease) !important; }