/* ============================================================
   DanceResource Mobilizon theme (minimal, calm, mostly B&W)
   File: preload.css  (custom theme overrides)
   ------------------------------------------------------------
   Goals
   - Typography: Inter (self-hosted)
   - Calm neutral UI, subtle borders, consistent rounding
   - Accent kept for primary actions only (search / create)
   - Remove Mobilizon pastel “shape-*.svg” decorations
   - Neutralize Tailwind-ish blue/purple pills (filters/tags)
   - Fix: search cards underline-on-hover + “blue” location links
   - Fix: event page date badge (red) -> neutral
   - Fix: FullCalendar leftover blue/underline
   - Optional: preload fade + splash (used with your JS)
   ------------------------------------------------------------
   Notes
   - Mobilizon uses utility classes; we override via specificity + !important.
   - Keep “Tokens” section as the only place you tweak constants.
   ============================================================ */


/* ============================================================
   0) Font loading (self-hosted)
   Put your woff2 files in: /custom-assets/
   ============================================================ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/custom-assets/inter-normal-100-900.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/custom-assets/inter-italic-100-900.woff2") format("woff2");
}


/* ============================================================
   1) Tokens (tweak here)
   ============================================================ */
:root{
  /* You asked: radius 6px (consistent everywhere) */
  --dr-radius: 6px;

  --dr-bg: #ffffff;
  --dr-surface: #ffffff;
  --dr-surface-2: #f3f4f6;   /* light gray */
  --dr-border: #e5e7eb;

  --dr-text: #111827;        /* primary text */
  --dr-text-2: #6b7280;      /* secondary/muted */

  /* Accent (keep calm) */
  --dr-accent: #1a6a9c;       /* links/primary actions */
  --dr-accent-hover: #13557d; /* hover state */
  --dr-accent-soft: rgba(26, 106, 156, 0.14);

  /* Subtle shadows (avoid heavy “SaaS UI” look) */
  --dr-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}


/* ============================================================
   2) Global typography + base colors
   ============================================================ */
html, body, #app, input, button, textarea, select {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

body {
  background: var(--dr-bg) !important;
  color: var(--dr-text) !important;
}

/* default paragraph-ish text */
p, li, label, small, .text-secondary, .color-secondary {
  color: var(--dr-text-2) !important;
}

/* global link behavior:
   - no underline on hover (you explicitly don’t want it)
   - keep accent color outside of “whole-card links” */
a {
  color: var(--dr-accent) !important;
  text-decoration: none !important;
}
a:hover {
  color: var(--dr-accent-hover) !important;
  text-decoration: none !important;
}


/* ============================================================
   3) Consistent rounding everywhere
   ============================================================ */
.rounded, .rounded-md, .rounded-lg, .rounded-xl{
  border-radius: var(--dr-radius) !important;
}


/* ============================================================
   4) Remove Mobilizon pastel shapes (home/search hero)
   Targets only shipped /img/shape-*.svg assets
   ============================================================ */
img[src^="/img/shape-"],
img[src*="/img/shape-"],
img[src^="img/shape-"],
img[src*="img/shape-"] {
  display: none !important;
}


/* ============================================================
   5) Header / navbar (clean B&W)
   Seen: <nav id="navbar" class="bg-white border-gray-200 ...">
   ============================================================ */
nav#navbar {
  background: var(--dr-surface) !important;
  border-bottom: 1px solid var(--dr-border) !important;
}
nav#navbar a {
  color: var(--dr-text) !important;
}
nav#navbar a:hover {
  color: var(--dr-accent) !important;
}
/* Navbar: space between logo and first nav item */
nav#navbar a[href="/"] {
  margin-right: 24px;
}


/* ============================================================
   6) Main + headings
   ============================================================ */
main#main {
  background: var(--dr-bg) !important;
}

h1, h2, h3 {
  color: var(--dr-text) !important;
  letter-spacing: -0.02em;
}
h1 { font-weight: 750 !important; }
h2, h3 { font-weight: 650 !important; }


/* ============================================================
   7) Inputs
   ============================================================ */
/* Inputs: style text-like controls only (NOT checkbox/radio) */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-radius: var(--dr-radius) !important;
  border: 1px solid #CBD5E1 !important;
  background-color: var(--dr-surface) !important;
  color: var(--dr-text) !important;
  box-shadow: none !important;
}

/* Checkbox/radio: keep native/tailwind behavior, but make it on-brand */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--dr-accent);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--dr-accent) !important;
  box-shadow: 0 0 0 3px var(--dr-accent-soft) !important;
  outline: none !important;
}

/* -------------------------------------------------
   Fix: radios not showing checked state
   ------------------------------------------------- */

/* Re-enable native radio UI (your theme likely turned it off) */
input[type="radio"],
.o-radio__input {
  -webkit-appearance: radio !important;
  appearance: auto !important;
  accent-color: var(--dr-accent) !important; /* your brand color */
  width: 16px;
  height: 16px;
}

/* ============================================================
   8) Buttons (hierarchy)
   - Default = neutral outline (Publish should feel “quiet”)
   - Primary = accent only for real actions (Search / Create)
   ============================================================ */

/* base */
button.o-btn,
a.o-btn,
.o-btn.btn {
  border-radius: var(--dr-radius) !important;
}

/* default buttons (neutral) */
button.o-btn.btn,
a.o-btn.btn,
.o-btn.btn {
  background: var(--dr-surface) !important;
  border: 1px solid #CBD5E1 !important;
  color: var(--dr-text) !important;
  box-shadow: none !important;
}
button.o-btn.btn:hover,
a.o-btn.btn:hover,
.o-btn.btn:hover {
  border-color: #94A3B8 !important;
  background: #F8FAFC !important;
}
button.o-btn.btn:focus,
a.o-btn.btn:focus,
.o-btn.btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--dr-accent-soft) !important;
}

/* PRIMARY: home keyword search button (inside #short-search) */
button.o-btn.o-btn--primary {
  background-color: var(--dr-accent) !important;
  border-color: var(--dr-accent) !important;
  color: #fff !important;
}
#short-search button[type="submit"].o-btn.btn,
#short-search button[type="submit"].o-btn.btn.search-Event,
#short-search button[type="submit"].o-btn.btn.search-Activity,
#short-search button[type="submit"].o-btn.btn.search-Group {
  background: var(--dr-accent) !important;
  border-color: var(--dr-accent) !important;
  color: #fff !important;
}
#short-search button[type="submit"].o-btn.btn:hover {
  background: var(--dr-accent-hover) !important;
  border-color: var(--dr-accent-hover) !important;
}

/* Search page tabs: calm “ink on paper”, not filled */
button.o-btn.btn.search-Event,
button.o-btn.btn.search-Activity,
button.o-btn.btn.search-Group {
  background: var(--dr-surface) !important;
  border: 1px solid var(--dr-border) !important;
  color: var(--dr-text) !important;
}
button.o-btn.btn.search-Event:hover,
button.o-btn.btn.search-Activity:hover,
button.o-btn.btn.search-Group:hover {
  border-color: var(--dr-accent) !important;
  color: var(--dr-accent) !important;
  background: var(--dr-accent-soft) !important;
}
button[aria-selected="true"].o-btn,
button[aria-current="page"].o-btn {
  border-color: var(--dr-accent) !important;
  color: var(--dr-accent) !important;
  background: var(--dr-accent-soft) !important;
}

/* “Create event” should be primary CTA */
a[href*="/events/create"].o-btn.btn,
button.o-btn.btn.create-event,
button.o-btn.btn[data-oruga="button"][type="submit"].create-event {
  background: var(--dr-accent) !important;
  border-color: var(--dr-accent) !important;
  color: #fff !important;
}

/* QUICK PUBLISH: explicitly secondary/quiet */
.quick-publish button.o-btn.btn {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: var(--dr-text) !important;
  font-weight: 600 !important;
}
.quick-publish button.o-btn.btn:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
}
/* caret button next to Publish */
.quick-publish .o-drop__trigger button.o-btn.btn {
  padding-left: 10px !important;
  padding-right: 10px !important;
  min-width: auto !important;
}


/* ============================================================
   9) Cards / panels (filters etc.)
   Goal: clean white cards with neutral border
   ============================================================ */
.bg-zinc-300,
.dark\:bg-zinc-700 {
  background: var(--dr-surface) !important;
  border: 1px solid var(--dr-border) !important;
}

/* reduce harsh borders */
.border-gray-200,
.dark\:border-gray-500 {
  border-color: var(--dr-border) !important;
}

/* Turn warning notifications into neutral/brand blue */
.o-notification--warning {
  background-color: rgba(37, 99, 235, 0.12) !important; /* soft blue */
  border-left: 4px solid rgba(37, 99, 235, 0.5) !important;
  color: #0f172a !important; /* slate-900 */
}


/* ============================================================
   10) Tailwind-ish “blue pills” in search filters (Any day, Categories)
   Make them neutral gray (not accent-blue).
   ============================================================ */
main aside .bg-blue-100,
main aside .bg-blue-200,
main aside .dark\:bg-blue-200,
main aside .dark\:bg-blue-200\/20,
main aside .dark\:bg-blue-300 {
  background: var(--dr-surface-2) !important;
  border: 1px solid var(--dr-border) !important;
}
main aside .text-blue-700,
main aside .text-blue-800,
main aside .dark\:text-blue-700,
main aside .dark\:text-blue-800 {
  color: var(--dr-text-2) !important;
}


/* ============================================================
   11) Search/home result cards: fix underline-on-hover + “blue” leaks
   - Entire card is an <a class="mbz-card">; disable underline everywhere
   - Inner links should inherit (so location/company isn’t blue)
   ============================================================ */
a.mbz-card{
  background: var(--dr-surface) !important;
  border: 1px solid var(--dr-border) !important;
  border-radius: var(--dr-radius) !important;
  text-decoration: none !important;
  color: var(--dr-text) !important;
}
a.mbz-card:hover,
a.mbz-card:focus,
a.mbz-card:active{
  text-decoration: none !important;
  color: var(--dr-text) !important;
}
a.mbz-card:hover *{
  text-decoration: none !important;
}

/* Inner links inside the card should NOT look like links */
a.mbz-card a,
a.mbz-card a:hover,
a.mbz-card a:focus{
  color: inherit !important;
  text-decoration: none !important;
}

/* Location icon/text inside cards should be muted (not accent-blue) */
a.mbz-card .material-design-icon,
a.mbz-card .material-design-icon + span,
a.mbz-card .material-design-icon ~ span,
a.mbz-card [class*="map-marker"]{
  color: var(--dr-text-2) !important;
}

/* If Mobilizon uses a purple-ish background class in dark mode */
.dark\:bg-mbz-purple{
  background: var(--dr-surface) !important;
}


/* ============================================================
   12) Tags / chips (/tag/...)
   - Everywhere: neutral gray (no blue/purple)
   - Home card overlay tags: translucent background (NOT opacity)
   ============================================================ */

/* Base tag pill style (event page + search + cards) */
a[href^="/tag/"] > span.category,
a[href^="/tag/"] > span.rounded-md.truncate,
span.category.rounded-md.truncate {
  background: var(--dr-surface-2) !important;
  border: 1px solid var(--dr-border) !important;
  color: var(--dr-text-2) !important;
  text-decoration: none !important;
}

/* Prevent “utility text color” from reasserting itself on WebKit */
a[href^="/tag/"] > span.category,
a[href^="/tag/"] > span.rounded-md.truncate {
  -webkit-text-fill-color: currentColor;
}

/* Home page card: tag pills translucent background (crucial detail:
   do NOT use `opacity:` here because that fades text too) */
.mbz-card figure a[href^="/tag/"] > span.category,
.mbz-card figure a[href^="/tag/"] > span.rounded-md.truncate {
  background-color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: rgba(15, 23, 42, 0.90) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mbz-card figure a[href^="/tag/"]:hover > span.category,
.mbz-card figure a[href^="/tag/"]:hover > span.rounded-md.truncate {
  background-color: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  text-decoration: none !important;
}

/* Dark mode for translucent overlay pills */
.dark .mbz-card figure a[href^="/tag/"] > span.category,
.dark .mbz-card figure a[href^="/tag/"] > span.rounded-md.truncate {
  background-color: rgba(15, 23, 42, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Neutralize common purple/violet/blue utility backgrounds and text
   (covers “Party / InnerMotion / Conscious Dance …” pills) */
.bg-purple-1, .bg-purple-2, .bg-purple-3,
.bg-violet-1, .bg-violet-2, .bg-violet-3,
.bg-blue-50, .bg-blue-100, .bg-blue-200, .bg-blue-300,
.dark\:bg-blue-200, .dark\:bg-blue-200{
  background: var(--dr-surface-2) !important;
}
.text-blue-600, .text-blue-700, .text-blue-800,
.text-violet-title, .text-violet-1, .text-violet-2, .text-violet-3{
  color: var(--dr-text) !important;
}

/* Status badges (eg. “Event to be confirmed”) — keep calm */
span.rounded-md.truncate{
  background: var(--dr-surface-2) !important;
  border: 1px solid var(--dr-border) !important;
  color: var(--dr-text) !important;
}


/* ============================================================
   13) Event page: date “calendar badge” (red -> neutral)
   You showed: .datetime-container-header/footer bg-red-400
   ============================================================ */
.datetime-container{
  background: var(--dr-surface) !important;
  border: 1px solid var(--dr-border) !important;
  box-shadow: none !important;
  border-radius: var(--dr-radius) !important;
}
.datetime-container .datetime-container-header,
.datetime-container .datetime-container-footer{
  background: var(--dr-surface-2) !important;
  border-color: var(--dr-border) !important;
  color: var(--dr-text-2) !important;
}
.datetime-container *{
  color: var(--dr-text) !important;
}


/* ============================================================
   14) FullCalendar (Calendar page): neutral theme
   ============================================================ */
.fc {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* remove blue links/underline */
.fc a,
.fc a:hover,
.fc a:focus {
  color: var(--dr-text-2) !important;
  text-decoration: none !important;
}

.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number,
.fc .fc-daygrid-day-number:hover {
  color: var(--dr-text-2) !important;
  text-decoration: none !important;
}

/* grid lines */
.fc .fc-scrollgrid,
.fc .fc-scrollgrid-section > td,
.fc .fc-scrollgrid-section-header > th,
.fc .fc-daygrid-day,
.fc .fc-timegrid-slot {
  border-color: var(--dr-border) !important;
}

/* buttons */
.fc .fc-button,
.fc .fc-button-primary {
  background: var(--dr-surface) !important;
  border: 1px solid #CBD5E1 !important;
  color: var(--dr-text) !important;
  box-shadow: none !important;
  border-radius: var(--dr-radius) !important;
}
.fc .fc-button:hover,
.fc .fc-button-primary:hover {
  border-color: #94A3B8 !important;
  background: #F8FAFC !important;
}
.fc .fc-button-primary.fc-button-active,
.fc .fc-button-primary:active {
  background: var(--dr-accent) !important;
  border-color: var(--dr-accent) !important;
  color: #fff !important;
}


/* ============================================================
   15) Footer (smaller, quieter)
   ============================================================ */
footer {
  background: var(--dr-bg) !important;
  border-top: 1px solid var(--dr-border) !important;
  padding: 10px 0 !important;
  font-size: 12.5px !important;
  color: #64748B !important;
}

footer.bg-violet-2,
footer .text-yellow-1,
footer .text-white,
footer .underline,
footer .decoration-yellow-1 {
  background: var(--dr-bg) !important;
  color: #64748B !important;
  text-decoration: none !important;
}

footer a { color: #64748B !important; }
footer a:hover { color: var(--dr-text) !important; text-decoration: none !important; }

footer ul a {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748B !important;
}

footer > div,
footer .text-center {
  font-size: 11.5px !important;
  color: #94A3B8 !important;
}

/* language select */
footer select,
footer .o-field select {
  font-size: 12px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}


/* ============================================================
   16) Optional: reduce “empty state” visual weight
   ============================================================ */
svg, img {
  image-rendering: auto;
}


/* =======================================================================
   SETTINGS: left sidebar menu redesign
   Goal: neutral, readable, clear active state, subtle hover
   ======================================================================= */

/* Scope everything to settings pages (links all start with /settings) */
main#main a[href^="/settings"]{
  text-decoration: none !important;
}

/* Sidebar container spacing */
main#main aside{
  padding-right: 10px;
}

/* Menu items: remove Mobilizon’s yellow backgrounds and make them consistent */
main#main li.setting-menu-item{
  background: transparent !important;
  border-radius: 10px !important;
  margin: 6px 0 !important;
  margin-left: 16px !important;
  padding: 0 !important; /* we'll pad the <a> */
}

/* Make the whole row clickable and aligned */
main#main li.setting-menu-item > a{
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 5px 6px !important;
  border-radius: 10px !important;
  color: var(--dr-text, #0f172a) !important;
  line-height: 1.2;
  text-decoration: none !important;
}

/* Hover: subtle neutral background */
main#main li.setting-menu-item > a:hover{
  background: rgba(15, 23, 42, 0.05) !important; /* slate-ish */
}

/* Active: clear left accent + stronger text */
main#main li.setting-menu-item > a.router-link-active,
main#main li.setting-menu-item > a.router-link-exact-active{
  background: rgba(15, 23, 42, 0.07) !important;
  font-weight: 650 !important;
  color: var(--dr-text, #0f172a) !important;
}

/* If the label is wrapped in span.truncate, keep it aligned */
main#main li.setting-menu-item span.truncate{
  display: block !important;
  padding: 0 !important;
}

/* Optional: make section headings (“Account”, “Profiles”, etc.) calmer */
main#main aside h2,
main#main aside .setting-menu-section-title{
  color: rgba(15, 23, 42, 0.75) !important;
  font-weight: 700;
  margin-top: 14px;
}














/* ============================================================
   17) Preload / splash helpers
   Requires your JS to toggle: html.dr-preload -> html.dr-ready
   ============================================================ */

/* Hide the page until JS decides it’s ready */
html.dr-preload body {
  opacity: 0;
}

/* Smooth reveal */
html.dr-ready body {
  opacity: 1;
  transition: opacity 160ms ease-out;
}

/* Branded splash overlay */
#dr-splash {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

#dr-splash .dr-box {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font: 600 18px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
}

#dr-splash .dr-sub {
  font-weight: 500;
  font-size: 13px;
  color: rgba(0,0,0,0.55);
  margin-top: 4px;
}



/* -------------------------------------------------
   Event page — show CATEGORY as plain text + divider
   (keep tags as pills/links)
-------------------------------------------------- */

/* Category span: remove pill look */
p.flex.flex-wrap.gap-1.items-center > span.category {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-left: 0.5rem !important; 
  color: var(--dr-text-2) !important;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none !important;
  position: relative;
  border-radius: 0 !important;
  border-right: 1px solid var(--dr-text-2) !important;
  padding-right: 1rem !important;
}

p.flex.flex-wrap.items-center > span.category::before {
  content: "Dance practice: ";
  font-weight: 400;
  font-size: 16px;
  color: var(--dr-text-2);
  margin-right: 0.15rem;
  padding-left: 1rem;
  border-left: 1px solid var(--dr-text-2);
}

p.flex.flex-wrap.gap-1.items-center > span.category {
  margin-right: 1rem !important; /* increase space before first tag */
}

p.flex.flex-wrap.gap-1.items-center > a[href^="/tag/"] {
  background: var(--dr-surface-2) !important;
  border: 0 !important;              /* ← this removes the double line */
  box-shadow: inset 0 0 0 1px var(--dr-border); /* optional: subtle single outline */
  padding: 0.125rem 0.5rem !important;
  border-radius: 0.5rem !important;
  color: var(--dr-text-2) !important;
}

p.flex.flex-wrap.gap-1.items-center > a[href^="/tag/"]:hover {
  text-decoration: none !important;
  filter: brightness(0.98);
}

p.flex.flex-wrap.gap-1.items-center > a[href^="/tag/"] > span {
  background: var(--dr-surface-2) !important;
  border: 0 !important;              /* ← this removes the double line */
  box-shadow: inset 0 0 0 0px var(--dr-border); /* optional: subtle single outline */
  padding: 0.125rem 0.5rem !important;
  border-radius: 0.5rem !important;
  color: var(--dr-text-2) !important;
}



/* -------------------------------------------------
   Event page: remove excessive <p> margins
   ------------------------------------------------- */

.event-description .prose p {
  margin-top: 0.2rem !important;
  margin-bottom: 0.2rem !important;
}

/* -------------------------------------------------
   Event page: disclaimer blockquotes (first/last)
   ------------------------------------------------- */
.event-description .prose blockquote:first-of-type,
.event-description .prose blockquote:last-of-type {
  margin: 0.6rem 0 !important;
  padding: 0.55rem 0.85rem !important;
  border-left: 3px solid #cbd5e1 !important;
  background: linear-gradient(90deg, rgba(241,245,249,0.8), rgba(255,255,255,0)) !important;
  color: var(--dr-text-2) !important;
  font-size: 0.75em !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

.event-description .prose blockquote:first-of-type p,
.event-description .prose blockquote:last-of-type p {
  margin: 0.25rem 0 !important;
}

.event-description .prose blockquote:first-of-type a,
.event-description .prose blockquote:last-of-type a {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

.dark .event-description .prose blockquote:first-of-type,
.dark .event-description .prose blockquote:last-of-type {
  border-left-color: #475569 !important;
  background: linear-gradient(90deg, rgba(15,23,42,0.4), rgba(15,23,42,0)) !important;
  color: #cbd5e1 !important;
}