/* ═══════════════════════════════════════════════════════════════
   LETLOU ENERGY — CONTACT SECTION
   Single-column progressive layout:
     1. Section header  (LetlouGlobal.css — .section-header)
     2. Availability strip  (shared, always visible)
     3. Sticky contact switcher  (6 tabs, amber active pill)
     4. Active panel  (redirect card OR self-contained form)
   All colour / shadow / radius tokens from LetlouGlobal.css.

   AUDIT CHANGES (2026-06-15):
   - Removed dead .contact-email-dir-* block (4 rules)
   - Removed dead .file-upload rule (no matching selector needed)
   - Added overflow protection on all text that can contain
     long unbreakable strings (emails, URLs, labels)
   ═══════════════════════════════════════════════════════════════ */

#contact {
  background: var(--color-off-white);
  min-height: 100dvh;
  overflow-x: clip;
}


/* ═══════════════════════════════════════════════════════════════
   1. SECTION HEADER — fade transition on h2 + p swap
   LetlouContact.js adds/removes .contact-header-fade during
   tab switch; CSS handles the opacity + translate animation.
   ═══════════════════════════════════════════════════════════════ */

#contact .section-header h2,
#contact .section-header h2 + p {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#contact .section-header h2.contact-header-fade,
#contact .section-header h2 + p.contact-header-fade {
  opacity: 0;
  transform: translateY(6px);
}


/* ═══════════════════════════════════════════════════════════════
   2. AVAILABILITY STRIP
   Mobile: stacked card. Desktop: single horizontal band.
   ═══════════════════════════════════════════════════════════════ */

.contact-availability-strip {
  background: var(--color-navy);
  border-bottom: 1px solid color-mix(in srgb, white 7%, transparent);
  padding: 0.9rem clamp(1.25rem, 5vw, 3rem);
}

.contact-availability-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 2rem;
  flex-wrap: wrap;
}

.contact-avail-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-amber);
  white-space: nowrap;
  flex-shrink: 0;
}

.contact-avail-heading i { font-size: 0.8rem; }

.contact-avail-divider {
  width: 1px;
  height: 1rem;
  background: color-mix(in srgb, white 15%, transparent);
  flex-shrink: 0;
}

.contact-avail-items {
  display: flex;
  align-items: center;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.contact-avail-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: color-mix(in srgb, white 75%, transparent);
  white-space: nowrap;
}

.contact-avail-item strong {
  color: color-mix(in srgb, white 95%, transparent);
  font-weight: 600;
}

.contact-avail-item .avail-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-amber);
  opacity: 0.6;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .contact-availability-strip { padding: 1rem 1.25rem; }

  .contact-availability-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .contact-avail-divider { display: none; }

  .contact-avail-items {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
  }

  /* Allow wrapping on small screens */
  .contact-avail-item {
    font-size: 0.82rem;
    white-space: normal;
  }
}


/* ═══════════════════════════════════════════════════════════════
   3. STICKY CONTACT SWITCHER
   Colour scheme: white background with navy text — lighter than
   the navy-deep strip used previously, warmer and less heavy.
   ═══════════════════════════════════════════════════════════════ */

.contact-sticky-switcher {
  position: sticky;
  top: var(--header-height, 68px);
  z-index: 900;
  background: var(--color-white);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 2px solid var(--color-amber);
  padding: 0.65rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.contact-switcher {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--color-off-white);
  border: 1px solid var(--color-border-soft);
  padding: 0.25rem;
  border-radius: 99px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 100%;
  scroll-snap-type: x mandatory;
}

.contact-switcher::-webkit-scrollbar { display: none; }

.contact-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* 0.7rem top/bottom padding gives ~39px rendered height at 16px base —
     combined with the 0.25rem container padding the interactive area
     clears 44px. WCAG 2.5.5 Target Size. */
  padding: 0.7rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 99px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
  min-height: 44px;
}

.contact-switcher-btn i {
  font-size: 0.75rem;
  flex-shrink: 0;
}

.contact-switcher-btn:hover {
  background: var(--color-amber-tint);
  color: var(--color-navy);
}

.contact-switcher-btn.active {
  background: var(--color-amber);
  color: var(--color-navy);
}

.contact-switcher-btn:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

/* Narrow mobile: icon only — single row at 320px */
@media (max-width: 480px) {
  .contact-switcher-btn {
    padding: 0.55rem 0.75rem;
    gap: 0;
    font-size: 0;
    letter-spacing: 0;
  }
  .contact-switcher-btn i {
    font-size: 0.85rem;
    margin: 0;
  }
}

@media (min-width: 1400px) {
  .contact-sticky-switcher { top: var(--header-height, 76px); }
}


/* ═══════════════════════════════════════════════════════════════
   3a. PANEL CONTEXT NOTES
   Shown at the top of each panel — contextually relevant to
   the enquiry type. Subtle amber-tinted info strip.
   ═══════════════════════════════════════════════════════════════ */

.contact-panel-note {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  background: var(--color-amber-tint);
  border: 1px solid var(--color-amber-border);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  color: var(--color-text-mid);
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}

.contact-panel-note i {
  font-size: 0.82rem;
  color: var(--color-amber);
  flex-shrink: 0;
  margin-top: 0.15rem;
}


/* ═══════════════════════════════════════════════════════════════
   4. PANEL WRAPPER
   ═══════════════════════════════════════════════════════════════ */

.contact-panel-wrapper {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 5vw, 2.5rem) 4rem;
  /* scroll-margin uses the token so it works at both header heights */
  scroll-margin-top: calc(var(--header-height, 68px) + 60px);
}

@media (min-width: 1400px) {
  .contact-panel-wrapper {
    max-width: 860px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   5. PANEL VISIBILITY — fade-up on activation
   ═══════════════════════════════════════════════════════════════ */

.contact-panel { display: none; }

.contact-panel.active {
  display: block;
  animation: contactPanelFadeIn 0.3s ease both;
}

@keyframes contactPanelFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════
   6. DIRECT CONTACT ROW
   Shown above each form/card — first thing seen per tab.
   Overflow protection: emails can be long on narrow screens.
   ═══════════════════════════════════════════════════════════════ */

.contact-direct-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  /* Prevent the row itself from overflowing its container */
  min-width: 0;
}

.contact-direct-row i {
  font-size: 0.75rem;
  color: var(--color-amber);
  flex-shrink: 0;
}

.contact-direct-row span {
  /* Label text ("Quotations & RFQs:") should not shrink to nothing */
  flex-shrink: 0;
}

.contact-direct-row a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition);
  /* Email addresses must break rather than overflow */
  word-break: break-all;
  overflow-wrap: break-word;
  min-width: 0;
  /* Inline links need vertical padding to meet the 44px touch target
     minimum. WCAG 2.5.5. display:inline-flex lets padding apply. */
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 0;
}

.contact-direct-row a:hover { color: var(--color-amber); }


/* ═══════════════════════════════════════════════════════════════
   7. REDIRECT CARDS  (Project, Career)
   ═══════════════════════════════════════════════════════════════ */

.contact-route-card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Prevent card content from overflowing on narrow viewports */
  min-width: 0;
}

.crc-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.crc-icon--career { background: var(--color-teal-dark); }
.crc-icon--legal  { background: var(--color-purple-dark); }

.crc-body {
  flex: 1;
  /* Essential: without min-width:0, flex children don't shrink below content size */
  min-width: 0;
}

.crc-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 0.4rem;
  /* Long titles wrap cleanly */
  overflow-wrap: break-word;
}

.crc-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 1.1rem;
  overflow-wrap: break-word;
}

.crc-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.crc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.65rem 1.3rem;
  border-radius: 99px;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}

.crc-btn-primary:hover {
  background: var(--color-navy-darker);
  transform: translateY(-1px);
}

.crc-or {
  font-size: 0.75rem;
  color: var(--color-text-hint);
}

.crc-btn-ghost {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  /* 44px touch target via vertical padding */
  padding: 0.6rem 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

.crc-btn-ghost:hover { color: var(--color-navy); }

.crc-btn-ghost:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 480px) {
  .contact-route-card {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   8. CONTACT FORM WRAPPER + FIELDS
   ═══════════════════════════════════════════════════════════════ */

.contact-form-wrapper {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-soft);
  /* Prevent form wrapper overflowing its panel */
  min-width: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* Name + email side-by-side — wraps intrinsically when below 200px per field */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1rem;
}

/* .form-row wraps intrinsically — no breakpoint needed */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* Prevent any child from blowing out the column */
  min-width: 0;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-mid);
}

.form-required { color: var(--color-amber); }
.form-optional  { color: var(--color-text-hint); font-weight: 400; }

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 44px;
  /* Inputs must not overflow their grid cell */
  width: 100%;
  box-sizing: border-box;
}

/* iOS: prevent auto-zoom on input focus (requires ≥16px) */
@supports (-webkit-touch-callout: none) {
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 1rem; }
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-amber);
  box-shadow: 0 0 0 3px var(--color-amber-tint);
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}

.form-group textarea {
  resize: vertical;
  min-height: 130px;
}


/* ── Textarea prompt hints ── */
.form-prompt-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.form-prompt-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-hint);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-soft);
  border-radius: 99px;
  padding: 0.2rem 0.65rem;
  /* Hint chips must not overflow on very narrow screens */
  overflow-wrap: break-word;
  word-break: break-word;
}

.form-prompt-hint i {
  font-size: 0.62rem;
  color: var(--color-amber);
  opacity: 0.8;
  flex-shrink: 0;
}


/* ── Legal "Other" field — animated reveal ──
   Starts collapsed. JS adds .is-visible to expand. ── */
#legalOtherField {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 0.3s ease,
    opacity    0.25s ease,
    transform  0.25s ease;
  pointer-events: none;
}

#legalOtherField.is-visible {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ── File upload dropzone ── */
.file-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
}

.file-dropzone:hover,
.file-dropzone.drag-over {
  border-color: var(--color-amber);
  background: var(--color-amber-tint);
}

.file-dropzone i {
  font-size: 1.5rem;
  color: var(--color-amber);
}

.file-dropzone span {
  font-size: 0.82rem;
  color: var(--color-text-mid);
  /* Prevent long filenames overflowing the dropzone */
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.file-hint {
  font-size: 0.68rem;
  color: var(--color-text-hint);
}

.file-dropzone input { display: none; }

.file-name {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  /* File names can be very long */
  overflow-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
}


/* ── POPIA consent ── */
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  cursor: pointer;
}

.consent-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--color-amber);
  cursor: pointer;
}


/* ── Submit button ── */
.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: var(--color-amber);
  color: var(--color-navy);
  border: none;
  padding: 0.9rem 1.75rem;
  border-radius: 40px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  margin-top: 0.25rem;
  min-height: 44px;
}

.submit-btn:hover {
  background: var(--color-amber-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-amber) 30%, transparent);
}

.submit-btn:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
}

.submit-btn:disabled {
  opacity: 0.6;
  pointer-events: none;
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-navy);
  border-top-color: transparent;
  border-radius: 50%;
  animation: contactSpin 0.7s linear infinite;
}

@keyframes contactSpin { to { transform: rotate(360deg); } }


/* ── Form note ── */
.form-note {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
  margin-top: 0.25rem;
  /* Note text and links must not overflow on narrow screens */
  overflow-wrap: break-word;
  word-break: break-word;
}

.form-note i   { margin-right: 0.3rem; }
.form-note a   { color: var(--color-navy); font-weight: 600; text-decoration: none; }
.form-note a:hover { color: var(--color-amber); }


/* ── Turnstile wrapper ── */
.turnstile-wrap { min-height: 65px; }


/* ═══════════════════════════════════════════════════════════════
   9. FORM FEEDBACK STATES (JS-injected on successful submission)
   ═══════════════════════════════════════════════════════════════ */

.form-success {
  text-align: center;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-sm);
}

.form-success i   { font-size: 2.75rem; color: var(--color-amber); }
.form-success h3  { font-size: 1.15rem; color: var(--color-navy); }
.form-success p   {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  max-width: 300px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.form-reset-btn {
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 30px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: var(--font-body);
  min-height: 44px;
  transition: background var(--transition);
}

.form-reset-btn:hover { background: var(--color-amber); color: var(--color-navy); }

.form-error-banner {
  background: var(--color-error-bg);
  border: 1px solid #FECACA;
  color: var(--color-error-dark);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.84rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  /* Error messages can contain email addresses */
  overflow-wrap: break-word;
  word-break: break-word;
}

.form-error-banner a { color: var(--color-error-dark); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — WCAG 2.3.3 (Animation from Interactions)
   All transitions and animations in the contact section are
   disabled or reduced when the user has requested less motion.
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Panel fade-in animation — instant show instead of slide-up */
  .contact-panel.active {
    animation: none;
  }

  /* Header h2 + p fade — instant swap, no opacity/transform transition */
  #contact .section-header h2,
  #contact .section-header h2 + p {
    transition: none;
  }

  /* Legal "Other" field reveal — instant show, no max-height transition */
  #legalOtherField {
    transition: none;
  }

  /* Turnstile spinner — stop spinning */
  .spinner {
    animation: none;
  }

  /* Button + input transitions — instant state changes */
  .contact-switcher-btn,
  .contact-direct-row a,
  .crc-btn-primary,
  .crc-btn-ghost,
  .submit-btn,
  .file-dropzone,
  .form-group input,
  .form-group select,
  .form-group textarea {
    transition: none;
  }
}