/* ==========================================================================
   Page sheet — the standalone legal pages

   Views/Home/TermsAndConditions.cshtml
   Views/Home/PrivacyPolicy.cshtml
   Views/Home/DeleteAccount.cshtml

   These three are `Layout = null` on purpose. Both app stores link straight at
   them and the app opens them in a web view, so they have to render correctly
   with no portal session, no Angular and no layout. They therefore carry their
   own <head> — and this sheet is the only page-level CSS they need.

   Load order: foodchaser-tokens.css → foodchaser.css → common.css → this.
   No literal colour, radius, size or duration — only --fc-* tokens.

   This is a long-form reading surface, so it is the one place in the portal
   that sets a measure and a generous line height rather than card density.

   Owner: ViviScape LLC · Spec: FoodChaserBrandandMarketing/STYLE-GUIDE.md
   ========================================================================== */


/* ==========================================================================
   1  Page frame
   ========================================================================== */

.fc-legal {
    padding: var(--fc-space-8) 0 var(--fc-space-9);
}

/* A measure, not a container: ~70 characters at 17px is the readable width for
   continuous prose. `.fc-wrap-narrow` from foodchaser.css caps it at 760px. */
.fc-legal-body {
    font-size: 16.5px;
    line-height: var(--fc-lh-loose);
    color: var(--fc-muted);
}

.fc-legal-body > h1 {
    font-family: var(--fc-font-display);
    font-size: var(--fc-text-display);
    font-weight: 700;
    line-height: var(--fc-lh-snug);
    letter-spacing: -0.8px;
    color: var(--fc-on);
    margin: 0 0 var(--fc-space-3);
}

.fc-legal-body > h2 {
    font-family: var(--fc-font-display);
    font-size: var(--fc-text-heading);
    font-weight: 600;
    line-height: var(--fc-lh-snug);
    letter-spacing: -0.3px;
    color: var(--fc-on);
    margin: var(--fc-space-8) 0 var(--fc-space-3);
    padding-top: var(--fc-space-5);
    border-top: var(--fc-border) solid var(--fc-outline);
}

/* The first section heading follows the lede, not another section, so it does
   not need the rule above it. */
.fc-legal-body > h2:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: var(--fc-space-7);
}

.fc-legal-body > h3 {
    font-family: var(--fc-font-display);
    font-size: var(--fc-text-body);
    font-weight: 600;
    color: var(--fc-on);
    margin: var(--fc-space-6) 0 var(--fc-space-2);
}

.fc-legal-body p {
    margin: 0 0 var(--fc-space-5);
}

.fc-legal-body strong,
.fc-legal-body b {
    color: var(--fc-on);
    font-weight: 600;
}

.fc-legal-body a {
    color: var(--fc-pink-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fc-legal-body a:hover,
.fc-legal-body a:focus {
    color: var(--fc-pink-soft);
}

.fc-legal-lede {
    font-size: 18px;
    line-height: var(--fc-lh-normal);
    color: var(--fc-muted);
}

.fc-legal-stamp {
    font-size: var(--fc-text-caption);
    color: var(--fc-subtle);
    margin: 0 0 var(--fc-space-6);
}


/* ==========================================================================
   2  Lists

   A numbered legal list is a list of clauses, not of sentences: each item gets
   the same bottom margin a paragraph gets, and the marker sits in the gutter
   so the clause text stays on one measure.
   ========================================================================== */

.fc-legal-body ul,
.fc-legal-body ol {
    margin: 0 0 var(--fc-space-5);
    padding-left: var(--fc-space-6);
}

.fc-legal-body li {
    margin-bottom: var(--fc-space-4);
    line-height: var(--fc-lh-loose);
}

.fc-legal-body li:last-child {
    margin-bottom: 0;
}

.fc-legal-body li::marker {
    color: var(--fc-subtle);
}

/* Clause lists number as (a), (b), … under a numbered section heading, which
   is how the sections cross-reference each other. */
.fc-legal-clauses {
    list-style-type: lower-alpha;
}


/* ==========================================================================
   3  Callouts

   Two only. A neutral one that carries the plain-language summary, and a
   destructive one that states consequences before an irreversible action.
   Both are surface-plus-outline with a coloured edge, never a filled slab.
   ========================================================================== */

.fc-legal-note {
    margin: var(--fc-space-6) 0;
    padding: var(--fc-space-5);
    background-color: var(--fc-raised);
    border: var(--fc-border) solid var(--fc-outline);
    border-left: 3px solid var(--fc-yellow);
    border-radius: var(--fc-radius-card);
    color: var(--fc-muted);
}

.fc-legal-note > :last-child {
    margin-bottom: 0;
}

.fc-legal-note-danger {
    border-left-color: var(--fc-danger);
}

/* State the consequence, not the tone. The heading of a destructive callout
   carries an icon as well as the colour, so the warning does not depend on
   colour alone (STYLE-GUIDE §2.6). */
.fc-legal-note-title {
    display: flex;
    align-items: baseline;
    gap: var(--fc-space-2);
    font-family: var(--fc-font-display);
    font-size: var(--fc-text-body);
    font-weight: 700;
    color: var(--fc-on);
    margin: 0 0 var(--fc-space-3);
}

.fc-legal-note-danger .fc-legal-note-title {
    color: var(--fc-danger);
}


/* ==========================================================================
   4  Tables

   The privacy policy's what-we-collect table. `.fc-table-wrap` and `.fc-table`
   from foodchaser.css do the work; this only relaxes the row rhythm, because
   the cells hold sentences rather than values.
   ========================================================================== */

.fc-legal-body .fc-table th,
.fc-legal-body .fc-table td {
    padding: var(--fc-space-4);
    vertical-align: top;
    line-height: var(--fc-lh-normal);
}

.fc-legal-body .fc-table td:first-child {
    color: var(--fc-on);
    font-weight: 600;
    width: 32%;
    min-width: 180px;
}


/* ==========================================================================
   5  Steps and footer
   ========================================================================== */

/* A numbered route through a flow, on the delete-account page. */
.fc-legal-step {
    display: grid;
    gap: var(--fc-space-3);
    margin: var(--fc-space-5) 0 var(--fc-space-7);
    padding: var(--fc-space-5);
    background-color: var(--fc-raised);
    border: var(--fc-border) solid var(--fc-outline);
    border-radius: var(--fc-radius-card);
}

.fc-legal-step > :last-child {
    margin-bottom: 0;
}

.fc-legal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fc-space-2) var(--fc-space-4);
    margin-top: var(--fc-space-8);
    padding-top: var(--fc-space-5);
    border-top: var(--fc-border) solid var(--fc-outline);
    font-size: var(--fc-text-caption);
    color: var(--fc-subtle);
}

.fc-legal-foot a {
    color: var(--fc-subtle);
    text-decoration: none;
}

.fc-legal-foot a:hover,
.fc-legal-foot a:focus {
    color: var(--fc-pink-soft);
    text-decoration: underline;
}

.fc-legal-copy {
    margin-left: auto;
}

@media (max-width: 560px) {
    .fc-legal-copy {
        margin-left: 0;
    }
}