/* =============================================================================
   BUTTONS — one place for every button on the site
   -----------------------------------------------------------------------------
   These are the DEFAULT values. To change them without touching code, copy the
   setting you want into  Website Settings > Extra Options > Extra CSS  inside
   a  :root { ... }  block, e.g.   :root { --btn-radius: 8px; }
   (Extra CSS is printed after this file, so its values win.)

   Used by:
   - CKEditor "Object Styles": Button, Button Secondary, Button Filled,
     Button Link, Button Text  (uk-button-default / -secondary / -primary / -link / -text)
   - Header button (Header 1 "Appointment" button; Headers 2–3 use "Button Filled")
   - Footer newsletter button (Footer 1 and Footer 3)
   ============================================================================= */

:root {
  /* ---- All buttons ---- */
  --btn-radius: 0px;              /* 0px = rectangular, 6px = soft corners, 50px = pill */
  --btn-height: 48px;
  --btn-padding: 0 26px;
  --btn-font-size: 15px;
  --btn-font-weight: 600;
  --btn-text-transform: none;     /* none | uppercase | capitalize */
  --btn-letter-spacing: 0.3px;

  /* ---- "Button" ---- */
  --btn-default-bg: #f8f9fa;
  --btn-default-text: #333333;
  --btn-default-border: #cccccc;
  --btn-default-hover-bg: #e9ecef;
  --btn-default-hover-text: #333333;

  /* ---- "Button Secondary" ---- */
  --btn-secondary-bg: #1f2937;
  --btn-secondary-text: #ffffff;
  --btn-secondary-border: #1f2937;
  --btn-secondary-hover-bg: #111827;
  --btn-secondary-hover-text: #ffffff;

  /* ---- "Button Filled" (also the header button in Headers 2–3) ---- */
  --btn-filled-bg: #234082;
  --btn-filled-text: #ffffff;
  --btn-filled-border: #234082;
  --btn-filled-hover-bg: #172c5a;
  --btn-filled-hover-text: #ffffff;

  /* ---- "Button Link" ---- */
  --btn-link-text: #234082;
  --btn-link-hover-text: #172c5a;

  /* ---- "Button Text" (text with a line underneath) ---- */
  --btn-text-color: #333333;
  --btn-text-line: #333333;

  /* ---- Header button (Header 1) ---- */
  --header-btn-bg: #ffffff;
  --header-btn-text: #151313;
  --header-btn-hover-bg: #f0f0f0;
  --header-btn-hover-text: #151313;
  --header-btn-radius: var(--btn-radius);
  --header-btn-icon-bg: #151313;       /* small arrow box inside the button */
  --header-btn-icon-color: #ffffff;
  --header-btn-icon-radius: var(--header-btn-radius);
  /* When the header is sticky (scrolled) it uses the "Sticky Header Text Color"
     from Website Settings. To override, set:
     --header-btn-sticky-bg / --header-btn-sticky-text */

  /* ---- Footer newsletter button ---- */
  /* Background defaults to the footer's own button color; to override set --newsletter-btn-bg */
  --newsletter-btn-text: #ffffff;
  --newsletter-btn-radius: var(--btn-radius);

  /* ---- Form Builder forms (Contact form, footer signup, any custom form) ---- */
  --form-btn-bg: var(--btn-filled-bg);
  --form-btn-text: var(--btn-filled-text);
  --form-btn-hover-bg: var(--btn-filled-hover-bg);
  --form-btn-hover-text: var(--btn-filled-hover-text);
  --form-btn-radius: var(--btn-radius);
}

/* =============================================================================
   CKEditor buttons
   ============================================================================= */
.uk-button, a.uk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: var(--btn-height);
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-transform: var(--btn-text-transform);
  letter-spacing: var(--btn-letter-spacing);
  line-height: 1.3;
  border-radius: var(--btn-radius);
}

/* Button */
.uk-button-default, a.uk-button-default {
  background-color: var(--btn-default-bg);
  color: var(--btn-default-text) !important;
  border: 1px solid var(--btn-default-border);
}
.uk-button-default:hover, a.uk-button-default:hover {
  background-color: var(--btn-default-hover-bg);
  color: var(--btn-default-hover-text) !important;
  border-color: var(--btn-default-border);
}

/* Button Secondary */
.uk-button-secondary, a.uk-button-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text) !important;
  border: 1px solid var(--btn-secondary-border);
  line-height: 3;
}
.uk-button-secondary:hover, a.uk-button-secondary:hover {
  background-color: var(--btn-secondary-hover-bg);
  color: var(--btn-secondary-hover-text) !important;
  border-color: var(--btn-secondary-hover-bg) !important;
}

/* Button Filled */
.uk-button-primary, a.uk-button-primary {
  background-color: var(--btn-filled-bg);
  color: var(--btn-filled-text) !important;
  border: 1px solid var(--btn-filled-border);
}
.uk-button-primary:hover, a.uk-button-primary:hover {
  background-color: var(--btn-filled-hover-bg);
  color: var(--btn-filled-hover-text) !important;
  border-color: var(--btn-filled-hover-bg);
}

/* Button Link */
.uk-button-link, a.uk-button-link {
  background-color: transparent;
  color: var(--btn-link-text) !important;
  border: none;
  text-decoration: underline !important;
}
.uk-button-link:hover, a.uk-button-link:hover {
  color: var(--btn-link-hover-text) !important;
}

/* Button Text */
.uk-button-text, a.uk-button-text {
  background-color: transparent;
  color: var(--btn-text-color) !important;
  border: none;
  border-bottom: 2px solid var(--btn-text-line);
  border-radius: 0;
}

/* =============================================================================
   Form Builder submit buttons (Contact form, footer "Join our mailing list", custom forms)
   Forms are shown in an iframe; form-builder.php loads this file + the Extra CSS settings.
   More specific than FormBuilderFrameworkUikit3.css, which hard-codes a blue 15px button.
   ============================================================================= */
.FormBuilder .InputfieldSubmit button,
.FormBuilder .InputfieldSubmit input[type=submit] {
  background-color: var(--form-btn-bg);
  color: var(--form-btn-text) !important;
  border: 1px solid var(--form-btn-bg);
  border-radius: var(--form-btn-radius);
  min-height: var(--btn-height);
  padding: var(--btn-padding);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-transform: var(--btn-text-transform);
  letter-spacing: var(--btn-letter-spacing);
  transition: background-color .2s ease, color .2s ease;
}
.FormBuilder .InputfieldSubmit button:hover,
.FormBuilder .InputfieldSubmit input[type=submit]:hover {
  background-color: var(--form-btn-hover-bg);
  border-color: var(--form-btn-hover-bg);
  color: var(--form-btn-hover-text) !important;
}

/* The footer "Join our mailing list" form (Form Builder form "signup") follows the
   FOOTER newsletter settings (--newsletter-btn-*); other forms use --form-btn-*. */
.fb-form-signup .FormBuilder .InputfieldSubmit button,
.fb-form-signup .FormBuilder .InputfieldSubmit input[type=submit] {
  background-color: var(--newsletter-btn-bg, var(--form-btn-bg));
  border-color: var(--newsletter-btn-bg, var(--form-btn-bg));
  color: var(--newsletter-btn-text, var(--form-btn-text)) !important;
  border-radius: var(--newsletter-btn-radius, var(--form-btn-radius));
}
.fb-form-signup .FormBuilder .InputfieldSubmit button:hover,
.fb-form-signup .FormBuilder .InputfieldSubmit input[type=submit]:hover {
  background-color: var(--newsletter-btn-hover-bg, var(--form-btn-hover-bg));
  border-color: var(--newsletter-btn-hover-bg, var(--form-btn-hover-bg));
}

/* Hand-coded forms in the "Forms" section (contact / meeting forms: .custom-btn,
   uk-button submit buttons) follow the same FORM settings. The footer newsletter
   button (.nd-newsletter__btn) keeps its own --newsletter-btn-* settings. */
form button.uk-button[type=submit]:not(.nd-newsletter__btn),
form button.custom-btn[type=submit] {
  background-color: var(--form-btn-bg);
  border: 1px solid var(--form-btn-bg);
  color: var(--form-btn-text) !important;
  border-radius: var(--form-btn-radius);
}
form button.uk-button[type=submit]:not(.nd-newsletter__btn):hover,
form button.custom-btn[type=submit]:hover {
  background-color: var(--form-btn-hover-bg);
  border-color: var(--form-btn-hover-bg);
  color: var(--form-btn-hover-text) !important;
}