/* =========================================================
   theme: wall

   every markdown block is a real object on the wood, not a web element.
   paper, tape, post-it, receipt, sticker. hard offset shadows, everything
   lies flat against the wall and slightly crooked.

   no framework - which is why the window title bar has to go here.
   ========================================================= */

[data-theme="wall"] {
    --font: monospace;

    /* the start page, the picture pages and this theme share the wood -
       so it lives with the images and not in this folder */
    --surface: url("/assets/images/index/minecraft-planks-dithered.png");
    --base-color: #5b4632;
    --surface-size: 120px auto;
    --surface-repeat: repeat;
    --surface-attach: scroll;

    --ink: #2b1f16;
    --muted: #7a6a4a;
    --link: #7a3b1d;

    --head-ink: #f3efc2;
    --head-shadow: 2px 2px 0 #2b1f16;

    --paper: #f3efc2;
    --paper-clear: rgba(243, 239, 194, 0);

    --block: #fffdf0;
    --block-edge: #6b4a2f;

    --rule: #cfc59f;

    --radius: 0;
    --radius-lg: 0;

    /* multiplier for the crookedness: 1 = everything sits askew, 0 = straight */
    --tilt: 1;

    --tape: rgba(226, 214, 150, 0.75);
    --perforation: #b3a681;
}

/* no window frame on this theme, but the bar stays as a node in the dom -
   which is why the element after it has to lose its spacing too */
[data-theme="wall"] .title-bar {
    display: none;
}

[data-theme="wall"] .credit[data-for="wall"] {
    display: block;
    margin-top: 60px;
    font-size: 0.7rem;
    color: var(--head-ink);
    text-shadow: var(--head-shadow);
    text-align: center;
}

/* ---------- theme picker: paper tabs, taped on ---------- */
[data-theme="wall"] .theme-picker button {
    background-color: #e8dfc0;
    color: var(--muted);
    border: 1px solid rgba(0, 0, 0, 0.18);
    transform: rotate(calc(var(--tilt) * -0.5deg));
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.18));
}
[data-theme="wall"] .theme-item:nth-child(even) button {
    transform: rotate(calc(var(--tilt) * 0.6deg));
}
[data-theme="wall"] .theme-picker button.selected {
    background-color: var(--paper);
    color: var(--ink);
    font-weight: bold;
}

/* ---------- the sheet ---------- */
[data-theme="wall"] .note {
    filter: drop-shadow(9px 9px 0 rgba(0, 0, 0, 0.28));
}
[data-theme="wall"] .note:nth-of-type(even) {
    transform: rotate(calc(var(--tilt) * -0.4deg));
}
[data-theme="wall"] .note:nth-of-type(odd) {
    transform: rotate(calc(var(--tilt) * 0.3deg));
}

/* the piece of tape at the top centre */
[data-theme="wall"] .note::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    width: 110px;
    height: 26px;
    transform: translateX(-50%) rotate(-1.5deg);
    background-color: var(--tape);
    border-left: 1px dashed rgba(0, 0, 0, 0.15);
    border-right: 1px dashed rgba(0, 0, 0, 0.15);
}

[data-theme="wall"] .note h3 {
    text-decoration: underline;
}

/* ---------- quote: a slip of paper taped in ---------- */
[data-theme="wall"] blockquote {
    transform: rotate(calc(var(--tilt) * -0.8deg));
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.18));
}
/* tape at the corner */
[data-theme="wall"] blockquote::before {
    content: "";
    position: absolute;
    top: -10px;
    right: 18px;
    width: 70px;
    height: 22px;
    transform: rotate(calc(var(--tilt) * 6deg));
    background-color: var(--tape);
}

/* ---------- callout: post-it ---------- */
[data-theme="wall"] .callout {
    background-color: #f7e26b;
    transform: rotate(calc(var(--tilt) * 1deg));
    filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.2));
}
[data-theme="wall"] .callout-warning {
    background-color: #f2a35e;
}

/* ---------- bookmark: a sticker stuck on ---------- */
[data-theme="wall"] .bookmark {
    background: #e8dfc0;
    border: 3px solid var(--block-edge);
    border-radius: 14px;
    transform: rotate(calc(var(--tilt) * -1deg));
    transition: transform 0.15s ease-out;
    filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.25));
}
[data-theme="wall"] .bookmark:hover {
    transform: rotate(0deg) scale(1.02);
}

/* ---------- code: receipt ---------- */
[data-theme="wall"] pre {
    background-color: #fffefa;
    border-top: 2px dashed var(--perforation);
    border-bottom: 2px dashed var(--perforation);
    filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.12));
}
[data-theme="wall"] :not(pre) > code {
    background-color: #e4dcbd;
}

/* ---------- image: a print with a border ---------- */
[data-theme="wall"] .note img {
    padding: 10px 10px 34px;
    background-color: #fffdf5;
    transform: rotate(calc(var(--tilt) * 0.7deg));
    filter: drop-shadow(7px 7px 0 rgba(0, 0, 0, 0.25));
}

/* ---------- table ---------- */
[data-theme="wall"] th {
    background-color: #e4dcbd;
}

/* ---------- separators: torn, not drawn ---------- */
[data-theme="wall"] hr {
    border-top: 2px dashed var(--perforation);
}
[data-theme="wall"] .note.clipped .more {
    border-top: 2px dashed var(--rule);
}