/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
Description: Child theme van Hello Elementor voor De Vierambachten
Author: De Vierambachten
*/

/* =========================
   HUISSTIJL – De Vierambachten (REM-versie)
   ========================= */

/* Basis fontinstelling */
html {
  font-size: 16px; /* 1rem = 16px */
}

/* Algemene linkstijl */
a {
  color: #A47148;
  text-decoration: none;
}

a:hover {
  color: #B8A99A;
}

/* Extra classes voor H2, H3 en H4 links */
a.link-h2,
a.link-h3,
a.link-h4 {
  color: #A47148;
  text-decoration: none;
}

a.link-h2:hover,
a.link-h3:hover,
a.link-h4:hover {
  color: #B8A99A;
}

/* Typografie */
h1, h2, h3, h4 {
  font-family: 'Lora', serif;
  color: #A47148;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

h1 { font-size: 2.25rem; }     /* 36px */
h2 { font-size: 1.75rem; }     /* 28px */
h3 { font-size: 1.25rem; }     /* 20px */
h4 { font-size: 1.125rem; }    /* 18px */

p, li {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;             /* 16px */
  line-height: 1.7;
  color: #333;
}

/* Footer tekst */
footer {
  font-family: 'Lora', serif;
  font-size: 0.5rem;           /* 8px */
  text-align: right;
  color: #A47148;
}

/* =========================
   RESPONSIVE BREAKPOINTS
   ========================= */

/* Tablet ≤ 768px */
@media (max-width: 48rem) { /* 768px */
  footer {
    font-size: 0.65rem;        /* 10.4px */
    text-align: right;
  }
}

/* Mobiel ≤ 576px */
@media (max-width: 36rem) { /* 576px */
  footer {
    font-size: 0.75rem;        /* 12px */
    text-align: center;
  }
  h1 { font-size: 1.75rem; }   /* 28px */
  h2 { font-size: 1.375rem; }  /* 22px */
  h3 { font-size: 1.125rem; }  /* 18px */
  p { font-size: 0.9375rem; }  /* 15px */
}

/* Gecentreerde lijn voor kopteksten en secties */
.brand-divider {
  display: block;
  border: 0;
  border-top: 1px solid #A47148;
  width: 60%;
  max-width: 400px;          /* voorkomt dat de lijn te breed wordt */
  margin: 0.75em auto !important; /* forceert centrering */
  text-align: center;
}
/* Linkse merk-lijn voor kopteksten die links uitgelijnd zijn */
.brand-divider-left {
  display: block;
  border: 0;
  border-top: 1px solid #A47148;
  width: 60%;
  max-width: 400px;
  margin: 0.75em 0;          /* links uitgelijnd */
  text-align: left;
  place-self: start;
  align-self: flex-start;
  justify-self: start;
}

/* Breadcrumb styling – De Vierambachten */
.breadcrumbs,
.elementor-widget-breadcrumbs {
  font-family: 'Lora', serif;
  color: #A47148;
  font-size: 0.9rem;
  text-align: left;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

.breadcrumbs a,
.elementor-widget-breadcrumbs a {
  color: #A47148;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.breadcrumbs a:hover,
.elementor-widget-breadcrumbs a:hover {
  color: #B8A99A;
}

.breadcrumbs span.separator,
.elementor-widget-breadcrumbs .elementor-breadcrumbs__separator {
  color: #A47148;
  margin: 0 6px;
}

/* Tablet (≤768px) */
@media (max-width: 768px) {
  .breadcrumbs,
  .elementor-widget-breadcrumbs {
    font-size: 0.85rem;
    margin-bottom: 0.5em;
  }
}

/* Mobiel (≤576px) */
@media (max-width: 576px) {
  .breadcrumbs,
  .elementor-widget-breadcrumbs {
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 0.75em;
  }

  .breadcrumbs span.separator,
  .elementor-widget-breadcrumbs .elementor-breadcrumbs__separator {
    margin: 0 4px;
  }
}
/* =========================
   Breadcrumb icon-uitlijning
   ========================= */

/* Algemene uitlijning voor iconen in broodkruimels */
.breadcrumbs svg,
.elementor-widget-breadcrumbs svg,
.breadcrumbs i,
.elementor-widget-breadcrumbs i {
    vertical-align: middle;
    position: relative;
    top: -1px;
    /* schuift icoon iets omlaag */
    margin-right: 5px;
    /* ruimte tussen icoon en tekst */
    width: 0.9em;
    height: 0.9em;
}

/* Consistente afstand voor icon + tekst op mobiel */
@media (max-width: 576px) {

    .breadcrumbs svg,
    .elementor-widget-breadcrumbs svg,
    .breadcrumbs i,
    .elementor-widget-breadcrumbs i {
        margin-right: 4px;
        top: -0.5px;
    }
}
/* =========================
   Breadcrumb icon kleurgedrag
   ========================= */

/* Standaardkleur van iconen */
.breadcrumbs svg,
.elementor-widget-breadcrumbs svg,
.breadcrumbs i,
.elementor-widget-breadcrumbs i {
    fill: #A47148;
    /* voor SVG’s */
    color: #A47148;
    /* voor font-iconen */
    transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;
}

/* Hoverkleur van iconen */
.breadcrumbs a:hover svg,
.elementor-widget-breadcrumbs a:hover svg,
.breadcrumbs a:hover i,
.elementor-widget-breadcrumbs a:hover i {
    fill: #B8A99A;
    color: #B8A99A;
}
/* =========================
   Breadcrumb icon-spacing fix
   ========================= */

/* Consistente ruimte tussen iconen en tekst */
.breadcrumbs svg,
.elementor-widget-breadcrumbs svg,
.breadcrumbs i,
.elementor-widget-breadcrumbs i {
    margin-right: 5px;
    margin-left: 0;
}

/* Ruimte tussen opeenvolgende iconen (zoals pijlen) */
.breadcrumbs svg+svg,
.elementor-widget-breadcrumbs svg+svg,
.breadcrumbs i+i,
.elementor-widget-breadcrumbs i+i {
    margin-left: 2px;
    margin-right: 2px;
}

/* Zorgt dat iconen niet te dicht tegen tekst of pijl staan */
.breadcrumbs span.separator,
.elementor-widget-breadcrumbs .elementor-breadcrumbs__separator {
    padding: 0 3px;
    display: inline-block;
    vertical-align: middle;
}
/* =========================
   Breadcrumb mobiele positionering
   ========================= */

/* Compacte layout onder de hoofdkop */
@media (max-width: 576px) {

    .breadcrumbs,
    .elementor-widget-breadcrumbs {
        display: block;
        text-align: center;
        margin-top: 0.5em;
        /* minder witruimte boven */
        margin-bottom: 0.5em;
        /* minder witruimte onder */
        line-height: 1.4;
    }

    /* iets kleinere iconen op mobiel */
    .breadcrumbs svg,
    .elementor-widget-breadcrumbs svg,
    .breadcrumbs i,
    .elementor-widget-breadcrumbs i {
        width: 0.8em;
        height: 0.8em;
    }

    /* kleine aanpassing voor separatorruimte */
    .breadcrumbs span.separator,
    .elementor-widget-breadcrumbs .elementor-breadcrumbs__separator {
        padding: 0 2px;
    }
}