/* =========================================================
   FAIR FUTURE FOUNDATION
   FROM THE FIELD NOW — V2

   Compact dynamic context for selected informational pages.

   Sources:
   - existing FFF Field Feed
   - existing Field Notes V5

   One component. No carousel. No decorative complexity.
   ========================================================= */

.fff-page-live-context,
.fff-page-live-context * {
  box-sizing: border-box;
}


.fff-page-live-context {
  --fff-live-blue: var(--fff-brand-blue);
  --fff-live-red: var(--fff-navigation-red);
  --fff-live-ink: #20262d;
  --fff-live-muted: #69727d;
  --fff-live-border: #dce3e9;
  --fff-live-bg: #f7f9fb;
  --fff-live-surface: #ffffff;

  width: 100%;

  margin: 0 0 1.35rem;
  padding: 14px;

  background:
    var(--fff-live-bg);

  border:
    1px solid
    var(--fff-live-border);

  border-top:
    4px solid
    var(--fff-live-blue);

  border-radius:
    var(--fff-radius-control);
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.fff-page-live-context__header {
  margin-bottom:
    13px;
}


.fff-page-live-context__eyebrow {
  display: block;

  margin:
    0
    0
    4px;

  color:
    var(--fff-live-blue);

  font-family:
    var(--fff-font-navigation);

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.fff-page-live-context__heading {
  margin:
    0
    0
    5px !important;

  padding:
    0 !important;

  color:
    var(--fff-live-ink) !important;

  font-family:
    var(--fff-font-heading) !important;

  font-size:
    18px !important;

  font-weight:
    650 !important;

  line-height:
    1.22 !important;
}


.fff-page-live-context__intro {
  margin:
    0 !important;

  color:
    var(--fff-live-muted);

  font-family:
    var(--fff-font-body);

  font-size:
    12px;

  line-height:
    1.45;
}


.fff-page-live-context__freshness {
  margin:
    6px
    0
    0 !important;

  color:
    #7b848e;

  font-family:
    var(--fff-font-body);

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.3;
}


/* ---------------------------------------------------------
   Recent posts
   --------------------------------------------------------- */

.fff-page-live-context__items {
  margin: 0;
  padding: 0;
}


.fff-page-live-context__item {
  margin: 0;
  padding: 0;
}


.fff-page-live-context__item--compact {
  margin-top:
    12px;

  padding-top:
    12px;

  border-top:
    1px solid
    var(--fff-live-border);
}


.fff-page-live-context__image {
  display: block;

  overflow: hidden;

  width: 100%;

  margin-bottom:
    10px;

  border-radius:
    var(--fff-radius-control);

  background:
    #e9edf1;

  line-height:
    0;
}


.fff-page-live-context__image img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio:
    16 / 9;

  object-fit:
    cover;
}


.fff-page-live-context__meta {
  margin:
    0
    0
    4px;

  color:
    var(--fff-live-muted);

  font-family:
    var(--fff-font-body);

  font-size:
    10.5px;

  font-weight:
    500;

  line-height:
    1.35;
}


.fff-page-live-context__title {
  margin:
    0
    0
    5px !important;

  padding:
    0 !important;

  font-family:
    var(--fff-font-heading) !important;

  font-size:
    13.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.35 !important;
}


.fff-page-live-context__title a {
  color:
    var(--fff-live-ink) !important;

  text-decoration:
    none !important;
}


.fff-page-live-context__excerpt {
  margin:
    0 !important;

  color:
    #505963;

  font-family:
    var(--fff-font-body);

  font-size:
    11.5px;

  line-height:
    1.5;
}


/* ---------------------------------------------------------
   Latest Field Note
   --------------------------------------------------------- */

.fff-page-live-context__note {
  margin-top:
    16px;

  padding:
    12px;

  background:
    var(--fff-live-surface);

  border:
    1px solid
    var(--fff-live-border);

  border-left:
    3px solid
    var(--fff-live-blue);

  border-radius:
    var(--fff-radius-control);
}


.fff-page-live-context__note-head {
  display: flex;

  align-items: baseline;
  justify-content: space-between;

  gap: 8px;

  margin-bottom:
    7px;
}


.fff-page-live-context__note-label {
  color:
    var(--fff-live-blue);

  font-family:
    var(--fff-font-navigation);

  font-size:
    9.5px;

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.fff-page-live-context__note-date {
  color:
    #7b848e;

  font-family:
    var(--fff-font-body);

  font-size:
    9.5px;

  line-height:
    1.25;

  white-space:
    nowrap;
}


.fff-page-live-context__note-title {
  margin:
    0
    0
    5px !important;

  padding:
    0 !important;

  font-family:
    var(--fff-font-heading) !important;

  font-size:
    13px !important;

  font-weight:
    650 !important;

  line-height:
    1.35 !important;
}


.fff-page-live-context__note-title a {
  color:
    var(--fff-live-ink) !important;

  text-decoration:
    none !important;
}


.fff-page-live-context__note-type {
  margin:
    0
    0
    6px;

  color:
    var(--fff-live-blue);

  font-family:
    var(--fff-font-body);

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.3;
}


.fff-page-live-context__note-summary {
  margin:
    0
    0
    8px !important;

  color:
    #505963;

  font-family:
    var(--fff-font-body);

  font-size:
    11px;

  line-height:
    1.5;
}


.fff-page-live-context__note-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  color:
    var(--fff-live-blue) !important;

  font-family:
    var(--fff-font-action);

  font-size:
    10.5px;

  font-weight:
    650;

  line-height:
    1.3;

  text-decoration:
    none !important;
}


/* ---------------------------------------------------------
   Ask from the Field
   --------------------------------------------------------- */

.fff-page-live-context__ask {
  margin-top:
    16px;

  padding-top:
    14px;

  border-top:
    1px solid
    var(--fff-live-border);
}


.fff-page-live-context__ask-label {
  display:
    block;

  margin:
    0
    0
    5px;

  color:
    var(--fff-live-blue);

  font-family:
    var(--fff-font-navigation);

  font-size:
    9.5px;

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.fff-page-live-context__ask-heading {
  margin:
    0
    0
    5px !important;

  padding:
    0 !important;

  color:
    var(--fff-live-ink) !important;

  font-family:
    var(--fff-font-heading) !important;

  font-size:
    13.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.35 !important;
}


.fff-page-live-context__ask-intro {
  margin:
    0
    0
    11px !important;

  color:
    #505963;

  font-family:
    var(--fff-font-body);

  font-size:
    11px;

  line-height:
    1.5;
}


/* WPForms compact sidebar presentation */

.fff-page-live-context__form
.wpforms-container {
  margin:
    0 !important;
}


.fff-page-live-context__form
.wpforms-field {
  padding:
    0
    0
    9px !important;
}


.fff-page-live-context__form
.wpforms-field-label {
  margin:
    0
    0
    4px !important;

  color:
    var(--fff-live-ink) !important;

  font-family:
    var(--fff-font-body) !important;

  font-size:
    10.5px !important;

  font-weight:
    600 !important;

  line-height:
    1.3 !important;
}


.fff-page-live-context__form
.wpforms-field-description {
  display:
    none !important;
}

.fff-page-live-context__form
input[type="text"],

.fff-page-live-context__form
input[type="email"],

.fff-page-live-context__form
textarea {
  width:
    100% !important;

  max-width:
    100% !important;

  padding:
    8px
    9px !important;

  color:
    var(--fff-live-ink) !important;

  background:
    #ffffff !important;

  border:
    1px solid
    #cfd7de !important;

  border-radius:
    var(--fff-radius-control) !important;

  box-shadow:
    none !important;

  font-family:
    var(--fff-font-body) !important;

  font-size:
    12px !important;

  line-height:
    1.4 !important;
}


.fff-page-live-context__form
textarea {
  min-height:
    92px !important;

  resize:
    vertical;
}


.fff-page-live-context__form
input[type="text"]:focus,

.fff-page-live-context__form
input[type="email"]:focus,

.fff-page-live-context__form
textarea:focus {
  border-color:
    var(--fff-live-blue) !important;

  outline:
    2px solid
    rgba(66, 103, 178, 0.12) !important;

  outline-offset:
    1px;
}


.fff-page-live-context__form
.fff-field-question-consent {
  padding-bottom:
    8px !important;
}


.fff-page-live-context__form
.fff-field-question-consent
.wpforms-field-label {
  font-size:
    10px !important;
}


.fff-page-live-context__form
.fff-field-question-consent
ul {
  margin:
    0 !important;

  padding:
    0 !important;
}


.fff-page-live-context__form
.fff-field-question-consent
li {
  margin:
    0 !important;

  padding:
    0 !important;
}


.fff-page-live-context__form
.fff-field-question-consent
label {
  color:
    #626b74 !important;

  font-family:
    var(--fff-font-body) !important;

  font-size:
    10.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.45 !important;
}


.fff-page-live-context__form
.wpforms-submit-container {
  margin:
    2px
    0
    0 !important;

  padding:
    0 !important;
}


.fff-page-live-context__form
button.wpforms-submit {
  width:
    100% !important;

  min-height:
    39px !important;

  margin:
    0 !important;

  padding:
    9px
    11px !important;

  color:
    #ffffff !important;

  background:
    var(--fff-live-blue) !important;

  border:
    1px solid
    var(--fff-live-blue) !important;

  border-radius:
    var(--fff-radius-control) !important;

  box-shadow:
    none !important;

  font-family:
    var(--fff-font-action) !important;

  font-size:
    11.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.2 !important;
}


@media (hover:hover) and (pointer:fine) {

  .fff-page-live-context__form
  button.wpforms-submit:hover {
    background:
      #365895 !important;

    border-color:
      #365895 !important;
  }

}


.fff-page-live-context__form
.wpforms-error {
  color:
    #9b241a !important;

  font-family:
    var(--fff-font-body) !important;

  font-size:
    9.5px !important;

  line-height:
    1.35 !important;
}


.fff-page-live-context__form
.wpforms-confirmation-container-full {
  margin:
    0 !important;

  padding:
    10px !important;

  color:
    var(--fff-live-ink) !important;

  background:
    #ffffff !important;

  border:
    1px solid
    var(--fff-live-border) !important;

  border-left:
    3px solid
    var(--fff-live-blue) !important;

  border-radius:
    var(--fff-radius-control) !important;

  font-family:
    var(--fff-font-body) !important;

  font-size:
    11px !important;

  line-height:
    1.5 !important;
}

/* ---------------------------------------------------------
   Actions
   --------------------------------------------------------- */

.fff-page-live-context__actions {
  display: grid;

  gap:
    7px;

  margin-top:
    14px;

  padding-top:
    12px;

  border-top:
    1px solid
    var(--fff-live-border);
}


.fff-page-live-context__action {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap:
    8px;

  min-height:
    36px;

  padding:
    8px
    10px;

  border-radius:
    var(--fff-radius-control);

  font-family:
    var(--fff-font-action);

  font-size:
    11.5px;

  font-weight:
    650;

  line-height:
    1.2;

  text-decoration:
    none !important;
}


.fff-page-live-context__action--updates {
  color:
    var(--fff-live-blue) !important;

  background:
    #ffffff;

  border:
    1px solid
    #cfd8e3;
}



.fff-page-live-context__action--donate {
  color:
    #ffffff !important;

  background:
    var(--fff-live-red);

  border:
    1px solid
    var(--fff-live-red);
}


/* ---------------------------------------------------------
   Interaction
   --------------------------------------------------------- */

@media (hover:hover) and (pointer:fine) {

  .fff-page-live-context__title a:hover,
  .fff-page-live-context__note-title a:hover,
  .fff-page-live-context__note-link:hover {
    color:
      var(--fff-live-blue) !important;
  }


  .fff-page-live-context__action--updates:hover {
    border-color:
      var(--fff-live-blue);

    background:
      #f1f5fb;
  }


  .fff-page-live-context__action--donate:hover {
    background:
      #8f2117;

    border-color:
      #8f2117;
  }

}


.fff-page-live-context a:focus-visible {
  outline:
    2px solid
    var(--fff-live-blue);

  outline-offset:
    3px;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

  /*
   * FFF V3.1 MOBILE CONTENT
   *
   * Desktop keeps all three stories.
   * Mobile keeps the lead + one compact story.
   * Field Note, form and actions remain complete.
   */

  .fff-page-live-context__items
  > .fff-page-live-context__item:nth-child(3) {
    display:
      none;
  }


  .fff-page-live-context__item--lead
  .fff-page-live-context__excerpt {
    display:
      none;
  }


  .fff-page-live-context {
    padding:
      13px;
  }


  .fff-page-live-context__heading {
    font-size:
      17px !important;
  }


  .fff-page-live-context__title {
    font-size:
      13px !important;
  }


  .fff-page-live-context__note-head {
    display:
      block;
  }


  .fff-page-live-context__note-date {
    display:
      block;

    margin-top:
      3px;
  }

}


/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .fff-page-live-context *,
  .fff-page-live-context *::before,
  .fff-page-live-context *::after {
    scroll-behavior:
      auto !important;

    transition:
      none !important;
  }

}


/* ============================================================
   FFF PAGE LIVE CONTEXT - COMPACT SIDEBAR
   Archive / resource pages, 1/4 Divi column.
   ============================================================ */

.fff-page-live-context--compact {
    margin: 0;
    padding: 14px 14px 12px;

    background: #f7f9fc;

    border: 1px solid #dce5ef;
    border-top: 3px solid var(--fff-brand-blue);
    border-radius: var(--fff-radius-control);

    box-shadow:
        0 2px 8px rgba(17, 24, 39, 0.05);
}

.fff-page-live-context--compact
.fff-page-live-context__header {
    margin: 0 0 10px;
    padding: 0;

    background: transparent;
    border: 0;
}

.fff-page-live-context--compact
.fff-page-live-context__eyebrow {
    margin: 0 0 2px;

    color: var(--fff-brand-blue);

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.fff-page-live-context--compact
.fff-page-live-context__heading {
    margin: 0;

    color: #111111;

    font-family: var(--fff-font-heading);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.25;
}

.fff-page-live-context--compact
.fff-page-live-context__note {
    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.fff-page-live-context--compact
.fff-page-live-context__note-head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 7px;

    margin: 0 0 5px;

    color: #687386;

    font-size: 0.66rem;
    line-height: 1.3;
}

.fff-page-live-context--compact
.fff-page-live-context__note-type {
    color: var(--fff-brand-blue);
    font-weight: 600;
}

.fff-page-live-context--compact
.fff-page-live-context__note-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    margin: 0 0 5px;

    color: #111111;

    font-family: var(--fff-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.fff-page-live-context--compact
.fff-page-live-context__note-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    margin: 0 0 7px;

    color: #536072;

    font-size: 0.75rem;
    line-height: 1.45;
}

.fff-page-live-context--compact
.fff-page-live-context__note-link,
.fff-page-live-context--compact
.fff-page-live-context__ask-link {
    color: #315cad;

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.fff-page-live-context--compact
.fff-page-live-context__note-link:hover,
.fff-page-live-context--compact
.fff-page-live-context__ask-link:hover {
    text-decoration: underline;
}

.fff-page-live-context--compact
.fff-page-live-context__note-link:focus-visible,
.fff-page-live-context--compact
.fff-page-live-context__ask-link:focus-visible {
    outline: 3px solid var(--fff-brand-blue);
    outline-offset: 2px;
}

.fff-page-live-context--compact
.fff-page-live-context__ask {
    margin: 10px 0 0;
    padding: 9px 0 0;

    background: transparent;
    border: 0;
    border-top: 1px solid #dce5ef;
    border-radius: 0;
}

.fff-page-live-context--compact
.fff-page-live-context__ask-label {
    margin: 0 0 2px;

    color: #687386;

    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}



/* ============================================================
   FFF COMPACT SIDEBAR SEARCH AND ACTIONS
   ============================================================ */

.fff-page-live-context--compact
.fff-page-live-context__compact-search {
    margin: 0 0 16px;
    padding: 0 0 14px;

    border-bottom: 1px solid #dce5ef;
}

.fff-page-live-context--compact
.fff-page-live-context__compact-search-label {
    margin: 0 0 7px;

    color: #687386;

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fff-page-live-context--compact
.fff-page-live-context__compact-search form {
    margin: 0 !important;
}

.fff-page-live-context--compact
.fff-page-live-context__compact-search p {
    margin-bottom: 0 !important;
}

.fff-page-live-context--compact
.fff-page-live-context__header {
    margin-top: 0;
    margin-bottom: 12px;
}

.fff-page-live-context--compact
.fff-page-live-context__ask {
    margin-top: 13px;
    padding-top: 11px;
}

.fff-page-live-context--compact
.fff-page-live-context__compact-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 8px;

    margin: 13px 0 0;
    padding: 12px 0 0;

    border-top: 1px solid #dce5ef;
}

.fff-page-live-context--compact
.fff-page-live-context__compact-action {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 8px 9px;

    border: 0;
    border-radius: var(--fff-radius-control);

    font-family: var(--fff-font-action);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;

    transition:
        background-color 0.18s ease,
        opacity 0.18s ease;
}

.fff-page-live-context--compact
.fff-page-live-context__compact-action--youtube {
    background: #454749;
    color: #ffffff !important;
}

.fff-page-live-context--compact
.fff-page-live-context__compact-action--youtube:hover {
    background: #303234;
    color: #ffffff !important;
}

.fff-page-live-context--compact
.fff-page-live-context__compact-action--donate {
    background: var(--fff-brand-red);
    color: #ffffff !important;
}

.fff-page-live-context--compact
.fff-page-live-context__compact-action--donate:hover {
    background: #8f190e;
    color: #ffffff !important;
}

.fff-page-live-context--compact
.fff-page-live-context__compact-action:focus-visible {
    outline: 3px solid var(--fff-brand-blue);
    outline-offset: 2px;
}



/* ============================================================
   FFF COMPACT SIDEBAR - YOUR VOICE MATTERS
   ============================================================ */

.fff-page-live-context--compact
.fff-page-live-context__voice {
    margin: 12px 0 0;
    padding: 11px 0 0;

    border-top: 1px solid #dce5ef;
}

.fff-page-live-context--compact
.fff-page-live-context__voice-label {
    margin: 0 0 3px;

    color: #687386;

    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.fff-page-live-context--compact
.fff-page-live-context__voice-text {
    margin: 0 0 4px;

    color: #536072;

    font-size: 0.72rem;
    line-height: 1.4;
}

.fff-page-live-context--compact
.fff-page-live-context__voice-link {
    color: #315cad;

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.fff-page-live-context--compact
.fff-page-live-context__voice-link:hover {
    text-decoration: underline;
}

.fff-page-live-context--compact
.fff-page-live-context__voice-link:focus-visible {
    outline: 3px solid var(--fff-brand-blue);
    outline-offset: 2px;
}

.fff-page-live-context--compact
.fff-page-live-context__compact-actions {
    margin-top: 12px;
}



/* ============================================================
   FFF PAGE LIVE CONTEXT - FIELD GALLERIES LINK
   ============================================================ */

.fff-page-live-context__galleries {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #dce5ef;
}

.fff-page-live-context__galleries-label {
    margin: 0 0 3px;
    color: #687386;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.fff-page-live-context__galleries-link {
    color: #315cad;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.fff-page-live-context__galleries-link:hover {
    text-decoration: underline;
}

.fff-page-live-context__galleries-link:focus-visible {
    outline: 3px solid var(--fff-brand-blue);
    outline-offset: 2px;
}