/* Shared page shell: the white "card" every tool page's content sits inside,
   plus the footer copyright bar. Tool-specific CSS may override these (e.g.
   SubnetIPv4 flattens the card into a full-width panel) since tool
   stylesheets load after this file. */

/* Every tool's content sits inside .main-content-placeholder (via
   layouts/tool.njk), but each tool then pads its own inner wrapper
   separately: cidrip/SubnetIPv4 use .content-placeholder below, the TCP
   tools use their own #tcprto_wrapper / .cwnd_page.

   --tool-padding-x/-bottom are the single shared source for that inset;
   every tool's own wrapper reads them (see tools/subnetipv4.css,
   tools/tcp-rto-calculator.css, tools/tcp-reno-tahoe-visualizer.css) instead
   of hardcoding its own value, so the gap to the screen edge stays
   identical across all four tools at every width — redefining these two
   tokens, including inside the media query, changes all four at once. Top
   padding is deliberately NOT part of this: .content-placeholder wants top
   padding as breathing room inside its visible card, while the TCP tools'
   wrappers have no visible card boundary and instead rely on
   .main-content-placeholder's margin for their top gap (padding-top: 0) —
   two different jobs that only look similar. */
:root {
    --tool-padding-x: 3rem;
    --tool-padding-bottom: 3rem;
}

@media (max-width: 768px) {
    :root {
        --tool-padding-x: 1rem;
        --tool-padding-bottom: 1.5rem;
    }
}

/* The page is a full-height column: nav, optional banner, <main>, footer.
   <main> absorbs all leftover vertical space, which (a) keeps the footer at
   the bottom of the viewport on short pages instead of floating mid-screen,
   and (b) gives tools that want to fill the window a real height to inherit,
   rather than guessing at the chrome's height with a hardcoded
   `100vh - <magic number>`.

   The mobile sidebar and info overlay are position:fixed, so they sit
   outside this flow and are unaffected. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > main {
    flex: 1 0 auto;
    /* Let descendants shrink below their content size instead of forcing
       the column taller (needed for the fill-height chain below). */
    min-width: 0;
}

/* Opt-in, set per page via the `bodyClass` front matter: makes <main> and
   the content wrapper pass their height straight through, so a tool can
   size itself against the real available space. Only tools that actually
   want to fill the viewport (currently the congestion-control visualizer)
   turn this on; every other page keeps normal content-height layout. */
.fill-height main,
.fill-height .main-content-placeholder {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fill-height .main-content-placeholder {
    flex: 1 0 auto;
    width: 100%;
}

.main-content-placeholder {
    max-width: 1280px;
    margin: 1rem auto;
}

.content-placeholder {
    background: var(--surface-card);
    border-radius: var(--card-radius);
    padding: 3rem var(--tool-padding-x) var(--tool-padding-bottom);
    box-shadow: var(--topnav-shadow);
    text-align: center;
    color: var(--text-muted);
}

.copyright-container {
    max-width: 1280px;
    margin: 0 auto;
    font-size: 0.7em;
    color: var(--text-subtle);
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center;
}

.copyright-item {
    padding: 0 1em;
}

.copyright-item a:link,
.copyright-item a:visited,
.copyright-link {
    color: var(--text-subtle);
    text-decoration: none;
}

.copyright-item a:hover,
.copyright-link:hover {
    color: var(--accent-title);
    text-decoration: underline;
}