/* ============================================================
   JP News (جهينة نيوز) — finaldesign «الشبكة» — footer.css
   Footer «colophon stack», transplanted from design1a 2026-09-21
   (client: design4a approved; its footer replaced by design1a's).
   One centred axis: brand block · «الأقسام» as a 5×2 grid of equal
   hairline cells · «خدمات» as a 4×2 cell grid · a centred legal
   line. Height comes from FILLED cells, and every column count
   divides its item count (10 → 5 → 2, 8 → 4 → 2), so no cell row is
   ever ragged and nothing sits beside a taller neighbour.

   Two things the source did not have:
     1. the ground is DARK IN BOTH PALETTES (--color-footer-*):
        dark grey on the light page, deeper than the page ground on
        the dark one, so the document visibly ends. design1a was a
        light-only design and simply reused --color-primary, which
        in this folder INVERTS in dark — hence the dedicated tokens.
     2. each «الأقسام» cell is capped by its 4px category bar —
        design4a's wayfinding mark, kept through the transplant.
        theme.css re-maps the ten category colours inside
        .site-footer to their light tints, because the ground here
        is dark in both palettes.
   ============================================================ */
.site-footer {
    /* reserved up front for the fixed breaking ribbon — never added at the 3s mark (zero CLS) */
    padding-block-end: var(--ribbon-height);
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    margin-block-start: var(--space-lg);
    text-align: center;
}

.site-footer :focus-visible {
    outline: 2px solid var(--color-footer-text);
    outline-offset: 2px;
}

.footer-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
}

/* 1. Brand block — wordmark, identity line, the five channels, centred.
      The ground is dark in both palettes, so the white-on-dark wordmark
      is the only one needed — no theme-when-* pair here. */
.footer-brand-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

/* The brand lockup at the top of this block is the shared component in
   header.css (.brand-lockup-footer) — mark 171×37, wordmark beneath. */

.footer-tagline {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--color-footer-muted);
    max-inline-size: 64ch;
}

.footer-social {
    display: flex;
    gap: var(--space-sm);
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--color-footer-border);
    border-radius: var(--radius-btn);
    color: var(--color-footer-muted);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.footer-social-link:hover {
    color: var(--color-footer-text);
    border-color: var(--color-footer-text);
}

.footer-social-link .icon {
    inline-size: 18px;
    block-size: 18px;
}

/* 2 + 3. Cell grids under centred titles */
.footer-block {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.footer-block-title {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--fs-md);
    line-height: 1.2;
    color: var(--color-footer-text);
    padding-block-end: var(--space-xs);
    border-block-end: 2px solid var(--color-footer-mark);
}

.footer-grid {
    display: grid;
    inline-size: 100%;
    gap: 1px;                                   /* the hairline grid: 1px gaps over the border colour */
    background: var(--color-footer-border);
    border: 1px solid var(--color-footer-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.footer-sections-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.footer-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.footer-grid li {
    display: flex;
    min-inline-size: 0;
}

.footer-cell {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-block-size: 56px;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-footer-bg);
    color: var(--color-footer-muted);
    font-size: var(--fs-sm);
    line-height: 1.3;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

/* The category bar — design4a's mark, carried into the cell */
.footer-sections-grid .footer-cell {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--fs-sm);
    border-block-start: 4px solid var(--cat, var(--color-footer-mark));
    border-radius: var(--radius-bar, 0);
}

.footer-cell:hover {
    color: var(--color-footer-text);
    background: var(--color-footer-deep);
}

/* 4. Legal line — one centred line, wrapping to two or three when narrow */
.site-footer-legal {
    border-block-start: 1px solid var(--color-footer-border);
    padding-block: var(--space-md);
    font-size: var(--fs-xs);
    color: var(--color-footer-muted);
}

.site-footer-legal-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs) var(--space-lg);
    flex-wrap: wrap;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-legal-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: var(--space-sm);
    color: var(--color-footer-muted);
}

.footer-legal-link:hover {
    color: var(--color-footer-text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-credit a {
    color: var(--color-footer-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
    color: var(--color-footer-link);
}

/* Column counts always divide the item counts: 10 → 5 → 2, 8 → 4 → 2 */
@media (max-width: 991px) {
    .footer-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .footer-sections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   BREAKING-NEWS RIBBON (client spec 2026-09-03) — fixed to the
   bottom, one story, slides up 3s after render (transform 0.7s
   ease), dismissible, never persists. Space is reserved up front
   (--ribbon-height on the footer + scroll-padding) so nothing
   shifts at the 3s mark and nothing focusable hides behind it.
   Sits BELOW the modal layer: the open drawer and its backdrop
   cover it.
   ============================================================ */
.breaking-ribbon {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: calc(var(--z-modal) - 2);
    block-size: var(--ribbon-height);
    background-color: var(--color-accent-fill);
    color: var(--color-text-inverse);
    border-block-start: 1px solid var(--color-accent);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.7s ease, visibility 0s linear 0.7s;
}

.breaking-ribbon.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.7s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .breaking-ribbon,
    .breaking-ribbon.is-visible {
        transition: none;   /* appears in place, still after the 3s delay */
    }
}

.breaking-ribbon-inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    block-size: 100%;
}

.breaking-ribbon-label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-block-size: 28px;
    padding-inline: var(--space-sm);
    font-family: var(--font-primary);
    font-weight: 800;
    white-space: nowrap;
}

.breaking-ribbon-link {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: var(--color-text-inverse);
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.4;
}

.breaking-ribbon-link:hover,
.breaking-ribbon-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.breaking-ribbon-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    margin-inline-end: calc(-1 * var(--space-sm));
    color: var(--color-text-inverse);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.breaking-ribbon-icon {
    inline-size: 20px;
    block-size: 20px;
    fill: currentColor;
}

.breaking-ribbon :focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: -4px;
}

/* الشبكة dress: the page's pill kicker carries the word, headline in Almarai */
.breaking-ribbon-label {
    background: var(--color-pill-bg);
    color: var(--color-pill-text);
    font-size: var(--fs-meta);
    border-radius: var(--radius-chip);
}

.breaking-ribbon-link {
    font-size: var(--fs-list);
}

.breaking-ribbon-close {
    border-radius: var(--radius-btn);
    transition: background-color var(--transition-fast);
}

.breaking-ribbon-close:hover {
    background-color: var(--color-accent-fill-hover);
}

@media (max-width: 575px) {
    .breaking-ribbon-inner {
        gap: var(--space-sm);
    }

    .breaking-ribbon-link {
        -webkit-line-clamp: 2;
    }
}