/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Template: hello-elementor
Author: Elementor Team
Description: Child theme for Kent Homelessness Coalition.
Version: 1.0
*/

/* ============================================================
   KHC — CUSTOM CSS

   Companion to Elementor's Global Colors, Global Fonts, and
   Theme Style panels. Only covers what those can't do.

   CONTENTS
     1.  Tokens
     2.  Utilities
     3.  Text treatments
     4.  Image ratios
     5.  Grid texture
     6.  Reveal animations
     7.  Image lockups — grid variant
     8.  Image lockups — stacked variant
     9.  Image lockups — hero variant
     10. Icon list nav
     11. Search & Filter Pro
     12. Gravity Forms
     13. GTranslate

   CLASS REFERENCE
     .khc-highlight / -white     Highlight behind headline text
     .khc-emdash                 Teal separator character
     .khc-anchor                 Offsets jump targets below sticky nav
     .khc-acc-sub                Accordion subtext line
     .forced-ratio               6:4 crop on any image widget
     .khc-grid-tex / -light      Grid texture background
     .fade-in                    Fades children in on scroll
     .khc-lockup-watch           Parent the scroll script watches
     .khc-lockup-armed           Script adds on load, applies mask
     .in-view                    Script adds on scroll, releases mask
     .khc-lockup-slot-1 / -2     Grid lockup photos
     .khc-lockup-anim-top        Grid lockup wipes downward
     .khc-lockup-anim-bottom     Grid lockup wipes upward
     .khc-lockup-stack           Stacked lockup container
     .khc-lockup-stack-1 / -2    Stacked lockup photos
     .khc-hero-lockup            Hero lockup container
     .khc-lockup-primary         Hero photo, 3:2
     .khc-lockup-secondary       Hero photo, 1:1
     .khc-lockup-stat            Hero stat callout
     .khc-lockup-block           Hero background block
     .khc-nav-underline / -dark  Hover underline on Icon List

   Requires KHC_Elementor_Lockup_Scroll.js in the footer for any
   lockup or fade-in. The Custom CSS panel will not run JS.

   !important appears where Elementor emits per-element CSS scoped
   to a unique ID class, which outranks a plain class selector.
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  --khc-ink: #211F20;
  --khc-ink-soft: #2F2D2D;
  --khc-line: #2F2D2D40;   /* ink-soft at 25% */
  --khc-muted: #2F2D2D80;  /* ink-soft at 50% */
  --khc-white: #FFFFFF;
  --khc-off-white: #F1F2F3;
  --khc-yellow: #F4F492;
  --khc-teal-deep: #70B0C2;
  --khc-teal: #95CAD8;
  --khc-teal-light: #ACDBDC;
  --khc-green: #B9D6A1;
  --khc-green-light: #CBE39F;

  --khc-ease: cubic-bezier(.16, .8, .24, 1);
  --khc-reveal: .9s;
}


/* ============================================================
   2. UTILITIES
   ============================================================ */

/* Underline links inside Text Editor widgets */
.elementor-widget-text-editor a {
  text-decoration: underline !important;
}

/* Trailing paragraph margin reads as stray padding */
.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor > .elementor-widget-container > :last-child {
  margin-bottom: 0;
}

/* Remove border left of menu sub items */
.elementor-sub-item {
  border: none !important;
}

/* Keeps jump targets clear of the sticky nav */
.khc-anchor {
  scroll-margin-top: 100px;
}

/* Adds 15px margin to bottom of bulleted lists in text editor and post content widgets */
.elementor-widget-text-editor :is(ul, ol),
.elementor-widget-theme-post-content :is(ul, ol) {
  margin-bottom: 15px;
}


/* ============================================================
   3. TEXT TREATMENTS
   ============================================================ */

.khc-highlight,
.khc-highlight-white {
  color: var(--khc-ink);
  padding: 2px 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.khc-highlight { background: var(--khc-yellow); }
.khc-highlight-white { background: var(--khc-white); }

.khc-emdash {
  font-weight: bold;
  color: var(--khc-teal);
}

/* Accordion subtext */
.khc-acc-sub {
  display: block;
  font-size: .8125rem;
  line-height: 1.55;
  margin-top: 3px;
  opacity: .75;
}


/* ============================================================
   4. IMAGE RATIOS
   ============================================================ */

.forced-ratio img {
  aspect-ratio: 6 / 4;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}


/* ============================================================
   5. GRID TEXTURE
   Drawn on ::after because Elementor's Overlay uses ::before.
   A partial tile at the edge is expected.
   ============================================================ */

.khc-grid-tex {
  position: relative !important;
  overflow: hidden !important;
}

.khc-grid-tex::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--khc-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--khc-ink) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: .08;
}

/* White lines over ink backgrounds */
.khc-grid-tex.khc-grid-tex-light::after {
  background-image:
    linear-gradient(var(--khc-white) 1px, transparent 1px),
    linear-gradient(90deg, var(--khc-white) 1px, transparent 1px);
  opacity: .12;
}

/* Lifts content above the texture layer */
.khc-grid-tex > .e-con-inner {
  position: relative;
  z-index: 1;
}


/* ============================================================
   6. REVEAL ANIMATIONS
   ============================================================ */

.fade-in > * {
  opacity: 0;
}
.fade-in.in-view > * {
  animation: khcFadeIn 2s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes khcFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in > *,
  .fade-in.in-view > * {
    opacity: 1;
    animation: none;
  }
}

/* Always visible in the editor */
.elementor-editor-active .fade-in > *,
.elementor-editor-preview .fade-in > * {
  opacity: 1 !important;
  animation: none !important;
}


/* ============================================================
   7. IMAGE LOCKUP — GRID VARIANT
   Two photos offset on a six-column grid, both cropped 6:4.
   Photos are visible by default; the script adds
   khc-lockup-armed to mask them, then in-view to release.

   Build
   1. Image column > Container. Layout: Grid,
      repeat(6, 1fr), both gaps 0.
   2. Background image: khc-grid-tile.svg, repeat,
      top left, 40px.
   3. Two Image widgets. Grid Column Start/End:
      photo 1 = 1 to 5, photo 2 = 3 to 7. Swap to mirror.
   4. Widget classes: khc-lockup-slot-1, khc-lockup-slot-2
   5. Container classes: khc-lockup-watch, plus
      khc-lockup-anim-top or -bottom to change direction.
   ============================================================ */

[class*="khc-lockup-slot"] {
  position: relative;
  overflow: hidden;
  aspect-ratio: 6 / 4;
  transition: clip-path var(--khc-reveal) var(--khc-ease) !important;
}

[class*="khc-lockup-slot"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Default: photos uncover left and right, opposing */
.khc-lockup-armed .khc-lockup-slot-1 { clip-path: inset(0 100% 0 0); }
.khc-lockup-armed .khc-lockup-slot-2 { clip-path: inset(0 0 0 100%); }

/* Both wipe downward */
.khc-lockup-armed.khc-lockup-anim-top .khc-lockup-slot-1,
.khc-lockup-armed.khc-lockup-anim-top .khc-lockup-slot-2 {
  clip-path: inset(100% 0 0 0);
}

/* Both wipe upward */
.khc-lockup-armed.khc-lockup-anim-bottom .khc-lockup-slot-1,
.khc-lockup-armed.khc-lockup-anim-bottom .khc-lockup-slot-2 {
  clip-path: inset(0 0 100% 0);
}

/* Second photo always trails the first */
.khc-lockup-armed .khc-lockup-slot-2 {
  transition-delay: .18s !important;
}

/* Revealed */
.khc-lockup-armed.in-view .khc-lockup-slot-1,
.khc-lockup-armed.in-view .khc-lockup-slot-2 {
  clip-path: inset(0 0 0 0);
}


/* ============================================================
   8. IMAGE LOCKUP — STACKED VARIANT
   First photo left-aligned 6:4, second right-aligned square,
   pulled up to overlap. Inner edges meet on the same vertical
   line. The overlap is a negative top margin on the second
   photo, which resolves against container width, so it scales
   with the viewport rather than locking to a pixel amount.

   Build
   1. Container. Classes: khc-lockup-stack khc-lockup-watch
   2. Two Image widgets inside.
   3. Classes: khc-lockup-stack-1, khc-lockup-stack-2

   Sizing lives here, not in the panel. Clear Width, Max Width,
   Height, Min Height, and Margin on both Image widgets at
   every breakpoint or Elementor's per-element CSS wins.
   ============================================================ */

.khc-lockup-stack {
  display: flex;
  flex-direction: column;
}

.khc-lockup-stack-1,
.khc-lockup-stack-2 {
  height: auto !important;
  overflow: hidden !important;
  transition: clip-path var(--khc-reveal) var(--khc-ease) !important;
}

.khc-lockup-stack-1 {
  width: 65% !important;
  align-self: flex-start;
  aspect-ratio: 6 / 4 !important;
}

.khc-lockup-stack-2 {
  width: 35% !important;
  align-self: flex-end;
  aspect-ratio: 1 / 1 !important;
  margin-top: -16% !important;
  transition-delay: .18s !important;
}

.khc-lockup-armed .khc-lockup-stack-1 { clip-path: inset(0 100% 0 0); }
.khc-lockup-armed .khc-lockup-stack-2 { clip-path: inset(0 0 0 100%); }

.khc-lockup-armed.in-view .khc-lockup-stack-1,
.khc-lockup-armed.in-view .khc-lockup-stack-2 {
  clip-path: inset(0 0 0 0);
}

/* Inner wrappers fill the cropped box. !important on the image
   because Elementor sets height auto at higher specificity. */
.khc-lockup-stack-1 :is(.elementor-widget-container, figure),
.khc-lockup-stack-2 :is(.elementor-widget-container, figure) {
  height: 100%;
  margin: 0;
}

.khc-lockup-stack-1 img,
.khc-lockup-stack-2 img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

/* Tablet */
@media (max-width: 1024px) {
  .khc-lockup-stack-2 {
    margin-top: -12% !important;
  }
}

/* Mobile. Both photos widen, so the same percentage reads as a
   larger overlap. */
@media (max-width: 767px) {
  .khc-lockup-stack-1 {
    width: 80% !important;
  }
  .khc-lockup-stack-2 {
    width: 44% !important;
    margin-top: -20% !important;
  }
}


/* ============================================================
   9. IMAGE LOCKUP — HERO VARIANT
   Absolutely positioned composition. Height comes from width
   via aspect-ratio, and every offset is a percentage, so the
   whole composition scales as one unit.

   Build
   1. Container. Classes: khc-hero-lockup khc-lockup-watch
   2. Four children, direct descendants only:
      Image  -> khc-lockup-primary    (3:2 photo)
      Image  -> khc-lockup-secondary  (1:1 photo)
      Text   -> khc-lockup-stat       (pull quote / stat)
      Container -> khc-lockup-block   (teal background block)

   Widths and offsets are all set here. Leave Elementor's
   Width, Height, and Min Height controls empty on the
   container and all four children, at every breakpoint.
   ============================================================ */

.khc-hero-lockup {
  position: relative;
  aspect-ratio: 5 / 3;
  height: auto !important;
  min-height: 0 !important;
}

.khc-hero-lockup > .khc-lockup-block,
.khc-hero-lockup > .khc-lockup-primary,
.khc-hero-lockup > .khc-lockup-secondary,
.khc-hero-lockup > .khc-lockup-stat {
  position: absolute;
}

.khc-hero-lockup > .e-con.khc-lockup-block {
  --width: 36%;
  width: 36%;
  height: 79.1%;
  min-height: 0;
  top: 5.6%;
  right: 0;
  left: auto;
  z-index: 0;
}

.khc-hero-lockup > .khc-lockup-primary {
  top: 0;
  left: 0;
  width: 71%;
  z-index: 1;
}

.khc-hero-lockup > .khc-lockup-secondary {
  top: 45.5%;
  left: 54%;
  width: 34%;
  z-index: 2;
}

.khc-hero-lockup > .khc-lockup-stat {
  top: 82%;
  left: 0;
  width: 48%;
  z-index: 1;
}

.khc-hero-lockup > .khc-lockup-primary img,
.khc-hero-lockup > .khc-lockup-secondary img {
  object-fit: cover;
  width: 100%;
  display: block;
}
.khc-hero-lockup > .khc-lockup-primary img { aspect-ratio: 3 / 2; }
.khc-hero-lockup > .khc-lockup-secondary img { aspect-ratio: 1 / 1; }

/* Wipe reveal */
.khc-lockup-watch > .khc-lockup-primary,
.khc-lockup-watch > .khc-lockup-secondary {
  transition: clip-path var(--khc-reveal) var(--khc-ease) !important;
}
.khc-lockup-watch > .khc-lockup-primary { clip-path: inset(0 100% 0 0) !important; }
.khc-lockup-watch > .khc-lockup-secondary {
  clip-path: inset(0 0 0 100%) !important;
  transition-delay: .25s !important;
}

.khc-lockup-watch.in-view > .khc-lockup-primary,
.khc-lockup-watch.in-view > .khc-lockup-secondary {
  clip-path: inset(0 0 0 0) !important;
}

/* Tablet. Column narrows, so the container gets taller to keep
   the stat clear of the primary photo. */
@media (max-width: 1024px) {
  .khc-hero-lockup {
    aspect-ratio: 4 / 3;
  }
  .khc-hero-lockup > .e-con.khc-lockup-block {
    height: 70%;
    top: 5%;
  }
  .khc-hero-lockup > .khc-lockup-secondary { top: 41%; }
  .khc-hero-lockup > .khc-lockup-stat { top: 74%; }
}

/* Mobile. Children go static in a flex column. The negative
   margin pulls the secondary back into the primary's space so
   the two still read as one composition instead of a stack.
   Percentage margins resolve against container width, so the
   overlap scales with the screen.

   !important throughout: Elementor emits per-breakpoint width
   on .elementor-element-{id}, which outranks a plain class. */
@media (max-width: 767px) {
  .khc-hero-lockup {
    aspect-ratio: auto;
    height: auto !important;
    display: flex;
    flex-direction: column;
  }

  .khc-hero-lockup > .khc-lockup-primary,
  .khc-hero-lockup > .khc-lockup-secondary,
  .khc-hero-lockup > .khc-lockup-stat {
    position: static;
    top: auto;
    left: auto;
  }

  .khc-hero-lockup > .khc-lockup-primary {
    width: 82% !important;
    align-self: flex-start !important;
  }

  .khc-hero-lockup > .khc-lockup-secondary {
    width: 42% !important;
    align-self: flex-end !important;
    margin-top: -18% !important;
    margin-bottom: 20px !important;
  }

  .khc-hero-lockup > .khc-lockup-stat {
    width: 100% !important;
  }

  .khc-hero-lockup > .e-con.khc-lockup-block {
    display: none;
  }
}


/* ============================================================
   10. ICON LIST NAV
   Underline grows from the left on hover.
   ============================================================ */

.khc-nav-underline .elementor-icon-list-item a {
  position: relative;
  text-decoration: none !important;
  display: inline-block;
  padding-bottom: 4px;
}

.khc-nav-underline .elementor-icon-list-item a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--khc-ink);
  transition: width .25s ease;
}

.khc-nav-underline .elementor-icon-list-item a:hover::after,
.khc-nav-underline .elementor-icon-list-item a.is-active::after {
  width: 100%;
}

/* On ink backgrounds */
.khc-nav-underline.khc-nav-underline-dark .elementor-icon-list-item a::after {
  background: var(--khc-yellow);
}

.khc-nav-underline .elementor-icon-list-item a:hover .elementor-icon-list-text,
.khc-nav-underline .elementor-icon-list-item a.is-active .elementor-icon-list-text {
  color: var(--khc-yellow) !important;
}

/* ============================================================
   11. SEARCH & FILTER PRO
   The plugin runs on custom properties, so most of this remaps
   its tokens rather than overriding rules.

   Tokens sit at :root because the dropdown panel and the
   flatpickr calendar both render outside the field's DOM
   subtree and won't inherit scoped values.

   Nothing here is scoped to a form or field ID, so these
   styles apply to every Search & Filter instance on the site.

   Contents
   11.1  Tokens
   11.2  Select / combobox trigger
   11.3  Combobox dropdown panel
   11.4  Text search field
   11.5  Date picker field
   11.6  Flatpickr calendar
   ============================================================ */

/* ---- 11.1  Tokens ---------------------------------------- */

:root {
  --search-filter-token-color-base-1: var(--khc-white);
  --search-filter-token-color-base-2: var(--khc-line);
  --search-filter-token-color-base-3: var(--khc-muted);
  --search-filter-token-color-contrast-1: var(--khc-ink);
  --search-filter-token-color-contrast-2: var(--khc-ink-soft);

  --search-filter-token-color-base-accent: var(--khc-yellow);
  --search-filter-token-color-contrast-accent: var(--khc-ink);

  --search-filter-input-placeholder-color: var(--khc-muted);

  --search-filter-token-border-radius-soft: 0;
  --search-filter-dropdown-border-radius: 0;
}

/* Padding tokens, on the plugin's two-class selector so they
   outrank the :root block above */
.search-filter-field--type-choice.search-filter-field--input-type-select {
  --search-filter-input-padding-top: 14px;
  --search-filter-input-padding-bottom: 14px;
  --search-filter-input-padding-left: 26px;
  --search-filter-input-padding-right: 26px;

  --search-filter-input-toggle-size: 16px;
  --search-filter-input-toggle-padding-left: 12px;
  --search-filter-input-toggle-padding-right: 12px;
}

/* ---- 11.2  Select / combobox trigger --------------------- */

.search-filter-component-combobox {
  border: 1px solid var(--khc-line);
  border-radius: 0 !important;
  transition: border-color .15s ease;
}
.search-filter-component-combobox:hover {
  border-color: var(--khc-ink);
}
.search-filter-component-combobox:focus-within {
  border-color: var(--khc-teal-deep);
  outline: 2px solid var(--khc-teal-deep);
  outline-offset: 1px;
}

/* Trigger height: 11 + 11 + 20 line-height = 42px */
.search-filter-component-combobox .search-filter-component-combobox__actions .search-filter-component-combobox__selection,
.search-filter-component-combobox .search-filter-component-combobox__actions input[type=text] {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  line-height: 20px !important;
}

/* Trigger layout */
.search-filter-component-combobox__header {
  display: flex;
  align-items: center;
  gap: 0;
}
.search-filter-component-combobox__actions {
  flex: 1 1 auto;
  min-width: 0;
}

/* Icon wrappers. SVGs reference a sprite via <use>, so size the
   wrapper if a glyph ever distorts. */
.search-filter-component-combobox .search-filter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.search-filter-component-combobox .search-filter-icon__svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Hairline between field and chevron */
.search-filter-component-combobox__input-divider {
  flex: 0 0 auto !important;
  align-self: center !important;
  width: 1px !important;
  height: 20px !important;
  min-height: 0 !important;
  background: var(--khc-line) !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.search-filter-component-combobox__listbox-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  line-height: 1 !important;
  padding: 0 14px;
  cursor: pointer;
}
.search-filter-component-combobox__clear-selection {
  padding: 0 10px;
}

/* ---- 11.3  Combobox dropdown panel ----------------------- */

.search-filter-field__popup,
.search-filter-component-combobox-base,
.search-filter-component-combobox-base__listbox,
.search-filter-component-combobox-base__listbox-list,
.search-filter-component-combobox-base__listbox-option {
  border-radius: 0;
}
.search-filter-field__popup {
  border: 1px solid var(--khc-line);
}
.search-filter-component-combobox-base__listbox {
  overflow: hidden;
}
.search-filter-component-combobox-base__listbox-list {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Options. Horizontal padding matches the trigger so text lines
   up between closed and open states. */
[class*="search-filter"] [role="option"] {
  line-height: 1.4;
  padding: 10px 26px;
  color: var(--khc-ink);
}

[class*="search-filter"] [role="option"]:hover,
[class*="search-filter"] [role="option"][aria-selected="true"],
[class*="search-filter"] [role="option"].is-active,
[class*="search-filter"] [role="option"][data-focused="true"],
.search-filter-component-combobox-base__listbox-option:hover,
.search-filter-component-combobox-base__listbox-option--selected,
.search-filter-component-combobox-base__listbox-option--active {
  background: var(--khc-yellow) !important;
  color: var(--khc-ink) !important;
}

/* ---- 11.4  Text search field ----------------------------- */
/* Mirrors the combobox trigger: 1px line, 0 radius, 42px tall.
   The date picker reuses this frame, see 11.5. */

.search-filter-input-text {
  display: flex;
  align-items: center;
  border: 1px solid var(--khc-line);
  border-radius: 0 !important;
  transition: border-color .15s ease;
}
.search-filter-input-text:hover {
  border-color: var(--khc-ink);
}
.search-filter-input-text:focus-within {
  border-color: var(--khc-teal-deep);
  outline: 2px solid var(--khc-teal-deep);
  outline-offset: 1px;
}

.search-filter-input-text__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 26px;
}
.search-filter-input-text__icon .search-filter-icon__svg {
  display: block;
  width: 16px;
  height: 16px;
}

.search-filter-input-text__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 26px 11px 12px !important;
  line-height: 20px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--khc-ink);
}

/* Focus ring lives on the parent via :focus-within, so suppress
   the input's own or they stack */
.search-filter-input-text__input:focus {
  outline: none !important;
}

/* ---- 11.5  Date picker field ----------------------------- */
/* Reuses the .search-filter-input-text frame from 11.4 */

.search-filter-input-date-picker__input-container {
  flex: 1 1 auto;
  min-width: 0;
}
.search-filter-icon--interactive,
.search-filter-input-text__input[readonly] {
  cursor: pointer;
}

/* ---- 11.6  Flatpickr calendar ---------------------------- */
/* Appended to <body>, so it can't be scoped to the field */

.flatpickr-calendar {
  border: 1px solid var(--khc-line);
  border-radius: 0 !important;
  box-shadow: none;
}

/* Pointer triangle. Hidden to keep the panel a clean rectangle. */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays,
span.flatpickr-weekday {
  background: var(--khc-white);
  color: var(--khc-ink);
}

.flatpickr-day {
  border-radius: 0 !important;
  color: var(--khc-ink);
}
.flatpickr-day:hover,
.flatpickr-day.today {
  background: var(--khc-off-white);
  border-color: var(--khc-line);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
  background: var(--khc-yellow) !important;
  border-color: var(--khc-yellow) !important;
  color: var(--khc-ink) !important;
  box-shadow: none !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--khc-muted);
}


/* ============================================================
   12. GRAVITY FORMS (Orbital theme)
   Radius 0, borders 1px (2px max), no shadows.
   Type is left entirely to the theme.

   Orbital sets its defaults on a very specific selector, so the
   :has() prefix is needed to outrank them without !important.
   ============================================================ */

html:has(#gravity_forms_theme_framework-css)
.gform-theme--framework.gform-theme--orbital {

  --gf-color-primary: #70B0C2;
  --gf-color-primary-contrast: #211F20;
  --gf-color-secondary: #FFFFFF;
  --gf-color-secondary-contrast: #211F20;
  --gf-color-out-ctrl-light-darker: #2F2D2D40;
  --gf-color-in-ctrl: #FFFFFF;

  --gf-ctrl-bg-color: #FFFFFF;
  --gf-ctrl-border-color: #2F2D2D40;
  --gf-ctrl-border-color-focus: #70B0C2;
  --gf-ctrl-border-color-hover: #211F20;
  --gf-ctrl-border-width: 1px;
  --gf-ctrl-color: #211F20;
  --gf-ctrl-radius: 0;
  --gf-ctrl-size: 46px;
  --gf-ctrl-shadow: none;
  --gf-ctrl-shadow-focus: none;

  --gf-ctrl-label-color-primary: #211F20;
  --gf-ctrl-label-color-secondary: #2F2D2D80;
  --gf-ctrl-desc-color: #2F2D2D80;

  --gf-radius: 0;
  --gf-form-gap-y: 20px;
  --gf-form-gap-x: 14px;

  --gf-ctrl-btn-bg-color-primary: #211F20;
  --gf-ctrl-btn-color-primary: #F1F2F3;
  --gf-ctrl-btn-bg-color-hover-primary: #211F20CC;
  --gf-ctrl-btn-border-color-primary: #211F20;
  --gf-ctrl-btn-radius: 0;
  --gf-ctrl-btn-size: 52px;
  --gf-ctrl-btn-shadow: none;
}

/* Strip Orbital's shadows and rounding in one sweep */
.gform-theme--framework,
.gform-theme--framework *,
.gform_confirmation_message {
  box-shadow: none;
  border-radius: 0;
}

/* Text colour */
.gform-theme--framework,
.gform-theme--framework .gfield_required,
.gform_confirmation_message {
  color: var(--khc-ink);
}

.gform-theme--framework .gfield_label {
  margin-bottom: 6px;
}

.gform-theme--framework .gfield_description,
.gform-theme--framework .gform_fileupload_rules,
.gform-theme--framework .ginput_complex label {
  line-height: 1.5;
  color: var(--khc-muted);
}

/* Controls */
.gform-theme--framework :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], select, textarea) {
  background: var(--khc-white);
  border: 1px solid var(--khc-line);
  padding: 11px 13px;
}

.gform-theme--framework :is(input, select, textarea):hover {
  border-color: var(--khc-ink);
}

.gform-theme--framework :is(input, select, textarea):focus {
  border-color: var(--khc-teal-deep);
  outline: 2px solid var(--khc-teal-deep);
  outline-offset: 1px;
}

/* Section breaks */
html:has(#gravity_forms_theme_framework-css)
.gform-theme--framework .gsection {
  border-bottom: 1px solid var(--khc-line);
  margin: 34px 0 20px;
  padding-bottom: 10px;
}

html:has(#gravity_forms_theme_framework-css)
.gform-theme--framework .gsection_title {
  margin: 0 0 8px;
}

html:has(#gravity_forms_theme_framework-css)
.gform-theme--framework .gsection_description {
  margin: 0;
}

.gform-theme--framework .gform_body > .gform_fields > .gsection:first-child {
  margin-top: 0;
}

/* Radio and checkbox choices as cards. Gap comes from the
   container, not the cards. Checked state changes border colour
   only, so nothing shifts. */
html:has(#gravity_forms_theme_framework-css)
.gform-theme--framework :is(.gfield_radio, .gfield_checkbox) {
  gap: 4px;
}

html:has(#gravity_forms_theme_framework-css)
.gform-theme--framework .gchoice {
  background: var(--khc-white);
  border: 1px solid var(--khc-line);
  padding: 10px 14px;
  margin-bottom: 0;
}

.gform-theme--framework .gchoice:hover {
  border-color: var(--khc-ink);
}

.gform-theme--framework .gchoice:has(input:checked) {
  background: #ACDBDC40;
  border-color: var(--khc-teal-deep);
}

.gform-theme--framework .gchoice input {
  accent-color: var(--khc-teal-deep);
}

/* Submit button */
.gform-theme--framework .gform_footer {
  margin-top: 26px;
}

.gform-theme--framework .gform_button {
  background: var(--khc-ink);
  border: 1px solid var(--khc-ink);
  color: var(--khc-off-white);
  padding: 15px 30px;
}

.gform-theme--framework .gform_button:hover {
  background: #211F20CC;
  border-color: #211F20CC;
}

/* Validation. Ink and yellow instead of GF red. */
.gform-theme--framework .gform_validation_errors {
  background: var(--khc-yellow);
  border: 0;
  border-left: 2px solid var(--khc-ink);
}

.gform-theme--framework .validation_message {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--khc-ink);
  padding: 4px 0 4px 10px;
}

.gform-theme--framework .gform_validation_errors h2,
.gform-theme--framework .gfield_error .gfield_label,
.gform-theme--framework .validation_message {
  color: var(--khc-ink);
}

.gform-theme--framework .gfield_error :is(input, select, textarea) {
  border-color: var(--khc-ink);
}

/* Datepicker renders outside the form wrapper */
.ui-datepicker.gform-theme-datepicker {
  border: 1px solid var(--khc-ink);
}

.ui-datepicker.gform-theme-datepicker :is(.ui-state-active, .ui-state-highlight) {
  background: var(--khc-teal-deep);
  color: var(--khc-ink);
}

/* Confirmation message */
.gform_confirmation_message {
  background: var(--khc-white);
  border: 1px solid var(--khc-line);
  padding: 34px 36px;
  line-height: 1.6;
}

.khc-confirm > * {
  margin: 0;
}
.khc-confirm h3 {
  margin-bottom: 15px;
}
.khc-confirm p + p {
  margin-top: 1rem;
}

.gform_wrapper select {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  padding: 12px 40px 12px 16px !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 10px 6px !important;
}

/* ============================================================
   KHC newsletter signup — Gravity Form 1
   .khc-signup         boxed, light backgrounds
   .khc-signup--dark   add alongside it for dark sections
   ============================================================ */

/* layout */
.khc-signup .gform_wrapper,
.khc-signup .gform_wrapper form,
.khc-signup .gform_wrapper .gform-body,
.khc-signup .gform_wrapper .gform_fields,
.khc-signup .gform_wrapper .gfield { width: 100%; max-width: none; }

.khc-signup .gform_wrapper form {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.khc-signup .gform_wrapper .gform-body { flex: 1 1 240px; }
.khc-signup .gform_wrapper .gform_footer {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  width: auto;
}
.khc-signup .gform_wrapper .gfield_label { display: none; }

/* both controls */
.khc-signup .gform_wrapper input[type="email"],
.khc-signup .gform_wrapper .gform-button {
  box-sizing: border-box;
  height: 52px;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
  border-radius: 0;
  font-size: 1rem;
}

/* light */
.khc-signup .gform_wrapper input[type="email"] {
  padding-left: 16px;
  padding-right: 16px;
  border: 1px solid #211F20;
  background: #fff;
  color: #211F20;
}
.khc-signup .gform_wrapper .gform-button {
  padding-left: 28px;
  padding-right: 28px;
  border: 1px solid transparent;
  background: #211F20;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

/* dark */
.khc-signup--dark .gform_wrapper input[type="email"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(241, 242, 243, .45) !important;
  background: transparent !important;
  color: #F1F2F3 !important;
}
.khc-signup--dark .gform_wrapper input[type="email"]::placeholder { color: rgba(241, 242, 243, .7); }
.khc-signup--dark .gform_wrapper input[type="email"]:focus {
  outline: none;
  border-bottom-color: #F4F492 !important;
}
.khc-signup--dark .gform_wrapper .gform-button {
  background: #F4F492 !important;
  color: #211F20 !important;
  border-color: transparent !important;
}
.khc-signup--dark .gform_wrapper .gfield_validation_message,
.khc-signup--dark .gform_wrapper .validation_message,
.khc-signup--dark .gform_wrapper .gform_confirmation_message {
  padding: 6px 0 0;
  border: 0;
  background: transparent;
  color: #F4F492;
}


/* ============================================================
   13. GTRANSLATE
   ============================================================ */

.gtranslate_wrapper select.gt_selector {
  border-radius: 0;
  border: 1px solid var(--khc-ink-soft);
  color: var(--khc-ink-soft);
  background-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 28px 4px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%232F2D2D' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
  font-size: 12px;
}


/* ==========================================================
   TablePress – global
   ========================================================== */
.tablepress {
  --text-color: var(--e-global-color-text);
  --head-text-color: #fff;
  --head-bg-color: var(--e-global-color-primary);
  --head-active-text-color: #fff;
  --head-active-bg-color: var(--e-global-color-primary);
  --head-sort-arrow-color: #fff;
  --odd-text-color: var(--e-global-color-text);
  --odd-bg-color: #fff;
  --even-text-color: var(--e-global-color-text);
  --even-bg-color: #fff;
  --hover-text-color: var(--e-global-color-text);
  --hover-bg-color: rgba(0, 0, 0, .03);
  --border-color: rgba(0, 0, 0, .12);
  --padding: .625rem .875rem;

  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.4;
}

.tablepress > :where(thead, tbody, tfoot) > tr > * {
  border-top: 0;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
  text-align: left;
}

.tablepress thead th {
  font-weight: 700;
  white-space: nowrap;
}

/* Merged full-width rows (#colspan#) become section/tier headers */
.tablepress td[colspan] {
  background: color-mix(in srgb, var(--e-global-color-primary) 7%, #fff);
  color: var(--e-global-color-primary);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Horizontal scroll on small screens (no DataTables needed) */
.elementor-shortcode:has(> .tablepress),
.entry-content > .tablepress-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1024px) {
  .tablepress { min-width: 760px; }
}

.tablepress-table-description {
  font-size: .875rem;
  opacity: .8;
  margin-top: .625rem;
}

/* ==========================================================
   Optional: FY 2026 Priority Listing only
   Swap 3 for your table ID
   ========================================================== */
.tablepress-id-2 .column-6,
.tablepress-id-2 .column-7 {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================
   Loop grid pagination - current page indicator
   ========================================================== */
.elementor-pagination .page-numbers {
  display: inline-block;
  padding: 4px 10px;
  color: #2F2D2D;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}

.elementor-pagination .page-numbers:hover {
  border-bottom-color: #ACDBDC;
}

.elementor-pagination .page-numbers.current {
  font-weight: 700;
  color: #211F20;
  border-bottom-color: #70B0C2;
}