/**
 * michaelamckenzie.css — Site-level override layer (§20a)
 *
 * Loaded AFTER the IBIS framework files (app.css, nav.css) so site-specific
 * rules win the cascade without modifying framework files.
 *
 * Layer order in templates/views/public.php:
 *   css/ibis/app.css → css/ibis/nav.css → css/michaelamckenzie.css
 *   → module css (backgrounds.css, articles.css, …) → page-level css
 */

/* Prevent horizontal scroll from intentionally off-canvas decorative
   elements (e.g. footer dove) and fixed-width components on small screens.
   clip (not hidden) keeps position:sticky/fixed working normally. */
html,
body {
    overflow-x: clip;
}

/* -------------------------------------------------
   NOTICE
-------------------------------------------------- */
/* Article/content links on light backgrounds: darker steel blue for
   >=4.5:1 contrast (plain `a` uses --brand-dim #38678f which is only 3.34:1) */
.page-content a {
    color: #26425c;
}
.page-content a:hover {
    color: #1d3550;
}

/* Links rendered inside navy heading bands stay light for >=4.5:1 on navy */
.page-content h1 a,
.page-content h2 a,
.page-content h3 a,
.page-content h4 a,
.page-content h5 a,
.page-content h6 a {
    color: #8fc4e8;
}

.notice a {
    /* Light blue for >=4.5:1 contrast on the navy heading band (#193b61) */
    color: #8fc4e8;
}

/* -------------------------------------------------
   AUDIO CARDS
-------------------------------------------------- */
.audio-card h2,
.audio-card h4 {
    background-color: var(--heading-bg-color);
    margin-top: 0;
}

.audio-card p a:not(.button) {
    /* Enlarge touch target for the "View lyrics" link (>=24px) */
    display: inline-block;
    padding: 5px 4px;
}

.audio-card p a.button {
    /* Keep .button's own padding so button text stays centred */
    display: inline-block;
    padding: 0 1.5em;
}

/* Media page: centre the action buttons inside their cards */
.audio-card p.card-action {
    text-align: center;
    margin-top: auto;
}

/* Lyrics page: instrumental tracks have no picture, so the track nav
   needs a full border with rounded corners on all sides */
.track-nav.no-picture {
    border-top: 2px solid var(--primary-dark-faded);
    border-radius: 0.5em;
}

/* Drop cap: centre the first letter vertically with the first line.
   em here is the first-letter's own font-size (5x the paragraph), so
   divide by 5 to express the shift in paragraph em units.
   Colour is set here (not elements.css) so it applies consistently on
   every page regardless of whether the paragraph is the first child. */
.article-body > p:first-of-type:not(.no-dropcap)::first-letter {
    margin-top: calc(-1.3em / 5);
    color: var(--heading-bg-color);
}

.audio-card h2,
.audio-card h3,
.audio-card h4 {
    margin-top: 0;
}

/* -------------------------------------------------
   POLICIES
-------------------------------------------------- */
.policy a {
    /* Darker steel blue for >=4.5:1 contrast on the light policy background */
    color: #26425c;
}

/* Policy pages (privacy, cookie) — centered panel matching the contact form */
.tt-policy-shell {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.tt-policy-panel .page-content {
    text-align: left;
}

/* -------------------------------------------------
   FOOTER
-------------------------------------------------- */
.copy-r a {
    /* Enlarge touch target for footer text links (>=24px) */
    display: inline-block;
    padding: 5px 4px;
}

/* Mobile: stop the fixed-width copyright block (.copy-r 400px) from
   overflowing the viewport — wrap the footer row and let it take full width. */
@media (max-width: 48rem) {
    .footer .comply {
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer .copy-r {
        width: 100%;
        max-width: 100%;
    }
}

/* -------------------------------------------------
   MOBILE — edge-to-edge content (§20a responsive)
-------------------------------------------------- */
@media (max-width: 46rem) {
    /* Frontpage (scoped under .fpa, the homepage-only wrapper) */
    .fpa {
        padding: 0;
    }
    .fpa .container {
        padding: 0;
    }
    .fpa .intro {
        padding: 0.5rem;
    }
    .fpa .page-content p {
        padding: 0.25rem 0.5rem;
        margin: 0.75rem auto;
    }
    .fpa .soundcloud {
        padding: 0.5rem;
    }
    .fpa .notice {
        padding: 0.75rem !important; /* override .p-2 (2rem) on mobile */
    }

    /* Other content pages (bio, media, music, podcasts, albums, policies) — edge to edge */
    /* main carries 1rem padding from elements.css — remove it on mobile */
    main {
        padding: 0;
    }
    .container-wide,
    .container-fluid,
    .container {
        padding: 0;
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }
    .page-content p {
        padding: 0.25rem 0.5rem;
        margin: 0 0 0.75rem 0;
    }

    /* Lyrics page: fit lyrics box and stack the track nav (prev/next on row 1, audio full-width row 2) */
    .lyrics-container {
        grid-template-columns: minmax(0, 1fr);
    }
    .lyrics {
        padding: .25em;
    }
    .track-nav {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "prev next"
            "audio audio";
    }
    .track-nav > a.prev {
        grid-area: prev;
    }
    .track-nav > a.next {
        grid-area: next;
    }
    .track-nav .audio-slot {
        grid-area: audio;
        justify-content: center;
        padding: 0.5rem;
        border-top: 2px solid var(--primary-dark-faded);
        min-width: 0;
    }
    .track-nav .audio-slot .audio-ui {
        width: 100%;
    }

    /* Media/Music pages: let cards shrink to fit the grid, shrink audio sliders on narrow cards */
    .card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .audio-ui .ap-seek,
    .audio-ui .ap-vol {
        min-width: 1rem;
    }
    .media-intro .article-body {
        padding: 0.5rem;
    }
    .txt-background {
        padding: 0.5rem;
    }
    .audio-card h2 {
        padding: 10px 12px;
    }
    .tabcontent .audio {
        padding: 0.5rem;
    }

    /* Podcasts: let tab buttons wrap instead of clipping (fixed height + overflow hidden clips wrapped button at 320px) */
    .tab {
        height: auto;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
    }
    .tab button {
        float: none;
        flex: 1 1 auto;
    }
}