/*
Theme Name: L'art interieur
Theme URI:
Author: Vera
Author URI:
Description: Custom child theme for L'ART Interieur
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 7.4
Version: 2.7.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ona
Text Domain: lart-interieur
*/


/* ==========================================================
   FONTS
========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Poppins:wght@400;500;600;700&display=swap");


/* ==========================================================
   MERKEN & SAMENWERKINGEN
========================================================== */

@import url("assets/css/partners.css");
@import url("assets/css/project-gallery-slider.css");


/* ==========================================================
   L'ART — DESIGN VARIABLES
========================================================== */

:root {

  /* Nieuwe L'ART kleuren */
  --lart-text: #262727;
  --lart-accent: #452C42;

  --lart-background: #EFEFEF;
  --lart-ice-blue: #C8D1D9;
  --lart-dark-grey: #262727;
  --lart-sand: #DDDDD5;
  --lart-white: #FDFDFD;


  /*
   * Oude variabelen blijven bestaan voor bestaande
   * componentbestanden.
   *
   * Ze gebruiken nu de nieuwe huisstijlkleuren.
   */

  --lart-olive: var(--lart-text);
  --lart-green: var(--lart-accent);


  /* Backwards-compatible aliases */

  --color-bg: var(--lart-background);
  --color-text: var(--lart-text);
  --color-accent: var(--lart-accent);
  --color-light: var(--lart-ice-blue);
  --color-dark: var(--lart-text);
  --color-white: var(--lart-white);


  /* Fonts */

  --lart-font: "Poppins", sans-serif;

  --lart-heading-font:
    "Cormorant Garamond",
    Garamond,
    Georgia,
    serif;

  --font-body: var(--lart-font);
  --font-heading: var(--lart-heading-font);


  /* Border radius */

  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;


  /* Shadows */

  --shadow:
    0 14px 40px
    rgba(38, 39, 39, 0.08);

  --shadow-hover:
    0 20px 55px
    rgba(38, 39, 39, 0.13);


  /* Animation */

  --transition: 0.25s ease;


  /* Content widths */

  --content: 1180px;
  --wide: 1440px;
  --text: 740px;
}


/* ==========================================================
   GLOBAL
========================================================== */

html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: var(--lart-background);

  color: var(--lart-text);

  font-family: var(--lart-font);

  font-size: 15px;
  font-weight: 400;

  line-height: 1.65;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


img {
  max-width: 100%;
  height: auto;
}


/* ==========================================================
   WORDPRESS — ALGEMENE RUIMTE
========================================================== */

.wp-site-blocks {
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  gap: 0 !important;
}


.wp-site-blocks > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


.wp-site-blocks > .site-header,
.wp-site-blocks > .site-header + *,
.site-header + * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


.site-header + .lart-hero,
.wp-site-blocks > .site-header + .lart-hero {
  margin-top: 0 !important;
}


/* ==========================================================
   HEADINGS
========================================================== */

h1,
h2 {
  margin-top: 0;

  color: var(--lart-text);

  font-family: var(--lart-heading-font) !important;

  font-weight: 300 !important;

  line-height: 1 !important;

  letter-spacing: -0.015em;

  text-transform: uppercase;
}


h1 {
  font-size: 42px !important;
}


h2 {
  font-size: 38px !important;
}


h3,
h4,
h5,
h6 {
  margin-top: 0;

  color: var(--lart-text);

  font-family: var(--lart-font) !important;

  font-weight: 600;

  letter-spacing: -0.02em;
}


/* ==========================================================
   TEXT
========================================================== */

p,
li {
  color: inherit;
}


/* ==========================================================
   LINKS
========================================================== */

a {
  color: var(--lart-text);

  text-decoration: none;

  transition:
    color var(--transition);
}


a:hover {
  color: var(--lart-accent);
}


/* ==========================================================
   EYEBROW
========================================================== */

.lart-eyebrow {
  margin:
    0
    0
    0.8rem;

  color: var(--lart-accent);

  font-family: var(--lart-font) !important;

  font-size: 15px;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


/* ==========================================================
   SECTION TITLES
========================================================== */

.lart-section-title {
  color: var(--lart-text);

  font-size: 38px;

  line-height: 0.98;
}


/* ==========================================================
   TEXT SELECTION
========================================================== */

::selection {
  background: var(--lart-accent);

  color: var(--lart-white);
}


/* ==========================================================
   MOBILE TYPOGRAPHY
========================================================== */

@media (max-width: 781px) {

  body h2.wp-block-heading {
    font-size: 32px !important;

    line-height: 1 !important;
  }
}


/* ==========================================================
   REVIEWS — GROTERE KAARTEN
========================================================== */

.lart-review-manager-track {
  align-items: stretch !important;
}


.lart-review-manager-card {
  height: auto !important;

  min-height: 300px !important;
  max-height: none !important;

  padding:
    1.5rem
    1.4rem !important;
}


.lart-review-manager-text {
  flex:
    1
    1
    auto !important;

  min-height: 0 !important;

  overflow: visible !important;
}


.lart-review-manager-text p {
  overflow: visible !important;
}


/* ==========================================================
   ANKER NAVIGATIE
========================================================== */

#werkwijze,
#ontwerpservices,
#projecten,
#formulier {
  scroll-margin-top: 100px;
}


/* ==========================================================
   EXTRA RUIMTE VOOR SLAGSCHADUWEN
========================================================== */

.lart-packages,
.lart-process,
.lart-reviews,
.lart-review-manager {
  overflow: visible !important;
}


/* ==========================================================
   SLIDER TRACKS
========================================================== */

.lart-packages-track,
.lart-process-track,
.lart-reviews-track,
.lart-review-manager-track {
  box-sizing: border-box;

  /*
   * Extra ruimte zodat shadows niet abrupt
   * worden afgesneden.
   */

  padding-top: 2rem !important;

  padding-bottom: 3rem !important;

  scroll-padding-inline: 2rem;
}


/* ==========================================================
   EERSTE + LAATSTE SLIDER KAART
========================================================== */

.lart-packages-track > *:first-child,
.lart-process-track > *:first-child,
.lart-reviews-track > *:first-child,
.lart-review-manager-track > *:first-child {
  margin-left: 1rem !important;
}


.lart-packages-track > *:last-child,
.lart-process-track > *:last-child,
.lart-reviews-track > *:last-child,
.lart-review-manager-track > *:last-child {
  margin-right: 1rem !important;
}


/* ==========================================================
   MOBIEL — SLIDERS
========================================================== */

@media (max-width: 781px) {

  .lart-packages-track,
  .lart-process-track,
  .lart-reviews-track,
  .lart-review-manager-track {
    padding-top: 1.5rem !important;

    padding-bottom: 2.5rem !important;
  }
}