/* =========================================================
   UI-SOFT.CSS
   Theme: Editorial Bakery
   Alleen STIJL. Geen functionele aanpassingen.
   ========================================================= */

:root{

  /* ===== Editorial Bakery palette ===== */
  --ui-bg-top: #E9B34C;
  --ui-bg-bottom: #E9B34C;

  --ui-surface: #F2C66A;
  --ui-surface-2: #F4F5F7;
  --ui-border: rgba(0,0,0,0.10);

  --ui-text: #1A1A1A;
  --ui-muted: #606060;

  /* Editorial green */
  --ui-green: #2F4F3E;
  --ui-green-dark: #243C30;
  --ui-green-soft: #E7EFEA;

  /* Warm wood accent */
  --ui-wood: #A36A3C;
  --ui-wood-dark: #7C4E2C;

  --ui-radius-card: 14px;
  --ui-radius-control: 12px;

  --ui-shadow-card: 0 14px 34px rgba(0,0,0,0.10);
  --ui-shadow-card-hover: 0 18px 44px rgba(0,0,0,0.14);
  --ui-shadow-float: 0 2px 10px rgba(0,0,0,0.12);

  --ui-ease: cubic-bezier(.2,.8,.2,1);
  --ui-dur: 140ms;

  --ui-focus: 0 0 0 3px rgba(47,79,62,0.26);
}


/* =========================================================
   BODY
   ========================================================= */

html{
  background: #E9B34C;
}

body{
  color: var(--ui-text);

  background-color: #E9B34C;

  background-image:
    linear-gradient(rgba(233,179,76,0.65), rgba(233,179,76,0.60)),
    url("/static/img/bg-bakker.webp");

  background-size:
    cover,
    cover;

  background-position:
    top center,
    top center;

  background-repeat:
    no-repeat,
    no-repeat;

  min-height: 100vh;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 767px){
  body{
    background-image:
      linear-gradient(rgba(233,179,76,0.58), rgba(233,179,76,0.92)),
      url("/static/img/bg-bakker.webp");

    background-size:
      cover,
      cover;

    background-position:
      top center,
      top left;

    background-repeat:
      no-repeat,
      no-repeat;
  }
}


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

a{
  color: var(--ui-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,79,62,0.32);
  padding-bottom: 1px;
}

a:hover{
  color: var(--ui-green-dark);
  border-bottom-color: rgba(47,79,62,0.65);
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  border-bottom: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
}


/* =========================================================
   CARDS
   ========================================================= */

:where(.card, section, .article, .block){
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  box-shadow: var(--ui-shadow-card);
  transition: transform var(--ui-dur) var(--ui-ease),
              box-shadow var(--ui-dur) var(--ui-ease),
              border-color var(--ui-dur) var(--ui-ease);
}

:where(.card, section, .article, .block):hover{
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow-card-hover);
  border-color: rgba(0,0,0,0.12);
}


/* =========================================================
   TYPOGRAFIE
   ========================================================= */

h1,h2,h3{
  letter-spacing: -0.02em;
}

h1{ font-weight: 850; }
h2{ font-weight: 850; }
h3{ font-weight: 750; }

small,.muted,.text-muted{
  color: var(--ui-muted);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.nav-btn{
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: background var(--ui-dur) var(--ui-ease),
              border-color var(--ui-dur) var(--ui-ease);
}

.menu-btn{
  background: #F2C66A !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: #1A1A1A !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: background var(--ui-dur) var(--ui-ease),
              border-color var(--ui-dur) var(--ui-ease);
}

.nav-btn:hover{
  background: #222222 !important;
  border-color: #222222 !important;
}

.menu-btn:hover{
  background: #E9B34C !important;
  border-color: rgba(0,0,0,0.25) !important;
}

.nav-btn:focus-visible,
.menu-btn:focus-visible{
  outline: none !important;
  box-shadow: var(--ui-focus) !important;
}


/* Hamburger icon */

.menu-icon::before,
.menu-icon::after,
.menu-icon span{
  background: #1A1A1A !important;
}


/* =========================================================
   MENU OVERLAY (Aanpassing 1)
   ========================================================= */

.menu-dropdown{
  background: #F7F3EF;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.16);
}

.menu-item{
  background: #FBF8F5 !important;
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--ui-text) !important;
  border-radius: 12px;
  transition: background var(--ui-dur) var(--ui-ease),
              border-color var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease);
}

.menu-item:hover{
  background: #E7EFEA !important;
  border-color: rgba(47,79,62,0.18);
  color: var(--ui-green-dark) !important;
}


/* =========================================================
   HERO (Eerste kaart)
   ========================================================= */

.site-main .card:first-of-type{
  background: #F2C66A;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.18);
  color: var(--ui-text) !important;
}

.site-main .card:first-of-type h2{
  color: var(--ui-text) !important;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 26px;
  display: inline-block;
  padding-bottom: 8px; /* Aanpassing 2 */
  border-bottom: 2px solid rgba(163,106,60,0.85); /* Aanpassing 2 */
}

.site-main .card:first-of-type .richtext,
.site-main .card:first-of-type p,
.site-main .card:first-of-type li,
.site-main .card:first-of-type label,
.site-main .card:first-of-type span,
.site-main .card:first-of-type strong{
  color: var(--ui-text) !important; /* Aanpassing 3 */
}

.site-main .card:first-of-type a:not(.nav-btn){
  color: var(--ui-text) !important;
  border-bottom-color: rgba(26,26,26,0.35);
}

.site-main .card:first-of-type a:not(.nav-btn):hover{
  border-bottom-color: rgba(26,26,26,0.70);
}


/* =========================================================
   QUILL / RICHTEXT SUPPORT (Ongewijzigd functioneel)
   ========================================================= */

.richtext .ql-align-right{ text-align:right; }
.richtext .ql-align-center{ text-align:center; }
.richtext .ql-align-left{ text-align:left; }
.richtext .ql-align-justify{ text-align:justify; }

.richtext img,
.ql-editor img{
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.richtext img[style*="float:left"],
.ql-editor img[style*="float:left"]{
  float:left;
  margin:0 12px 8px 0;
}

.richtext img[style*="float:right"],
.ql-editor img[style*="float:right"]{
  float:right;
  margin:0 0 8px 12px;
}

.richtext::after,
.ql-editor::after{
  content:"";
  display:block;
  clear:both;
}