/* ==========================================================================
   DJ Hire Manchester — page.css
   Shared styles for inner pages (service, location, pricing, contact).
   Loaded AFTER index.css so it can reuse those component classes
   (section, section-head, keyline, marker, theme-card, price-panel, steps,
   class-tile, faq, sticky-note, cta-band, postit-btn). Load order:
   base.css → nav.css → index.css → page.css → footer.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   FULL-HEIGHT INNER-PAGE HERO
   -------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    text-align: center;
    background:
        radial-gradient(120% 95% at 50% 30%, #f6f6f5 0%, rgba(246, 246, 245, 0) 62%),
        linear-gradient(180deg, #f0f0ef 0%, var(--ink) 45%, #e6e6e5 100%);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-9) 0;
    overflow: hidden;
}

.page-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: calc(var(--sp-9) + 24px); /* leave room for the bottom CTAs */
}

/* centred keyline accent above the H1 */
.page-hero .container::before {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    background: var(--red);
    margin: 0 0 var(--sp-5);
}

/* big faded Manchester-bee watermark, centred behind the headline */
.page-hero__bee {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%) rotate(-6deg);
    width: clamp(320px, 46vw, 680px);
    height: auto;
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* CTA buttons pinned to the bottom centre of the hero (standard heroes only) */
.page-hero .container > .page-hero__actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-8);
    justify-content: center;
    margin: 0;
}

/* each CTA drops in from the top, one after the other. Animates the `translate`
   property (not `transform`) so the buttons' rotate tilt and hover-lift stay intact */
.page-hero .container > .page-hero__actions .postit-btn {
    animation: hero-cta-drop 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.page-hero .container > .page-hero__actions .postit-btn:nth-child(1) { animation-delay: 0.25s; }
.page-hero .container > .page-hero__actions .postit-btn:nth-child(2) { animation-delay: 0.65s; }

@keyframes hero-cta-drop {
    0%   { opacity: 0; translate: 0 -72vh; }
    55%  { opacity: 1; translate: 0 12px; }
    78%  {              translate: 0 -6px; }
    100% { opacity: 1; translate: 0 0; }
}

/* legacy character watermark (kept for any page still using it) */
.page-hero__kanji {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(9rem, 22vw, 20rem);
    color: var(--black);
    opacity: 0.05;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--sp-5);
}

.breadcrumb a {
    color: var(--text-muted);
    font-weight: 600;
}

.breadcrumb a:hover {
    color: var(--red);
}

.breadcrumb i {
    font-size: 0.6em;
    color: var(--text-faint);
}

/* White breadcrumb bar directly under the hero */
.breadcrumb-bar {
    background: var(--white);
    border-bottom: 1px solid var(--line);
}

.breadcrumb-bar .breadcrumb {
    margin-bottom: 0;
    padding: var(--sp-4) 0;
}

.page-hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    max-width: 20ch;
    line-height: 1.02;
}

/* Hero intro on a tilted sheet of music/manuscript paper, hand-scribbled */
.page-hero__sub {
    position: relative;
    font-family: 'Caveat', 'Comic Sans MS', cursive;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2.05rem);
    line-height: 1.6;
    color: #2a3340;
    max-width: 600px;
    margin: var(--sp-6) auto var(--sp-6);
    padding: 2.2rem 2.2rem 1.7rem;
    background-color: #fffdf3;
    /* scattered music-note doodles + 5-line musical staves (5 lines 8px apart, 24px gap) */
    background-image:
        url("../images/music-beamed-black.svg"),
        url("../images/music-note-red.svg"),
        url("../images/music-note-cancelled.svg"),
        url("../images/music-beamed-red.svg"),
        url("../images/music-note-black.svg"),
        repeating-linear-gradient(
            to bottom,
            rgba(45, 60, 95, 0.30) 0, rgba(45, 60, 95, 0.30) 1px,
            transparent 1px, transparent 8px,
            rgba(45, 60, 95, 0.30) 8px, rgba(45, 60, 95, 0.30) 9px,
            transparent 9px, transparent 16px,
            rgba(45, 60, 95, 0.30) 16px, rgba(45, 60, 95, 0.30) 17px,
            transparent 17px, transparent 24px,
            rgba(45, 60, 95, 0.30) 24px, rgba(45, 60, 95, 0.30) 25px,
            transparent 25px, transparent 32px,
            rgba(45, 60, 95, 0.30) 32px, rgba(45, 60, 95, 0.30) 33px,
            transparent 33px, transparent 56px
        );
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-position:
        top 14px left 16px,
        top 20px right 30px,
        bottom 14px left 46px,
        bottom -4px right 24px,
        left 10px top 52%,
        0 1.3rem;
    background-size: 36px, 18px, 26px, 42px, 16px, auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 2px 5px 16px rgba(0, 0, 0, 0.10);
    transform: rotate(-0.7deg);
}

/* tape strip holding the paper */
.page-hero__sub::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 88px;
    height: 24px;
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(-50%) rotate(-2.5deg);
    pointer-events: none;
}


.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    align-items: center;
}

/* --------------------------------------------------------------------------
   RICH PROSE
   -------------------------------------------------------------------------- */
.prose {
    max-width: 740px;
}

.prose > * + * {
    margin-top: var(--sp-5);
}

.prose h2 {
    margin-top: var(--sp-7);
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    margin-top: var(--sp-6);
    font-size: var(--fs-lg);
}

.prose p {
    color: var(--text-muted);
}

.prose a {
    color: var(--black);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--mustard);
    text-underline-offset: 3px;
}

.prose a:hover {
    color: var(--red);
}

.prose ul {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.prose ul li {
    position: relative;
    padding-left: var(--sp-6);
    color: var(--text-muted);
}

.prose ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.25em;
    font-size: var(--fs-xs);
    color: var(--mustard-deep);
}

.prose strong {
    color: var(--black);
}

/* --------------------------------------------------------------------------
   POST-IT NOTES — blue-biro handwriting on yellow paper
   -------------------------------------------------------------------------- */
.postit-note-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-6) var(--sp-5);
    margin-top: var(--sp-5);
}

.postit-note {
    position: relative;
    background: var(--mustard-bright);
    color: #1b3fa0; /* blue biro */
    font-family: 'Caveat', 'Comic Sans MS', cursive;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.18;
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    min-height: 132px;
    display: flex;
    align-items: center;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.12);
    transition: transform var(--transition), box-shadow var(--transition);
}

.postit-note::after { /* tape strip */
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 58px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(-50%) rotate(-3deg);
    pointer-events: none;
}

.postit-note:nth-child(3n+1) { transform: rotate(-1.6deg); }
.postit-note:nth-child(3n+2) { transform: rotate(1.3deg); }
.postit-note:nth-child(3n+3) { transform: rotate(-0.5deg); }
.postit-note:nth-child(3n+2)::after { left: 45%; transform: translateX(-50%) rotate(2.5deg); }
.postit-note:nth-child(3n+3)::after { left: 55%; transform: translateX(-50%) rotate(1.5deg); }

.postit-note:hover {
    transform: rotate(0deg) translateY(-3px);
    box-shadow: 3px 6px 14px rgba(0, 0, 0, 0.16);
    z-index: 2;
}

/* Single pink post-it callout */
.postit-callout {
    position: relative;
    display: block;
    background: #ffc1d4; /* pink paper */
    color: #1b1b1b;      /* black pen */
    font-family: 'Caveat', 'Comic Sans MS', cursive;
    font-weight: 600;
    font-size: 1.55rem;
    line-height: 1.22;
    padding: var(--sp-7) var(--sp-6) var(--sp-6);
    margin-top: var(--sp-6);
    max-width: 580px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.12);
    transform: rotate(-1.2deg);
    transition: transform var(--transition), box-shadow var(--transition);
}

.postit-callout::after { /* tape strip */
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 70px;
    height: 22px;
    background: rgba(255, 255, 255, 0.55);
    transform: translateX(-50%) rotate(2deg);
    pointer-events: none;
}

.postit-callout a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.postit-callout:hover {
    transform: rotate(0deg) translateY(-3px);
    box-shadow: 3px 6px 16px rgba(0, 0, 0, 0.16);
}

/* --------------------------------------------------------------------------
   CONTENT + ASIDE LAYOUT
   -------------------------------------------------------------------------- */
.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-items: start;
}

@media (min-width: 900px) {
    .content-grid--aside {
        grid-template-columns: 1.55fr 1fr;
    }
}

/* Sticky info / "at a glance" card */
.info-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: var(--sp-6);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.info-card h3 {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-5);
}

.info-card__price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-2xl);
    color: var(--black);
    line-height: 1;
    margin-bottom: var(--sp-2);
}

.info-card__price small {
    font-size: 0.45em;
    font-weight: 400;
    color: var(--text-muted);
}

.info-card ul {
    display: grid;
    gap: var(--sp-3);
    margin: var(--sp-5) 0;
}

.info-card ul li {
    position: relative;
    padding-left: var(--sp-6);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.info-card ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.2em;
    font-size: var(--fs-xs);
    color: var(--mustard-deep);
}

.info-card .postit-btn {
    margin-top: var(--sp-4);
    width: 100%;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   AREA / SERVICE LINK GRIDS
   -------------------------------------------------------------------------- */
.area-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}

.area-links a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--black);
    transition: background var(--transition), transform var(--transition);
}

.area-links a::before {
    content: "\f3c5";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--red);
    font-size: var(--fs-xs);
}

.area-links a:hover {
    background: var(--surface-2);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   ENQUIRY FORM
   -------------------------------------------------------------------------- */
.enquiry {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: clamp(var(--sp-5), 4vw, var(--sp-7));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
}

@media (max-width: 560px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.field label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--black);
}

.field .req {
    color: var(--red);
}

.field input,
.field select,
.field textarea {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--surface-3);
    background: var(--ink);
    border-radius: 0;
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--mustard);
    box-shadow: 0 0 0 2px var(--line-accent);
}

.field textarea {
    min-height: 130px;
    resize: vertical;
}

/* Honeypot — hidden from humans */
.field--hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-submit {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--black);
    color: var(--white);
    border: 2px solid var(--black);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-sm);
    padding: 0.95rem 2.2rem;
    transition: background var(--transition), color var(--transition);
}

.form-submit:hover {
    background: transparent;
    color: var(--black);
}

.form-note {
    margin-top: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   CONTACT DETAILS LIST
   -------------------------------------------------------------------------- */
.contact-details {
    display: grid;
    gap: var(--sp-5);
}

.contact-details li {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
}

.contact-details i {
    color: var(--red);
    margin-top: 0.25em;
    width: 1.3em;
    text-align: center;
    flex-shrink: 0;
}

.contact-details strong {
    display: block;
    font-family: var(--font-display);
    color: var(--black);
}

.contact-details a {
    color: var(--text-muted);
}

.contact-details a:hover {
    color: var(--red);
}

/* --------------------------------------------------------------------------
   ON-PAGE QUOTE FORM (anchor target)
   -------------------------------------------------------------------------- */
#quote {
    scroll-margin-top: 90px; /* clears the sticky header when scrolled to */
}

@keyframes quote-flash {
    0%   { box-shadow: 0 0 0 0 var(--line-accent); }
    25%  { box-shadow: 0 0 0 5px var(--line-accent); }
    100% { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); }
}

#quote:target {
    animation: quote-flash 1.4s ease;
}

/* Compact form sitting in the aside column, under the "At a glance" card */
.quote-aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.enquiry--compact {
    padding: var(--sp-6) clamp(var(--sp-5), 3vw, var(--sp-6));
}

.enquiry__title {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-5);
}

.enquiry--compact .form-row {
    grid-template-columns: 1fr;   /* stack fields in the narrow column */
    gap: 0;
}

.enquiry--compact .form-submit {
    width: 100%;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   ALT SECTION BACKGROUND HELPER
   -------------------------------------------------------------------------- */
.section--alt {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .page-hero {
        min-height: 90vh;
        padding: var(--sp-8) 0;
    }
    .page-hero__kanji {
        display: none;
    }
    .page-hero__bee {
        width: 86%;
        opacity: 0.05;
    }
}

/* Phone hero: tighten spacing and bring the bottom CTAs in from the edges */
@media (max-width: 600px) {
    .page-hero {
        min-height: 88vh;
    }
    .page-hero .container {
        padding-bottom: calc(var(--sp-9) + 8px);
    }
    .page-hero .container::before {
        margin-bottom: var(--sp-4);
    }
    .page-hero .container > .page-hero__actions {
        left: var(--sp-5);
        right: var(--sp-5);
        bottom: var(--sp-7);
    }
}