/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --container-width: calc(100vw + 315px);
    --content-height: calc(100svh - 70px);
}

html {
    background: var(--color-black);
    overflow-x: hidden;
}

/* Hide native scrollbars while keeping content scrollable (touch/wheel still work). */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Menu Icon */
.menu-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    width: 20px;
    height: 16px
}

.menu-icon::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-light);
    top: 0;
    left: 0;
    box-shadow: 0 7px 0 var(--color-light), 0 14px 0 var(--color-light);
}

.menu-icon:hover::after {
    background: #888;
    box-shadow: 0 7px 0 #888, 0 14px 0 #888
}

.menu-icon.dark::after {
    background: var(--color-black);
    box-shadow: 0 7px 0 var(--color-black), 0 14px 0 var(--color-black);
}

.menu-icon.dark:hover::after {
    background: #555;
    box-shadow: 0 7px 0 #555, 0 14px 0 #555
}

/* Unseen notification dot on hamburger */
.unseen-dot {
  position: absolute;
  top: -4px;
  right: -5px;
  z-index: 1; /* paint above the ::after hamburger bars (same stacking context) */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
}

/* Inline variant: a dot that flows next to text (e.g. side-nav "Notifications"). */
.unseen-dot--inline {
  position: static;
  display: inline-block;
}

/* Multiselect */
.ts-control, .ts-control input, .ts-dropdown {
    font-size: inherit !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: none !important;
    padding: 0 !important;
    line-height: inherit !important;
    color: inherit !important;
}
.ts-wrapper.multi .ts-control > div {
    background: var(--color-secondary) !important;
}
/* Keep a clickable area after the chips so the dropdown can be reopened. */
.ts-wrapper.multi .ts-control {
    padding-right: 1rem !important;
    cursor: text;
}

/* TomSelect dark mode */
.dark .ts-wrapper .ts-control,
.dark .ts-wrapper .ts-dropdown {
    background: var(--color-surface) !important;
    color: var(--color-ink) !important;
}
.dark .ts-wrapper .ts-dropdown .option:hover,
.dark .ts-wrapper .ts-dropdown .option.active {
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* Dark mode: warm-dark background for entire content modal (title bar + slides) */
.dark .content-modal {
  background: var(--color-surface);
}

/* Dark mode: invert Google Maps embed to match dark palette */
.dark .map-embed {
  filter: invert(90%) hue-rotate(180deg);
}

/* Dark mode: fix hamburger icon visibility on dark content bg */
.dark .content-title .menu-icon.dark::after {
  background: var(--color-light);
  box-shadow: 0 7px 0 var(--color-light), 0 14px 0 var(--color-light);
}
.dark .content-title .menu-icon.dark:hover::after {
  background: #888;
  box-shadow: 0 7px 0 #888, 0 14px 0 #888;
}

/* Hide Home Page */
.opened .callouts, .opened .nav-buttons {
  transition: all 0.3s;
  visibility: hidden;
}

/* Action Text <cite> blocks: eyebrow styling matching the home/About pattern.
   Horizontal margins mirror the blockquote indent steps so a cite following
   a blockquote aligns with the quoted text. */
.trix-content cite,
trix-editor cite {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--color-primary);
  margin-top: 0.75rem;
}
@media (min-width: 640px) {
  .trix-content cite, trix-editor cite { margin-left: 1.5rem; margin-right: 1.5rem; }
}
@media (min-width: 768px) {
  .trix-content cite, trix-editor cite { margin-left: 3rem; margin-right: 3rem; }
}
@media (min-width: 1024px) {
  .trix-content cite, trix-editor cite { margin-left: 5rem; margin-right: 5rem; }
}
.trix-content cite::before,
trix-editor cite::before {
  content: "— ";
}
.dark .trix-content cite,
.dark trix-editor cite,
.text-light .trix-content cite {
  color: var(--color-accent);
}

/* Trix toolbar: cite button styling (matches existing icon-button look) */
.trix-button--cite {
  width: 30px;
}
.trix-button--cite .fa-feather-alt {
  font-size: 14px;
  vertical-align: middle;
}


/* Filter accordion: pill-shaped trigger on Events / Resources index */
#event-filters,
#resource-filters {
  margin-bottom: 1.5rem;
}
#event-filters > ul > li,
#resource-filters > ul > li {
  text-align: right;
}
#event-filters > ul > li > div > h3,
#resource-filters > ul > li > div > h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 30%, transparent);
  color: var(--color-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.075em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#event-filters > ul > li > div > h3:hover,
#resource-filters > ul > li > div > h3:hover {
  background: color-mix(in srgb, var(--color-secondary) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  color: var(--color-primary);
}
#event-filters .accordion-row-inner,
#resource-filters .accordion-row-inner {
  text-align: left;
  margin-top: 0.75rem;
}

/* Registration accordion: primary CTA-styled trigger on event show page */
#event-registration > ul > li > div > h3 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--color-secondary) 30%, transparent);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
#event-registration > ul > li > div > h3:hover {
  background: var(--color-accent);
  color: var(--color-primary);
  box-shadow: 0 2px 4px 0 color-mix(in srgb, var(--color-secondary) 35%, transparent);
}
#event-registration .accordion-row-content {
  margin-top: 0.75rem;
}