/*
Theme Name: equalbutdifferent Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.3
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* ===========================================================
   Generational Impact Circle — registration form (Fluent Forms)
   Scoped to .fluentform_wrapper_4 so the site's other demo
   forms (Subscription, Contact Form Demo) are untouched.
   Locked palette: black / white / red ember, Source Serif 4 +
   Manrope — same tokens as the homepage build.
   =========================================================== */

.fluentform_wrapper_4 {
  --gic-ink: #000000;
  --gic-paper: #ffffff;
  --gic-ember: #C82830;
  --gic-muted: rgba(0,0,0,.62);
  --gic-muted-soft: rgba(0,0,0,.4);
  --gic-line: rgba(0,0,0,.18);
  --gic-serif: "Source Serif 4", Georgia, serif;
  --gic-sans: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --gic-ember-wash: rgba(200,40,48,.05);

  font-family: var(--gic-sans);
  color: var(--gic-ink);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 760px;
}

.fluentform_wrapper_4 * { box-sizing: border-box; }

.fluentform_wrapper_4 .frm-fluent-form {
  border-top: 1px solid var(--gic-line);
}

.fluentform_wrapper_4 .ff-el-group {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--gic-line);
  margin: 0 !important;
}

/* ---------- labels, required marker, help/tooltip ---------- */
.fluentform_wrapper_4 .ff-el-input--label {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .6rem;
}
.fluentform_wrapper_4 .ff-el-input--label label {
  font-family: var(--gic-sans);
  font-weight: 700;
  font-size: .95rem;
  color: var(--gic-ink);
  margin: 0;
}
.fluentform_wrapper_4 .ff-el-is-required label::after {
  color: var(--gic-ember) !important;
}
.fluentform_wrapper_4 .ff-el-tooltip {
  display: inline-flex;
  cursor: help;
}
.fluentform_wrapper_4 .ff-el-tooltip svg {
  width: 15px;
  height: 15px;
  fill: var(--gic-muted-soft);
  transition: fill .15s ease;
}
.fluentform_wrapper_4 .ff-el-tooltip:hover svg {
  fill: var(--gic-ember);
}

/* ---------- text / email / tel / textarea ---------- */
.fluentform_wrapper_4 .ff-el-form-control {
  width: 100%;
  font-family: var(--gic-sans);
  font-size: 1.05rem;
  color: var(--gic-ink);
  background: var(--gic-paper);
  border: 1px solid var(--gic-line);
  border-radius: 0;
  padding: .85rem 1rem;
  transition: border-color .2s ease;
  box-shadow: none;
}
.fluentform_wrapper_4 .ff-el-form-control:focus {
  outline: none;
  border-color: var(--gic-ember);
  box-shadow: none;
}
.fluentform_wrapper_4 textarea.ff-el-form-control {
  min-height: 110px;
  resize: vertical;
}

/* ---------- radio groups (role / generation / nominated) as segmented pills ---------- */
.fluentform_wrapper_4 .ff-el-input--content:has(.ff-el-form-check-radio) {
  display: flex;
  gap: 2px;
  background: var(--gic-line);
  max-width: 480px;
}
.fluentform_wrapper_4 .ff-el-form-check:has(.ff-el-form-check-radio) {
  flex: 1;
  margin: 0 !important;
}
.fluentform_wrapper_4 .ff-el-form-check-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.fluentform_wrapper_4 .ff-el-form-check-label:has(.ff-el-form-check-radio) {
  display: block;
  text-align: center;
  padding: .9rem .75rem;
  background: var(--gic-paper);
  color: var(--gic-muted);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  margin: 0;
  transition: background .2s ease, color .2s ease;
}
.fluentform_wrapper_4 .ff-el-form-check-label:has(.ff-el-form-check-radio:checked) {
  background: var(--gic-ink);
  color: var(--gic-paper);
}
.fluentform_wrapper_4 .ff-el-form-check-radio:focus-visible + span {
  outline: 2px solid var(--gic-ember);
  outline-offset: -2px;
}

/* ---------- checkbox groups (sector / themes) as a tick-tag grid ---------- */
.fluentform_wrapper_4 .ff-el-input--content:has(.ff-el-form-check-checkbox) {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .5rem;
}
.fluentform_wrapper_4 .ff-el-form-check:has(.ff-el-form-check-checkbox) {
  margin: 0 !important;
}
.fluentform_wrapper_4 .ff-el-form-check-label:has(.ff-el-form-check-checkbox) {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border: 1px solid var(--gic-line);
  font-size: .95rem;
  color: var(--gic-muted);
  cursor: pointer;
  margin: 0;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.fluentform_wrapper_4 .ff-el-form-check-label:has(.ff-el-form-check-checkbox:checked) {
  border-color: var(--gic-ink);
  color: var(--gic-ink);
  background: var(--gic-ember-wash);
}
.fluentform_wrapper_4 .ff-el-form-check-checkbox,
.fluentform_wrapper_4 .fluentform_wrapper_4 input[type="checkbox"] {
  accent-color: var(--gic-ember);
  width: 15px;
  height: 15px;
  margin: 0;
}

/* ---------- "add another" repeater rows (sector_other / themes_other) ---------- */
.fluentform_wrapper_4 [data-type="repeater_field"],
.fluentform_wrapper_4 .ff-el-group table {
  width: 100%;
  border-collapse: collapse;
  margin-top: .75rem;
}
.fluentform_wrapper_4 .ff-el-group table td {
  border: none;
  padding: 0 .5rem .5rem 0;
  vertical-align: middle;
}
.fluentform_wrapper_4 .ff-el-group table input[type="text"] {
  width: 100%;
  font-family: var(--gic-sans);
  font-size: 1.05rem;
  border: 1px solid var(--gic-line);
  border-radius: 0;
  padding: .7rem .9rem;
}
.fluentform_wrapper_4 .ff-el-group table button {
  background: var(--gic-paper);
  border: 1px solid var(--gic-line);
  color: var(--gic-muted);
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
  font-family: var(--gic-sans);
}
.fluentform_wrapper_4 .ff-el-group table button:hover {
  border-color: var(--gic-ember);
  color: var(--gic-ember);
}

/* ---------- file upload (CV) ---------- */
.fluentform_wrapper_4 .ff_file_upload_holder {
  display: inline-flex;
  cursor: pointer;
}
.fluentform_wrapper_4 .ff_upload_btn.ff-btn {
  background: var(--gic-paper);
  border: 1px dashed var(--gic-line);
  color: var(--gic-ink);
  font-family: var(--gic-sans);
  font-weight: 700;
  font-size: .95rem;
  padding: 1rem 1.75rem;
  border-radius: 0;
  transition: border-color .2s ease, background .2s ease;
}
.fluentform_wrapper_4 .ff_file_upload_holder:hover .ff_upload_btn.ff-btn {
  border-color: var(--gic-ember);
  background: var(--gic-ember-wash);
}
.fluentform_wrapper_4 .ff-uploaded-list {
  font-family: var(--gic-sans) !important;
  color: var(--gic-ink) !important;
  font-weight: 600;
}

/* ---------- consent ---------- */
.fluentform_wrapper_4 input[name="consent[]"],
.fluentform_wrapper_4 input[name="consent"] {
  accent-color: var(--gic-ember);
  width: 16px;
  height: 16px;
}
.fluentform_wrapper_4 .ff-el-group:has(input[name="consent[]"]) .ff-el-form-check-label,
.fluentform_wrapper_4 .ff-el-group:has(input[name="consent"]) .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .95rem;
  color: var(--gic-muted);
  cursor: pointer;
}

/* ---------- submit ---------- */
.fluentform_wrapper_4 .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: var(--gic-ink);
  color: var(--gic-paper);
  font-family: var(--gic-sans);
  font-weight: 700;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  padding: 1.05rem 2.3rem;
  border-radius: 999px;
  transition: background .2s ease;
}
.fluentform_wrapper_4 .ff-btn-submit:hover {
  background: var(--gic-ember);
}
.fluentform_wrapper_4 .ff-btn-submit {
  text-transform: none;
  letter-spacing: normal;
}

@media only screen and (max-width: 48em) {
  .fluentform_wrapper_4 .ff-el-input--content:has(.ff-el-form-check-radio) {
    max-width: 100%;
  }
}



@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/* ===========================================================
   GIC registration — page header + section rhythm + glow
   =========================================================== */

/* ---------- page header (added above the form via page content) ---------- */
.gic-page-head {
  max-width: 900px;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  margin: 0 auto;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
}
.gic-page-head .gic-eyebrow {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  color: rgba(0,0,0,.62);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  margin: 0 0 .75rem;
}
.gic-page-head h1 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  max-width: 18ch;
  margin: 0;
  color: #000;
}
.gic-page-head .gic-lede {
  color: rgba(0,0,0,.62);
  max-width: 58ch;
  margin-top: 1rem;
  font-size: .95rem;
}
.gic-form-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 2rem);
}

/* ---------- section kickers ---------- */
.fluentform_wrapper_4 .ff-el-group {
  position: relative;
}
.fluentform_wrapper_4 .ff-el-group:has(input[name="role"]),
.fluentform_wrapper_4 .ff-el-group:has(input[name="fullname"]),
.fluentform_wrapper_4 .ff-el-group:has(input[name="sector[]"]),
.fluentform_wrapper_4 .ff-el-group:has(textarea[name="offer"]),
.fluentform_wrapper_4 .ff-el-group:has(input[name="nominated"]) {
  padding-top: 3rem;
}
.fluentform_wrapper_4 .ff-el-group:has(input[name="role"])::before,
.fluentform_wrapper_4 .ff-el-group:has(input[name="fullname"])::before,
.fluentform_wrapper_4 .ff-el-group:has(input[name="sector[]"])::before,
.fluentform_wrapper_4 .ff-el-group:has(textarea[name="offer"])::before,
.fluentform_wrapper_4 .ff-el-group:has(input[name="nominated"])::before {
  display: block;
  font-family: var(--gic-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .74rem;
  color: var(--gic-ember);
  margin-bottom: 1.25rem;
}
.fluentform_wrapper_4 .ff-el-group:has(input[name="role"])::before { content: "01 — About You"; }
.fluentform_wrapper_4 .ff-el-group:has(input[name="fullname"])::before { content: "02 — Your Background"; }
.fluentform_wrapper_4 .ff-el-group:has(input[name="sector[]"])::before { content: "03 — What Draws You Here"; }
.fluentform_wrapper_4 .ff-el-group:has(textarea[name="offer"])::before { content: "04 — Offer, Need & CV"; }
.fluentform_wrapper_4 .ff-el-group:has(input[name="nominated"])::before { content: "05 — Nomination & Consent"; }
.fluentform_wrapper_4 .ff-el-group:first-child { padding-top: 0 !important; }
.fluentform_wrapper_4 .ff-el-group:first-child::before { display: none; }

/* ---------- border-glow (same technique as the homepage), applied
   directly to the submit button and the segmented radio pills — no
   class hook needed, Fluent Forms owns this markup so we target its
   real selectors. ---------- */
.fluentform_wrapper_4 .ff-btn-submit,
.fluentform_wrapper_4 .ff-el-form-check-label:has(.ff-el-form-check-radio) {
  position: relative;
  isolation: isolate;
}
.fluentform_wrapper_4 .ff-btn-submit::after,
.fluentform_wrapper_4 .ff-el-form-check-label:has(.ff-el-form-check-radio)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(160px circle at var(--mx,50%) var(--my,50%), var(--gic-ember), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}
.fluentform_wrapper_4 .ff-btn-submit::after {
  background: radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.9), transparent 70%);
}
.fluentform_wrapper_4 .ff-btn-submit:hover::after,
.fluentform_wrapper_4 .ff-btn-submit.gic-is-hovered::after,
.fluentform_wrapper_4 .ff-el-form-check-label:has(.ff-el-form-check-radio):hover::after,
.fluentform_wrapper_4 .ff-el-form-check-label.gic-is-hovered::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .fluentform_wrapper_4 .ff-btn-submit::after,
  .fluentform_wrapper_4 .ff-el-form-check-label:has(.ff-el-form-check-radio)::after {
    display: none;
  }
}

/* ---------- success / confirmation message ---------- */
.fluentform_wrapper_4 .ff-message-success {
  border: 1px solid var(--gic-ink);
  border-left: 3px solid var(--gic-ember);
  box-shadow: none;
  border-radius: 0;
  padding: 1.25rem 1.5rem;
  font-family: var(--gic-sans);
  color: var(--gic-ink);
  font-size: .95rem;
  background: var(--gic-paper);
}

@media only screen and (max-width: 48em) {
  .fluentform_wrapper_4 .ff-el-group:has(input[name="role"]),
  .fluentform_wrapper_4 .ff-el-group:has(input[name="fullname"]),
  .fluentform_wrapper_4 .ff-el-group:has(input[name="sector[]"]),
  .fluentform_wrapper_4 .ff-el-group:has(textarea[name="offer"]),
  .fluentform_wrapper_4 .ff-el-group:has(input[name="nominated"]) {
    padding-top: 2.25rem;
  }
}