/* Previous styles remain the same until social links */

/* Enhanced Footer Components */
.footer-section h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer-section p {
    color: #999;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    color: #999;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: #fff;
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.newsletter-form input {
    flex: 1;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #2a2a2a;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
}

.newsletter-form input:focus {
    outline: none;
    border-color: #ff0000;
}

.newsletter-button {
    padding: 0.8rem 1.2rem;
    background: #ff0000;
    border: none;
    color: white;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.2s ease;
}

.newsletter-button:hover {
    background: #cc0000;
}

.social-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}

.social-links a {
    color: #999;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    color: #fff;
}

.footer-bottom {
    color: #666;
    font-size: 0.9rem;
}

.footer-bottom-links {
    display: flex;
    gap: 2rem;
}

.footer-bottom-links a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: #ff0000;
}

/* Site-wide flash messages (rendered by base.html for every view that calls
   django.contrib.messages). Colour-coded by tag, with error/warning carrying
   the accent so a failure never reads as a success. */
.site-messages {
    max-width: 1200px;
    margin: 1.25rem auto 0;
    /* The header is fixed and 89px tall while layout.css reserves 60px on
       <main>, so the first thing inside it renders behind the nav -- which is
       what a flash message is. Every other page type pads its own first
       element past it (see .dp-crumbs); this block is the one that had
       nothing, so an error arrived greyed out under the menu. */
    padding: 2.25rem 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-message {
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #1DB954;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    color: #ddd;
    font-size: 0.9rem;
    line-height: 1.5;
}

.site-message--error,
.site-message--warning {
    border-left-color: #ff0000;
    background: rgba(255, 0, 0, 0.08);
}

.site-message--info,
.site-message--debug {
    border-left-color: #666;
}

@media (max-width: 768px) {
    .site-messages {
        padding: 0 1rem;
    }
}

/* Rest of the previous styles remain the same */

/* ---------------------------------------------------------------------------
   H1 keyword qualifiers
   ---------------------------------------------------------------------------
   The city, venue and artist heroes used the bare entity name as their <h1>
   ("Manchester", "O2 Ritz Manchester", "Napalm Death"), so the site's four
   largest page types had a heading with none of the words anyone searches.
   These two classes let the H1 carry the full phrase while the entity name
   keeps the visual weight the hero design was built around: the qualifier is
   sized in `em`, so it scales with whatever the parent title's font-size is at
   that breakpoint and never needs its own media queries.
   -------------------------------------------------------------------------*/
.hero-kicker,
.hero-qualifier {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.26em;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ff2b2b;
    text-shadow: none;
    line-height: 1.4;
}

/* Kicker sits above the name, qualifier below it. */
.hero-kicker  { margin-bottom: 0.35em; }
.hero-qualifier { margin-top: 0.25em; color: #ff5252; }

/* Text for screen readers and crawlers that must not alter the visual design.
   Used on the homepage <h1>, where the logotype has to stay the only thing
   drawn but the heading still needs to say what the page is about. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------------------------------------------------------------------------
 * Free tools cross-link strip
 *
 * Rendered by the {% tools_for %} and {% more_tools %} template tags. Lives
 * here rather than in tools.css because event, venue, city and artist pages
 * carry the strip too and do not load the tools stylesheet.
 * ------------------------------------------------------------------------ */

/* ---- "More free tools" cross-link strip ------------------------------- */

.tl-more { border-top: 1px solid #222; margin-top: 3.5rem; padding-top: 2rem; }

/* The {% tools_for %} variant, which is dropped onto event, venue, city and
   artist pages at the foot of the content block. All four of those close their
   layout wrapper before the tag, so there is nothing left to inherit a width
   from and the strip ran the full bleed of the window while the page above it
   sat in a centred column.
   {% more_tools %} deliberately does NOT get this: it sits inside `.tl-page`,
   which has already applied a max-width and a gutter, and centring it again
   would double the inset.
   The two custom properties are how each page matches the strip to its own
   column -- they differ (1280/1.5rem, 1180/2rem, 1200/2rem) and a single
   hard-coded width would be visibly wrong on three pages out of four. The
   fallbacks are what a page that sets neither gets. */
.tl-more--standalone {
    max-width: var(--tl-strip-max, 1240px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tl-strip-gut, 1.5rem);
    padding-right: var(--tl-strip-gut, 1.5rem);
    padding-bottom: 3rem;
}
.tl-more h2 {
    color: #fff;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 1.1rem;
}
.tl-more-list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.tl-more-list a {
    border: 1px solid #2c2c2c;
    border-radius: 4px;
    padding: .5rem .9rem;
    color: #bbb;
    text-decoration: none;
    font-size: .87rem;
    transition: border-color .12s, color .12s;
}
.tl-more-list a:hover { border-color: #ff0000; color: #fff; }
.tl-more-all { display: inline-block; margin-top: 1rem; color: #ff4d4d; font-size: .85rem; }

/* ---- Phones and touch screens, site-wide --------------------------------
 *
 * components.css is on every page that extends base.html, so these two
 * blocks are the one place for rules every page should get on a phone.
 */

/* iOS Safari zooms the page into any field whose text is under 16px when it
   is tapped, and leaves it zoomed. Dozens of fields were under it: the gig
   alert email, the events search, the city pickers, the press kit builder's
   dropdowns, the whole of the promoter's add-a-gig form. !important because
   each of those has its own rule in its own stylesheet, and a field added
   next month will too. max() with 1em so a field inside larger text keeps
   up with it. Not checkboxes, sliders or buttons: they take no typing.
   :where() keeps the selector as weak as a bare `input`, so a field that is
   meant to be bigger than 16px can say so with an !important of its own
   (epk_rider.css does, for the band name). */
@media (max-width: 900px) {
    input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"])),
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }
}

/* Small text links (the footer's policy row, breadcrumbs, "All gigs" at the
   end of a heading) were 15-22px tall: under the 24px a fingertip needs.
   Padding makes the link taller and the matching negative margin gives the
   space back, so nothing on the page moves. Touch screens only. */
@media (pointer: coarse) {
    body .footer-legal a {
        padding: 0.3rem 0;
    }

    body .footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        min-height: 32px;
    }

    body .dp-crumbs a,
    body .tl-crumbs a,
    body .ev-crumbs a,
    body .fest-crumbs a,
    body .ld-crumbs a,
    body .dp-more,
    body .dp-eyebrow a,
    body .tl-feature-cta,
    body .home-section-more,
    body .hmag-h-link,
    body .mc-cards-more,
    body .mag-festivals-all {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
        margin-top: -0.45rem;
        margin-bottom: -0.45rem;
    }

    /* These three carry a top margin of their own and were 22px tall: two
       more pixels, rather than a margin that would undo theirs. */
    body .tl-more-all,
    body .music-more,
    body .fest-more {
        min-height: 24px;
    }
}