/*
Theme Name:   Van Leyden
Theme URI:    https://www.boutiquehotelsvanleyden.nl/
Description:  Child theme voor Hello Elementor. Bevat de huisstijl van Boutique hotels van Leyden: kleur uit geverfd Leids laken, zelfkant als handmerk.
Author:       Van Leyden
Template:     hello-elementor
Version:      1.0.0
Text Domain:  van-leyden
*/

/* ==========================================================
   1. MERKVARIABELEN
   Wijzig hier, en de hele site verandert mee.
   ========================================================== */
:root{
  --vl-laken:#D9D4C6;
  --vl-laken-op:#E4E0D4;
  --vl-inkt:#17242B;
  --vl-meekrap:#8E2F31;
  --vl-wede:#33606E;
  --vl-lood:#8A8778;
  --vl-rule:rgba(23,36,43,.18);
  --vl-accent:var(--vl-meekrap);
  --vl-edge:14px;
}

/* Stille variant. Zet de CSS-klasse "vl-stil" op de body
   via Elementor > Pagina-instellingen > Geavanceerd > CSS-klassen. */
body.vl-stil{--vl-accent:var(--vl-wede)}

body{background:var(--vl-laken);color:var(--vl-inkt)}

/* ==========================================================
   2. DE ZELFKANT — het handmerk, sitebreed
   ========================================================== */
body::before{
  content:"";position:fixed;left:0;top:0;bottom:0;width:var(--vl-edge);z-index:9999;
  background:repeating-linear-gradient(180deg,
    var(--vl-accent) 0 42px, var(--vl-inkt) 42px 50px,
    var(--vl-wede) 50px 92px, var(--vl-inkt) 92px 100px);
}
body{padding-left:var(--vl-edge)}
body.vl-stil::before{
  background:repeating-linear-gradient(180deg,
    var(--vl-wede) 0 42px, var(--vl-inkt) 42px 50px,
    var(--vl-lood) 50px 92px, var(--vl-inkt) 92px 100px);
}
@media(max-width:767px){
  body{padding-left:0;padding-top:var(--vl-edge)}
  body::before{inset:0 0 auto 0;width:auto;height:var(--vl-edge);
    background:repeating-linear-gradient(90deg,var(--vl-accent) 0 42px,var(--vl-inkt) 42px 50px,var(--vl-wede) 50px 92px,var(--vl-inkt) 92px 100px)}
}

/* ==========================================================
   3. WIDGETKLASSEN
   Deze klassen zet je in Elementor onder Geavanceerd > CSS-klassen.
   ========================================================== */

/* Ooglabel boven een kop */
.vl-eyebrow{font-size:.7rem !important;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--vl-lood)}

/* Sectiemerkteken: streepje + label */
.vl-tick .elementor-heading-title,.vl-tick p{display:flex;align-items:center;gap:.9rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--vl-lood)}
.vl-tick .elementor-heading-title::before,.vl-tick p::before{content:"";display:block;width:26px;height:2px;background:var(--vl-accent);flex:0 0 auto}

/* Cursieve titel — het merkkenmerk */
.vl-italic .elementor-heading-title{font-style:italic}
.vl-accent .elementor-heading-title{color:var(--vl-accent)}

/* Fotovlak: opmaak rond de afbeelding tot de echte foto er staat */
.vl-plate img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--vl-inkt)}
.vl-plate.vl-wide img{aspect-ratio:16/9}
.vl-plate.vl-sq img{aspect-ratio:1}
.vl-plate figure{position:relative;margin:0}
.vl-plate figcaption{
  font-size:.65rem !important;letter-spacing:.13em;text-transform:uppercase;
  color:var(--vl-lood);font-weight:600;text-align:left;padding-top:.6rem;
}

/* Kaart: witte kaart met haarlijn, voor arrangementen en zalen */
.vl-card{background:var(--vl-laken);border:1px solid var(--vl-rule)}
.vl-price .elementor-heading-title{font-family:"EB Garamond",Georgia,serif;font-size:1.55rem;color:var(--vl-accent)}

/* Deur: link met gekleurde bovenlijn */
.vl-door{border-top:3px solid var(--vl-wede);transition:border-color .2s}
.vl-door:hover{border-top-color:var(--vl-accent)}

/* Donkere sectie */
.vl-dark{background:var(--vl-inkt)}
.vl-dark .elementor-heading-title,.vl-dark p{color:var(--vl-laken)}
.vl-dark p{color:rgba(217,212,198,.78)}

/* Citaat */
.vl-quote .elementor-heading-title{
  font-family:"EB Garamond",Georgia,serif;font-style:italic;font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.3;border-left:2px solid var(--vl-accent);padding-left:1.5rem;max-width:24ch;
}

/* Definitielijst (Icon List zonder icoon) */
.vl-dl .elementor-icon-list-item{border-bottom:1px solid var(--vl-rule);padding:.8rem 0 !important}
.vl-dl .elementor-icon-list-item:first-child{border-top:1px solid var(--vl-rule)}
.vl-dl .elementor-icon-list-text{font-size:.92rem}
.vl-dl .elementor-icon-list-text strong{
  display:inline-block;min-width:11rem;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--vl-lood);font-weight:600;vertical-align:top;
}
@media(max-width:767px){.vl-dl .elementor-icon-list-text strong{display:block;min-width:0;margin-bottom:.2rem}}

/* Tabellen (in het HTML-widget) */
.vl-table table{width:100%;border-collapse:collapse;font-size:.92rem}
.vl-table th,.vl-table td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--vl-rule)}
.vl-table th{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vl-lood);font-weight:600}
.vl-table td:first-child{font-family:"EB Garamond",Georgia,serif;font-size:1.15rem}
.vl-table tbody tr:hover{background:var(--vl-laken-op)}

/* Knoppen */
.elementor-button{letter-spacing:.09em !important;text-transform:uppercase;font-weight:600 !important;border-radius:0 !important}
.vl-ghost .elementor-button{background:transparent !important;color:var(--vl-inkt) !important;border:1px solid var(--vl-inkt)}
.vl-ghost .elementor-button:hover{background:var(--vl-inkt) !important;color:var(--vl-laken) !important}

/* Boekingsbalk en formulieren */
.vl-form .elementor-field-group{border-right:1px solid var(--vl-rule)}
.vl-form .elementor-field-label{font-size:.66rem !important;letter-spacing:.16em;text-transform:uppercase;color:var(--vl-lood);font-weight:600}
.vl-form input,.vl-form select,.vl-form textarea{
  border:0 !important;border-radius:0 !important;background:transparent !important;
  color:var(--vl-inkt) !important;padding:.2rem 0 !important;
}
.vl-form .elementor-field-type-submit .elementor-button{background:var(--vl-accent);color:var(--vl-laken)}
.vl-book{background:var(--vl-laken-op);border:1px solid var(--vl-rule)}

/* Vaste boekbalk op mobiel */
.vl-mobilebook{display:none}
@media(max-width:767px){
  .vl-mobilebook{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9998}
  .vl-mobilebook .elementor-button{width:100%;padding-block:.95rem;background:var(--vl-accent)}
  body{padding-bottom:3.4rem}
}

/* Navigatie */
.elementor-nav-menu .elementor-item{
  font-size:.8rem !important;letter-spacing:.06em;text-transform:uppercase;font-weight:500;
}

/* Toegankelijkheid en beweging */
:focus-visible{outline:2px solid var(--vl-wede);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* Print */
@media print{
  body::before,.vl-mobilebook,.vl-plate,header,footer{display:none !important}
  body{background:#fff;color:#000;padding:0}
  .vl-dark{background:#fff !important}
  .vl-dark .elementor-heading-title,.vl-dark p{color:#000 !important}
}