/* PythonMastery — Terms and Privacy layout.
 *
 * Complements the base .privacy-* styles that live in an inline <style> in
 * privacy.html and terms.html; this file only changes how those sections are
 * ARRANGED. Every selector is prefixed with `body` on purpose: that inline block
 * sits AFTER this link in the head, so an equal-specificity selector here would
 * lose the cascade.
 *
 * The problem was density, not length. Terms is about 515 words spread over
 * 2936px — 3.3 screens on a 900px viewport — in an 800px column with 1.8
 * line-height and 2.5rem between sections. Nine short clauses read as a long
 * document purely because of the spacing.
 *
 * So: columns on screens wide enough to carry them, with the summary and the
 * closing note spanning the full width, and the vertical rhythm tightened.
 * Nothing is hidden or collapsed — legal text should stay readable at a glance,
 * which is why an accordion was rejected however neatly it would have fit.
 */

@media (min-width: 900px) {
    body .privacy-container {
        max-width: 1120px;
    }

    body .privacy-glass-card {
        padding: 2.5rem 2.75rem;
    }

    /* Multi-column rather than a grid: a grid sizes every row to its tallest
       clause, and these clauses differ a lot in length, so it left ragged gaps
       under the short ones. Columns let the text flow and balance instead.
       break-inside keeps a clause whole — a numbered term split across a column
       boundary would be worse than any gap. */
    body .privacy-clauses {
        columns: 2;
        column-gap: 3rem;
    }

    body .privacy-clauses .privacy-section {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }

    /* One exception. Keeping a clause whole is right while clauses are short and
       similar, but the third-party list is now several times taller than any
       other section — it alone decided the height of every column, leaving the
       last column nearly empty and the page two screens long. A section marked
       long may flow across the boundary; break-after on its heading is what
       stops the heading itself from being stranded at the foot of a column. */
    body .privacy-clauses .privacy-section.is-long {
        break-inside: auto;
        -webkit-column-break-inside: auto;
        page-break-inside: auto;
    }

    body .privacy-clauses .privacy-section.is-long h2 {
        break-after: avoid;
        page-break-after: avoid;
    }

    body .privacy-clauses .privacy-section.is-long li {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body .privacy-header {
        margin-bottom: 1.75rem;
    }

    body .privacy-section {
        margin-bottom: 1.75rem;
    }

    body .privacy-section h2 {
        font-size: 1.15rem;
        margin-bottom: 0.6rem;
    }

    body .privacy-section p {
        line-height: 1.65;
        margin-bottom: 0.75rem;
    }

    body .privacy-section ul {
        margin: 0 0 0.75rem;
        padding-left: 1.15rem;
    }

    body .privacy-section li {
        line-height: 1.6;
        margin-bottom: 0.35rem;
    }

    body .highlight-quote {
        margin: 1.25rem 0 1.75rem;
        padding: 1.1rem 1.35rem;
    }

    body .privacy-glass-card > footer {
        margin-top: 1.5rem !important;
    }
}

/* Wider still: three columns, which brings Terms onto a single screen on a
   1080p display without shrinking the type. */
@media (min-width: 1400px) {
    body .privacy-container {
        max-width: 1360px;
    }

    body .privacy-clauses {
        columns: 3;
    }
}

/* ── Header navigation ───────────────────────────────────────────────────────
   These pages used to end with a lone "Back to IDE" button, which assumed the
   reader had arrived from the IDE — but the footer link that reaches Terms and
   Privacy now appears on every page, including all 179 lessons. They get the
   same three-item nav as the rest of the site instead, so a reader can go back
   to wherever they actually were.

   No item is marked current: Terms and Privacy are not one of the three
   sections, so nothing here is "where you are".

   styles.css scopes its copy of these rules to .grid-header, which does not
   exist on these pages, so the vocabulary is restated here against the same
   tokens. */
.privacy-nav .nav {
    display: flex;
    gap: 26px;
    align-items: center;
}

.privacy-nav .nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.91rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s;
}

.privacy-nav .nav a:hover {
    color: var(--text-primary);
}

/* Phones: logo and theme buttons on the first row, the menu on its own full-
   width row below. On one row the menu ran ~110px past the right edge of every
   phone up to 412px, and "Playground" and "Notebook" could not be reached. The
   type size then comes from site-chrome.css's clamp(), like every other page. */
@media (max-width: 560px) {
    body .privacy-nav {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    body .privacy-nav > div {
        display: contents !important;   /* beats the inline display:flex */
    }

    /* site-chrome.css's phone values, restated: `.privacy-nav .nav a` above
       outranks its `.nav a`, so without this the menu keeps desktop sizes. */
    body .privacy-nav .nav {
        flex-basis: 100%;
        justify-content: space-between;
        gap: clamp(6px, 2.4vw, 18px);
    }

    body .privacy-nav .nav a {
        font-size: clamp(0.70rem, 3.0vw, 0.88rem);
    }
}

/* The feedback button is fixed at the bottom-right: 42px wide, 31px in from the
   edge, so it spans the last 73px of the viewport. These two pages used to end
   their footer with an inline feedback trigger, which is what sat under it --
   harmless, since it opened the same panel. With that duplicate removed the
   Terms/Privacy link took its place and became genuinely unclickable:
   elementFromPoint at the link's centre returned the button, not the link.
   Reserve the corner so the link clears it. Below 768px the footer stacks and
   the button sits clear of it already, so leave the narrow layout alone. */
@media (min-width: 768px) {
    .site-footer .footer-right {
        /* 48px cleared the button by 2px, which read as cramped -- the link and
           the button looked like one jammed cluster in the corner. 72px leaves
           about 26px of air between them. */
        margin-right: 72px;
    }
}

/* ─── Touch targets on the legal pages ─────────────────────────────────────
   `body` prefix for the same cascade reason as everything else here: the inline
   <style> in privacy.html / terms.html is parsed after this file. */
@media (hover: none), (max-width: 680px) {
    body .privacy-container .nav a,
    body .privacy-glass-card .nav a { display: inline-block; padding: 7px 0; }
}

/* The policy used to print the support address; it names the form instead now.
   Inside a paragraph it has to read as a link, so the button styling goes. */
.legal-contact-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent-primary, #38bdf8);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    /* Hover is not defined here: feedback.css carries the one hover language
       every door into the form shares. Two definitions is how they drifted. */
}

/* Links in the policy text. There was no rule at all, so they fell back to the
   browser's own #0000EE, which is 1.5:1 on the dark theme's background. The
   site accent is readable in every theme; buttons and styled links keep theirs. */
.privacy-container a:not([class]) {
    color: var(--accent-primary, #38bdf8);
    text-decoration: underline;
    text-underline-offset: 2px;
}