/* =========================================================
   Mr. Max — custom styles (Bootstrap 5.3, light)
   "Sticker" style: bold plum outlines, hard offset shadows,
   bright drum colors on a white page.
   ========================================================= */

:root {
    --plum: #2b1b3d;          /* text, outlines */
    --tomato: #e8442e;        /* drum red: fills */
    --tomato-deep: #c4321c;   /* red for buttons with white text (AA contrast) */
    --sun: #ffc93c;           /* sunflower yellow */
    --teal: #1e9e8e;          /* fills */
    --teal-deep: #11695e;     /* teal for text */
    --sun-tint: #fff5d6;
    --teal-tint: #e2f4f0;
    --tomato-tint: #fde6e1;
    --line: 3px solid var(--plum);
    --pop: 6px 6px 0 var(--plum);
    --radius: 18px;

    --bs-body-bg: #ffffff;
    --bs-body-color: var(--plum);
    --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-size: 1.1rem;
    --bs-body-line-height: 1.6;
    --bs-secondary-color: #5c4d6e;
    --bs-heading-color: var(--plum);
    --bs-link-color: var(--tomato-deep);
    --bs-link-color-rgb: 196, 50, 28;
    --bs-link-hover-color: var(--plum);
    --bs-link-hover-color-rgb: 43, 27, 61;
    --bs-border-color: #d9d2e0;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
::selection { background: var(--sun); color: var(--plum); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.skip-link { position: absolute; z-index: 2000; background: var(--plum); color: #fff; padding: .5rem 1rem; }

h1, h2, h3, h4, .display-4, .display-5, .display-6 { font-family: "Fredoka", "Nunito", sans-serif; font-weight: 600; line-height: 1.12; }
h1, .display-4 { font-weight: 700; }
.lead { font-size: 1.3rem; }
p { max-width: 40em; }

/* ---------- Buttons: chunky, with a hard shadow that "presses" ---------- */
.btn {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    border: var(--line);
    border-radius: 999px;
    padding: .55rem 1.4rem;
    box-shadow: 3px 3px 0 var(--plum);
    transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--plum); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--plum); }
.btn-lg { font-size: 1.25rem; padding: .7rem 1.8rem; }
.btn-tomato { --bs-btn-color: #fff; --bs-btn-bg: var(--tomato-deep); --bs-btn-border-color: var(--plum);
              --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ad2a16; --bs-btn-hover-border-color: var(--plum);
              --bs-btn-active-color: #fff; --bs-btn-active-bg: #ad2a16; --bs-btn-active-border-color: var(--plum); }
.btn-sun    { --bs-btn-color: var(--plum); --bs-btn-bg: var(--sun); --bs-btn-border-color: var(--plum);
              --bs-btn-hover-color: var(--plum); --bs-btn-hover-bg: #ffd666; --bs-btn-hover-border-color: var(--plum);
              --bs-btn-active-color: var(--plum); --bs-btn-active-bg: #ffd666; --bs-btn-active-border-color: var(--plum); }
.btn-plum   { --bs-btn-color: #fff; --bs-btn-bg: var(--plum); --bs-btn-border-color: var(--plum);
              --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3d2856; --bs-btn-hover-border-color: var(--plum);
              --bs-btn-active-color: #fff; --bs-btn-active-bg: #3d2856; --bs-btn-active-border-color: var(--plum); }
.btn-outline-plum { --bs-btn-color: var(--plum); --bs-btn-bg: #fff; --bs-btn-border-color: var(--plum);
              --bs-btn-hover-color: var(--plum); --bs-btn-hover-bg: var(--sun-tint); --bs-btn-hover-border-color: var(--plum);
              --bs-btn-active-color: var(--plum); --bs-btn-active-bg: var(--sun-tint); --bs-btn-active-border-color: var(--plum); }
.btn-chip   { --bs-btn-color: var(--plum); --bs-btn-bg: var(--teal-tint); --bs-btn-border-color: var(--plum);
              --bs-btn-hover-color: var(--plum); --bs-btn-hover-bg: #c9ebe4; --bs-btn-hover-border-color: var(--plum);
              --bs-btn-active-color: var(--plum); --bs-btn-active-bg: #c9ebe4; --bs-btn-active-border-color: var(--plum);
              font-size: .95rem; padding: .3rem .9rem; box-shadow: 2px 2px 0 var(--plum); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; transition: none; } }

/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; align-items: center; gap: .6rem; color: var(--plum); }
.wordmark-drum { width: 48px; height: 48px; flex-shrink: 0; }
.wordmark-text { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 1.75rem; line-height: 1; }
.wordmark-text small { display: block; font-family: "Nunito", sans-serif; font-weight: 700; font-size: .78rem; color: var(--teal-deep); margin-top: .2rem; }

/* ---------- Navbar ---------- */
.site-nav { background: #fff; border-bottom: var(--line); }
.site-nav .navbar-brand { text-decoration: none; }
.site-nav .nav-link { font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 1.15rem; color: var(--plum); padding-left: .85rem !important; padding-right: .85rem !important; }
.site-nav .nav-link:hover { color: var(--tomato-deep); }
.site-nav .nav-link.active { color: var(--plum); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 5px; text-underline-offset: .35em; }
.navbar-toggler { border: var(--line); border-radius: 12px; }

/* ---------- Hero ---------- */
.hero { background: var(--sun-tint); border-bottom: var(--line); position: relative; overflow: hidden; }
.hero::before, .hero::after {     /* two drum heads peeking in from the edges */
    content: "";
    position: absolute;
    border-radius: 50%;
    border: var(--line);
    pointer-events: none;
}
.hero::before { width: 260px; height: 260px; background: var(--tomato); left: -120px; bottom: -130px; box-shadow: inset 0 0 0 26px var(--plum); }
.hero::after  { width: 160px; height: 160px; background: var(--teal); right: -60px; top: -70px; box-shadow: inset 0 0 0 18px var(--plum); }
.hero h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); }
.hero-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-weight: 700; }
.hero-points i { color: var(--tomato-deep); margin-right: .35rem; }

/* ---------- Beat maker ---------- */
.beat-maker {
    background: #fff;
    border: var(--line);
    border-radius: var(--radius);
    box-shadow: var(--pop);
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}
.beat-help { color: #5c4d6e; }
.beat-grid { display: grid; gap: .45rem; overflow-x: auto; padding-bottom: .25rem; }
.beat-row { display: grid; grid-template-columns: 5.2rem repeat(8, minmax(30px, 1fr)); gap: .4rem; align-items: center; }
.beat-label { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.05rem; line-height: 1.05; }
.beat-label small { display: block; font-family: "Nunito", sans-serif; font-size: .72rem; font-weight: 700; color: #5c4d6e; }
.beat-step {
    aspect-ratio: 1;
    min-height: 30px;
    border: var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 0;
    transition: background-color .1s ease, transform .1s ease;
}
.beat-step.on-count { background: #f3eff7; }          /* the numbered beats, so kids can count */
.beat-row[data-row="low"]   .beat-step[aria-pressed="true"] { background: var(--tomato); }
.beat-row[data-row="high"]  .beat-step[aria-pressed="true"] { background: var(--sun); }
.beat-row[data-row="shake"] .beat-step[aria-pressed="true"] { background: var(--teal); }
.beat-step.now { transform: scale(1.12); box-shadow: 0 0 0 3px var(--sun-tint), 0 0 0 6px var(--plum); }
@media (prefers-reduced-motion: reduce) { .beat-step.now { transform: none; } }
.beat-counts span:not(.beat-label) { text-align: center; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: .9rem; color: #5c4d6e; }
.beat-note { color: #5c4d6e; }

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.tint-sun    { background: var(--sun-tint); }
.tint-teal   { background: var(--teal-tint); }
.tint-tomato { background: var(--tomato-tint); }
.section-rule { border-top: var(--line); border-bottom: var(--line); }

/* Sticker cards */
.sticker {
    background: #fff;
    border: var(--line);
    border-radius: var(--radius);
    box-shadow: var(--pop);
    padding: 1.75rem;
    height: 100%;
}
.program-card { display: flex; flex-direction: column; text-decoration: none; color: var(--plum); transition: transform .15s ease, box-shadow .15s ease; }
.program-card:hover { color: var(--plum); transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--plum); }
@media (prefers-reduced-motion: reduce) { .program-card:hover { transform: none; } }
.program-card .who { font-weight: 800; font-size: .95rem; }
.program-card .go { margin-top: auto; font-family: "Fredoka", sans-serif; font-weight: 600; }
.badge-drum {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: var(--line);
    font-size: 1.7rem;
    margin-bottom: 1rem;
}
.tone-sun .badge-drum, .badge-drum.tone-sun { background: var(--sun); }
.tone-tomato .badge-drum, .badge-drum.tone-tomato { background: var(--tomato); color: #fff; }
.tone-teal .badge-drum, .badge-drum.tone-teal { background: var(--teal); color: #fff; }

/* Skill levels: a real progression, so they're numbered */
.levels { list-style: none; padding: 0; margin: 0; counter-reset: level; display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .levels { grid-template-columns: repeat(3, 1fr); } }
.levels li { counter-increment: level; position: relative; padding-top: 2.6rem; }
.levels li::before {
    content: counter(level);
    position: absolute;
    top: -1.4rem;
    left: 1.5rem;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    border: var(--line);
    background: var(--sun);
    display: grid;
    place-items: center;
    font-family: "Fredoka", sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
}
.levels li:nth-child(2)::before { background: var(--tomato); color: #fff; }
.levels li:nth-child(3)::before { background: var(--teal); color: #fff; }

/* Photos & placeholders */
.photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--line); border-radius: var(--radius); box-shadow: var(--pop); }
.photo-placeholder { display: grid; place-items: center; font-size: 4rem; }
.photo-placeholder.tone-sun { background: var(--sun); }
.photo-placeholder.tone-tomato { background: var(--tomato); color: #fff; }
.photo-placeholder.tone-teal { background: var(--teal); color: #fff; }

/* Check list */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 2rem; margin-bottom: .55rem; }
.check-list li::before { content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .05rem; color: var(--teal-deep); font-size: 1.2rem; }

/* Hand drum cards */
.drum-card h3 { font-size: 2rem; margin-bottom: .1rem; }
.drum-card .say { font-weight: 700; color: #5c4d6e; margin-bottom: .75rem; }
.drum-card .from { display: inline-block; font-weight: 800; font-size: .9rem; background: var(--sun-tint); border: 2px solid var(--plum); border-radius: 999px; padding: .1rem .7rem; margin-bottom: 1rem; }
.drum-art { display: block; width: 110px; height: 110px; margin-bottom: 1rem; }

/* Quotes */
.quote { position: relative; }
.quote blockquote { font-size: 1.15rem; font-weight: 600; }
.quote figcaption { color: #5c4d6e; font-size: .95rem; }
.quote .bi-quote { font-size: 2.6rem; line-height: 1; color: var(--tomato); }

/* Service-area compass */
.compass { position: relative; max-width: 420px; margin: 0 auto; padding: 2.2rem 4.6rem; }
.compass svg { display: block; width: 100%; height: auto; overflow: visible; }
.compass .ring-outer { fill: var(--sun-tint); stroke: var(--plum); stroke-width: 3; }
.compass .ring { fill: none; stroke: var(--plum); stroke-width: 2; stroke-dasharray: 4 8; opacity: .45; }
.compass .axis { stroke: var(--plum); stroke-width: 2; opacity: .35; }
.compass .pin { fill: var(--tomato); stroke: var(--plum); stroke-width: 3; }
.compass .home { fill: var(--teal); stroke: var(--plum); stroke-width: 3; }
.compass .home-label { fill: #fff; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 20px; text-anchor: middle; }
.compass-label { position: absolute; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.1rem; line-height: 1.1; text-align: center; }
.compass-label small { display: block; font-family: "Nunito", sans-serif; font-weight: 700; font-size: .75rem; color: #5c4d6e; }
.compass-label.n { top: 0; left: 50%; transform: translate(-50%, -30%); }
.compass-label.s { bottom: 0; left: 50%; transform: translate(-50%, 30%); }
.compass-label.e { right: 0; top: 50%; transform: translate(0, -50%); max-width: 4.5rem; }
.compass-label.w { left: 0; top: 50%; transform: translate(0, -50%); max-width: 4.5rem; }
.home-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--teal); border: 2px solid var(--plum); vertical-align: -1px; margin-right: .25rem; }
.county-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.county-list li { border: 2px solid var(--plum); border-radius: 999px; padding: .15rem .85rem; background: #fff; font-weight: 700; font-size: .95rem; }

/* Page banner */
.page-banner { border-bottom: var(--line); }
.page-banner.tone-sun { background: var(--sun-tint); }
.page-banner.tone-teal { background: var(--teal-tint); }
.page-banner.tone-tomato { background: var(--tomato-tint); }
.page-banner .display-4 { font-size: clamp(2.4rem, 5vw, 3.8rem); }

/* CTA */
.cta-card { background: var(--sun); border: var(--line); border-radius: var(--radius); box-shadow: var(--pop); padding: clamp(1.75rem, 4vw, 3rem); }

/* Forms */
.form-control, .form-select { border: 2.5px solid var(--plum); border-radius: 12px; padding: .65rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--plum); box-shadow: 0 0 0 4px var(--sun); }
.form-label { font-weight: 800; }
.form-check-input { border: 2px solid var(--plum); }
.form-check-input:checked { background-color: var(--teal-deep); border-color: var(--plum); }
.alert { border: var(--line); border-radius: 14px; font-weight: 700; }

/* Accordion */
.accordion { --bs-accordion-border-color: var(--plum); --bs-accordion-border-width: 3px; --bs-accordion-border-radius: var(--radius); --bs-accordion-inner-border-radius: 14px;
             --bs-accordion-active-bg: var(--sun-tint); --bs-accordion-active-color: var(--plum); --bs-accordion-btn-focus-box-shadow: 0 0 0 4px var(--sun); }
.accordion { box-shadow: var(--pop); border-radius: var(--radius); }
.accordion-button { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.15rem; }

/* Footer */
.site-footer { background: var(--plum); color: #f1ebf7; }
.beat-strip {      /* a row of beats: big on the count, small in between */
    height: 34px;
    background:
        radial-gradient(circle at 17px 17px, var(--sun) 9px, transparent 10px) 0 0 / 68px 34px repeat-x,
        radial-gradient(circle at 51px 17px, var(--tomato) 5px, transparent 6px) 0 0 / 68px 34px repeat-x,
        var(--plum);
    border-bottom: 2px solid rgba(255,255,255,.12);
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--sun); }
.footer-brand .wordmark { color: #fff; }
.footer-brand .wordmark-text small { color: var(--sun); }
.footer-heading { color: var(--sun); font-size: 1.3rem; margin-bottom: 1rem; }
.footer-links li { margin-bottom: .45rem; }
.site-footer hr { border-color: rgba(255,255,255,.25); opacity: 1; }
.footer-meta { color: #cfc4dc; }

/* Tinted stickers */
.sticker.tint-sun { background: var(--sun-tint); }
.sticker.tint-teal { background: var(--teal-tint); }

/* Keep the hero's corner drums behind the text */
.hero > .container { position: relative; z-index: 1; }
.hero::before { left: -150px; bottom: -165px; }

/* Beat grid on phones: tighter so all 8 beats fit without scrolling */
@media (max-width: 575.98px) {
    .beat-maker { padding: 1.1rem; }
    .beat-row { grid-template-columns: 3.2rem repeat(8, minmax(22px, 1fr)); gap: .28rem; }
    .beat-label { font-size: .95rem; }
    .beat-label small { display: none; }
    .beat-step { min-height: 22px; border-width: 2.5px; border-radius: 8px; }
    .beat-counts span:not(.beat-label) { font-size: .8rem; }
}