/* ============================================
   ICONS - Line-art SVGs with brand-aware animation
   Locked 13 May 2026
   ============================================ */

/* Base icon - inherits colour from parent, scales via font-size context */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 240ms ease-out, color 240ms ease-out, stroke 240ms ease-out;
}

/* Size variants - explicit sizes so it doesn't matter what font-size the parent has */
.icon-lg { width: 48px; height: 48px; stroke-width: 1.25; }
.icon-md { width: 32px; height: 32px; stroke-width: 1.5; }
.icon-sm { width: 20px; height: 20px; stroke-width: 1.75; }
.icon-xs { width: 16px; height: 16px; stroke-width: 1.75; }

/* Default colours - burnt orange */
.icon-primary { color: var(--burnt-orange, #BF5B21); }
.icon-deep    { color: var(--dark-red, #7B1D2E); }
.icon-sage    { color: var(--sage, #7A8870); }
.icon-muted   { color: var(--dark-brown, #2D1810); opacity: 0.6; }

/* ============================================
   HOVER ANIMATIONS
   ============================================ */

/* Card-level hover lift - apply to card, icon shifts colour + lifts */
.service-card:hover .icon,
.service-also-card:hover .icon,
.principle-card:hover .icon {
  transform: translateY(-3px);
  color: var(--dark-red, #7B1D2E);
}

/* Inline hover shift - just colour, no movement */
.icon-hover-shift:hover {
  color: var(--dark-red, #7B1D2E);
}

/* ============================================
   SCROLL-DRAW ANIMATION
   - Icon strokes draw themselves in when entering viewport
   - Triggered by adding .icon-drawn class via Intersection Observer
   ============================================ */

.icon-draw path,
.icon-draw circle,
.icon-draw rect,
.icon-draw line,
.icon-draw polyline,
.icon-draw polygon {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 900ms ease-out;
}

.icon-draw.icon-drawn path,
.icon-draw.icon-drawn circle,
.icon-draw.icon-drawn rect,
.icon-draw.icon-drawn line,
.icon-draw.icon-drawn polyline,
.icon-draw.icon-drawn polygon {
  stroke-dashoffset: 0;
}

/* Staggered draw for grids */
.principle-card:nth-child(1) .icon-draw { transition-delay: 0ms; }
.principle-card:nth-child(2) .icon-draw { transition-delay: 150ms; }
.principle-card:nth-child(3) .icon-draw { transition-delay: 300ms; }

/* ============================================
   PULSE - gentle scale loop for TL;DR badge
   ============================================ */

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.06); opacity: 0.85; }
}

.icon-pulse {
  animation: icon-pulse 2.8s ease-in-out infinite;
}

/* ============================================
   FAQ - plus icon rotates to minus when open
   Targets the <summary> marker in <details> elements
   ============================================ */

/* Hide default disclosure arrow */
.blogpost-faq summary,
.faq-item summary {
  list-style: none;
}
.blogpost-faq summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* The custom plus/minus icon */
.faq-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  margin-left: auto;
  transition: transform 280ms ease-out;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  top: 50%;
  left: 50%;
  transition: transform 280ms ease-out, opacity 200ms ease-out;
}
.faq-icon::before {
  /* horizontal bar */
  width: 14px;
  height: 1.75px;
  transform: translate(-50%, -50%);
}
.faq-icon::after {
  /* vertical bar */
  width: 1.75px;
  height: 14px;
  transform: translate(-50%, -50%);
}
details[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
details[open] .faq-icon {
  transform: rotate(180deg);
}

/* ============================================
   POSITIONAL HOOKS
   ============================================ */

/* Service card - icon sits above the number, top of card */
.service-card .icon-lg,
.principle-card .icon-lg {
  margin-bottom: 1rem;
}

/* Tier-2 supporting card - smaller icon, inline with title */
.service-also-card .service-also-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Journal tier label - small icon before the eyebrow */
.journal-tier-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.journal-tier-label .icon-sm {
  color: var(--burnt-orange, #BF5B21);
}

/* Blog TLDR - icon sits to the left of "In 30 seconds" label */
.blogpost-tldr-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ============================================
   ACCESSIBILITY - respect reduced motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .icon,
  .icon-draw path,
  .icon-draw circle,
  .icon-draw rect,
  .icon-draw line,
  .icon-draw polyline,
  .icon-draw polygon,
  .faq-icon,
  .faq-icon::before,
  .faq-icon::after {
    transition: none !important;
    animation: none !important;
  }
  .icon-draw path,
  .icon-draw circle,
  .icon-draw rect,
  .icon-draw line,
  .icon-draw polyline,
  .icon-draw polygon {
    stroke-dashoffset: 0;
  }
  .icon-pulse { animation: none; }
}