/*
 * Earshots site styles.
 *
 * A rebuild of the look the site had under the WordPress "MiniZen" theme:
 * Droid Serif, lowercase throughout, the site title and menu right-aligned in
 * the left third of the page, and content in the right two thirds.
 */

@font-face {
    font-family: "Droid Serif";
    src: url("fonts/DroidSerif.df20289f30fb.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "Droid Serif";
    src: url("fonts/DroidSerif-Italic.31682d25f829.ttf") format("truetype");
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Droid Serif";
    src: url("fonts/DroidSerif-Bold.41f991ed8f54.ttf") format("truetype");
    font-weight: bold;
    font-display: swap;
}
@font-face {
    font-family: "Droid Serif";
    src: url("fonts/DroidSerif-BoldItalic.691c78dc10f9.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

:root {
    --background: #fff; /* overridden per site from Settings > Site settings */
    --text: #181818;
    --accent: #11eff2;
    --rule: #000;
    --space: 2em; /* gap between paragraphs and other blocks */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: "Droid Serif", Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.44;
    text-transform: lowercase;
}

/* Links ------------------------------------------------------------------ */

a {
    color: var(--text);
    transition: border-radius 0.4s ease, background-color 0.4s ease;
}
a:hover,
a:focus-visible,
a:active {
    background-color: var(--accent);
    border-radius: 3px;
}
a:focus-visible {
    outline: thin dotted;
}

.skip-link {
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 10;
    padding: 0.8em 1.2em;
    background: #f1f1f1;
    transform: translateY(-200%);
}
.skip-link:focus {
    transform: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Typography --------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: normal;
}
h1 { font-size: 1.5625rem; margin-bottom: 2.3809rem; }
h2 { font-size: 1.3125rem; margin-bottom: 2rem; }
h3 { font-size: 1.1875rem; margin-bottom: 1.8095rem; }
h4 { font-size: 1.0625rem; margin-bottom: 1.619rem; }

p,
ul,
ol,
figure,
blockquote,
address {
    margin: 0 0 var(--space);
    padding: 0;
}
ul,
ol {
    margin-left: 1em;
}
blockquote {
    margin-inline: 1em;
}
hr {
    height: 1px;
    margin: 0 0 var(--space);
    border: 0;
    background: #ccc;
}
img {
    max-width: 100%;
    height: auto;
}
iframe {
    max-width: 100%;
}

/* Layout ------------------------------------------------------------------- */

.site {
    padding: 5rem 9% 2em;
}
.site-header,
.site-main {
    padding-left: 4%;
}

.site-header {
    margin-bottom: 4.375em;
}
.site-header a {
    text-decoration: none;
}
.site-title {
    margin: 0;
    font-size: 30px;
}

.site-nav ul {
    margin: 0;
    list-style: none;
}
.site-nav a {
    display: inline-block;
}
.site-nav a[aria-current] {
    color: var(--accent);
    background: none;
}
.menu-toggle {
    padding: 0.6em 1em;
    border: 0;
    background: #e6e6e6;
    color: var(--text);
    font: inherit;
    line-height: 1;
    text-transform: inherit;
    cursor: pointer;
}
/* Small screens: the menu sits behind the toggle (which only appears once
   site.js has run, so without JavaScript the menu is simply always shown). */
.menu-toggle:not([hidden])[aria-expanded="false"] + ul {
    display: none;
}

.site-main {
    margin-bottom: 1.875em;
}

.entry {
    margin-bottom: var(--space);
}
.entry-title a {
    text-decoration: none;
}
.entry-meta,
.entry-content {
    padding-right: 4%;
    margin-bottom: 1.875em;
}
.entry-content::after {
    content: "";
    display: block;
    clear: both;
}
.entry-meta > :last-child,
.entry-content > :last-child {
    margin-bottom: 0;
}

.release-artist {
    margin-bottom: 0;
}

.site-footer {
    padding-top: 0.875em;
    border-top: 1px solid var(--rule);
    font-style: italic;
}

@media (min-width: 800px) {
    .site-title,
    .site-nav ul {
        width: 33.333%;
        text-align: right;
    }
    .menu-toggle {
        display: none;
    }
    .menu-toggle:not([hidden])[aria-expanded="false"] + ul {
        display: block;
    }

    /* Titles span the full width; the date (if any) sits in the left third
       and the content in the right two thirds. */
    .entry {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
    .entry-title {
        grid-column: 1 / -1;
    }
    .entry-content {
        grid-column: 2;
        min-width: 0;
    }
}

/* Rich text images ---------------------------------------------------------- */

.richtext-image.left {
    float: left;
    max-width: 50%;
    margin: 0 1.5em 1em 0;
}
.richtext-image.right {
    float: right;
    max-width: 50%;
    margin: 0 0 1em 1.5em;
}
.richtext-image.full-width {
    display: block;
}

/* Cover grid ------------------------------------------------------------------ */

.cover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 6px;
    margin: 0 0 var(--space);
    list-style: none;
}
.cover-grid a,
.cover-grid img {
    display: block;
    width: 100%;
}
.cover-grid a {
    transition: opacity 0.4s ease;
}
.cover-grid a:hover,
.cover-grid a:focus-visible {
    opacity: 0.8;
    border-radius: 0;
}

/* Pagination ------------------------------------------------------------------ */

.pagination {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: var(--space);
    padding-right: 4%;
}

@media print {
    .site-nav,
    .skip-link {
        display: none;
    }
}