/* ================================================================
   BOILING HARMONIES — GLOBAL STYLES (REFactored + COMMENTED)
   ----------------------------------------------------------------
   Goals:
   - Single source of truth via CSS variables
   - Consistent navbar + glass panels (mobile + desktop dropdown)
   - Consistent form controls + borders across Profile/Auth/Artists
   - Consistent checkbox/radio styling everywhere (old-size feel)
   - Shared UI utilities (bh-card, file-pill, thumbs, etc.)
   - Global button system (BH theme)
   ================================================================ */


/* ================================================================
   0) ROOT VARIABLES (single source of truth)
   ================================================================ */
:root{
  /* Layout */
  --bh-navbar-height: 72px;
  --bh-content-max: 1400px;

  /* Typography */
  --bh-font-family: 'Roboto', sans-serif;

  /* Colors */
  --bh-text: #000;
  --bh-white: #fff;
  --bh-black: #000;

  /* Accent (forms) */
  --bh-check-size: 1.05rem;
  --bh-check-radius: 3px;

  /* old-style neutral border */
  --bh-check-border-width: 1px;
  --bh-check-border-color: rgba(0,0,0,.35);

  /* red states */
  --bh-accent: #ee0202;
  --bh-accent-checked: #ff0000;
  --bh-accent-border: #c03838;

  /* Surface borders / inputs */
  --bh-surface-border: rgba(0,0,0,.12);     /* match across pages */
  --bh-input-border: rgba(0,0,0,.18);       /* input border */
  --bh-input-bg: #fff;
  --bh-input-focus: rgba(0,0,0,.35);

  /* Glass theme (desktop dropdown + mobile collapse) */
  --bh-glass-bg: rgba(0,0,0,0.85);
  --bh-glass-bg-fallback: rgba(0,0,0,0.86);
  --bh-glass-border: rgba(255,255,255,0.12);
  --bh-glass-shadow: 0 16px 40px rgba(0,0,0,0.45);
  --bh-glass-radius: 16px;
  --bh-glass-blur: 10px;
  --bh-hover-bg: rgba(255,255,255,0.10);

  /* Navbar */
  --bh-nav-border: rgba(255,255,255,0.15);
  --bh-toggler-border: rgba(255,255,255,0.40);
  --bh-cta-border: rgba(255,255,255,0.30);

  /* Backdrop (click-outside) */
  --bh-backdrop-bg: rgba(0,0,0,0.403);
  --bh-backdrop-z: 1025; /* below navbar (1030) */

  /* Buttons */
  --bh-btn-bg: #000;
  --bh-btn-text: #fff;
  --bh-btn-border: rgba(255,255,255,0.25);
  --bh-btn-hover-bg: rgba(16,15,15,0.85);
  --bh-btn-hover-border: rgba(255,255,255,0.35);
  --bh-btn-active-bg: #000;
}


/* ================================================================
   1) GLOBAL LAYOUT + BACKGROUND
   ================================================================ */
html,
body{ height: 100%; }

body{
  padding-top: var(--bh-navbar-height);
  font-family: var(--bh-font-family);
  color: var(--bh-text);

  background-image: url("/static/images/background.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

  min-height: 100vh;

  /* FIX: allow normal page scrolling */
  overflow-x: hidden;
  overflow-y: auto;

  /* FIX: remove flex layout that expects #main to be the scroller */
  display: block;
}


main{
  flex: 1 1 auto;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* #main{
  height: calc(100vh - var(--bh-navbar-height, 0px));
  overflow: auto;

} */


.content-wrapper{
  max-width: var(--bh-content-max);
  margin: 0 auto;
  padding: 0 2rem;
}

footer{
  flex-shrink: 0;
  background: rgba(255,255,255,0.315);
  border: none;
  box-shadow: none;
  margin-top: 1rem;
}

.footer-newsletter-form{ justify-content: flex-end; }
.footer-newsletter-input{ max-width: 260px; }
footer .fs-6{ font-size: 1rem; }


/* ================================================================
   2) NAVBAR (BOOTSTRAP-COMPATIBLE)
   ================================================================ */
.navbar{
  background: var(--bh-black);
  border-bottom: 1px solid var(--bh-nav-border);
  min-height: var(--bh-navbar-height);
  padding: 0.5rem 0;

  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
}

/* Anchor for absolute-positioned mobile collapse panel */
.navbar > .container-fluid{
  display: flex;
  align-items: center;
  position: relative;
}

/* Support your markup: .container-fluid.content-wrapper */
.navbar > .container-fluid.content-wrapper{ position: relative; }

/* Brand */
.navbar-brand{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.nav-logo{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 36px;
}

.bh-brand-text{
  font-size: 1rem;
  line-height: 1.05;
  white-space: nowrap;
}

@media (max-width: 576px){
  .navbar .bh-brand-text{
    display: inline-block;
    max-width: 58vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Links */
.navbar-brand,
.navbar .nav-link{
  color: var(--bh-white);
  font-weight: 500;
  text-decoration: none;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color: #ccc;
  text-decoration: none;
}

.navbar .nav-link.active{
  color: var(--bh-white);
  font-weight: 600;
}

/* Standard nav link + CTA */
.navbar .nav-link.bh-navlink,
.navbar .nav-link.bh-nav-cta{
  color: var(--bh-white);
  border-radius: 12px;
  padding: 0.45rem 0.8rem;
}

.navbar .nav-link.bh-navlink:hover,
.navbar .nav-link.bh-navlink:focus,
.navbar .nav-link.bh-nav-cta:hover,
.navbar .nav-link.bh-nav-cta:focus{
  color: var(--bh-white);
  background: var(--bh-hover-bg);
}

/* CTA specifics */
.navbar .nav-link.bh-nav-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--bh-cta-border);
  background: rgba(0,0,0,0.56);
  padding: 0.45rem 0.9rem;
}

.navbar .nav-link.bh-nav-cta:hover,
.navbar .nav-link.bh-nav-cta:focus{
  border-color: rgba(255,255,255,0.45);
  background: rgba(0,0,0,0.38);
}

/* Desktop auth spacing */
.bh-auth-desktop .nav-item + .nav-item{ margin-left: 0.35rem; }


/* ------------------------------
   2.4) TOGGLER (hamburger)
   ------------------------------ */
.navbar-toggler.bh-toggler{
  margin-left: auto;
  padding: 0;

  border: 1px solid var(--bh-toggler-border);
  border-radius: 12px;
  line-height: 1;
  box-shadow: none;

  position: relative;
  width: 44px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navbar-toggler.bh-toggler:focus{
  outline: none;
  box-shadow: none;
}

.navbar-toggler.bh-toggler .navbar-toggler-icon{ display: none; }

/* Top + bottom bars */
.navbar-toggler.bh-toggler::before,
.navbar-toggler.bh-toggler::after{
  content: "";
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--bh-white);
  transform: translateX(-50%);
  transition: transform 180ms ease, top 180ms ease, opacity 180ms ease;
  border-radius: 2px;
}

.navbar-toggler.bh-toggler::before{ top: 14px; }
.navbar-toggler.bh-toggler::after{  top: 26px; }

/* Middle bar */
.navbar-toggler.bh-toggler span.bh-toggle-mid{
  position: absolute;
  left: 50%;
  top: 20px;
  width: 20px;
  height: 2px;
  background: var(--bh-white);
  transform: translateX(-50%);
  transition: opacity 180ms ease;
  border-radius: 2px;
}

/* X state when expanded */
.navbar-toggler.bh-toggler[aria-expanded="true"]::before{
  top: 20px;
  transform: translateX(-50%) rotate(45deg);
}
.navbar-toggler.bh-toggler[aria-expanded="true"]::after{
  top: 20px;
  transform: translateX(-50%) rotate(-45deg);
}
.navbar-toggler.bh-toggler[aria-expanded="true"] span.bh-toggle-mid{ opacity: 0; }

/* Desktop: hide toggler and force normal collapse */
@media (min-width: 992px){
  .navbar-toggler.bh-toggler{ display: none !important; }

  .navbar-collapse{
    position: static !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;

    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* ------------------------------
   2.5) USER AVATAR
   ------------------------------ */
.navbar-user-area{
  display: flex;
  align-items: center;
}

.navbar-username{ line-height: 1; }

.navbar .bh-avatar{
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
}

.navbar .bh-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bh-avatar-fallback{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  color: var(--bh-white);
}


/* ------------------------------
   2.6) GLASS HELPER
   ------------------------------ */
.bh-glass{
  background: var(--bh-glass-bg);
  border: 1px solid var(--bh-glass-border);
  border-radius: var(--bh-glass-radius);
  box-shadow: var(--bh-glass-shadow);

  backdrop-filter: blur(var(--bh-glass-blur));
  -webkit-backdrop-filter: blur(var(--bh-glass-blur));
}

/* Fallback when blur unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .bh-glass{ background: var(--bh-glass-bg-fallback); }
}


/* ------------------------------
   2.7) MOBILE COLLAPSE PANEL
   ------------------------------ */
@media (max-width: 991.98px){
  #navbarNav.navbar-collapse{
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0.75rem;
    left: auto;

    display: inline-block;

    width: max-content;
    max-width: calc(100vw - 1.25rem);
    min-width: 0;

    padding: 0.55rem;

    background: var(--bh-glass-bg);
    border: 1px solid var(--bh-glass-border);
    border-radius: var(--bh-glass-radius);
    box-shadow: var(--bh-glass-shadow);
    backdrop-filter: blur(var(--bh-glass-blur));
    -webkit-backdrop-filter: blur(var(--bh-glass-blur));

    transform-origin: top right;

    flex-basis: auto !important;
    flex-grow: 0 !important;

    z-index: 1041;
  }

  #navbarNav.navbar-collapse:not(.show){
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  }

  #navbarNav.navbar-collapse.show{
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 160ms ease, transform 160ms ease;
  }

  #navbarNav .navbar-nav{
    width: auto;
    margin: 0;
    padding: 0;
    align-items: flex-end;
    text-align: right;
    gap: 0.25rem;
  }

  #navbarNav .nav-link{
    display: inline-flex;
    width: auto;
    justify-content: flex-end;
    padding: 0.55rem 0.75rem;
    font-size: 1rem;
    border-radius: 12px;
    white-space: nowrap;
  }

  #navbarNav .nav-item + .nav-item{ margin-top: 0.25rem; }

  #navbarNav .bh-nav-cta{
    display: inline-flex;
    width: auto;
    justify-content: center;
  }
}


/* ------------------------------
   2.8) DESKTOP DROPDOWN MENU
   ------------------------------ */
@media (min-width: 992px){
  .navbar .dropdown-menu{
    background: var(--bh-glass-bg) !important;
    border: 1px solid var(--bh-glass-border) !important;
    border-radius: var(--bh-glass-radius) !important;
    box-shadow: var(--bh-glass-shadow) !important;

    backdrop-filter: blur(var(--bh-glass-blur));
    -webkit-backdrop-filter: blur(var(--bh-glass-blur));

    padding: 0.55rem !important;
    margin-top: 0.5rem !important;

    width: max-content;
    min-width: unset !important;
  }

  .navbar .dropdown-menu .dropdown-item{
    color: var(--bh-white) !important;
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    white-space: nowrap;
  }

  .navbar .dropdown-menu .dropdown-item:hover,
  .navbar .dropdown-menu .dropdown-item:focus{
    background: var(--bh-hover-bg) !important;
    color: var(--bh-white) !important;
  }

  .navbar .dropdown-menu .dropdown-divider{
    border-top: 1px solid var(--bh-glass-border) !important;
    opacity: 1;
    margin: 0.5rem 0;
  }

  .navbar .dropdown-menu form .btn{
    width: 100%;
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
  }
}

/* Tighten bar on very small phones */
@media (max-width: 576px){
  .navbar{
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
}


/* ================================================================
   3) CLICK-OUTSIDE BACKDROP (mobile menu)
   ================================================================ */
.bh-nav-backdrop{
  position: fixed;
  inset: 0;
  background: var(--bh-backdrop-bg);
  z-index: var(--bh-backdrop-z);

  display: none;
  touch-action: manipulation;
}
body.bh-backdrop--show .bh-nav-backdrop{ display: block; }


/* ================================================================
   4) GLOBAL CARDS / BORDERS (keep Profile + Artists identical)
   ================================================================ */
/* Normalize card border color everywhere */
.card{
  border-color: var(--bh-surface-border);
}

/* Optional utility card */
.bh-card{
  border: 1px solid var(--bh-surface-border);
  border-radius: 14px;
}


/* ================================================================
   5) GLOBAL FORMS (inputs/select/textarea)
   - This fixes “border looks different” between pages.
   ================================================================ */
.form-control,
.form-select,
textarea.form-control{
  background: var(--bh-input-bg) !important;
  border-color: var(--bh-input-border) !important;
}

/* Match your preferred sizing */
.form-control{
  font-size: 1.05rem;
  padding: 0.75rem 0.75rem;
}

textarea.form-control{
  min-height: 140px;
  resize: vertical;
}

/* Select padding to match inputs */
.form-select{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Focus state */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus{
  border-color: var(--bh-input-focus) !important;
  box-shadow: 0 0 0 .2rem rgba(0,0,0,0.08) !important;
}

/* Help text */
.form-text{ font-size: 0.95rem; }

/* Required asterisk helper (if you use it) */
.bh-required{
  color: var(--bh-accent);
  font-weight: 700;
}


/* ================================================================
   6) CHECKBOX / RADIO THEME (BH RED) — CONSISTENT EVERYWHERE
   ----------------------------------------------------------------
   KEY FIX:
   - Style BOTH Bootstrap (.form-check-input) and plain Django inputs
     inside .form-check (Profile/Auth/Artists may differ in templates).
   - Keep OLD size feel via --bh-check-size
   ================================================================ */
/* Keep rows aligned */
.form-check{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--bh-check-size);
}

/* Apply to Bootstrap checkboxes (and any inside .form-check) */
.form-check-input,
.form-check input[type="checkbox"],
.form-check input[type="radio"]{
  width: var(--bh-check-size) !important;
  height: var(--bh-check-size) !important;
  margin-top: 0 !important;

  /* OLD look when unchecked */
  border: var(--bh-check-border-width) solid var(--bh-check-border-color) !important;
  background-color: #fff !important;

  border-radius: var(--bh-check-radius) !important;
  accent-color: var(--bh-accent);
}

/* radios */
.form-check-input[type="radio"],
.form-check input[type="radio"]{
  border-radius: 50% !important;
}

/* checked -> red fill + red border */
.form-check-input:checked,
.form-check input[type="checkbox"]:checked,
.form-check input[type="radio"]:checked{
  background-color: var(--bh-accent-checked) !important;
  border-color: var(--bh-accent-border) !important;
}

/* focus ring */
.form-check-input:focus,
.form-check input[type="checkbox"]:focus,
.form-check input[type="radio"]:focus{
  border-color: rgba(238,2,2,.70) !important;
  box-shadow: none !important;
}


/* Label */
.form-check-label{
  margin: 0 !important;
  line-height: 1.2;
  font-weight: 500;
}


/* ================================================================
   7) GLOBAL VALIDATION (Bootstrap-compatible)
   ================================================================ */
.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid{
  border-color: var(--bh-accent) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus{
  box-shadow: 0 0 0 .2rem rgba(238,2,2,.2) !important;
}

.invalid-feedback{
  display: block;
  color: var(--bh-accent) !important;
  font-weight: 600;
  margin-top: 0.25rem;
}


/* ================================================================
   8) SHARED UI UTILITIES (used by Profile/BH2026/etc.)
   ================================================================ */
.thumb{
  width: 100%;
  height: 160px;
  border-radius: 12px;
  border: 1px solid var(--bh-surface-border);
  background: rgba(0,0,0,.03);
  object-fit: cover;
  display: block;
}

.thumb--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(0,0,0,.45);
  font-size: .95rem;
}

.file-preview{
  border: 1px solid var(--bh-surface-border);
  border-radius: 12px;
  padding: .75rem;
  background: rgba(0,0,0,.02);
}

.file-pill{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size: .9rem;
  text-decoration: none;
}
.file-pill:hover{ background: rgba(0,0,0,.06); }

/* Hide file inputs but keep them in the form */
.file-hidden{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.radio-row .form-check{ margin-right: 1.25rem; }

.bh-locked{ opacity: .75; pointer-events: none; }

.btn[disabled]{ cursor: not-allowed; opacity: .6; }


/* ================================================================
   9) AUTH FORMS (login / signup / reset)
   - Checkbox styling comes from the global system above
   ================================================================ */
.auth-card{
  background-color: #f8f9fa;
  border: 1px solid #dddddd;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"]{
  width: 100%;
  max-width: 100%;
  display: block;
}

.auth-card .form-label{ font-weight: 600; }

/* Center remember-me row like your screenshot */
.auth-card .form-check{
  justify-content: center;
  gap: 0.35rem;
}


/* ================================================================
   10) EVENTS (image containment)
   ================================================================ */
.bh-event-card-img{
  max-height: 300px;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: white;
}

.bh-event-gallery-img{
  max-height: 400px;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #000;
}


/* ================================================================
   11) GLOBAL BUTTON SYSTEM (ALL buttons everywhere)
   ================================================================ */
.btn,
button[type="submit"],
input[type="submit"]{
  background-color: var(--bh-btn-bg) !important;
  color: var(--bh-btn-text) !important;
  border: 1px solid var(--bh-btn-border) !important;

  border-radius: 12px;
  padding: 0.65rem 1rem;
  font-weight: 600;

  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 120ms ease;
}

.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover{
  background-color: var(--bh-btn-hover-bg) !important;
  border-color: var(--bh-btn-hover-border) !important;
  color: var(--bh-btn-text) !important;
}

.btn:active,
button[type="submit"]:active,
input[type="submit"]:active{
  background-color: var(--bh-btn-active-bg) !important;
  transform: translateY(1px);
}

.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}


/* ================================================================
   12) ALERTS (BH theme override)
   ================================================================ */
.alert{
  background: rgba(86, 84, 84, 0.472) !important;
  color: #ff0000 !important;
  border: 0px solid rgba(197, 11, 11, 0.547) !important;
  border-radius: 45px;
  box-shadow: none;
  
}

.alert a{
  color: #f50000;
  text-decoration: underline;
}

/* ================================================================
   FORM ERRORS / VALIDATION (GLOBAL)
   ================================================================ */

/* Django default error list */
.errorlist,
.errorlist li{
  color: #dc3545;              /* Bootstrap danger */
  margin: 0.25rem 0 0;
  padding-left: 1rem;
}

/* Make field borders red when invalid */
.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid{
  border-color: #dc3545 !important;
}

/* Bootstrap invalid feedback */
.invalid-feedback{
  display: block;
  color: #dc3545;
}

/* Any inline error text you output (e.g., {{ field.errors }}) */
.form-error,
.field-error{
  color: #dc3545;
}


/* ================================================================
   GLOBAL: “Section collapse” toggle (About on artist page)
   ================================================================ */

.bh-collapse-toggle{
  all: unset;                     /* reset button styles */   
  display: block;
  width: 100%;
  border: 0;
  background: #ffffff;                 /* your black bar */
  color: #000000;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-decoration: none;            /* ensures no underline */
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.bh-collapse-toggle:hover,
.bh-collapse-toggle:focus{
  background: rgba(80, 77, 77, 0.9);
  outline: none;
}

.bh-collapse-toggle:focus-visible{
  outline: none;
}

/* remove ANY residual borders or shadows */
.bh-collapse-toggle,
.bh-collapse-toggle:focus,
.bh-collapse-toggle:active{
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}


/* Optional: spacing inside the button content row */
.bh-collapse-toggle .bh-collapse-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  color: black;
}


/* Optional: chevron rotate when expanded */
.bh-collapse-toggle .bh-chevron{
  display: inline-block;
  font-size: 1.25rem;
  transition: transform 160ms ease;
}
.bh-collapse-toggle[aria-expanded="true"] .bh-chevron{
  transform: rotate(180deg);
}

/* ================================================================
   ACCORDION THEME (BH Custom Colors)
   ================================================================ */

/* Accordion item borders */
.accordion-item {
  border-color: rgba(0,0,0,0.12);
}

/* Accordion button default state (collapsed) */
.accordion-button {
  background-color: rgba(0,0,0,0.04);
  color: #000;
  font-weight: 500;
  border: none;
  padding: 1rem 1.25rem;
}

.accordion-button:hover {
  background-color: rgba(0,0,0,0.08);
}

.accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0,0,0,0.12);
}

/* Accordion button expanded state (not collapsed) */
.accordion-button:not(.collapsed) {
  color: #000;
  background-color: rgba(238,2,2,0.08);
  box-shadow: none;
  border-bottom: 2px solid var(--bh-accent);
}

/* First accordion item rounded corners */
.accordion-item:first-of-type > .accordion-header .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}

/* Accordion chevron icon */
.accordion-button::after {
  background-size: 1.25rem;
  filter: brightness(0);
}

.accordion-button:not(.collapsed)::after {
  filter: brightness(0) saturate(100%) hue-rotate(-10deg);
}

/* Optional: tighter thumb sizing when used inside accordion headers */
.accordion-button .bh-inline-thumb{
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

/* ---------------------------------------------------------------
   Scoped accordion color tweaks for public artist profile only
   (class lives on the container: .artist-public-profile)
   --------------------------------------------------------------- */
.artist-public-profile .accordion-button {
  background-color: rgba(139, 139, 139, 0.737);
}

.artist-public-profile .accordion-button:hover {
  background-color: rgba(177, 64, 64, 0.602);
}

.artist-public-profile .accordion-button:not(.collapsed) {
  background-color: rgba(238,2,2,0.10);
  border-bottom-color: var(--bh-accent);
}

/* ================================================================
   BH GALLERY (GLOBAL) — used by Events + Artist pages
   ================================================================ */

.bh-gallery-shell{ overflow: hidden; }
.bh-gallery-row{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.bh-gallery-item{
  border: 0;
  background: transparent;
  padding: 0;
  scroll-snap-align: start;
}
.bh-gallery-thumb{
  width: 260px;
  height: 170px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--bh-surface-border);
  background: rgba(0,0,0,.03);
  display: block;
}

/* Lightbox */
.bh-lightbox{
  border-radius: 16px;
  overflow: hidden;
}
.bh-lightbox-stage{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.bh-lightbox-img{
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 14px;
  background: #000;
}
.bh-lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bh-lightbox-prev{ left: 14px; }
.bh-lightbox-next{ right: 14px; }

.bh-lightbox-header{
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.bh-lightbox-counter{ font-weight: 700; }
.bh-lightbox-caption{ font-size: .95rem; color: rgba(0,0,0,.65); }

/* ============================================================
   Draftail (frontend) — scoped theme for Artist dashboard
   Apply this only to the wrapper .bh-draftail around {{ form.bio }}
   ============================================================ */

.bh-draftail{
  /* Frame */
  --bh-editor-bg: #fff;
  --bh-editor-border: rgba(0,0,0,.16);
  --bh-editor-radius: 12px;

  /* Toolbar */
  --bh-toolbar-bg: #111;
  --bh-toolbar-fg: #fff;
  --bh-toolbar-border: rgba(255,255,255,.14);

  /* Buttons */
  --bh-btn-hover: rgba(255,255,255,.12);
  --bh-btn-active: rgba(255,255,255,.18);
  --bh-btn-border-hover: rgba(61, 59, 59, 0.254);
  --bh-btn-border-active: rgba(255,255,255,.28);
  --bh-btn-disabled: rgba(255,255,255,.35);

  /* Editor text */
  --bh-text: #000000;
}

/* ---------- Frame ---------- */
.bh-draftail .Draftail-Editor{
  border: 1px solid var(--bh-editor-border);
  border-radius: var(--bh-editor-radius);
  background: var(--bh-editor-bg);
  
  /* overflow: hidden; */

  position: relative;          /* for stacking context */
  max-height: 520px;           /* desired height */
  overflow: auto;              /* scrolling happens here */
}

/* Ensure content text stays readable (do NOT blanket-style all descendants) */
.bh-draftail .DraftEditor-root,
.bh-draftail .public-DraftEditor-content,
.bh-draftail .public-DraftEditorPlaceholder-root{
  color: var(--bh-text);
  padding-top: 12px;
}

/* ---------- Toolbars (PINNED + FLOATING) ---------- */
.bh-draftail .Draftail-Toolbar,
.bh-draftail .Draftail-FloatingToolbar{
  background: var(--bh-toolbar-bg) !important;
  color: var(--bh-toolbar-fg) !important; /* icons use currentColor */
  border: 0;
}

/* Pinned toolbar: keep your strip styling */
.bh-draftail .Draftail-Toolbar{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--bh-toolbar-border);
  position: sticky !important;
  top: 0 !important;
  z-index: 20;
}

/* Floating toolbar: match look + keep it readable */
.bh-draftail .Draftail-FloatingToolbar{
  padding: 8px 14px;
  min-width: 320px;
  border: 1px solid var(--bh-toolbar-border);
  border-radius: 10px;
 
}
.bh-draftail .Draftail-FloatingToolbar .Draftail-ToolbarGroup{
  display: flex;
  gap: 10px;
}

/* ---------- Toolbar buttons ---------- */
.bh-draftail .Draftail-ToolbarButton{
  appearance: none;
  background: transparent !important;
  color: inherit !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  line-height: 1;
  min-width: 36px;
  min-height: 32px;
}

.bh-draftail .Draftail-ToolbarButton:hover{
  background: var(--bh-btn-hover) !important;
  border-color: var(--bh-btn-border-hover) !important;
}

.bh-draftail .Draftail-ToolbarButton--active{
  background: var(--bh-btn-active) !important;
  border-color: var(--bh-btn-border-active) !important;
}

/* Disabled */
.bh-draftail .Draftail-ToolbarButton:disabled,
.bh-draftail .Draftail-ToolbarButton[disabled]{
  opacity: .55;
}

/* ---------- Icons (SVG <use>) ---------- */
/* Keep SVG clean and painted by currentColor */
.bh-draftail .Draftail-ToolbarButton svg,
.bh-draftail .Draftail-ToolbarButton .Draftail-Icon{
  width: 1em !important;
  height: 1em !important;
  display: block;
  background: transparent !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ---------- Pin button ---------- */
.bh-draftail .Draftail-ToolbarButton--pin{
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border: 1px solid var(--bh-toolbar-border) !important;
  background: rgb(0, 0, 0) !important;
}

.bh-draftail .Draftail-ToolbarButton--pin:hover{
  background: rgb(0, 0, 0) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
}

/* Pinned toolbar should stick to the top of the editor, not float over text */
.bh-draftail .Draftail-Editor--focus .Draftail-Toolbar{
  position: sticky !important;
  top: 0 !important;          /* overrides Wagtail's 50/100px defaults */
  z-index: 10;
}

/* Give the first line breathing room so it doesn't sit under the toolbar edge */
.bh-draftail .Draftail-Editor .public-DraftEditor-content{
  padding-top: 16px !important;
}

/* Scroll container used by Draftail toolbar logic */
.bh-draftail-scroll{
  max-height: 520px;   /* choose a height that suits your layout */
  overflow: auto;
  position: relative;
}

/* Avoid nested scroll fights: let Draftail root not be the scroller */
.bh-draftail .Draftail-Editor .DraftEditor-root{
  overflow: visible !important;
}

/* ================================================================
   13) ARTISTS DASHBOARD CARD FIXES
   - Ensure all cards have identical geometry
   ================================================================ */

/* Artists dashboard: force all cards to have identical geometry */
.artists-page .bh-dashboard-card{
  border: 0 !important;                 /* match your existing border-0 */
  border-radius: 14px;
  overflow: hidden;                     /* prevents list-group borders “sticking out” */
}

.artists-page .bh-dashboard-card .card-body{
  padding: 1.25rem;                     /* consistent inner padding */
}

/* Make list-group flush inside the card body */
.artists-page .bh-dashboard-card .list-group{
  margin: 0;
}

.artists-page .bh-dashboard-card .list-group-item{
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.artists-page .bh-dashboard-card .list-group-item:first-child{
  border-top: 0;
}

.artists-page .bh-dashboard-card .list-group-item:last-child{
  border-bottom: 0;
}

/* ============================================================
   Draftail — increase editor height for Short Bio
   Scoped to artist dashboard only
   ============================================================ */

.artists-page .bh-draftail-scroll{
  min-height: 260px;        /* visible size */
  max-height: 520px;        /* optional cap */
  overflow-y: auto;
}

/* Actual Draftail editable surface */
.artists-page .bh-draftail .Draftail-Editor{
  min-height: 240px;
  padding-bottom: 1rem;
}

/* Placeholder text alignment */
.artists-page .bh-draftail .public-DraftEditorPlaceholder-root{
  padding-top: 0.25rem;
}

 /* Thumbs + list rows */
.bh-inline-thumb{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  flex: 0 0 auto;
}

@media (min-width: 992px){
  .bh-inline-thumb{
    width: 80px;
    height: 80px;
    border-radius: 14px;
  }
}

.bh-media-ratio{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
}

.bh-media-thumbimg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bh-media-openbtn{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Optional: subtle hover without weird cropping */
.bh-media-thumbframe:hover .bh-media-thumbimg{
  filter: brightness(.95);
}

@media (max-width: 768px){
  main{
    padding-bottom: 5rem;
  }
}

/* =========================================
   Artist profile photo (public profile)
   ========================================= */

.bh-artist-photo{
  width: 100%;
  max-height: 300px;        /* desktop limit */
  object-fit: contain;       /* fills card nicely */
  object-position: center; /* center crop */
}

/* Mobile adjustment */
@media (max-width: 576px){
  .bh-artist-photo{
    max-height: 280px;
  }
}