/*
 Theme Name:   Het kan als je het wilg
 Theme URI:    https://hetkanalsjehetwilg.nl/
 Description:  Child theme of Bricks for Het kan als je het wilg (Urgenda). The design lives in Bricks (theme style, global classes, variables, components). This file is the small tag layer that has no Bricks field: resets, link details, rich text from JetEngine/WordPress and the JetFormBuilder markup.
 Author:       Studio Puik
 Template:     bricks
 Version:      1.0.0
 Update URI:   false
 Text Domain:  hetkanalsjehetwilg
*/

/* ---- Variables per breakpoint (Bricks variables have no breakpoint values).
   :root:root beats the :root block Bricks prints for its global variables. ---- */
@media (max-width: 767px) {
  :root:root {
    --header-height: 9rem;
    --radius-m: 2.4rem;
    --radius-l: 4rem;
  }
}

/* ---- Reset: zero specificity, so every class and field wins ---------------- */
:where(body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd) { margin: 0; }
:where(img, svg, video, iframe) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
/* Lists that are layout (query loops, card rows, Div/Block with tag ul/ol) */
:where(ul, ol):where(.brxe-div, .brxe-block, .brxe-container),
:where(ul, ol)[role="list"] { list-style: none; margin: 0; padding: 0; }

/* ---- Body and text ------------------------------------------------------------ */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1, h2, h3, h4) { font-optical-sizing: auto; text-wrap: balance; }
:where(p, ul, ol) { text-wrap: pretty; }
:where(strong, b) { font-weight: var(--weight-semibold); }
::selection { background: var(--green); color: var(--white); }
:focus-visible { outline-offset: 3px; }

/* Links without a class: theme style sets colour; these details have no field */
:where(a) {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition-property: color;
  transition-duration: var(--duration);
}
:where(a):hover { color: var(--color-link-hover); }

/* Sections take the page tint; bg-white / bg-tint / bg-dark switch the variables */
:where(.brxe-section) { background-color: var(--color-bg); color: var(--color-text); }

/* Bricks' own skip link ('Naar de inhoud') */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -10rem;
  z-index: 100;
  padding: var(--space-xs) var(--space-s);
  background: var(--white);
  color: var(--green);
  font-weight: var(--weight-semibold);
}
.skip-link:focus { top: var(--space-s); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* =============================================================================
   JetFormBuilder – markup we don't control, styled like the static .form
   (form-card holds the form; classes: form-legend, field-half, input-short,
   choice-grid, form-consent, btn-focus are set in the form blocks)
   ============================================================================= */
.jet-form-builder.jet-form-builder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}
.jet-form-builder > * { grid-column: 1 / -1; min-width: 0; }
.jet-form-builder > input[type="hidden"] { display: none; }
.jet-form-builder .jet-form-builder-row { display: flex; flex-flow: column nowrap; gap: 0.6rem; margin: 0; padding: 0; }
.jet-form-builder > .jet-form-builder-row:has(.field-half) { grid-column: auto; }
.jet-form-builder__conditional { display: contents; }

/* Group headings ('Over jou', 'Waar staan je wilgen?') */
.jet-form-builder .form-legend .jet-form-builder__label-text {
  display: block;
  font-family: var(--font-serif);
  font-size: 3.2rem;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--green);
}
.jet-form-builder > .field-type-heading-field:not(:first-of-type) { margin-top: calc(var(--space-xl) - var(--space-m)); }

/* Labels, hints */
.jet-form-builder .jet-form-builder__label { padding: 0; }
.jet-form-builder .jet-form-builder__label-text { font-weight: var(--weight-semibold); color: var(--green); }
.jet-form-builder .jet-form-builder__required { color: var(--red); }
.jet-form-builder .jet-form-builder__desc,
.jet-form-builder .jet-form-builder__desc small { font-size: var(--text-s); color: var(--grey); }

/* Inputs */
.jet-form-builder .text-field,
.jet-form-builder .textarea-field,
.jet-form-builder .select-field,
.jet-form-builder input[type="number"] {
  width: 100%;
  min-height: 6rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background-color: var(--white);
  font: inherit;
  color: var(--black);
  transition: border-color var(--duration), box-shadow var(--duration);
}
.jet-form-builder .text-field:hover,
.jet-form-builder .textarea-field:hover,
.jet-form-builder .select-field:hover { border-color: var(--grey); }
.jet-form-builder .text-field:focus-visible,
.jet-form-builder .textarea-field:focus-visible,
.jet-form-builder .select-field:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.jet-form-builder .jet-form-builder__field.input-short { max-width: 15rem; }
.jet-form-builder .jet-form-builder__field.textarea-field { height: auto; min-height: 16rem; resize: vertical; }
.jet-form-builder .checkradio-wrap .jet-form-builder__field-label,
.jet-form-builder .checkradio-wrap .jet-form-builder__field-label span { font-size: var(--text-base); color: var(--black); }
.jet-form-builder .select-field {
  appearance: none;
  padding-right: 4.8rem;
  background: var(--white) url('assets/img/icons/chevron-down-red.svg') right 1.6rem center / 2rem no-repeat;
}
.jet-form-builder .field-type-media-field .jet-form-builder__field-wrap { padding-top: 0.6rem; }
.jet-form-builder .field--error .text-field,
.jet-form-builder .field--error .textarea-field,
.jet-form-builder .field--error .select-field,
.jet-form-builder [aria-invalid="true"] { border-color: var(--red); }
.jet-form-builder .error-message { font-size: var(--text-s); color: var(--red); }

/* Radios and checkboxes (choice / choice-input) */
.jet-form-builder .jet-form-builder__fields-group:has(.choice-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem var(--space-m);
}
.jet-form-builder .checkradio-wrap .jet-form-builder__field-label { display: flex; align-items: flex-start; gap: 2rem; cursor: pointer; margin: 0; }
.jet-form-builder .checkradio-field {
  flex: none;
  appearance: none;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0.3rem 0 0;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background-color: var(--white);
  cursor: pointer;
  transition: border-color var(--duration), background-color var(--duration);
}
.jet-form-builder .checkradio-field[type="radio"] { border-radius: 50%; }
.jet-form-builder .checkradio-field:hover { border-color: var(--grey); }
.jet-form-builder .checkradio-field:checked { border-color: var(--green); background: var(--green) url('assets/img/icons/check.svg') center / 2.4rem no-repeat; }
.jet-form-builder .checkradio-field[type="radio"]:checked { background: var(--white); box-shadow: inset 0 0 0 0.6rem var(--green); }
.jet-form-builder .checkradio-field:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.jet-form-builder > .field-type-checkbox-field:has(.form-consent) + .field-type-checkbox-field:has(.form-consent) { margin-top: calc(var(--space-s) - var(--space-m)); }
.jet-form-builder > .field-type-checkbox-field:has(.form-consent):first-of-type,
.jet-form-builder > .field-type-heading-field ~ .field-type-checkbox-field:has(.form-consent) { }

/* Submit = .btn (green), btn-focus = red */
.jet-form-builder .jet-form-builder__action-button-wrapper { display: block; }
.jet-form-builder .jet-form-builder__action-button {
  --btn-bg: var(--green);
  --btn-bg-hover: var(--green-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius-s);
  background-color: var(--btn-bg);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 1.8rem;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-body);
  cursor: pointer;
  transition-property: background-color, border-color, box-shadow;
  transition-duration: var(--duration);
}
.jet-form-builder .jet-form-builder__action-button.btn-focus { --btn-bg: var(--red); --btn-bg-hover: var(--red-light); }
.jet-form-builder .jet-form-builder__action-button:hover,
.jet-form-builder .jet-form-builder__action-button:focus-visible { background-color: var(--btn-bg-hover); border-color: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }

/* Messages = .form-message */
.jet-form-builder-messages-wrap:empty { display: none; }
.jet-form-builder-message {
  padding: var(--space-m);
  border-radius: var(--radius-s);
  background-color: var(--sand);
  color: var(--green);
  font-weight: var(--weight-semibold);
}
.jet-form-builder-message--error { color: var(--red); }

@media (max-width: 478px) {
  .jet-form-builder.jet-form-builder { grid-template-columns: minmax(0, 1fr); }
  .jet-form-builder > .jet-form-builder-row:has(.field-half) { grid-column: 1 / -1; }
  .jet-form-builder .jet-form-builder__fields-group:has(.choice-grid) { grid-template-columns: minmax(0, 1fr); }
  .jet-form-builder .jet-form-builder__action-button { font-size: 1.6rem; padding-inline: 1.6rem; }
}

/* Amount buttons (Doneer) = .amount-options / .amount-label */
.jet-form-builder .jet-form-builder__fields-group:has(.amount-options) { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.jet-form-builder .checkradio-wrap .jet-form-builder__field-label:has(.amount-options) { position: relative; gap: 0; }
.jet-form-builder .checkradio-field.amount-options { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.jet-form-builder .checkradio-wrap .jet-form-builder__field-label:has(.amount-options) span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.6rem;
  min-height: 6rem;
  padding: 0 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
  font-weight: var(--weight-semibold);
  color: var(--green);
  cursor: pointer;
}
.jet-form-builder .checkradio-field.amount-options:checked + span { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background-color: var(--sand); }
.jet-form-builder .checkradio-field.amount-options:focus-visible + span { outline: 2px solid var(--red); outline-offset: 3px; }

/* JetFormBuilder draws radios as span::before (input hidden): restyle that as .choice-input */
.jet-form-builder .field-type-radio-field .jet-form-builder__field-label.for-radio > span { display: inline-flex; align-items: flex-start; }
.jet-form-builder .field-type-radio-field .jet-form-builder__field-label.for-radio > span::before {
  width: 2.4rem;
  height: 2.4rem;
  margin: 0.3rem 2rem 0 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  transition: border-color var(--duration), box-shadow var(--duration);
}
.jet-form-builder .field-type-radio-field .jet-form-builder__field-label.for-radio :not(:disabled):not(:checked):hover + span::before { border-color: var(--grey); }
.jet-form-builder .field-type-radio-field .jet-form-builder__field-label.for-radio :checked + span::before { border-color: var(--green); background: var(--white); box-shadow: inset 0 0 0 0.6rem var(--green); }
.jet-form-builder .field-type-radio-field .jet-form-builder__field-label.for-radio :focus-visible + span::before { outline: 2px solid var(--red); outline-offset: 2px; }
.jet-form-builder .jet-form-builder__fields-group:has(.amount-options) { flex-flow: row wrap; }
.jet-form-builder .field-type-radio-field .jet-form-builder__field-label.for-radio:has(.amount-options) > span::before { display: none; }

/* Menu: news items and activities belong to 'Actueel' (Bricks marks only exact URLs) */
body.single-post .nav-link[href="/actueel/"],
body.single-agenda .nav-link[href="/actueel/"],
body.page-id-113 .nav-link[href="/actueel/"] { color: var(--red); }

/* =============================================================================
   Mollie Forms (Doneer) – markup we don't control, styled like the static .form.
   Mollie prints inline margins and <br>s; the first two fields (voornaam,
   achternaam) sit side by side like .field-half.
   ============================================================================= */
.donation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
.donation-form > * { grid-column: 1 / -1; min-width: 0; }
.donation-form > .mollie_forms_field_row:has([name$="_field_0"]),
.donation-form > .mollie_forms_field_row:has([name$="_field_1"]) { grid-column: auto; }
.donation-form .mollie_forms_field_row { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 !important; }
.donation-form .mollie_forms_field_row:empty { display: none; }
.donation-form br { display: none; }
.donation-form label { font-weight: var(--weight-semibold); color: var(--green); }
.donation-form .mollie-forms-required { color: var(--red); }
.donation-form input[type="text"],
.donation-form input[type="email"],
.donation-form input[type="number"],
.donation-form select {
  width: 100% !important;
  min-height: 6rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background-color: var(--white);
  font: inherit;
  color: var(--black);
  transition: border-color var(--duration), box-shadow var(--duration);
}
.donation-form select {
  appearance: none;
  padding-right: 4.8rem;
  background: var(--white) url('assets/img/icons/chevron-down-red.svg') right 1.6rem center / 2rem no-repeat;
}
.donation-form input:hover, .donation-form select:hover { border-color: var(--grey); }
.donation-form input:focus-visible, .donation-form select:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
/* Open amount ('Eigen bedrag') */
.donation-form [id^="rfmp_open_amount_"] { margin: var(--space-s) 0 0; }
.donation-form [id^="rfmp_open_amount_"] label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.donation-form [id^="rfmp_open_amount_"] input[type="number"] { max-width: 15rem; }
/* Payment methods (list filled by Mollie) */
.donation-form [id^="payment_methods_"] ul { display: flex; flex-direction: column; gap: 1rem; padding: 0; }
.donation-form [id^="payment_methods_"] li label { display: flex; align-items: center; gap: 1.2rem; font-weight: var(--weight-regular); color: var(--black); cursor: pointer; }
.donation-form input[type="radio"], .donation-form input[type="checkbox"] {
  flex: none; appearance: none; width: 2.4rem; height: 2.4rem; margin: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--white); cursor: pointer;
}
.donation-form input[type="checkbox"] { border-radius: 0.4rem; }
.donation-form input[type="radio"]:checked { border-color: var(--green); box-shadow: inset 0 0 0 0.6rem var(--green); }
.donation-form input[type="checkbox"]:checked { border-color: var(--green); background: var(--green) url('assets/img/icons/check.svg') center / 2.4rem no-repeat; }
/* Submit = .btn .btn-focus */
.donation-form button[type="submit"] {
  justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 6rem; padding: 1.5rem 2rem;
  border: 1px solid var(--red); border-radius: var(--radius-s);
  background-color: var(--red); color: var(--white);
  font-family: var(--font-sans); font-size: 1.8rem; font-weight: var(--weight-semibold); line-height: var(--leading-body);
  cursor: pointer;
  transition-property: background-color, border-color, box-shadow; transition-duration: var(--duration);
}
.donation-form button[type="submit"]:hover, .donation-form button[type="submit"]:focus-visible { background-color: var(--red-light); border-color: var(--red-light); box-shadow: var(--shadow-hover); }
.donation-form > .mollie_forms_field_row:has(button[type="submit"]) { align-items: flex-start; }
@media (max-width: 478px) {
  .donation-form { grid-template-columns: minmax(0, 1fr); }
  .donation-form > .mollie_forms_field_row:has([name$="_field_0"]),
  .donation-form > .mollie_forms_field_row:has([name$="_field_1"]) { grid-column: 1 / -1; }
  .donation-form button[type="submit"] { font-size: 1.6rem; padding-inline: 1.6rem; }
}