/**
 * Fraction Display CSS
 * Ensures Unicode fractions render correctly across all browsers
 * and improves visual consistency
 */

/* ============================================================================
   FRACTION CHARACTER RENDERING
   ============================================================================ */

/* Ensure fraction characters render properly */
.ingredient-quantity,
[class*="quantity"],
li {
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   ACCESSIBILITY: TOOLTIPS & TITLE ATTRIBUTES
   ============================================================================ */

/* Highlight elements with title attributes (hovers show tooltips) */
/* Exclude interactive controls, which have their own tooltip/focus styling
   (kept in sync with the exclusion list in fraction-ui-polish.js). */
[title]:not(.nav-item):not(.cook-badge):not(.shopped-badge):not(.eaters-badge):not(button):not(a):not(input):not(select):not(textarea):not(label):not(summary):not([role="button"]):not([role="link"]) {
  cursor: pointer;
  position: relative;
}

/* Browser default tooltips work fine, but we can enhance them if needed */
[title]:not(button)::before {
  content: "";
}

/* Mobile: Show tooltips on tap if title attribute present */
@media (hover: none) and (pointer: coarse) {
  [title]:not(.nav-item):not(.cook-badge):not(.shopped-badge):not(.eaters-badge):not(button):not(a):not(input):not(select):not(textarea):not(label):not(summary):not([role="button"]):not([role="link"]) {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.15);
  }
}

/* ============================================================================
   INGREDIENT LIST IMPROVEMENTS
   ============================================================================ */

.ingredients-list,
ul[class*="ingredient"] {
  line-height: 1.8;
  word-break: break-word;
  overflow-wrap: break-word;
}

.ingredients-list li,
ul[class*="ingredient"] li {
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
}

/* Ensure fractions don't break across lines */
.ingredient-quantity {
  white-space: nowrap;
  display: inline-block;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
  .ingredients-list li {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

/* ============================================================================
   DARK MODE SUPPORT (if using prefers-color-scheme)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  [title]:not(.nav-item):not(.cook-badge):not(.shopped-badge):not(.eaters-badge):not(button):not(a):not(input):not(select):not(textarea):not(label):not(summary):not([role="button"]):not([role="link"]) {
    border-bottom-color: rgba(255, 255, 255, 0.2);
  }
}

/* ============================================================================
   PRINT STYLING
   ============================================================================ */

@media print {
  /* Ensure fractions print clearly */
  li {
    page-break-inside: avoid;
  }
}