@import 'base.css';

* {
    box-sizing: border-box;
}

/* Search-as-you-type match highlighting (issue #849). Painted via the shared
   zero-mutation highlighter (text_highlight.js) using the CSS Custom Highlight API —
   Range objects, no DOM mutation. Matches the legislation viewer's exact-match yellow
   (::highlight(search-match) in celex_ui.css) for cross-product consistency. */
::highlight(stride-search-match) {
    background-color: #ffeb3b;
    color: inherit;
}

/* New styles for page layout */
.page-wrapper {
    display: flex;
    height: 100vh; /* Full viewport height */
}

/* Main section adjustments without hero. The header is fixed and opaque, so
   offset the content by its height (plus a 20px gap) to clear it. With
   box-sizing: border-box the padding sits inside the 100vh, adding no overflow. */
.stride-page .stride-main-section {
    padding-top: calc(var(--header-height) + 20px);
    min-height: 100vh;
}

/* Adjust page wrapper for coral background */
.stride-page .page-wrapper {
    display: flex;
    min-height: calc(100vh - var(--header-height) - 20px); /* viewport minus the header offset above */
    background: transparent;
    position: relative;
    z-index: 1;
    padding-left: 1rem;  /* left gutter to match the 1rem right padding on .page-content */
}

/* Left column: wraps the view-toggle buttons (outside the panel) above the
   filter panel. This column now owns the fixed width + sticky behaviour that
   used to live on .page-sidebar, so the buttons can sit outside the white box
   while still aligning their top edge with the first row of cards. */
.stride-page .sidebar-column {
    width: 200px;
    flex-shrink: 0;
    position: sticky;
    /* Offset the sticky column below the fixed header (+20px gap) and shrink its height to
       match, so the bottom of the filter panel can't be clipped beneath the header. */
    top: calc(var(--header-height) + 20px);
    height: calc(100vh - var(--header-height) - 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Sidebar styling for coral background */
.stride-page .page-sidebar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 0 8px 8px 0;
}

/* Inside the new column the panel holds filters only; the column owns the
   width/stickiness, so reset those here and round all corners (no longer flush
   against the viewport edge). */
.stride-page .sidebar-column .page-sidebar {
    width: auto;
    height: auto;
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border-radius: 8px;  /* all four corners now that it's a floating box */
    border: none;  /* drop the flush-edge border-right now that it's a floating box */
    scrollbar-width: thin;  /* Firefox: thin bar so it doesn't square off the top-right corner */
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* WebKit: thin scrollbar with a transparent track so the rounded corner shows through */
.stride-page .sidebar-column .page-sidebar::-webkit-scrollbar {
    width: 6px;
}
.stride-page .sidebar-column .page-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.stride-page .sidebar-column .page-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.page-content {
    flex-grow: 1; /* Takes remaining width */
    overflow-y: auto; /* Allows vertical scrolling for content */
    padding: 1rem; /* Add some padding */
    height: 100vh; /* Full viewport height to enable its own scrollbar */
}

/* Main content area adjustments for coral background */
.stride-page .page-content {
    flex-grow: 1;
    background: transparent;
    overflow-y: auto;
    height: auto;
    min-height: calc(100vh - 200px);
    padding: 0 1rem;  /* Horizontal padding only */
    margin-top: 0;    /* No top margin — the section already supplies top padding (consolidated
                         from a second .stride-page .page-content rule lower in this file). */
}

.content-container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: var(--old-style-font);
}

.grid {
    max-width: 1200px;
    background: transparent;
    padding: 0;
    margin: 0 auto;
    /* Let Isotope handle the layout */
}

/* Ensure grid works properly with Isotope on coral background */
.stride-page .grid {
    padding: 0;
    margin: 0 auto;
    position: relative;
    /* Override flex from home.css - let Isotope handle layout completely */
    display: block !important;
    max-width: 100%;
    width: 100%;
}

.grid-item {
    padding: 5px;
    cursor: pointer;
    /* Isotope will handle positioning */
}

:root {
    --gutter-size: 5px;
    --column-count: 2;
    --expanded-columns: 3;
    --grid-item-height: 140px;
    --grid-item-expanded-rows: 3;
    --grid-item-expanded-height: calc(var(--grid-item-height) * var(--grid-item-expanded-rows));
    --transition-speed: 0.4s;
    --hover-transform: translateY(-1px);

    /* Card colors inherited from home.css */
    /* home.css defines: --card-color-white, --card-color-light-coral, --card-color-grey */
    /* Pattern: white, light coral, grey */

    /* S&S accent colours (--ss-coral etc.) now live in tokens.css */
}

/* Heading layout (typography comes from the canonical scale in components.css) */
#heading-content h1 {
    position: relative;
    z-index: 1;
    padding: 1rem 0;
    margin-bottom: 0.5rem;
}

/* Style the subtitle to match */
.mb-5 p {
    font-size: var(--font-size-normal);
    margin-bottom: 2rem;
}

/* Heading layout only (typography from the canonical scale) */
h1 {
    position: relative;
    z-index: 1;
    padding: 20px 0;
}

#filters {
    position: relative;
    z-index: 1;
}

/* SM breakpoint (≥576px) */
@media (min-width: 576px) {
    :root {
        --column-count: 3;
        --expanded-columns: 2;
    }
}

/* MD breakpoint (≥768px) */
@media (min-width: 768px) {
    :root {
        --column-count: 3;
        --expanded-columns: 2;
    }
}

/* LG breakpoint (≥992px) */
@media (min-width: 992px) {
    :root {
        --column-count: 4;
        --expanded-columns: 3;
    }
}

/* XL breakpoint (≥1200px) */
@media (min-width: 1200px) {
    :root {
        --column-count: 5;
        --expanded-columns: 3;
    }
}

/* XXL breakpoint (≥1500px) - 6 columns to prevent stretching */
@media (min-width: 1500px) {
    :root {
        --column-count: 6;
        --expanded-columns: 3;
    }
}

/* XXXL breakpoint (≥1800px) - 7 columns for very wide screens */
@media (min-width: 1800px) {
    :root {
        --column-count: 7;
        --expanded-columns: 3;
    }
}

/* XXXXL breakpoint (≥2200px) - 8 columns for ultra-wide screens */
@media (min-width: 2200px) {
    :root {
        --column-count: 8;
        --expanded-columns: 4;
    }
}

/* item is invisible, but used for layout */
.grid-item,
.grid-sizer {
    width: calc((100% / var(--column-count)) - (var(--gutter-size) * (var(--column-count) - 1) / var(--column-count)));
}

.grid-item {
    padding: 5px;
    height: var(--grid-item-height);
    /* Isotope will handle positioning */
}

/* item-content is visible, and transitions size */
.grid-item-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    border-color: hsla(0, 0%, 0%, 0.7);
    padding: 10px;
    transition: width var(--transition-speed), height var(--transition-speed);
}

/* Grid items on coral background - ensure proper sizing and hover effects */
.stride-page .grid-item-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* CRITICAL: Only transition visual properties on content wrapper
       Transform is SAFE here because this is .grid-item-content, not .grid-item
       Isotope only touches .grid-item positioning - content wrapper is independent
       This allows hover lift effect without interfering with Isotope's animations */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.stride-page .grid-item-content:hover {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Disable hover effect on expanded cards to prevent reflow issues */
.stride-page .grid-item.is-expanded .grid-item-content:hover {
    transform: none;
}

.grid-item-content h3.name {
    position: relative;
    /* left: 10px; */
    top: 50px;
    margin: 0;
    font-size: var(--font-size-large);
    line-height: 1.2;
}

.stride-page .grid-item .name {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 30px;
    line-height: 1.2;
    top: 45px;  /* Nudge name up 5px for more space with featured-text */
}

/* Apply line-clamp to h3.name in non-expanded grid items */
.grid-item:not(.is-expanded) .grid-item-content h3.name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.4em; /* Corresponds to 2 lines with 1.2 line-height */
    /* The existing position, top, margin, font-size, and line-height from the rule above will still apply */
}

.grid-item-content .symbol {
    position: absolute;
    left: 10px;
    top: 5px;
    font-size: var(--font-size-xxlarge);
    font-weight: bold;
    color: white;
    margin: 0;
}

.stride-page .grid-item .symbol {
    font-size: 42px;
    font-weight: bold;
    position: absolute;
    top: 5px;
    left: 10px;
    margin: 0;
    line-height: 1;
}

/* Hide sector text by default */
.grid-item-content .sector {
    display: none;  /* Hide by default */
    position: absolute;
    left: 10px;
    bottom: 8px;
    font-size: var(--font-size-normal);
    margin: 0;
}

.grid-item-content .featured-text {
    display: none;  /* Hide by default */
    position: absolute;
    left: 10px;
    bottom: 8px;
    font-size: var(--font-size-normal);
    margin: 0;
}

.stride-page .grid-item .featured-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 14px;
    margin: 0;
}

/* Show sector text only above 992px */
@media (min-width: 992px) {
    .grid-item-content .sector {
        display: block;  /* Show on larger screens */
    }
    
    /* Still hide sector when expanded */
    .grid-item.is-expanded .grid-item-content .sector {
        display: none;
    }
}

/* Show featured text only above 992px */
@media (min-width: 992px) {
    .grid-item-content .featured-text {
        display: block;  /* Show on larger screens */
        position: absolute;
        left: 10px;
        bottom: 8px;
        width: calc(100% - 20px); /* Full width minus padding */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Ensure name doesn't overlap with featured text */
    .grid-item-content h3.name {
        margin-bottom: 30px; /* Add space for featured text */
    }
    
    /* Still hide featured text when expanded */
    .grid-item.is-expanded .grid-item-content .featured-text {
        display: none;
    }
}

/* both item and item content change size */
.grid-item.is-expanded {
    width: calc((100% / var(--column-count) * var(--expanded-columns)) - (var(--gutter-size) * (var(--column-count) - 1) / var(--column-count)));
    height: var(--grid-item-expanded-height);
    z-index: 2;
}

.grid-item.is-expanded .grid-item-content {
    background-color: #4ECDC4;
}

/* .button / .button-group filter system now lives in components.css (flex + gap) */

/* Update section spacing */
h2 {
    margin: 10px 0 5px;
    font-size: 1.2em;
}

#filters {
    margin-bottom: 15px;
}

/* STRIDE inherits the three-color cycling pattern from home.css */
/* home.css defines .grid-item:nth-child(3n+1/2/3) rules that apply here */
/* Pattern: white, light coral, grey */

/* Dark text on all STRIDE cards (all are light backgrounds) */
.stride-page .grid-item .symbol,
.stride-page .grid-item .name,
.stride-page .grid-item .region,
.stride-page .grid-item .featured-text {
    color: var(--color-neutral-600);
}

.grid-item .detail-content {
    position: relative;
    top: 50px;
    /* left: 7px; */
    /* right: 0; */
    /* padding: 15px; */
    /* background: inherit; */
    /* opacity: 0; */
    transition: opacity var(--transition-speed) ease;
}

.grid-item.is-expanded .detail-content {
    opacity: 1;
}

/* --- Start: Styling for Isotope Card Detail Content (Flexbox Form-like Layout) --- */
.grid-item .detail-content .detail-flex-row {
    display: flex;
    padding: 4px 0; /* Adjust padding for tighter spacing in cards if needed */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Lighter separator for dark cards, adjust as needed */
    align-items: flex-start; 
    box-sizing: border-box;
}

.grid-item .detail-content .detail-flex-row:last-child {
    border-bottom: none;
}

.grid-item .detail-content .detail-flex-label {
    font-weight: bold; 
    flex: 0 0 140px; /* Adjusted label width for cards, can be same as table (160px) or different */
    padding-right: 8px; 
    /* Color will be inherited from .grid-item-content (via RAG status) */
    text-align: left;
    box-sizing: border-box;
    font-size: var(--font-size-small); /* Slightly smaller font for card details */
}

.grid-item .detail-content .detail-flex-value {
    flex-grow: 1;
    text-align: justify;
    box-sizing: border-box;
    word-break: break-word;
    font-size: var(--font-size-small); /* Slightly smaller font for card details */
    /* Color will be inherited from .grid-item-content (via RAG status) */
}

/* Styling for links within the card's flex detail view */
.grid-item .detail-content .detail-flex-value a {
    color: inherit; /* This will make it white on red/green cards, black on amber */
    text-decoration: underline;
    /* If inheriting doesn't provide enough contrast, set explicitly: */
    /* Example: Make links a contrasting bright color */
    /* color: #87CEFA; */ /* LightSkyBlue, good on dark backgrounds */
}

/* Override for links on AMBER cards to ensure readability if needed */
/* This rule can be removed if 'color: inherit;' above works for amber cards */
/* .grid-item[data-rag="amber"] .detail-content .detail-flex-value a { */
    /* color: #0056b3; */ /* Darker blue for light (amber) background if needed */
/* } */

/* --- End: Styling for Isotope Card Detail Content --- */

/* Regular grid item territory (region) */
.grid-item-content .region {
    position: absolute;
    right: 8px;
    top: 5px;
    margin: 0;
    color: white;
    font-size: var(--font-size-normal);
}

/* Region badge styling when expanded - keep it badge-sized, not huge */
.grid-item.is-expanded .grid-item-content .region {
    font-size: var(--font-size-normal);  /* Keep region as a small badge, not huge */
    font-weight: bold;
    top: 5px;  /* Align with symbol top position */
}

.stride-page .grid-item .region {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
}

/* Keep region badge small even when card is expanded - it's just a label */
.stride-page .grid-item.is-expanded .region {
    font-size: var(--font-size-xlarge);
    top: 5px;  /* Align with symbol top position for consistency */
}

/* Larger name when expanded */
.grid-item.is-expanded .grid-item-content h3.name {
    font-size: var(--font-size-xlarge);  /* Much larger, increased from 18px */
    font-weight: bold;
    line-height: 1.3;
    /* Reset line-clamp properties for expanded view */
    display: block; /* Or initial, depending on default h3 display */
    -webkit-line-clamp: unset;
    overflow: visible;
    text-overflow: clip; /* Or initial */
    max-height: none;
}

/* Hover effect moved to .grid-item-content to avoid interfering with Isotope positioning */

/* Card milestone timeline — compact list at bottom of card */
/* Card milestone timeline in expanded detail view */
.card-milestones {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-milestone {
    display: flex;
    align-items: baseline;
    font-size: var(--font-size-small);
    color: var(--color-neutral-500, #666);
}

.card-milestone.future {
    color: var(--color-neutral-700, #333);
}

.card-milestone.filter-match {
    background: rgba(255, 230, 0, 0.25);
    border-radius: 3px;
    padding: 1px 4px;
    margin: -1px -4px;
}

.card-milestone.overflow {
    display: none;
}

.card-milestones.expanded .card-milestone.overflow {
    display: flex;
}

.card-milestone-date {
    font-weight: 600;
    min-width: 120px;
    flex-shrink: 0;
}

.card-milestone-label {
    flex: 1;
}

.card-milestones-toggle {
    background: none;
    border: none;
    padding: 2px 0 0;
    font-size: var(--font-size-small);
    color: var(--color-coral-base);
    cursor: pointer;
    font-weight: 600;
    text-align: left;
}

.card-milestones.expanded .card-milestones-toggle {
    font-size: 0;
}

.card-milestones.expanded .card-milestones-toggle::before {
    content: 'show less';
    font-size: var(--font-size-small);
}




/* Add these styles for smooth transitions when updating featured text */
.featured-text {
    transition: opacity 0.2s ease-in-out;
}

.featured-text.updating {
    opacity: 0;
}

/* Table view adjustments for coral background */
.stride-page #table-view-container {
    background: rgba(255, 255, 255, 0.98);
    padding: 20px;
    margin-top: 5px;    /* The sidebar has 5px margin to match the top of the grid items, so we need to offset the table view container so the top lines up with the sidebar */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* View toggle buttons styling - now a transparent toolbar above the panel */
.stride-page .view-toggle-buttons {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Buttons stay white at all times (overriding Bootstrap btn-primary/secondary/outline);
   the active view is shown subtly with a coral icon + coral ring rather than a red fill.
   Height matches the search bar (38px) so the toolbar reads as one consistent control row. */
.stride-page .view-toggle-buttons .btn {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #6c757d;  /* grey icon (inactive) */
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 0.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);  /* float on the coral background */
    display: inline-flex;  /* center the icon vertically */
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Active view: still white — a coral icon + coral ring marks which view is showing. */
.stride-page .view-toggle-buttons .btn.active {
    background: #fff;
    color: var(--ss-coral);
    border-color: var(--ss-coral);
    box-shadow: 0 0 0 1px var(--ss-coral), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.stride-page .view-toggle-buttons .btn:hover {
    background: #fff;
    color: var(--ss-red);
}

/* Filter button styles on coral background */
/* Use :not() to exclude special states that have their own styling */
.stride-page .button-group button:not(.is-checked):not(.is-negative) {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--text-color);
    /* CRITICAL: Specify exact properties to transition, NOT 'all'
       'all' would include left/top which interferes with Isotope's layoutPosition() callbacks */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.stride-page .button-group button:not(.is-checked):not(.is-negative):hover {
    background: #ffffff;
    border-color: var(--ss-coral);
    color: var(--ss-coral);
}

.stride-page .button-group button.is-checked {
    background: var(--ss-coral);
    color: white;
    border-color: var(--ss-coral);
}

/* Negative filter state has its own styling defined in stride_sidebar.css */

/* DRT badges use the canonical badge typography from base.css (#716) —
   no weight override here; colours stay vibrant via their own bg classes. */

/* Card view specific adjustments */
.stride-page #card-view-container {
    background: transparent;
    padding: 0;
}

/* Header text styling for Digital Regulation Tracker */
.stride-page .header-lexray-text {
    display: flex;
    align-items: center;
}

/* Blinking cursor animation - moved to header_text_macros.html */

/* (The .stride-page .page-content margin-top:0 rule that used to live here was merged into
   the main .stride-page .page-content block above to remove a duplicate selector.) */

/* Links styling for coral background */
.stride-page a {
    color: var(--ss-coral);
    transition: color 0.3s ease;
}

.stride-page a:hover {
    color: var(--ss-red);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stride-page .page-wrapper {
        flex-direction: column;
    }

    .stride-page .page-sidebar {
        width: 100%;
        border-radius: 8px 8px 0 0;
        margin: 10px;
    }

    .stride-page .page-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

#legislation-stride-table th {
    vertical-align: middle; /* Improves alignment of headers */
}

/* Styles for DataTables child row expand/collapse control */
/* Fix dt-control triangle direction: right ▶ when closed, down ▼ when open */
#legislation-stride-table td.dt-control {
    cursor: pointer;
}
#legislation-stride-table td.dt-control:before {
    border-top: 5px solid transparent !important;
    border-left: 10px solid rgba(0, 0, 0, 0.5) !important;
    border-bottom: 5px solid transparent !important;
    border-right: 0 !important;
}
#legislation-stride-table tr.dt-hasChild td.dt-control:before {
    border-top: 10px solid rgba(0, 0, 0, 0.5) !important;
    border-left: 5px solid transparent !important;
    border-bottom: 0 !important;
    border-right: 5px solid transparent !important;
}

/* Style for table row hover cursor */
#legislation-stride-table tbody tr:hover {
    cursor: pointer;
}

/* --- Start: Styling for DataTables Child Row Content (Flexbox Form-like Layout) --- */
#legislation-stride-table td > .detail-view-flex-container {
    width: 100%;
    background-color: #f9f9f9; /* Light grey background */
    padding: 10px 15px; /* Padding around the container */
    font-family: var(--old-style-font);
    font-size: var(--font-size-small);
    color: #333; /* Default text color */
    box-sizing: border-box;
}

#legislation-stride-table td > .detail-view-flex-container .detail-flex-row {
    display: flex;
    padding: 7px 0; /* Padding top/bottom for each row */
    border-bottom: 1px solid #eee; /* Separator line */
    align-items: flex-start; /* Align items to the top if values wrap to multiple lines */
    box-sizing: border-box;
}

#legislation-stride-table td > .detail-view-flex-container .detail-flex-row:last-child {
    border-bottom: none; /* No border for the last row */
}

#legislation-stride-table td > .detail-view-flex-container .detail-flex-label {
    font-weight: bold !important; /* Kept important for now */
    flex: 0 0 160px; /* Do not grow, do not shrink, basis of 160px. ADJUST THIS WIDTH AS NEEDED. */
    padding-right: 10px; /* Space between label and value */
    color: var(--ss-dark) !important;  /* Kept important for now */
    text-align: left;
    box-sizing: border-box;
}

#legislation-stride-table td > .detail-view-flex-container .detail-flex-value {
    flex-grow: 1; /* Value takes up remaining space */
    color: #444 !important; /* Kept important for now */
    text-align: justify;
    box-sizing: border-box;
    word-break: break-word; /* Allow long values to wrap */
}

#legislation-stride-table td > .detail-view-flex-container .detail-flex-value a {
    color: #0056b3 !important; /* Kept important for now */
    text-decoration: underline;
}

#legislation-stride-table td > .detail-view-flex-container .detail-flex-value a:hover {
    color: #003d80; 
}
/* --- End: Styling for DataTables Child Row Content --- */

/* --- Bullet list and paragraph styling within detail values --- */
.detail-flex-value p {
    margin: 0 0 0.4em;
    font-size: inherit;
}
.detail-flex-value p:last-child {
    margin-bottom: 0;
}
.detail-flex-value ul {
    margin: 0;
    padding-left: 1.5em;
    list-style-type: disc;
    font-size: inherit;
}
.detail-flex-value li {
    margin-bottom: 0.3em;
    text-align: left;
    font-size: inherit;
}
.detail-flex-value li:last-child {
    margin-bottom: 0;
}

/* --- Article Links --- */
.article-item a {
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}
.article-item a:hover {
    text-decoration: underline;
}

/* Person rows (.contact-* / .lx-person) now live in components.css §13. */

/* Ensure all links in detail views have pointer cursor */
.detail-content a,
.detail-view-flex-container a {
    cursor: pointer;
}

/* Contact email, phone, and LinkedIn links */
.contact-item a[href^="mailto:"],
.contact-item a[href^="tel:"],
.contact-links a {
    cursor: pointer;
    color: inherit;
    margin-right: 0.5rem;
    text-decoration: none;
}

.contact-item a[href^="mailto:"]:hover,
.contact-item a[href^="tel:"]:hover,
.contact-links a:hover {
    color: #0056b3;
}
/* --- End: Article and Contact Links --- */

/* --- Start: Restricted Field Shimmer Effect --- */
/* Shimmer animation for teasing restricted content */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.detail-flex-row.restricted-field {
    opacity: 0.9;
}

.shimmer-placeholder {
    height: 1.1em;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.5) 20%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.5) 80%,
        rgba(255, 255, 255, 0.25) 100%
    );
    background-color: rgba(255, 255, 255, 0.15);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    min-width: 120px;
    display: inline-block;
}

/* Vary widths for visual interest */
.shimmer-placeholder.shimmer-short {
    min-width: 80px;
    max-width: 100px;
}

.shimmer-placeholder.shimmer-medium {
    min-width: 140px;
    max-width: 180px;
}

.shimmer-placeholder.shimmer-long {
    min-width: 200px;
    max-width: 280px;
}

/* Table view shimmer (lighter background context) */
#legislation-stride-table .shimmer-placeholder {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0.25) 20%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(0, 0, 0, 0.25) 80%,
        rgba(0, 0, 0, 0.12) 100%
    );
    background-color: rgba(0, 0, 0, 0.08);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* "More fields" CTA card (Option 3: Collapsed Teaser) */
.more-fields-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.4);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 0.5rem;
}

.more-fields-count {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
}

.more-fields-text {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    opacity: 0.9;
}

.btn-register-fields {
    display: inline-block;
    background: #fff;
    color: #333;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-register-fields:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #333;
    text-decoration: none;
}

/* Isotope card button - S&S coral with white text */
.grid-item .btn-register-fields {
    background: var(--color-coral-base);
    color: #fff;
}

.grid-item .btn-register-fields:hover {
    background: var(--color-coral-400);
    color: #fff;
}

/* Table view adjustments */
#legislation-stride-table .more-fields-card {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

#legislation-stride-table .more-fields-count,
#legislation-stride-table .more-fields-text {
    color: #333;
}

#legislation-stride-table .btn-register-fields {
    background: #0d6efd;
    color: #fff;
}

#legislation-stride-table .btn-register-fields:hover {
    background: #0b5ed7;
    color: #fff;
}
/* --- End: Restricted Field Shimmer Effect --- */
/* --- STRIDE fuzzy search bar (issue #849) --- */
.stride-search {
    margin-bottom: 1rem;
}
.stride-search__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    height: 38px;  /* same height as the view-toggle buttons */
    padding: 0 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.stride-search__bar:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
.stride-search__icon {
    color: #6c757d;
    flex: 0 0 auto;
}
.stride-search__input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.95rem;
    min-width: 0;
}
.stride-search__toggles {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 0 0 auto;
}
.stride-search__toggle {
    border: 0;
    background: transparent;
    color: #6c757d;
    padding: 0.2rem 0.4rem;
    border-radius: 0.35rem;
    cursor: pointer;
    line-height: 1;
}
.stride-search__toggle:hover {
    background: #f1f3f5;
    color: #212529;
}
.stride-search__toggle.is-active {
    /* Active = the search bar's own grey (matches the icon/count), not a Bootstrap blue. */
    background: #6c757d;
    color: #fff;
}
.stride-search__count {
    flex: 0 0 auto;
    color: #6c757d;
    font-size: 0.8rem;
    white-space: nowrap;
}
/* --- End: STRIDE fuzzy search bar --- */

/* --- Gated-match tease (issue #849): regs that match only via locked analysis --- */
.grid-item.stride-gated-match { position: relative; }
.grid-item.stride-gated-match::before {
    content: "\1F512 Register to read why";  /* 🔒 — decorative; the accessible label is set
        on the .grid-item via aria-label in markGatedMatches() (stride.js) for screen readers. */
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 3;
    font-size: 0.62rem;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 10px;
    background: rgba(13, 110, 253, 0.12);
    /* Darkened from #0d6efd to meet WCAG AA: #084298 on the light-blue tint is ~8:1
       (the old #0d6efd was only ~3.75:1, failing the 4.5:1 minimum for this small text). */
    color: #084298;
    pointer-events: none;
    white-space: nowrap;
}
#legislation-stride-table tbody tr.stride-gated-match td:nth-child(2) { position: relative; }
#legislation-stride-table tbody tr.stride-gated-match td:nth-child(2)::after {
    content: " \1F512";  /* 🔒 — decorative; accessible label set via aria-label in markGatedMatches() */
    color: #084298;  /* AA-compliant on the white table cell (was #0d6efd) */
    font-size: 0.85em;
}
/* --- End: Gated-match tease --- */