/*
 * app.css — hand-maintained plain CSS (no Sass / no build step).
 *
 * Loaded after vendor/bootswatch-united.css (Bootstrap 5.3 + the "United"
 * theme, orange #E95420 primary, Ubuntu font). This file holds only our own
 * rules; Bootstrap components — including dark mode — are handled by the vendor
 * stylesheet via [data-bs-theme].
 *
 * Notes on the original SCSS → CSS conversion:
 *   - rfs @include font-size(...)  -> clamp() responsive sizing
 *   - $primary (#E95420)           -> rgba(233, 84, 32, ...)
 */

/* --- base (was assets/css/app.css) --- */
.div-main{
    margin-top:3rem;
}

.bike-size{
    font-size:2rem;
}

.highlighted-post{
    animation:highlighted-post-fade 4s;
    animation-timing-function:ease-out;
}

@keyframes highlighted-post-fade{
    0%{ background-color:rgba(255, 0, 0, 0.2); }
    100%{ background-color:rgba(0, 0, 0, 0); }
}

.select-country{
    min-width:200px;
}

/* --- custom rules (was assets/css/app.scss) --- */
/* rfs font-size(...) replaced with clamp() for responsive scaling */
.event-notification{
    font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
}

.event-notification-long{
    font-size:clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
}

.event-passed{
    font-size:1rem;
}

.hr-text{
    line-height:3em;
    position:relative;
    outline:0;
    border:0;
    color:black;
    text-align:center;
    height:3em;
    opacity:.5;
}

.hr-text:before{
    content:'';
    /* fading divider line */
    background:linear-gradient(to right, transparent, #818078, transparent);
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:1px;
}

.hr-text:after{
    content:attr(data-content);
    position:relative;
    display:inline-block;
    padding:0 .5em;
    line-height:1.5em;
    color:#818078;
    background-color:#FCFCFA;
}

/* intl-tel-input: compatibility with Bootstrap form-control */
.iti.form-control{
    padding:0;
}

.custom-horizontal-line{
    width:100%;
    height:2px;
    background-color:#000000;
    margin:0;
}

.bg-today{
    background-color:rgba(233, 84, 32, 0.2);
}

/* Native <dialog> used for the upgrade upsell (replaces Bootstrap modal JS).
   Inner .modal-* classes still provide the card styling. */
dialog.upgrade-modal{
    width:90%;
    max-width:500px;
    padding:0;
    border:none;
    border-radius:.3rem;
    box-shadow:0 .5rem 1rem rgba(0, 0, 0, .15);
}

dialog.upgrade-modal::backdrop{
    background:rgba(0, 0, 0, .5);
}

dialog.upgrade-modal .modal-content{
    border:none;
}

/* Keep anchored/highlighted posts clear of the fixed-top navbar when scrolled to. */
[id$="-ns"]{
    scroll-margin-top:70px;
}

/* ======================================================================
 * Dark mode — handled natively by Bootstrap 5.3's [data-bs-theme="dark"]
 * (the Bootswatch United build ships a theme-aware dark palette). Bootstrap
 * components recolor for free; only our own non-Bootstrap bits need a nudge.
 * ====================================================================== */
[data-bs-theme="dark"] .hr-text{
    color:#E0E0E0;
}

[data-bs-theme="dark"] .hr-text:after{
    color:#AAAAAA;
    background-color:var(--bs-body-bg);
}

[data-bs-theme="dark"] .custom-horizontal-line{
    background-color:#FFFFFF;
}