/*
 * Marc Sijm Coaching — homepage colour routing add-on
 * Load AFTER theme.hspcoaching.css / theme.content.css.
 *
 * Purpose:
 * - colour is used as navigation/information architecture, not decoration;
 * - Coaching, HSP, Insights and Tools each get a restrained visual identity;
 * - dark navy remains reserved for the final conversion section.
 *
 * Required CMS section classes:
 *   home-route-picker
 *   home-coaching
 *   home-hsp
 *   home-insights
 *   home-tools
 *   home-method
 *   home-recent
 *   home-final-cta
 *
 * Required first-route card classes:
 *   home-route-card
 *   home-route-card--coaching
 *   home-route-card--hsp
 *   home-route-card--insights
 *   home-route-card--tools
 *   home-route-kicker
 */

:root {
  --home-ink: #17324d;
  --home-muted: #52697d;
  --home-border: #dce5eb;

  /* Route accents */
  --home-coaching: #315775;
  --home-coaching-soft: #f7f9fb;

  --home-hsp: #4f7fa3;
  --home-hsp-soft: #edf5fb;

  --home-insights: #687d8c;
  --home-insights-soft: #f3f6f8;

  --home-tools: #4f858b;
  --home-tools-soft: #eaf5f6;

  --home-method-soft: #f6f7f8;
  --home-white: #ffffff;
}

/* ------------------------------------------------------------
   General homepage section rhythm
   ------------------------------------------------------------ */

.section.section-topic-item.home-section {
  border-top: 0;
}

.section.section-topic-item.home-section .section-inner {
  position: relative;
}

.section.section-topic-item.home-section .eyebrow {
  letter-spacing: 0.08em;
}

/* Override generic odd/even theme backgrounds only where routing needs it. */
.section.section-topic-item.home-route-picker {
  background: #f8fafb;
}

.section.section-topic-item.home-coaching {
  background: var(--home-white);
}

.section.section-topic-item.home-hsp {
  background: var(--home-hsp-soft);
}

.section.section-topic-item.home-insights {
  background: var(--home-white);
}

.section.section-topic-item.home-tools {
  background: var(--home-tools-soft);
}

.section.section-topic-item.home-method {
  background: var(--home-method-soft);
}

.section.section-topic-item.home-recent {
  background: var(--home-white);
}

/* ------------------------------------------------------------
   Main four-route picker
   ------------------------------------------------------------ */

.home-route-picker .grid-2 {
  align-items: stretch;
}

.home-route-picker .home-route-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: var(--home-white);
  border: 1px solid var(--home-border);
  border-top-width: 4px;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.home-route-picker .home-route-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(23, 50, 77, 0.08);
}

.home-route-picker .home-route-card--coaching {
  border-top-color: var(--home-coaching);
  background: var(--home-coaching-soft);
}

.home-route-picker .home-route-card--hsp {
  border-top-color: var(--home-hsp);
  background: var(--home-hsp-soft);
}

.home-route-picker .home-route-card--insights {
  border-top-color: var(--home-insights);
  background: var(--home-insights-soft);
}

.home-route-picker .home-route-card--tools {
  border-top-color: var(--home-tools);
  background: var(--home-tools-soft);
}

.home-route-kicker {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.home-route-card--coaching .home-route-kicker,
.home-route-card--coaching > a {
  color: var(--home-coaching);
}

.home-route-card--hsp .home-route-kicker,
.home-route-card--hsp > a {
  color: var(--home-hsp);
}

.home-route-card--insights .home-route-kicker,
.home-route-card--insights > a {
  color: var(--home-insights);
}

.home-route-card--tools .home-route-kicker,
.home-route-card--tools > a {
  color: var(--home-tools);
}

/* ------------------------------------------------------------
   Route continuity farther down the homepage
   ------------------------------------------------------------ */

.home-coaching .eyebrow,
.home-coaching .card > a {
  color: var(--home-coaching);
}

.home-hsp .eyebrow,
.home-hsp .card > a,
.home-hsp > .section-inner a {
  color: var(--home-hsp);
}

.home-insights .eyebrow,
.home-insights .card > a {
  color: var(--home-insights);
}

.home-tools .eyebrow,
.home-tools .card > a {
  color: var(--home-tools);
}

/* Keep cards readable on tinted section backgrounds. */
.home-hsp .card,
.home-tools .card,
.home-method .card {
  background: var(--home-white);
}

/* A restrained top accent helps reconnect a section to its route card. */
.home-coaching .card {
  border-top: 3px solid rgba(49, 87, 117, 0.42);
}

.home-hsp .card {
  border-top: 3px solid rgba(79, 127, 163, 0.48);
}

.home-insights .card {
  border-top: 3px solid rgba(104, 125, 140, 0.40);
}

.home-tools .card {
  border-top: 3px solid rgba(79, 133, 139, 0.48);
}

/* ------------------------------------------------------------
   Method / trust section
   ------------------------------------------------------------ */

.home-method .grid-3 .card {
  border-top: 0;
  border-left: 3px solid var(--home-border);
}

.home-method .grid-3 .card:nth-child(1) {
  border-left-color: var(--home-hsp);
}

.home-method .grid-3 .card:nth-child(2) {
  border-left-color: var(--home-tools);
}

.home-method .grid-3 .card:nth-child(3) {
  border-left-color: var(--home-coaching);
}

/* ------------------------------------------------------------
   Recent content should stay quiet: content, not another route.
   ------------------------------------------------------------ */

.home-recent .card {
  background: var(--home-white);
  border-top: 0;
}

/* ------------------------------------------------------------
   Final CTA: dark means action.
   Keep existing content_item_dark behavior, but make the intent explicit.
   ------------------------------------------------------------ */

.section.section-topic-item.home-final-cta {
  background: var(--home-ink);
}

.home-final-cta,
.home-final-cta h2,
.home-final-cta h3,
.home-final-cta p,
.home-final-cta .eyebrow {
  color: #ffffff;
}

.home-final-cta a:not(.btn-direct):not(.btn-primary) {
  color: #ffffff;
}

/* ------------------------------------------------------------
   Accessibility / interaction
   ------------------------------------------------------------ */

.home-route-card a:focus-visible,
.home-section a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .home-route-picker .home-route-card {
    transition: none;
  }

  .home-route-picker .home-route-card:hover {
    transform: none;
  }
}

/* Existing grids already handle most responsive behavior.
   This only removes the hover elevation on touch-sized layouts. */
@media (max-width: 720px) {
  .home-route-picker .home-route-card {
    border-top-width: 3px;
  }

  .home-route-picker .home-route-card:hover {
    transform: none;
    box-shadow: none;
  }
}