/**
 * 无障碍辅助样式 (Accessibility Styles)
 * 用于支持语义化 HTML5 结构的特殊样式
 */

/* 屏幕阅读器可见但视觉上隐藏的文本 */
.visually-hidden,
.visuallyhidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.visually-hidden:focus,
.visuallyhidden:focus,
.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* 跳过导航链接 */
.skip-link {
    position: absolute;
    top: -42px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    font-size: 14px;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* 焦点样式增强 */
*:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

button:focus,
a:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* 表单标签 */
.form-label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.form-input:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgba(0, 123, 186, 0.25);
}

/* 图片占位符 - 保留 alt 文本的位置 */
.img-placeholder {
    background: #f0f0f0;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-style: italic;
}

/* 加载状态 */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007cba;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 错误提示 */
.alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.alert-error {
    background: #fde8e8;
    border-left: 4px solid #e53e3e;
    color: #c53030;
}

.alert-success {
    background: #f0fff4;
    border-left: 4px solid #38a169;
    color: #2f855a;
}

/* 确保语义化元素的正确呈现 */
main {
    display: block;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

article,
section,
aside,
footer {
    display: block;
}

/* 面包屑导航 */
.breadcrumb-nav {
    font-size: 14px;
    margin-bottom: 20px;
}

.breadcrumb-nav a {
    color: inherit;
    text-decoration: none;
}

.breadcrumb-nav a:hover {
    text-decoration: underline;
}

/* 文章归档结构 */
.archive-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.archive-header h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.archive-meta {
    color: #666;
    font-size: 14px;
}

/* 分页导航 */
.pagination-nav {
    margin-top: 40px;
    text-align: center;
}

/* 响应式布局基础 */
@media screen and (max-width: 768px) {
    .visually-hidden-mobile {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    
    main {
        padding: 10px;
    }
}