/* =====================================================================
   KNN IMMIGRATION PATHWAY — THEME LAYER
   Loads AFTER knn-design-system.css (the approved KNN Sports model).
   Re-themes the family design system for the Immigration vertical:
     · Signature accent: GOLD (authority / legacy) instead of cerise.
     · Same typography (Archivo Expanded + Hanken Grotesk), same diagonal
       shard + cut-corner devices, same spacing/motion tokens.
   Two golds, contrast-checked:
     --imm-gold        #C9A25E  → CTAs + accents ON DARK (7.2:1 vs navy)
     --imm-gold-deep   #8A6C3C  → text accents ON LIGHT (4.7:1 vs paper)
   ===================================================================== */

.knn {
  /* Re-point the system accent: everything referencing var(--cerise)
     (buttons, nav underline, footer border, social hover) turns gold. */
  --cerise:       #C9A25E;
  --cerise-dark:  #B08A44;
  --gold:         #C9A25E;
  --shadow-cerise: 0 14px 34px rgba(176, 142, 80, .35);
}

/* Primary buttons are gold → text must be navy, not white (contrast). */
.knn .knn-btn--primary,
.knn .knn-nav a.knn-btn,
.knn .knn-nav .knn-btn--primary,
.knn a.knn-btn--primary { color: var(--navy-deep); }
.knn .knn-btn--primary:hover { background: var(--cerise-dark); color: var(--navy-deep); }

/* Eyebrows: deep gold on light, bright gold on dark. */
.knn .knn-eyebrow { color: #8A6C3C; }
.knn .knn-eyebrow::before { background: #C9A25E; }
.knn .knn-eyebrow--ondark { color: #D9BB80; }
.knn .knn-eyebrow--ondark::before { background: #C9A25E; }

/* Focus ring on inputs: gold instead of hardcoded cerise rgba. */
.knn .knn-input:focus, .knn .knn-select:focus, .knn .knn-textarea:focus {
  border-color: #C9A25E; box-shadow: 0 0 0 3px rgba(201, 162, 94, .24);
}

/* Brand lockup accent. */
.knn .knn-brand .knn-accent { color: #C9A25E; }

/* Inline accent word on light sections needs the deep gold. */
.knn .knn-section--paper .knn-accent,
.knn .knn-section--white .knn-accent { color: #8A6C3C; }

/* ================= Immigration-specific components ================= */

/* — Contact top bar (Insonis pattern: contact strip attached to the header) — */
.imm-topbar {
  background: var(--navy-deep); color: var(--on-dark-soft);
  border-bottom: 1px solid var(--hairline-dark);
  font-size: .8125rem;
}
.imm-topbar__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--sp-3) var(--sp-5); padding-block: .6em;
}
.imm-topbar__group { display: flex; align-items: center; gap: var(--sp-5); min-width: 0; }
.imm-topbar a { display: inline-flex; align-items: center; gap: .5em; color: var(--on-dark-soft);
  transition: color var(--t-fast) var(--ease); white-space: nowrap; }
.imm-topbar a:hover { color: #D9BB80; }
.imm-topbar svg { width: 15px; height: 15px; flex: 0 0 auto; }
.imm-topbar__loc { color: var(--on-dark-faint); white-space: nowrap; }
@media (max-width: 700px) {
  /* qualified: .imm-topbar a (class+type) would outrank a lone class */
  .imm-topbar .imm-topbar__loc, .imm-topbar a.imm-topbar__mail { display: none; }
}

/* — Mid-page CTA strip (Insonis banner, in gold) — */
.imm-ctastrip {
  background: linear-gradient(120deg, #C9A25E, #B08A44);
  color: var(--navy-deep);
}
.imm-ctastrip__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding-block: clamp(2.5rem, 1.8rem + 2.8vw, 4rem);
}
.imm-ctastrip h2 { color: var(--navy-deep); margin: 0 0 .15em; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem); }
.imm-ctastrip p { margin: 0; color: rgba(6,17,42,.78); font-weight: 600; }
/* .knn a (class+type) outranks a lone class — qualify to keep the label white */
.knn .imm-btn-navy, .knn a.imm-btn-navy { background: var(--navy-deep); color: #fff; }
.knn .imm-btn-navy:hover, .knn a.imm-btn-navy:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

/* — Legacy word-stats (Insonis counters, qualitative) — */
.imm-legacy-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-7); }
.imm-legacy-stats .knn-stat__num { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.1; }
@media (max-width: 760px) { .imm-legacy-stats { grid-template-columns: 1fr; } }

/* — FAQ accordion (in place of stock-testimonials: real answers build the trust) — */
.imm-faq { display: grid; gap: var(--sp-4); max-width: 880px; }
.imm-faq__item {
  background: var(--white); border: 1px solid var(--hairline-light);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  box-shadow: var(--shadow-sm);
}
.imm-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6); cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.02rem; color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.imm-faq__item summary::-webkit-details-marker { display: none; }
.imm-faq__item summary:hover { color: #8A6C3C; }
.imm-faq__item summary svg {
  flex: 0 0 auto; width: 20px; height: 20px; color: #8A6C3C;
  transition: transform var(--t-med) var(--ease);
}
.imm-faq__item[open] summary svg { transform: rotate(45deg); }
.imm-faq__a { padding: 0 var(--sp-6) var(--sp-5); }
.imm-faq__a p { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); max-width: none; }

/* — Hero (typographic, no photo: navy field + gold shard geometry) — */
.imm-hero {
  position: relative; background: var(--navy); color: var(--on-dark); overflow: hidden;
}
.imm-hero::before {
  /* large diagonal gold shard bleeding from the right edge */
  content: ""; position: absolute; inset: 0 0 0 auto; width: 46%;
  background: linear-gradient(160deg, rgba(201,162,94,.16), rgba(201,162,94,.03) 55%, transparent);
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.imm-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--hairline-dark);
}

/* Photographic hero: the image already carries navy-left composition;
   the gradient guarantees headline contrast on any crop. */
.imm-hero--photo::before { display: none; }
.imm-hero__bg { position: absolute; inset: 0; z-index: 0; }
.imm-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; display: block; }
.imm-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(6,17,42,.96) 0%, rgba(14,27,46,.86) 34%, rgba(14,27,46,.5) 60%, rgba(14,27,46,.12) 82%);
}
.imm-hero--veil .imm-hero__bg::after {
  /* thank-you hero: uniform ambient veil (subject sits under the rail column) */
  background: linear-gradient(95deg, rgba(6,17,42,.97) 0%, rgba(14,27,46,.9) 40%, rgba(14,27,46,.78) 100%);
}
.imm-hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.25fr .85fr; gap: var(--sp-8);
  align-items: center; padding-block: clamp(4.5rem, 3rem + 7vw, 8.5rem);
}
.imm-hero h1 { color: #fff; font-size: var(--fs-h1); margin-bottom: .35em; }
.imm-hero .knn-lead { color: var(--on-dark-soft); max-width: 54ch; }
.imm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.imm-hero__actions .knn-btn { max-width: 100%; }

/* Rail row variant (landing hero): copy keeps the left column of the photo,
   the 3 steps sit in a horizontal band at the bottom of the hero. */
.imm-hero--railrow .imm-hero__inner {
  grid-template-columns: 1.25fr .85fr;
  padding-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}
.imm-hero__railrow {
  position: relative; z-index: 2;
  padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}
.imm-rail--row { grid-template-columns: repeat(3, 1fr); }
.imm-rail--row::before { display: none; }
.imm-rail--row .imm-rail__step { height: 100%; }
@media (max-width: 1020px) {
  .imm-rail--row { grid-template-columns: 1fr; }
  .imm-rail--row::before { display: block; }
}

/* — Journey rail (hero right column): 3 connected steps — */
.imm-rail { position: relative; display: grid; gap: var(--sp-4); }
.imm-rail::before {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px;
  background: linear-gradient(#C9A25E, rgba(201,162,94,.12));
}
.imm-rail__step {
  position: relative; display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--navy-700); border: 1px solid var(--hairline-dark);
  padding: var(--sp-5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.imm-rail__icon {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  background: rgba(201,162,94,.14); color: #D9BB80; border: 1px solid rgba(201,162,94,.35);
  border-radius: 50%;
}
.imm-rail__icon svg { width: 22px; height: 22px; }
.imm-rail__step h3 { font-size: 1.02rem; margin: 0 0 .25em; color: #fff; text-transform: none; letter-spacing: 0; }
.imm-rail__step p { margin: 0; font-size: var(--fs-small); color: var(--on-dark-soft); max-width: none; }

/* — Caminhos: 3×2 photo tiles (reference pattern: bg photo + veil,
     round icon badge, accent title, link at the bottom) — */
/* Full-width head: the 56ch cap stacked the title into 5 lines */
.imm-paths-head { text-align: center; margin-inline: auto; max-width: none; }
.imm-paths-head .knn-eyebrow { justify-content: center; }
.imm-paths-head .knn-lead { max-width: 60ch; margin-inline: auto; }
.imm-paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.imm-path-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 340px; padding: var(--sp-6); overflow: hidden; color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-card)), calc(100% - var(--cut-card)) 100%, 0 100%);
}
.imm-path-tile__bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease);
}
.imm-path-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,17,42,.30) 0%, rgba(6,17,42,.5) 50%, rgba(6,17,42,.88) 100%);
}
.imm-path-tile:hover .imm-path-tile__bg { transform: scale(1.05); }
.imm-path-tile__icon {
  position: absolute; top: var(--sp-5); left: var(--sp-5); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: #C9A25E; color: var(--navy-deep);
}
.imm-path-tile__icon svg { width: 22px; height: 22px; }
.imm-path-tile__body { position: relative; z-index: 2; }
.imm-path-tile__body h3 { color: #D9BB80; font-size: 1.2rem; text-transform: none; letter-spacing: 0; margin-bottom: .3em; }
.imm-path-tile__body p { color: rgba(255,255,255,.88); font-size: var(--fs-small); margin: 0 0 .8em; max-width: none; }
.imm-path-tile__link {
  display: inline-flex; align-items: center; gap: .45em;
  color: #D9BB80; font-weight: 700; font-size: var(--fs-small);
  text-decoration: underline; text-underline-offset: 4px;
}
.imm-path-tile__link svg { width: 1em; height: 1em; }
@media (max-width: 1020px) { .imm-paths-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .imm-paths-grid { grid-template-columns: 1fr; }
  .imm-path-tile { min-height: 280px; }
}

/* Side media inside split columns */
.imm-side-media { margin: 0 0 var(--sp-6); }

/* — Missão (reference layout: big head, 2-col intro, left column with
     subhead + checklist + dark CTA box, right column with copy + photo) — */
.imm-mission__intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-8);
  margin-bottom: var(--sp-8);
}
.imm-mission__intro p { margin: 0; max-width: none; }
.imm-mission__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7) var(--sp-8); align-items: start; }
.imm-mission__list li + li { margin-top: var(--sp-3); }
/* single-line items like the reference (system strong is display:block) */
.knn .imm-mission__list strong { display: inline; }
.imm-mission__cta {
  margin-top: var(--sp-7); background: var(--navy-deep); color: #fff;
  padding: var(--sp-6); display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.imm-mission__cta h3 { color: #fff; margin: 0; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem); }
/* .knn-section--white .knn-accent paints deep gold — inside the navy box it needs the bright gold */
.knn .imm-mission__cta .knn-accent { color: #D9BB80; }
.imm-mission__photo { margin: var(--sp-6) 0 0; aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .imm-mission__intro, .imm-mission__cols { grid-template-columns: 1fr; }
}

/* — "Como funciona" timeline (horizontal 4-up on desktop, vertical on mobile) — */
.imm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); counter-reset: imm-step; }
.imm-steps__item {
  position: relative; background: var(--navy-700); border: 1px solid var(--hairline-dark);
  padding: var(--sp-6) var(--sp-5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.imm-steps__item::before {
  counter-increment: imm-step; content: "0" counter(imm-step);
  display: block; font-family: var(--font-display); font-stretch: 125%; font-weight: 900;
  font-size: 2rem; line-height: 1; color: #C9A25E; margin-bottom: var(--sp-4);
}
.imm-steps__item h3 { font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: #fff; margin-bottom: .4em; }
.imm-steps__item p { margin: 0; font-size: var(--fs-small); color: var(--on-dark-soft); max-width: none; }

/* — Lead form panel (Etapa 1) — */
.imm-form-panel {
  background: var(--white); color: var(--ink);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  box-shadow: var(--shadow-lg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
/* .knn-section--deep h3 paints headings white — restore ink inside the white panel */
.imm-form-panel h3 { text-transform: none; letter-spacing: 0; color: var(--ink); }
.imm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
.imm-form-grid .imm-span2 { grid-column: 1 / -1; }
.imm-consent { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-5); }
.imm-consent input {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: .2em; accent-color: #8A6C3C; cursor: pointer;
}
.imm-consent label { font-size: .84rem; line-height: 1.55; color: var(--ink-soft); cursor: pointer; }

/* Honeypot anti-spam: invisível para pessoas, irresistível para robôs */
.imm-hp { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }

/* — Objetivo pills (Insonis quote-type tabs, tap-friendly on mobile) — */
.imm-objetivo { border: 0; padding: 0; }
.imm-objetivo legend { padding: 0; }
.imm-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.imm-pill { position: relative; }
.imm-pill input { position: absolute; opacity: 0; pointer-events: none; }
.imm-pill span {
  display: inline-block; padding: .5em 1.05em; border: 1.5px solid var(--hairline-light);
  border-radius: var(--r-pill); font-size: .875rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.imm-pill:hover span { border-color: #C9A25E; color: #8A6C3C; }
.imm-pill input:checked + span { background: #C9A25E; border-color: #C9A25E; color: var(--navy-deep); }
.imm-pill input:focus-visible + span { outline: 3px solid rgba(201,162,94,.5); outline-offset: 2px; }

/* Trust bullets next to the form */
.imm-trustlist { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.imm-trustlist li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--on-dark-soft); font-size: var(--fs-small); }
.imm-trustlist svg { flex: 0 0 auto; width: 20px; height: 20px; color: #C9A25E; margin-top: .15em; }
.imm-trustlist strong { color: #fff; display: block; }

/* — Manifesto pull-lines (legacy section) — */
.imm-manifesto-lines { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.imm-manifesto-lines li {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: clamp(1.05rem, .9rem + .9vw, 1.5rem); line-height: 1.25; text-transform: uppercase;
  letter-spacing: -.01em; color: #fff;
}
.imm-manifesto-lines li span { color: #C9A25E; }

/* — Final word band (photo background + navy veil) — */
.imm-finalband { position: relative; overflow: hidden; }
.imm-finalband p { max-width: none; }
.imm-finalband__bg { position: absolute; inset: 0; z-index: 0; }
.imm-finalband__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; }
.imm-finalband__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,17,42,.86) 0%, rgba(6,17,42,.72) 50%, rgba(6,17,42,.9) 100%);
}
.imm-finalband > .knn-container { position: relative; z-index: 2; }

/* Footer: long unbreakable tokens (e-mail) must wrap inside their grid column. */
.knn .knn-footer__top > div { min-width: 0; }
.knn .knn-footer a, .knn .knn-footer li { overflow-wrap: anywhere; }

/* Grid blowout guards: intrinsic min-content (e.g. long <select> options)
   must never widen a track beyond the viewport. */
.knn .knn-split > *, .imm-form-grid > .knn-field, .imm-hero__inner > * { min-width: 0; }
.knn .knn-input, .knn .knn-select, .knn .knn-textarea { min-width: 0; max-width: 100%; }

/* ============================ Responsive ============================ */
@media (max-width: 1020px) {
  .imm-hero__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  .imm-steps { grid-template-columns: 1fr 1fr; }
  /* Stacked hero: vertical gradient keeps copy readable over the photo */
  .imm-hero__bg img { object-position: 70% center; }
  .imm-hero__bg::after, .imm-hero--veil .imm-hero__bg::after {
    background: linear-gradient(180deg, rgba(6,17,42,.66) 0%, rgba(6,17,42,.88) 55%, rgba(6,17,42,.97) 100%);
  }
}
@media (max-width: 760px) {
  .imm-form-grid { grid-template-columns: 1fr; }
  .imm-steps { grid-template-columns: 1fr; }
  /* Long PT-BR button labels must wrap instead of overflowing the viewport. */
  .knn .knn-btn { white-space: normal; max-width: 100%; }
  /* Brand tagline inherits nowrap from .knn-brand — let it wrap on small screens. */
  .knn .knn-brand { white-space: normal; }
  .knn .knn-brand small { letter-spacing: .18em; }
}
@media (max-width: 560px) {
  /* Header lockup: keep only "Pathway" on narrow screens (full tagline wraps badly). */
  .knn-header .knn-brand .imm-tagline { display: none; }
}

/* Simple header nav (thank-you page): a plain inline link, never the off-canvas drawer. */
.imm-nav-simple { display: flex; }
@media (max-width: 960px) {
  .imm-nav-simple {
    position: static; width: auto; flex-direction: row; align-items: center;
    background: transparent; padding: 0; box-shadow: none; margin-left: auto;
  }
  .imm-nav-simple a { font-size: .9rem; padding-block: .4em; }
}