/* ==========================================================================
   MPC Timeline — frontend base styles.
   Per-instance values are injected as CSS custom properties by the shortcode
   (see MPC_Timeline_Shortcode::build_css). Layout/orientation rules are also
   emitted per device (media queries) by build_css. This file holds everything
   that is value-driven via vars and orientation-agnostic.
   ========================================================================== */

.mpc-tl, .mpc-tl * { box-sizing: border-box; }

.mpc-tl {
    position: relative;
    width: 100%;
}

/* The whole timeline is a grid; concrete grid setup (rows/cols) is emitted
   per device by build_css depending on orientation. */
.mpc-tl-stage {
    position: relative;
    min-width: 0;
}

/* ---- Connecting line (positioned by JS, drawn with borders so the chosen
   style — solid/dashed/dotted — is honoured). -------------------------------*/
.mpc-tl-track,
.mpc-tl-fill {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.mpc-tl.is-horizontal .mpc-tl-track {
    height: 0;
    border-top: var(--mpc-line-thickness, 3px) var(--mpc-line-style, solid) var(--mpc-line-color, #d8dee9);
    transform: translateY(-50%);
}
.mpc-tl.is-horizontal .mpc-tl-fill {
    height: 0;
    width: 0;
    border-top: var(--mpc-line-thickness, 3px) var(--mpc-line-style, solid) var(--mpc-line-active, #1e3a8a);
    transform: translateY(-50%);
}
.mpc-tl.is-vertical .mpc-tl-track {
    width: 0;
    border-left: var(--mpc-line-thickness, 3px) var(--mpc-line-style, solid) var(--mpc-line-color, #d8dee9);
    transform: translateX(-50%);
}
.mpc-tl.is-vertical .mpc-tl-fill {
    width: 0;
    height: 0;
    border-left: var(--mpc-line-thickness, 3px) var(--mpc-line-style, solid) var(--mpc-line-active, #1e3a8a);
    transform: translateX(-50%);
}

/* ---- Stage node (the icon circle) ----------------------------------------*/
.mpc-tl-node {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpc-tl-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mpc-icon-box, 56px);
    height: var(--mpc-icon-box, 56px);
    padding: var(--mpc-icon-pad, 0);
    margin: var(--mpc-icon-margin, 0);
    color: var(--mpc-icon-color, #94a3b8);
    background: var(--mpc-icon-bg, #ffffff);
    border-width: var(--mpc-icon-bw, 2px);
    border-style: var(--mpc-icon-bs, solid);
    border-color: var(--mpc-icon-bc, #cbd5e1);
    border-radius: var(--mpc-icon-br, 50%);
    box-shadow: var(--mpc-icon-shadow, none);
    overflow: hidden;
}
.mpc-tl-icon {
    display: block;
    width: var(--mpc-icon-size, 24px);
    height: var(--mpc-icon-size, 24px);
}
.mpc-tl-icon svg { width: 100%; height: 100%; display: block; stroke-width: var(--mpc-icon-stroke, 1.6); }
.mpc-tl-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Active / hover state rules for the icon box, content box and texts are emitted
   inline per device by the shortcode (build_css) so every property can be
   overridden independently per state and per device. */

/* Future / inactive stages are dimmed (forecast look).
   IMPORTANT: dim the glyph + content, NOT the icon box, so the box background
   stays opaque and the connecting line never shows through it. */
.mpc-tl-stage:not(.is-active) .mpc-tl-content,
.mpc-tl-stage:not(.is-active) .mpc-tl-icon { opacity: var(--mpc-inactive-op, 0.55); }

/* ---- Content block (date / title / description) --------------------------*/
.mpc-tl-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--mpc-content-gap2, 4px);
    max-width: var(--mpc-content-w, 180px);
    padding: var(--mpc-content-pad, 6px);
    margin: var(--mpc-content-margin, 0);
    background: var(--mpc-content-bg, transparent);
    border-radius: var(--mpc-content-br, 8px);
    border-width: var(--mpc-content-bw, 0);
    border-style: var(--mpc-content-bs, solid);
    border-color: var(--mpc-content-bc, #e5e7eb);
    box-shadow: var(--mpc-content-shadow, none);
}
.mpc-tl-content:empty { display: none; }

.mpc-tl-date {
    font-family: var(--mpc-date-ff, inherit);
    font-size: var(--mpc-date-fs, 12px);
    font-weight: var(--mpc-date-fw, 600);
    font-style: var(--mpc-date-fst, normal);
    line-height: var(--mpc-date-lh, 1.4);
    letter-spacing: var(--mpc-date-ls, normal);
    text-transform: var(--mpc-date-tt, none);
    color: var(--mpc-date-color, #1e3a8a);
    background: var(--mpc-date-bg, transparent);
    text-align: var(--mpc-date-ta, center);
    padding: var(--mpc-date-pad, 0);
    margin: var(--mpc-date-margin, 0);
    border-radius: var(--mpc-date-br, 0);
}
.mpc-tl-title {
    font-family: var(--mpc-title-ff, inherit);
    font-size: var(--mpc-title-fs, 16px);
    font-weight: var(--mpc-title-fw, 700);
    font-style: var(--mpc-title-fst, normal);
    line-height: var(--mpc-title-lh, 1.4);
    letter-spacing: var(--mpc-title-ls, normal);
    text-transform: var(--mpc-title-tt, none);
    color: var(--mpc-title-color, #0f172a);
    background: var(--mpc-title-bg, transparent);
    text-align: var(--mpc-title-ta, center);
    padding: var(--mpc-title-pad, 0);
    margin: var(--mpc-title-margin, 0);
    border-radius: var(--mpc-title-br, 0);
}
.mpc-tl-desc {
    font-family: var(--mpc-desc-ff, inherit);
    font-size: var(--mpc-desc-fs, 13px);
    font-weight: var(--mpc-desc-fw, 400);
    font-style: var(--mpc-desc-fst, normal);
    line-height: var(--mpc-desc-lh, 1.4);
    letter-spacing: var(--mpc-desc-ls, normal);
    text-transform: var(--mpc-desc-tt, none);
    color: var(--mpc-desc-color, #475569);
    background: var(--mpc-desc-bg, transparent);
    text-align: var(--mpc-desc-ta, center);
    padding: var(--mpc-desc-pad, 0);
    margin: var(--mpc-desc-margin, 0);
    border-radius: var(--mpc-desc-br, 0);
}

/* ---- Content visibility per group --------------------------------------
   The actual show/hide/popover rules are emitted inline per device by
   build_css (so each group — current / past / future — can use any mode).
   These are just the shared transition + affordances. */
.mpc-tl-content { transition: opacity .2s ease, visibility .2s; }
.mpc-tl.mpc-has-hover .mpc-tl-node { cursor: pointer; }

/* ---- Collapse ("…" expandible) ------------------------------------------
   Whether each device actually collapses (hides future stages behind the "…")
   is emitted per device by build_css. Here we only style the affordance. */
.mpc-tl-more-btn { cursor: pointer; }
.mpc-tl-more-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}
.mpc-tl-more-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: mpc-tl-dot 1.2s infinite ease-in-out;
}
.mpc-tl-more-dots span:nth-child(2) { animation-delay: .15s; }
.mpc-tl-more-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes mpc-tl-dot {
    0%, 70%, 100% { opacity: .35; transform: scale(.75); }
    35%           { opacity: 1;   transform: scale(1.15); }
}
.mpc-tl-more .mpc-tl-icon-box { animation: mpc-tl-more-glow 1.6s infinite ease-in-out; }
@keyframes mpc-tl-more-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30,58,138,0); }
    50%      { box-shadow: 0 0 0 7px rgba(30,58,138,.14); }
}
@media (prefers-reduced-motion: reduce) {
    .mpc-tl-more-dots span,
    .mpc-tl-more .mpc-tl-icon-box { animation: none; }
}

/* ---- Animation transitions ----------------------------------------------*/
.mpc-tl.mpc-anim .mpc-tl-fill {
    transition: width var(--mpc-dur, 500ms) linear, height var(--mpc-dur, 500ms) linear;
}
.mpc-tl.mpc-anim .mpc-tl-icon-box {
    transition: color var(--mpc-dur, 500ms) ease, background-color var(--mpc-dur, 500ms) ease,
                border-color var(--mpc-dur, 500ms) ease, box-shadow var(--mpc-dur, 500ms) ease;
}
.mpc-tl.mpc-anim .mpc-tl-content,
.mpc-tl.mpc-anim .mpc-tl-icon { transition: opacity var(--mpc-dur, 500ms) ease; }

/* While held (before the sweep reaches them):
   - the text/content starts fully HIDDEN (opacity 0) so it isn't shown ahead of
     time; it fades in exactly when its stage is revealed (with the icon);
   - the icon glyph is dimmed.
   The icon BOX keeps its opaque background so the line never shows through.
   The icon box colour/background hold + reveal are emitted inline by build_css. */
.mpc-tl.mpc-anim.mpc-anim-hold .mpc-tl-content:not(.mpc-pop) { opacity: 0; }
.mpc-tl.mpc-anim.mpc-anim-hold .mpc-tl-icon { opacity: var(--mpc-inactive-op, 0.55); }

/* As the sweep passes each node, JS adds .is-on → it fades in (popover content
   is excluded; it has its own hover visibility). */
.mpc-tl.mpc-anim .mpc-tl-stage.is-on .mpc-tl-content:not(.mpc-pop),
.mpc-tl.mpc-anim .mpc-tl-stage.is-on .mpc-tl-icon { opacity: 1; }

/* ---- Content → icon connector (caret / arrow / line) ---------------------*/
.mpc-tl-cc { box-sizing: content-box; z-index: 1; }

/* Reduced motion: skip the sweep, show end state. */
@media (prefers-reduced-motion: reduce) {
    .mpc-tl.mpc-anim .mpc-tl-fill { transition: none; }
    .mpc-tl.mpc-anim .mpc-tl-icon-box,
    .mpc-tl.mpc-anim .mpc-tl-stage { transition: none; }
}