/* ========================================
   REUSABLE COMPONENT LIBRARY

   Generalized CSS components for the Legislative Bill Tracking System.
   These styles are documented in component-style-guide.html
   ======================================== */

/* ========================================
   RESPONSIVE BREAKPOINTS

   Standard breakpoints used throughout the application.
   Use these consistently for all responsive design.

   MOBILE-FIRST APPROACH:
   - Start with mobile styles as the default
   - Use min-width for larger screens
   - Use max-width sparingly for mobile-specific overrides

   BREAKPOINT REFERENCE:
   - Mobile Small:    <= 576px   (Small phones, compact views)
   - Mobile/Tablet:   <= 768px   (Tablets, large phones)
   - Tablet/Desktop:  <= 1024px  (Small laptops, tablets in landscape)
   - Desktop:         >= 1440px  (Standard desktop monitors)
   - Large Desktop:   >= 1800px  (Large monitors, 1080p+)
   - XL Desktop:      >= 2200px  (Ultra-wide, 4K monitors)

   USAGE EXAMPLES:
   Mobile-first (recommended):
     .component { ... }
     @media (min-width: 768px) { .component { ... } }

   Desktop-first (use for mobile-specific overrides):
     .component { ... }
     @media (max-width: 1024px) { .component { ... } }
   ======================================== */

/* ========== LAYOUT COMPONENTS ========== */

/* Main Container - Primary page wrapper with responsive sizing
   Uses clamp() for fluid scaling, reducing media query complexity:
   - max-width: scales from 1400px to 90% of viewport, capped at 2000px
   - padding: vertical stays 20px, horizontal scales 20px → 60px based on viewport */
.main-container {
    max-width: clamp(1400px, 90%, 2000px);
    margin: 0 auto;
    padding: 20px clamp(20px, 4vw, 60px);
}

/* Content Grid - Flexible grid system using CSS variables
   Gap scales fluidly from 20px to 50px based on viewport width */
.content-grid {
    display: grid;
    grid-template-columns: var(--grid-cols);
    gap: clamp(20px, 3vw, 50px);
}

/* Structural change - must remain as media query */
@media (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Grid utility - span all columns */
.grid-span-full {
    grid-column: 1 / -1;
}

@media (max-width: 1024px) {
    .grid-span-full {
        grid-column: auto;
    }
}

/* Content Grid Auto Modifier - Auto-fill columns based on min-width */
.content-grid--auto {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .content-grid--auto {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }
}

@media (min-width: 1200px) {
    .content-grid--auto {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
}

/* ========== CARD COMPONENT ========== */

.card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    /* overflow: hidden removed - allows sticky headers to work */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

.card__header {
    background: #080530;
    color: white;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.1rem);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: filter 0.2s ease;
}

/* Card body padding scales fluidly from 20px to 25px */
.card__body {
    padding: clamp(20px, 2.5vw, 25px);
}

/* ========== CARD MODIFIERS ========== */

/* Card with footer - Flex layout allows footer to stick to bottom */
.card--with-footer {
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

/* Clickable card - Visual feedback for interactive cards */
.card--clickable:hover {
    border-color: #3477b2;
}

/* ========== CARD ELEMENTS ========== */

/* Card Action Pane - italic description section */
.card__action-pane {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e4e7;
    padding: 12px 20px;
    font-size: 0.9rem;
    color: #495057;
    line-height: 1.4;
    font-style: italic;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* Card Footer - Base footer component */
.card__footer {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 8px 8px; /* Round bottom corners only */
    padding: 12px 20px;
    font-size: 0.9rem;
    color: #000000;
    margin-top: auto;
}

/* ========== CARD HEADER MODIFIERS ========== */

/* Bold Header - Larger, bolder text with fluid scaling */
.card__header--bold {
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
    font-weight: 700;
}

/* Gradient Header - Blue gradient background */
.card__header--gradient {
    background: linear-gradient(135deg, #080530 0%, #3477b2 100%);
}

/* Sticky Header - Two usage patterns:

   PATTERN 1 - Page-level sticky (header sticks when scrolling page):
   - Just add .card__header--sticky to the header
   - Keep .card__body with overflow: visible (default)
   - Header sticks to top of viewport when page scrolls

   PATTERN 2 - Card-internal sticky (header sticks when scrolling within card):
   - Add .card__header--sticky to the header
   - Add max-height and overflow-y: auto to .card__body
   - Header sticks to top of card while content scrolls within card
   - Useful for long lists in side panels or fixed-height containers */
.card__header--sticky {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* When card is collapsed, round all corners of header (it's now the only visible element) */
.collapsible.collapsed .card__header,
.collapsible.collapsed .card__header--sticky,
.collapsible-mobile-only.collapsed .card__header,
.collapsible-mobile-only.collapsed .card__header--sticky {
    border-radius: 8px 8px 8px 8px;
}

/* ========== CARD FOOTER MODIFIERS ========== */

/* Card Footer - Sponsors variant */
.card__footer--sponsors {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.sponsor-item {
    font-weight: 600;
    color: #3477b2;
    display: flex;
    align-items: center;
}

/* Expand toggle in footer */
.expand-toggle {
    color: #495057;
    font-size: 0.75rem;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ========== CARD TRUNCATED PATTERN ========== */
/* Body truncates but stays visible, footer always visible with expand toggle */

.card--truncated.collapsed .card__body {
    max-height: 100px;
    overflow: hidden;
    visibility: visible;
    padding: 20px;
    position: relative;
}

/* Add gradient fade-out at bottom of truncated text */
    .card--truncated.collapsed .card__body::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: linear-gradient(to bottom, transparent, white);
        pointer-events: none;
    }

.card--truncated.collapsed .card__action-pane {
    max-height: none;
    padding: 12px 20px;
    overflow: visible;
    visibility: visible;
    border-bottom: 1px solid #e0e4e7;
}

.card--truncated.collapsed .card__footer {
    display: flex;
}

/* When expanded, let body grow to full size */
.card--truncated:not(.collapsed) .card__body {
    max-height: none;
}

/* ========== STATUS CHIP MODIFIERS ========== */

/* LR Chip - gray variant (extends .square-status-chip) */
.status-chip--lr {
    background: #657281;
    color: white;
}

/* Today Chip - green variant (extends .square-status-chip) */
.status-chip--today {
    background: #198754;
    color: white;
}

/* ========== GLOBAL FOCUS STYLES ========== */

/* Enhanced focus styles for better keyboard navigation visibility */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #3477b2;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(52, 119, 178, 0.2);
}

/* Remove focus styles on mouse click (only show on keyboard navigation) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ========== COLLAPSIBLE BEHAVIOR ========== */

/* Always Collapsible - Works on all screen sizes */
.collapsible .card__header,
.collapsible__header {
    cursor: pointer;
}

.collapsible .card__header:hover,
.collapsible__header:hover {
    filter: brightness(1.1);
}

/* Enhanced focus styles for keyboard navigation */
.collapsible .card__header:focus,
.collapsible__header:focus {
    outline: 3px solid #3477b2;
    outline-offset: -3px;
    filter: brightness(1.15);
    box-shadow: 0 0 0 3px rgba(52, 119, 178, 0.2);
}

/* Modern browsers: only show focus on keyboard navigation, not mouse clicks */
.collapsible .card__header:focus:not(:focus-visible),
.collapsible__header:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
    filter: brightness(1.1);
}

.collapsible .card__header:focus-visible,
.collapsible__header:focus-visible {
    outline: 3px solid #3477b2;
    outline-offset: -3px;
    filter: brightness(1.15);
    box-shadow: 0 0 0 3px rgba(52, 119, 178, 0.2);
}

.collapsible .card__body,
.collapsible__body {
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.collapsible.collapsed .card__body,
.collapsible.collapsed .collapsible__body {
    max-height: 0;
    padding: 0 15px;
    overflow: hidden;
    visibility: hidden;
}

/* Hide action-pane and footer when collapsible card is collapsed (header-collapse pattern) */
.collapsible.collapsed .card__action-pane {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    border: none;
}

.collapsible.collapsed .card__footer {
    display: none;
}

/* Remove min-height when header-collapsible card is collapsed (not using truncated pattern) */
.collapsible:not(.card--truncated).collapsed {
    min-height: auto;
}

/* Mobile-Only Collapsible - Only collapses on mobile (≤1024px), always expanded on desktop */
.collapsible-mobile-only .card__header,
.collapsible-mobile-only__header {
    cursor: default;
}

@media (max-width: 1024px) {
    .collapsible-mobile-only .card__header,
    .collapsible-mobile-only__header {
        cursor: pointer;
    }

    .collapsible-mobile-only .card__header:hover,
    .collapsible-mobile-only__header:hover {
        filter: brightness(1.1);
    }

    /* Enhanced focus styles for keyboard navigation on mobile */
    .collapsible-mobile-only .card__header:focus,
    .collapsible-mobile-only__header:focus {
        outline: 3px solid #3477b2;
        outline-offset: -3px;
        filter: brightness(1.15);
        box-shadow: 0 0 0 3px rgba(52, 119, 178, 0.2);
    }

    .collapsible-mobile-only .card__header:focus:not(:focus-visible),
    .collapsible-mobile-only__header:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
        filter: brightness(1.1);
    }

    .collapsible-mobile-only .card__header:focus-visible,
    .collapsible-mobile-only__header:focus-visible {
        outline: 3px solid #3477b2;
        outline-offset: -3px;
        filter: brightness(1.15);
        box-shadow: 0 0 0 3px rgba(52, 119, 178, 0.2);
    }

    .collapsible-mobile-only .card__body,
    .collapsible-mobile-only__body {
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .collapsible-mobile-only.collapsed .card__body,
    .collapsible-mobile-only.collapsed .collapsible__body {
        max-height: 0;
        padding: 0 15px;
        overflow: hidden;
        visibility: hidden;
    }
}

/* ========== DATA LIST COMPONENT ========== */

/* Data List - Base list component for displaying label/value pairs */
.data-list {
    width: 100%;
}

.data-list__item {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 20px;
    padding: 12px 20px;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .data-list__item {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

.data-list__label {
    font-weight: 600;
    color: #495057;
}

.data-list__value {
    color: #000000;
}

/* Striped variant - alternating row colors */
.data-list--striped .data-list__item:nth-child(even) {
    background: #f8f9fa;
}

.data-list--striped .data-list__item:nth-child(odd) {
    background: white;
}

/* Data List Footer - Footer for additional actions/info */
.data-list__footer {
    background: #f8f9fa;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e0e4e7;
    color: #495057;
    font-size: 0.75rem;
    font-style: italic;
}

/* ========== ACCENT ITEM COMPONENT ========== */

/* Accent Item - Clickable item with sidebar color accent
   Used for grid/list items that need visual emphasis and interactivity */
.accent-item {
    background: #EEEEEE;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    border-left: 3px solid #3477b2;
    transition: all 0.2s ease;
    height: fit-content;
    display: block;
    text-decoration: none;
    color: #000000;
    cursor: pointer;
}

.accent-item:hover {
    background: #e9ecef;
    border-left-color: #b0171f;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #000000;
}

/* Active/selected state */
.accent-item.active {
    background: #1e3a5f;
    border-left-color: #1e3a5f;
    color: white;
}

.accent-item:focus {
    outline: 2px solid #3477b2;
    outline-offset: 2px;
    text-decoration: none;
    color: #000000;
}

/* When active, maintain white text on focus */
.accent-item.active:focus {
    color: white;
}

/* ========== INFO BAR COMPONENT ========== */

/* Info Bar - Displays label-value pairs in a highlighted container */
.info-bar {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    background: #ffffff;
    border: 1px solid #9D9D9D;
    border-radius: 6px;
    /*margin-bottom: 20px;*/
}

.info-bar__label {
    font-weight: 600;
    color: #000000;
    white-space: nowrap;
}

.info-bar__text {
    color: #000000;
}

/* ========== HEADER COMPONENTS ========== */

/* Main Header - Fluid padding using rem + vw
   rem respects zoom/user settings, vw provides responsive compression */
.main-header {
    background: #080530;
    color: white;
    padding: clamp(10px, 0.5rem + 1vw, 24px) clamp(12px, 0.6rem + 1.2vw, 28px);
    border-radius: 8px;
    /*margin-bottom: clamp(10px, 0.5rem + 1vw, 24px);*/
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Fluid typography using clamp() with rem units for accessibility
   - Scales smoothly based on viewport width
   - rem units ensure proper zoom behavior and respect browser font settings
   - Formula: clamp(min, preferred, max) where preferred uses vw + rem for smooth scaling */
.main-header-text {
    font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
    font-weight: bold;
    margin-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
}

.main-header-description {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    opacity: 0.95;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.heading--label {
    font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.9rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========== LINK CARD COMPONENTS ========== */

.link-card-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.link-card-item {
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #1e3a5f;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    display: block;
    text-align: left;
    width: auto;
}

.link-card-item:hover,
.link-card-item-with-chip:hover {
    background: #1e3a5f;
    color: white;
    border-color: #1e3a5f;
    text-decoration: none;
}

.link-card-item-with-chip {
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #1e3a5f;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
}

/* ========== STATUS CHIP COMPONENTS ========== */

.round-status-chip {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.square-status-chip {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.status-chip--success {
    background: #BBF7D0; /* Soft Green This one*/
    color: #000 !important;
}

.status-chip--warning {
    background: #ffc107;
    color: #000;
}

.status-chip--danger {
    background: #dc3545;
    color: white;
}

.status-chip--info {
    background: #17a2b8;
    color: white;
}

.status-chip--secondary {
    background: #6c757d;
    color: white;
}

/* ========== DETAIL GRID COMPONENT ========== */

/* Detail Grid - Two-column grid for label-value pairs */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

@media (max-width: 1024px) {
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Detail Grid Item - Container for each label-value pair */
.detail-grid__item {
    padding: 8px 0;
}

/* Detail Grid Label - Small uppercase label */
.detail-grid__label {
    font-size: 0.75rem;
    color: #6c757d;
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Detail Grid Value - The actual content/value */
.detail-grid__value {
    font-size: 0.875rem;
    color: #000000;
    font-weight: 500;
}

.detail-grid__value a {
    color: #1e3a5f;
    text-decoration: none;
}

.detail-grid__value a:hover {
    text-decoration: underline;
}

/* ========== TEXT CONTENT COMPONENT ========== */

/* Text Content Preformatted - For displaying preformatted text like bill summaries */
.text-content--preformatted {
    white-space: pre-wrap;
    line-height: 1.6;
    color: #000000;
    font-size: 0.95rem;
}

/* ========== CHEVRON ARROW ========== */

/* Base chevron arrow - All visual styling */
.chevron-arrow {
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(135deg);
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Rotate when parent is collapsed */
.collapsed .chevron-arrow {
    transform: rotate(45deg);
}

/* Chevron for always-collapsible elements - always visible */
.collapsible .chevron-arrow {
    display: inline-block;
}

/* Chevron for mobile-only collapsible - only visible on mobile */
.collapsible-mobile-only .chevron-arrow {
    display: none;
}

@media (max-width: 1024px) {
    .collapsible-mobile-only .chevron-arrow {
        display: inline-block;
    }
}

/* ========== MODAL COMPONENT ========== */

/* Alpine.js cloak - hide elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* Body scroll lock - prevents background scrolling when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Modal overlay - fluid padding using rem + vw for zoom respect */
.modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: clamp(8px, 0.4rem + 1vw, 24px);
}

/* Hide vanilla JS modals by default (those without x-show attribute) */
.modal:not([x-show]):not(.show) {
    display: none;
}

/* Ensure vanilla JS modals show with flex layout when .show class is added */
.modal.show {
    display: flex;
}

.modal__content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

/* Large modal variant - wider and taller */
.modal__content--large {
    max-width: 1200px;
    max-height: 85vh;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal header - fluid padding using rem + vw for zoom respect */
.modal__header {
    background: linear-gradient(135deg, #080530 0%, #3477b2 100%);
    color: white;
    padding: clamp(10px, 0.5rem + 1vw, 24px) clamp(12px, 0.6rem + 1.2vw, 28px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px 8px 0 0;
}

.modal__header h3 {
    margin: 0;
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
    font-weight: 600;
}

/* Modal body - fluid padding using rem + vw for zoom respect */
.modal__body {
    padding: clamp(10px, 0.5rem + 1vw, 24px) clamp(12px, 0.6rem + 1.2vw, 28px);
    overflow-y: auto;
    flex: 1;
}

.btn-modal-close {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-modal-close:hover,
.btn-modal-close:focus {
    background-color: white;
    color: #080530;
    text-decoration: none;
    outline: 3px solid #3477b2;
    outline-offset: 2px;
}

/* ========== BUTTON COMPONENTS ========== */

/* Primary Button - Main action button */
.btn--primary {
    background-color: #080530;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: sans-serif;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1.05rem);
}

.btn--primary:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn--primary:focus-visible {
    outline: 3px solid #3477b2;
    outline-offset: 2px;
}

/* Secondary Button - Outlined button */
.btn--secondary {
    background-color: white;
    color: #080530;
    border: 2px solid #080530;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: sans-serif;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1.05rem);
}

.btn--secondary:hover {
    background-color: #080530;
    color: white;
}

.btn--secondary:focus-visible {
    outline: 3px solid #3477b2;
    outline-offset: 2px;
}

/* Search Button - Blue accent button */
.btn--search {
    background-color: #3477b2;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: sans-serif;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1.05rem);
}

.btn--search:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 119, 178, 0.3);
}

.btn--search:focus-visible {
    outline: 3px solid #3477b2;
    outline-offset: 2px;
}

/* Danger Button - Red warning button */
.btn--danger {
    background-color: #b0171f;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: sans-serif;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1.05rem);
}

.btn--danger:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(176, 23, 31, 0.3);
}

.btn--danger:focus-visible {
    outline: 3px solid #3477b2;
    outline-offset: 2px;
}

/* Disabled Button - Non-interactive button */
.btn--disabled,
button:disabled,
input[type="submit"]:disabled {
    background-color: #9D9D9D;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: not-allowed;
    opacity: 0.6;
    font-family: sans-serif;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1.05rem);
}

/* ========== SCROLL TO TOP BUTTON ========== */

/* Base scroll to top button
   Uses clamp() for fluid sizing: scales down on smaller viewports
   - dimensions: 40px (mobile) → 50px (desktop)
   - positioning: 12px (mobile) → 20px (desktop) */
.btn-scroll-top {
    position: fixed;
    bottom: clamp(12px, 2vw, 20px);
    right: clamp(12px, 2vw, 20px);
    width: clamp(40px, 8vw, 50px);
    height: clamp(40px, 8vw, 50px);
    background-color: #1e3a5f;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: clamp(0.875rem, 0.8rem + 0.5vw, 1.125rem);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

.btn-scroll-top::before {
    content: '↑';
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    font-weight: bold;
}

.btn-scroll-top:hover,
.btn-scroll-top:focus {
    background-color: #0d2a4a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.4);
    outline: 3px solid #3477b2;
    outline-offset: 2px;
}

.btn-scroll-top.show {
    opacity: 1;
    visibility: visible;
}

/* Mobile-only variant - uses same fluid sizing as base variant
   Structural media query retained for display toggle */
.btn-scroll-top-only-mobile {
    position: fixed;
    bottom: clamp(12px, 2vw, 20px);
    right: clamp(12px, 2vw, 20px);
    width: clamp(40px, 8vw, 50px);
    height: clamp(40px, 8vw, 50px);
    background-color: #1e3a5f;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: clamp(0.875rem, 0.8rem + 0.5vw, 1.125rem);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
    display: none;
}

.btn-scroll-top-only-mobile::before {
    content: '↑';
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    font-weight: bold;
}

.btn-scroll-top-only-mobile:hover,
.btn-scroll-top-only-mobile:focus {
    background-color: #0d2a4a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.4);
    outline: 3px solid #3477b2;
    outline-offset: 2px;
}

.btn-scroll-top-only-mobile.show {
    opacity: 1;
    visibility: visible;
}

/* Structural change - must remain as media query */
@media (max-width: 1024px) {
    .btn-scroll-top-only-mobile {
        display: block !important;
    }
}