/*
 * article.css
 * Location: css/article.css  (root css directory — loaded by header.php)
 * Applies to all article pages on Fitmotif.com
 * Mobile-first layout
 */

/* ─── Header offset ──────────────────────────────────────────────
   The fm-header is sticky/fixed. Push page body down so the H1
   is never hidden beneath it. Adjust --header-h to match the
   actual rendered height of .fm-header if it changes.
   ─────────────────────────────────────────────────────────────── */
:root {
    --header-h: 64px; /* height of .fm-header — update if header changes */
}

body {
    padding-top: var(--header-h);
}

/* ─── Page wrapper — mobile: stacked column ──────────────────── */
.page-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 12px;
    box-sizing: border-box;
    gap: 20px;
}

/* ─── Sidebars — full width on mobile, fixed on desktop ─────────
   General rules: sidebars are 250px wide each.
   On mobile they stack below the main content.
   ─────────────────────────────────────────────────────────────── */
.sidebar-left,
.sidebar-right {
    width: 100%;
    box-sizing: border-box;
}

/* ─── Main article/content column ────────────────────────────── */
.article-main,
.legal-main {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ─── Desktop layout: left sidebar | main | right sidebar ───────
   3-column: articles & calculators (both sidebars present)
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
    .page-wrapper {
        flex-direction: row;
        align-items: flex-start;
        padding: 24px 16px;
    }

    .sidebar-left {
        width: 250px;
        flex: 0 0 250px;
        position: sticky;
        top: calc(var(--header-h) + 16px);
    }

    .article-main {
        flex: 1 1 0;
    }

    .sidebar-right {
        width: 250px;
        flex: 0 0 250px;
        position: sticky;
        top: calc(var(--header-h) + 16px);
    }
}

/* ─── Legal page layout: main content | right sidebar ───────────
   2-column only — no left sidebar on legal pages.
   Mobile: main first, sidebar below.
   Desktop: main flex-grows left, sidebar fixed 250px on the right.
   ─────────────────────────────────────────────────────────────── */
.page-wrapper--legal {
    max-width: 960px; /* narrower max since there's no left sidebar */
}

/* Mobile: stack main above sidebar */
.page-wrapper--legal .legal-main   { order: 1; }
.page-wrapper--legal .sidebar-right { order: 2; }

@media (min-width: 900px) {
    .page-wrapper--legal {
        flex-direction: row;
        align-items: flex-start;
        padding: 24px 16px;
    }

    .page-wrapper--legal .legal-main {
        flex: 1 1 0;
        order: 1;
    }

    .page-wrapper--legal .sidebar-right {
        width: 250px;
        flex: 0 0 250px;
        position: sticky;
        top: calc(var(--header-h) + 16px);
        order: 2;
    }
}

/* ─── Article Header ─────────────────────────────────────────── */
.article-header {
    margin-bottom: 24px;
}

.article-header h1 {
    font-size: clamp(1.45rem, 4vw, 2.1rem);
    line-height: 1.25;
    color: #1a1a2e;
    margin: 0 0 12px;
    font-weight: 700;
}

.article-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.6;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.article-tags .tag {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ─── Featured Image & Infographic ──────────────────────────── */
.article-featured-image,
.article-infographic {
    margin: 0 0 28px;
}

.article-featured-image img,
.article-infographic img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.article-featured-image figcaption,
.article-infographic figcaption {
    font-size: 0.82rem;
    color: #888;
    text-align: center;
    margin-top: 6px;
    font-style: italic;
}

/* ─── Article Body Typography ────────────────────────────────── */
.article-body {
    font-size: 1rem;
    line-height: 1.78;
    color: #222;
}

.article-section {
    margin-bottom: 36px;
}

.article-section h2 {
    font-size: clamp(1.15rem, 3.5vw, 1.55rem);
    color: #1a1a2e;
    margin: 0 0 14px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 700;
}

.article-section h3 {
    font-size: 1.05rem;
    color: #2c3e50;
    margin: 0 0 8px;
    font-weight: 600;
}

.article-section p {
    margin: 0 0 18px;
}

/* Text links — blue per general rules (not in header/footer/sidebars) */
.article-body a {
    color: #1565c0;
    text-decoration: none;
    transition: color 0.2s;
}

.article-body a:hover,
.article-body a:focus {
    color: #0d47a1;
}

/* ─── CTA Box ────────────────────────────────────────────────── */
.article-cta-box {
    background: #f0f7ff;
    border-left: 4px solid #1565c0;
    border-radius: 6px;
    padding: 14px 18px;
    margin: 20px 0;
    font-size: 0.97rem;
}

.article-cta-box p {
    margin: 0;
}

/* ─── Tables ─────────────────────────────────────────────────── */
.article-table-wrap {
    overflow-x: auto;
    margin: 20px 0 28px;
    -webkit-overflow-scrolling: touch;
}

.article-table {
    width: 100%;
    min-width: 400px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.article-table caption {
    font-size: 0.84rem;
    color: #555;
    margin-bottom: 8px;
    font-style: italic;
    text-align: left;
}

.article-table thead {
    background: #1a1a2e;
    color: #fff;
}

.article-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.88rem;
}

.article-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.15s;
}

.article-table tbody tr:hover {
    background: #f5f5f5;
}

.article-table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
}

/* BMI category row colour-coded left border */
.bmi-table .bmi-row.underweight { border-left: 4px solid #5c8a9a; }
.bmi-table .bmi-row.normal      { border-left: 4px solid #4caf50; }
.bmi-table .bmi-row.overweight  { border-left: 4px solid #ffc107; }
.bmi-table .bmi-row.obese-1     { border-left: 4px solid #ff7043; }
.bmi-table .bmi-row.obese-2     { border-left: 4px solid #e53935; }
.bmi-table .bmi-row.obese-3     { border-left: 4px solid #b71c1c; }

/* Alternating rows for comparison / IBW tables */
.comparison-table tbody tr:nth-child(even),
.ibw-table tbody tr:nth-child(even) {
    background: #fafafa;
}

/* ─── FAQ Section ────────────────────────────────────────────── */
.article-faq .faq-item {
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 14px;
}

.article-faq .faq-item h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    color: #1a1a2e;
}

.article-faq .faq-item p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
}

/* ─── Mobile fine-tuning ─────────────────────────────────────── */
@media (max-width: 599px) {
    .article-header h1 {
        font-size: 1.35rem;
    }

    .article-cta-box {
        font-size: 0.92rem;
        padding: 12px 14px;
    }

    .article-table {
        font-size: 0.82rem;
    }

    .article-table thead th,
    .article-table tbody td {
        padding: 8px 10px;
    }

    /* On mobile: main content first, sidebars below (3-column pages only) */
    .page-wrapper:not(.page-wrapper--legal) .sidebar-left  { order: 2; }
    .page-wrapper:not(.page-wrapper--legal) .article-main  { order: 1; }
    .page-wrapper:not(.page-wrapper--legal) .sidebar-right { order: 3; }
}

/* ─── Sidebar widgets — shared shell ────────────────────────── */
.sidebar-widget {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    padding: 18px 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.sidebar-widget__title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ececec;
}

/* ─── TOC (left sidebar) ─────────────────────────────────────── */
.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc-counter;
}

.toc-list__item {
    counter-increment: toc-counter;
    margin-bottom: 2px;
}

.toc-list__link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 0.88rem;
    line-height: 1.35;
    color: #333;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.toc-list__link::before {
    content: counter(toc-counter);
    flex: 0 0 18px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #aaa;
    text-align: right;
}

.toc-list__link:hover {
    background: #f0f7ff;
    color: #1565c0;
}

.toc-list__link--active {
    background: #e8f0fe;
    color: #1565c0;
    font-weight: 600;
}

.toc-list__link--active::before {
    color: #1565c0;
}

.sidebar-empty {
    font-size: 0.85rem;
    color: #aaa;
    margin: 0;
}

/* ─── Save button (right sidebar) ───────────────────────────── */
.save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #1565c0;
    border-radius: 8px;
    background: #fff;
    color: #1565c0;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    box-sizing: border-box;
}

.save-btn:hover:not(:disabled) {
    background: #1565c0;
    color: #fff;
}

.save-btn--saved {
    background: #1565c0;
    color: #fff;
}

.save-btn--saved:hover:not(:disabled) {
    background: #0d47a1;
    border-color: #0d47a1;
}

.save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.save-btn__icon {
    font-size: 1.1rem;
    line-height: 1;
}

.save-status {
    font-size: 0.82rem;
    margin: 8px 0 0;
    min-height: 1.2em;
    text-align: center;
}

.save-status--ok  { color: #2e7d32; }
.save-status--err { color: #c62828; }

.save-collection-link {
    display: block;
    margin-top: 10px;
    font-size: 0.83rem;
    color: #1565c0;
    text-align: center;
    text-decoration: none;
}

.save-collection-link:hover { text-decoration: underline; }

.save-guest-msg {
    font-size: 0.88rem;
    color: #555;
    margin: 0;
    line-height: 1.55;
    text-align: center;
}

.save-guest-msg a {
    color: #1565c0;
    font-weight: 600;
}

/* ─── Share buttons (right sidebar) ─────────────────────────── */
.share-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.share-btn {
    display: block;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.18s;
}

.share-btn:hover { opacity: 0.85; }

.share-btn--fb { background: #1877f2; color: #fff; }
.share-btn--tw { background: #000;    color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR LEFT — TOC WIDGET  (article pages)
   Appended to article.css — all rules are scoped to .slw--toc
   ═══════════════════════════════════════════════════════════════ */

/* ── Widget shell ─────────────────────────────────────────────── */
.slw {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* ── Header row (clickable toggle on mobile) ──────────────────── */
.slw__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: #f8f8f8;
    border-bottom: 1px solid #e4e4e4;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.slw__head:focus-visible {
    outline: 2px solid #1565c0;
    outline-offset: -2px;
}

.slw__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #e8f0fe;
    flex-shrink: 0;
}

.slw__icon svg {
    width: 15px;
    height: 15px;
    stroke: #1565c0;
}

.slw__title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #444;
}

/* ── TOC nav body — collapsed by default (mobile) ─────────────── */
.slw--toc .slw__toc {
    display: none;            /* hidden until JS adds .toc-open  */
    padding: 10px 0 12px;
    max-height: 70vh;         /* prevent TOC from swamping viewport */
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* scrollbar styling for WebKit */
.slw--toc .slw__toc::-webkit-scrollbar { width: 4px; }
.slw--toc .slw__toc::-webkit-scrollbar-track { background: transparent; }
.slw--toc .slw__toc::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Open state — toggled by JS via .toc-open on the widget root */
.slw--toc.toc-open .slw__toc {
    display: block;
}

/* ── TOC list ─────────────────────────────────────────────────── */
.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-item {
    margin: 0;
    padding: 0;
}

/* ── TOC link ─────────────────────────────────────────────────── */
.toc-link {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 7px 16px 7px 12px;
    border-left: 3px solid transparent;  /* placeholder for active accent */
    font-size: 0.875rem;
    line-height: 1.4;
    color: #444;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    word-break: break-word;
}

.toc-link:hover,
.toc-link:focus-visible {
    background: #f0f7ff;
    color: #1565c0;
    border-left-color: #90b4e8;
    outline: none;
}

/* ── Counter number badge ────────────────────────────────────── */
.toc-num {
    flex: 0 0 18px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #bbb;
    text-align: right;
    line-height: 1.6;        /* align with first text line */
    transition: color 0.15s;
}

.toc-label {
    flex: 1 1 auto;
}

/* ── ACTIVE state — set by scrollspy JS ──────────────────────── */
.toc-link--active {
    background: #e8f0fe;
    color: #1565c0;
    font-weight: 600;
    border-left-color: #1565c0;
}

.toc-link--active .toc-num {
    color: #1565c0;
}

/* ── Chevron indicator in header (open/closed) ───────────────── */
.slw--toc .slw__head::after {
    content: '';
    display: block;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    transform: rotate(45deg);      /* ▼ chevron pointing down = closed */
    transition: transform 0.2s;
    flex-shrink: 0;
}

.slw--toc.toc-open .slw__head::after {
    transform: rotate(-135deg);    /* ▲ chevron pointing up = open */
}

/* ── Empty fallback ──────────────────────────────────────────── */
.slw__toc-empty {
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #aaa;
    margin: 0;
}

/* ── Desktop overrides ───────────────────────────────────────── */
@media (min-width: 900px) {
    /* On desktop the TOC is always visible — no toggle needed   */
    .slw--toc .slw__toc {
        display: block;
    }

    /* Hide the chevron on desktop since it's always open        */
    .slw--toc .slw__head::after {
        display: none;
    }

    /* Slightly larger text on wide screens                      */
    .toc-link {
        font-size: 0.9rem;
        padding: 8px 16px 8px 12px;
    }
}

/* ── Calculator sidebar widget (reuses .slw shell) ───────────── */
.slw--calc-nav .slw__calc-links {
    padding: 10px 0 12px;
}

.slw-calc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 0.88rem;
    color: #333;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.slw-calc-link:hover,
.slw-calc-link:focus-visible {
    background: #f0f7ff;
    color: #1565c0;
    outline: none;
}

.slw-calc-link__icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.slw-calc-link--all {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1565c0;
}

.slw-calc-link--all:hover {
    background: #f0f7ff;
}

/* ─── Calculator sidebar: static header (no toggle, always open) ─
   Used by .slw--calc-nav "More Calculators" widget              ── */
.slw__head--static {
    cursor: default;
    pointer-events: none;
}

.slw__head--static::after {
    display: none !important;
}

.slw--calc-nav .slw__calc-links {
    display: block; /* always visible, no JS toggle needed */
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR RIGHT — SRW WIDGETS
   Covers: shell, save-calc, save-article, share, legal-nav
   ═══════════════════════════════════════════════════════════════ */

/* ── Widget shell ─────────────────────────────────────────────── */
.srw {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* ── Widget header ────────────────────────────────────────────── */
.srw__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: #f8f8f8;
    border-bottom: 1px solid #e4e4e4;
}

/* Non-interactive header (no cursor/chevron) */
.srw__head--static {
    cursor: default;
    pointer-events: none;
}

.srw__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #e8f0fe;
    flex-shrink: 0;
}

.srw__icon svg {
    width: 15px;
    height: 15px;
    stroke: #1565c0;
}

.srw__title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #444;
}

/* ── Widget body ──────────────────────────────────────────────── */
.srw__body {
    padding: 14px 16px;
}

.srw__desc {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.55;
    margin: 0 0 12px;
}

.srw__guest-msg {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.55;
    margin: 0 0 8px;
}

.srw__guest-msg a {
    color: #1565c0;
    font-weight: 600;
    text-decoration: none;
}

.srw__guest-msg a:hover { text-decoration: underline; }

.srw__divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 10px 0;
}

.srw__link {
    display: block;
    margin-top: 10px;
    font-size: 0.82rem;
    color: #1565c0;
    text-decoration: none;
    font-weight: 600;
}

.srw__link:hover { text-decoration: underline; }

/* ── Save / action buttons ────────────────────────────────────── */
.srw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 8px;
    border: 2px solid #1565c0;
    background: #fff;
    color: #1565c0;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s;
    box-sizing: border-box;
    text-align: center;
}

.srw-btn:hover:not(:disabled) {
    background: #1565c0;
    color: #fff;
}

.srw-btn--saved {
    background: #1565c0;
    color: #fff;
}

.srw-btn--saved:hover:not(:disabled) {
    background: #0d47a1;
    border-color: #0d47a1;
}

.srw-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.srw-btn__icon { font-size: 1.05rem; line-height: 1; }

/* ── Status messages (save feedback) ─────────────────────────── */
.srw-status {
    font-size: 0.82rem;
    margin: 8px 0 0;
    min-height: 1.2em;
    text-align: center;
    line-height: 1.4;
}

.srw-status--ok  { color: #2e7d32; }
.srw-status--err { color: #c62828; }

/* ── Share buttons ────────────────────────────────────────────── */
.srw-share-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.srw-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.18s, filter 0.18s;
}

.srw-share:hover { opacity: 0.88; filter: brightness(1.08); }
.srw-share--fb   { background: #1877f2; color: #fff; }
.srw-share--tw   { background: #000;    color: #fff; }

/* ── Legal nav widget ─────────────────────────────────────────── */
.srw-legal-list {
    list-style: none;
    margin: 0;
    padding: 6px 0 8px;
}

.srw-legal-item {
    margin: 0;
    padding: 0;
}

/* Subtle divider between About/Contact and the legal pages */
.srw-legal-item:nth-child(2) {
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
    padding-bottom: 4px;
}

.srw-legal-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-left: 3px solid transparent;
    font-size: 0.875rem;
    line-height: 1.35;
    color: #333;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-left-color 0.15s;
    position: relative;
}

/* ── Hover state ── */
.srw-legal-link:hover,
.srw-legal-link:focus-visible {
    background: #f0f7ff;
    color: #1565c0;
    border-left-color: #90b4e8;
    outline: none;
}

/* ── Active / current page state ── */
.srw-legal-link--active {
    background: #e8f0fe;
    color: #1565c0;
    font-weight: 600;
    border-left-color: #1565c0;
    cursor: default;    /* already on this page */
}

/* Prevent hover re-triggering hover look on the active link */
.srw-legal-link--active:hover {
    background: #e8f0fe;
    border-left-color: #1565c0;
}

.srw-legal-link__icon {
    flex-shrink: 0;
    font-size: 1rem;
    width: 20px;
    text-align: center;
    line-height: 1;
}

.srw-legal-link__label {
    flex: 1 1 auto;
}

/* "You are here" badge */
.srw-legal-link__badge {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1565c0;
    background: #c7d9f8;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.6;
}

/* ── Mobile: sidebar order ────────────────────────────────────── */
@media (max-width: 599px) {
    .srw__body { padding: 12px 14px; }
    .srw-legal-link { padding: 9px 14px; font-size: 0.9rem; }
}