/* Checklist templates (resources/views/templates/).
 *
 * The tree, the checkboxes and the call to action come from home.css: this file
 * adds what a long checklist needs (a third level, tasks that have subtasks, a
 * layout that fits small screens). Loaded after home.css, on these pages only. */

/* simple1.0.css gives the page sheet a fixed width of 1200px: let it shrink here. */
@media (max-width: 1232px) {
    #main .wrapper,
    .page-content-wrapper,
    .page-content {
        width: auto;
    }

    .page-content {
        margin-left: 16px;
        margin-right: 16px;
    }
}

/* Breadcrumb and languages ------------------------------------------------------ */

.template-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 32px;
    margin-bottom: 22px;
    font-size: 14px;
    color: var(--home-muted);
}

.template-crumbs ol,
.template-languages ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.template-languages ul {
    gap: 4px 14px;
}

.template-languages li {
    margin: 0;
}

.template-languages [aria-current] {
    font-weight: 600;
    color: var(--home-ink);
}

.template-crumbs li {
    margin: 0;
}

.template-crumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--home-guide);
}

/* Intro ------------------------------------------------------------------------ */

.template-intro {
    padding-bottom: 36px;
    border-bottom: 1px solid var(--home-guide);
}

.home .template-title {
    margin-bottom: 14px;
    font-family: var(--site-font-display);
    font-stretch: condensed;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: .005em;
}

.home .template-intro p {
    max-width: 68ch;
}

.home .template-intro p + p {
    margin-top: 12px;
}

.home .template-intro .template-count,
.home .template-count {
    font-size: 14px;
    color: var(--home-muted);
}

/* Layout: the checklist, then a column for the call to action and the tips. */
.template-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 64px;
    align-items: start;
    padding-top: 36px;
}

/* The tree --------------------------------------------------------------------- */

/* Tasks can wrap over several lines: the box and the chevron stay on the first. */
.template .home-row {
    align-items: flex-start;
}

.template .home-task {
    flex: 1 1 auto;
    min-width: 0;
}

/* Beside a task with subtasks, a task without keeps the room of the chevron: the boxes line up. */
.template-fold-gap {
    flex: none;
    width: 30px;
}

.template .template-task-parent > .home-row .home-text {
    font-weight: 600;
}

/* Tips ------------------------------------------------------------------------- */

.template-tips {
    margin-top: 36px;
}

.home .template-tips h3 {
    margin: 18px 0 4px;
    font: 600 16px/1.4 var(--site-font-ui);
}

.home .template-tips p {
    font-size: 15px;
    color: var(--home-muted);
}

/* The list of templates and the links between them ------------------------------ */

.template-list,
.template-more ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.template-list li {
    margin: 0;
    padding: 22px 0;
    border-bottom: 1px solid var(--home-guide);
}

.template-list li:first-child {
    padding-top: 0;
}

.home .template-list h2 {
    margin-bottom: 4px;
    font-family: var(--site-font-display);
    font-stretch: condensed;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.2;
}

.home .template-list .template-count {
    margin-top: 4px;
}

.template-more {
    margin-top: 52px;
    padding-top: 40px;
    border-top: 1px solid var(--home-guide);
}

.template-more ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
}

.template-more li {
    margin: 0;
}

.template-crumbs a,
.template-languages a,
.template-list a,
.template-more a {
    color: var(--home-teal);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.template-crumbs a:hover,
.template-languages a:hover,
.template-list a:hover,
.template-more a:hover {
    color: var(--home-ink);
}

.template-crumbs a:focus-visible,
.template-languages a:focus-visible,
.template-list a:focus-visible,
.template-more a:focus-visible {
    outline: 2px solid var(--home-teal);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Small screens ---------------------------------------------------------------- */

@media (max-width: 960px) {
    .template-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .template-side {
        max-width: 560px;
    }
}

@media (max-width: 760px) {
    .home .template-title {
        font-size: 38px;
    }

    /* Less indentation, so that the deepest level keeps room for its text. */
    .template .home-tree-level .home-tree-level {
        padding-left: 12px;
    }

    .template .home-node-branch > .home-row .home-text {
        font-size: 23px;
    }

    .template .home-tree-hint {
        padding-left: 0;
    }
}