/*
Theme Name:   EF Advocates
Theme URI:    https://www.efadvocates.com/
Description:  Child theme for EF Advocates. Carries the site design system, the custom header and footer, and the structured data for every page. Built on Twenty Twenty-Five.
Author:       EF Advocates
Template:     twentytwentyfive
Version:      1.4.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain:  efadvocates
*/

/* The design system lives in assets/site.css and is enqueued from functions.php.
   Put one-off overrides below this line so they are easy to find later. */

/* -------------------------------------------------------------------------
   Fluent Forms, restyled to match the rest of the site.
   Fluent Forms ships its own stylesheet; these rules override it so the
   contact form looks like it was designed with the page rather than dropped in.
   ---------------------------------------------------------------------- */

.fluentform .ff-el-group { margin-bottom: 15px; }

.fluentform .ff-el-input--label label {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

/* Fluent Forms marks required fields with a red asterisk. The rest of the site
   spells it out in small marigold caps, so match that instead. */
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before {
  content: "Required";
  display: inline-block;
  margin-left: 8px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--marigold);
  vertical-align: 1px;
}

.fluentform .ff-el-input--content input[type="text"],
.fluentform .ff-el-input--content input[type="email"],
.fluentform .ff-el-input--content select,
.fluentform .ff-el-input--content textarea {
  padding: 13px 14px;
  border: 1px solid var(--rule-2);
  border-radius: 5px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  width: 100%;
}

.fluentform .ff-el-input--content textarea { min-height: 130px; resize: vertical; }

.fluentform .ff-el-input--content input:focus,
.fluentform .ff-el-input--content textarea:focus,
.fluentform .ff-el-input--content select:focus {
  outline: 2px solid var(--green-deep);
  outline-offset: 1px;
  border-color: var(--green-deep);
}

.fluentform .ff-el-help-message {
  font-weight: 400;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: 4px;
}

.fluentform .ff-btn-submit,
.fluentform .ff-btn-submit:hover {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  padding: 14px 26px;
  border: 0;
  border-radius: 6px;
  background: var(--green-deep);
  color: #fff;
  cursor: pointer;
  min-height: 48px;
}

.fluentform .ff-btn-submit:hover { filter: brightness(1.1); }

.fluentform .ff-message-success {
  padding: 18px 20px;
  border-left: 3px solid var(--green-deep);
  background: var(--green-pale);
  font-size: 16px;
}

/* Help text sits under the input, always visible. Kelly's prompts are the point
   of the form, so they must not be hidden behind a tooltip. */
.fluentform .ff-el-tooltip { display: none; }

.fluentform .ff-el-input--label label { display: inline-block; }

/* -------------------------------------------------------------------------
   Kelly's portrait on the About page. Sized to the slot it replaced, so it
   sits alongside the credentials card rather than dominating the page.
   ---------------------------------------------------------------------- */

.portrait {
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--rule-2);
  box-shadow: var(--shadow-sm);
}