/* ====================================================================
   Mathersoft_Search v1.10.4 — Server-side layout CSS voor AI-zoek.
   Wordt geladen via default.xml in <head> dus VOOR de HTML rendert.
   Geen layout shifts (CLS) bij page load.

   DOM-structuur:
     <div class="container py-2 mx-auto" x-data="initMiniSearch()">  ← outer
       <search role="search">                                         ← parent v.d. form
         <form id="search_mini_form" class="flex">                    ← bevat input + submit
           <input id="search" class="w-full">
           <button type="submit">[🔍]</button>
         </form>
       </search>
       [AI-knop wordt hier door JS naast </form> ingevoegd]
     </div>
   ==================================================================== */

/* <search> element flex-container maken zodat form + AI-knop op één regel staan.
   By default heeft <search> display: inline, daarom valt de knop NU op een
   nieuwe regel. */
header search,
.page-header search,
[role="search"] {
    display: flex !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
}

/* Form moet alle resterende ruimte pakken, knop is fixed 44px */
header search > form#search_mini_form,
.page-header search > form#search_mini_form,
[role="search"] > form#search_mini_form {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
}

/* Reserveer ruimte voor de AI-knop AL VOORDAT JS hem mount.
   Dit voorkomt dat de form van 100% naar (100%-50px) springt bij JS-load. */
header search::after,
.page-header search::after,
[role="search"]::after {
    content: '';
    display: block;
    width: 50px;          /* 44px knop + 6px gap */
    height: 44px;
    flex-shrink: 0;
    pointer-events: none;
}

/* Zodra JS de knop heeft gemount, krijgt <search> de class .msrai-btn-mounted */
header search.msrai-btn-mounted::after,
.page-header search.msrai-btn-mounted::after,
[role="search"].msrai-btn-mounted::after {
    display: none;
}

/* AI-knop styling — server-side beschikbaar zodat zodra JS hem mount
   de styling al klaar is (geen flash of unstyled content) */
.msrai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: linear-gradient(135deg, #F06D27 0%, #E8520A 100%);
    color: #fff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(232,82,10,.3);
    transition: transform .12s ease, box-shadow .15s ease, filter .12s ease;
}
.msrai-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(232,82,10,.45); filter: brightness(1.05); }
.msrai-btn:active { transform: translateY(0); }
.msrai-btn svg    { width: 28px; height: 28px; }

@media (max-width: 640px) {
    .msrai-btn { width: 40px; height: 40px; }
    .msrai-btn svg { width: 24px; height: 24px; }
    header search::after, .page-header search::after, [role="search"]::after { width: 46px; height: 40px; }
}