/*
Theme Name: Mindfulness IJsselstein v15
Theme URI: https://example.com/
Author: Prototype voor Mindfulness IJsselstein
Description: Native WordPress block theme op basis van prototype v15. Gericht op visueel en later zelfstandig bewerken.
Version: 0.1.0
Requires at least: 7.0
Requires PHP: 8.0
Text Domain: mindfulness-ijsselstein
*/

:root{
  --mi-paper:#FCFAF6;
  --mi-sand:#E9E3D9;
  --mi-sage:#8D9C93;
  --mi-forest:#243D35;
  --mi-forest-2:#53645E;
  --mi-clay:#C36B54;
  --mi-clay-dark:#A94E3C;
  --mi-muted:#66716D;
  --mi-line:rgba(36,61,53,.15);
  --mi-dark:#12181B;
  --mi-shadow:0 22px 56px rgba(18,24,27,.12);
}

html{scroll-behavior:smooth}
body{overflow-x:hidden}
.wp-site-blocks{padding:0}
.mi-wrap{max-width:1180px;margin-inline:auto}
.mi-eyebrow{
  font-size:.76rem!important;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--mi-clay-dark);
  margin-bottom:12px!important
}

/* Header */
.mi-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--mi-line);
}
.mi-header .wp-block-site-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:800;
}
.mi-header .wp-block-navigation__responsive-container-open,
.mi-header .wp-block-navigation__responsive-container-close{
  border:1px solid var(--mi-line);
  border-radius:4px;
  padding:8px;
}
.mi-header .wp-block-button__link{
  border-radius:4px!important;
  white-space:nowrap;
}

/* Hero */
.mi-hero{min-height:92svh}
.mi-hero .wp-block-cover__background{
  background:linear-gradient(180deg,rgba(18,24,27,.20) 0%,rgba(18,24,27,.28) 40%,rgba(18,24,27,.78) 100%)!important
}
.mi-hero-inner{padding-top:7rem!important;padding-bottom:3.5rem!important}
.mi-hero h1{max-width:10ch}
.mi-hero .mi-lead{max-width:31em}
.mi-hero .wp-block-button__link{border-radius:6px!important;min-height:50px}
.mi-facts{
  margin-top:2rem;
  background:rgba(252,250,246,.96);
  box-shadow:var(--mi-shadow);
  border-radius:16px;
  overflow:hidden;
}
.mi-facts>.wp-block-column{
  padding:14px;
  border-right:1px solid var(--mi-line);
}
.mi-facts>.wp-block-column:last-child{border-right:0}
.mi-facts p{margin:0!important}

/* Editorial rhythm */
.mi-section{padding-top:5rem!important;padding-bottom:5rem!important}
.mi-section-tight{padding-top:3.6rem!important;padding-bottom:3.6rem!important}
.mi-editorial-copy{align-self:start}
.mi-editorial-gallery img,
.mi-image-frame img{
  border-radius:8px;
  box-shadow:0 18px 40px rgba(18,24,27,.10)
}
.mi-dark{
  background:var(--mi-dark);
  color:#fff;
  padding-top:5.4rem!important;
  padding-bottom:5.4rem!important;
}
.mi-dark h2,.mi-dark h3,.mi-dark p{color:#fff}
.mi-dark-row{
  padding:1.2rem 0!important;
  border-bottom:1px solid rgba(255,255,255,.18)
}
.mi-benefits>.wp-block-group{
  padding:1rem 0!important;
  border-bottom:1px solid var(--mi-line)
}

/* Course accordion */
.mi-course{background:#F0ECE5;border-block:1px solid rgba(18,24,27,.08)}
.mi-course details{
  border-bottom:1px solid var(--mi-line);
  padding:0
}
.mi-course details summary{
  cursor:pointer;
  padding:1rem 0;
  font-weight:700
}
.mi-course details>p{padding-bottom:1rem;color:var(--mi-forest-2)}

/* Notes / chips */
.mi-note{background:var(--mi-sand);border-radius:16px}
.mi-chip{
  display:inline-block;
  padding:.4rem .7rem;
  border:1px solid var(--mi-sage);
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  margin:.2rem
}

/* Trainer */
.mi-trainer-image img{
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 28%;
  border-radius:48% 52% 46% 54% / 42% 40% 60% 58%;
  box-shadow:var(--mi-shadow)
}
.mi-cred{
  display:inline-block;
  border:1px solid var(--mi-line);
  border-radius:999px;
  padding:.45rem .7rem;
  margin:.2rem;
  font-size:.82rem;
  font-weight:700;
  background:#fff
}

/* Practical */
.mi-practical{background:var(--mi-sand)}
.mi-practical-row{
  padding:.7rem 0!important;
  border-bottom:1px solid var(--mi-line)
}
.mi-route{
  background:#17211F;
  color:#fff;
  border-radius:8px
}
.mi-route h3,.mi-route p{color:#fff}

/* Contact */
.mi-contact .wp-block-cover__background{
  background:linear-gradient(180deg,rgba(18,24,27,.24),rgba(18,24,27,.84))!important
}
.mi-form-card{
  background:rgba(252,250,246,.97);
  color:var(--mi-forest);
  border-radius:8px;
  box-shadow:var(--mi-shadow)
}
.mi-form-card h3,.mi-form-card p{color:var(--mi-forest)}
.mi-placeholder-form label{
  display:block;
  font-size:.82rem;
  font-weight:800;
  margin:.8rem 0 .3rem
}
.mi-placeholder-form input,
.mi-placeholder-form textarea{
  width:100%;
  padding:12px 13px;
  border:1px solid rgba(36,61,53,.28);
  border-radius:8px;
  background:#fff;
  color:var(--mi-forest);
  font:inherit
}
.mi-placeholder-form textarea{min-height:100px}
.mi-placeholder-form button{
  width:100%;
  margin-top:.8rem;
  padding:12px 16px;
  border:0;
  border-radius:4px;
  background:var(--mi-clay-dark);
  color:#fff;
  font:inherit;
  font-weight:800
}
.mi-placeholder-note{
  font-size:.78rem;
  color:var(--mi-muted);
  margin-top:.5rem
}

@media(min-width:782px){
  .mi-editorial-copy{position:sticky;top:100px}
}

@media(max-width:781px){
  .mi-section{padding-top:3.6rem!important;padding-bottom:3.6rem!important}
  .mi-dark{padding-top:3.9rem!important;padding-bottom:3.9rem!important}
  .mi-hero-inner{padding-top:6rem!important;padding-bottom:2.8rem!important}
  .mi-facts{margin-top:1.5rem}
  .mi-facts>.wp-block-column{
    border-right:0;
    border-bottom:1px solid var(--mi-line)
  }
  .mi-facts>.wp-block-column:last-child{border-bottom:0}
}