/* CUBE CSS - Exception Layer
   Data states, language variants, HTMX states, page-specific overrides
*/

/* ========================================
   LANGUAGE-SPECIFIC TYPOGRAPHY
   ======================================== */

/* English - Capitalize food names and titles */
:lang(en) .food-card__name,
:lang(en) .hero-food__title {
  text-transform: capitalize;
}

/* Spanish - Only capitalize first letter */
:lang(es) .food-card__name::first-letter,
:lang(es) .hero-food__title::first-letter {
  text-transform: uppercase;
}

/* Spanish - Section headings use sentence case */
:lang(es) .content-section h3 {
  text-transform: lowercase;
}

:lang(es) .content-section h3::first-letter {
  text-transform: capitalize;
}


/* ========================================
   HTMX STATES
   ======================================== */

/* Loading indicator visibility */
.htmx-indicator {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Food card swap transitions */
.food-card.htmx-added {
  opacity: 0;
  transform: translateY(var(--space-sm));
}

.htmx-swapping .food-card {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.htmx-settling .food-card.htmx-added {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--transition-base);
}

/* Staggered entrance animations */
.htmx-settling .food-card.htmx-added:nth-child(1) { transition-delay: 0.05s; }
.htmx-settling .food-card.htmx-added:nth-child(2) { transition-delay: 0.1s; }
.htmx-settling .food-card.htmx-added:nth-child(3) { transition-delay: 0.15s; }
.htmx-settling .food-card.htmx-added:nth-child(4) { transition-delay: 0.2s; }
.htmx-settling .food-card.htmx-added:nth-child(5) { transition-delay: 0.25s; }
.htmx-settling .food-card.htmx-added:nth-child(6) { transition-delay: 0.3s; }
.htmx-settling .food-card.htmx-added:nth-child(7) { transition-delay: 0.35s; }
.htmx-settling .food-card.htmx-added:nth-child(8) { transition-delay: 0.4s; }
.htmx-settling .food-card.htmx-added:nth-child(9) { transition-delay: 0.45s; }
.htmx-settling .food-card.htmx-added:nth-child(10) { transition-delay: 0.5s; }
.htmx-settling .food-card.htmx-added:nth-child(11) { transition-delay: 0.55s; }
.htmx-settling .food-card.htmx-added:nth-child(12) { transition-delay: 0.6s; }
.htmx-settling .food-card.htmx-added:nth-child(13) { transition-delay: 0.65s; }
.htmx-settling .food-card.htmx-added:nth-child(14) { transition-delay: 0.7s; }
.htmx-settling .food-card.htmx-added:nth-child(15) { transition-delay: 0.75s; }
.htmx-settling .food-card.htmx-added:nth-child(16) { transition-delay: 0.8s; }
.htmx-settling .food-card.htmx-added:nth-child(17) { transition-delay: 0.85s; }
.htmx-settling .food-card.htmx-added:nth-child(18) { transition-delay: 0.9s; }
.htmx-settling .food-card.htmx-added:nth-child(19) { transition-delay: 0.95s; }
.htmx-settling .food-card.htmx-added:nth-child(20) { transition-delay: 1s; }
.htmx-settling .food-card.htmx-added:nth-child(21) { transition-delay: 1.05s; }
.htmx-settling .food-card.htmx-added:nth-child(22) { transition-delay: 1.1s; }
.htmx-settling .food-card.htmx-added:nth-child(23) { transition-delay: 1.15s; }
.htmx-settling .food-card.htmx-added:nth-child(24) { transition-delay: 1.2s; }
.htmx-settling .food-card.htmx-added:nth-child(25) { transition-delay: 1.25s; }
.htmx-settling .food-card.htmx-added:nth-child(26) { transition-delay: 1.3s; }
.htmx-settling .food-card.htmx-added:nth-child(27) { transition-delay: 1.35s; }
.htmx-settling .food-card.htmx-added:nth-child(28) { transition-delay: 1.4s; }
.htmx-settling .food-card.htmx-added:nth-child(29) { transition-delay: 1.45s; }
.htmx-settling .food-card.htmx-added:nth-child(30) { transition-delay: 1.5s; }

/* Dim during requests */
.htmx-request {
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

/* ========================================
   PAGE-SPECIFIC OVERRIDES
   ======================================== */

.search-results .food-grid {
  gap: var(--space-md);
}

.home .hero-food {
  display: flex;
  justify-content: center;
  background-image: url('https://cdn.nutrepedia.com/thanksgiving.jpeg?quality=90&format=webp');
}

.home .hero-food .logo.large img {
  filter: drop-shadow(var(--shadow-logo-icon-md))
}

.home div.logo.large {
  color: var(--text-on-dark);
  font-size: 11rem;
  text-shadow: var(--shadow-emboss);
}

/* Page Layout Grid */
.page-layout {
  display: grid;
  grid-template-columns: 1fr min(360px, 28vw);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--space-lg);
}

.page-layout .site-header {
  grid-column: 1 / -1;
}

.page-layout .site-footer {
  grid-column: 1 / -1;
}

.page-layout main.content-section {
  grid-column: 1 / -1;
}

/* Info Container */
.info-container {
  padding: var(--space-xl);
  text-align: justify;
}

.info-container > h2:first-child {
  display: none;
}

.info-container h2,
.info-container h3 {
  text-transform: capitalize;
  font-weight: 600;
  border-bottom: 2px solid hsl(var(--clr-coral-500));
  display: inline-block;
  line-height: 0.15;
  margin-block: 0.5em 0.25em;
  color: var(--brand-primary);
}

/* Drop cap for introduction */
.content-section-item[data-key="introduction"] h3 {
  display: none;
}

.content-section-item[data-key="introduction"] p:first-of-type {
  text-indent: 0;
}

.content-section-item[data-key="introduction"] p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-size: 5em;
  font-weight: 600;
  line-height: 0.9;
  float: left;
  padding-inline-end: 0.05em;
  margin-block: 0.03em -0.1em;
  color: var(--text-accent-green);
  text-shadow: var(--shadow-drop-cap);
}

[dir="rtl"] .content-section-item[data-key="introduction"] p:first-of-type::first-letter {
  float: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding-inline-end: 0;
  margin-block: 0;
  color: inherit;
  text-shadow: none;
}

.content-section p {
  font-family: var(--font-body);
  margin-block-end: 1em;
}

.content-section p em {
  font-style: italic;
}

/* ========================================
   RELATED FOODS SIDEBAR
   ======================================== */

/* Parent needs relative positioning for absolute sidebar */
main.content-section {
  position: relative;
}

/* Sidebar positioning */
.related-foods {
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) var(--space-xl);
}

.related-foods .related-foods__heading {
  font-size: var(--fs-md);
  font-weight: 600;
  margin-block-end: var(--space-sm);
  border-bottom: 2px solid hsl(var(--clr-coral-500));
  display: inline-block;
  line-height: 0.15;
  color: var(--brand-primary);
  padding-top: 0;
  padding-bottom: var(--space-sm);
  margin-top: 0;
}

/* Compact vertical grid */
.related-foods .food-grid {
  display: grid;
  gap: 0;
}

/* Remove card styling */
.related-foods .food-card.related-food {
  background: none;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

/* Rectangular thumbnail */
.related-foods .food-card__image {
  aspect-ratio: 16/9;
  min-height: unset;
  border-radius: 0;
}

/* Overlay name on image */
.related-foods .food-card__name {
  position: absolute;
  top: 0;
  inset-inline: 0;
  border: none;
  background: linear-gradient(var(--bg-body) 10%, transparent 100%);
  padding: var(--space-sm) var(--space-xs);
  margin: 0;
  text-align: start;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  text-shadow: var(--shadow-sm);
}

/* Hide subtitle */
.related-foods .food-card__subtitle {
  display: none;
}

/* Hover effect */
.related-foods .food-card:hover .food-card__name {
  color: var(--text-on-dark);
}

[dir="rtl"] .quantity-input {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

[dir="rtl"] .unit-selector {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  background-position: left 0.4em center;
}

/* ========================================
   RESPONSIVE OVERRIDES
   ======================================== */

/* Related foods: stack on medium screens */
@media (max-width: 1024px) {
  .related-foods {
    position: static;
    width: 100%;
    max-width: none;
    padding: var(--space-xl);
  }

  .related-foods .food-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .related-foods .food-card.related-food {
    flex: 1 1 150px;
    max-width: 200px;
  }
}

@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
  }

  .hero-food {
    grid-template-columns: 1fr;
  }

  .nutrition-facts {
    position: relative;
    max-width: 95%;
    min-width: 70%;
    margin: -3rem auto 0 auto;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .htmx-settling .food-card.htmx-added {
    transition-delay: 0s !important;
  }
}