/**
 * Rijscholen UI - Minimal Custom CSS
 * Bootstrap-first approach: only brand colors and essential overrides
 * WCAG 2.2 AAA compliant
 */

/* ==========================================================================
   Brand Colors (CSS Variables)
   ========================================================================== */
:root {
    --cbr-blue: #0066b3;
    --cbr-blue-dark: #004d86;
    --cbr-gray: #f5f5f5;
    --cbr-border: #e0e0e0;
    /* Focus ring - high visibility for AAA compliance */
    --focus-ring-color: #0066b3;
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
}

/* ==========================================================================
   Accessibility - Skip Link (WCAG 2.4.1)
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 1rem 1.5rem;
    background: var(--cbr-blue);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0.5rem;
    text-decoration: none;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
    outline: var(--focus-ring-width) solid #fff;
    outline-offset: var(--focus-ring-offset);
}

/* ==========================================================================
   Accessibility - Focus Indicators (WCAG 2.4.7, 2.4.11, 2.4.13)
   Enhanced focus for AAA - minimum 2px, high contrast
   ========================================================================== */
*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Remove default outline, use our custom one */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Focus within input group */
.search-container .input-group:focus-within {
    border-color: var(--cbr-blue);
    box-shadow: 0 0 0 var(--focus-ring-width) rgba(0, 102, 179, 0.25);
}

/* Links in table */
.results-table a:focus-visible {
    outline-offset: 1px;
    border-radius: 2px;
}

/* ==========================================================================
   Accessibility - Touch Targets (WCAG 2.5.8 AAA - 44x44px minimum)
   ========================================================================== */

/* Override Bootstrap primary color at component level */
.btn-primary {
    --bs-btn-bg: var(--cbr-blue);
    --bs-btn-border-color: var(--cbr-blue);
    --bs-btn-hover-bg: var(--cbr-blue-dark);
    --bs-btn-hover-border-color: var(--cbr-blue-dark);
}

.text-primary { color: var(--cbr-blue) !important; }
.bg-primary { background-color: var(--cbr-blue) !important; }
.border-primary { border-color: var(--cbr-blue) !important; }

/* Link colors */
a { color: var(--cbr-blue); }
a:hover { color: var(--cbr-blue-dark); }

/* ==========================================================================
   Search Box (Bootstrap input-group customization)
   ========================================================================== */
.search-container {
    position: relative;
    max-width: 600px;
}

.search-container .input-group {
    --bs-border-color: var(--cbr-border);
    border: 2px solid var(--cbr-border);
    border-radius: 0.375rem;
    transition: border-color 0.2s;
}

.search-container .input-group:focus-within {
    border-color: var(--cbr-blue);
}

.search-container .input-group-text {
    background: transparent;
    border: none;
    color: var(--cbr-blue);
}

.search-container .form-control {
    border: none;
    box-shadow: none;
}

.search-container .form-control:focus {
    box-shadow: none;
}

/* Clear button - minimum 44x44px touch target (WCAG 2.5.8) */
.search-container .btn-clear {
    border: none;
    background: transparent;
    color: #666;
    display: none;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.5rem;
    line-height: 1;
}

.search-container .btn-clear:hover,
.search-container .btn-clear:focus-visible {
    color: #333;
    background: rgba(0, 0, 0, 0.05);
}

.search-container.has-value .btn-clear {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Autocomplete Dropdown
   ========================================================================== */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--cbr-border);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.autocomplete-dropdown.show {
    display: block;
}

/* Dropdown options - 44px minimum touch target (WCAG 2.5.8) */
.autocomplete-dropdown [role="option"] {
    min-height: 44px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border: none;
    border-bottom: 1px solid #f0f0f0;
}

.autocomplete-dropdown [role="option"]:last-child {
    border-bottom: none;
}

/* City suggestions - highlighted style */
.autocomplete-dropdown .list-group-item-city {
    background: #f8f9fa;
    border-left: 3px solid var(--cbr-blue);
}

.autocomplete-dropdown .list-group-item-city:hover,
.autocomplete-dropdown .list-group-item-city.highlighted,
.autocomplete-dropdown .list-group-item-city[aria-selected="true"] {
    background: #e3f2fd;
}

.autocomplete-dropdown [role="option"]:hover,
.autocomplete-dropdown [role="option"].highlighted,
.autocomplete-dropdown [role="option"][aria-selected="true"] {
    background: #e8f4fc;
}

/* High contrast highlight indicator */
.autocomplete-dropdown [role="option"][aria-selected="true"] {
    outline: 2px solid var(--cbr-blue);
    outline-offset: -2px;
}

/* ==========================================================================
   Results Table (Bootstrap table customization)
   ========================================================================== */
.results-table th {
    background: var(--cbr-gray);
    cursor: pointer;
    user-select: none;
    vertical-align: bottom;
}

.results-table th:hover {
    background: #e8e8e8;
}

.results-table th a {
    color: inherit;
    text-decoration: none;
}

.results-table th a:focus-visible {
    outline-offset: -2px;
    border-radius: 4px;
}

/* Sort icons - with screen reader text */
.sort-icon {
    opacity: 0.3;
    font-size: 0.85rem;
}

.sort-icon.active {
    opacity: 1;
    color: var(--cbr-blue);
}

.results-table .school-name {
    color: var(--cbr-blue);
    font-weight: 500;
}

.results-table .school-name a {
    color: inherit;
    text-decoration: none;
}

.results-table tbody tr:hover .school-name a {
    text-decoration: underline;
}

/* Info tooltip badges */
.info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: #999;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    cursor: help;
}

.info-tip:hover {
    background: var(--cbr-blue);
}

/* ==========================================================================
   Detail Page
   ========================================================================== */
.detail-hero {
    position: relative;
    height: 250px;
    background: linear-gradient(135deg, #e8f4fc 0%, #cce5f5 100%);
}

.detail-title-box {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 1.25rem 3rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 90%;
}

.detail-title-box h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
}

/* On mobile, add spacing below hero to prevent title box overlap with breadcrumb */
@media (max-width: 767.98px) {
    .detail-hero + .container {
        padding-top: 60px;
    }
}

/* School logo in title box */
.school-logo {
    max-height: 80px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #e9ecef;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

/* Trade associations */
.trade-associations img {
    height: 40px;
    width: auto;
}

/* ==========================================================================
   Progress Ring (SVG-based circular progress)
   ========================================================================== */
.progress-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.progress-ring svg {
    transform: rotate(-90deg);
}

.progress-ring circle {
    fill: none;
    stroke-width: 8;
}

.progress-ring .bg {
    stroke: #e0e0e0;
}

.progress-ring .progress {
    stroke: var(--cbr-blue);
    stroke-linecap: round;
}

.progress-ring .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cbr-blue);
}

/* Location table customization */
.location-table th:not(:first-child),
.location-table td:not(:first-child) {
    text-align: center;
}

.location-table td:not(:first-child) {
    color: var(--cbr-blue);
}

/* ==========================================================================
   Accessibility - Reduced Motion (WCAG 2.3.3)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .skip-link {
        transition: none;
    }
}

/* ==========================================================================
   Accessibility - High Contrast Mode Support
   ========================================================================== */
@media (forced-colors: active) {
    .autocomplete-dropdown [role="option"][aria-selected="true"] {
        outline: 3px solid CanvasText;
    }

    .progress-ring .progress {
        stroke: Highlight;
    }
}

/* ==========================================================================
   Accessibility - Touch Targets for Contact Links
   ========================================================================== */
.contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    min-height: 44px;
    padding: 0.5rem 0;
}

.contact-link:hover {
    text-decoration: underline;
}

.contact-link svg {
    flex-shrink: 0;
    color: var(--cbr-blue);
}

/* ==========================================================================
   Popular Schools Cards - Hover/Focus States (WCAG 2.4.7, 2.4.11)
   ========================================================================== */
a.card {
    --bs-card-border-color: var(--cbr-border);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

a.card:hover {
    --bs-card-border-color: var(--cbr-blue);
}

a.card:focus-visible {
    --bs-card-border-color: var(--cbr-blue);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    outline: none;
}