/*
 * The assets site stylesheet: the rules of this site. The site loads
 * tokens.css, common.css and sidebar.css before this one, and no other
 * stylesheet. common.css is the shared nav and footer of the Phalcon sites,
 * and sidebar.css their shared sidebar (public/phalcon/css/, the shared
 * stylesheets that this repository publishes); this file has the page around
 * them: the tones, the columns, the cards, and the site's own part of the
 * nav (the theme switcher).
 *
 * The colors and the fonts come from tokens.css (public/phalcon/css/). The
 * --nd- variables give each tone its tokens:
 * the light tone answers to the default, and the dark tone answers to
 * `html.dark` (the theme switcher sets it).
 *
 * No rule here reaches into the nav or the footer: each selector starts with
 * a class of this site, or is html or body (their properties that the nav and
 * the footer inherit, common.css sets again).
 */

:root {
    /* light tone */
    --nd-accent: var(--ph-light-accent);
    --nd-accent-contrast: var(--ph-light-accent-contrast);
    --nd-accent-hover: var(--ph-light-accent-hover);
    --nd-bg: var(--ph-light-bg);
    --nd-border: var(--ph-light-border);
    --nd-heading: var(--ph-light-heading);
    --nd-surface: var(--ph-light-surface);
    --nd-text: var(--ph-light-text);
}

html.dark {
    --nd-accent: var(--ph-dark-accent);
    --nd-accent-contrast: var(--ph-dark-accent-contrast);
    --nd-accent-hover: var(--ph-dark-accent-hover);
    --nd-bg: var(--ph-dark-bg);
    --nd-border: var(--ph-dark-border);
    --nd-heading: var(--ph-dark-heading);
    --nd-surface: var(--ph-dark-surface);
    --nd-text: var(--ph-dark-text);
}

/* ------------------------------------------------------------------ page */

html {
    -webkit-text-size-adjust: 100%;
}

/* The page fills the viewport, so the footer is at the bottom of a short page. */
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background-color: var(--nd-bg);
    color: var(--nd-text);
    display: flex;
    flex-direction: column;
    font-family: var(--ph-font-sans);
    margin: 0;
    min-height: 100vh;
    min-width: 320px;
}

/* The nav stays at the top of the viewport. */
.header-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ------------------------------------------------------------------- nav */

/*
 * The site's part of the shared nav (common.css). .nav-end holds the links of
 * common.css, the theme switcher and the burger, so that the switcher stays
 * next to the burger below 64rem.
 */
.nav-end {
    align-items: center;
    display: flex;
    gap: 1.5rem;
}

/* The theme switcher. The moon and the sun are white, on the dark nav. common.css resets the buttons of the nav, so this rule sets the cursor. */
.switcher button {
    border: none;
    border-radius: 100px;
    cursor: pointer;
    display: flex;
    height: 20px;
    width: 20px;
}

/* A ring for the keyboard focus only (not for a click), white as the icon. */
.switcher button:focus-visible {
    outline: 2px solid var(--ph-white);
    outline-offset: 2px;
}

/*
 * The icon is a mask on the white token: the moon in the light tone, the sun in
 * the dark tone. The script of the header sets the tone class; with no tone
 * class (no script), there is no content, so nothing shows.
 */
.switcher button::before {
    -webkit-mask: center / contain no-repeat;
    background-color: var(--ph-white);
    height: 20px;
    mask: center / contain no-repeat;
    width: 20px;
}

.switcher-light button::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'%3E%3C/path%3E%3C/svg%3E");
    content: "";
    height: 17px;
    margin-top: 1px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'%3E%3C/path%3E%3C/svg%3E");
    width: 17px;
}

.switcher-dark button::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z'%3E%3C/path%3E%3C/svg%3E");
    content: "";
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z'%3E%3C/path%3E%3C/svg%3E");
}

/* In forced colors, the browser paints the background in the color of the page behind it: the icon takes the text color. */
@media (forced-colors: active) {
    .switcher button::before {
        background-color: CanvasText;
        forced-color-adjust: none;
    }
}

/* --------------------------------------------------------------- columns */

.page,
.page *,
.page *::before,
.page *::after {
    box-sizing: border-box;
}

.page {
    flex: 1 0 auto;
    padding: 50px 0;
}

.page__inner {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* min-width: 0 lets a long word (a URL) break, so the column never gets wider than the screen. */
.page__main {
    flex: 1;
    min-width: 0;
}

.page__side {
    margin-left: 20px;
    width: 350px;
}

@media (min-width: 768px) {
    .page__inner {
        padding-left: 15px;
        padding-right: 15px;
        width: 750px;
    }
}

@media (min-width: 1024px) {
    .page__inner {
        width: 958px;
    }
}

@media (min-width: 1280px) {
    .page__inner {
        padding-left: 10px;
        padding-right: 10px;
        width: 1200px;
    }
}

@media (max-width: 1439px) {
    .page__side {
        width: 280px;
    }
}

/* Below 1024px the sidebar goes under the licenses. */
@media (max-width: 1023px) {
    .page__inner {
        flex-wrap: wrap;
    }

    /* A full row each: with min-width: 0, the basis of flex: 1 alone would let the licenses shrink to nothing. */
    .page__main,
    .page__side {
        flex: 0 0 100%;
        width: 100%;
    }

    .page__side {
        margin-left: 0;
    }
}

/* ------------------------------------------------------------------ card */

/* A card on the surface of the tone, as a post card of the blog. */
.card {
    background: var(--nd-surface);
    border: 1px solid var(--nd-border);
    border-radius: 5px;
    margin-bottom: 18px;
    overflow-wrap: anywhere;
    padding: 22px;
}

.card h1 {
    color: var(--nd-heading);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 16px;
}

.card p {
    font-size: 1rem;
    line-height: 1.4375rem;
    margin: 0 0 10px;
}

.card a {
    border-bottom: 1px solid var(--nd-accent);
    color: var(--nd-accent);
    text-decoration: none;
    transition: all 0.125s;
}

.card a:hover {
    border-bottom-color: transparent;
    color: var(--nd-accent-hover);
}

/* The button of the 404 page: the accent button of the design. */
.card .button {
    background-color: var(--nd-accent);
    border: 0;
    border-radius: 4px;
    color: var(--nd-accent-contrast);
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 9px 16px;
}

.card .button:hover {
    background-color: var(--nd-accent-hover);
    color: var(--nd-accent-contrast);
}