/* ==========================================================================
   Doge 主题 · 第 2 层:版式
   站头、导航、搜索框、主区栅格、页脚,以及 1080px / 720px 两个断点。

   移动优先:基础样式是窄屏,断点里做增强。
   本层只管「东西摆在哪」,「长什么样」交给 components.css。
   ========================================================================== */

/* --- 站头 ---------------------------------------------------------------- */

.doge-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--tan);
  border-bottom: var(--border);
}

.doge-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 12px 20px;
}

.doge-brand__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

a.doge-brand__name:hover {
  color: var(--coral);
}

/* 小屏上导航与搜索换行到下一行,避免挤成一团 */
.doge-header__inner {
  flex-wrap: wrap;
}

/* --- 导航 ---------------------------------------------------------------- */

.doge-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* 窄屏时让展开的菜单掉到开关下面一行,而不是被挤在同一行里 */
  gap: 12px;
  margin-left: auto;
}

/* 折叠开关。窄屏默认就是一个「☰ 菜单」按钮 */
.doge-nav__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-display);
  color: var(--ink);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  list-style: none;
}

/* 去掉浏览器给 summary 的默认三角 */
.doge-nav__summary::-webkit-details-marker {
  display: none;
}

.doge-nav__summary-icon {
  font-size: 18px;
  line-height: 1;
}

/* 窄屏:菜单默认收起,由 <details> 的 open 属性控制。
   这是本主题「无 JS 也能导航」的关键——浏览器自己维护 open,不需要脚本帮忙。 */
.doge-nav__list {
  display: none;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doge-nav__toggle[open] ~ .doge-nav__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doge-nav__list a {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-display);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
}

.doge-nav__list a:hover,
.doge-nav__list .current-menu-item > a {
  background: var(--mustard);
}

/* 桌面端:折叠开关整个撤掉,菜单横向常显。
   这一条不能少——.doge-nav__list 的基础规则是 display:none,没有它桌面端导航会整条消失。 */
@media (min-width: 721px) {
  .doge-nav__summary {
    display: none;
  }

  .doge-nav__list,
  .doge-nav__toggle[open] ~ .doge-nav__list {
    display: flex;
    flex-direction: row;
    gap: 4px;
    width: auto;
  }
}

/* --- 搜索表单 ------------------------------------------------------------ */

.doge-searchform {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1 1 220px;
  max-width: 420px;
}

.doge-searchform__field {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  background: var(--paper);
  border: var(--border);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  overflow: hidden;
}

/* 视觉上藏起「搜索」二字,但保留给屏幕阅读器 */
.doge-searchform__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.doge-searchform__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  background: transparent;
  border: 0;
}

.doge-searchform__input:focus {
  outline: none;
}

.doge-searchform__submit {
  padding: 8px 14px;
  font-family: var(--font-display);
  color: var(--ink);
  background: var(--mustard);
  border: var(--border);
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
}

.doge-searchform__submit:hover {
  background: var(--coral);
}

/* --- 主区与栅格 ---------------------------------------------------------- */

.doge-main {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 28px 20px 56px;
}

/* 有侧栏时的两列栅格。侧栏在 DOM 里排在正文之后,窄屏自然会掉到下面。
   用 minmax(0, 1fr) 而不是 1fr ——否则代码块、长表格会把栅格撑破。 */
.doge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

.doge-layout--nosidebar {
  grid-template-columns: minmax(0, 1fr);
}

.doge-content {
  min-width: 0;
}

/* --- 侧栏 ---------------------------------------------------------------- */

.doge-sidebar {
  /* 吸顶:当正文长得多时,侧栏自己不动,正文滚。 */
  position: sticky;
  top: 80px;          /* 站头高度 + 一点余量,防止被站头盖住 */
  /* 内部间距留给部件自己(见 setup.php 的 before/after_widget) */
}

/* 侧栏里的部件:卡片式,标题前带小柴犬图标。 */
.doge-widget {
  margin: 0 0 24px;
  padding: 20px;
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.doge-widget__title {
  position: relative;
  margin: 0 0 14px;
  padding-left: 28px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
}

/* 标题前的小柴犬:用占位狗 SVG,按 currentColor 吃文字颜色。 */
.doge-widget__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><rect width="120" height="120" fill="currentColor" opacity="0.15"/><path d="M30 46 L22 14 L52 32 Z" fill="currentColor"/><path d="M90 46 L98 14 L68 32 Z" fill="currentColor"/><ellipse cx="60" cy="66" rx="34" ry="30" fill="currentColor" opacity="0.15"/></svg>');
}

/* --- 页脚 ---------------------------------------------------------------- */

.doge-footer {
  background: var(--tan);
  border-top: var(--border);
}

.doge-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 20px;
  font-size: 15px;
  color: var(--brown);
}

.doge-footer__copy {
  margin: 0;
}

.doge-footer__links {
  margin: 0;
}

.doge-footer__meme {
  margin: 0;
  margin-left: auto;
  font-family: var(--font-meme);
}

/* --- 断点 ---------------------------------------------------------------- */

/* 1080px:收起侧栏,正文占满。侧栏不是必需内容,屏幕不够宽时先让它走。 */
@media (max-width: 1080px) {
  .doge-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* 720px:单列。站头竖排,导航折叠开关与列表各占一行。 */
@media (max-width: 720px) {
  .doge-header__inner {
    gap: 10px 12px;
    padding: 10px 14px;
  }

  .doge-brand__name {
    font-size: 22px;
  }

  .doge-nav {
    margin-left: auto;
  }

  .doge-searchform {
    flex: 1 1 100%;
    max-width: none;
  }

  .doge-main {
    padding: 20px 14px 40px;
  }

  .doge-footer__meme {
    margin-left: 0;
  }
}