/* ============================================================
   UX POLISH - Extracted inline styles + a11y improvements
   Included after apple-theme.css in layout
   ============================================================ */

/* ---- Focus States (a11y): visible outline for keyboard users ---- */
.btn:focus-visible,
.btn.btn-primary:focus-visible,
.btn.bordered:focus-visible,
.primary-card:focus-visible,
a.primary-card:focus-visible,
.mega-ht-link:focus-visible,
.mega-dir-item:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.btn-search-toggle:focus-visible,
.health-link-pill:focus-visible,
.footer-links a:focus-visible,
.lang-switch-toggle:focus-visible {
    outline: 2px solid var(--apple-blue) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important;
}

/* Never remove outline in ":focus" without replacement — ensure fallback */
button:focus:not(:focus-visible) { outline: none; }
a:focus:not(:focus-visible) { outline: none; }

/* ---- Touch-Target Sizes (min 44x44 for mobile taps) ---- */
.btn-search-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 10px;
    color: var(--apple-text);
    border-radius: 8px;
}
.btn-search-toggle:hover {
    background: rgba(0, 113, 227, 0.08);
}
.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    padding: 10px !important;
}

/* ---- Breadcrumb: externalized inline-style ---- */
.breadcrumb {
    flex-wrap: wrap;
    overflow: visible;
}

/* ---- Detail-Page Banner: externalized inline-style ---- */
.page-banner {
    background-color: var(--apple-blue);
}

/* ---- Listing-Page Header Text: externalized inline-styles ---- */
.listing-header-text {
    max-width: none;
    margin-bottom: 4px;
}
.listing-header-meta {
    font-size: 11px;
    margin-top: 4px;
    margin-bottom: 12px;
    color: #fff;
    opacity: 0.75;
    display: block;
}

/* ---- Search Results Header ---- */
.search-results-header .search-results-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.search-results-header .search-count {
    color: var(--apple-text-sec);
    font-size: 14px;
    margin-top: 4px;
}

/* ---- Loading State (Spinner): replaces inline "Suche läuft…" ---- */
.search-loading {
    padding: 60px 0;
    text-align: center;
    color: var(--apple-text-sec);
}
.search-loading .spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0, 113, 227, 0.15);
    border-top-color: var(--apple-blue);
    border-radius: 50%;
    animation: sl-spin 0.8s linear infinite;
    margin-bottom: 16px;
}
.search-loading p {
    margin: 0;
    font-size: 14px;
}
@keyframes sl-spin {
    to { transform: rotate(360deg); }
}

/* Skeleton card variant for list loading */
.skeleton-card {
    background: #fff;
    border: 1px solid var(--apple-border);
    border-radius: var(--apple-radius-md);
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}
.skeleton-card .sk-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f0f0f2 0%, #e8e8ec 50%, #f0f0f2 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s infinite;
    flex-shrink: 0;
}
.skeleton-card .sk-lines { flex: 1; min-width: 0; }
.skeleton-card .sk-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f0f2 0%, #e8e8ec 50%, #f0f0f2 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s infinite;
    margin-bottom: 8px;
}
.skeleton-card .sk-line:last-child { margin-bottom: 0; width: 60%; }
@keyframes sk-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Empty State: replaces alert-danger ---- */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border: 1px solid var(--apple-border);
    border-radius: var(--apple-radius-md);
}
.empty-state .empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 113, 227, 0.08);
    color: var(--apple-blue);
    font-size: 28px;
    margin-bottom: 16px;
}
.empty-state .empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--apple-text);
    margin: 0 0 8px;
}
.empty-state .empty-text {
    color: var(--apple-text-sec);
    font-size: 15px;
    margin: 0 0 20px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.empty-state .empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ---- Health-Link Pill (used on listing-page, bundesland-page) ---- */
.health-link-pill {
    display: inline-block;
    padding: 6px 14px;
    background: var(--apple-bg);
    border: 1px solid var(--apple-border);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--apple-text);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.health-link-pill:hover {
    background: #fff;
    border-color: rgba(0, 113, 227, 0.35);
    color: var(--apple-blue);
}
.health-link-row {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---- Banner Logo Placeholder (detail page) ---- */
.banner-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 154px;
    height: 154px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 64px;
    font-weight: 600;
    text-transform: uppercase;
}

/* ---- Language Switcher: hide footer switcher on small screens (redundancy fix) ---- */
@media (max-width: 767.98px) {
    .footer-lang-switch { display: none; }
}

/* ---- Disable microtip tooltips on touch devices (no hover on mobile) ---- */
@media (hover: none) {
    [role="tooltip"][data-microtip-position]::before,
    [role="tooltip"][data-microtip-position]::after {
        display: none !important;
    }
}

/* ---- Related Directories (Wirkstoff/Glossar) ---- */
.related-directories {
    margin-top: 32px;
}
.related-directories h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--apple-text);
}

/* ---- Related Terms (Glossar/Wirkstoff/Health) ---- */
.related-terms {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--apple-border);
}
.related-terms h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--apple-text);
}
.related-terms-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.related-terms-list a {
    display: inline-block;
    padding: 5px 12px;
    background: var(--apple-bg);
    border: 1px solid var(--apple-border);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--apple-text);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.related-terms-list a:hover {
    background: #fff;
    border-color: rgba(0, 113, 227, 0.35);
    color: var(--apple-blue);
}

/* ---- Pagination info ---- */
.pagination-info {
    color: var(--apple-text-sec);
    font-size: 14px;
}

/* ---- Utility: section without top-padding ---- */
.primary-section.pt-0 {
    padding-top: 0;
}

/* ---- Stat-Box for detail page (founded year, employees, etc.) ---- */
.detail-stat-box {
    background: var(--apple-bg);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.detail-stat-box .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--apple-blue);
    margin: 0 0 4px;
}
.detail-stat-box .stat-label {
    font-size: 13px;
    color: var(--apple-text-sec);
    margin: 0;
}
.detail-info-box {
    background: var(--apple-bg);
    border-radius: 12px;
    padding: 16px;
}
.detail-info-box .info-title {
    font-weight: 600;
    margin: 0 0 4px;
}
.detail-info-box .info-text {
    font-size: 14px;
    color: var(--apple-text-sec);
    margin: 0;
}

/* ---- Detail card variant: vertical layout ---- */
.primary-card.primary-card--vertical {
    flex-direction: column;
    align-items: flex-start;
}
.primary-card.primary-card--vertical .card-content {
    width: 100%;
}

/* ---- AdSense display ---- */
.adsbygoogle {
    display: block;
}

/* ---- Bundesland page: subtext below category description ---- */
.bundesland-header-meta {
    font-size: 11px;
    margin-top: 4px;
    margin-bottom: 8px;
    color: var(--apple-text-sec);
    display: block;
}