/* ====== Palette ====== */
:root{
  --brand-1:  #8b4513; /* deep brown (brand/buttons secondary) */
  --brand-2: #8b4513;  /* warm orange (links/buttons primary) */
  --brand-3: #b5612a;  /* bronze (hover/accent) */
  --ink: #222;
  --muted: #6c757d;
  --bg-grey: #f6f6f6;

  /* Rust-gradient shades (banner stays as approved) */
  --rust-1: #c3683b;  /* lighter rust orange */
  --rust-2: #b5612a;  /* mid rust brown-orange */
  --rust-3: #7a3a12;  /* deeper rust brown */

  /* Subtle step “a bit more orange” for H2/H4/links */
  --rust-2-plus: #bd6433; /* just warmer/more orange than rust-2 */

  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
}

/* ====== Base typography & rhythm ====== */
body { color: var(--ink); }

/* Headings – warm rust-orange tones */
h1, .h1, h2, .h2 {
  color: var(--rust-2);
  letter-spacing: .2px;
  margin-bottom: var(--space-md);
  line-height: 1.25;
}
/* Section titles: just a bit more orange + bolder */
section h2,
section .h2{
  color: var(--rust-2-plus);  /* subtly warmer */
  font-weight: 700;
}

/* H3/H4/H5 hierarchy */
h3, .h3,
h5, .h5 {
  color: var(--rust-1);        /* lighter, more sparkling */
  margin-bottom: var(--space-md);
}
h4, .h4{
  color: var(--rust-2-plus);   /* stronger, no pinkish hue */
  font-weight: 600;
  margin-bottom: var(--space-md);
}

/* Links – slightly more orange, clear hover */
a {
  color: var(--rust-2-plus);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--rust-2);        /* slightly deeper on hover */
}

/* ====== Hero (unchanged) ====== */
.hero{
  background-color: var(--rust-2);
  background-image: linear-gradient(135deg, var(--rust-1) 0%, var(--rust-2) 55%, var(--rust-3) 100%);
  color:#fff;
}
/* all text in the banner pure white */
.hero h1, .hero .h1,
.hero h2, .hero .h2,
.hero h3, .hero .h3,
.hero h4, .hero .h4,
.hero h5, .hero .h5,
.hero p, .hero .lead,
.hero a { color:#fff; }
.hero a:hover { color:#fff; opacity:.9; text-decoration: underline; }

/* ====== Navbar ====== */
.navbar-light .navbar-brand { color: var(--brand-1); }
.navbar-light .navbar-brand:hover { color: var(--brand-3); }
.navbar-light .navbar-nav .nav-link{ color: var(--brand-1); }
.navbar-light .navbar-nav .nav-link:hover{ color: var(--brand-3); }
.navbar-light .navbar-nav .nav-link.active{
  color: var(--rust-2-plus); /* subtly in line with new link color */
  font-weight: 600;
}

/* ====== Buttons ====== */
.btn-primary{
  background-color: var(--brand-2);
  border-color: var(--brand-2);
}
.btn-primary:hover{
  background-color: var(--brand-3);
  border-color: var(--brand-3);
}
.btn-secondary{
  background-color: var(--brand-1);
  border-color: var(--brand-1);
}
.btn-secondary:hover{
  background-color: var(--brand-3);
  border-color: var(--brand-3);
}

/* ====== Utilities ====== */
.bg-grey { background-color: var(--bg-grey); }
section .row + .row { margin-top: var(--space-xl); } /* space between rows within sections */

/* ====== Frames & images (robust, no fixed heights) ====== */
.frame-rechts, .frame-links{
  height: auto;
  white-space: normal;
  margin-top: 0;
}
.frame-rechts{ text-align: right; }
.frame-links{ text-align: left; }
.helper{ display:none !important; }

.standaardfoto{
  display:block;
  width:100%;
  height:auto;
  vertical-align: middle;
  max-height: none;
}

/* Specific cover-crop for volcano (equal visual height) */
#voor-wie .img-cover{
  width:100%;
  height: 280px;          /* fixed visible height on md+ */
  object-fit: cover;      /* crops where needed */
  object-position: center;
}
@media (max-width: 767.98px){
  #voor-wie .img-cover{ height: 220px; } /* more compact on mobile */
}

/* ====== Blockquotes ====== */
.blockquote {
  line-height:1.5;
  margin-bottom: var(--space-lg);
  border-left:4px solid rgba(0,0,0,.08);
}
.blockquote .blockquote-footer{
  margin-top: var(--space-md);
  padding-top: var(--space-xs);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(0,0,0,.6);
  font-size: .95em;
}
.blockquote .blockquote-footer::before{ content:"— "; }

/* ====== Small responsive tweaks ====== */
@media (max-width: 768px) {
  .col-sm-4, .col-md-4, .col-md-6, .col-md-8 {
    text-align: center;
    margin: 25px 0;
  }
  .frame-rechts, .frame-links { text-align: center; }
}

/* Extra space under photo columns when columns stack (mobile) */
@media (max-width: 767.98px) {
  .mb-mobile-gap { margin-bottom: var(--space-lg) !important; }
}