/* ==========================================================================
   Guys That Give — site-specific styles
   --------------------------------------------------------------------------
   Client tweaks that are NOT part of the Command Centre framework. Kept in a
   separate sheet (loaded after styles.css in includes/metatags-icons-css.php)
   so a future framework upgrade — which replaces the framework files wholesale
   — only costs you re-adding the one <link>, not diffing a 100KB stylesheet.

   Every custom property below carries a literal fallback: an undefined var()
   invalidates its whole declaration silently, so the fallbacks mean a theme
   change can never blank one of these rules.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Hero impact figure — "$480,000+ Donated Locally"
   --------------------------------------------------------------------------
   Scope asked for an animated roll-up number in the hero. The value is an
   admin-editable banner field (`impact_figure`) so the client can update the
   running total themselves; assets/js/custom.js animates it on first view.
   ------------------------------------------------------------------------- */
.banner-content .impact-figure {
    margin-top: 2.4rem;
    font-family: var(--h1-family, inherit);
    font-weight: var(--h1-weight, 700);
    font-size: clamp(3.2rem, 1.6rem + 3.4vw, 6.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    /* Tabular figures stop the number jittering horizontally while it counts. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Reserve the line before the count starts, so the hero doesn't reflow. */
.banner-content .impact-figure:empty::before {
    content: "\00a0";
}


/* --------------------------------------------------------------------------
   2. Main-nav CTA — "Make a Donation"
   --------------------------------------------------------------------------
   Tick "Highlight" on the nav item in the admin (Navigation > Main) and the
   framework adds .highlight to its <li>. The framework ships no rule for that
   class, so the button treatment lives here. Uses the site's own button
   palette, so it follows whatever Button Style the theme is set to.
   ------------------------------------------------------------------------- */
.jqueryslidemenu ul li.highlight {
    margin-left: 1.6rem;
    display: flex;
    align-items: center;
}

.jqueryslidemenu ul li.highlight > a,
.jqueryslidemenu ul li.highlight:hover > a,
.jqueryslidemenu ul li.highlight.Selected > a {
  background: var(--button-bg);
  color: var(--button-color);
  border-radius: var(--button-height);
  padding: var(--button-circle-padding-right);
  height: var(--button-height);
  margin: 0;
  font-family: var(--button-font-family);
  text-transform: var(--button-text-transform);
  line-height: 1;
  text-decoration: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--animate-medium);
  gap: .8rem;
  position: relative;
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  z-index: 1;
  overflow: hidden;
  font-weight: 600;
}

.jqueryslidemenu ul li.highlight > a:hover,
.jqueryslidemenu ul li.highlight:hover > a {
  background: var(--button-bg-hover);
  color: var(--button-color-hover);
  border-color: var(--button-border-color-hover);
}
.jqueryslidemenu ul li.highlight > a::before{
  --fa: var(--button-icon);
  --fa-style: 400;
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: var(--fa-display, inline-block);
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: var(--fa-style, 900);
  text-align: center;
  text-rendering: auto;
  content: var(--fa) / "";
  color: var(--button-color);
  font-size: var(--font-size-body);
  line-height: 1;
  transition: var(--animate-medium);
  width: calc(var(--button-height) - calc(var(--button-border-width) * 4));
  height: calc(var(--button-height) - calc(var(--button-border-width) * 4));
  background: transparent;
  position: absolute;
  top: var(--button-border-width);
  right: var(--button-border-width);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: var(--animate-medium);
}
.jqueryslidemenu ul li.highlight > a:hover::before{
  color: var(--button-color-hover);
}
/* The underline sweep belongs to the text links, not to a filled button. */
.jqueryslidemenu ul li.highlight > a::after {
    display: none;
}

/* Mobile menu (mmenu) — keep it a plain list item there; a button inside the
   slide-out panel reads as a mis-sized block. */
#menu .highlight > a,
.mm-menu .highlight > a {
    background: none;
    color: inherit;
    padding: revert;
}


/* --------------------------------------------------------------------------
   3. Labelled custom fields — the meeting cards and meeting detail pages
   --------------------------------------------------------------------------
   Fields with "Show Label" on render as:
       <div class="cf-meeting_date"><span class="cf-label">Date: </span>Sept. 02, 2026</div>
   The framework styles neither the row nor the label, so both are set here.
   Generic on purpose — any labelled field on this site inherits it.
   ------------------------------------------------------------------------- */
.cf-label {
    font-weight: 600;
    color: var(--color-heading, inherit);
}

/* Meeting fields inside a card: a tight, readable detail stack under the
   title, clearly separated from the description above and button below. */
.card .content-wrapper > [class*="cf-meeting_date"],
.card .content-wrapper > [class*="cf-start_time"],
.card .content-wrapper > [class*="cf-end_time"],
.card .content-wrapper > [class*="cf-location_name"],
.card .content-wrapper > [class*="cf-location_address"],
.card .content-wrapper > [class*="cf-charity_awarded"] {
    margin: 0 0 0.4rem;
    line-height: 1.45;
}

.card .content-wrapper > [class*="cf-charity_awarded"] {
    margin-bottom: 1.6rem;
}

/* Detail page: the same fields as a meta block above the minutes. */
.cf-meeting_date,
.cf-start_time,
.cf-end_time,
.cf-location_name,
.cf-location_address,
.cf-charity_awarded,
.cf-tax_receipt_contact {
    margin: 0 0 0.4rem;
}


/* --------------------------------------------------------------------------
   4. Payment button inside a card
   --------------------------------------------------------------------------
   The trigger is <summary class="button gw-modal__trigger">, so it picks up the
   theme's .button — which is `display: inline-flex` with `height: 40px` and
   `padding: 2px 40px 0`. That top-heavy padding only looks centred BECAUSE of
   the flex centring, so never override the display here: as inline-block the
   label sits hard against the top of a 40px box.

   The theme's buttons are also sized for short labels. "Make Your Donation -
   $104.50 CAD" plus 80px of side padding is wider than a card column, so the
   trigger is allowed to wrap and grow instead of running past the card edge —
   the fixed height becomes a minimum.
   ------------------------------------------------------------------------- */
.card .gw-modal,
.card .gw-modal__trigger {
    max-width: 100%;
}

.card .gw-modal__trigger {
    height: auto;
    min-height: var(--button-height, 40px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
}

/* A card legitimately carries two triggers — "View Meeting Minutes" and "Make
   Your Donation". The modal comes FIRST in the DOM (renderEntityFeaturedFields
   emits the custom fields before featured-block appends its own button), so
   space them as peers rather than chaining off one order.
   :has() scopes this to cards that actually have a payment button, leaving
   `.card a.button { margin: 0 }` intact for every other card on the site.
   Direct children only: .gw-modal__trigger also carries .button, and a
   descendant selector would push the label down inside its own <details>. */
.card .content-wrapper:has(.gw-modal) > .gw-modal,
.card .content-wrapper:has(.gw-modal) > .button {
    margin: 1.6rem 0.8rem 0 0;
    vertical-align: top;
}

/* Detail page: the same trigger rendered outside a card, below the meeting's
   meta fields. */
.editable_content .gw-modal,
.content_container > .gw-modal {
    margin-top: 1.6rem;
}