/* ==========================================================================
   CostGuard – Public Cookie Policy
   ──────────────────────────────────────────────────────────────────────────
   Rules only the public cookie policy uses. The page is a document: its hero,
   lead, contents rail, sections, contact block and related row all come from
   the "Document" block of /css/costguard-public.css, which loads first.

   No colour literals below: every value resolves through --cg-*.

   What is the page's own is the list of cookie categories: four blocks inside
   one section of the document, each pairing a category with its state label,
   then its description, then its consent line.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Categories — a stack of quiet blocks. The top margin collapses with the
   heading's own, so the stack sits one step further from it than a paragraph
   -------------------------------------------------------------------------- */

.cg-cookies .cg-cookies-categories {
    display: grid;
    gap: var(--cg-pub-space-2);
    margin-top: var(--cg-pub-space-3);
}

.cg-cookies .cg-cookies-category {
    padding: var(--cg-pub-space-3);
    border: 1px solid var(--cg-border);
    border-radius: var(--cg-pub-radius);
    background: var(--cg-bg-elevated);
}

/* The category and its state share a baseline; on a narrow screen the state
   wraps under the title rather than squeezing it. */
.cg-cookies .cg-cookies-category-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem var(--cg-pub-space-2);
    margin-bottom: var(--cg-pub-space-1);
}

.cg-cookies .cg-cookies-category-head .cg-pub-title {
    margin: 0;
}

.cg-cookies .cg-cookies-category-state {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cg-pub-muted);
}

html[lang="fa"] .cg-cookies .cg-cookies-category-state,
html[lang="ar"] .cg-cookies .cg-cookies-category-state,
html[lang="zh"] .cg-cookies .cg-cookies-category-state {
    letter-spacing: 0;
}

/* The consent line closes the block under a hairline, the way a ledger row
   closes on its total. */
.cg-cookies .cg-cookies-category .cg-cookies-category-consent {
    padding-top: var(--cg-pub-space-1);
    border-top: 1px solid var(--cg-border);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}