/* Additions to the Travel Blog theme (theme/main.css, unchanged) for the static rebuild:
   things WordPress' own block styles used to cover, plus the bits that replaced PHP/jQuery. */

/* The site name is an <h1> on Home and a <p> elsewhere; make them look the same. */
header .title { font-size: 5rem; font-weight: bold; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid rgba(0, 191, 255, 1);
    outline-offset: 2px;
}

/* ---- Single post: the post title is the page's h1 but keeps the theme's h3 look ---- */
.page-post .post-title {
    color: black;
    font-size: 1.5rem;
    margin: 2rem 2rem 0 2rem;
    padding: 0 0 2rem 0;
    border-bottom: 1px solid dodgerBlue;
}

/* The theme gave every paragraph 5rem of padding on all sides (~160px between paragraphs).
   Keep its side margins, but space paragraphs like normal text. */
.page-post p { padding: .5rem var(--pad); }
.page-post > p:first-of-type { padding-top: 2rem; }
.page-post > :last-child { margin-bottom: 3rem; }

/* Post content other than paragraphs. */
.page-post { --pad: 5rem; padding-bottom: 1px; line-height: 22px; }
.page-post h2,
.page-post ul,
.page-post ol,
.page-post blockquote,
.page-post figure,
.page-post hr,
.page-post .lost-note,
.page-post .embed-link { margin: 1.5rem var(--pad); }
.page-post h2 { color: black; font-size: 1.5rem; line-height: 1.3; }
.page-post ul, .page-post ol { padding-left: 1.5rem; }
.page-post li { margin: .3rem 0; }
.page-post blockquote { border-left: 3px solid dodgerBlue; padding: 0 0 0 1rem; font-style: italic; }
.page-post blockquote p, .page-post li p { padding: .5rem 0; }
.page-post hr { border-top-color: dodgerBlue; }
.page-post img, .page-post video { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.page-post figcaption { font-size: .85rem; color: #555; text-align: center; margin-top: .5rem; }
.page-post code { font-family: inherit; }

/* Galleries inside posts (WordPress' columns-3 gallery block). */
.page-post ul.gallery {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.page-post ul.gallery li { margin: 0; }
.page-post ul.gallery figure { margin: 0; }
.page-post ul.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* "Wasn't in the backup" notes and the old embeds (now plain links). */
.lost-note {
    font-size: .9rem;
    font-style: italic;
    color: #555;
    border: 1px dashed dodgerBlue;
    padding: .75rem 1rem !important;
}
.embed-link a { color: dodgerBlue; }
.embed-link a::before { content: "\25B6\00a0"; }

/* Footer tray of a post: earlier | all posts | later */
.section-footer .pager-prev,
.section-footer .pager-next { grid-row: 1; text-align: center; }
.section-footer .pager-prev { grid-column: 1; }
.section-footer .pager-next { grid-column: 3; }

/* Posts page heading and boxes */
.all-posts-post .section-heading time { color: inherit; }

/* ---- Home ---- */
/* "Currently" cover that wasn't in the backup: the media icon in an empty frame. */
.media-missing {
    width: 100px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .2);
}
.media-missing .icon { width: 30px; opacity: .6; }
.tray-icon { cursor: pointer; }

/* The swipeable photo stack (was jTinder). */
#tinderslide li { touch-action: pan-y; cursor: grab; user-select: none; }
#tinderslide li.dragging { cursor: grabbing; }
#tinderslide li.leaving { transition: transform .4s ease, opacity .4s ease; opacity: 0; }
#tinderslide li.returning { transition: transform .2s ease; }
#tinderslide img { object-fit: cover; pointer-events: none; }

/* ---- Photos page ---- */
.toggle-photos {
    background: none;
    border: 0;
    font: inherit;
    font-size: 1rem;
    color: rgba(0, 191, 255, 1);
    padding: 0 0 0 .5rem;
    cursor: pointer;
}
.photos-note {
    grid-column: 1 / span 12;
    color: white;
    border-color: rgba(0, 191, 255, .6);
    max-width: 40rem;
    margin: 0 2rem 2rem;
}
.img-page img { object-fit: cover; }

@media (max-width: 800px) {
    .page-post { --pad: 3rem; }
}
@media (max-width: 670px) {
    .page-post { --pad: 2rem; }
    header .title { font-size: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    #tinderslide li.leaving, #tinderslide li.returning { transition: none; }
}

/* The theme's 100%-wide page box plus its border overflowed narrow screens by 2px. */
.page-container { box-sizing: border-box; }