/* ==========================================================================
   TFAC theme tokens, type, and buttons
   Load AFTER tailwind.css in the layout so these win over preflight.
   Plain CSS on purpose: no build step, and it is valid SCSS if you migrate.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --tfac-denim: #2a4655;
  --tfac-denim-dark: #1f3540;
  --tfac-sand: #fbf7ef;

  /* Heading knob: 1 = base, 1.1 = 10% bigger, 0.95 = 5% smaller */
  --type-scale: 1;

  /* Heading sizes (fluid: min, preferred, max), in px, all multiplied by --type-scale.
     px because the theme shrinks the root font size, which made rem-based sizes tiny. */
  --fs-display: clamp(calc(30px * var(--type-scale)), calc(3.8vw * var(--type-scale)), calc(46px * var(--type-scale)));  /* hero headline */
  --fs-h2:      clamp(calc(25px * var(--type-scale)), calc(2.8vw * var(--type-scale)), calc(36px * var(--type-scale)));  /* section titles */
  --fs-h3:      clamp(calc(19px * var(--type-scale)), calc(1.7vw * var(--type-scale)), calc(23px * var(--type-scale)));  /* card and item titles */

  /* Reading text sizes, in px so they don't depend on the theme's root font size.
     Base sizes sit just under the TFC style guide (body 18px, lead 22px, small 14px).
     Each knob: 1 = base size, 1.1 = 10% bigger. Headings ignore these. */
  --text-scale:    1;     /* body and lead */
  --small-scale:   1;     /* meta, dates, captions, addresses */
  --nav-scale:     1;     /* main nav links */
  --eyebrow-scale: 1;     /* uppercase labels (eyebrows, kickers) */
  --button-scale:  1;     /* button text */

  --fs-lead:    calc(19px * var(--text-scale));
  --fs-body:    calc(17px * var(--text-scale));
  --fs-small:   calc(14px * var(--small-scale));
  --fs-nav:     calc(14px * var(--nav-scale));
  --fs-eyebrow: calc(12px * var(--eyebrow-scale));
  --fs-button:  calc(13px * var(--button-scale));

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --tracking-caps: 0.1em;   /* brand: kicker at 100 letter spacing */

  /* Fonts (brand guide)
     Serif: Karmina, from Adobe Fonts. Needs the kit link in Site.Master;
     until then it falls back to Georgia.
     Sans: Helvetica Neue, built into Apple devices; Arial elsewhere. */
  --font-serif: "karmina", Georgia, "Times New Roman", serif;
  --font-sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --content-max: 1200px;
  --gutter: 24px;
  --section-y: clamp(64px, 9vw, 110px);
  --radius-btn: 6px;
  --radius-card: 16px;

  /* Height of the fixed nav bar, so first sections can clear it.
     Check #mainNav in DevTools and adjust if needed. */
  --nav-height: 132px;
}

@media (max-width: 991px) {
  :root { --nav-height: 80px; }
}

@media (max-width: 600px) {
  :root { --gutter: 18px; }
}

/* ---------- Theme fixes ---------- */
/* theme.less fades the whole <footer> to 50% until hover; keep it solid */
footer {
  opacity: 1 !important;
  padding-bottom: 0;
}

/* ---------- Base type ---------- */
body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Bootstrap and the theme set fixed sizes on these, so restate them */
p, li, dd, dt, td, th, address, blockquote,
.form-control, label {
  font-size: var(--fs-body);
}

/* Text inside smaller containers (cards, meta lines) still follows its parent */
.text-meta p, .eyebrow p, small p { font-size: inherit; }

/* ---------- Main nav (Compass) ---------- */
#mainNav .navbar-nav > li > a,
#mainNav .sf-menu > li > a,
#mainNav .nav > li > a {
  font-size: var(--fs-nav) !important;
}

/* Dropdown items a touch smaller than the top level */
#mainNav .dropdown-menu a,
#mainNav .sf-menu ul a {
  font-size: calc(var(--fs-nav) * 0.95) !important;
}

/* ---------- Fonts ----------
   Serif (Karmina): Headline 1, Headline 2, body text
   Sans (Helvetica Neue): Headline 3 and smaller, kickers, nav, buttons, forms, meta */
body {
  font-family: var(--font-serif);
}

h1, .h1, h2, .h2,
.display-1, .display-2,
.page-hero-title, .hero-text {
  font-family: var(--font-serif);
  font-weight: 400;
}

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-sans);
}

/* Interface text stays sans */
#mainNav, #mainNav a,
.btn, .btn-tfac, button,
input, select, textarea, .form-control, label,
.eyebrow, .kicker, .text-meta, small, .small,
dt, th, .table,
.ant-select, .ant-select-selection-item {
  font-family: var(--font-sans);
}

/* Quote: sans italic, muted (brand guide) */
blockquote {
  font-family: var(--font-sans);
  font-style: italic;
  opacity: 0.8;
}

/* Helpers matching the TFC style guide classes */
.font-karmina   { font-family: var(--font-serif) !important; }
.font-helvetica { font-family: var(--font-sans) !important; }

h1, .h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 700;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.text-meta {
  font-size: var(--fs-small);
  line-height: 1.5;
  opacity: 0.75;
}

.eyebrow, .kicker {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ---------- Layout helpers ---------- */
.tfac-section {
  padding-block: var(--section-y);
}

.tfac-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(380px, 60vh, 620px);
  overflow: hidden;
  background: var(--tfac-denim);
  color: var(--tfac-sand);
}

.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Focal point: set per image with style="--focus: 50% 20%" (left-right, top-bottom).
     Lower second number = keep more of the top of the photo (faces). */
  object-position: var(--focus, 50% 30%);
}

.page-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 35, 43, 0.88) 0%, rgba(20, 35, 43, 0.45) 55%, rgba(20, 35, 43, 0.25) 100%);
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 120px var(--gutter) clamp(40px, 6vw, 72px);
}

.page-hero-title {
  color: var(--tfac-sand);
  margin: 0 0 16px;
}

.page-hero-lead {
  color: var(--tfac-sand);
  max-width: 640px;
  margin: 0;
  opacity: 0.92;
}

/* ---------- Compact page header (no photo) ----------
   For event detail, registration, my account, login.
   Clears the fixed nav with --nav-height. */
.tfac-header {
  background: var(--tfac-denim);
  color: var(--tfac-sand);
  padding-top: calc(var(--nav-height) + clamp(32px, 5vw, 56px)) !important;
  padding-bottom: clamp(32px, 5vw, 56px) !important;
}
.tfac-header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.tfac-header .eyebrow {
  color: var(--tfac-sand);
  opacity: 0.75;
  margin: 0 0 10px;
}
.tfac-header-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--tfac-sand);
  margin: 0;
}
.tfac-header-lead {
  font-size: var(--fs-lead);
  color: var(--tfac-sand);
  opacity: 0.85;
  max-width: 640px;
  margin: 12px 0 0;
}

/* ---------- Buttons (squared) ---------- */
.btn-tfac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 2px solid var(--tfac-denim);
  border-radius: var(--radius-btn);
  background: var(--tfac-denim);
  color: var(--tfac-sand);
  font-size: var(--fs-button);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-tfac:hover {
  background: var(--tfac-denim-dark);
  border-color: var(--tfac-denim-dark);
  color: var(--tfac-sand);
  text-decoration: none;
}

/* Outline: denim on light backgrounds */
.btn-tfac--outline {
  background: transparent;
  color: var(--tfac-denim);
}

.btn-tfac--outline:hover {
  background: var(--tfac-denim);
  border-color: var(--tfac-denim);
  color: var(--tfac-sand);
}

/* Outline light: sand on denim or photo backgrounds */
.btn-tfac--light {
  background: transparent;
  border-color: var(--tfac-sand);
  color: var(--tfac-sand);
}

.btn-tfac--light:hover {
  background: var(--tfac-sand);
  border-color: var(--tfac-sand);
  color: var(--tfac-denim);
}

/* Filled sand: strongest CTA on denim or photo backgrounds */
.btn-tfac--sand {
  background: var(--tfac-sand);
  border-color: var(--tfac-sand);
  color: var(--tfac-denim);
}

.btn-tfac--sand:hover {
  background: transparent;
  border-color: var(--tfac-sand);
  color: var(--tfac-sand);
}

.btn-tfac:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.btn-tfac--block {
  width: 100%;
}

/* Small: for lists, cards, and map popups */
.btn-tfac--sm {
  padding: 10px 16px;
  gap: 8px;
}

/* Keep button text colors through every link state
   (the theme's a:focus and a:visited otherwise win) */
a.btn-tfac,
a.btn-tfac:link,
a.btn-tfac:visited,
a.btn-tfac:focus,
a.btn-tfac:active {
  color: var(--tfac-sand);
  text-decoration: none !important;
}
a.btn-tfac--outline,
a.btn-tfac--outline:link,
a.btn-tfac--outline:visited,
a.btn-tfac--outline:focus,
a.btn-tfac--sand,
a.btn-tfac--sand:link,
a.btn-tfac--sand:visited,
a.btn-tfac--sand:focus {
  color: var(--tfac-denim);
}
a.btn-tfac--light,
a.btn-tfac--light:link,
a.btn-tfac--light:visited,
a.btn-tfac--light:focus {
  color: var(--tfac-sand);
}
.gm-style a.btn-tfac:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   Events bento (shared by the homepage and the events page)
   ========================================================================== */
.events-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  gap: 16px;
}

.event-tile.featured,
.promo-tile.featured {
  grid-column: span 2;
  grid-row: span 2;
}

.event-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: var(--tfac-denim);
  color: var(--tfac-sand);
  box-shadow: 0 8px 24px rgba(42, 70, 85, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-tile:hover,
.event-tile:focus {
  color: var(--tfac-sand);
  text-decoration: none;
}

.event-tile:focus-visible {
  outline: 3px solid var(--tfac-denim);
  outline-offset: 3px;
}

.event-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.5s ease;
}

.event-tile-img.is-loaded { opacity: 1; }

.event-tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 47, 57, 0.92) 0%, rgba(27, 47, 57, 0.4) 45%, rgba(27, 47, 57, 0) 70%);
}

/* Date badge (graphic element, sized on its own) */
.event-date {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 8px 12px;
  background: var(--tfac-sand);
  color: var(--tfac-denim);
  border-radius: 10px;
  line-height: 1;
}

.event-date-month {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.event-date-day {
  font-size: 30px;
  font-weight: 700;
  margin-top: 4px;
}

.event-tile.featured .event-date { top: 20px; left: 20px; min-width: 76px; padding: 10px 14px; }
.event-tile.featured .event-date-month { font-size: 16px; }
.event-tile.featured .event-date-day { font-size: 38px; }

/* Flags */
.event-flags {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.event-flag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
}

.members-flag { background: var(--tfac-denim); color: var(--tfac-sand); }
.online-flag { background: #d88233; color: #ffffff; }

/* Tile text */
.event-tile-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 18px 20px;
}

.event-name {
  color: var(--tfac-sand);
  margin: 0 0 6px;
}

.event-tile.featured .event-name {
  font-size: calc(var(--fs-h3) * 1.3);
  line-height: var(--lh-tight);
}

.event-tile.featured .event-tile-body { padding: 28px 30px; }

.event-meta {
  font-size: var(--fs-small);
  margin: 0;
  opacity: 0.9;
}

.event-tile.featured .event-meta { font-size: var(--fs-body); }
.event-meta-sep { margin: 0 8px; }

/* Promo tiles */
.promo-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-radius: 14px;
  background: var(--tfac-denim);
  color: var(--tfac-sand);
  box-shadow: 0 8px 24px rgba(42, 70, 85, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.promo-tile:hover,
.promo-tile:focus {
  color: var(--tfac-sand);
  text-decoration: none;
}

.promo-tile.promo-alt {
  background: transparent;
  color: var(--tfac-denim);
  border: 2px solid var(--tfac-denim);
  box-shadow: none;
}

.promo-icon { font-size: 1.8rem; opacity: 0.85; }

.promo-title {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: inherit;
  margin: 0 0 10px;
}

.promo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}

.promo-link i { transition: transform 0.2s; }

.promo-tile.promo-empty { padding: 36px; }

.promo-eyebrow {
  display: block;
  opacity: 0.75;
  margin-bottom: 12px;
}

.promo-empty .promo-title {
  font-size: calc(var(--fs-h3) * 1.3);
  line-height: var(--lh-tight);
}

.promo-text { opacity: 0.9; max-width: 420px; }

@media (hover: hover) {
  .event-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(42, 70, 85, 0.2);
  }
  .event-tile:hover .event-tile-img { transform: scale(1.05); }
  .promo-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(42, 70, 85, 0.2);
  }
  .promo-tile.promo-alt:hover {
    background: var(--tfac-denim);
    color: var(--tfac-sand);
  }
  .promo-tile:hover .promo-link i { transform: translateX(4px); }
}

@media (max-width: 991px) {
  .events-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 230px;
  }
}

@media (max-width: 640px) {
  .events-bento {
    grid-auto-rows: 170px;
    gap: 10px;
  }

  .event-tile-body { padding: 12px 14px; }
  .event-tile.featured .event-tile-body { padding: 20px; }

  .event-name {
    font-size: var(--fs-body);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .event-tile.featured .event-name { font-size: var(--fs-h3); }

  .event-tile:not(.featured) .event-meta,
  .event-tile:not(.featured) .event-flags { display: none; }

  .event-date { top: 10px; left: 10px; min-width: 52px; padding: 6px 10px; }
  .event-date-month { font-size: 12px; }
  .event-date-day { font-size: 24px; }

  .event-tile.featured .event-date { top: 14px; left: 14px; min-width: 62px; padding: 8px 12px; }
  .event-tile.featured .event-date-month { font-size: 13px; }
  .event-tile.featured .event-date-day { font-size: 30px; }

  .promo-tile { padding: 16px; }
  .promo-tile.promo-empty { padding: 24px; }
  .promo-icon { font-size: 1.4rem; }
  .promo-title { font-size: var(--fs-body); }
  .promo-text { font-size: var(--fs-small); }
}

@media (prefers-reduced-motion: reduce) {
  .event-tile,
  .event-tile-img,
  .promo-tile { transition: none; }
}

/* ==========================================================================
   People grid and bio modal (Team, Coaches)
   ========================================================================== */
.people-section {
  background: var(--tfac-sand);
  color: var(--tfac-denim);
  padding: var(--section-y) 0;
}

.people-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.people-title {
  color: var(--tfac-denim);
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(42, 70, 85, 0.18);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px) clamp(16px, 2vw, 24px);
}

/* Card (a button so it opens the bio for keyboard users too) */
.person-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  color: var(--tfac-denim);
  cursor: pointer;
}

.person-card:focus { outline: none; }

.person-card:focus-visible .person-photo {
  outline: 3px solid var(--tfac-denim);
  outline-offset: 3px;
}

.person-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 14px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: rgba(42, 70, 85, 0.08);
  box-shadow: 0 10px 30px rgba(42, 70, 85, 0.12);
}

.person-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.5s ease;
}

/* Each photo fades in as soon as it arrives */
.person-photo img.is-loaded { opacity: 1; }

.person-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 35, 43, 0.75) 0%, rgba(20, 35, 43, 0) 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.person-more {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tfac-sand);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.person-name {
  font-size: var(--fs-lead);
  font-weight: 800;
  line-height: var(--lh-snug);
}

.person-role {
  font-size: var(--fs-small);
  font-weight: 600;
  margin: 0;
}

.person-church {
  font-size: var(--fs-small);
  margin: 0;
  opacity: 0.7;
}

@media (hover: hover) {
  .person-card:hover .person-photo img { transform: scale(1.04); }
  .person-card:hover .person-photo::after,
  .person-card:hover .person-more { opacity: 1; transform: none; }
}

/* Bio modal */
html:has(.person-modal[open]) { overflow: hidden; }

.person-modal {
  width: min(620px, calc(100vw - 32px));
  max-height: 85vh;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: var(--tfac-sand);
  color: var(--tfac-denim);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  overflow: auto;
}

.person-modal[open] { animation: person-in 0.3s ease; }

.person-modal::backdrop {
  background: rgba(20, 35, 43, 0.65);
  backdrop-filter: blur(3px);
}

.person-modal form { margin: 0; }

.person-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid var(--tfac-denim);
  background: var(--tfac-sand);
  color: var(--tfac-denim);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.person-modal-close:hover {
  background: var(--tfac-denim);
  color: var(--tfac-sand);
}

.person-modal-inner {
  padding: clamp(28px, 5vw, 44px);
}

.person-modal-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-right: 48px;
}

.person-modal-photo {
  flex: none;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  object-fit: cover;
}

.person-modal-name {
  margin: 0 0 6px;
}

.person-modal-intro {
  margin: 0 0 16px;
}

.person-modal-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-bottom: 24px;
}

.person-modal-body > :first-child { margin-top: 0; }
.person-modal-body > :last-child { margin-bottom: 0; }

@keyframes person-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Tablet and mobile */
@media (max-width: 991px) {
  .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-modal-head { flex-direction: column; align-items: flex-start; }
  .person-modal-photo { width: 88px; height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .person-photo img,
  .person-photo::after,
  .person-more { transition: none; }
  .person-modal[open] { animation: none; }
}

/* Denim variant: add theme = 'denim' in the block settings */
.people-section--denim {
  background: var(--tfac-denim);
  color: var(--tfac-sand);
}

.people-section--denim .people-title {
  color: var(--tfac-sand);
  border-bottom-color: rgba(251, 247, 239, 0.2);
}

.people-section--denim .person-card { color: var(--tfac-sand); }

.people-section--denim .person-card:focus-visible .person-photo {
  outline-color: var(--tfac-sand);
}

.people-section--denim .person-photo {
  background: rgba(251, 247, 239, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Forms (Workflow Entry, contact forms)
   Usage: Block Properties > Advanced Settings > CSS Class = tfac-form
   ========================================================================== */
/* White card centered on a full-width sand band.
   The sand comes from a huge box-shadow that clip-path trims to the band,
   so no wrapper element is needed around the block. */
.tfac-form {
  --form-band: clamp(40px, 7vw, 88px);   /* sand above and below the card */
  position: relative;
  max-width: 880px;
  margin: var(--form-band) auto;
  padding: clamp(28px, 5vw, 56px);
  background: #ffffff;
  color: var(--tfac-denim);
  border-radius: var(--radius-card);
  box-shadow:
    0 20px 50px rgba(42, 70, 85, 0.12),
    0 0 0 100vmax var(--tfac-sand);
  clip-path: inset(calc(var(--form-band) * -1) -100vmax);
}

/* Header text Rock renders above the fields */
.tfac-form > h1:first-child,
.tfac-form > h2:first-child,
.tfac-form .workflow-form-header h1,
.tfac-form .workflow-form-header h2 {
  font-size: var(--fs-h3);
  color: var(--tfac-denim);
  text-align: left;
  margin: 0 0 28px;
}

/* Phone country picker: match the other inputs */
.tfac-form .input-group-btn .btn,
.tfac-form .input-group .dropdown-toggle,
.tfac-form .phone-number-box .btn {
  height: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid rgba(42, 70, 85, 0.18);
  border-right: 0;
  border-radius: var(--radius-btn) 0 0 var(--radius-btn);
  background: rgba(42, 70, 85, 0.05);
  color: var(--tfac-denim);
  font-size: var(--fs-small);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 640px) {
  .tfac-form {
    --form-band: 24px;
    margin-left: var(--gutter);
    margin-right: var(--gutter);
    padding: 24px 18px;
    border-radius: 12px;
  }
}

/* Optional intro from the form header */
.tfac-form-intro {
  margin-bottom: clamp(28px, 4vw, 40px);
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(42, 70, 85, 0.18);
}

.tfac-form-intro .eyebrow {
  display: block;
  opacity: 0.7;
  margin-bottom: 10px;
}

.tfac-form-intro h2 {
  color: var(--tfac-denim);
  margin: 0 0 12px;
}

.tfac-form-intro p {
  margin: 0;
  opacity: 0.85;
}

/* Labels */
.tfac-form .control-label,
.tfac-form label {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--tfac-denim);
  margin-bottom: 6px;
}

/* Inputs, selects, textareas */
.tfac-form .form-control,
.tfac-form input[type="text"],
.tfac-form input[type="email"],
.tfac-form input[type="tel"],
.tfac-form input[type="url"],
.tfac-form select,
.tfac-form textarea {
  height: auto;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid rgba(42, 70, 85, 0.18);
  border-radius: var(--radius-btn);
  background: #ffffff;
  color: var(--tfac-denim);
  font-size: var(--fs-body);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tfac-form textarea { min-height: 140px; }

.tfac-form .form-control:focus,
.tfac-form input:focus,
.tfac-form select:focus,
.tfac-form textarea:focus {
  border-color: var(--tfac-denim);
  box-shadow: 0 0 0 3px rgba(42, 70, 85, 0.12);
  outline: none;
}

.tfac-form ::placeholder { color: rgba(42, 70, 85, 0.45); }

/* Obsidian dropdowns: the outer box keeps the border, the inner box loses its padding */
.tfac-form .ant-select,
.tfac-form .ant-select.form-control {
  padding: 0 !important;
  min-height: 48px;
  height: 48px;
}
.tfac-form .ant-select .ant-select-selector {
  height: 100% !important;
  padding: 0 40px 0 14px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
}
.tfac-form .ant-select-selection-search-input { height: 100% !important; }
.tfac-form .ant-select-selection-item,
.tfac-form .ant-select-selection-placeholder {
  line-height: 44px !important;
  font-size: var(--fs-body);
  color: var(--tfac-denim);
}
.tfac-form .ant-select-selection-placeholder { color: rgba(42, 70, 85, 0.45); }
.tfac-form .ant-select-arrow {
  right: 14px;
  color: var(--tfac-denim);
}
.tfac-form .ant-select-focused {
  border-color: var(--tfac-denim) !important;
  box-shadow: 0 0 0 3px rgba(42, 70, 85, 0.12) !important;
}

/* Icon boxes on email/website fields */
.tfac-form .input-group-addon,
.tfac-form .input-group-text {
  border: 2px solid rgba(42, 70, 85, 0.18);
  border-right: 0;
  border-radius: var(--radius-btn) 0 0 var(--radius-btn);
  background: rgba(42, 70, 85, 0.05);
  color: var(--tfac-denim);
}

.tfac-form .input-group .form-control:not(:first-child) {
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
}

/* Spacing between fields */
.tfac-form .form-group { margin-bottom: 22px; }

/* Required marker: denim instead of red */
.tfac-form .required-indicator::after,
.tfac-form .required > .control-label::after {
  color: var(--tfac-denim);
}

/* Validation */
.tfac-form .has-error .form-control,
.tfac-form .is-invalid {
  border-color: #b4483a;
}

.tfac-form .help-block,
.tfac-form .invalid-feedback {
  font-size: var(--fs-small);
}

/* Captcha box */
.tfac-form .rock-captcha,
.tfac-form iframe {
  border-radius: var(--radius-btn);
}

/* Submit and other buttons */
.tfac-form .actions,
.tfac-form .form-actions {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(42, 70, 85, 0.12);
}

.tfac-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 2px solid var(--tfac-denim);
  border-radius: var(--radius-btn);
  font-size: var(--fs-button);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  box-shadow: none;
}

.tfac-form .btn-primary {
  background: var(--tfac-denim);
  color: var(--tfac-sand);
}

.tfac-form .btn-primary:hover,
.tfac-form .btn-primary:focus {
  background: var(--tfac-denim-dark);
  border-color: var(--tfac-denim-dark);
  color: var(--tfac-sand);
}

.tfac-form .btn-default,
.tfac-form .btn-link,
.tfac-form .btn-secondary {
  background: transparent;
  color: var(--tfac-denim);
}

/* Optional note under the form */
.tfac-form-footer {
  margin-top: 20px;
  font-size: var(--fs-small);
  opacity: 0.75;
}

@media (max-width: 640px) {
  .tfac-form .btn { width: 100%; }
}