/*
 * Theme "Bücherregal & Fristzettel"
 * Builds on Pico CSS (css/pico.min.css). Colors and fonts are set here at the top.
 */

/* ------------------------------------------------------------------ */
/* Fonts (stored in fonts/, no external requests)                     */
/* ------------------------------------------------------------------ */
@font-face {
    font-family: "Literata";
    src: url("../fonts/literata-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Literata";
    src: url("../fonts/literata-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Special Elite";
    src: url("../fonts/special-elite-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Colors                                                             */
/* ------------------------------------------------------------------ */
:root[data-theme="light"] {
    --paper: #f6f0e2;
    --paper-light: #fffdf6;
    --ink: #2d2a26;
    --ink-soft: #5f574c;
    --line: #d8ccb2;
    --green: #8cc63f;          /* logo green */
    --green-dark: #3e6b1c;     /* links, readable on paper */
    --wood: #8a5a33;
    --wood-dark: #5b3a20;
    --stamp-red: #b3261e;
    --stamp-blue: #2c4f8c;

    --font-heading: "Literata", Georgia, "Times New Roman", serif;
    --font-typewriter: "Special Elite", "Courier New", monospace;

    /* Pico settings */
    --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --pico-background-color: var(--paper);
    --pico-color: var(--ink);
    --pico-muted-color: var(--ink-soft);
    --pico-h1-color: var(--ink);
    --pico-h2-color: var(--ink);
    --pico-h3-color: var(--ink);
    --pico-h4-color: var(--ink);
    --pico-primary: var(--green-dark);
    --pico-primary-hover: #2c4d13;
    --pico-primary-underline: rgba(62, 107, 28, .45);
    --pico-primary-background: var(--green-dark);
    --pico-primary-border: var(--green-dark);
    --pico-primary-hover-background: #2c4d13;
    --pico-primary-hover-border: #2c4d13;
    --pico-primary-focus: rgba(62, 107, 28, .3);
}

/* Book-spine colors: one per section, also used for the underline of its heading */
:where(.shelf a, section) { --spine: #d7ccc8; }
[href$="#start"], #start         { --spine: #bcaaa4; }
[href$="#aktuelles"], #aktuelles { --spine: #90caf9; }
#neu                             { --spine: #ce93d8; }
[href$="#medien"], #medien       { --spine: #ffee58; }
[href$="#team"], #team           { --spine: #9ccc65; }
[href$="#spenden"], #spenden     { --spine: #ffa726; }
[href$="#anfahrt"], #anfahrt     { --spine: #ffe082; }
[href="catalog.php"]             { --spine: #bdce48; }

/* ------------------------------------------------------------------ */
/* Basics                                                             */
/* ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

body { background: var(--paper); }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
}

img { height: auto; }

.float-right, .float-left {
    max-width: 40%;
    margin-bottom: 1rem;
}
.float-right { float: right; margin-left: 1.25rem; }
.float-left  { float: left; margin-right: 1.25rem; }

/* Row of photos with equal height, e.g. in "Medien" */
.photo-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: var(--pico-spacing);
}
.photo-row img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------ */
/* Header and book-shelf navigation                                   */
/* ------------------------------------------------------------------ */
.site-header {
    padding: 1rem 0 .5rem;
}
.site-header .brand img {
    display: block;
    width: min(300px, 80vw);
}

.shelf {
    position: sticky;
    top: 0;
    z-index: 10;
    display: block;
    background: var(--paper);
    border-bottom: 12px solid var(--wood);
    box-shadow: 0 1px 0 var(--wood-dark), 0 8px 10px -8px rgba(60, 35, 10, .5);
}
.shelf ul.container {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    margin: 0 auto;
    padding-top: 1.1rem; /* room for the pulled-out book and its ribbon */
}
.shelf li {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* One book */
.shelf li a {
    position: relative;
    display: block;
    margin: 0;
    padding: 1.1rem .8rem .55rem;
    background:
        linear-gradient(to bottom, transparent .35rem, rgba(0, 0, 0, .18) .35rem .5rem, transparent .5rem .65rem, rgba(0, 0, 0, .18) .65rem .8rem, transparent .8rem),
        var(--spine);
    color: var(--ink);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 3px 3px 0 0;
    box-shadow: inset -5px 0 0 rgba(0, 0, 0, .12), inset 3px 0 0 rgba(255, 255, 255, .35);
    transition: transform .15s ease;
}
.shelf li a:hover,
.shelf li a:focus-visible {
    transform: translateY(-2px);
    color: var(--ink);
}
/* Current section: the book is pulled out and has a red bookmark ribbon */
.shelf li a.is-active {
    transform: translateY(-8px);
    box-shadow: inset -5px 0 0 rgba(0, 0, 0, .12), inset 3px 0 0 rgba(255, 255, 255, .35), 0 6px 8px -4px rgba(0, 0, 0, .45);
}
.shelf li a.is-active::after {
    content: "";
    position: absolute;
    top: -.75rem;
    right: .7rem;
    width: .55rem;
    height: .9rem;
    background: var(--stamp-red);
    clip-path: polygon(0 0, 50% 30%, 100% 0, 100% 100%, 0 100%);
}

/* Small screens: books stand upright, title written along the spine */
@media (max-width: 575px) {
    .shelf ul.container {
        justify-content: center;
        gap: 4px;
    }
    .shelf li {
        flex: 1 1 0;
        max-width: 3rem;
    }
    .shelf li a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 5.75rem;
        padding: .9rem 0 .3rem;
        font-size: .85rem;
    }
    .shelf li a span {
        writing-mode: vertical-rl;
        transform: rotate(180deg); /* read from bottom to top, like German book spines */
    }
    .shelf li a.is-active::after {
        right: .5rem;
    }
}

/* ------------------------------------------------------------------ */
/* Sections on the start page                                          */
/* ------------------------------------------------------------------ */
main.container {
    padding-top: 1.5rem;
}
@media (max-width: 575px) {
    main section[id] { scroll-margin-top: 8.5rem; } /* standing books are taller */
}
main section {
    display: flow-root; /* keeps floating images inside */
    scroll-margin-top: 6rem;
    padding: 2rem 0;
    margin: 0;
}
main section + section {
    border-top: 1px dashed var(--line);
}
main section h2::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: .35rem;
    margin-top: .4rem;
    background: var(--spine);
    border-radius: 2px;
}

/* Start: contact on the left, Fristzettel on the right */
.intro {
    display: grid;
    gap: 1rem 2.5rem;
}
@media (min-width: 768px) {
    .intro {
        grid-template-columns: 1.2fr 1fr;
        align-items: start;
    }
}
.intro-text img {
    border-radius: 4px;
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5);
}
@media (max-width: 767px) {
    .intro-text img {
        width: 100%;
        max-height: 180px;
        object-fit: cover;
    }
}

/* ------------------------------------------------------------------ */
/* Fristzettel (upcoming opening dates)                               */
/* ------------------------------------------------------------------ */
.slip {
    position: relative;
    margin-top: 3rem;
    padding: 1.75rem 1.25rem 1rem;
    background: var(--paper-light);
    border: 1px solid var(--line);
    box-shadow: 0 12px 20px -14px rgba(60, 35, 10, .55);
    transform: rotate(-1deg);
}
/* perforated top edge */
.slip::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 8px;
    background: radial-gradient(circle at 8px 0, var(--paper) 4px, transparent 4.5px) repeat-x;
    background-size: 16px 8px;
}
.slip-raven {
    position: absolute;
    right: -.5rem;
    top: -6.5rem;
    width: 60px;
    transform: rotate(1deg);
}
.slip h2 {
    margin: 0 4rem .75rem 0;
    padding-bottom: .4rem;
    font-family: var(--font-typewriter);
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--stamp-blue);
    border-bottom: 2px solid var(--stamp-blue);
}
.slip h2::after { display: none; }

.slip-list {
    margin: 0;
    padding: 0;
}
.slip-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem 0;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid rgba(44, 79, 140, .2);
}
.stamp {
    flex: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.3rem;
    padding: .25rem .4rem;
    font-family: var(--font-typewriter);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--stamp-red);
    border: 2px solid currentColor;
    border-radius: 6px;
    opacity: .85;
    transform: rotate(-4deg);
}
.slip-list li:nth-child(2) .stamp { transform: rotate(2deg); }
.slip-list li:nth-child(3) .stamp { transform: rotate(-2deg); }
.stamp-day, .stamp-month { font-size: .8rem; }
.stamp-date { font-size: 1.7rem; }

.slip-text strong {
    display: block;
    font-size: 1.1rem;
}
.slip-summary {
    display: block;
    font-size: .9rem;
    color: var(--ink-soft);
}
.today-stamp {
    margin-left: auto;
    padding: .15rem .4rem;
    font-family: var(--font-typewriter);
    font-size: .75rem;
    text-transform: uppercase;
    text-align: center;
    color: var(--green-dark);
    border: 2px solid currentColor;
    border-radius: 4px;
    transform: rotate(6deg);
}
.slip-list li.is-closed {
    color: var(--ink-soft);
}
.stamp-closed {
    color: var(--stamp-blue);
    opacity: .6;
}
.slip-empty, .slip-regular, .slip-note {
    margin: .9rem 0 0;
    font-size: .95rem;
}
.slip-note { color: var(--ink-soft); }
.slip-regular + .slip-regular { margin-top: .2rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ */
/* Map and catalog (loaded on click)                                  */
/* ------------------------------------------------------------------ */
.map, .catalog {
    margin-bottom: 1rem;
}
.map img {
    display: block;
    width: 100%;
    max-width: 600px;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
}
.map iframe {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 70vh;
    border: 0;
}
.map small, .catalog small {
    display: block;
    margin-top: .4rem;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------------ */
/* New books (from eOPAC)                                             */
/* ------------------------------------------------------------------ */
/* Covers, standing on a shelf (start page, section "Medien") */
.book-shelf {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
    margin: 0 0 1rem;
    padding: 0 .5rem;
    border-bottom: 10px solid var(--wood);
}
.book-shelf li {
    list-style: none;
    margin: 0;
}
.book-shelf img, .book-cover img { display: block; }
.book-cover { text-decoration: none; }
.book-shelf a {
    display: block;
    color: var(--ink);
    text-decoration: none;
    transition: transform .15s ease;
}
.book-shelf a:hover { transform: translateY(-4px); }
.book-shelf img, .book-shelf .cover-placeholder {
    width: 100%;
    max-width: 130px;
    margin: 0 auto;
    box-shadow: 3px 3px 8px -3px rgba(0, 0, 0, .5);
}
.book-shelf-title {
    margin: .4rem 0 .5rem;
    font-size: .8rem;
    line-height: 1.25;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
@media (max-width: 575px) {
    .book-shelf { gap: .5rem; padding: 0; }
    .book-shelf-title { display: none; }
}

/* Drawn cover when eOPAC has no picture */
.cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2 / 3;
    padding: .5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .8rem;
    text-align: center;
    color: var(--ink);
    background: var(--spine, #bcaaa4);
    border-radius: 2px 4px 4px 2px;
    box-shadow: inset 6px 0 0 rgba(0, 0, 0, .15);
}
.cover-placeholder-0 { --spine: #90caf9; }
.cover-placeholder-1 { --spine: #ffee58; }
.cover-placeholder-2 { --spine: #9ccc65; }
.cover-placeholder-3 { --spine: #ffa726; }

/* Full list (page "Neue Bücher") */
.book-list {
    padding: 0;
    margin: 2rem 0 0;
}
.book {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 1.5rem 0;
    margin: 0;
    list-style: none;
    border-top: 1px dashed var(--line);
    scroll-margin-top: 8rem;
}
@media (min-width: 576px) {
    .book { grid-template-columns: 130px 1fr; }
}
.book-cover img, .book-cover .cover-placeholder {
    width: 100%;
    box-shadow: 3px 3px 8px -3px rgba(0, 0, 0, .5);
}
.book h3 {
    margin: 0 0 .2rem;
    font-size: 1.2rem;
}
.book h3 a {
    color: var(--ink);
    text-decoration: none;
}
.book h3 a:hover { text-decoration: underline; }
.book-subtitle, .book-author {
    margin: 0 0 .3rem;
    color: var(--ink-soft);
}
.book-author { font-style: italic; }
.book-content {
    margin: .6rem 0;
    font-size: .95rem;
}
.book-meta {
    margin: 0;
    font-size: .85rem;
    color: var(--ink-soft);
}
.book-status::before {
    content: "";
    display: inline-block;
    width: .6rem;
    height: .6rem;
    margin-right: .35rem;
    border-radius: 50%;
    background: #9e9e9e;
}
.book-status-green::before { background: #4c9a2a; }
.book-status-yellow::before { background: #e0a800; }
.book-status-red::before, .book-status-redyellow::before { background: var(--stamp-red); }

/* ------------------------------------------------------------------ */
/* Subpages (Geschichte, Impressum, …)                                */
/* ------------------------------------------------------------------ */
main.page {
    display: flow-root;
    padding-bottom: 3rem;
}
main.page h1 { margin-top: 1rem; }

/* ------------------------------------------------------------------ */
/* Footer                                                             */
/* ------------------------------------------------------------------ */
.site-footer {
    padding: 2rem 0 1.5rem;
    margin-top: 2rem;
    --pico-color: #f3e9d6;
    color: #f3e9d6;
    background: var(--wood-dark);
    border-top: 12px solid var(--wood);
    font-size: .95rem;
}
.site-footer a {
    color: #fff;
    --pico-underline: rgba(255, 255, 255, .5);
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: 0;
    margin: 0;
}
.footer-links li {
    list-style: none;
    margin: 0;
}