/* Resources index page — editorial styles */

/* Section number label (monospaced, small, green) */
.res-sect-num {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #16a34a; /* brand-600 */
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Hero headline */
.res-hero-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #111827; /* gray-900 */
}

.dark .res-hero-title {
  color: #f9fafb; /* gray-50 */
}

/* Section headings */
.res-section-heading {
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111827;
}

.dark .res-section-heading {
  color: #f9fafb;
}

/* Hairline rule above sections */
.res-hair {
  border-top: 1px solid #e5e7eb; /* gray-200 */
}

.dark .res-hair {
  border-top-color: #374151; /* gray-700 */
}

/* Tiny monospaced label */
.res-mono-label {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

/* Portal panel — deep navy with radial gradients */
.res-portal-panel {
  background:
    radial-gradient(900px 300px at 10% 0%, rgba(20, 89, 74, 0.35), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(217, 119, 6, 0.18), transparent 60%),
    #111827;
}

/* Card lift on hover */
.res-card {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

.res-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.28);
}

.dark .res-tinted-card,
.dark .res-dark-panel {
  background: #1f2937 !important; /* gray-800 */
  border-color: #374151 !important; /* gray-700 */
  color: #f9fafb;
}

.dark .res-tinted-card h3,
.dark .res-dark-panel p {
  color: #f9fafb !important;
}

.dark .res-tinted-card .res-card-copy {
  color: #d1d5db !important; /* gray-300 */
}

.res-surface-peach {
  background: #ffebe1;
  border: 1px solid #f1cfc0;
}

.res-accent-green {
  color: #15803d;
}

.res-accent-peach {
  color: #c2410c;
}

.res-accent-blue {
  color: #1d4ed8;
}

.res-accent-cyan {
  color: #0e7490;
}

.dark .res-accent-green {
  color: #4ade80 !important;
}

.dark .res-accent-peach {
  color: #fdba74 !important;
}

.dark .res-accent-blue {
  color: #93c5fd !important;
}

.dark .res-accent-cyan {
  color: #67e8f9 !important;
}

.dark .res-muted-label {
  color: #9ca3af !important; /* gray-400 */
}

/* Animated underline link */
.res-u-link {
  position: relative;
}

.res-u-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0.3);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.res-u-link:hover::after {
  transform: scaleX(1);
}

.res-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.res-u-link:hover .res-arrow {
  transform: translateX(4px);
}

/* Ticker animation */
.res-ticker {
  display: inline-block;
  animation: res-slide 40s linear infinite;
}

@keyframes res-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* <details> open/close transition for FAQ */
details > summary {
  user-select: none;
}

details[open] summary .group-open\:rotate-45 {
  transform: rotate(45deg);
}