/**
 * packing-guide.css
 *
 * Safari Packing Guide (/packing-guide). Reuses existing design-system
 * classes wherever a direct match exists (.c-about-story, .c-trust__grid/
 * __card, .c-about-credential, .c-final-cta, .c-blog-archive__layout +
 * .c-blog-sidebar for the sticky TOC, .c-button, .c-badge) — this file
 * only supplies the handful of things with no existing equivalent: the
 * dark/light section alternation, the 5-column checklist summary grid,
 * the interactive accordion checklist, and the destination tip cards.
 *
 * @package Pride_Of_Africa
 */

/* ── Section alternation — reuses the site's existing dark charcoal
   (#2E2E2E, already the Why-Choose-Us/footer color) and light gray
   (#DBDBDB, already .l-section--alt) rather than inventing new colors. */
.c-packing-section--dark { background: #2E2E2E; color: #ffffff; }
.c-packing-section--dark .c-section-header__title,
.c-packing-section--dark h2,
.c-packing-section--dark h3 { color: #ffffff; }
.c-packing-section--dark .c-section-header__desc,
.c-packing-section--dark p { color: rgba(255,255,255,.8); }
.c-packing-section--light { background: #DBDBDB; }

/* ── Breadcrumb (reuses the article breadcrumb's visual language) ── */
.c-packing-breadcrumb-wrap { padding-block: var(--space-3); }
.c-packing-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: #707070; }
.c-packing-breadcrumb a { color: #707070; text-decoration: none; }
.c-packing-breadcrumb a:hover { color: var(--color-primary); }
.c-packing-breadcrumb .bi { font-size: .625rem; }

/* ── Layout: sticky table of contents + content (same grid/sticky
   mechanics as .c-blog-archive__layout / .c-blog-sidebar). ────────── */
.c-packing-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 62em) { .c-packing-layout { grid-template-columns: 15.5rem 1fr; } }
.c-packing-toc { display: none; }
@media (min-width: 62em) {
    .c-packing-toc {
        display: block;
        position: sticky;
        top: 6.5rem;
        align-self: start;
        background: var(--color-surface);
        border: 1px solid var(--poa-color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
    }
}
.c-packing-toc__title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #707070; margin: 0 0 var(--space-3); }
.c-packing-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.c-packing-toc__list a { font-size: .875rem; color: var(--color-text); text-decoration: none; display: block; padding-left: .75rem; border-left: 2px solid transparent; transition: all var(--duration-fast); }
.c-packing-toc__list a:hover,
.c-packing-toc__list a.is-active { color: var(--color-primary); border-left-color: var(--color-primary); }

/* ── Intro (reuses .c-about-story exactly, no new rules needed) ──── */

/* ── Interactive accordion checklist (same visual language as the
   Review Hub's FAQ accordion — kept self-contained here). ───────── */
.c-packing-accordion { display: flex; flex-direction: column; gap: var(--space-3); }
.c-packing-accordion__item { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--poa-shadow-sm); overflow: hidden; }
.c-packing-accordion__question {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text);
}
.c-packing-accordion__question:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.c-packing-accordion__question-meta { display: flex; align-items: center; gap: var(--space-3); }
.c-packing-accordion__count { font-size: .8125rem; font-weight: 600; color: #707070; }
.c-packing-accordion__icon { flex-shrink: 0; color: var(--color-primary); transition: transform var(--duration-fast); }
.c-packing-accordion__item[data-open="true"] .c-packing-accordion__icon { transform: rotate(45deg); }
.c-packing-accordion__answer { padding: 0 var(--space-4); max-height: 0; overflow: hidden; transition: max-height var(--duration-normal) var(--easing-standard), padding var(--duration-normal); }
.c-packing-accordion__item[data-open="true"] .c-packing-accordion__answer { padding-bottom: var(--space-4); }
.c-packing-accordion__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.c-packing-checklist-item { display: flex; align-items: flex-start; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--poa-color-border); }
.c-packing-accordion__list li:first-child .c-packing-checklist-item { border-top: none; }
.c-packing-checklist-item input[type="checkbox"] { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: .1875rem; accent-color: var(--color-primary); cursor: pointer; }
.c-packing-checklist-item__label { flex: 1; cursor: pointer; }
.c-packing-checklist-item__name { display: block; font-size: .9375rem; font-weight: 600; color: var(--color-text); }
.c-packing-checklist-item__note { display: block; font-size: .8125rem; color: #707070; margin-top: .125rem; }
.c-packing-checklist-item.is-checked .c-packing-checklist-item__name { text-decoration: line-through; color: #9A9A9A; }

/* ── Destination Packing Tips cards ───────────────────────────────── */
.c-packing-dest__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 36em) { .c-packing-dest__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .c-packing-dest__grid { grid-template-columns: repeat(3, 1fr); } }
.c-packing-dest-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--poa-shadow-sm);
    transition: box-shadow var(--duration-normal) var(--easing-standard), transform var(--duration-normal) var(--easing-standard);
}
.c-packing-dest-card:hover { box-shadow: var(--poa-shadow-lg); transform: translateY(-.5rem); }
.c-packing-dest-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.c-packing-dest-card__title { font-size: 1.1875rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }
.c-packing-dest-card__flag { font-size: 1.5rem; line-height: 1; }
.c-packing-dest-card__tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.c-packing-dest-card__tips li { display: flex; gap: .5rem; font-size: .875rem; color: #5A5A5A; line-height: 1.5; }
.c-packing-dest-card__tips i { flex-shrink: 0; color: var(--color-primary); margin-top: .2rem; font-size: .75rem; }
.c-packing-dest-card__cta { display: inline-flex; align-items: center; gap: .375rem; font-size: .9375rem; font-weight: 600; color: var(--color-primary); text-decoration: none; margin-top: auto; transition: gap var(--duration-fast); }
.c-packing-dest-card__cta:hover { gap: .625rem; }

/* ── Flight & Luggage Rules — reuses .c-about-credential's shell; only
   the two-line weight readout below the title needs a rule. ────────── */
.c-packing-luggage__intro { max-width: 48rem; margin: 0 auto var(--space-6); text-align: center; font-size: 1.0625rem; line-height: 1.7; }
.c-packing-section--dark .c-packing-luggage__intro { color: rgba(255,255,255,.85); }
.c-packing-luggage-card__line { font-size: .875rem; font-weight: 600; }
.c-packing-luggage-card { padding: var(--space-3) var(--space-3); }
.c-packing-luggage-card__icon { font-size: 1.25rem; margin-bottom: .375rem; }
.c-packing-luggage-card h3 { font-size: .875rem; margin-bottom: .25rem; }

/* ── Download CTA ─────────────────────────────────────────────────── */
.c-packing-download { max-width: 40rem; margin-inline: auto; text-align: center; }
.c-packing-download__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
.c-packing-download__note { margin-top: var(--space-4); font-size: .8125rem; color: #707070; }
.c-packing-section--dark .c-packing-download__note { color: rgba(255,255,255,.65); }

@media (prefers-reduced-motion: reduce) {
    .c-packing-dest-card, .c-packing-dest-card__cta,
    .c-packing-accordion__icon, .c-packing-accordion__answer, .c-packing-toc__list a {
        transition: none !important;
    }
}