/* ==========================================================
   Custom User Styles for RSLucca Template (Joomla 6)
   Auteur: [jouw naam of organisatie]
   Doel: fonts, kleuren en bodytekstgrootte overschrijven
   ========================================================== */



/* -----------------------------------
   RS Booking edits MMX
   ----------------------------------- */
.rsbooking-location.rsbooking-property-block {
  display: none !important;
}


.rsbooking-gallery.rsbooking-property-block {
  max-width: 1290px !important;
}



/* -----------------------------------
   1. Basis fontvariabelen
   ----------------------------------- */
:root {
  /* Bodytekst = Arial */
  --bs-body-font-family: Arial, Helvetica, sans-serif;

  /* Headings = Courier New */
  --bs-headings-font-family: "Courier New", Courier, monospace;

  /* Headingkleur */
  --bs-heading-color: #e3c771;

  /* Body tekstkleur */
  --bs-body-color: #4a4a49;


  /* Body lettergrootte */
  --bs-body-font-size: 20px;
}

/* -----------------------------------
   2. Bodytekst en algemene opmaak
   ----------------------------------- */
html, body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: 1.6;
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bs-body-bg, #fff);
}

/* -----------------------------------
   3. Headings (h1–h6, display, fs-classes)
   ----------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6 {
  font-family: var(--bs-headings-font-family) !important;
  font-weight: 700 !important;
  color: var(--bs-heading-color) !important;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin-top: 0;
}

/* Spans in headings behouden zelfde font */
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
.h1 span, .h2 span, .h3 span, .h4 span, .h5 span, .h6 span,
.display-1 span, .display-2 span, .display-3 span, .display-4 span,
.display-5 span, .display-6 span {
  font-family: var(--bs-headings-font-family) !important;
  font-weight: 700 !important;
  color: inherit;
}

/* -----------------------------------
   4. Tekst in aparte kaders
   ----------------------------------- */
.boxed-text,
.card,
.alert,
.rstpl-card,
.rstpl-box,
.article-box,
.moduletable-box,
.sppb-addon-box {
  font-family: "Courier New", Courier, monospace;
  font-weight: 400;
  line-height: 1.6;
  font-size: 20px; /* consistent met body */
}

/* Bold en italic in kaders behouden */
.boxed-text b, .boxed-text strong,
.card b, .card strong,
.alert b, .alert strong,
.rstpl-card b, .rstpl-card strong {
  font-weight: 700;
}
.boxed-text i, .boxed-text em,
.card i, .card em,
.alert i, .alert em,
.rstpl-card i, .rstpl-card em {
  font-style: italic;
}

/* -----------------------------------
   5. Navigatie en knoppen
   ----------------------------------- */
.navbar, .rstpl-navbar,
.btn, button, input, select, textarea {
  font-family: var(--bs-body-font-family);
  font-size: 18px;
}

/* -----------------------------------
   6. Extra utiliteiten
   ----------------------------------- */
.display-1, .display-2, .display-3, .fs-1, .fs-2, .fs-3 {
  letter-spacing: -1px;
}

h4, h5, h6, p {
  text-wrap: pretty;
}



.vikfx-gallery-fade-container {
  border: 1px solid #706f6f !important;
  border-radius: 18px !important;
}

.vbo-listing-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery > a {
  margin: 0;
  display: inline-block;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid #706f6f !important;
  border-radius: 14px !important;
}

.vbcalsblock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  width: 100%;
  box-shadow: 0 2px 5px 0 rgba(50, 54, 72, 0.08);
  border: 1px solid ##706f6f !important;
  padding: 10px;
  box-sizing: border-box;
}



/* -----------------------------------
   7. Edits MMX
   ----------------------------------- */


.rstpl-card .rspbld-image:not(:has(img[src*="icon"], svg))::before, .rst-dashboard-item .rspbld-image:not(:has(img[src*="icon"], svg))::before, .rsblog-entry-header .rsblog-post-actions .dropdown-menu .rspbld-image:not(:has(img[src*="icon"], svg))::before, .rsblog-post.card .rspbld-image:not(:has(img[src*="icon"], svg))::before, #rstpl-com_rsdirectory .rsdir-listing .rspbld-image:not(:has(img[src*="icon"], svg))::before, .rstpl-portfolio .filtr-item-inner .rspbld-image:not(:has(img[src*="icon"], svg))::before, .rstpl-testimonial-box .rspbld-image:not(:has(img[src*="icon"], svg))::before, .items-leading .blog-item .rspbld-image:not(:has(img[src*="icon"], svg))::before, .rstpl-card-row .row .rspbld-image:not(:has(img[src*="icon"], svg))::before {
  display: block;
  position: absolute;
  content: "";
  inset: 0;
  margin: 10%;
  border: 0px solid #fff !important;
  border-radius: calc(var(--bs-border-radius)/2);
  z-index: 1000;
}

.rstpl-page-header {
  padding: clamp(3rem,10vh,10rem) 0;
  background-color: transparent !important;
  height: 500px;
}

.rstpl-image-box .rspbld-image::before {
  display: block;
  position: absolute;
  content: "";
  inset: 0;
  margin: 10%;
  border: 0px solid #fff !important;
  border-radius: calc(var(--bs-border-radius)/2);
  z-index: 1000;
}

.vblistroomcat {
  display: none !important;
}

#rstpl-footer-position {
  display: none !important;
}

.vikfx-gallery-fade-container {
  border: 1px solid ##adadad !important;
  border-radius: 15px !important;
}

.vbo-listing-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery > a {
  margin: 0;
  display: inline-block;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid ##adadad !important;
  border-radius: 15px !important;
}

.vbcalsblock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  width: 100%;
  box-shadow: 0 2px 5px 0 rgba(50, 54, 72, 0.08);
  border: 1px solid ##706f6f !important;
  padding: 10px;
  box-sizing: border-box;
}

.vbpricedetails {
  display: none !important;
}


#mod-custom136 a {
    color: #706f6f;
}

#mod-custom136 a:hover,
#mod-custom136 a:focus {
    color: #706f6f;
    text-decoration: underline;
}