/*
Theme Name: Mondiale Werken Intern Platform
Theme URI: https://mondialewerken.be/
Author: Mondiale Werken
Description: Custom thema voor het interne platform (zonder header/footer), met paarse overlay achtergrond, startpagina-tegels, AJAX live search en formulieren-styling.
Version: 1.0.0
License: GPLv2 or later
Text Domain: mondiale
*/

:root{
  --mowe-purple:#60418b;
  --mowe-orange:#f47e67;
  --mowe-white:#ffffff;
  --mowe-card-bg: rgba(255,255,255,0.88);
  --mowe-card-bg-strong: rgba(255,255,255,0.94);
  --mowe-shadow: 0 10px 30px rgba(0,0,0,0.25);
  --mowe-radius: 22px;
}

/* Reset-ish */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;color:#2b2b2b;line-height:1.45}
a{color:var(--mowe-purple);text-decoration:none}
a:hover{text-decoration:underline}

/* Fullscreen background with purple overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  background: var(--mowe-purple);
  opacity:.72;
  z-index:-1;
}
body.custom-background{
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
}
/* container max width */
.mowe-wrap{max-width:1200px;margin:0 auto;padding:40px 24px}
.mowe-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:white}
.mowe-brand{display:flex;align-items:center;gap:14px;color:white}
.mowe-brand .mowe-title{font-weight:700;font-size:26px;line-height:1.1}
.mowe-brand .mowe-sub{font-size:16px;opacity:.9}

/* Profile box (placeholder for future menu) */
.mowe-profile{color:white;border:2px solid rgba(255,255,255,.7);border-radius:16px;padding:10px 14px;display:inline-flex;gap:10px;align-items:center}
.mowe-profile .mowe-avatar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.7)}

/* Headline */
.mowe-hero{color:white;margin:50px 0 16px}
.mowe-hero h1{font-size:44px;line-height:1.1;margin:0 0 6px}
.mowe-search-zone{position:relative;margin:20px 0 30px}
.mowe-search-label{color:rgba(255,255,255,.8);font-size:28px;margin-bottom:8px}
.mowe-search-bar{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.mowe-search-input{
  width:100%;height:54px;border-radius:12px;border:2px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.12);color:white;padding:0 14px;font-size:18px;backdrop-filter: blur(2px);
}
.mowe-search-input::placeholder{color:rgba(255,255,255,.65)}
.mowe-search-btn{
  height:54px;border-radius:12px;border:2px solid rgba(255,255,255,.7);
  background:transparent;color:white;padding:0 18px;font-size:18px;cursor:pointer
}
/* Suggestions */
.mowe-suggest{
  position:absolute;left:0;right:0;top: calc(100% + 8px);
  background:var(--mowe-card-bg-strong);border-radius:12px;box-shadow:var(--mowe-shadow);overflow:hidden;display:none;
}
.mowe-suggest ul{list-style:none;margin:0;padding:6px}
.mowe-suggest li{margin:0;padding:10px 12px;border-radius:8px}
.mowe-suggest li a{display:block;color:#2b2b2b}
.mowe-suggest li:hover{background:rgba(0,0,0,0.04)}

/* Tiles grid */
.mowe-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:18px}
@media(max-width:900px){.mowe-grid{grid-template-columns:1fr} .mowe-hero h1{font-size:34px}}
.mowe-tile{
  display:grid;grid-template-columns:1fr 120px;gap:10px;align-items:center;
  background:var(--mowe-card-bg);border-radius:var(--mowe-radius);box-shadow:var(--mowe-shadow);
  padding:22px 22px;position:relative;overflow:hidden
}
.mowe-tile h3{margin:0 0 6px;font-size:26px;color:#402a63}
.mowe-tile p{margin:0;color:#40315b;opacity:.9}
.mowe-tile .mowe-icon{width:84px;height:84px;justify-self:end;opacity:.96}
.mowe-tile .mowe-arrow{
  position:absolute;right:20px;bottom:18px;width:26px;height:26px;border-radius:999px;border:2px solid #7b63a8;
  display:flex;align-items:center;justify-content:center;color:#7b63a8;font-weight:700
}

/* Page wrapper card */
.mowe-page-card{
  background:var(--mowe-card-bg);border-radius:var(--mowe-radius);box-shadow:var(--mowe-shadow);padding:26px 22px;margin-top:20px
}
.mowe-back{color:white;display:inline-flex;align-items:center;gap:8px;margin:6px 0 6px}
.mowe-back:hover{opacity:.9}

/* Form scaffold */
.mowe-form .mowe-field{margin:14px 0}
.mowe-form label{display:block;font-weight:700;color:#402a63;margin-bottom:6px}
.mowe-form input[type='text'], .mowe-form input[type='date'], .mowe-form textarea, .mowe-form select{
  width:100%;padding:12px 14px;border-radius:12px;border:2px dashed rgba(96,65,139,.55);background:#fff
}
.mowe-form textarea{min-height:140px}
.mowe-form .mowe-help{color:#5f4a88;font-style:italic;opacity:.9;margin-top:6px}
.mowe-form .mowe-submit{margin-top:10px;background:var(--mowe-orange);color:white;border:none;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer}
.mowe-form .mowe-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.mowe-form .mowe-row{grid-template-columns:1fr}}

/* 404 page */
.mowe-404{color:white;text-align:left;margin:90px 0}
.mowe-404 h1{font-size:52px;margin:0 0 12px}
.mowe-404 .mowe-go-home{display:inline-flex;align-items:center;gap:10px;margin-top:22px;background:var(--mowe-card-bg);color:#402a63;border-radius:16px;padding:14px 16px;box-shadow:var(--mowe-shadow)}

/* Mukhta Mahee font */
:root{
  --mowe-font: "Mukta Mahee", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body, button, input, textarea, select { font-family: var(--mowe-font); }
h1,h2,h3,h4,h5,h6 { font-family: var(--mowe-font); font-weight: 700; }