/* ============================================================
   Vitamins & Minerals — site-specific styling for the
   /vitamins-minerals encyclopedia section. Loaded automatically
   by lib/CustomAssets.php from content/custom/css/.

   Until this file existed the V&M-specific classes used in
   the Tier 1/2/3 content (vm-keypoints, vm-food-table-wrap,
   vm-ri-table-wrap, vm-safety-aside) had zero CSS and rendered
   as raw HTML — which is what was making the L3 pages look
   broken (cramped tables, unreadable on mobile, bullets
   sitting off to the left, etc.).

   This file styles:
     - L2 listing: .vm-l2-intro / .vm-l2-group / .vm-l2-list /
       .vm-l2-pillar-cta
     - L3 chrome: .vm-keypoints, .vm-safety-aside, .vm-disclaimer
     - L3 tables: .vm-food-table-wrap, .vm-food-table,
       .vm-ri-table-wrap, .vm-ri-table  (responsive, mobile-safe)
   ============================================================ */

/* -----------------------------------------------------------
   L2 vitamins-minerals listing
   ----------------------------------------------------------- */
.vm-l2-intro { max-width: 760px; margin: 0 auto 1.5rem; }
.vm-l2-intro .vm-l2-lede {
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--text-color, #1f2937);
    margin: 0 0 1rem;
}
.vm-l2-intro p { line-height: 1.6; margin: 0 0 0.85rem; }

/* Five group sections stack vertically; each one is a subtly-tinted
   box (the tint distinguishes vitamin groups from mineral groups at
   a glance) with the nutrients listed as individual full-width link
   rows underneath. No pills, no bullets. */
.vm-l2-groups { max-width: 760px; margin: 0 auto; }

.vm-l2-group {
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--border-color, #d0d0d4);
    border-radius: 0.5rem;
}
.vm-l2-group h2 {
    font-size: 1.1rem;
    margin: 0 0 0.6rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 600;
    color: var(--text-color, #1f2937);
}

/* Subtle per-section background tint. The colour picks up the same
   palette the pillar article uses (amber/blue/violet/green/red) but
   at a very low opacity so it reads as a faint wash, not a coloured
   panel. */
.vm-l2-group--vitamin-fat-soluble  { background: rgba(202, 138, 4, 0.05);  border-color: rgba(202, 138, 4, 0.20); }
.vm-l2-group--vitamin-water-soluble { background: rgba(37, 99, 235, 0.05); border-color: rgba(37, 99, 235, 0.20); }
.vm-l2-group--vitamin-like         { background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.20); }
.vm-l2-group--mineral-macro        { background: rgba(21, 128, 61, 0.05);  border-color: rgba(21, 128, 61, 0.20); }
.vm-l2-group--mineral-trace        { background: rgba(185, 28, 28, 0.05);  border-color: rgba(185, 28, 28, 0.20); }

[data-theme="dark"] .vm-l2-group--vitamin-fat-soluble  { background: rgba(251, 191, 36, 0.08);  border-color: rgba(251, 191, 36, 0.25); }
[data-theme="dark"] .vm-l2-group--vitamin-water-soluble { background: rgba(96, 165, 250, 0.08); border-color: rgba(96, 165, 250, 0.25); }
[data-theme="dark"] .vm-l2-group--vitamin-like         { background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.25); }
[data-theme="dark"] .vm-l2-group--mineral-macro        { background: rgba(74, 222, 128, 0.08);  border-color: rgba(74, 222, 128, 0.25); }
[data-theme="dark"] .vm-l2-group--mineral-trace        { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.25); }

/* Each nutrient is a full-width link row, stacked vertically. */
.vm-l2-links {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vm-l2-links a {
    display: block;
    padding: 0.6rem 0.75rem;
    color: #2563eb;
    text-decoration: none;
    font-size: 0.98rem;
    line-height: 1.35;
    border-radius: 0.25rem;
    transition: background 0.12s ease, color 0.12s ease;
}
.vm-l2-links a + a {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.vm-l2-links a:hover,
.vm-l2-links a:focus {
    background: rgba(255, 255, 255, 0.55);
    color: #1d4fcf;
}
[data-theme="dark"] .vm-l2-links a { color: #60a5fa; }
[data-theme="dark"] .vm-l2-links a + a { border-top-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .vm-l2-links a:hover,
[data-theme="dark"] .vm-l2-links a:focus {
    background: rgba(0, 0, 0, 0.20);
    color: #93c5fd;
}

/* Pillar CTA — uses the site's standard "related panel" idiom from
   encyclopedia.css (.enc-related): light background + thicker left
   accent + standard padding. Keeps it familiar. */
.vm-l2-pillar-cta {
    max-width: 760px;
    margin: 2rem auto 0;
    padding: 1rem 1.25rem;
    background: #f5f7fb;
    border-left: 4px solid #2563eb;
    border-radius: 0.25rem;
}
.vm-l2-pillar-cta p { margin: 0.35rem 0; line-height: 1.55; }
.vm-l2-pillar-cta a {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 500;
}
[data-theme="dark"] .vm-l2-pillar-cta {
    background: rgba(37, 99, 235, 0.10);
    border-left-color: #60a5fa;
}
[data-theme="dark"] .vm-l2-pillar-cta a { color: #60a5fa; }

/* -----------------------------------------------------------
   Prose lists inside V&M L3 entries
   -----------------------------------------------------------
   The site's global "prose ul indent" rule in template/css/style.css
   targets .page-content / .entry-content / <article> wrappers. The
   encyclopedia engine wraps L3 body content in .enc-section-body
   instead, so bare <ul> lists in V&M prose (deficiency at-risk
   groups, supplement-notes bullet lists, related-links bullets,
   etc.) get no indent and the bullet markers sit at or off the
   left edge on mobile. This rule restores the same 1.5rem indent
   the global rule applies elsewhere. Scoped to bare lists only
   (:not([class])) so any list with its own class layout opts out. */
.enc-section-body ul:not([class]),
.enc-section-body ol:not([class]) {
    padding-left: 1.5rem;
    margin: 0.5rem 0 1rem;
    line-height: 1.6;
}
.enc-section-body ul:not([class]) li,
.enc-section-body ol:not([class]) li {
    margin: 0.35rem 0;
}

/* -----------------------------------------------------------
   L3 chrome — key points, safety asides, disclaimer
   ----------------------------------------------------------- */

/* Key points box at the top of each L3 entry */
.vm-keypoints {
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
    background: #f5f7fb;
    border-left: 4px solid #2563eb;
    border-radius: 0.3rem;
}
.vm-keypoints h3 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2563eb;
    font-weight: 600;
}
.vm-keypoints ul {
    margin: 0;
    padding-left: 1.4rem;
    line-height: 1.6;
}
.vm-keypoints li { margin: 0.35rem 0; }
[data-theme="dark"] .vm-keypoints {
    background: rgba(37, 99, 235, 0.10);
    border-left-color: #60a5fa;
}
[data-theme="dark"] .vm-keypoints h3 { color: #60a5fa; }

/* Safety asides (Folate pregnancy, Brazil nut selenium, Liver
   in pregnancy, Dark chocolate moderation, etc.) — amber, more
   visually distinct than the blue key-points box. */
.vm-safety-aside {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: #fff7ed;
    border-left: 4px solid #d97706;
    border-radius: 0.3rem;
}
.vm-safety-aside h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: #9a3412;
    font-weight: 600;
}
.vm-safety-aside p { margin: 0.45rem 0; line-height: 1.55; }
.vm-safety-aside ul {
    margin: 0.5rem 0;
    padding-left: 1.4rem;
    line-height: 1.6;
}
.vm-safety-aside li { margin: 0.3rem 0; }
[data-theme="dark"] .vm-safety-aside {
    background: rgba(217, 119, 6, 0.10);
    border-left-color: #fbbf24;
}
[data-theme="dark"] .vm-safety-aside h3 { color: #fbbf24; }

/* Small italic disclaimer footnote at the bottom of an L3 */
.vm-disclaimer {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.9rem;
    color: var(--text-light, #6b7280);
    font-style: italic;
}

/* -----------------------------------------------------------
   L3 tables — food sources and UK reference intake
   ----------------------------------------------------------- */

/* Wrapper enables horizontal scroll on mobile so wide tables
   don't overflow the page. */
.vm-food-table-wrap,
.vm-ri-table-wrap {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color, #d0d0d4);
    border-radius: 0.4rem;
    background: var(--card-bg, #fff);
}
[data-theme="dark"] .vm-food-table-wrap,
[data-theme="dark"] .vm-ri-table-wrap {
    background: #1a2436;
    border-color: #334155;
}

.vm-food-table,
.vm-ri-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 480px;            /* forces horizontal scroll on narrow mobiles */
}

.vm-food-table caption,
.vm-ri-table caption {
    padding: 0.8rem 1rem;
    text-align: left;
    font-size: 0.88rem;
    color: var(--text-light, #6b7280);
    line-height: 1.5;
    border-bottom: 1px solid var(--border-color, #d0d0d4);
    caption-side: top;
}

.vm-food-table thead th,
.vm-ri-table thead th {
    background: #f5f7fb;
    text-align: left;
    padding: 0.6rem 0.85rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: #1f2937;
    border-bottom: 2px solid var(--border-color, #d0d0d4);
    white-space: nowrap;
}
[data-theme="dark"] .vm-food-table thead th,
[data-theme="dark"] .vm-ri-table thead th {
    background: #243044;
    color: #e2e8f0;
}

.vm-food-table tbody th,
.vm-food-table tbody td,
.vm-ri-table tbody th,
.vm-ri-table tbody td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    line-height: 1.45;
    vertical-align: top;
}

/* First column (food name, age group) — left-aligned, bolder */
.vm-food-table tbody th,
.vm-ri-table tbody th {
    text-align: left;
    font-weight: 500;
    background: var(--card-bg, #fff);
}
.vm-food-table tbody th small,
.vm-ri-table tbody th small {
    display: block;
    color: var(--text-light, #6b7280);
    font-size: 0.8rem;
    font-weight: 400;
    margin-top: 0.15rem;
    line-height: 1.4;
}

/* Numbers / RHS columns — right-aligned numbers read more cleanly */
.vm-food-table tbody td:not(:last-child),
.vm-ri-table tbody td:not(:last-child) {
    white-space: nowrap;
}
.vm-food-table tbody td:last-child,
.vm-ri-table tbody td {
    color: var(--text-color, #1f2937);
}

.vm-food-table tbody tr:hover,
.vm-ri-table tbody tr:hover {
    background: #f9fafb;
}
[data-theme="dark"] .vm-food-table tbody tr:hover,
[data-theme="dark"] .vm-ri-table tbody tr:hover {
    background: #243044;
}

.vm-food-table tbody tr:last-child th,
.vm-food-table tbody tr:last-child td,
.vm-ri-table tbody tr:last-child th,
.vm-ri-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Links inside tables — keep them clearly linkable but not loud */
.vm-food-table a,
.vm-ri-table a {
    color: #2563eb;
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, 0.25);
}
.vm-food-table a:hover,
.vm-ri-table a:hover { border-bottom-color: #2563eb; }
[data-theme="dark"] .vm-food-table a,
[data-theme="dark"] .vm-ri-table a { color: #60a5fa; border-bottom-color: rgba(96, 165, 250, 0.35); }

/* Mobile tightening — narrow viewports get smaller text + tighter
   padding so more fits in a row before the horizontal scroll kicks in */
@media (max-width: 600px) {
    .vm-food-table,
    .vm-ri-table {
        font-size: 0.88rem;
    }
    .vm-food-table caption,
    .vm-ri-table caption { padding: 0.6rem 0.8rem; font-size: 0.82rem; }
    .vm-food-table thead th,
    .vm-ri-table thead th { padding: 0.45rem 0.6rem; font-size: 0.82rem; }
    .vm-food-table tbody th,
    .vm-food-table tbody td,
    .vm-ri-table tbody th,
    .vm-ri-table tbody td { padding: 0.45rem 0.6rem; }
}