/* Ingredient library — article and index layouts on the Organic design-system
   tokens. Reuses the .verdict-* colour classes from landing.css so a verdict
   looks the same here as it does on the home page and in the app. */

/* the header brand is a link on generated pages */
.brand-mark { color: inherit; text-decoration: none; }
.brand-mark:hover { color: inherit; }

/* — breadcrumb — */
.crumbs {
  padding: 32px 0 0; font-size: 14px; color: var(--color-neutral-600);
  display: flex; gap: 8px; align-items: center;
}
.crumbs a { color: var(--color-neutral-700); }
.crumbs a:hover { color: var(--color-accent-700); }

/* — article — */
.ing { max-width: 47em; }
.ing-head { padding: 24px 0 40px; }
.ing-head .tag { margin-bottom: 18px; }
.ing-head h1 { font-size: 46px; line-height: 1.08; margin: 0 0 24px; }

.ing-verdict {
  display: flex; flex-direction: column; gap: 4px;
  border-radius: var(--radius-lg); padding: 22px 28px; margin: 0 0 28px;
}
.ing-verdict-label { font-family: var(--font-heading); font-size: 32px; line-height: 1; }
.ing-verdict-blurb { font-size: 16px; line-height: 1.5; }

.ing-verdict.verdict-halal .ing-verdict-label { color: var(--color-accent-2-800); }
.ing-verdict.verdict-halal .ing-verdict-blurb { color: var(--color-accent-2-900); }
.ing-verdict.verdict-uncertain .ing-verdict-label { color: #6b4d0e; }
.ing-verdict.verdict-uncertain .ing-verdict-blurb { color: #5c4310; }
.ing-verdict.verdict-haram .ing-verdict-label { color: #7e3220; }
.ing-verdict.verdict-haram .ing-verdict-blurb { color: #6d2c1c; }
.ing-verdict.verdict-notchecked .ing-verdict-label { color: var(--color-neutral-800); }
.ing-verdict.verdict-notchecked .ing-verdict-blurb { color: var(--color-neutral-700); }

/* The lead answer — this is what an AI Overview quotes and what someone
   standing in an aisle actually reads. It gets to look like it matters. */
.ing-answer {
  font-size: 21px; line-height: 1.55; color: var(--color-neutral-900);
  margin: 0 0 20px; text-wrap: pretty;
}
.ing-meta { font-size: 14px; line-height: 1.6; color: var(--color-neutral-600); margin: 0; }
.ing-meta span { color: var(--color-neutral-700); }

.ing-aka { margin: 22px 0 0; }
.ing-aka-heading {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--color-neutral-800);
}
.ing-aka-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.ing-aka-list span {
  display: inline-block;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-neutral-800);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  padding: 5px 10px;
}

.ing-body { padding: 0 0 72px; }
.ing-body h2 { font-size: 27px; line-height: 1.15; margin: 48px 0 16px; }
.ing-body h3 { font-size: 18px; margin: 28px 0 8px; }
.ing-body p { font-size: 17px; line-height: 1.68; color: var(--color-neutral-800); margin: 0 0 18px; }
.ing-body a { text-decoration: underline; }

.ing-checks, .ing-sources { margin: 0 0 18px; padding-left: 22px; }
.ing-checks li, .ing-sources li {
  font-size: 17px; line-height: 1.65; color: var(--color-neutral-800); margin: 0 0 11px;
}
.ing-checks li::marker { color: var(--color-accent); }
.ing-sources li { font-size: 15px; }
.ing-sources a { text-decoration: underline; }

.ing-disclaimer {
  background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md); padding: 18px 22px; margin: 28px 0 0 !important;
  font-size: 14.5px !important; line-height: 1.6 !important; color: var(--color-neutral-700) !important;
}

/* — authority positions —
   Rendered from the app's guidance_topics.positions. The point of this block
   is that it shows disagreement rather than resolving it, so the positions
   are colour-coded but none is visually privileged. */
.auth-table {
  border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md);
  overflow: hidden; margin: 0 0 18px;
}
.auth-row {
  display: grid; grid-template-columns: 190px 170px 1fr; gap: 16px;
  padding: 14px 20px; align-items: baseline;
  border-bottom: 1px solid var(--color-neutral-300); background: var(--color-neutral-100);
}
.auth-row:last-child { border-bottom: 0; }
.auth-name {
  font-family: var(--font-heading); font-size: 16px; line-height: 1.2; color: var(--color-text);
}
.auth-kind {
  display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-neutral-600); margin-top: 3px;
}
.auth-pos {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  padding: 4px 11px; border-radius: 999px; justify-self: start; white-space: nowrap;
}
.pos-forbids { background: #f8ded2; color: #7e3220; }
.pos-permits { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.pos-conditional { background: #f7e9c6; color: #6b4d0e; }
.pos-disputed { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.auth-summary { font-size: 15px; line-height: 1.55; color: var(--color-neutral-800); }
.auth-summary a { text-decoration: underline; }

.ing-meta code {
  font-size: 13px; background: var(--color-neutral-200); padding: 1px 6px;
  border-radius: 5px; color: var(--color-neutral-800);
}

/* — related — */
.related-section { padding: 0 0 72px; }
.related-section h2 { font-size: 27px; margin: 0 0 20px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 47em; }
.related-card {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  border-radius: var(--radius-md); text-decoration: none;
}
.related-card:hover { box-shadow: var(--shadow-md); }
.related-verdict { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.related-name { font-family: var(--font-heading); font-size: 18px; line-height: 1.15; }

.related-card.verdict-halal { color: var(--color-accent-2-900); }
.related-card.verdict-uncertain { color: #5c4310; }
.related-card.verdict-haram { color: #6d2c1c; }
.related-card.verdict-notchecked { color: var(--color-neutral-800); }

/* — hub — */
.hub-head { padding: 56px 0 28px; max-width: 34em; }
.hub-head .tag { margin-bottom: 18px; }
.hub-head h1 { font-size: 54px; line-height: 1.06; margin: 0 0 18px; }
.hub-head .lede { font-size: 19px; line-height: 1.55; color: var(--color-neutral-800); margin: 0; text-wrap: pretty; }

.hub-note {
  max-width: 47em; padding: 0 0 48px;
}
.hub-note p {
  background: var(--color-accent-2-200); border-radius: var(--radius-md);
  padding: 18px 24px; margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--color-accent-2-900);
}
.hub-note a { color: var(--color-accent-2-900); text-decoration: underline; }

.hub-featured {
  margin: 0 0 48px;
  padding: 28px 0 8px;
  border-top: 1px solid var(--color-neutral-200);
}
.hub-featured-head { max-width: 38em; margin: 0 0 18px; }
.hub-featured-head h2 {
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 8px;
}
.hub-featured-head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-neutral-700);
}
.hub-featured-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.hub-featured-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
}
.hub-featured-list a:hover { box-shadow: var(--shadow-md); }
.hub-featured-name {
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.2;
}
.hub-featured-verdict {
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hub-featured-verdict.verdict-halal { color: var(--color-accent-2-800); }
.hub-featured-verdict.verdict-uncertain { color: #6b4d0e; }
.hub-featured-verdict.verdict-haram { color: #7e3220; }

.hub-groups { padding: 0 0 40px; }
.hub-group { margin: 0 0 52px; }
.hub-group-head {
  border-radius: var(--radius-lg); padding: 20px 28px; margin: 0 0 20px; max-width: 47em;
}
.hub-group-head h2 { font-size: 28px; line-height: 1; margin: 0 0 6px; }
.hub-group-head p { margin: 0; font-size: 16px; line-height: 1.5; }
.hub-group-head.verdict-halal h2 { color: var(--color-accent-2-800); }
.hub-group-head.verdict-uncertain h2 { color: #6b4d0e; }
.hub-group-head.verdict-haram h2 { color: #7e3220; }
.hub-group-head.verdict-notchecked h2 { color: var(--color-neutral-800); }

.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hub-card {
  display: flex; flex-direction: column; gap: 7px; padding: 22px 24px 24px;
  background: var(--color-surface); border-radius: var(--radius-md); text-decoration: none;
}
.hub-card:hover { box-shadow: var(--shadow-md); }
.hub-card-name { font-family: var(--font-heading); font-size: 21px; line-height: 1.15; color: var(--color-text); }
.hub-card-desc { font-size: 15px; line-height: 1.5; color: var(--color-neutral-700); }

.hub-disclaimer { max-width: 47em; padding: 0 0 72px; }
.hub-disclaimer p {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-neutral-600);
}
.hub-disclaimer a { color: var(--color-neutral-700); text-decoration: underline; }

/* the CTA panel is reused from landing.css; give it the heading it needs here */
.ing ~ .cta-section .cta-panel h2, .hub-groups ~ .cta-section .cta-panel h2 { font-size: 38px; }

@media (max-width: 900px) {
  .ing-head h1 { font-size: 34px; }
  .hub-head h1 { font-size: 38px; }
  .ing-answer { font-size: 19px; }
  .ing-body h2 { font-size: 23px; margin-top: 38px; }
  .ing-body p, .ing-checks li { font-size: 16px; }
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-featured-list { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
  .auth-kind { display: inline; margin-left: 8px; }
}

@media (max-width: 560px) {
  .hub-grid, .related-grid, .hub-featured-list { grid-template-columns: 1fr; }
  .ing-verdict { padding: 18px 22px; }
  .ing-verdict-label { font-size: 27px; }
}