/* Home page (resources/views/home.blade.php).
 *
 * The hero is the pitch written as a task tree that works: the type size steps
 * down with the depth, guide lines show the hierarchy. Everything else stays
 * quiet. Loaded after simple1.0.css and site.css: rules are scoped under .home
 * so they win over the legacy ones (`.content p`, global h2, links...). */

.home {
    --home-ink: #1c2130;
    --home-teal: #2c7a63;
    --home-mint: #8fd8bf;
    --home-mint-bright: #b4ead8;
    --home-muted: #5b6170;
    --home-guide: rgba(28, 33, 48, .15);

    padding: 30px 10px 12px;
    color: var(--home-ink);
    font: 16px/1.55 var(--site-font-ui);
}

.home p {
    margin: 0;
}

.home h1,
.home h2,
.home h3 {
    margin: 0;
    color: var(--home-ink);
}

/* Hero ------------------------------------------------------------------------ */

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 64px;
    align-items: start;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--home-guide);
}

/* The tree */

.home-tree-level {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A child level hangs from its parent's fold button by a guide line. */
.home-tree-level .home-tree-level {
    margin-left: 14px;
    padding-left: 28px;
    border-left: 2px solid var(--home-guide);
}

.home-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-node-root > .home-row {
    margin-bottom: 14px;
}

.home-node-branch {
    margin-top: 20px;
}

.home-node-branch:first-child {
    margin-top: 6px;
}

.home-node-branch .home-node {
    margin-top: 8px;
}

/* Type steps down with the depth: root, branch, task. */
.home .home-node-root > .home-row .home-text {
    font-family: var(--site-font-display);
    font-stretch: condensed;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: .005em;
}

.home .home-node-branch > .home-row .home-text {
    font-family: var(--site-font-display);
    font-stretch: condensed;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.2;
}

/* Fold / unfold button: a chevron, down when open, right when folded. Hidden
   (keeping its room) until home.js makes the tree interactive. */
.home-fold {
    flex: none;
    position: relative;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(28, 33, 48, .6);
    cursor: pointer;
    visibility: hidden;
}

.home-tree.is-interactive .home-fold {
    visibility: visible;
}

.home-fold::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.home-fold[aria-expanded="false"]::before {
    left: 8px;
    top: 10px;
    transform: rotate(-45deg);
}

.home-fold:hover {
    background: rgba(28, 33, 48, .07);
    color: var(--home-ink);
}

.home-fold:focus-visible {
    outline: 2px solid var(--home-teal);
    outline-offset: 1px;
}

/* Tasks: a real checkbox (kept for keyboard and screen readers) drawn as the
   logo's mint box. */
.home-task {
    position: relative;
    gap: 16px;
    padding-left: 4px;
    cursor: pointer;
}

.home-task input {
    position: absolute;
    left: 4px;
    width: 22px;
    height: 22px;
    margin: 0;
    opacity: 0;
}

.home-box {
    flex: none;
    position: relative;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(28, 33, 48, .35);
    border-radius: 6px;
    background: #f8f7f4;
    transition: background-color .12s ease, border-color .12s ease;
}

.home-task:hover .home-box {
    border-color: rgba(28, 33, 48, .6);
}

.home-task input:checked + .home-box {
    background: var(--home-mint);
    border-color: #6cc3a6;
}

.home-task input:checked + .home-box::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 9px;
    height: 5px;
    border-left: 2.5px solid var(--home-ink);
    border-bottom: 2.5px solid var(--home-ink);
    transform: rotate(-45deg);
}

.home-task input:focus-visible + .home-box {
    outline: 2px solid var(--home-teal);
    outline-offset: 2px;
}

.home-task input:checked ~ .home-text {
    color: var(--home-muted);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(44, 122, 99, .65);
}

/* Added by home.js when a task is ticked. */
.home-done-at {
    font: 13px var(--site-font-ui);
    color: var(--home-teal);
    white-space: nowrap;
}

.home .home-tree-hint {
    max-width: 62ch;
    margin-top: 30px;
    padding-left: 42px;
    font-size: 14px;
    color: var(--home-muted);
}

/* Call to action: the one ink block on the page, echoing the header. */
.home-start {
    padding: 32px 30px 30px;
    border-radius: 16px;
    background-color: var(--home-ink);
    background-image: var(--site-ink-texture);
    color: var(--site-on-ink);
}

.home .home-start-title {
    margin-bottom: 12px;
    font-family: var(--site-font-display);
    font-stretch: condensed;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    color: #fff;
}

.home .home-start p {
    margin-bottom: 24px;
    font-size: 15px;
    color: var(--site-on-ink-muted);
}

.home .home-start .home-start-login {
    margin: 18px 0 0;
    font-size: 13px;
}

.home-button {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    border-radius: 10px;
    background: var(--home-mint);
    color: var(--home-ink);
    font: 600 15px/1 var(--site-font-ui);
    text-decoration: none;
    transition: background-color .15s ease;
}

.home-button:hover {
    background: var(--home-mint-bright);
}

.home-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Sections --------------------------------------------------------------------- */

.home .home-section-title {
    margin-bottom: 12px;
    font-family: var(--site-font-display);
    font-stretch: condensed;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.1;
}

/* Keyboard: the shortcuts as a ruled two-column table, key then action. */
.home-keys {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 64px;
    padding: 52px 0;
    border-bottom: 1px solid var(--home-guide);
}

.home .home-keys-intro p {
    max-width: 32ch;
    color: var(--home-muted);
}

.home-keys-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    margin: 0;
}

.home-keys-list > div {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--home-guide);
}

.home-keys-list dt,
.home-keys-list dd {
    margin: 0;
}

.home kbd {
    display: inline-block;
    min-width: 26px;
    box-sizing: border-box;
    padding: 3px 7px 2px;
    border: 1px solid rgba(28, 33, 48, .25);
    border-bottom-width: 3px;
    border-radius: 6px;
    background: #fbfaf7;
    color: var(--home-ink);
    font: 600 12.5px/1.2 var(--site-font-ui);
    text-align: center;
}

/* Why */

.home-why {
    padding-top: 52px;
}

.home-why-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 52ch));
    gap: 64px;
    margin-top: 8px;
}

.home .home-why h3 {
    margin-bottom: 6px;
    font: 600 17px/1.4 var(--site-font-ui);
}

@media (prefers-reduced-motion: reduce) {
    .home-fold::before,
    .home-box,
    .home-button {
        transition: none;
    }
}