/*
 * 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.
 */

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes my-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animated-button {
    animation: pulse 2s infinite ease-in-out;
}

.animate-me {
    animation-name: my-fade-in;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    /* Ensures the element stays in its final state */
}

/* Query container for the header title (see h1.top_header below): a plain
 * flex-grown wrapper, not the title itself, so the container query has no
 * self-reference to worry about. */
.top_header_container {
    container-type: inline-size;
}

/* Sized off top_header_container's own resolved width (cqi), not the
 * viewport (vw) — vw doesn't know how much of that width the header's own
 * icons already used, so long titles used to wrap even when the wrapper
 * still had room to grow into. */
h1.top_header {
    margin: 0;
    font-size: clamp(1.1rem, 6cqi, 3rem) !important;
}

#more-search-filters:focus-within {
    outline: .125rem solid var(--primary);
    border-radius: .5rem !important
}

.event-image-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Listing-card thumbnail: force a uniform 16:9 crop so cards line up regardless
   of the source image's ratio (the src is a 640x360 libvips variant). */
.event-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* Provinces filter: keep the BeerCSS checkbox list scrollable (24 provinces) */
.provinces-list {
    max-height: 16rem;
    overflow-y: auto;
}

/* Email validation code: short (6 chars), so it doesn't need a full-width
   field — narrow and centered instead. 601px matches BeerCSS's own `m`
   breakpoint, so it lines up with the rest of the site's responsive sizes. */
#validation_code_field {
    max-width: 80%;
    margin-inline: auto;
}

@media only screen and (min-width: 601px) {
    #validation_code_field {
        max-width: 50%;
    }
}

/* Final focus styles: robust and thematic */
/* Including :focus for mouse clicks and :focus-visible for keyboard */
body :focus,
body :focus-visible,
body a:focus,
body a:focus-visible,
a:focus,
a:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
    /* Adding a subtle shadow for better depth and visibility */
    box-shadow: 0 0 0 4px rgba(0, 100, 255, 0.1) !important;
}
body header {
  background-color: var(--sierra-sky-bg);
}
body footer > div {
  background-color: var(--sierra-sky-bg);
}

/* Animation for expand icons in details/summary */
details summary i {
    transition: transform 0.3s ease !important;
}

details[open] summary i {
    transform: rotate(90deg);
}

/* Modern bidirectional slide animation for details/expansion */
:root {
    interpolate-size: allow-keywords;
}

/* BeerCSS bug: article's padding transition gets stuck near 0 when content
   height changes right after load (e.g. an error notice appearing) — the
   --_padding custom prop stays correct, only the rendered padding breaks. */
article.responsive {
    padding: 1rem !important;
}

/* BeerCSS ships `:has(>[class*=margin]){padding:.1px}` — any element with a
   direct child carrying a *margin* utility class drops its own padding so the
   child's margin controls spacing. The flash Notice (message box) is rendered
   as a direct child of <main> and uses `tiny-margin`, so it collapsed <main>'s
   padding to ~0 and jammed every page's content against the window edges until
   the notice was dismissed. Keep <main>'s padding regardless of such a child;
   higher specificity than the BeerCSS rule, and --_padding is main's own .5rem. */
main:has(> [class*="margin"]) {
    padding: var(--_padding);
}

details::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition: content-visibility 0.3s allow-discrete, opacity 0.3s ease-in-out, block-size 0.3s ease-in-out;
}

details[open]::details-content {
    opacity: 1;
    block-size: auto;
}

/* Define the keyframe animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px); /* Optional subtle slide-down effect */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply the animation to the class */
.fade-target {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Exit animation for items being deleted (slide left + fade + collapse). The
   element is removed by the server-morph after the animation plays. */
@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 120px;
  }
  to {
    opacity: 0;
    transform: translateX(-24px);
    max-height: 0;
    margin-block: 0;
    padding-block: 0;
    border-width: 0;
  }
}

.slide-out {
  animation: slideOut 0.3s ease forwards;
  overflow: hidden;
}

tr.slide-out {
  animation: slideOutRow 0.3s ease forwards;
}

tr.slide-out td {
  animation: slideOutTd 0.3s ease forwards;
}

@keyframes slideOutRow {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-24px);
  }
}

@keyframes slideOutTd {
  from {
    line-height: 1.5;
  }
  to {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 0;
    font-size: 0;
    border-width: 0;
  }
}

/* Earth Tone Theme for Trail Running Site */
:root,
body.light {
  --primary: #366a20;
  --on-primary: #ffffff;
  --primary-container: #b6f398;
  --on-primary-container: #062100;
  --secondary: #55624c;
  --on-secondary: #ffffff;
  --secondary-container: #d8e7cb;
  --on-secondary-container: #131f0d;
  --tertiary: #386667;
  --on-tertiary: #ffffff;
  --tertiary-container: #bbebec;
  --on-tertiary-container: #002021;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #fdfdf6;
  --on-background: #1a1c18;
  --surface: #fafaf3;
  --on-surface: #1a1c18;
  --surface-variant: #dfe4d7;
  --on-surface-variant: #43483e;
  --outline: #73796e;
  --outline-variant: #c3c8bb;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #2f312d;
  --inverse-on-surface: #f1f1ea;
  --inverse-primary: #9bd67f;
  --surface-dim: #dadad4;
  --surface-bright: #fafaf3;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f4ed;
  --surface-container: #eeeee7;
  --surface-container-high: #e8e9e2;
  --surface-container-highest: #e3e3dc;
  --sierra-ridge: #6f4a2f;
  --sierra-sky-bg: #e1f5fe;
}

body.dark {
  --primary: #9bd67f;
  --on-primary: #0f3900;
  --primary-container: #1e5108;
  --on-primary-container: #b6f398;
  --secondary: #bccbb0;
  --on-secondary: #273421;
  --secondary-container: #3d4b36;
  --on-secondary-container: #d8e7cb;
  --tertiary: #a0cfd0;
  --on-tertiary: #003738;
  --tertiary-container: #1e4e4f;
  --on-tertiary-container: #bbebec;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffb4ab;
  --background: #1a1c18;
  --on-background: #e3e3dc;
  --surface: #121410;
  --on-surface: #e3e3dc;
  --surface-variant: #43483e;
  --on-surface-variant: #c3c8bb;
  --outline: #8d9287;
  --outline-variant: #43483e;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #e3e3dc;
  --inverse-on-surface: #2f312d;
  --inverse-primary: #366a20;
  --surface-dim: #121410;
  --surface-bright: #383a35;
  --surface-container-lowest: #0d0f0b;
  --surface-container-low: #1a1c18;
  --surface-container: #1e201c;
  --surface-container-high: #292b26;
  --surface-container-highest: #333531;
  --sierra-ridge: #b08558;
  --sierra-sky-bg: #000000;
}

/* Sky backdrop behind the sierra ridge in header/footer. The value is set
   per-theme above (--sierra-sky-bg): light-blue by day, black by night. */
.sierra-sky-bg {
  background-color: var(--sierra-sky-bg);
}

/*
 * TinyMDE (Markdown editor) theming.
 * TinyMDE ships hardcoded light colors and has no theme option, so we remap its
 * classes onto BeerCSS's Material variables. Because those variables switch with
 * `body.dark`, the editor and toolbar follow the app's light/dark theme
 * automatically — no JS, so it also holds after Datastar patches.
 *
 * Selectors are prefixed with `body ` on purpose: tiny-mde.min.css is loaded
 * AFTER application.css, so a plain `.TinyMDE` rule (same specificity) would lose
 * to TinyMDE's own by source order. `body .TinyMDE` wins regardless of load order.
 */
body .TinyMDE {
  border: 1px solid var(--outline);
  background-color: var(--surface);
  color: var(--on-surface);
  resize: vertical;
  overflow: auto;
  min-height: 8rem;
}
body .TinyMDE.TinyMDE_empty:before {
  color: var(--on-surface-variant);
}
body .TMMark {
  color: var(--on-surface-variant);
}
body .TMBlockquote {
  border-left-color: var(--outline);
}
body .TMCode,
body .TMFencedCodeBacktick,
body .TMFencedCodeTilde,
body .TMIndentedCode {
  background-color: var(--surface-container);
  border-color: var(--outline-variant);
}
body .TMCodeFenceBacktickOpen,
body .TMCodeFenceTildeOpen,
body .TMCodeFenceBacktickClose,
body .TMCodeFenceTildeClose,
body .TMCommandDivider {
  border-color: var(--outline-variant);
}

body .TMCommandBar {
  background-color: var(--surface-container-high);
  border-color: var(--surface-container-high);
}
body .TMCommandButton {
  color: var(--on-surface-variant);
  fill: var(--on-surface-variant);
}
body .TMCommandButton_Inactive {
  background-color: transparent;
}
body .TMCommandButton_Active {
  background-color: var(--primary);
  color: var(--on-primary);
  fill: var(--on-primary);
}
body .TMCommandButton_Active:hover,
body .TMCommandButton_Inactive:hover,
body .TMCommandButton_Disabled:hover {
  background-color: var(--surface-container-highest);
  fill: var(--on-surface);
}
body .TMCommandButton_Disabled {
  color: var(--outline);
  fill: var(--outline);
}

.audit-timeline {
  position: relative;
  padding-left: 2rem;
}

.audit-timeline::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--outline-variant);
}

.audit-timeline-item {
  position: relative;
  margin-bottom: 1rem;
}

.audit-timeline-dot {
  position: absolute;
  left: -2rem;
  top: 0;
  background-color: var(--surface);
  border-radius: 50%;
  padding: 0.25rem;
  color: var(--on-surface-variant);
}

.audit-timeline-dot.primary {
  color: var(--primary);
}

.audit-timeline-dot.error {
  color: var(--error);
}

.audit-timeline-content {
  padding-left: 0.5rem;
}

/* BeerCSS's .tooltip is `display: flex` (row, centered) by default, meant for
   a single line of text — that packs each field's <div> here side by side
   instead of stacking them. Force block layout so the audit diff reads as one
   field per line. */
.audit-timeline .tooltip {
  display: block;
  text-align: left;
}

/* Shared wrapper for any Markdown rendered via markdown_to_html (event /
   championship / organization descriptions, comments, question text).
   Redcarpet emits a bare <img> with no width cap, so a wide source image keeps
   its intrinsic width and overflows the container on mobile. Cap it to the
   container width and keep the aspect ratio; block + auto margins center a
   narrower image instead of leaving it hugging the left edge. */
.markdown-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: .5rem;
}

.markdown-body a {
  text-decoration: underline;
}

/* Pass CTA button ("Pases disponibles" on the event page). Its label is the
   pass name + price ("Todas las fechas del vertical! · $130.000"), which can
   be long. BeerCSS .button is `white-space: nowrap` with a fixed height, so a
   long label overflowed the container instead of wrapping. Let it wrap and cap
   its width to the container. The `a.button` prefix beats BeerCSS's own
   `.button` on specificity regardless of stylesheet load order. */
a.button.pass-button {
  max-width: 100%;
  height: auto;
  min-height: 2.5rem;
  padding-block: .5rem;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}