/* Identity of van-helden.net: the sky blue of the logo, Open Sans like the previous site */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/open-sans-latin.woff2') format('woff2'); }
:root {
    --brand: #88a8e0; --brand-strong: #3d63a8;
    --pico-font-family-sans-serif: 'Open Sans', Arial, sans-serif;
    --pico-font-family-display: 'Open Sans', Arial, sans-serif;
    --q2-accent: var(--brand); --q2-accent-contrast: #10213f; --q2-link: var(--brand-strong);
}
.hero .button { display: inline-block; padding: 0.7rem 1.4rem; color: #fff; background: transparent; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 0.3rem; text-decoration: none; }
.hero .button:hover { background: var(--brand); border-color: var(--brand); color: #10213f; }

/* Fonts, with enough weight over the theme */
html body, html button, html input, html select, html textarea { font-family: 'Open Sans', Arial, sans-serif; }
html h1, html h2, html h3, html h4, html h5, html h6, html .hero h1 { font-family: 'Open Sans', Arial, sans-serif; }

/* The buy button of the records (payments plugin) */
.shop-buy { border-color: var(--brand); }
.shop-buy .button, .shop-buy button { background: var(--brand); border-color: var(--brand); color: var(--q2-accent-contrast); }
.shop-buy .button:hover, .shop-buy button:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }

/* A record: text and video on the left, purchase, player and platforms in the side column (the layout is .with-aside of the theme) */
.record-cover { float: left; width: min(16rem, 45%); margin: 0 1.5rem 1rem 0; }
.record-cover img { width: 100%; height: auto; border-radius: 0.4rem; }
.record-page .e-content::after { content: ""; display: block; clear: both; }
.record-aside .aside-box h2 { font-size: 1.1rem; }
.record-aside .shop-buy { margin: 0; padding: 0; border: 0; }
.record-aside .shop-buy h3 { margin: 0.8rem 0 0.4rem; font-size: 0.95rem; }
.record-aside .shop-buy input[type="number"], .record-aside .shop-buy select { width: 100%; }
.record-aside .shop-buy .button, .record-aside .shop-buy button { width: 100%; cursor: pointer; }
.record-note { margin: 0.5rem 0 0; opacity: 0.7; }
.record-links ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.record-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border: 1px solid var(--brand); border-radius: 0.3rem; color: inherit; text-decoration: none; }
.record-link:hover { background: var(--brand); color: var(--q2-accent-contrast); }
.shop-downloads { list-style: none; padding: 0; }
@media (min-width: 60rem) { .record-aside { max-height: calc(100vh - var(--q2-header-height, 4rem) - 2rem); overflow-y: auto; scrollbar-width: thin; } }
/* The choice of format and the shipping line under the fields */
.record-aside .shop-formats { margin: 0 0 0.8rem; padding: 0; border: 0; }
.record-aside .shop-formats legend { margin-bottom: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.record-aside .shop-format { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.3rem; cursor: pointer; }
.record-aside .shop-format input { margin: 0; }
.record-aside .shop-format small { margin-left: auto; opacity: 0.75; }
.record-aside .shop-detail { margin: 0 0 0.6rem; }
.record-aside .shop-shipping { margin: 0 0 0.8rem; font-size: 0.9rem; }

/* A song: illustration, player and records in the side column */
.song-illustration { margin: 0 0 1.5rem; }
.song-illustration img { width: 100%; height: auto; border-radius: 0.5rem; }
.song-aside .aside-box + .aside-box { margin-top: 1.5rem; }
.song-records ul { margin: 0; padding: 0 0 0 1.1rem; }
.song-page .embed-card, .song-page .consent-embed { margin: 0 0 1.5rem; }

.song-credits { margin-top: 2rem; font-size: 0.9rem; opacity: 0.8; }
.song-credits p { margin: 0; }