/*
Theme Name: iAssist GP
Theme URI: https://iassist.be
Description: Child theme van GeneratePress voor iAssist, office management en business support in Hasselt.
Author: Netwires
Author URI: https://netwires.be
Template: generatepress
Version: 0.1.0
*/

/* Fonts (@font-face): fonts.css, zodat ook de blok-editor ze laadt. */

/* Onepager: de sticky header dekt geen sectietitel af, en op desktop schuiven ankers
   zacht. Twee valkuilen met het mobiele menu: GB Pro zet bij het sluiten de focus
   terug op de hamburger. Die focus() breekt een zachte scroll af, en met
   scroll-padding op html scrolt Chrome dan nog 400px terug. Daarom de marge op
   de secties zelf en smooth scroll enkel waar geen uitklapmenu is. */
[id] { scroll-margin-top: 76px; }
@media (min-width: 860px) and (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid #F38A48; outline-offset: 3px; }

/* Footer altijd tegen de onderkant (standaard afwerking netwires-wp).
   De width-regel is verplicht: zonder krimpt #page in de flex-body naar
   inhoudsbreedte en raken full-width-secties geboxed op brede schermen. */
body { display: flex; flex-direction: column; min-height: 100svh; }
body > .site.grid-container { width: 100%; }
body > .site-footer { margin-top: auto; }

/* De sticky header schuift onder de adminbalk door als je ingelogd bent. */
.admin-bar .gb-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .gb-site-header { top: 46px; } }

/* GP's kale 404 verbergen; het eigen 404-element komt uit scripts/24-404.php. */
.error404 #page { display: none; }

/* ============================================================
   Formulier (Fluent Forms) in de witte kaart van de contactsectie,
   1:1 uit het ontwerp: velden op mint, focus teal op wit, twee
   kolommen (Naam/Bedrijf, E-mail/Telefoon), oranje verzendknop.
   ============================================================ */
.ia-formkaart { container: iaform / inline-size; }
.ia-formkaart form.frm-fluent-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.ia-formkaart legend.ff_screen_reader_title { position: absolute; }
.ia-formkaart .ff-el-group { margin-bottom: 0; min-width: 0; }
.ia-formkaart .ia-veld-breed { grid-column: 1 / -1; margin-top: 8px; }
/* Turnstile: volle breedte, met dezelfde ademruimte als het tekstvak erboven. */
.ia-formkaart .ff-el-group:has(.cf-turnstile) { grid-column: 1 / -1; margin-top: 8px; }
.ia-formkaart .ff-el-input--label { margin-bottom: 8px; padding: 0; line-height: 1.6; }
.ia-formkaart .ff-el-input--label label { font-size: 12.5px; font-weight: 500; color: #062A30; margin: 0; }
.ia-formkaart .ff-el-input--label label .ia-optioneel { font-weight: 300; color: #4A6468; }
.ia-formkaart .ff-el-form-control { width: 100%; font: inherit; font-size: 14px; font-weight: 300; line-height: 1.6; color: #062A30; background: #F4F8F8; border: 1.5px solid transparent; border-radius: 10px; padding: 10px 14px; box-shadow: none; transition: border-color .15s, background-color .15s; }
.ia-formkaart .ff-el-form-control::placeholder { color: #4A6468; opacity: 1; }
.ia-formkaart .ff-el-form-control:focus { border-color: #006776; background: #FFFFFF; outline: none; box-shadow: none; }
.ia-formkaart textarea.ff-el-form-control { resize: vertical; min-height: 88px; }
.ia-formkaart .ff-el-is-error .ff-el-form-control { border-color: #B4561A; }
.ia-formkaart .error.text-danger { font-size: 12.5px; color: #B4561A; margin-top: 6px; }
/* Onderaan, zoals het ontwerp: knop links, "Antwoord binnen twee werkdagen." rechts,
   en de privacynoot klein eronder. Fluent Forms zet de knop altijd als laatste, dus
   de volgorde komt uit order. */
.ia-formkaart .ff_submit_btn_wrapper { order: 1; grid-column: 1; margin-top: 12px; text-align: left; }
.ia-formkaart .ia-form-antwoord { order: 2; grid-column: 2; margin-top: 12px; align-self: center; justify-self: end; }
.ia-formkaart .ia-form-noot { order: 3; grid-column: 1 / -1; }
.ia-formkaart .ia-form-antwoord p { margin: 0; font-size: 13px; color: #4A6468; }
.ia-formkaart .ia-form-noot p { margin: 0; font-size: 12px; line-height: 1.5; color: #4A6468; }
.ia-formkaart .ia-form-noot a { color: #4A6468; text-decoration: underline; text-underline-offset: 2px; }
.ia-formkaart .ia-form-noot a:hover { color: #006776; }
.ia-formkaart .ff-btn-submit { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px; border: 0; background: #F38A48; color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.6; cursor: pointer; transition: background-color .15s; }
.ia-formkaart .ff-btn-submit::after { content: "\2192"; }
.ia-formkaart .ff-btn-submit:hover, .ia-formkaart .ff-btn-submit:focus-visible { background: #E2793A; color: #FFFFFF; }
/* Bevestiging na verzenden: teal vinkje, titel, één zin. De kop van de kaart verdwijnt mee, zoals in het ontwerp. */
.ia-formkaart:has(.ff-message-success) > .gb-text { display: none; }
.ia-formkaart .ff-message-success { border: 0; box-shadow: none; padding: 24px 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ia-formkaart .ff-message-success::before { content: "\2713"; width: 48px; height: 48px; border-radius: 50%; background: #006776; color: #FFFFFF; display: grid; place-items: center; font-size: 20px; }
.ia-formkaart .ff-message-success h3 { font-size: 24px; font-weight: 400; line-height: 1.3; color: #006776; margin: 0; }
.ia-formkaart .ff-message-success p { font-size: 16px; font-weight: 300; color: #3B5559; margin: 0; }
/* Smalle kaart: alles onder elkaar (in het ontwerp onder 400px kaartbreedte). */
@container iaform (max-width: 400px) {
  .ia-formkaart form.frm-fluent-form fieldset { grid-template-columns: 1fr; }
  .ia-formkaart .ff_submit_btn_wrapper, .ia-formkaart .ia-form-antwoord { grid-column: 1; }
  .ia-formkaart .ia-form-antwoord { justify-self: start; margin-top: 0; }
}