/* ==========================================================================
   Honco Monco Music
   --------------------------------------------------------------------------
   Bootstrap 5.3 does the heavy lifting. This file only holds:
     1. Fonts
     2. Brand tokens + Bootstrap theme overrides
     3. Brand utilities that Bootstrap has no equivalent for
     4. The handful of genuinely bespoke components
   If a rule can be expressed with a Bootstrap class in the markup, it should be.
   ========================================================================== */

/* 1. Fonts ================================================================ */

@font-face {
  font-family: "LazyDog";
  src: url("/font/Lazydog.otf") format("opentype");
  font-display: swap;
  font-weight: 400 700;
}
@font-face {
  font-family: "More Sugar";
  src: url("/font/more-sugar.regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "TT Norms";
  src: url("/font/TTNorms-Medium.otf") format("opentype");
  font-display: swap;
}

/* 2. Theme ================================================================ */

:root {
  /* Brand palette - see wwwroot/images/colour palette.png */
  --navy: #141e6b; /* navy blue    */
  --blue: #c4e5ee; /* calm blue    */
  --navy-soft: #8295d1; /* periwinkle   */
  --purple: #b7a9d6; /* calm purple  */
  --orange: #f8b662; /* calm orange  */
  --coral: #ffaf93; /* pale coral   */
  --cream: #fff0b7; /* pale yellow  */
  --pink: #f48baa; /* pale pink    */
  --green: #b8dea1; /* pale green   */
  --guitar-orange: #ff9c00; /* guitar orange */

  /* Derived, not from the palette: darkened pale yellow for inactive nav tabs */
  --cream-inactive: #eadbae;

  /* Aliases, so the "peach" / "yellow" theme names keep working */
  --peach: var(--coral);
  --yellow: var(--cream);

  /* Type stacks */
  --font-heading: "LazyDog", sans-serif;
  --font-subheading: "Fredoka Variable", sans-serif;
  --font-accent: "More Sugar", "Fredoka Variable", sans-serif;
  --font-body: "TT Norms", "Fredoka Variable", sans-serif;

  /* Bootstrap theme - everything Bootstrap renders inherits from these */
  --bs-body-bg: var(--cream);
  --bs-body-color: var(--navy);
  --bs-body-font-family: var(--font-body);
  --bs-link-color-rgb: 20, 30, 107;
  --bs-link-hover-color-rgb: 20, 30, 107;
  --bs-border-radius-xl: 1.25rem; /* .rounded-4 */
}

html {
  scroll-behavior: smooth;
}
/* The back-to-top link rides on that smooth scroll, so opt out where the
   reader has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .back-to-top {
    transition: none;
  }
}

/* 3. Brand utilities ====================================================== */

/* Colours - named to match the Bootstrap .text-* / .bg-* convention. */
.text-navy { color: var(--navy) !important; }
.text-navy-soft { color: var(--navy-soft) !important; }
.text-coral,
.text-peach { color: var(--coral) !important; }
.text-blue { color: var(--blue) !important; }
.text-cream,
.text-yellow { color: var(--cream) !important; }
.text-purple { color: var(--purple) !important; }
.text-pink { color: var(--pink) !important; }
.text-green { color: var(--green) !important; }

.bg-navy { background-color: var(--navy) !important; }
.bg-coral,
.bg-peach { background-color: var(--coral) !important; }
.bg-blue { background-color: var(--blue) !important; }
.bg-cream,
.bg-yellow { background-color: var(--cream) !important; }
.bg-purple { background-color: var(--purple) !important; }
.bg-pink { background-color: var(--pink) !important; }
.bg-green { background-color: var(--green) !important; }

/* Pairs with Bootstrap's .border / .border-2 utilities. */
.border-navy { --bs-border-color: var(--navy); }

/* Type stacks */
.font-heading { font-family: var(--font-heading); font-weight: 700; }
.font-accent { font-family: var(--font-accent); font-weight: 600; letter-spacing: 0.02em; }
.font-body { font-family: var(--font-body); font-weight: 400; }

/* Bootstrap ships .w-100 but no responsive width utilities. */
@media (min-width: 992px) {
  .w-lg-auto { width: auto !important; }
}

/* Standard vertical rhythm for a full-width band. */
.section { padding-block: 6rem; }

/* Readable measure for body copy: pair with .fs-5 / .mt-4 in the markup. */
.prose {
  line-height: 1.45;
  max-width: 38rem;
}
/* Keeps spacing below the copy block down to the next element's own margin. */
.prose > :last-child {
  margin-bottom: 0;
}

/* 4. Typography =========================================================== */

h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 700;
}
/* Page titles match the section h2 scale so every page opens at the same size. */
.page-hero h1,
h2 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  letter-spacing: -0.03em;
  line-height: 0.92;
  margin: 0;
}
h3,
h4,
h5,
h6 {
  font-family: var(--font-subheading);
  font-weight: 600;
}
/* Accent word inside a heading. Wrap it in <em> (or <span>) for the coral
   default, or add a .text-* utility on that tag to choose another palette
   colour — the utility's !important wins over this rule. Elements can also
   set --accent-color inline (see ContentSection's titleAccent prop) to
   change the default without touching the markup. */
h1 em,
h1 span,
h2 em,
h2 span {
  color: var(--accent-color, var(--coral));
  font-style: normal;
}

/* Small uppercase kicker above a heading. Colour comes from a .text-* class. */
.eyebrow {
  font-family: var(--font-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* 5. Buttons ============================================================== */

/* One button style across the site: guitar orange fill, navy label. */
.btn {
  --bs-btn-bg: var(--guitar-orange);
  --bs-btn-hover-bg: var(--orange);
  --bs-btn-active-bg: var(--orange);
  --bs-btn-color: var(--navy);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-active-color: var(--navy);
  --bs-btn-border-width: 0;
  --bs-btn-border-radius: var(--bs-border-radius-pill);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-padding-y: 0.72rem;
  font-family: var(--font-accent);
  text-transform: uppercase;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.btn:hover {
  box-shadow: 0 7px 0 rgba(20, 30, 107, 0.16);
  transform: translateY(-2px);
}

/* 6. Navigation =========================================================== */

.site-nav .nav-link {
  --bs-nav-link-color: var(--navy);
  --bs-nav-link-hover-color: var(--guitar-orange);
  --bs-nav-link-padding-x: 1.2rem;
  --bs-nav-link-padding-y: 0.55rem;
  background: var(--cream-inactive);
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 500;
}
.site-nav .nav-link.active {
  background: var(--cream);
  color: var(--navy);
  position: relative;
  z-index: 1;
}

/* 7. Components =========================================================== */

/* Poster hero */
.poster-artwork {
  line-height: 0;
  max-width: 50%;
}

/* Instrument icons either side of the hero's CTA button; smaller and closer
   on narrow phones so they don't overlap the button text. */
.poster-decor {
  top: 20%;
  width: 2.25rem;
}
.poster-decor-left {
  right: calc(50% + 8rem);
}
.poster-decor-right {
  left: calc(50% + 8rem);
}
@media (min-width: 576px) {
  .poster-decor {
    width: 2.75rem;
  }
  .poster-decor-left {
    right: calc(50% + 9.5rem);
  }
  .poster-decor-right {
    left: calc(50% + 9.5rem);
  }
}
@media (min-width: 992px) {
  .poster-decor {
    width: 4rem;
  }
}

/* Error pages (404, 503): keeps the illustration a consistent size above the message. */
.error-illustration {
  max-width: min(20rem, 100%);
}

/* Venue */
.venue-schedule {
  border-color: var(--coral) !important;
}
/* The card's own padding frames the map now, so it needs no border of its own. */
.venue-map {
  min-height: 25rem;
}
.venue-tick {
  color: var(--navy-soft);
}
.venue-notice {
  background: var(--guitar-orange);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  text-transform: uppercase;
}
/* Leaflet's default divIcon adds a white box; the pin SVG provides its own shape. */
.venue-map-marker-wrapper {
  background: transparent !important;
  border: none !important;
}


/* Pricing cards */
.pricing-card {
  border: 2px solid var(--navy);
}
.pricing-badge {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-bottom: 0;
}
.pricing-name {
  font-family: var(--font-heading);
  font-size: 2.5rem;
}
.pricing-rule {
  border-color: var(--navy);
  opacity: 1;
}

/* Booking iframe */
.booking-frame {
  height: calc(100vh - 2rem);
  height: calc(100dvh - 2rem);
  min-height: 32rem;
}

/* Photos */
.photo-placeholder {
  border: 2px dashed currentColor;
  min-height: 22rem;
}
.section-photo {
  max-height: 28rem;
}

/* Pull quote */
.quote-mark {
  font-family: Georgia, serif;
  font-size: 5rem;
  height: 2.6rem;
  line-height: 1;
}
.quote-card blockquote {
  font-family: var(--font-heading);
  max-width: 45rem;
}

/* Testimonial carousel
   Bootstrap's carousel provides swipe, keyboard, indicators and the fade; the
   speech bubbles are ours. Slides keep Bootstrap's own height, so the track is
   only ever as tall as the current quote - no dead space under the short ones.
   Each bubble hangs from its tail at the top, so a longer quote grows
   downwards and everything above it - heading, controls, animal - stays put. */
.testimonial-carousel .carousel-item {
  /* Room above the bubble for the tail and the animal sitting on top of it.
     .carousel-inner clips overflow, so this has to cover both. */
  padding-top: 4rem;
}
/* Bootstrap holds the outgoing slide at full opacity for the whole transition
   (transition: opacity 0s .6s) and relies on the incoming one covering it.
   These bubbles differ in height, so a taller outgoing quote shows around the
   incoming one. Drop the delay: it leaves at once and the incoming bubble
   fades up against the band on its own. */
.testimonial-carousel.carousel-fade .active.carousel-item-start,
.testimonial-carousel.carousel-fade .active.carousel-item-end {
  transition: none;
}

/* Speech bubble. The tail is a rotated square inheriting the bubble's
   background and border custom properties, so changing the .bg-* or .border-*
   utilities on the bubble recolours the tail to match. It points up out of the
   top edge: after a 45deg turn the square's upper corner is its original
   top-left one, so only those two edges are drawn. The square's white fill
   covers the bubble's own top border to open the tail into it. */
.speech-bubble {
  max-width: 48rem;
}
.speech-bubble::after {
  background: inherit;
  border-left: var(--bs-border-width, 2px) solid var(--bs-border-color, var(--navy));
  border-top: var(--bs-border-width, 2px) solid var(--bs-border-color, var(--navy));
  content: "";
  height: 1.4rem;
  left: var(--tail-x, 50%);
  position: absolute;
  top: -0.7rem;
  transform: translateX(-50%) rotate(45deg);
  width: 1.4rem;
}
/* The animal sits above the tail, sharing its --tail-x so the two always line
   up and the bubble reads as belonging to it. Anchoring both to the bubble's
   top edge keeps them still while a long quote grows downwards. */
.speech-bubble-animal {
  bottom: 100%;
  font-size: 2.25rem;
  left: var(--tail-x, 50%);
  line-height: 1;
  position: absolute;
  transform: translate(-50%, -1.15rem);
}
.testimonial-quote {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.1;
}

/* Round navy arrows carrying Bootstrap's own chevron icons. */
.testimonial-button {
  background: var(--navy);
  height: 2.7rem;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
  width: 2.7rem;
}
.testimonial-button:hover,
.testimonial-button:focus-visible {
  background: var(--navy-soft);
  transform: translateY(-2px);
}
.testimonial-button .carousel-control-prev-icon,
.testimonial-button .carousel-control-next-icon {
  height: 1.25rem;
  width: 1.25rem;
}

/* Position dots in place of Bootstrap's overlaid white bars. Bootstrap's
   transparent top/bottom borders stay, so the tap target is taller than the dot. */
.testimonial-carousel .carousel-indicators [data-bs-target] {
  background-color: var(--navy);
  border-radius: 50%;
  height: 0.65rem;
  width: 0.65rem;
}

/* Email address shown as a link. Add .fs-6 for the compact variant. */
.contact-email {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25rem;
}

/* Back to top
   Hangs in the bottom-right corner once the reader is far enough down that the
   navigation has scrolled away. Colours, hover lift and shadow come from .btn,
   so it stays in step with every other button; only shape, position and
   visibility are set here. Hidden with visibility rather than display so it
   leaves the tab order and the accessibility tree while still fading in. */
.back-to-top {
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  height: 3rem;
  opacity: 0;
  padding: 0;
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  transform: translateY(0.75rem);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.2s ease,
    visibility 0.25s;
  visibility: hidden;
  width: 3rem;
  z-index: 1030; /* Bootstrap's --bs-zindex-fixed */
}
.back-to-top.is-visible {
  /* Floating over the page rather than sitting in it, so it carries the same
     hard navy shadow the buttons take on hover, at rest. */
  box-shadow: 0 4px 0 rgba(20, 30, 107, 0.16);
  opacity: 1;
  transform: none;
  visibility: visible;
}
/* .btn:hover's lift, restated so it outranks the .is-visible transform above. */
.back-to-top.is-visible:hover,
.back-to-top.is-visible:focus-visible {
  transform: translateY(-2px);
}

/* Accordion
   Bootstrap drives the open/close, the animation and the ARIA wiring; these
   tokens dress it in brand colours. The chevron is Bootstrap's own, restated in
   navy at the weight the other arrows on the site are drawn at - one icon for
   both states, since Bootstrap rotates it when a panel opens. */
.brand-accordion {
  --bs-accordion-bg: #fff;
  --bs-accordion-color: var(--navy);
  --bs-accordion-border-color: var(--navy);
  --bs-accordion-border-width: 2px;
  --bs-accordion-border-radius: var(--bs-border-radius-xl);
  --bs-accordion-inner-border-radius: var(--bs-border-radius-xl);
  --bs-accordion-btn-color: var(--navy);
  --bs-accordion-btn-padding-x: 1.5rem;
  --bs-accordion-btn-padding-y: 1.15rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23141e6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2.75 5.5 5.25 5.25 5.25-5.25'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23141e6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2.75 5.5 5.25 5.25 5.25-5.25'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1.1rem;
  /* Matches the focus ring on .form-control. */
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(196, 229, 238, 0.8);
  --bs-accordion-active-color: var(--navy);
  --bs-accordion-active-bg: var(--cream);
  --bs-accordion-body-padding-x: 1.5rem;
  --bs-accordion-body-padding-y: 1.25rem;
  max-width: 48rem;
}
/* Separate rounded cards rather than Bootstrap's single stacked block, to match
   the rounded panels used everywhere else. Bootstrap drops the top border on
   every item after the first and rounds only the outer two corners of the
   group, so both are restored here; overflow clips the open item's cream
   fill to the card's corners. */
.brand-accordion .accordion-item {
  border-radius: var(--bs-accordion-border-radius);
  /* Bootstrap zeroes this with the border-top shorthand, which also resets the
     style to none - so the whole edge has to be restated, not just its width. */
  border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
  overflow: hidden;
}
.brand-accordion .accordion-item + .accordion-item {
  margin-top: 1rem;
}
.brand-accordion .accordion-button {
  font-family: var(--font-subheading);
  font-size: 1.15rem;
  font-weight: 600;
}

/* Read more */
.read-more-toggle.collapsed .read-more-label-less,
.read-more-toggle:not(.collapsed) .read-more-label-more {
  display: none;
}

/* Footer */
.footer-socials a:hover,
.footer-socials a:focus-visible {
  color: var(--cream) !important;
}

/* Forms */
.form-control {
  /* Bootstrap defaults this to --bs-body-bg, which is cream here. */
  background-color: #fff;
  border: 2px solid rgba(20, 30, 107, 0.22);
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
}
.form-control:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 0.25rem rgba(196, 229, 238, 0.8);
}
.form-check-input {
  border: 2px solid rgba(20, 30, 107, 0.35);
}
.form-check-input:checked {
  background-color: var(--navy);
  border-color: var(--navy);
}
.form-check-input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 0.25rem rgba(20, 30, 107, 0.2);
}

/* 8. Responsive =========================================================== */

/* Bridges the jump from 100% (narrower) to 50% (wide desktop) so the poster
   doesn't look disproportionately small on mid-size laptop screens. */
@media (min-width: 1200px) and (max-width: 1425px) {
  .poster-artwork {
    max-width: 70%;
  }
}

@media (max-width: 1199.98px) {
  .poster-artwork {
    max-width: 100%;
    padding-inline: 10px;
  }
}

@media (max-width: 991.98px) {
  /* Columns stack below lg, so horizontal gutters only cause overflow. */
  .row {
    --bs-gutter-x: 0;
  }
  /* Narrower columns make headings wrap, and 0.92 lets the lines collide. */
  .page-hero h1,
  h2 {
    line-height: 1.05;
  }
  .site-nav .nav-tabs {
    align-items: end;
    justify-content: center;
  }
  .site-nav .nav-link {
    --bs-nav-link-padding-x: 0.9rem;
    text-align: center;
  }
}

/* Matches the <source> media query in PosterHero.astro. */
@media (max-width: 767.98px) {
  .poster-artwork {
    padding-inline: 0;
    padding-top: 15px;
  }
}

@media (max-width: 575.98px) {
  .section {
    padding-block: 3rem;
  }
  .photo-placeholder {
    min-height: 15rem;
  }
}