/**
 * Tech Tracker — Public Styles
 *
 * Loaded only on pages where one of the plugin's shortcodes is present.
 *
 * Default look (no admin overrides) deliberately inherits the active
 * theme's typography, colours and link styles — `inherit`,
 * `transparent`, and low-contrast hairline borders are used as the
 * fallback values inside every `var(--tlc-*, …)` declaration.
 *
 * The shortcode emits inline overrides on the wrapper's `style`
 * attribute whenever the admin has changed a value in the Settings
 * tab — and only for values that differ from the defaults — so the
 * stylesheet remains the single source of truth for default
 * appearance and the inline style stays compact.
 */

/* ── Container ─────────────────────────────────────────────── */
.tlc-calendar {
        max-width: 800px;
        margin: 0 auto;
        font-family: var(--tlc-font-family, inherit);
        font-size: var(--tlc-font-size, inherit);
        color: var(--tlc-text-color, inherit);
        line-height: 1.5;

        /*
         * Stacking context + solid background — fixes the v1.5.x
         * "widget content bleeds through" bug reported on themes that
         * use a sticky sidebar. Without an opaque background and its
         * own stacking context, a widget rendered above or below the
         * calendar can visually show THROUGH the calendar as the page
         * scrolls (because the calendar's element box is transparent
         * by default — every `var(--tlc-*-color, …)` resolves to
         * `inherit` / `transparent` so themes can layer on top).
         *
         * `isolation: isolate` creates a new stacking context so any
         * descendants (including the description popup) z-stack
         * relative to the calendar, never breaking out into adjacent
         * widgets. `position: relative` is required for descendants
         * with `position: absolute` to anchor to the calendar.
         *
         * The background falls back to `#ffffff` instead of
         * `transparent` — themes that need a transparent calendar
         * (e.g. dark mode) can still override with the
         * `--tlc-bg-color` setting in the admin.
         */
        position: relative;
        isolation: isolate;
        background: var(--tlc-bg-color, #ffffff);

        /* Container queries — let the calendar adapt to the WIDTH OF ITS
           PARENT (sidebar, narrow column, full-width page) instead of the
           viewport. A 300 px sidebar on a 1920 px desktop now renders the
           compact single-column layout. */
        container-type: inline-size;
        container-name: tlc;
}

/* ── Filters ───────────────────────────────────────────────── */
.tlc-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
}

.tlc-filter-group {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        background: transparent;
        border: 0;
        padding: 0;
}

.tlc-filter-tab,
.tlc-filter-pill {
        display: inline-block;
        padding: 6px 16px;
        border: 1px solid var(--tlc-border-color, rgba(0, 0, 0, 0.18));
        border-radius: 999px;
        font-size: 0.95em;
        font-weight: 500;
        color: inherit;
        background: transparent;
        text-decoration: none;
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        white-space: nowrap;
}

.tlc-filter-tab:hover,
.tlc-filter-pill:hover {
        background: rgba(0, 0, 0, 0.04);
        text-decoration: none;
        color: inherit;
}

/*
 * Active pill — text colour is hardcoded to white (no CSS variable
 * fallback) because the active background is always the dark
 * primary brand colour, and the previous fallback chain through
 * `--tlc-bg-color` could collapse to `transparent` on installs that
 * had not customised the card background, leaving the text invisible.
 * If admins choose a light primary colour they can either pick a
 * darker accent or override `.tlc-filter-tab--active` in their theme.
 */
.tlc-filter-tab--active,
.tlc-filter-pill--active {
        background: var(--tlc-primary-color, #1a1a2e);
        border-color: var(--tlc-primary-color, #1a1a2e);
        color: #ffffff !important;
}

.tlc-filter-tab--active:hover,
.tlc-filter-pill--active:hover {
        /* Keep the dark fill on hover so the active state stays obvious. */
        background: var(--tlc-primary-color, #1a1a2e);
        color: #ffffff !important;
}

/*
 * Filter <select> fallback — hidden by default; the container query
 * below swaps the pills for the dropdown at narrow widths so the
 * filter row never wraps into a tall stack of pills.
 */
.tlc-filter-select {
        display: none;
        width: 100%;
        padding: 8px 12px;
        font-size: 0.95em;
        font-family: inherit;
        color: inherit;
        background: var(--tlc-bg-color, #ffffff);
        border: 1px solid var(--tlc-border-color, rgba(0, 0, 0, 0.18));
        border-radius: 8px;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px 12px;
        padding-right: 32px;
}

/* ── Results count ─────────────────────────────────────────── */
.tlc-results-count {
        font-size: 0.9em;
        color: var(--tlc-muted-color, rgba(0, 0, 0, 0.55));
        margin: 0 0 12px;
}

/* ── List ──────────────────────────────────────────────────── */
.tlc-list {
        list-style: none;
        margin: 0;
        padding: 0;
        border-top: 1px solid var(--tlc-border-color, rgba(0, 0, 0, 0.08));
}

/* ── Item ──────────────────────────────────────────────────── */
.tlc-item {
        display: grid;
        grid-template-columns: 170px 1fr auto;
        column-gap: 24px;
        row-gap: 4px;
        align-items: start;
        padding: 16px 0;
        border-bottom: 1px solid var(--tlc-border-color, rgba(0, 0, 0, 0.08));
        background: var(--tlc-bg-color, transparent);
        border-radius: var(--tlc-radius, 0);
}

/*
 * Drop the trailing separator on the last item — feels cleaner when
 * the calendar is followed by other content (or the footer note).
 */
.tlc-list .tlc-item:last-child {
        border-bottom: 0;
}

/* When admin sets a non-transparent card background, give each row
   horizontal padding so the colour isn't flush to the page edge, and
   replace the hairline separator with a small gap so the cards read
   individually. The CSS variable is emitted on the .tlc-calendar
   wrapper (not per-item), so the selector must match via the parent. */
.tlc-calendar[style*="--tlc-bg-color"] .tlc-item {
        padding-left: 16px;
        padding-right: 16px;
        border-bottom: 0;
        margin-bottom: 8px;
}

.tlc-calendar[style*="--tlc-bg-color"] .tlc-list {
        border-top: 0;
}

/* Collapse the date column when the date block (and location) are hidden. */
.tlc-item--no-date {
        grid-template-columns: 1fr auto;
}

/* ── Date column ───────────────────────────────────────────── */
.tlc-datecol {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
}

.tlc-date {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.9em;
        line-height: 1.35;
        color: var(--tlc-muted-color, rgba(0, 0, 0, 0.65));
        white-space: nowrap;
        padding-top: 2px;
}

.tlc-date::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        background-color: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / contain;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / contain;
}

.tlc-date__text {
        display: inline-block;
}

/* Subtle accent for multi-day items — a small dot before the date text */
.tlc-item--multiday .tlc-date__text::after {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        margin-left: 6px;
        border-radius: 50%;
        background-color: var(--tlc-primary-color, currentColor);
        vertical-align: middle;
        opacity: 0.6;
}

/* ── Location ──────────────────────────────────────────────── */
.tlc-location {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85em;
        line-height: 1.35;
        color: var(--tlc-muted-color, rgba(0, 0, 0, 0.55));
        min-width: 0;
}

.tlc-location::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        background-color: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
}

.tlc-location__text {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
}

/* ── Content ───────────────────────────────────────────────── */
.tlc-content {
        min-width: 0;
}

.tlc-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 4px;
}

.tlc-name {
        font-family: var(--tlc-heading-font-family, inherit);
        font-size: 1.1em;
        font-weight: 600;
        color: inherit;
        margin: 0;
        line-height: 1.35;
}

/* ── Sponsored label ───────────────────────────────────────── */
.tlc-sponsored-label {
        display: inline-block;
        font-size: 0.7em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--tlc-muted-color, rgba(0, 0, 0, 0.55));
        border: 1px solid var(--tlc-border-color, rgba(0, 0, 0, 0.18));
        padding: 1px 6px;
        border-radius: 4px;
}

/* ── Badges row ────────────────────────────────────────────── */
.tlc-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 4px 0;
}

/*
 * Default category pill — used when the admin has not picked custom
 * colours for a category. The template emits an inline `style`
 * attribute carrying `background:#xxx;color:#xxx;border-color:#xxx`
 * when colours ARE set, and those inline values win over this rule
 * because inline styles trump stylesheet declarations of the same
 * specificity.
 */
.tlc-category-pill {
        display: inline-block;
        font-size: 0.78em;
        font-weight: 500;
        padding: 1px 9px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.06);
        border: 1px solid transparent;
        color: inherit;
}

/* Date-range fallback badge — only used when the date block is hidden. */
.tlc-event-daterange {
        display: inline-block;
        font-size: 0.8em;
        color: var(--tlc-muted-color, rgba(0, 0, 0, 0.6));
        padding: 1px 8px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.06);
}

/* ── Description ───────────────────────────────────────────── */
.tlc-description-wrap {
        position: relative;
        margin: 4px 0 0;
}

.tlc-description {
        font-size: 0.93em;
        color: var(--tlc-muted-color, rgba(0, 0, 0, 0.65));
        margin: 0;
        line-height: 1.5;

        /* Line-clamp with a CSS-variable fallback. The wrapper emits
           `--tlc-desc-lines` only when the admin overrides the default of 3.
           Setting it to `none` (via the inline style) effectively disables
           the clamp; the JS layer also detects whether the description is
           actually clamped and only enables the popup tooltip in that case. */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: var(--tlc-desc-lines, 3);
        line-clamp: var(--tlc-desc-lines, 3);
        overflow: hidden;
}

/*
 * Pop-up bubble showing the full description text. Hidden by default;
 * shown when the wrapper has the `--clamped` class (added by JS once
 * truncation is detected) AND the wrapper is hovered, focused, or has
 * the `--show` class (toggled on click for touch users).
 */
.tlc-description__popup {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 20;
        background: var(--tlc-bg-color, #ffffff);
        color: var(--tlc-text-color, inherit);
        border: 1px solid var(--tlc-border-color, rgba(0, 0, 0, 0.18));
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 0.93em;
        line-height: 1.5;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
        max-width: 480px;
        max-height: 320px;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(4px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
        pointer-events: none;
}

/* Small upward-pointing arrow joining the popup to its description. */
.tlc-description__popup::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 16px;
        width: 12px;
        height: 12px;
        background: inherit;
        border-top: 1px solid var(--tlc-border-color, rgba(0, 0, 0, 0.18));
        border-left: 1px solid var(--tlc-border-color, rgba(0, 0, 0, 0.18));
        transform: rotate(45deg);
        pointer-events: none;
}

.tlc-description-wrap--clamped:hover .tlc-description__popup,
.tlc-description-wrap--clamped:focus-within .tlc-description__popup,
.tlc-description-wrap--show .tlc-description__popup {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
}

/*
 * Inline-expand mode (used in narrow widget contexts — see container
 * query below). When `--show` is toggled by JS in narrow mode, instead
 * of revealing the absolute popup we simply lift the line clamp on the
 * description itself so the widget grows naturally and pushes adjacent
 * widgets down (no overflow / overlap into other widgets).
 *
 * The rule lives outside the container query so it's always available
 * if a theme manually adds `tlc-description-wrap--expanded` for some
 * reason; the actual switch between popup mode and inline mode is the
 * `display: none` on the popup inside the narrow rule below.
 */
.tlc-description-wrap--show .tlc-description,
.tlc-description-wrap--expanded .tlc-description {
        -webkit-line-clamp: unset;
        line-clamp: unset;
        display: block;
        cursor: pointer;
}

/* Cursor hint that the description has more content. */
.tlc-description-wrap--clamped .tlc-description {
        cursor: pointer;
}

.tlc-description:focus {
        outline: 2px solid var(--tlc-primary-color, rgba(26, 26, 46, 0.4));
        outline-offset: 2px;
        border-radius: 2px;
}

/* ── Link button ───────────────────────────────────────────── */
.tlc-link-wrap {
        align-self: center;
        flex-shrink: 0;
}

.tlc-link-btn {
        display: inline-block;
        font-size: 0.85em;
        font-weight: 500;
        color: var(--tlc-primary-color, inherit);
        border: 1px solid var(--tlc-border-color, rgba(0, 0, 0, 0.18));
        border-radius: 999px;
        padding: 5px 14px;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tlc-link-btn:hover {
        background: rgba(0, 0, 0, 0.04);
        text-decoration: none;
        color: var(--tlc-primary-color, inherit);
}

/* ── Empty state ───────────────────────────────────────────── */
.tlc-empty-state {
        background: transparent;
        border: 1px dashed var(--tlc-border-color, rgba(0, 0, 0, 0.18));
        border-radius: var(--tlc-radius, 8px);
        padding: 28px 20px;
        text-align: center;
}

.tlc-empty-state p {
        color: var(--tlc-muted-color, rgba(0, 0, 0, 0.55));
        margin: 0;
}

/* ── Footer note ───────────────────────────────────────────── */
.tlc-footer-note {
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid var(--tlc-border-color, rgba(0, 0, 0, 0.08));
        text-align: center;
}

.tlc-footer-note p {
        font-size: 0.85em;
        color: var(--tlc-muted-color, rgba(0, 0, 0, 0.55));
        margin: 0;
}

.tlc-footer-note a {
        color: var(--tlc-muted-color, rgba(0, 0, 0, 0.55));
        text-decoration: underline;
}

.tlc-footer-note a:hover {
        color: inherit;
}

/* ── Responsive ────────────────────────────────────────────── */

/*
 * Container query — fires when the calendar's PARENT is narrower than
 * 520 px (sidebar widget, narrow column) regardless of the viewport.
 * The original viewport-based @media query missed sidebar embeds on
 * desktop. This is the primary breakpoint.
 *
 * In narrow mode the layout reorders to:
 *   1. Title (with sponsored label)
 *   2. Date
 *   3. Location
 *   4. Category pill
 *   5. Description
 *   6. Learn-more link
 *
 * We use `display: contents` on the two intermediate wrappers
 * (`.tlc-datecol`, `.tlc-content`) so their children become direct
 * children of the `.tlc-item` grid, which lets us reorder them with
 * `order:` independently. `display: contents` is supported in every
 * shipping browser since 2018 and a11y is preserved in modern engines.
 */
@container tlc (max-width: 520px) {
        /* Swap the pill list for the compact <select> dropdown. */
        .tlc-filter-group--category {
                display: none;
        }
        .tlc-filter-select {
                display: block;
        }

        .tlc-filters {
                flex-direction: column;
                align-items: stretch;
        }

        .tlc-item,
        .tlc-item--no-date {
                grid-template-columns: 1fr;
                row-gap: 6px;
        }

        .tlc-datecol,
        .tlc-content {
                display: contents;
        }

        .tlc-meta             { order: 1; }
        .tlc-date             { order: 2; }
        .tlc-location         { order: 3; }
        .tlc-badges           { order: 4; }
        .tlc-description-wrap { order: 5; }
        .tlc-link-wrap {
                order: 6;
                align-self: start;
                margin-top: 4px;
        }

        /*
         * Sidebar / narrow widget contexts — disable the floating popup
         * bubble entirely. The bubble is `position: absolute` and at
         * widget widths it has nowhere to go without spilling into the
         * adjacent widget below. The JS still toggles `--show` on tap;
         * the CSS rules above (outside the container query) reinterpret
         * that as an inline line-clamp removal, so the widget grows in
         * place and naturally pushes neighbouring widgets down.
         */
        .tlc-description__popup {
                display: none !important;
        }

        .tlc-description-wrap--clamped:hover .tlc-description,
        .tlc-description-wrap--clamped:focus-within .tlc-description {
                /* In narrow mode `:hover` and `:focus-within` should NOT
                   auto-expand — only an explicit tap. Otherwise a sticky
                   sidebar widget would expand the moment the cursor crosses
                   it on its way to other content. */
                -webkit-line-clamp: var(--tlc-desc-lines, 3);
                line-clamp: var(--tlc-desc-lines, 3);
        }
}

/*
 * Viewport-based fallback — kept for browsers that do not yet support
 * container queries (very old Safari / Chrome / Firefox pre-2023).
 * At < 600 px viewport we always want the compact stacked + reordered
 * layout, regardless of container support.
 */
@media (max-width: 600px) {
        .tlc-filter-group--category {
                display: none;
        }
        .tlc-filter-select {
                display: block;
        }

        .tlc-filters {
                flex-direction: column;
                align-items: stretch;
        }

        .tlc-item,
        .tlc-item--no-date {
                grid-template-columns: 1fr;
                row-gap: 6px;
        }

        .tlc-datecol,
        .tlc-content {
                display: contents;
        }

        .tlc-meta             { order: 1; }
        .tlc-date             { order: 2; }
        .tlc-location         { order: 3; }
        .tlc-badges           { order: 4; }
        .tlc-description-wrap { order: 5; }
        .tlc-link-wrap {
                order: 6;
                align-self: start;
                margin-top: 4px;
        }

        .tlc-description__popup {
                display: none !important;
        }

        .tlc-description-wrap--clamped:hover .tlc-description,
        .tlc-description-wrap--clamped:focus-within .tlc-description {
                -webkit-line-clamp: var(--tlc-desc-lines, 3);
                line-clamp: var(--tlc-desc-lines, 3);
        }
}