/* =============================================================
   MEMPHIS REVIVAL DESIGN SYSTEM — Little Legends Melbourne
   Shared across index.html + all character, suburb, blog pages
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
    /* Type */
    --font-display: 'Bricolage Grotesque', 'Source Sans 3', system-ui, sans-serif;
    --font-body:    'Source Sans 3', system-ui, sans-serif;

    /* Warm ink palette — deep navy instead of pure black */
    --ink:       oklch(0.22 0.04 265);
    --ink-soft:  oklch(0.34 0.035 265);
    --paper:     oklch(0.97 0.022 85);
    --paper-2:   oklch(0.93 0.035 85);
    --paper-3:   #ffffff;

    /* Memphis hot accents */
    --coral:     oklch(0.72 0.21 28);
    --coral-ink: oklch(0.55 0.22 28);
    --sky:       oklch(0.72 0.16 235);
    --mustard:   oklch(0.86 0.17 88);
    --mint:      oklch(0.8 0.14 165);
    --bubblegum: oklch(0.78 0.18 5);
    --grape:     oklch(0.62 0.2 305);

    /* Motion */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
    --dur-fast: 150ms;
    --dur-med:  260ms;
    --dur-slow: 500ms;

    /* Sticker system */
    --sticker-border:    3px solid var(--ink);
    --sticker-border-fat: 4px solid var(--ink);
    --sticker-shadow:    6px 6px 0 var(--ink);
    --sticker-shadow-lg: 10px 10px 0 var(--ink);
}

html { scroll-behavior: smooth; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-feature-settings: "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: clip;
}

/* =============================================================
   VISIBLE MEMPHIS STICKERS — scattered decorative shapes
   Fixed to the page via body::before and body::after, plus
   section-level .memphis-confetti via background-image.
   ============================================================= */

/* Body-level confetti — big shapes floating at page corners */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        /* top-left sunburst */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23ffd24c' stroke-width='8' stroke-linecap='round'><circle cx='60' cy='60' r='22' fill='%23ffd24c' stroke='%2320243a' stroke-width='5'/><line x1='60' y1='8' x2='60' y2='26'/><line x1='60' y1='94' x2='60' y2='112'/><line x1='8' y1='60' x2='26' y2='60'/><line x1='94' y1='60' x2='112' y2='60'/><line x1='22' y1='22' x2='34' y2='34'/><line x1='86' y1='86' x2='98' y2='98'/><line x1='22' y1='98' x2='34' y2='86'/><line x1='86' y1='34' x2='98' y2='22'/></g></svg>"),
        /* top-right squiggle */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='60' viewBox='0 0 160 60'><path d='M5 30 Q 25 5, 45 30 T 85 30 T 125 30 T 165 30' fill='none' stroke='%23ff4fa3' stroke-width='7' stroke-linecap='round'/></svg>"),
        /* bottom-left zigzag */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='80' viewBox='0 0 140 80'><path d='M5 40 L 25 10 L 45 40 L 65 10 L 85 40 L 105 10 L 125 40' fill='none' stroke='%236fb6f7' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
        /* bottom-right dots cluster */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%2320243a'><circle cx='20' cy='20' r='7'/><circle cx='60' cy='15' r='5'/><circle cx='100' cy='30' r='8'/><circle cx='30' cy='55' r='6'/><circle cx='75' cy='50' r='9'/><circle cx='105' cy='75' r='5'/><circle cx='25' cy='95' r='7'/><circle cx='65' cy='95' r='6'/><circle cx='95' cy='105' r='7'/></g></svg>");
    background-repeat: no-repeat;
    background-position:
        calc(100% - 85vw) 7rem,
        calc(100% - 2rem) 7rem,
        2rem calc(100% - 6rem),
        calc(100% - 2rem) calc(100% - 6rem);
    background-size:
        120px 120px,
        160px 60px,
        140px 80px,
        120px 120px;
    opacity: 0.85;
}
@media (max-width: 768px) {
    body::before {
        background-position:
            -3rem 5rem,
            calc(100% + 3rem) 5rem,
            -2rem calc(100% - 4rem),
            calc(100% - 1rem) calc(100% - 4rem);
        background-size: 90px 90px, 130px 50px, 110px 65px, 90px 90px;
        opacity: 0.7;
    }
}

/* Lift interactive content above body-level decorations */
nav, main, section, footer, form, header, .sticky-cta {
    position: relative;
    z-index: 1;
}

/* =============================================================
   TYPOGRAPHY
   ============================================================= */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
}
h1 { font-weight: 900; letter-spacing: -0.035em; }
p, li, label, input, textarea, select, button, a { font-family: var(--font-body); }

/* Tint tailwind grays — no dead grays */
.text-gray-900, .text-gray-800, .text-gray-700 { color: var(--ink) !important; }
.text-gray-600 { color: var(--ink-soft) !important; }
.text-gray-500 { color: oklch(0.5 0.03 265) !important; }
.text-gray-400 { color: oklch(0.6 0.03 265) !important; }

/* =============================================================
   SURFACES — override Tailwind pastel/util backgrounds
   ============================================================= */
.bg-warm-cream { background: var(--paper) !important; }
.bg-gray-50    { background: var(--paper-2) !important; }
.bg-pink-50    { background: color-mix(in oklch, var(--bubblegum) 22%, var(--paper-3)) !important; }
.bg-blue-50    { background: color-mix(in oklch, var(--sky) 22%, var(--paper-3)) !important; }
.bg-yellow-50  { background: color-mix(in oklch, var(--mustard) 30%, var(--paper-3)) !important; }
.bg-green-50   { background: color-mix(in oklch, var(--mint) 25%, var(--paper-3)) !important; }
.bg-red-50     { background: color-mix(in oklch, var(--coral) 20%, var(--paper-3)) !important; }
.bg-purple-50  { background: color-mix(in oklch, var(--grape) 20%, var(--paper-3)) !important; }
.bg-amber-50   { background: color-mix(in oklch, var(--mustard) 25%, var(--paper-3)) !important; }

/* Orange (character pages use bg-orange-500 for primary CTA) → coral */
.bg-orange-500 { background: var(--coral) !important; }
.bg-orange-600 { background: var(--coral-ink) !important; }
.hover\:bg-orange-600:hover { background: var(--coral-ink) !important; }
.text-orange-500 { color: var(--coral) !important; }

/* Index.html token classes */
.bg-primary-500, .bg-primary-600 { background: var(--coral) !important; }
.hover\:bg-primary-600:hover { background: var(--coral-ink) !important; }
.text-primary-600, .text-primary-700, .text-primary-800 { color: var(--coral-ink) !important; }
.bg-secondary-500, .bg-secondary-600 { background: var(--sky) !important; }
.bg-accent-500, .bg-accent-600 { background: var(--bubblegum) !important; }
.text-accent-600 { color: var(--bubblegum) !important; }

/* =============================================================
   HERO — radial color blooms + dot overlay
   ============================================================= */
.hero-bg {
    background:
        radial-gradient(circle at 12% 18%, var(--mustard) 0%, transparent 26%),
        radial-gradient(circle at 88% 28%, var(--bubblegum) 0%, transparent 22%),
        radial-gradient(circle at 70% 85%, var(--sky) 0%, transparent 30%),
        var(--paper) !important;
    position: relative;
}
.hero-bg::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, var(--ink) 1.5px, transparent 2px);
    background-size: 32px 32px;
    opacity: 0.1;
    pointer-events: none;
}
.hero-bg > * { position: relative; z-index: 1; }

section.hero-bg h1 { font-size: clamp(2.25rem, 5.5vw + 0.75rem, 4.75rem); }

/* =============================================================
   STICKER CARDS — chunky border + hard offset shadow + rotation
   ============================================================= */
.character-card {
    background: var(--paper-3);
    border: var(--sticker-border-fat);
    border-radius: 28px;
    box-shadow: var(--sticker-shadow-lg);
    transition: transform var(--dur-med) var(--ease-spring),
                box-shadow var(--dur-med) var(--ease-out);
}
.character-card:nth-child(4n+1) { transform: rotate(-2.5deg); }
.character-card:nth-child(4n+2) { transform: rotate(1.8deg); }
.character-card:nth-child(4n+3) { transform: rotate(-1.2deg); }
.character-card:nth-child(4n+4) { transform: rotate(2.8deg); }
.character-card:hover,
.character-card:focus-visible {
    transform: rotate(0deg) translateY(-6px) scale(1.03);
    box-shadow: 14px 14px 0 var(--ink);
}

.card-hover {
    transition: transform var(--dur-med) var(--ease-spring),
                box-shadow var(--dur-med) var(--ease-out);
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--sticker-shadow-lg);
}

/* Pricing, testimonial, FAQ, and "What's Included" cards */
#pricing .bg-white,
.testimonial-bg .bg-white,
section .bg-white.rounded-2xl,
section .bg-white.rounded-3xl,
section .bg-white.rounded-xl.shadow-sm {
    border: var(--sticker-border-fat);
    box-shadow: var(--sticker-shadow);
}
#pricing .bg-white.border-4 {
    box-shadow: var(--sticker-shadow-lg);
    transform: scale(1.05) rotate(-1.5deg);
}

/* =============================================================
   SECTION BACKGROUNDS
   ============================================================= */
.testimonial-bg {
    background: var(--paper-2);
    position: relative;
}
.testimonial-bg::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(45deg, transparent 47%, var(--ink) 47% 53%, transparent 53%),
        linear-gradient(-45deg, transparent 47%, var(--ink) 47% 53%, transparent 53%);
    background-size: 42px 42px;
    opacity: 0.06;
    pointer-events: none;
}
.testimonial-bg > * { position: relative; z-index: 1; }

/* =============================================================
   BUTTONS — chunky outlined CTAs
   ============================================================= */
a.bg-primary-500, a.bg-primary-600,
a.bg-orange-500, a.bg-orange-600,
button[type="submit"] {
    border: var(--sticker-border);
    box-shadow: var(--sticker-shadow);
    transition: transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur-fast) var(--ease-out) !important;
    color: var(--paper-3) !important;
}
a.bg-primary-500:hover, a.bg-primary-600:hover,
a.bg-orange-500:hover, a.bg-orange-600:hover,
button[type="submit"]:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 9px 9px 0 var(--ink);
}
a.bg-primary-500:active, a.bg-primary-600:active,
a.bg-orange-500:active, a.bg-orange-600:active,
button[type="submit"]:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0 var(--ink);
}

/* Green "Call" CTAs — trust green sticker treatment */
a.bg-green-500, a.bg-green-600 {
    background: var(--mint) !important;
    color: var(--ink) !important;
    border: var(--sticker-border);
    box-shadow: var(--sticker-shadow);
    transition: transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur-fast) var(--ease-out) !important;
}
a.bg-green-500:hover, a.bg-green-600:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 9px 9px 0 var(--ink);
}

/* Secondary outline/white CTAs */
a.bg-white.text-primary-600 {
    border: var(--sticker-border) !important;
    box-shadow: var(--sticker-shadow);
}

/* =============================================================
   FORMS
   ============================================================= */
input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"],
textarea, select {
    border: var(--sticker-border) !important;
    border-radius: 12px !important;
    background: var(--paper-3);
    color: var(--ink);
    font-family: var(--font-body);
    transition: box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
input:focus, textarea:focus, select:focus {
    box-shadow: 4px 4px 0 var(--coral) !important;
    outline: none !important;
    transform: translate(-1px, -1px);
}

/* Focus states */
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 3px;
    border-radius: 6px;
}

/* =============================================================
   STICKY MOBILE CTA
   ============================================================= */
.sticky-cta { animation: none !important; }
.sticky-cta a {
    border: var(--sticker-border);
    box-shadow: var(--sticker-shadow);
}

/* =============================================================
   GALLERY TILES
   ============================================================= */
section.bg-gradient-to-br .aspect-square {
    border: var(--sticker-border-fat);
    box-shadow: var(--sticker-shadow);
    background: var(--paper-3);
    transition: transform var(--dur-med) var(--ease-spring);
    overflow: hidden;
}
section.bg-gradient-to-br .aspect-square:nth-child(6n+1) { transform: rotate(-2.5deg); }
section.bg-gradient-to-br .aspect-square:nth-child(6n+2) { transform: rotate(1.5deg); }
section.bg-gradient-to-br .aspect-square:nth-child(6n+3) { transform: rotate(-0.8deg); }
section.bg-gradient-to-br .aspect-square:nth-child(6n+4) { transform: rotate(2.2deg); }
section.bg-gradient-to-br .aspect-square:nth-child(6n+5) { transform: rotate(-1.8deg); }
section.bg-gradient-to-br .aspect-square:nth-child(6n+6) { transform: rotate(1deg); }
section.bg-gradient-to-br .aspect-square:hover {
    transform: rotate(0) scale(1.05);
    z-index: 2;
}
.gallery-slide { transition: transform var(--dur-slow) var(--ease-out); }

/* =============================================================
   SUBURB STICKER BUTTONS
   ============================================================= */
a[href^="/suburbs/"] {
    border: var(--sticker-border);
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur-fast) var(--ease-out);
}
a[href^="/suburbs/"]:nth-child(3n+1) { transform: rotate(-1deg); }
a[href^="/suburbs/"]:nth-child(3n+2) { transform: rotate(0.8deg); }
a[href^="/suburbs/"]:hover {
    transform: translate(-2px, -2px) rotate(0);
    box-shadow: 6px 6px 0 var(--ink);
}

/* =============================================================
   NAVIGATION
   ============================================================= */
nav.fixed, nav.sticky {
    border-bottom: var(--sticker-border);
    background: var(--paper-3) !important;
    backdrop-filter: none !important;
}
nav a.bg-primary-500, nav a.bg-orange-500,
nav a.bg-green-500 {
    border: 2.5px solid var(--ink) !important;
    box-shadow: 3px 3px 0 var(--ink);
}

/* =============================================================
   SCROLL REVEAL
   ============================================================= */
@keyframes memphis-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
section > .max-w-6xl,
section > .max-w-5xl,
section > .max-w-4xl,
section > .max-w-3xl,
section > .max-w-2xl {
    animation: memphis-rise var(--dur-slow) var(--ease-out) both;
}

/* =============================================================
   CHARACTER HERO IMAGE CIRCLES — sticker treatment
   ============================================================= */
.rounded-full.bg-pink-50,
.rounded-full.bg-blue-50,
.rounded-full.bg-yellow-50,
.rounded-full.bg-green-50,
.rounded-full.bg-red-50,
.rounded-full.bg-purple-50,
.rounded-full.bg-amber-50,
section .w-64.h-64.rounded-full,
section .w-80.h-80.rounded-full {
    border: var(--sticker-border-fat);
    box-shadow: var(--sticker-shadow-lg);
}
/* Hero character on rich character pages — give slight tilt */
section.hero-bg .rounded-full,
section .w-64.h-64.rounded-full {
    transform: rotate(-2deg);
    transition: transform var(--dur-med) var(--ease-spring);
}
section.hero-bg .rounded-full:hover,
section .w-64.h-64.rounded-full:hover {
    transform: rotate(0);
}

/* =============================================================
   BLOG ARTICLES — style the .prose content + article header
   ============================================================= */
article > header {
    position: relative;
    padding: 3rem 2rem;
    margin-bottom: 3rem;
    border: var(--sticker-border-fat);
    border-radius: 24px;
    box-shadow: var(--sticker-shadow-lg);
    background:
        radial-gradient(circle at 12% 18%, var(--mustard) 0%, transparent 40%),
        radial-gradient(circle at 88% 28%, var(--bubblegum) 0%, transparent 35%),
        radial-gradient(circle at 70% 85%, var(--sky) 0%, transparent 45%),
        var(--paper);
}
article > header::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, var(--ink) 1.5px, transparent 2px);
    background-size: 28px 28px;
    opacity: 0.09;
    pointer-events: none;
    border-radius: 20px;
}
article > header > * { position: relative; z-index: 1; }

article > header h1 {
    font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
    margin-bottom: 1.5rem;
}
article > header p {
    font-size: clamp(1.125rem, 1.2vw + 0.9rem, 1.35rem);
    max-width: 60ch;
}

/* Prose body content */
.prose {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink);
}
.prose h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.625rem, 1.5vw + 1.125rem, 2.125rem) !important;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--ink) !important;
    margin-top: 2.75rem !important;
    margin-bottom: 1rem !important;
    padding-left: 1.1rem;
    border-left: 6px solid var(--coral);
}
.prose h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem !important;
    color: var(--ink) !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.75rem !important;
}
.prose p, .prose li {
    color: var(--ink) !important;
    font-family: var(--font-body);
}
.prose strong {
    color: var(--ink);
    font-weight: 700;
    background: linear-gradient(180deg, transparent 62%, var(--mustard) 62% 95%, transparent 95%);
    padding: 0 2px;
}
.prose a {
    color: var(--coral-ink) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--coral);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.prose a:hover {
    background: var(--mustard);
    text-decoration-color: var(--ink);
}
.prose ul {
    list-style: none;
    padding-left: 0;
}
.prose ul > li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.6rem;
}
.prose ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 12px;
    height: 12px;
    background: var(--coral);
    border: 2px solid var(--ink);
    border-radius: 3px;
    transform: rotate(-8deg);
}

/* Blog callout boxes — Memphis sticker treatment */
.prose .bg-pink-50.border-l-4,
.prose .bg-blue-50.border,
article .bg-pink-50.border-l-4,
article .bg-blue-50.border {
    border: var(--sticker-border-fat) !important;
    border-radius: 16px !important;
    box-shadow: var(--sticker-shadow);
    padding: 1.5rem 1.75rem !important;
    position: relative;
}
.prose .bg-pink-50.border-l-4 p,
article .bg-pink-50.border-l-4 p {
    color: var(--ink) !important;
    font-weight: 500 !important;
}
.prose .bg-blue-50.border h3,
article .bg-blue-50.border h3 {
    color: var(--ink) !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
}
.prose .bg-blue-50.border p,
article .bg-blue-50.border p {
    color: var(--ink) !important;
}

/* =============================================================
   FOOTERS — Memphis accent bar at top
   ============================================================= */
footer {
    position: relative;
    border-top: 4px solid var(--ink);
}
footer::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0; right: 0;
    height: 14px;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='14' viewBox='0 0 60 14' preserveAspectRatio='none'><path d='M0 10 L 10 2 L 20 10 L 30 2 L 40 10 L 50 2 L 60 10' fill='none' stroke='%2320243a' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>");
    background-repeat: repeat-x;
    background-size: 60px 14px;
    background-position: center bottom;
    pointer-events: none;
}

/* Compact character page single-line footer — give it more presence */
footer.bg-gray-900.text-center.text-sm {
    background: var(--ink) !important;
    color: color-mix(in oklch, var(--paper) 70%, transparent) !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}
footer.bg-gray-900.text-center.text-sm a.text-white {
    color: var(--paper) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--coral);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Rich footer (index, rich character, suburb, blog, thank-you) — ensure ink bg */
footer.relative.overflow-hidden,
footer.bg-gray-900:not(.text-center.text-sm) {
    background: var(--ink) !important;
}

/* Footer CTA ("Book a Party" button inside footer) */
footer a.bg-primary-500 {
    border: var(--sticker-border);
    box-shadow: var(--sticker-shadow);
}

/* Footer link columns — brighten up from dead slate */
footer .text-slate-400 { color: color-mix(in oklch, var(--paper) 72%, transparent) !important; }
footer .text-slate-500 { color: color-mix(in oklch, var(--paper) 55%, transparent) !important; }
footer .text-slate-600 { color: color-mix(in oklch, var(--paper) 45%, transparent) !important; }
footer h4.text-white { color: var(--mustard) !important; letter-spacing: 0.08em; }

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .character-card,
    section.bg-gradient-to-br .aspect-square,
    #pricing .bg-white.border-4,
    a[href^="/suburbs/"],
    section.hero-bg .rounded-full,
    section .w-64.h-64.rounded-full {
        transform: none !important;
    }
}