/* ============================================================================
   Conrad Legal Office — Contact Page
   File: assets/css/contact.css
   Depends on: tokens.css (imported below), consultation.css (imported in HTML)
   Sections: Hero · Contact Main · Trust Strip · Final CTA
   NOTE: Form field styles (.form-group, .form-input, etc.) live in
         consultation.css — do NOT duplicate them here.
   ============================================================================ */

@import url('./tokens.css');


/* ============================================================================
   SCROLL-ENTRANCE ANIMATION SYSTEM
   JS adds .anim-ready on DOMContentLoaded, .in-view when section enters viewport.
   Without JS every element is fully visible (no opacity:0 applied).
   ============================================================================ */

.js-animate.anim-ready [data-anim] {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity  0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-animate.in-view [data-anim] {
  opacity:   1;
  transform: none;
}

/* Staggered delays for sequential child elements */
.js-animate.in-view [data-anim]:nth-child(1) { transition-delay: 0.05s; }
.js-animate.in-view [data-anim]:nth-child(2) { transition-delay: 0.15s; }
.js-animate.in-view [data-anim]:nth-child(3) { transition-delay: 0.25s; }
.js-animate.in-view [data-anim]:nth-child(4) { transition-delay: 0.35s; }
.js-animate.in-view [data-anim]:nth-child(5) { transition-delay: 0.45s; }
.js-animate.in-view [data-anim]:nth-child(6) { transition-delay: 0.55s; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .js-animate.anim-ready [data-anim] {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}


/* ============================================================================
   SECTION 1 — PAGE HERO
   Dark bg (--color-blue-darkest). Pure CSS entrance animation — no JS needed.
   ============================================================================ */

.contact-hero {
  position:        relative;
  background-color: var(--color-blue-darkest);
  color:           var(--color-white);
  overflow:        hidden;

  /* Generous padding: top accounts for fixed navbar, bottom breathes */
  padding-block:   clamp(7rem, 5rem + 8vw, 13rem);
  padding-inline:  clamp(1.5rem, 6vw, 8rem);
}


/* ── Decorative background ──────────────────────────────────────────────── */

.contact-hero__bg {
  position:   absolute;
  inset:      0;
  z-index:    0;
  pointer-events: none;

  /* Subtle radial vignette in navy, gives depth without an image */
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 100%,
      rgba(60, 60, 117, 0.18) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 40% at 20% 0%,
      rgba(12, 13, 86, 0.25) 0%,
      transparent 60%
    );
}


/* ── Content container ──────────────────────────────────────────────────── */

.contact-hero__content {
  position:        relative;
  z-index:         1;
  max-width:       1280px;
  margin:          0 auto;
  display:         flex;
  flex-direction:  column;
  gap:             clamp(1rem, 1.5vw, 1.5rem);
}


/* ── Eyebrow label ──────────────────────────────────────────────────────── */

.contact-hero__eyebrow {
  display:        inline-block;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--color-red);

  /* CSS-only entrance: slide up + fade in */
  opacity:    0;
  transform:  translateY(16px);
  animation:  hero-fadeup 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}


/* ── H1 ─────────────────────────────────────────────────────────────────── */

.contact-hero__title {
  font-family: var(--font-serif);
  font-size:   var(--text-h2);    /* H2 size — H1 tag but page-hero scale */
  font-weight: var(--fw-light);
  line-height: 1.08;
  color:       var(--color-white);
  max-width:   800px;

  opacity:    0;
  transform:  translateY(20px);
  animation:  hero-fadeup 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards;
}


/* ── Body paragraph ─────────────────────────────────────────────────────── */

.contact-hero__body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: 1.65;
  color:       var(--color-white);
  opacity:     0;           /* starts at 0 for animation, then set to 0.7 via animation */
  max-width:   650px;

  /* Animation ends at opacity 0.7 — use fill-mode forwards + keyframe target */
  animation:  hero-fadeup-dim 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.46s forwards;
}


/* ── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes hero-fadeup {
  from {
    opacity:   0;
    transform: translateY(20px);
  }
  to {
    opacity:   1;
    transform: none;
  }
}

@keyframes hero-fadeup-dim {
  from {
    opacity:   0;
    transform: translateY(20px);
  }
  to {
    opacity:   0.7;
    transform: none;
  }
}

/* Reduced motion: skip animations but keep final state */
@media (prefers-reduced-motion: reduce) {
  .contact-hero__eyebrow,
  .contact-hero__title {
    animation: none;
    opacity:   1;
    transform: none;
  }
  .contact-hero__body {
    animation: none;
    opacity:   0.7;
    transform: none;
  }
}


/* ============================================================================
   SECTION 2 — CONTACT MAIN
   Light bg (--color-beige). 60/40 grid — form left, sidebar right.
   ============================================================================ */

.contact-main {
  background:     var(--color-beige);
  padding-block:  clamp(5rem, 8vw, 9rem);
  padding-inline: clamp(1.5rem, 6vw, 8rem);
}

.contact-main__inner {
  display:               grid;
  grid-template-columns: 60fr 40fr;
  gap:                   clamp(3rem, 5vw, 6rem);
  max-width:             1280px;
  margin:                0 auto;
  align-items:           start;
}


/* ── Form Panel ─────────────────────────────────────────────────────────── */

.contact-form-panel {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.contact-form-panel__heading {
  font-family:   var(--font-serif);
  font-size:     var(--text-h3);
  font-weight:   var(--fw-regular);
  line-height:   1.1;
  color:         var(--color-blue-darkest);
  margin-bottom: 0.4rem;
}

.contact-form-panel__sub {
  font-family:   var(--font-sans);
  font-size:     var(--text-base);
  color:         var(--color-blue);
  opacity:       0.55;
  line-height:   1.5;
  margin-bottom: clamp(1.75rem, 2.5vw, 2.5rem);
}

/* Form inside panel: add a bit of top margin separation */
.contact-form-panel .consultation-form {
  width: 100%;
}


/* ── Sidebar ────────────────────────────────────────────────────────────── */

.contact-sidebar {
  position: sticky;
  top:      6rem;               /* clears fixed navbar */

  display:        flex;
  flex-direction: column;
  gap:            0;

  background:    var(--color-white);
  border:        1px solid var(--color-gray-subtle);
  border-radius: 6px;
  overflow:      hidden;
  padding:       clamp(1.5rem, 2.5vw, 2.5rem);
}


/* Eyebrow inside sidebar */
.contact-sidebar__eyebrow {
  display:        inline-block;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--color-red);
  margin-bottom:  1.25rem;
}


/* Content block within sidebar */
.contact-sidebar__block {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  padding-block:  clamp(1rem, 1.5vw, 1.5rem) 0;
}

.contact-sidebar__heading {
  font-family: var(--font-serif);
  font-size:   var(--text-h4);
  font-weight: var(--fw-light);
  line-height: 1.15;
  color:       var(--color-blue-darkest);
}

.contact-sidebar__body {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--color-blue);
  opacity:     0.6;
  line-height: 1.55;
}



/* H4-level sub-headings (Location, Hours) */
.contact-sidebar__subheading {
  display:     flex;
  align-items: center;
  gap:         0.45rem;
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:       var(--color-blue-darkest);
}

/* Override lucide default size inside subheading — tighter fit */
.contact-sidebar__subheading [data-lucide] {
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
  stroke: var(--color-red);
  flex-shrink: 0;
}


/* Address */
.contact-sidebar__address {
  font-family:  var(--font-sans);
  font-size:    var(--text-base);
  font-style:   normal;
  line-height:  1.6;
  color:        var(--color-blue);
  opacity:      0.75;
}


/* Hours list */
.contact-sidebar__hours {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        0.4rem;
}

.contact-sidebar__hours li {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  color:           var(--color-blue);
  opacity:         0.8;
}

.contact-sidebar__hours-day {
  font-weight: var(--fw-bold);
  color:       var(--color-blue-darkest);
  opacity:     1;
}

.contact-sidebar__hours-time {
  color:   var(--color-blue);
  opacity: 0.7;
}


/* Horizontal rule divider inside sidebar */
.contact-sidebar__divider {
  border:     none;
  border-top: 1px solid var(--color-gray-subtle);
  margin:     clamp(1rem, 1.5vw, 1.5rem) 0 0;
}


/* Trust badges row */
.contact-sidebar__trust {
  display:        flex;
  flex-direction: column;
  gap:            0.65rem;
  padding-top:    clamp(1rem, 1.5vw, 1.5rem);
}

.contact-sidebar__trust-item {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  font-weight: var(--fw-bold);
  color:       var(--color-blue-darkest);
}

.contact-sidebar__trust-item [data-lucide] {
  width:       var(--icon-size-sm);
  height:      var(--icon-size-sm);
  stroke:      var(--color-blue-electric);
  flex-shrink: 0;
}


/* ============================================================================
   SECTION 3 — TRUST STRIP
   Dark bg (--color-blue-dark). Horizontal row of three stat items.
   ============================================================================ */

.contact-trust {
  background:     var(--color-blue-dark);
  color:          var(--color-white);
  padding-block:  clamp(3.5rem, 5vw, 6rem);
  padding-inline: clamp(1.5rem, 6vw, 8rem);
}

.contact-trust__inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             0;                   /* gaps handled by items + dividers */
  max-width:       1280px;
  margin:          0 auto;
}


/* Individual stat item */
.contact-trust__item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.5rem;
  text-align:     center;
  padding-inline: clamp(2rem, 4vw, 5rem);
  flex:           1 1 200px;
}

/* Override Lucide default inside trust strip */
.contact-trust__icon {
  width:  var(--icon-size-xl);
  height: var(--icon-size-xl);
  stroke: var(--color-red-light);
  fill:   none;
  stroke-width: var(--icon-stroke);
  margin-bottom: 0.25rem;
}

.contact-trust__label {
  font-family: var(--font-serif);
  font-size:   var(--text-h4);
  font-weight: var(--fw-regular);
  color:       var(--color-white);
  line-height: 1.15;
}

.contact-trust__sub {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--color-white);
  opacity:     0.55;
  line-height: 1.4;
}


/* Vertical divider between stat items */
.contact-trust__divider {
  width:         1px;
  height:        clamp(3rem, 4vw, 5rem);
  background:    rgba(255, 255, 255, 0.12);
  flex-shrink:   0;
  align-self:    center;
}


/* ============================================================================
   SECTION 4 — FINAL CTA
   Light bg (--color-beige). Centered, max-width 700px.
   ============================================================================ */

.contact-cta {
  background:     var(--color-beige);
  padding-block:  clamp(5rem, 8vw, 9rem);
  padding-inline: clamp(1.5rem, 6vw, 8rem);
  text-align:     center;
}

.contact-cta__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            clamp(1rem, 1.5vw, 1.5rem);
  max-width:      700px;
  margin:         0 auto;
}

/* Red decorative rule above heading */
.contact-cta__rule {
  width:         48px;
  height:        2px;
  background:    var(--color-red);
  border-radius: 2px;
  margin-bottom: 0.5rem;
}

.contact-cta__heading {
  font-family: var(--font-serif);
  font-size:   var(--text-h2);
  font-weight: var(--fw-regular);
  line-height: 1.08;
  color:       var(--color-blue-darkest);
  margin:      0;
}

.contact-cta__body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: 1.65;
  color:       var(--color-blue);
  opacity:     0.7;
  max-width:   560px;
  margin:      0;
}

.contact-cta__btn {
  margin-top: 0.5rem;
}


/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* ── 1024px: Tighten sidebar spacing ──────────────────────────────────────── */
@media (max-width: 1024px) {

  .contact-main__inner {
    grid-template-columns: 55fr 45fr;
    gap: clamp(2rem, 3.5vw, 4rem);
  }

}


/* ── 768px: Stack to single column, sidebar goes above form ──────────────── */
@media (max-width: 768px) {

  .contact-main__inner {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 3.5rem);
  }

  /* Sidebar: unpin sticky, remove card styling — becomes inline block */
  .contact-sidebar {
    position:  static;
    top:       auto;
    order:     -1;               /* sidebar renders above form on mobile */
  }

  /* Trust strip: wrap items to two rows on tablet */
  .contact-trust__inner {
    gap: clamp(1.5rem, 3vw, 2rem);
  }

  .contact-trust__divider {
    display: none;               /* hide vertical lines — items wrap naturally */
  }

  .contact-trust__item {
    flex: 1 1 40%;
  }

}


/* ── 480px: Narrow mobile ─────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Hero: tighten top padding, ensure enough navbar offset */
  .contact-hero {
    padding-block: clamp(6rem, 5rem + 6vw, 9rem);
  }

  /* Sidebar: full-bleed — remove border radius */
  .contact-sidebar {
    border-radius: 0;
    margin-inline: calc(-1 * clamp(1.5rem, 6vw, 8rem));
    padding-inline: clamp(1.5rem, 6vw, 3rem);
  }

  /* Trust items: stack fully on small phones */
  .contact-trust__item {
    flex: 1 1 100%;
  }

  /* CTA heading: tighten line height */
  .contact-cta__heading {
    line-height: 1.12;
  }

}