/*--------------------------------------------------------------
Comments
--------------------------------------------------------------*/
ul.comment-list {list-style: none;padding: 0;}
ul.comment-list li {  list-style: none;}
.avatar {  width: 80px;}
.comment-list ul.children {  padding-left: 96px;}
.comment-list ul.children ul.children {  padding-left: 10px;}
.comment-list ul.children ul.children ul.children {  padding-left: 10px;}
.screen-reader-text {  clip: rect(1px, 1px, 1px, 1px);  position: absolute !important;  height: 1px;  width: 1px;  overflow: hidden;  word-wrap: normal !important;}
.comment-content {  width: calc(100% - 96px);}
.comment-content a {  word-wrap: break-word;}
.bypostauthor {  display: block;}
.comment-content .card p:last-child {  margin-bottom: 0;}

/*--------------------------------------------------------------
Posts
--------------------------------------------------------------*/
.pagination a[rel="prev"]:before {content: "« ";}
.pagination a[rel="next"]:after {  content: " »";}

.blog-posts .card:hover{	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;	transition: box-shadow 0.4s ease;}
.blog-posts .card{	transition: box-shadow 0.4s ease;}
.blog-posts .card .col-12 {width: 100%;height: 0;padding-top: 50%;position: relative;overflow: hidden;}
.blog-posts .card-img-top {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover; }

/*--------------------------------------------------------------
Pagination
--------------------------------------------------------------*/
.pagination { justify-content: center; align-items: center; margin-top: 24px;}
.pagination .page-numbers { color: #7F8CA3; font-weight: 400; display: inline-block; padding: 5px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin: 0 5px; border-radius: 40px; }
.pagination .page-numbers.current { color: #315296; font-weight: 600; background-color: #EEF4FF; font-size: clamp(0.875rem, 0.76rem + 0.308vw, 1.125rem);}
.pagination .page-numbers:hover { background-color: #EEF4FF; color: #315296; }

a.next.page-numbers, a.prev.page-numbers { border: 2px solid #BCC0C8; width: 46px; height: 46px; border-radius: 50px; padding: 10px; } 
a.next.page-numbers svg, a.prev.page-numbers svg { opacity: 0.5; width: 8px; transition: all 0.3s ease 0s; } 
a.prev.page-numbers { margin-left: 0; margin-right: 20px; }
a.next.page-numbers { margin-left: 20px; margin-right: 0; }

a.next.page-numbers:hover, a.prev.page-numbers:hover { background: #FFF; border: 2px solid #315296; }
a.next.page-numbers:hover svg, a.prev.page-numbers:hover svg { opacity:1; }

/*--------------------------------------------------------------
CF7
--------------------------------------------------------------*/
div.wpcf7-response-output,
div.wpcf7-validation-errors {display: none !important;}

/* input[aria-invalid="true"],
select[aria-invalid="true"], 
textarea[aria-invalid="true"] {border-color: #ff2c00!important;} */

span.wpcf7-spinner.spinner-border.spinner-border-sm.ajax-loader {z-index: 2;opacity: 1 !important;background-color: transparent !important;display: none;transform: unset;margin: 0 0 0 5px;}
.submitting span.wpcf7-spinner.spinner-border.spinner-border-sm.ajax-loader {display: inline-block;}
span.wpcf7-spinner.spinner-border.spinner-border-sm.ajax-loader::before{display: none;}




/*--------------------------------------------------------------
Gravity Forms — Theme Framework (Orbital)
Matches the .portfolio-form design: dark navy card, glassy inputs,
white labels, gold accents (see :root + .portfolio-form in custom.css).

SPECIFICITY RULES (both are load-bearing):
1. Wrapper selector is tripled because GF declares its own var defaults on
   .gform-theme--framework in a stylesheet that loads AFTER this file —
   equal specificity would lose on source order.
2. GF also prints a per-form inline <style> using an ID selector
   (#gform_wrapper_N[data-form-index="0"].gform-theme). Classes can't
   out-rank an ID, so vars that inline block also sets carry !important.
--------------------------------------------------------------*/
.gform_wrapper.gform-theme.gform-theme--framework {
  /* Brand tokens — gold accent for focus/active states */
  --gf-color-primary: var(--color-secondary) !important;
  --gf-color-primary-darker: #a3874f !important;
  --gf-color-primary-lighter: #cbb385 !important;
  --gf-color-primary-contrast: var(--color-white) !important;
  --gf-font-family-base: var(--body-font);
  --gf-radius: var(--form-border-radius) !important;
  --gf-color-danger: #ff8d7a; /* validation red, lightened to read on navy */

  /* Field-grid spacing — the mockup spaced rows via .form-group
     { margin-bottom: 24px } inside Bootstrap's 24px gutter; GF defaults
     are 40px row / 16px column */
  --gf-form-gap-y: 24px;
  --gf-form-gap-x: 24px;

  /* Labels + descriptions — white on the navy card, like `form label` in custom.css */
  --gf-ctrl-label-color-primary: var(--color-white) !important;
  --gf-ctrl-label-color-secondary: var(--color-white) !important;
  --gf-ctrl-label-font-weight-primary: 500;
  /* GF defaults labels to 14px (--gf-font-size-secondary); the mockup labels
     inherit the body size */
  --gf-ctrl-label-font-size-primary: var(--fz-body);
  --gf-ctrl-label-font-size-req: 0.75em;
  --gf-ctrl-desc-color: rgba(255, 255, 255, 0.7);

  /* Select/number icons — GF's inline block ships navy fills, invisible on navy */
  --gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='rgba(255, 255, 255, 0.75)'/%3E%3C/svg%3E") !important;
  --gf-icon-ctrl-number: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='rgba(255, 255, 255, 0.75)'/%3E%3C/svg%3E") !important;

  /* Multi-page Next/Prev — gold pills like .btn. The submit button itself is
     rebuilt into .btn.btn-blue by the gform_submit_button filter in functions.php */
  --gf-ctrl-btn-radius: 60px;
  --gf-ctrl-btn-font-weight: 500;
  --gf-ctrl-btn-bg-color-primary: var(--color-secondary);
  --gf-ctrl-btn-bg-color-hover-primary: #a3874f;
  --gf-ctrl-btn-bg-color-focus-primary: #a3874f;
  --gf-ctrl-btn-color-primary: var(--color-primary);
  --gf-ctrl-btn-border-color-primary: var(--color-secondary);
  --gf-ctrl-btn-border-color-hover-primary: #a3874f;
  --gf-ctrl-btn-bg-color-secondary: transparent;
  --gf-ctrl-btn-bg-color-hover-secondary: rgba(255, 255, 255, 0.1);
  --gf-ctrl-btn-color-secondary: var(--color-white);
  --gf-ctrl-btn-border-color-secondary: #ffffff45 !important;

  /* Choices (checkbox/radio) */
  --gf-ctrl-choice-check-color: var(--color-white);

  /* File upload zone on the navy card */
  --gf-ctrl-file-btn-bg-color: var(--color-secondary);
  --gf-ctrl-file-btn-bg-color-hover: #a3874f !important;
  --gf-ctrl-file-btn-color: var(--color-primary);
  --gf-ctrl-file-zone-color: rgba(255, 255, 255, 0.7);
  --gf-ctrl-file-zone-icon-color: var(--color-secondary);
  --gf-ctrl-file-zone-border-style: dashed;
}

/* Control vars set ON the elements that read them — element-level custom
   props beat the wrapper-level inline block by inheritance, no !important
   needed here. Values mirror the glassy .form-control look in custom.css. */
.gform-theme--framework input,
.gform-theme--framework select,
.gform-theme--framework textarea {
  --gf-ctrl-bg-color: transparent;
  /* hover/focus/error vars MUST be redeclared here: GF defines them on the
     wrapper as var(--gf-ctrl-bg-color), which resolves to white AT THE
     WRAPPER and inherits down already-computed — hence fields turning solid
     white on hover and in the validation-error state */
  --gf-ctrl-bg-color-hover: rgba(255, 255, 255, 0.06);
  --gf-ctrl-bg-color-focus: rgba(255, 255, 255, 0.06);
  --gf-ctrl-bg-color-error: rgba(255, 141, 122, 0.08);
  --gf-ctrl-color: var(--color-white);
  --gf-ctrl-color-hover: var(--color-white);
  --gf-ctrl-color-focus: var(--color-white);
  --gf-ctrl-color-error: var(--color-white);
  --gf-ctrl-border-color: #ffffff45;
  --gf-ctrl-border-color-hover: rgba(255, 255, 255, 0.65);
  --gf-ctrl-border-color-focus: var(--color-secondary);
  --gf-ctrl-border-width: 1px;
  --gf-ctrl-radius: var(--form-border-radius);
  --gf-ctrl-size: var(--form-height); /* 58px */
  --gf-ctrl-padding-x: 24px;
  /* select padding + chevron position MUST also be redeclared: GF composes
     them on the wrapper from --gf-ctrl-padding-x, which resolves there to
     12px and inherits down already-computed — selects were getting half the
     inputs' padding */
  --gf-ctrl-select-padding-x: var(--gf-ctrl-padding-x)
    calc(var(--gf-ctrl-select-search-icon-size) + var(--gf-ctrl-padding-x));
  --gf-ctrl-select-icon-position: calc(100% - var(--gf-ctrl-padding-x)) center;
  --gf-ctrl-font-size: clamp(1rem, 0.942rem + 0.154vw, 1.125rem);
  --gf-ctrl-placeholder-color: var(--form-placeholder-color);
  /* focus ring kept tight (no offset) so focused controls don't look
     bigger/shifted next to their neighbors */
  --gf-ctrl-outline-color-focus: rgba(185, 155, 105, 0.55);
  --gf-ctrl-outline-width-focus: 2px;
  --gf-ctrl-outline-offset: 0;
}

/* The glassy treatment itself — plain properties, GF has no vars for these */
.gform-theme--framework input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.gform-theme--framework select,
.gform-theme--framework textarea {font-weight: 300;  backdrop-filter: blur(14.3px);  -webkit-backdrop-filter: blur(14.3px);  box-shadow: 0 0 24px #ffffff0d inset !important;}

.gform-theme--framework textarea {
  --gf-ctrl-padding-y: 20px;
  height: 140px;
  min-height: 140px;
}

/* Native dropdown list opens on a white panel — keep options readable */
.gform-theme--framework select option { color: var(--color-primary); }

/* Required asterisk — gold, like `form label span` in the mockup */
.gform-theme.gform-theme--framework .gfield_required { color: #FFDC8F !important; }

/* Select — same height as the inputs, text vertically centered.
   line-height is needed because GF's theme reset (all: unset) destroys the
   browser's native select text-centering. */
.gform-theme.gform-theme--framework select {
  block-size: var(--form-height) !important;
  min-block-size: 0 !important;
  padding-block: 0 !important;
  line-height: calc(var(--form-height) - 2px) !important;
}

/* Submit button — GF 3.0.0 dropped the markup the gform_submit_button
   filter produced (<span><img></span> inside the button), so the .btn
   .btn-blue look is rebuilt here in CSS on GF's own .gform_button:
   white pill, navy icon circle (::before) with the btn-right.svg arrow.
   !important because GF's theme stylesheet loads after this file. */
.gform_wrapper .gform_footer button.gform_button {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 210px !important;
  padding: 9px 32px 9px 10px !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(1rem, 0.942rem + 0.154vw, 1.125rem) !important;
  line-height: 1 !important;
  color: var(--color-primary) !important;
  background: var(--color-white) !important;
  border: none !important;
  border-radius: 60px !important;
  cursor: pointer !important;
  transition: all 0.6s ease !important;
  /* stacking context + clip for the ::after grow circle */
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
/* GF's framework CSS treats button::before as an icon-font slot:
   `content: var(--gf-local-content)` resolves invalid (no --gf-ctrl-btn-icon
   set) → content:normal → the pseudo-element is erased. Its selector
   (.gform-theme.gform-theme--framework.gform_wrapper .button::before) also
   out-ranks this one, so every declaration here needs !important. */
.gform_wrapper .gform_footer button.gform_button::before {
  content: "" !important;
  display: block !important;
  width: 37px !important;
  height: 37px !important;
  margin-right: 11px !important;
  flex-shrink: 0 !important;
  border-radius: 60px !important;
  background-color: var(--color-primary) !important;
  background-image: url("../images/btn-right.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  transition: all 0.6s ease !important;
}
/* Grow effect (same as .btn/.btn-blue): a navy circle sits under the icon
   at rest; on hover it scales up to 12x turning gold and floods the pill,
   like span::after did in the old filtered markup. z-index -1 keeps it
   under the text and the ::before icon inside the button's own stacking
   context, and the button's overflow:hidden clips it to the pill. */
.gform_wrapper .gform_footer button.gform_button::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 9px !important;
  width: 37px !important;
  height: 37px !important;
  border-radius: 60px !important;
  background-color: var(--color-primary) !important;
  transform: scale(1) !important;
  z-index: -1 !important;
  transition: all 0.6s ease !important;
}
.gform_wrapper .gform_footer button.gform_button:hover {
  background: var(--color-white) !important;
  color: var(--color-white) !important;
}
.gform_wrapper .gform_footer button.gform_button:hover::after {
  background-color: var(--color-secondary) !important;
  transform: scale(12) !important;
  transition: all 1s ease !important;
}
/* GF marks the button .gform-has-spinner during submit and injects a
   centered .gform-loader; its own color:transparent loses to the
   !important color above, so re-assert it here (after :hover, same
   specificity, so source order lets it win mid-hover too). */
.gform_wrapper .gform_footer button.gform_button.gform-has-spinner,
.gform_wrapper .gform_footer button.gform_button.gform-has-spinner:hover {
  color: transparent !important;
}

.gform_confirmation_wrapper .gform_confirmation_message {
    border: 1px solid white;
    padding: 15px;
    color: white;
    backdrop-filter: blur(14.3px);
    -webkit-backdrop-filter: blur(14.3px);
    box-shadow: 0 0 24px #ffffff0d inset !important;
    border-radius: 10px;
   text-align: center;
}

/* Communities — photo-grid tiles open in a Fancybox gallery.
   The anchor is a transparent click layer above the tile's gradient (:before,
   z-index 1) and heading (z-index 2), so the whole tile is clickable without
   disturbing the existing hover effects. */
.community-grid-img a[data-fancybox] { position: absolute; inset: 0; z-index: 3; border-radius: 20px; }

/* Hero banner heading — hidden until the GSAP word reveal in js/dev.js
   makes it visible (prevents the un-split text flashing on load). */
.hero-banner .banner-heading { visibility: hidden; }


/* .gform_confirmation_wrapper {
    padding-top: 110px;
    margin-top: -110px;
}

.gform_wrapper.gform-theme.gform-theme--framework {
    padding-top: 110px;
    margin-top: -110px;
} */