/* =====================================================================
   Room108 — Huisstijl (site-breed)
   ---------------------------------------------------------------------
   Zet de typografie door ZOALS room108.com:
     • Titels/koppen  → Josefin Sans (licht)
     • Tekst/UI/menu  → Work Sans
     • Sierlijk accent → Allison (script) — selectief, net als room108.com
       (daar op enkele feature-titels + de `.cta_quote` regels).
   Plus de brandkleuren (accent-oranje #f19141). De sites zijn een COMBI
   van Beaver Builder (thema/header/footer) + Elementor (content) +
   WooCommerce, dus alle drie worden gedekt.

   Bewust GEEN universele `*`-selector en GEEN kale `a{}`-fontregel → link-
   tekst erft zo netjes de kop- of tekstfont van zijn ouder, en icon-fonts
   (Font Awesome, dashicons, WooCommerce-sterren, swiper, eicons) blijven heel.
   ===================================================================== */

:root {
  /* Eigen prefix (--r108b-) — de site definieert zelf al --r108-* variabelen. */
  --r108b-orange: #f19141;
  --r108b-orange-dark: #cf7d38;
  --r108b-gray: #333333;
  --r108b-gray-light: #5c5c5c;
  --r108b-beige: #d6c9bc;
  --r108b-white: #ffffff;

  --r108b-title: "Josefin Sans", system-ui, sans-serif;   /* koppen */
  --r108b-body: "Work Sans", system-ui, -apple-system, sans-serif; /* tekst/UI */
  --r108b-script: "Allison", "Segoe Script", cursive;     /* sierlijk accent */
  --r108b-heading-weight: 400; /* Josefin licht; room108.com gebruikt 300 */
}

/* ===================================================================
   1) TEKST / UI → Work Sans
   =================================================================== */
body,
.fl-page, .fl-builder-content, .fl-post-content,
p, li, dd, dt, blockquote, figcaption, caption, address, cite, label,
table, td, th,
input, select, textarea, button, optgroup,
.widget, .widget-area,
.fl-rich-text, .fl-callout-text, .fl-photo-caption, .fl-post-feed-content,
.woocommerce, .woocommerce-page,
.woocommerce .price, .woocommerce-Price-amount,
.woocommerce-product-details__short-description,
.wc-block-grid__product,
.elementor-widget-text-editor, .elementor-widget-text-editor p,
.elementor-testimonial__text {
  font-family: var(--r108b-body) !important;
}

/* Menu's + knoppen = UI-font (Work Sans) */
.fl-menu a, .menu a, .nav a, .navigation a, .site-header a, .site-footer a,
.button, a.button, button, .btn,
.fl-button, .fl-button-text,
.wp-block-button__link, .wp-element-button,
.elementor-button, .elementor-button .elementor-button-text,
.single_add_to_cart_button, .added_to_cart, .checkout-button,
input[type="submit"], input[type="button"], input[type="reset"], .search-submit {
  font-family: var(--r108b-body) !important;
}

/* ===================================================================
   2) KOPPEN / TITELS → Josefin Sans (incl. gelinkte koppen)
   =================================================================== */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.fl-heading, .fl-heading-text,
.entry-title, .entry-title a, .page-title, .post-title, .archive-title,
.site-title, .fl-title,
.product_title, .woocommerce-loop-product__title, .woocommerce-loop-product__title a,
.wc-block-grid__product-title,
.widget-title, .widgettitle,
.elementor-heading-title, .elementor-heading-title a,
.elementor-icon-box-title, .elementor-image-box-title,
.elementor-price-table__title, .elementor-post__title, .elementor-post__title a,
.elementor-tab-title, .elementor-accordion-title, .elementor-toggle-title,
.elementor-testimonial__name, .elementor-cta__title {
  font-family: var(--r108b-title) !important;
}
/* Licht gewicht (zoals room108.com). Zet --r108b-heading-weight op 300 voor
   exact dezelfde airy look, of op 600 voor iets steviger. */
h1, h2, h3, h4, h5, h6,
.fl-heading-text, .entry-title, .page-title, .archive-title, .site-title,
.product_title, .woocommerce-loop-product__title,
.elementor-heading-title, .widget-title, .widgettitle {
  font-weight: var(--r108b-heading-weight) !important;
}

/* ===================================================================
   3) SIERLIJK ACCENT → Allison (script), selectief
   room108.com zet Allison op de `.cta_quote`-regels + een enkele feature-
   titel. Zet Allison NIET blind op alle koppen (script = onleesbaar in
   bulk). Markeer een specifieke kop/regel met class `r108-script` of het
   attribuut `data-r108-script` om 'm sierlijk te maken.
   =================================================================== */
.cta_quote,
.r108-script,
[data-r108-script],
.fl-heading-text.r108-script {
  font-family: var(--r108b-script) !important;
  font-weight: 400 !important;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none !important; /* script nooit in hoofdletters forceren */
}

/* ===================================================================
   4) ELEMENTOR — global kit naar huisstijl
   Stond op de standaard blauw/groen + Roboto. Var-override wint van
   .elementor-kit-XXX en werkt door in alle "Global"-widgets.
   =================================================================== */
body[class*="elementor-kit-"] {
  /* Kleuren */
  --e-global-color-primary: var(--r108b-gray) !important;
  --e-global-color-secondary: var(--r108b-gray-light) !important;
  --e-global-color-text: var(--r108b-gray) !important;
  --e-global-color-accent: var(--r108b-orange) !important;
  /* Typografie: koppen = Josefin Sans, tekst = Work Sans */
  --e-global-typography-primary-font-family: "Josefin Sans" !important;
  --e-global-typography-primary-font-weight: 400 !important;
  --e-global-typography-secondary-font-family: "Josefin Sans" !important;
  --e-global-typography-secondary-font-weight: 400 !important;
  --e-global-typography-text-font-family: "Work Sans" !important;
  --e-global-typography-text-font-weight: 400 !important;
  --e-global-typography-accent-font-family: "Work Sans" !important;
  --e-global-typography-accent-font-weight: 500 !important;
}

/* ===================================================================
   5) KLEUREN — accent exact op de huisstijl
   ORANJE call-to-action-knoppen → #f19141. `.elementor-button` bewust NIET
   hard gekleurd (sommige zijn met opzet donker); de global-accent hierboven
   kleurt de Elementor-knoppen die "Global → Accent" gebruiken al mee.
   =================================================================== */
.fl-button, .fl-button > a, .fl-button-wrap a.fl-button,
.r108-lookbook-btn,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.single_add_to_cart_button, .checkout-button, .place-order .button,
.woocommerce #respond input#submit,
.wp-block-button__link, .wp-element-button {
  background-color: var(--r108b-orange) !important;
  border-color: var(--r108b-orange) !important;
  color: var(--r108b-white) !important;
}
.fl-button:hover, .fl-button:focus, .fl-button > a:hover,
.r108-lookbook-btn:hover, .r108-lookbook-btn:focus,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover, .checkout-button:hover, .place-order .button:hover,
.wp-block-button__link:hover, .wp-element-button:hover {
  background-color: var(--r108b-orange-dark) !important;
  border-color: var(--r108b-orange-dark) !important;
  color: var(--r108b-white) !important;
}
.woocommerce .price ins, .wc-block-components-product-price ins { color: var(--r108b-orange) !important; }
.woocommerce span.onsale { background-color: var(--r108b-orange) !important; color: var(--r108b-white) !important; }

/* ===================================================================
   6) ICON-VANGNET — laat icon-fonts met rust
   =================================================================== */
.fa, .fas, .far, .fal, .fab, .fad,
[class^="fa-"], [class*=" fa-"],
i.fa, i.fas, i.far, i.fab {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "FontAwesome" !important;
}
.dashicons, .dashicons-before::before { font-family: dashicons !important; }
.woocommerce .star-rating, .woocommerce .star-rating::before,
.woocommerce .star-rating span::before,
.star-rating, .star-rating::before { font-family: star !important; }
.elementor-icon i, .elementor-icon svg,
[class^="eicon-"], [class*=" eicon-"] { font-family: eicons !important; }
.swiper-button-next::after, .swiper-button-prev::after { font-family: swiper-icons !important; }

/* ===================================================================
   7) OPTIONEEL — extra's (standaard UIT)
     a { color: var(--r108b-orange); }                    // alle links oranje
     .fl-button--ghost, .elementor-button-info {          // knop NIET oranje:
       background: transparent !important;
       color: var(--r108b-gray) !important; border-color: var(--r108b-gray) !important;
     }
   Sierlijk accent gebruiken? Geef een titel/regel de class `r108-script`.
   =================================================================== */