/* Page layer only. Reuses tokens from home.css */

/* ---------- Hero ---------- */
/* contact.css */
.contact-hero{
  background-image:url('https://halconcaravans.com/assets/img/hero/contact_bg.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;      /* (add if not present) */
  position:relative;
}

:root{
  --hero-ratio: 2796 / 1213;
}


.contact-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28) 42%, rgba(0,0,0,.0) 100%);
  pointer-events:none;
}
.contact-hero__panel{ backdrop-filter: blur(2px); }

/* ---------- Connect With Us ---------- */
.contact-connect{
  background: linear-gradient(180deg,#f7f7f3,#f2f5f8);
  border-block: 2px solid rgba(231,166,35,.25);
  position:relative;
}
.connect-grid{
  display:grid; gap:22px;
  /* 2×2 on desktop/laptop */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px){ .connect-grid{ grid-template-columns:1fr; } }

.connect-card{
  display:grid;
  grid-template-columns: 52px 1fr auto; /* fixed icon column to prevent jitter */
  align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-sm);
  padding:18px;
  transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease;
}
.connect-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color:#d1d5db; }
.connect-card--primary{ background: linear-gradient(180deg,#fffaf0,#fff); border-left:4px solid var(--accent); }
.connect-card--social .social-row{ display:flex; gap:12px; font-size:20px; }
.connect-card__icon{
  width:44px; height:44px; min-width:44px;
  border-radius:12px; display:grid; place-items:center;
  background:#eef2ff; border:1px solid #c7d2fe; color:#1d4ed8;
}
.connect-card__body{ display:flex; flex-direction:column; justify-content:center; }
.connect-card__body h3{ margin:0 0 4px; line-height:1.1; font-weight:600; }
.connect-card__body p{ margin:0; color:#374151; }
.connect-card__chev{ color:#1f2937; opacity:.25; }
.connect-accent{ margin-top:16px; max-width:540px; }
.connect-accent img{ border-radius:14px; box-shadow: var(--shadow-sm); }

/* ---------- Split Form ---------- */
.contact-split__grid{
  display:grid; gap:24px;
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width:1024px){ .contact-split__grid{ grid-template-columns:1fr; } }

.contact-form{ background:#fffdf8; border:1px solid #f1f5f9; }
.contact-form__head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.contact-form__head .badge{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:#fff; border:1px solid #fde68a; color:#b45309;
}

.with-icon{ display:grid; grid-template-columns:24px 1fr; align-items:center; gap:8px; border:1px solid #d1d5db; border-radius:10px; padding:8px 10px; background:#fff; }
.with-icon--textarea{ grid-template-columns:24px 1fr;}
.with-icon:focus-within{ border-color:#f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.18); }

.hc-form select, .hc-form input, .hc-form textarea{ border:0; outline:0; }
.hc-form textarea{ resize:vertical; }

.hc-contact-actions .hc-btn{ position:relative; }
#sendBtn .btn-spinner, #fecBtn .btn-spinner{
  display:none; width:18px; height:18px; border-radius:50%;
  border:3px solid rgba(0,0,0,.15); border-top-color:#000;
  animation: spin 1s linear infinite; margin-left:10px;
}
#sendBtn.loading .btn-inner, #fecBtn.loading .btn-inner{ opacity:0; }
#sendBtn.loading .btn-spinner, #fecBtn.loading .btn-spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg);} }

.form-success{
  margin-top:12px; padding:12px; border-radius:12px; background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; display:flex; gap:10px; align-items:center;
}

/* Visual side */
.contact-visual__media{ border-radius:14px; }
.contact-visual__cap{ color:#475569; margin-top:8px; text-align:center; font-style: italic;}


/* ---------- Founding Explorers Circle ---------- */
.fec{
  background:linear-gradient(180deg,#faf8f3,#f7f7f7);
  border-top:1px solid #ede9d5;
}
.fec-head{ margin-bottom:18px; }
.fec-hero{ position:relative; border-radius:16px; overflow:hidden; }
.fec-hero img{ width:100%; height:260px; object-fit:cover; display:block; }
.fec-hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25),rgba(0,0,0,0)); }
.fec-hero__content{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center; color:#fff; padding:12px;
}
.fec-hero__content h2{ margin:0 0 6px; }
.fec-benefits{
  margin-top:18px;
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){ .fec-benefits{ grid-template-columns:1fr; } }
.fec-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.fec-card:hover{ transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--line); }
.fec-card i{ font-size:22px; margin-bottom:8px; color:#b45309; }
.fec-card h3{ margin:0 0 6px; font-weight:600; }

.fec-form{
  margin-top:18px;
  background:#fff; border:1px solid #f1f5f9; border-radius:16px; padding:16px;
}
.fec-form h3{ margin-top:0; }
.fec-row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-bottom:20px;}
@media (max-width: 900px){ .fec-row{ grid-template-columns:1fr; } }
.fec-success{
  margin-top:12px; padding:12px; border-radius:12px; background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; display:flex; gap:10px; align-items:center;
}

/* Small padding so footer breathes after sections */
.contact-split{ padding-bottom: clamp(48px,8vw,80px); }
.fec{ padding-top: 18px; padding-bottom: clamp(48px,8vw,80px); }

/* Ensure anything marked hidden stays hidden even if other rules set display */
[hidden] { display: none !important; }

/* Success banners: keep flex when visible, but respect [hidden] */
.form-success,
.fec-success {
  display: flex;
}

/* Textarea row: align icon to top and give the textarea a comfy top padding */
.with-icon--textarea { 
  align-items: start;               /* top-align grid cells */
}
.with-icon--textarea i {
  align-self: start;                 /* icon sticks to the top */
  margin-top: 10px;                   /* tiny optical nudge */
}
.with-icon--textarea textarea {
  display: block;
  width: 100%;
  padding-top: 6px;                  /* lift placeholder baseline */
  line-height: 1.45;                 /* nicer placeholder rhythm */
}

/* ---------- 1) Utilities so our 'd-flex flex-row' actually work ---------- */
.d-flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.items-center { align-items: center; }
.gap-10 { gap: 10px; }

/* Apply to the *inner* row that holds the badge + title */
.contact-form__head .flex-row {
  align-items: center;       /* vertically center icon + h3 */
  gap: 10px;
}
.contact-form__head h3 {
  margin: 0;                 /* remove default top/bottom margin */
  line-height: 1.15;         /* tighter baseline so it sits level with the icon */
}

/* ---------- 2) FEC cards: icon + title in a horizontal header row ---------- */
.fec-card {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-auto-rows: auto;
  column-gap: 10px;
  row-gap: 6px;
}
.fec-card i {
  grid-column: 1;
  grid-row: 1;
  align-self: center;        /* vertically center with the title */
  margin: 0;                 /* override existing margin-bottom */
}
.fec-card h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;                 /* align perfectly with the icon */
}
.fec-card p {
  grid-column: 1 / -1;       /* description spans full width below */
  margin: 0;
}

/* ---------- 3) FEC form: borderless (ghost) inputs until focus ---------- */
/* Make fields inside the Founding Explorers form ghost/borderless */
.fec-form .with-icon input,
.fec-form .with-icon textarea,
.fec-form .with-icon select {
  border: 0 !important;          /* kill the inner border */
  outline: none;                  /* we’ll use wrapper focus instead */
  background: transparent;        /* no extra fills */
  box-shadow: none;               /* remove UA inner shadows */
  -webkit-appearance: none;       /* Safari/Chrome */
  appearance: none;
}

/* Keep a clear, accessible focus on the wrapper instead */
.fec-form .with-icon:focus-within {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245,158,11,.18);
}

/* Placeholder styling (optional, for nicer tone/contrast) */
.fec-form input::placeholder,
.fec-form textarea::placeholder {
  color: #6b7280;   /* subtle grey */
  opacity: 1;       /* consistent across browsers */
}

/* Tame Chrome autofill yellow so it doesn't look like a border */
.fec-form input:-webkit-autofill,
.fec-form textarea:-webkit-autofill,
.fec-form select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: inherit !important;
}

/* Firefox sometimes draws a hairline if border-color is set elsewhere */
.fec-form .with-icon input,
.fec-form .with-icon textarea,
.fec-form .with-icon select {
  border-width: 0;  /* belt and suspenders */
}

.text-weight {
  font-weight: 200;
}



.contact-hero.fade-in { transform: none !important; }

/* ------- tiny modal for WhatsApp follow ------- */
.hc-modal{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }
.hc-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(1px); }
.hc-modal__dialog{
  position:relative; z-index:1; width:min(520px, 92vw);
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.hc-modal__close{ position:absolute; top:8px; right:10px; border:0; background:transparent; font-size:22px; cursor:pointer; }
.hc-modal__title{ margin:0 0 8px; font-weight:600; }
.hc-modal__text{ margin:0 0 14px; color:#374151; }
.hc-modal__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.join-circle-section {
  background-position: center top; /* or left/right focus */
  background-size: contain;       /* instead of cover */
  background-repeat: no-repeat;
}

/* === Founding Explorers banner — show whole image, never crop === */
.founders-hero {
  /* your existing rounded corners/overlay can stay */
  background-image: var(--founders-img);        /* keep your inline var/url */
  background-repeat: no-repeat;
  background-position: left center;             /* shift focus if needed */
  background-size: auto 100% !important;        /* fit height, avoid vertical crop */
  background-color: #121417;                    /* behind-side bands (navy-ish) */
}

/* On small screens, allow cover again to avoid giant letterboxing */
@media (max-width: 768px) {
  .founders-hero {
    background-size: cover !important;
    background-position: center;
  }
}
/* === If the banner uses an <img> tag === */
.founders-hero {
  position: relative;
  overflow: hidden;                /* keeps rounded corners clean */
  background-color: #0b1220;       /* or #F3EAD8 if you prefer warm sand */
}

.founders-hero > img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;  /* show entire image */
  object-position: left center;    /* adjust focal point */
  display: block;
}

/* Small screens: allow cover so it feels immersive */
@media (max-width: 768px) {
  .founders-hero > img {
    object-fit: cover !important;
    object-position: center;
  }
}