/**
 * WordPress-specific adjustments.
 *
 * Kept out of style.css on purpose: that file is a straight copy of the
 * static design source, so it can be re-synced wholesale. Anything that only
 * matters because the site runs on WordPress belongs here instead.
 */

/* ---------------------------------------------------------------------
 * Admin bar
 *
 * The navbar is position:fixed at top:0, so it sits underneath the admin
 * bar (which is fixed at top:0 with a far higher z-index). WordPress's own
 * `html { margin-top: 32px }` only shifts normal flow content, not fixed
 * elements — so the offset has to be applied here.
 * ------------------------------------------------------------------ */

body.admin-bar .navbar {
    top: 32px;
}

/* The admin bar is 46px tall below 782px. */
@media screen and (max-width: 782px) {
    body.admin-bar .navbar {
        top: 46px;
    }
}

/* Below 600px WordPress makes the admin bar position:absolute, so it scrolls
   away with the page. Holding a 46px gap would leave a permanent strip of
   background under the navbar for the whole scroll, so the navbar goes back
   to the top and simply overlaps the bar at scroll position 0 — visible only
   to logged-in users on a phone. */
@media screen and (max-width: 600px) {
    body.admin-bar .navbar {
        top: 0;
    }
}

/* The mobile drawer opens directly below the navbar, so its offset is the
   navbar height *plus* the admin bar. Both change, at different widths:
   the navbar is 70px above 768px and 56px below it, while the admin bar is
   32px above 782px and 46px below. That leaves three bands to cover. */

/* Above 782px: 32px bar + 70px navbar. */
body.admin-bar .mobile-nav {
    top: 102px;
    height: calc(100vh - 102px);
}

/* 769–782px: the bar has grown to 46px but the navbar is still 70px. */
@media screen and (min-width: 769px) and (max-width: 782px) {
    body.admin-bar .mobile-nav {
        top: 116px;
        height: calc(100vh - 116px);
    }
}

/* 601–768px: 46px bar + 56px navbar. !important is needed here only because
   the design stylesheet uses it for the same properties at this breakpoint. */
@media screen and (min-width: 601px) and (max-width: 768px) {
    body.admin-bar .mobile-nav {
        top: 102px !important;
        height: calc(100vh - 102px) !important;
    }
}

/* At 600px and below the navbar returns to top:0 (see above), so the drawer
   keeps the offset the design stylesheet already gives it. */

/* ---------------------------------------------------------------------
 * Linkified titles and thumbnails
 *
 * On the static site these were plain spans and divs, so the design
 * stylesheet has no rules for anchors in these positions. Now that each one
 * is a real link to its post, they would otherwise pick up the browser's
 * default styling — blue when unvisited, purple once visited, underlined.
 * Inheriting the parent's colour restores the intended design exactly.
 * ------------------------------------------------------------------ */

.track-title a,
.project-title a,
.artist-card-name a,
.blog-card-title a,
.media-title-text a,
.track-artwork a,
.project-img-wrapper a,
.artist-card-v2 > a,
.proj-featured-title a,
.proj-list-name a,
.artist-name a,
.producer-info a,
a.proj-featured-img-link,
a.card-img-wrapper,
a.producer-card,
a.media-card {
    color: inherit;
    text-decoration: none;
}

/* :visited and :hover need naming explicitly, otherwise the user-agent's own
   state rules re-colour the link on hover or after it has been opened. */
.track-title a:link,
.track-title a:visited,
.track-title a:hover,
.track-title a:focus,
.track-title a:active,
.project-title a:link,
.project-title a:visited,
.project-title a:hover,
.project-title a:focus,
.project-title a:active,
.artist-card-name a:link,
.artist-card-name a:visited,
.artist-card-name a:hover,
.artist-card-name a:focus,
.artist-card-name a:active,
.blog-card-title a:link,
.blog-card-title a:visited,
.blog-card-title a:hover,
.blog-card-title a:focus,
.blog-card-title a:active,
a.producer-card:link,
a.producer-card:visited,
a.producer-card:hover,
a.producer-card:focus,
a.producer-card:active,
.proj-featured-title a:link,
.proj-featured-title a:visited,
.proj-featured-title a:hover,
.proj-featured-title a:focus,
.proj-featured-title a:active,
.proj-list-name a:link,
.proj-list-name a:visited,
.proj-list-name a:hover,
.proj-list-name a:focus,
.proj-list-name a:active,
.artist-name a:link,
.artist-name a:visited,
.artist-name a:hover,
.artist-name a:focus,
.artist-name a:active {
    color: inherit;
    text-decoration: none;
}

/* Image wrappers became links too; keep them laying out as the blocks they
   replaced rather than as inline text. */
.track-artwork a,
.project-img-wrapper a,
.artist-card-v2 > a,
a.card-img-wrapper {
    display: block;
}

/* Fill the wrapper rather than shrink-wrap the image. A lazy-loaded image that
   hasn't arrived yet has no height, which would otherwise collapse the link to
   a ~24px strip and leave most of the artwork untappable. */
.track-artwork a,
.project-img-wrapper a,
a.card-img-wrapper {
    width: 100%;
    height: 100%;
}

/* The project cover fills its wrapper, which the design stylesheet sizes and
   positions — so the link has to occupy it completely rather than shrink to
   the image's intrinsic box. */
a.proj-featured-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------------
 * Clickable roster cards
 *
 * The design stylesheet was written for cards that are themselves anchors —
 * .artist-card-content even sets pointer-events: none so a parent anchor's
 * click can bubble. The static site achieved that with an onclick on the div,
 * which can't be reproduced with nested anchors in valid HTML.
 *
 * Instead each card gets a stretched link covering the artwork, layered
 * beneath the text content so the name link and the social icons still win.
 * ------------------------------------------------------------------ */

.card-stretch-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Same stacking level as .card-overlay, but later in the DOM, so it sits
       above the gradient while staying below .artist-card-content (z-index 3). */
    z-index: 2;
    text-indent: -9999px;
    overflow: hidden;
}

/* The name is the real, focusable link. Its parent disables pointer events so
   clicks bubble, so re-enable them here. */
.artist-card-name a {
    pointer-events: auto;
}

/* Social icons must stay above the stretched link. */
.artist-card-links {
    position: relative;
    z-index: 3;
}

/* Homepage marquee: the overlay is z-index 10 and covers the whole card, so it
   has to stop swallowing clicks — its own children re-enable them. */
.artist-card-v2 .artist-card-overlay {
    pointer-events: none;
}

.artist-card-v2 .artist-name,
.artist-card-v2 .artist-name a,
.artist-card-v2 .artist-links,
.artist-card-v2 .artist-links a {
    pointer-events: auto;
}

.artist-card-v2 > .card-stretch-link {
    z-index: 5;
}

/* ---------------------------------------------------------------------
 * Producer cards
 *
 * The design stylesheet ties each card's colour gradient to a specific
 * producer's name (.producer-sarz, .producer-tempoe, …), which can't work
 * for a roster that is edited in WordPress. These are the same four
 * gradients, addressed by slot instead of by person.
 * ------------------------------------------------------------------ */

.producer-theme-1::before {
    background: linear-gradient(180deg, rgba(255, 196, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 90%);
}

.producer-theme-1:hover::before {
    background: linear-gradient(180deg, rgba(255, 196, 0, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.producer-theme-2::before {
    background: linear-gradient(180deg, rgba(162, 0, 255, 0.1) 0%, rgba(0, 0, 0, 0.85) 90%);
}

.producer-theme-2:hover::before {
    background: linear-gradient(180deg, rgba(162, 0, 255, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.producer-theme-3::before {
    background: linear-gradient(180deg, rgba(0, 255, 102, 0.1) 0%, rgba(0, 0, 0, 0.85) 90%);
}

.producer-theme-3:hover::before {
    background: linear-gradient(180deg, rgba(0, 255, 102, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.producer-theme-4::before {
    background: linear-gradient(180deg, rgba(255, 77, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 90%);
}

.producer-theme-4:hover::before {
    background: linear-gradient(180deg, rgba(255, 77, 0, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
}

/* Genre line under the producer's name — an addition, so it needs its own
   styling to sit correctly against the gradient. */
.producer-info .producer-genre {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------
 * Footer
 *
 * The events section sits in normal flow but is position:relative, so it
 * paints over the static footer where their boxes overlap. Giving the
 * footer its own stacking position puts it back on top.
 * ------------------------------------------------------------------ */

.footer {
    /* Defensive: the events section before it is position:relative, and a
       positioned earlier sibling paints over a static later one. */
    position: relative;
    z-index: 3;
    clear: both;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
}

.footer-nav-link {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav-link:hover,
.footer-nav-link:focus {
    color: #ffffff;
}

@media screen and (max-width: 600px) {
    .footer-nav {
        gap: 10px 18px;
    }

    .footer-nav-link {
        font-size: 12px;
        letter-spacing: 1px;
    }
}

/* ---------------------------------------------------------------------
 * Navigation placeholders
 *
 * TSA, Shop and Contact stay in the menu before their destinations exist, so
 * the navigation carries its final shape. They read as "not yet" rather than
 * looking broken, and become normal links the moment a URL is saved in
 * Global Site Settings.
 * ------------------------------------------------------------------ */

.nav-link--soon,
.mobile-link--soon,
.footer-nav-link--soon {
    opacity: 0.45;
    cursor: default;
}

.nav-link--soon:hover,
.mobile-link--soon:hover,
.footer-nav-link--soon:hover {
    opacity: 0.6;
}

/* ---------------------------------------------------------------------
 * Booking form
 *
 * The layout itself lives in style.css; these are the additions that only
 * exist because the form now posts to WordPress rather than simulating it.
 * ------------------------------------------------------------------ */

/* Honeypot. Hidden from people without display:none, which some bots skip. */
.booking-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.booking-error-note {
    margin: 12px 0 0;
    color: #ff6b6b;
    font-size: 14px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * Editor output
 *
 * Post and page bodies come from the block editor, so they can contain
 * markup the static design never had.
 * ------------------------------------------------------------------ */

.article-body img,
.page-body img {
    max-width: 100%;
    height: auto;
}

.article-body figure,
.page-body figure {
    margin: 32px 0;
}

.article-body figcaption,
.page-body figcaption {
    font-size: 14px;
    opacity: 0.7;
    margin-top: 8px;
}

.article-body blockquote,
.page-body blockquote {
    border-left: 2px solid currentColor;
    padding-left: 20px;
    margin: 32px 0;
    opacity: 0.9;
}

/* Empty grids and archives shouldn't collapse to nothing. */
.grid-empty {
    grid-column: 1 / -1;
    padding: 48px 0;
    opacity: 0.6;
}