/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE — Beyond Expression
   B&W palette, matching the home page (Chanel-style monochrome).
   Loaded after style.css via partials/header.php $extraCss.
   Every rgba/hex below is a tint of pure black or white.
═══════════════════════════════════════════════════════════ */

:root {
  /* Re-route brand tokens to the B&W system on this page too. */
  --gold:    #4A4A4A;   /* GRAPHITE */
  --gold-l:  #8A8A8A;   /* STEEL */
  --gold-d:  #2A2A2A;   /* deeper graphite */
  --ink:     #000000;   /* BLACK */
  --navy:    #141414;   /* NOIR — soft black for large dark areas */
  --cream:   #FAFAFA;   /* SNOW */
  --wine:    #000000;   /* BLACK */
  --wine-d:  #000000;   /* BLACK */
  --border:  #E0E0E0;   /* MIST hairline */

  /* Contact-page-specific emerald aliases — collapsed to B&W. */
  --em:    #000000;     /* solid black for filled accents */
  --em-l:  #4A4A4A;     /* graphite mid-tone */
  --em-ll: #8A8A8A;     /* steel light accent */
  --em-d:  #000000;     /* deepest = black */
  --em-bg: rgba(0,0,0,.05);
  --em-br: rgba(0,0,0,.18);
  --em-sh: rgba(0,0,0,.22);
}

/* ═══════════════════════════════════════════════════════════
   HERO — dark band with white grid/orb tints
═══════════════════════════════════════════════════════════ */
.ct-hero {
  background: radial-gradient(ellipse 80% 60% at 50% 0%,
              #1F1F1F 0%, #141414 40%, #000000 100%);
}

.ct-hero .orb-1 { background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%); }
.ct-hero .orb-2 { background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%); }
.ct-hero .orb-3 { background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%); }

.ct-hero .hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}

/* Hero badge (the pill above the title) */
.ct-hero .hero-badge {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: #FFFFFF;
}
.ct-hero .hero-badge span { background: #FFFFFF; }

/* Breadcrumb hover state */
.ct-breadcrumb a:hover { color: #FFFFFF; }

/* "Connect" italic word — uses the em var-driven gradient (now grayscale).
   Override directly for crisper white-to-graphite sweep on dark hero.    */
.ct-hero-title em {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 50%, #8A8A8A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ═══════════════════════════════════════════════════════════
   INFO CARDS — three feature tiles overlapping the hero
═══════════════════════════════════════════════════════════ */
.ct-cards-sec { background: #FAFAFA; }

.ct-info-card {
  border: 1px solid #E0E0E0;
  box-shadow: 0 4px 24px rgba(0,0,0,.05);
}
.ct-info-card:hover {
  box-shadow: 0 20px 56px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.3);
}

/* Icon tile — light at rest, black-inverted on hover */
.ct-ico {
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.12);
  color: #000000;
}
.ct-info-card:hover .ct-ico {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}

/* Inline link arrow */
.ct-link {
  color: #000000;
  border-bottom: 1px solid rgba(0,0,0,.3);
}
.ct-link:hover {
  color: #4A4A4A;
  border-color: #4A4A4A;
}

/* ═══════════════════════════════════════════════════════════
   MAIN FORM SECTION (form on left, store card on right)
═══════════════════════════════════════════════════════════ */
.ct-main-sec { background: #FAFAFA; }
.ct-main-sec .eyebrow { color: #000000; }

.ct-form-title em { color: #000000; }

/* ─── Inputs / Textareas ─── */
.ct-field input,
.ct-field textarea {
  border: 1.5px solid #E0E0E0;
}
.ct-field input:hover,
.ct-field textarea:hover { border-color: #B0B0B0; }
.ct-field input:focus,
.ct-field textarea:focus {
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(0,0,0,.1);
}

/* Date picker — re-tint the native glyph from emerald to black */
.ct-field input[type="date"]::-webkit-calendar-picker-indicator {
  /* filter that approximates pure black on the native SVG glyph */
  filter: brightness(0) saturate(100%);
  opacity: .55;
}
.ct-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(0,0,0,.08);
}

/* Floating label active colour */
.ct-field input:focus + label,
.ct-field input:not(:placeholder-shown) + label,
.ct-field input[type="date"] + label,
.ct-field textarea:focus + label,
.ct-field textarea:not(:placeholder-shown) + label {
  color: #000000;
}

/* ─── Select ─── */
.ct-select-outer select {
  border: 1.5px solid #E0E0E0;
}
.ct-select-outer select:hover { border-color: #B0B0B0; }
.ct-select-outer select:focus {
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(0,0,0,.1);
}
.ct-select-outer:focus-within::after {
  border-top-color: #000000;
}
.ct-select-outer select.has-val ~ .ct-select-label,
.ct-select-outer select:focus ~ .ct-select-label {
  color: #000000;
}

/* Custom dropdown variant */
.ct-form .ct-dd .bv-dd-btn {
  border: 1.5px solid #E0E0E0;
}
.ct-form .ct-dd .bv-dd-btn:focus,
.ct-form .ct-dd.open .bv-dd-btn {
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(0,0,0,.1);
}

/* ─── Submit button — pure inversion (Chanel-style) ─── */
.ct-submit {
  background: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
}
.ct-submit:hover {
  background: transparent;
  color: #000000;
  border-color: #000000;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

/* ─── Success message (after submit) ─── */
.ct-success {
  background: rgba(0,0,0,.04);
  border: 1.5px solid rgba(0,0,0,.22);
  color: #000000;
}
.ct-success-icon {
  background: #000000;
  color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════
   STORE CARD (right side: stylised map + address + actions)
═══════════════════════════════════════════════════════════ */
.ct-store-card {
  border: 1px solid #E0E0E0;
  box-shadow: 0 8px 40px rgba(0,0,0,.06);
}

/* Map area — grayscale layout instead of green */
.ct-map-area {
  background: linear-gradient(160deg, #E0E0E0 0%, #C8C8C8 35%, #A8A8A8 60%, #6E6E6E 100%);
}
/* Hide Google's built-in "Open in Maps" pill (top-left of embed) by enlarging the
   iframe and offsetting it so the pill scrolls off the top-left under the container's
   overflow:hidden. The Google attribution at the bottom-right stays inside the
   visible area (required by Google's embed terms). */
.ct-map-area iframe {
  position: absolute;
  top: -52px;
  left: -52px;
  width: calc(100% + 52px) !important;
  height: calc(100% + 52px) !important;
}
.ct-map-pin {
  background: #000000;
}
.ct-map-tag {
  color: #000000;
}

/* Detail rows */
.ct-detail-icon {
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.12);
  color: #000000;
}
.ct-detail-text a:hover { color: #000000; }

.ct-store-divider { background: #E0E0E0; }

/* ─── Directions button (solid) ─── */
.ct-dir-btn {
  background: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
}
.ct-dir-btn:hover {
  background: transparent;
  color: #000000;
  border-color: #000000;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}

/* ─── Call button (ghost) ─── */
.ct-call-btn {
  border: 1.5px solid #E0E0E0;
  color: #000000;
}
.ct-call-btn:hover {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
}

/* ─── Social strip ─── */
.ct-social-strip {
  border: 1px solid #E0E0E0;
}
.ct-soc-ico {
  border: 1px solid #E0E0E0;
  color: #4A4A4A;
}
.ct-soc-ico:hover {
  border-color: #000000;
  color: #FFFFFF;
  background: #000000;
}