/*
 * FAD-18: web Community Feed shelves. Loaded after feed-styles.css, which
 * still supplies the logo, buttons and footer.
 *
 * App tokens, adjusted for WCAG 2.1 AA (PRD, Accessibility):
 *   navy   #08386E  page background (solid; the old gradient's light end lowered contrast)
 *   cream  #f7d89d  secondary text on navy
 *   orange #b54700  selected chips, buttons, Pick badge, always with white text (5.43:1).
 *                   The app's #d05204 fails as a fill behind white text (4.29:1).
 */
:root {
    --fa-navy: #08386E;
    --fa-navy-deep: #062b55;
    --fa-cream: #f7d89d;
    --fa-orange: #b54700;
    --fa-white: #ffffff;
    --fa-card-radius: 16px;
    --fa-cover-radius: 12px;
    --fa-focus: #ffffff;
}

body.shelves-page {
    background: var(--fa-navy);
    color: var(--fa-white);
    padding: 24px 16px 40px;
}

.shelves-page .logo-container { margin-bottom: 24px; }
.shelves-page .logo { max-width: 220px; }

/* Focus is always visible, on every link, chip and button. */
.shelves-page a:focus-visible,
.shelves-page button:focus-visible {
    outline: 3px solid var(--fa-focus);
    outline-offset: 3px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    padding: 12px 16px;
    background: var(--fa-white);
    color: var(--fa-navy);
    font-weight: 700;
    border-radius: 8px;
    z-index: 10;
}
.skip-link:focus { top: 16px; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.shelves-main {
    max-width: 1200px;
    margin: 0 auto 48px;
}

.shelves-header { text-align: center; margin-bottom: 24px; }
.shelves-header h1 { font-size: 2.25rem; margin: 0 0 8px; }
.shelves-subtitle { color: var(--fa-cream); font-size: 1.125rem; margin: 0 0 20px; }

/* ---- Age chips ---------------------------------------------------------- */
.age-chips ul {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.age-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 2px solid var(--fa-cream);
    border-radius: 999px;
    color: var(--fa-cream);
    text-decoration: none;
    font-weight: 600;
}
.age-chip:hover { background: rgba(255, 255, 255, 0.08); }
.age-chip.is-current {
    background: var(--fa-orange);
    border-color: var(--fa-orange);
    color: var(--fa-white);
    font-weight: 700;
}
/* FAD-23: the selected chip carries a check mark, so it doesn't rely on colour
   alone. aria-current="page" already tells screen readers; the alt text "" keeps
   the mark from being read twice where the browser supports it. */
.age-chip.is-current::before {
    content: "\2713";
    content: "\2713" / "";
    margin-right: 6px;
}

/* ---- Story of the Week -------------------------------------------------- */
.sotw {
    display: flex;
    gap: 24px;
    align-items: center;
    background: var(--fa-navy-deep);
    border-radius: var(--fa-card-radius);
    padding: 20px;
    margin-bottom: 36px;
}
.sotw-cover {
    flex: 0 0 auto;
    width: min(40vw, 260px);
    aspect-ratio: 1 / 1;
    border-radius: var(--fa-cover-radius);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}
.sotw-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sotw-body { min-width: 0; }
.sotw-label {
    margin: 0 0 6px;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fa-cream);
}
.sotw-title { font-size: 1.75rem; font-weight: 700; margin: 0 0 6px; overflow-wrap: anywhere; }
.sotw-author { color: var(--fa-cream); margin: 0 0 18px; }
.sotw-button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--fa-orange);
    color: var(--fa-white);
    font-weight: 700;
    text-decoration: none;
}
.sotw-button:hover { filter: brightness(1.1); }

/* ---- Shelf rows --------------------------------------------------------- */
.shelf { margin-bottom: 32px; }
.shelf-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.shelf-head h2 { font-size: 1.375rem; margin: 0; }
.see-all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--fa-cream);
    font-weight: 600;
}

.shelf-scroller { position: relative; display: flex; align-items: center; gap: 8px; }
.shelf-row {
    list-style: none;
    margin: 0;
    padding: 4px 4px 12px;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    flex: 1 1 auto;
    min-width: 0;
}
.shelf-nav {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--fa-cream);
    background: var(--fa-navy-deep);
    color: var(--fa-white);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}
.shelf-nav[hidden] { display: none; }
.shelf-nav:disabled { opacity: 0.4; cursor: default; }

/* ---- Tile --------------------------------------------------------------- */
.tile { flex: 0 0 auto; width: 160px; scroll-snap-align: start; }
.tile a {
    position: relative;   /* keeps the visually-hidden label inside the row's scroll box */
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--fa-white);
    text-decoration: none;
    border-radius: var(--fa-cover-radius);
}
.tile-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--fa-cover-radius);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}
.tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--fa-orange);
    color: var(--fa-white);
    font-size: 0.8125rem;
    font-weight: 700;
}
.tile-title {
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.tile-author { color: var(--fa-cream); font-size: 0.875rem; overflow-wrap: anywhere; }
.tile a:hover .tile-title { text-decoration: underline; }

/* ---- Empty and error ---------------------------------------------------- */
.feed-state {
    text-align: center;
    background: var(--fa-navy-deep);
    border-radius: var(--fa-card-radius);
    padding: 32px 20px;
}
.feed-state h2 { margin: 0 0 8px; }
.feed-state p { color: var(--fa-cream); margin: 8px 0; }
.state-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--fa-white);
    font-weight: 700;
}

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 600px) {
    .shelves-header h1 { font-size: 1.75rem; }
    .sotw { flex-direction: column; align-items: flex-start; }
    .sotw-cover { width: 100%; }
    .tile { width: 140px; }
    .shelf-nav { display: none !important; }   /* touch scrolls the row directly */
}

/* No motion the reader hasn't asked for. Also stops feed-styles.css's entrance animations. */
@media (prefers-reduced-motion: reduce) {
    .shelves-page *,
    .shelves-page *::before,
    .shelves-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Shelf page, /community/<shelf_id> (FAD-19) -------------------------- */
.back-link { margin: 0 0 8px; }
.back-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--fa-cream);
    font-weight: 600;
}
.shelf-page-header { margin-bottom: 20px; }
.shelf-page-header h1 { font-size: 2rem; margin: 0 0 4px; text-align: left; }
.shelf-count { color: var(--fa-cream); margin: 0; }
.shelves-page .shelf-page-header + .age-chips ul { justify-content: flex-start; }

.shelf-grid {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* phones: 2 */
    gap: 20px 14px;
}
.shelf-grid .tile { width: auto; }
@media (min-width: 600px)  { .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .shelf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .shelf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.pager ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.pager-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 2px solid var(--fa-cream);
    border-radius: 999px;
    color: var(--fa-cream);
    text-decoration: none;
    font-weight: 600;
}
.pager-link.is-current {
    background: var(--fa-orange);
    border-color: var(--fa-orange);
    color: var(--fa-white);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pager-gap { color: var(--fa-cream); padding: 0 4px; }

/* ---- FAD-22: "Get the app to listen" banner ------------------------------
 * In the page flow above the age chips, never fixed or overlaid, so nothing
 * is covered at 200% zoom or at 320px wide; the row wraps instead.
 * Contrast: navy #08386E on white 11.6:1; white on orange #b54700 5.43:1;
 * close-button border navy on white (non-text) 11.6:1. Targets are 44px. */
.app-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    max-width: 720px;
    margin: 0 auto 20px;
    padding: 14px 16px;
    background: var(--fa-white);
    color: var(--fa-navy);
    border-radius: var(--fa-card-radius);
}
.app-banner[hidden] { display: none; }
.app-banner-text { flex: 1 1 200px; min-width: 0; }
.app-banner-title { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.app-banner-sub { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.4; }
.app-banner-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    background: var(--fa-orange);
    color: var(--fa-white);
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
}
.app-banner-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--fa-navy);
    border-radius: 50%;
    background: transparent;
    color: var(--fa-navy);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
/* The page's focus ring is white, which would vanish on the white banner. */
.shelves-page .app-banner a:focus-visible,
.shelves-page .app-banner button:focus-visible {
    outline-color: var(--fa-navy);
}

/* ---- FAD-23: footer on feed and shelf pages ------------------------------
 * The footer is a white card, so the page's white focus ring (1.04:1 against it)
 * is swapped for navy (11.6:1). Links in the mission text are underlined: navy
 * against the #444 body text is only 1.2:1, so colour alone can't mark them.
 * The heading is an h2 now (it was an h3 straight after the page's h1). */
.shelves-page .footer-section a:focus-visible {
    outline-color: var(--fa-navy);
}
.shelves-page .mission-text h2 {
    color: var(--fa-navy);
    font-size: 24px;
    margin: 0 0 15px 0;
    font-weight: 700;
}
.shelves-page .mission-text .inline-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.shelves-page .footer-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
}
.shelves-page .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: underline;
}
.shelves-page .footer-links { flex-wrap: wrap; }