/*
Theme Name: Modernize
Theme URI: https://yourwebsite.com/modernize
Description: 一个现代化的Bootstrap管理后台主题，专为WordPress设计。具有响应式布局、优雅的UI组件和丰富的功能。
Version: 1.0.0
Author: Your Name
Author URI: https://yourwebsite.com
Tags: bootstrap, responsive, admin, dashboard, modern, clean, custom-admin
Text Domain: modernize
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Requires at least: 5.0
Tested up to: 6.3
Requires PHP: 7.4

Modernize WordPress Theme, (C) 2024 Your Name
Modernize is distributed under the terms of the GNU GPL.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/

/* ==========================================================================
   基础样式和重置
   ========================================================================== */

/**
 * 1. 纠正所有浏览器的行高
 * 2. 防止调整字体大小时iOS上的方向变化
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * 移除所有元素的边距和填充
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/**
 * 添加正确的显示方式
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}

/**
 * 1. 添加正确的盒子尺寸
 * 2. 移除链接的下划线
 */

a {
  background-color: transparent; /* 1 */
  text-decoration: none; /* 2 */
  color: inherit;
}

/**
 * 添加正确的字体粗细
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. 移除表单元素的字体继承
 * 2. 纠正所有浏览器的字体大小继承
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 2 */
  line-height: 1.15; /* 2 */
  margin: 0; /* 3 */
}

/**
 * 显示溢出
 */

button,
input {
  overflow: visible;
}

/**
 * 移除按钮和输入的默认样式
 */

button,
select {
  text-transform: none;
}

/**
 * 纠正指针样式
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * 移除Firefox中的内边框和内边距
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * 恢复焦点样式
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * 添加正确的垂直对齐方式
 */

progress {
  vertical-align: baseline;
}

/**
 * 移除默认的列表样式
 */

ol,
ul {
  list-style: none;
}

/**
 * 添加正确的显示方式
 */

template {
  display: none;
}

/**
 * 隐藏属性
 */

[hidden] {
  display: none;
}

/* ==========================================================================
   排版
   ========================================================================== */

/**
 * 设置基础字体和行高
 */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * 标题样式
 */

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/**
 * 段落样式
 */

p {
  margin-bottom: 1rem;
}

/**
 * 链接样式
 */

a {
  color: #007cba;
  transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
  color: #005a87;
  text-decoration: underline;
}

/**
 * 选择文本样式
 */

::selection {
  background-color: #007cba;
  color: #fff;
}

::-moz-selection {
  background-color: #007cba;
  color: #fff;
}

/* ==========================================================================
   WordPress核心样式
   ========================================================================== */

/**
 * 对齐样式
 */

.alignleft {
  float: left;
  margin-right: 1.5em;
}

.alignright {
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/**
 * 图片样式
 */

.wp-caption {
  max-width: 100%;
  margin-bottom: 1.5em;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption-text {
  text-align: center;
  font-style: italic;
  margin-top: 0.5em;
  color: #666;
  font-size: 0.9em;
}

/**
 * 画廊样式
 */

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.gallery-item {
  flex: 1 1 auto;
}

.gallery-caption {
  display: block;
  font-style: italic;
  margin-top: 0.5em;
  color: #666;
  font-size: 0.9em;
}

/**
 * 粘性文章样式
 */

.sticky {
  position: relative;
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-left: 4px solid #007cba;
}

/* ==========================================================================
   文章和页面样式
   ========================================================================== */

/**
 * 文章样式
 */

.entry-header {
  margin-bottom: 2rem;
}

.entry-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.entry-meta {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.entry-content {
  line-height: 1.8;
}

.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
  color: #666;
  font-size: 0.9rem;
}

/**
 * 页面样式
 */

.page-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e9ecef;
}

.page-title {
  font-size: 2rem;
  color: #333;
}

/* ==========================================================================
   导航样式
   ========================================================================== */

/**
 * 主导航
 */

.main-navigation {
  display: block;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: block;
  padding: 0.5rem 1rem;
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.main-navigation a:hover,
.main-navigation a:focus {
  color: #007cba;
  background-color: #f8f9fa;
}

/**
 * 移动导航
 */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}

/* ==========================================================================
   小工具样式
   ========================================================================== */

.widget {
  margin-bottom: 2rem;
}

.widget-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #007cba;
}

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

.widget li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e9ecef;
}

.widget li:last-child {
  border-bottom: none;
}

.widget a {
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.widget a:hover {
  color: #007cba;
}

/* ==========================================================================
   评论样式
   ========================================================================== */

.comments-area {
  margin-top: 3rem;
}

.comments-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
}

.comment-meta {
  margin-bottom: 1rem;
}

.comment-author {
  font-weight: 600;
}

.comment-metadata {
  color: #666;
  font-size: 0.9rem;
}

.comment-content {
  line-height: 1.6;
}

.comment-reply-link {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: #007cba;
  color: #fff;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  text-decoration: none;
}

.comment-reply-link:hover {
  background-color: #005a87;
  color: #fff;
  text-decoration: none;
}

/* ==========================================================================
   表单样式
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  font-size: 1rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  border-color: #007cba;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 124, 186, 0.25);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #007cba;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background-color: #005a87;
}

/* ==========================================================================
   响应式设计
   ========================================================================== */

/**
 * 平板设备 (768px 及以上)
 */

@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
  
  .main-navigation ul {
    display: flex;
    flex-wrap: wrap;
  }
  
  .gallery-item {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

/**
 * 桌面设备 (1024px 及以上)
 */

@media screen and (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  .content-area {
    width: 70%;
    float: left;
    padding-right: 2rem;
  }
  
  .widget-area {
    width: 30%;
    float: right;
  }
}

/**
 * 大桌面设备 (1200px 及以上)
 */

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1400px;
  }
}

/* ==========================================================================
   工具类
   ========================================================================== */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.hidden {
  display: none;
}

/* ==========================================================================
   打印样式
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
  
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  
  thead {
    display: table-header-group;
  }
  
  tr,
  img {
    page-break-inside: avoid;
  }
  
  img {
    max-width: 100% !important;
  }
  
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  
  h2,
  h3 {
    page-break-after: avoid;
  }
  
  .main-navigation,
  .sidebar,
  .widget-area {
    display: none;
  }
}