/* =========================================================
   LK FINANCIAL — WordPress additions
   Everything here sits on top of styles.css: spacing
   utilities used by the ACF "Section settings" group, editor
   content styles, and accessibility helpers.
========================================================= */

/* ---------------------------------------------------------
   Calculator block
   Ported from another site; colours, fonts, radii and
   transitions remapped onto this theme's tokens so it sits
   alongside the rest of the design.
--------------------------------------------------------- */
.calculator-block {
  overflow: hidden;
  border-top: solid 1px var(--color-border);
  padding: 40px 0;
  font-size: 16px;
}
@media (min-width: 1024px) {
  .calculator-block {
    padding: 60px 0;
  }
}
@media (min-width: 1360px) {
  .calculator-block {
    padding: 80px 0;
  }
}
.calculator-block .container {
  max-width: 740px;
  padding: 0 20px;
  margin: 0 auto;
}
.calculator-block h1 {
  margin: 0 0 20px;
  color: var(--color-navy);
  font-family: var(--font-heading);
}
@media (max-width: 575px) {
  .calculator-block h1 {
    font-size: 30px;
  }
}
.calculator-block h2 {
  margin: 0 0 20px;
  color: var(--color-navy);
  font-family: var(--font-heading);
}
.calculator-block h4 {
  margin: 0 0 20px;
  font-family: var(--font-heading);
}
@media (max-width: 575px) {
  .calculator-block h5 {
    font-size: 18px;
  }
}
.calculator-block .top-text {
  padding: 0 0 30px;
}
.calculator-block label, .calculator-block .label {
  display: block;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 10px;
}
@media (max-width: 575px) {
  .calculator-block label, .calculator-block .label {
    font-size: 14px;
  }
}
.calculator-block .formcontrol {
  margin: 0 0 25px;
}
.calculator-block p {
  margin: 0 0 25px;
}
.calculator-block .input-holder {
  position: relative;
}
.calculator-block .input-holder .currency-sign {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 700;
  padding: 0 20px;
  color: var(--color-text-muted);
  font-size: 22px;
}
.calculator-block .input-holder .time-frame {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  color: var(--color-text-muted);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 400;
  padding: 0 20px;
}
.calculator-block .input-holder input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  padding: 13px 80px 13px 40px;
  font-size: 16px;
  font-family: var(--font-body);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.calculator-block .input-holder input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.calculator-block .info-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: top;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 100%;
  margin: -3px 0 0 10px;
  font-size: 14px;
  cursor: pointer;
}
.calculator-block .info-btn:before {
  content: "i";
  font-style: italic;
  font-family: Times, "Times New Roman", Georgia, serif;
}
.calculator-block .info-popup {
  display: none;
  margin: 0 0 6px;
}
.calculator-block .slide-holder {
  background: var(--color-bg);
  padding: 10px;
  display: block;
  overflow: hidden;
}
.calculator-block .slide-holder p {
  margin: 0;
}
.calculator-block h5 {
  margin: 0 0 20px;
  font-weight: 700;
}
.calculator-block .btn, .calculator-block input[type=button], .calculator-block input[type=submit], .calculator-block button {
  display: inline-block;
  vertical-align: top;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: 14px 28px;
  font-size: 15px;
  border-radius: var(--radius-pill);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: 0;
  cursor: pointer;
}
.calculator-block .btn:hover, .calculator-block .btn:focus, .calculator-block input[type=button]:hover, .calculator-block input[type=button]:focus, .calculator-block input[type=submit]:hover, .calculator-block input[type=submit]:focus, .calculator-block button:hover, .calculator-block button:focus {
  background: var(--color-primary-dark);
  color: #fff;
}
.calculator-block .input-range-slider {
  margin: 0 0 30px;
  max-width: 600px;
}
.calculator-block .input-range-slider .slider-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 14px;
}
.calculator-block .input-range-slider .slider {
  margin: 80px 0 20px;
}
.calculator-block .rangle-slider {
  margin: 10px 0;
}
.calculator-block .ui-corner-all {
  border-radius: 10px;
}
.calculator-block .value {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
}
.calculator-block h3 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-size: 26px;
  margin: 0 0 30px;
}
.calculator-block .notice-box {
  border-left: solid 8px var(--color-primary);
  padding: 0 20px;
  margin: 0 0 30px;
}
.calculator-block a {
  color: var(--color-primary);
  text-decoration: underline;
}
.calculator-block a:hover {
  color: var(--color-primary-dark);
}
.calculator-block .graph-holder {
  margin: 0 0 0;
  max-width: 600px;
}
@media (min-width: 576px) {
  .calculator-block .graph-holder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 30px -10px;
  }
}
.calculator-block .graph-holder .graph, .calculator-block .graph-holder .graph-points {
  margin: 0 0 20px;
}
@media (min-width: 576px) {
  .calculator-block .graph-holder .graph, .calculator-block .graph-holder .graph-points {
    margin: 0 10px 35px;
  }
}
.calculator-block .graph-holder .graph {
  width: 220px;
  height: 220px;
  border-radius: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  margin: 0 auto 20px;
}
@media (min-width: 576px) {
  .calculator-block .graph-holder .graph {
    margin: 0;
  }
}
.calculator-block .graph-holder .graph .progress {
  width: 100%;
  height: 100%;
  position: absolute;
}
.calculator-block .graph-holder .graph-points {
  list-style: none;
}
@media (min-width: 576px) {
  .calculator-block .graph-holder .graph-points {
    padding: 0 0 0 20px;
  }
}
.calculator-block .graph-holder .graph-points li {
  padding: 10px 0 10px 30px;
  position: relative;
}
.calculator-block .graph-holder .graph-points li:before {
  position: absolute;
  left: 0;
  top: 15px;
  content: "";
  border-radius: 100%;
  background: var(--color-border);
  width: 14px;
  height: 14px;
}
.calculator-block .graph-holder .graph-points li:first-child:before {
  background: var(--color-primary);
}
.calculator-block .custom-checkbox input {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
}
.calculator-block .custom-checkbox input:checked ~ label:before {
  opacity: 1;
}
.calculator-block .custom-checkbox label {
  display: block;
  cursor: pointer;
  position: relative;
  padding-left: 34px;
  line-height: 32px;
}
.calculator-block .custom-checkbox label:after {
  position: absolute;
  left: 0;
  top: 4px;
  width: 22px;
  height: 22px;
  border: solid 1px var(--color-border);
  content: "";
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
}
.calculator-block .custom-checkbox label:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 12px;
  height: 6px;
  border: solid 2px var(--color-primary);
  border-width: 0 0 2px 2px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin: 10px 0 0 6px;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: 1;
}
/* WordPress bundles jQuery UI's script but not its stylesheet, so the track and
   handle are styled here rather than inherited from a CDN theme. */
.calculator-block .slider {
  position: relative;
  height: 8px;
  background: var(--color-primary-light);
  border: 0;
  border-radius: var(--radius-pill);
}
.calculator-block .ui-slider-handle {
  position: absolute;
  top: -11px;
  margin-left: -15px;
  background: var(--color-primary) !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 100% !important;
  border: 0;
  outline: none;
  z-index: 2;
  cursor: grab;
  -webkit-box-shadow: var(--shadow-sm);
          box-shadow: var(--shadow-sm);
}
.calculator-block .ui-slider-handle:focus-visible {
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.calculator-block .ui-slider-handle:active { cursor: grabbing; }

.calculator-block .calculator-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.calculator-block .tool-tip {
  position: absolute;
  top: -50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: var(--color-primary);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.calculator-block .tool-tip:before {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -8px;
  content: "";
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: var(--color-primary) transparent transparent transparent;
}
.calculator-block .slider .slider-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--color-primary);
  z-index: 1;
  border-radius: 4px;
}
.calculator-block .slider {
  -ms-touch-action: none;
      touch-action: none;
}

/* ---------------------------------------------------------
   Section spacing utilities (ACF: Section settings)
--------------------------------------------------------- */
.is-pt-none  { padding-top: 0 !important; }
.is-pt-small { padding-top: 48px !important; }
.is-pb-none  { padding-bottom: 0 !important; }
.is-pb-small { padding-bottom: 48px !important; }

@media (max-width: 768px) {
  .is-pt-small { padding-top: 32px !important; }
  .is-pb-small { padding-bottom: 32px !important; }
}

/* ---------------------------------------------------------
   Accessibility
--------------------------------------------------------- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link:focus {
  background: #fff;
  clip: auto;
  clip-path: none;
  color: var(--color-primary);
  display: block;
  font-weight: 600;
  height: auto;
  left: 16px;
  padding: 12px 20px;
  top: 16px;
  width: auto;
  z-index: 10000;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------------------
   Enquiry form extras
--------------------------------------------------------- */
.lkf-hp {
  position: absolute !important;
  left: -9999px !important;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: #FDECEC;
  color: #A32020;
  font-size: 14px;
}

.btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.search-form .form-row {
  align-items: flex-end;
}

/* ---------------------------------------------------------
   Article page
--------------------------------------------------------- */
.single-hero-media {
  margin-bottom: -40px;
}

.single-hero-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.blog-card__meta--center {
  justify-content: center;
}

.page-hero .tag {
  display: inline-block;
  margin-bottom: 16px;
}

/* Article cards rendered without a featured image: the category pill can no
   longer be an overlay on the media block, so it sits above the heading.
   .card__body is a flex column, so a bare span would stretch full width. */
.blog-card--no-media > .card__body > .tag {
  align-self: flex-start;
  margin-bottom: 14px;
}

/* ---------------------------------------------------------
   Editor content (WYSIWYG fields, article bodies)
--------------------------------------------------------- */
.entry-content > * + *,
.about-text > * + * {
  margin-top: 20px;
}

.entry-content h2 { font-size: 30px; margin-top: 40px; }
.entry-content h3 { font-size: 24px; margin-top: 32px; }
.entry-content h4 { font-size: 20px; margin-top: 28px; }

.entry-content ul,
.entry-content ol,
.about-text ul,
.about-text ol {
  padding-left: 22px;
  list-style: disc;
}

.entry-content ol,
.about-text ol {
  list-style: decimal;
}

.entry-content li,
.about-text li {
  margin-bottom: 8px;
}

/* Editor links only. Buttons and arrow links carry their own colour, and
   ".entry-content a" (0,1,1) would otherwise out-specify ".btn--primary"
   (0,1,0) — turning a solid blue button into blue underlined text. */
.entry-content a:not(.btn):not(.link-arrow),
.about-text a:not(.btn):not(.link-arrow) {
  color: var(--color-primary);
  text-decoration: underline;
}

.entry-content blockquote,
.about-text blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: 24px;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-navy);
}

.entry-content img,
.about-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  text-align: left;
}

.entry-content pre {
  overflow-x: auto;
  background: #F1F5FA;
  padding: 18px;
  border-radius: var(--radius-sm);
}

/* WordPress core alignment + caption classes */
.alignleft  { float: left; margin: 0 24px 20px 0; }
.alignright { float: right; margin: 0 0 20px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { width: 100%; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.entry-content figcaption {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: 8px;
  text-align: center;
}

.sticky .card { outline: 2px solid var(--color-accent); }

/* ---------------------------------------------------------
   Admin bar offset for the sticky nav
--------------------------------------------------------- */
.admin-bar .site-nav { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .site-nav { top: 46px; }
  .admin-bar .top-bar { top: 46px; }
}

/* Below 600px WordPress stops pinning the admin bar, so no offset is needed. */
@media screen and (max-width: 600px) {
  .admin-bar .top-bar { top: 0; }
  .admin-bar .site-nav { top: 64px; }
}

/* The sticky nav can be switched off in Site Settings → Extras. */
body.no-sticky-nav .site-nav { position: relative; top: 0; }

/* =========================================================
   GRAVITY FORMS
   Restyles the Orbital theme's markup to match the design's
   own form styles (.form-label / .form-control / .btn).

   The variable block uses !important deliberately: Gravity
   Forms prints its CSS API values in an inline <style> scoped
   to #gform_wrapper_{id}, and an ID selector cannot be beaten
   by specificity alone.
========================================================= */
.gform_wrapper.gform-theme {
  --gf-color-primary: var(--color-primary) !important;
  --gf-color-primary-rgb: 54, 95, 140 !important;
  --gf-color-primary-contrast: #fff !important;
  --gf-color-primary-darker: var(--color-primary-dark) !important;
  --gf-color-primary-lighter: var(--color-primary-light) !important;
  --gf-color-secondary-contrast: var(--color-text) !important;
  --gf-color-in-ctrl: #fff !important;
  --gf-color-in-ctrl-contrast: var(--color-text) !important;
  --gf-color-in-ctrl-primary: var(--color-primary) !important;
  --gf-color-out-ctrl-dark: var(--color-text-muted) !important;
  --gf-ctrl-border-color: var(--color-border) !important;
  --gf-ctrl-label-color-primary: var(--color-text-muted) !important;
  --gf-ctrl-label-color-secondary: var(--color-text-muted) !important;
  --gf-radius: var(--radius-sm) !important;
  --gf-font-size-secondary: 13.5px !important;
  --gf-font-size-tertiary: 12.5px !important;

  margin: 0;
  font-family: var(--font-body);
}

/* ---- Layout ---- */
.gform_wrapper.gform-theme .gform_heading { margin: 0; }
.gform_wrapper.gform-theme .gform_description:empty { display: none; }
.gform_wrapper.gform-theme .gform_description:not(:empty) {
  display: block;
  font-size: 14.5px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}
.gform_wrapper.gform-theme .gform_fields { row-gap: 20px; }

/* ---- Labels ---- */
.gform_wrapper.gform-theme .gfield:not(.hidden_label) > .gfield_label,
.gform_wrapper.gform-theme .gfield:not(.hidden_label) > legend.gfield_label {
  display: block;
  float: none;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 8px;
  padding: 0;
}

/* First Name / Last Name style sub-labels sit under the field's own label. */
.gform_wrapper.gform-theme .gform-field-label--type-sub {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  margin: 0 0 6px;
}

.gform_wrapper.gform-theme .gfield_required { color: var(--color-primary); }
.gform_wrapper.gform-theme .gfield_required_text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  margin-left: 4px;
}

/* ---- Controls ---- */
.gform_wrapper.gform-theme .gform_fields input[type="text"],
.gform_wrapper.gform-theme .gform_fields input[type="email"],
.gform_wrapper.gform-theme .gform_fields input[type="tel"],
.gform_wrapper.gform-theme .gform_fields input[type="url"],
.gform_wrapper.gform-theme .gform_fields input[type="number"],
.gform_wrapper.gform-theme .gform_fields input[type="password"],
.gform_wrapper.gform-theme .gform_fields select,
.gform_wrapper.gform-theme .gform_fields textarea {
  width: 100%;
  height: auto;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text);
  box-shadow: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.gform_wrapper.gform-theme .gform_fields input:focus,
.gform_wrapper.gform-theme .gform_fields select:focus,
.gform_wrapper.gform-theme .gform_fields textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.gform_wrapper.gform-theme .gform_fields input::placeholder,
.gform_wrapper.gform-theme .gform_fields textarea::placeholder { color: #A7B0BE; }

.gform_wrapper.gform-theme .gform_fields textarea { resize: vertical; min-height: 100px; }
.gform_wrapper.gform-theme .gform_fields select { cursor: pointer; }

/* Two-up name row, matching .form-row */
.gform_wrapper.gform-theme .ginput_container_name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.gform_wrapper.gform-theme .ginput_container_name > span {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* ---- Descriptions and the character counter ---- */
.gform_wrapper.gform-theme .gfield_description,
.gform_wrapper.gform-theme .ginput_counter {
  font-size: 12.5px;
  color: var(--color-text-muted);
  padding: 0;
  margin-top: 6px;
}

/* ---- Consent checkbox, matching .form-checkbox ---- */
.gform_wrapper.gform-theme .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.gform_wrapper.gform-theme .ginput_container_consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--color-primary);
}
.gform_wrapper.gform-theme .gfield_consent_label {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
}
.gform_wrapper.gform-theme .gfield_consent_label a {
  color: var(--color-primary);
  font-weight: 600;
}

/* ---- Submit button, matching .btn.btn--primary.btn--block ---- */
.gform_wrapper.gform-theme .gform_footer {
  margin: 24px 0 0;
  padding: 0;
}
.gform_wrapper.gform-theme .gform_footer input[type="submit"],
.gform_wrapper.gform-theme .gform_footer button.gform_button,
.gform_wrapper.gform-theme .gform_page_footer input[type="submit"],
.gform_wrapper.gform-theme .gform_page_footer button.gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: auto;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  transition: all var(--transition);
}
.gform_wrapper.gform-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gform-theme .gform_footer button.gform_button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.gform_wrapper.gform-theme .gform_ajax_spinner { margin-left: 12px; }

/* ---- Validation ---- */
.gform_wrapper.gform-theme .gfield_error input,
.gform_wrapper.gform-theme .gfield_error select,
.gform_wrapper.gform-theme .gfield_error textarea { border-color: #A32020; }

.gform_wrapper.gform-theme .gfield_validation_message,
.gform_wrapper.gform-theme .validation_message {
  margin-top: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: #FDECEC;
  color: #A32020;
  font-size: 13px;
}

.gform_wrapper.gform-theme .gform_validation_errors {
  margin: 0 0 24px;
  padding: 16px 20px;
  border: 1px solid rgba(163, 32, 32, 0.25);
  border-radius: var(--radius-sm);
  background: #FDECEC;
  box-shadow: none;
}
.gform_wrapper.gform-theme .gform_validation_errors > h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: #A32020;
}

/* ---- Confirmation, matching .form-success ---- */
.gform_confirmation_wrapper,
.gform_confirmation_message {
  text-align: center;
  padding: 24px 0;
  font-size: 14.5px;
  color: var(--color-text);
}
.gform_confirmation_message::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  font-size: 22px;
}

@media (max-width: 768px) {
  .gform_wrapper.gform-theme .ginput_container_name { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Card body rich text (Card Grid)
   The field is a WYSIWYG, so paragraphs arrive pre-wrapped and
   keep their usual 16px spacing. These rules only cover the
   extras an editor can now add — lists, links, emphasis.
--------------------------------------------------------- */
/* Match the checklist beside it (.check-list li). */
.card__text { font-size: 14.5px; }

/* The lower box follows the checklist, so it needs its own separation. The
   card link keeps margin-top:auto and stays pinned to the bottom below it. */
.card__text--after { margin-top: 14px; }
.card__text--after > *:last-child { margin-bottom: 0; }

.card__text ul,
.card__text ol {
  margin: 0 0 16px;
  padding-left: 20px;
  list-style: disc;
}

.card__text ol { list-style: decimal; }

.card__text li {
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.card__text a {
  color: var(--color-primary);
  text-decoration: underline;
}

.card__text strong { color: var(--color-text); }

/* ---------------------------------------------------------
   Section outro — rich text below a grid, above the buttons
   Constrained to a readable measure rather than the full
   1200px container, and centred as a block with the text
   left-aligned so lists and headings still read correctly.
--------------------------------------------------------- */
.section-outro {
  max-width: 820px;
  margin: 48px auto 0;
}

.section-outro > *:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .section-outro { margin-top: 32px; }
}

/* ---------------------------------------------------------
   Multi-column rich text
   Each column is editor content, so the shared .entry-content
   styles apply; only the leading margin needs resetting so a
   column starting with a heading lines up with its neighbours.
--------------------------------------------------------- */
.rich-columns__col > *:first-child { margin-top: 0; }
.rich-columns__col > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------
   CTA SECTION — optional photographic background

   The tint is a gradient layer inside the SAME background
   shorthand as the photo, not a ::before overlay. An overlay
   would need z-index: -1, which forces a stacking context on
   the <section> and traps the z-index of everything inside it.
   Two background layers avoid that entirely.

   These rules sit in theme.css, which is enqueued after
   styles.css, so they beat the .section--cta / .section--cta-simple
   background declarations at equal specificity.

   The rgba values mirror --color-primary-dark (#2C4C71) and
   --color-primary (#365F8C). They are literal because a gradient
   stop needs an alpha channel and the palette variables are hex;
   change them here too if the palette moves.
--------------------------------------------------------- */
.section--cta-image {
  /* Fallback colour, so the white text stays readable if the image fails. */
  background-color: var(--color-primary-dark);
  background-image:
    linear-gradient(135deg, rgba(44, 76, 113, 0.88), rgba(54, 95, 140, 0.80)),
    var(--cta-bg-image, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.section--cta-image.cta-tint--light {
  background-image:
    linear-gradient(135deg, rgba(44, 76, 113, 0.70), rgba(54, 95, 140, 0.58)),
    var(--cta-bg-image, none);
}

.section--cta-image.cta-tint--strong {
  background-image:
    linear-gradient(135deg, rgba(44, 76, 113, 0.96), rgba(54, 95, 140, 0.92)),
    var(--cta-bg-image, none);
}

/* The compact style's decorative circles read as smudges over a photograph.
   The template already omits them, this covers any hand-written markup. */
.section--cta-image .cta-simple__decor {
  display: none;
}

/* ---------------------------------------------------------
   CURVED TOP EDGE (section settings -> "Curved top edge")

   The wave is a ::before that sits entirely ABOVE the section
   box (bottom: 100%), overlapping whatever comes before it, so
   the section's own background and padding are untouched.

   It is a mask plus a flat background-colour rather than an SVG
   with a baked-in fill, so one shape serves every background
   choice: --section-wave-color is all that changes.

   The z-index goes on the ::before, never on the section. A
   positioned pseudo-element already paints above the plain
   content it overlaps, but not above a preceding element that
   raised itself (.marquee is z-index: 1, .hero__grid is 2,
   .card__tag is 2), so the wave needs 3 to clear them - and it
   stays below the dropdowns and modals at 10 and up. Keeping it
   off the <section> means the section needs only position:
   relative, which creates no stacking context to trap children.
--------------------------------------------------------- */
.section-wave-top {
  position: relative;
  --section-wave-color: var(--color-white);
}

.section-wave-top::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  /* -1px kills the hairline gap sub-pixel rounding can leave at the seam. */
  margin-bottom: -1px;
  height: 68px;
  z-index: 3;
  background-color: var(--section-wave-color);
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C160,44 320,36 520,52 C700,66 860,82 1020,76 C1180,70 1310,52 1440,42 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C160,44 320,36 520,52 C700,66 860,82 1020,76 C1180,70 1310,52 1440,42 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The wave colour per background choice. These come after the block above
   so they win at equal specificity. */
.section--tint { --section-wave-color: #EEF4FA; }
.section--dark { --section-wave-color: var(--color-navy); }
.section--info { --section-wave-color: var(--color-white); }
.cta-bar,
.section--cta-simple { --section-wave-color: var(--color-primary); }
.marquee { --section-wave-color: var(--color-white); }
.hero,
.page-hero { --section-wave-color: #EEF4FA; }
/* .section--cta is a gradient and .section--cta-image a photograph; a wave can
   only be one flat colour, so both take the gradient's darker end. */
.section--cta { --section-wave-color: var(--color-primary-dark); }

/* Sections that clip their own decoration would clip the wave too. clip-path
   replaces overflow so they still clip left, right and bottom, but let the
   wave through the top. */
.marquee.section-wave-top,
.section--cta-simple.section-wave-top {
  overflow: visible;
  clip-path: inset(-68px 0 0 0);
}

@media (max-width: 767px) {
  .section-wave-top::before { height: 40px; }
  .marquee.section-wave-top,
  .section--cta-simple.section-wave-top { clip-path: inset(-40px 0 0 0); }
}

/* ---------------------------------------------------------
   FOOTER BADGE IMAGE (Site Settings -> Footer -> Footer image)
   Sits under the rating badge in the first footer column.
--------------------------------------------------------- */
.footer-image {
  display: inline-block;
  margin-top: 24px;
  /* The link must not stretch to the column width, or the focus ring and any
     hover state would extend well past the badge. */
  max-width: 100%;
}

.footer-image img {
  display: block;
  /* Capped rather than stretched, so a small badge keeps its own size. */
  max-width: 180px;
  height: auto;
  border-radius: var(--radius-sm);
}

a.footer-image {
  transition: opacity var(--transition);
}

a.footer-image:hover,
a.footer-image:focus-visible {
  opacity: 0.85;
}