/*
Theme Name: UHUA Black Gold
Theme URI: https://uhua.studio
Author: UHUA Studio
Description: 黑金幾何設計主題，帶有明暗切換功能。首頁自動抓取「特輯」文章作英雄展示，其他文章以卡片呈現。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: uhua-blackgold
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;600&family=Noto+Sans+TC:wght@300;400&display=swap');

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* Anti-flash: applies bg before JS loads */
html[data-mode=light] body.u4 { background: #F5F1E8 !important; }

/* ══════════════════════════════════════
   DARK MODE (default)
══════════════════════════════════════ */
body.u4 {
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
  --gold:   #C9A84C;
  --gold2:  #E8C96B;
  --bg:     #0B0B0B;
  --text:   #EDE8DC;
  --dim:    #1A1A1A;
  --muted:  #5A5540;
  --card-bg:    #0F0F0F;
  --card-hover: #141414;
  --feat-title: #F0EBE0;
  --feat-ex:    #8A836E;
  --card-title: #D8D0BC;
  --grid-gap:        rgba(201,168,76,.08);
  --divider-line:    rgba(255,255,255,.06);
  --border:          rgba(201,168,76,.2);
  --cards-label-line:rgba(255,255,255,.06);
  --logo-filter:     invert(1) brightness(1.8);
  --entry-heading:   #EDE8DC;
  --entry-text:      #9A9280;
  --entry-border:    rgba(201,168,76,.12);
  background: var(--bg);
  color: var(--text);
  transition: background .35s, color .35s;
  min-height: 100vh;
}

/* ══════════════════════════════════════
   LIGHT MODE
══════════════════════════════════════ */
body.u4.u4--light {
  --bg:     #F5F1E8;
  --text:   #1C1810;
  --dim:    #EDE8DE;
  --muted:  #9A8F6A;
  --card-bg:    #FAFAF5;
  --card-hover: #F0EBE0;
  --feat-title: #1C1810;
  --feat-ex:    #6A6050;
  --card-title: #2C2820;
  --grid-gap:        rgba(201,168,76,.2);
  --divider-line:    rgba(28,24,16,.08);
  --border:          rgba(201,168,76,.35);
  --cards-label-line:rgba(28,24,16,.08);
  --logo-filter:     none;
  --entry-heading:   #1C1810;
  --entry-text:      #5A5040;
  --entry-border:    rgba(201,168,76,.2);
}

/* ── Header ── */
.u4-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 56px;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: border-color .35s;
}
.u4-hd::after {
  content: ''; position: absolute; bottom: -1px; left: 56px;
  width: 80px; height: 2px; background: var(--gold);
}
.u4-hd img { height: 28px; filter: var(--logo-filter); transition: filter .35s; }
.u4-hd-logo { display: flex; align-items: center; }

/* Nav — supports both wp_nav_menu (ul/li/a) and bare <a> links */
.u4-hd nav { display: flex; align-items: center; gap: 32px; }
.u4-hd nav ul { list-style: none; display: flex; align-items: center; gap: 32px; }
.u4-hd nav ul li { margin: 0; }
.u4-hd nav ul li a,
.u4-hd nav > a {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .2s;
}
.u4-hd nav ul li a:hover,
.u4-hd nav > a:hover { color: var(--gold); }
.u4-hd nav ul li.current-menu-item > a { color: var(--gold); }

/* ── Mode Toggle Button ── */
.u4-toggle {
  position: fixed; bottom: 32px; right: 32px; z-index: 9999;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); color: var(--gold);
  border: 1px solid var(--border);
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .35s, color .35s, border-color .35s, transform .2s, box-shadow .2s;
  box-shadow: 0 2px 16px rgba(0,0,0,.3);
}
.u4-toggle:hover {
  background: var(--gold); color: var(--bg);
  transform: scale(1.08);
  box-shadow: 0 4px 20px rgba(201,168,76,.4);
}

/* ══════════════════════════════════════
   HOMEPAGE — 特輯精選（卡片式）
══════════════════════════════════════ */
.u4-feat-wrap { padding: 64px 56px 0; }
.u4-feat-label {
  display: flex; align-items: center; gap: 16px;
  font-size: 9px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 32px;
}
.u4-feat-label::before { content: '★'; }
.u4-feat-label::after  { content: ''; flex: 1; height: 1px; background: var(--border); transition: background .35s; }

/* Grid wrapper for featured cards */
.u4-feat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--grid-gap);
  transition: background .35s;
}

/* Each featured card */
.u4-feat-item {
  background: var(--dim);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: background .35s;
}

/* Single 特輯 → full-width side-by-side layout */
.u4-feat-item:only-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 55% 45%;
}
.u4-feat-item:only-child .u4-feat-img {
  aspect-ratio: auto;
  min-height: 400px;
}
.u4-feat-item:only-child .u4-feat-body {
  padding: 48px 48px 48px 40px;
  justify-content: center;
}
.u4-feat-item:only-child .u4-feat-body::before {
  content: ''; position: absolute; left: 0; top: 60px; bottom: 60px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}

/* Gold corner brackets */
.u4-feat-item::before, .u4-feat-item::after {
  content: ''; position: absolute;
  width: 24px; height: 24px;
  border-color: var(--gold); border-style: solid; z-index: 3; pointer-events: none;
}
.u4-feat-item::before { top: 16px; left: 16px; border-width: 2px 0 0 2px; }
.u4-feat-item::after  { bottom: 16px; right: 16px; border-width: 0 2px 2px 0; }

/* Featured image — explicit aspect-ratio ensures image always shows */
.u4-feat-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #222 center/cover no-repeat;
  display: block; position: relative; overflow: hidden;
  flex-shrink: 0;
}
.u4-feat-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 65%, rgba(0,0,0,.25));
}
.u4-feat-img--empty { display: flex; align-items: center; justify-content: center; }
.u4--light .u4-feat-img--empty {
  background: repeating-linear-gradient(45deg,#E8E3D8,#E8E3D8 6px,#EDE8DE 6px,#EDE8DE 12px);
}
body.u4:not(.u4--light) .u4-feat-img--empty {
  background: repeating-linear-gradient(45deg,#141414,#141414 6px,#1A1A1A 6px,#1A1A1A 12px);
}
.u4-feat-img--empty::before {
  content: '特輯'; font-family: 'Noto Serif TC', serif;
  font-size: 64px; font-weight: 600; color: rgba(201,168,76,.06);
  letter-spacing: .1em; position: absolute;
}

/* Body text area */
.u4-feat-body {
  padding: 24px 28px 30px;
  display: flex; flex-direction: column;
  flex: 1; position: relative;
}
.u4-feat-tag { font-size: 9px; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.u4-feat-title {
  font-family: 'Noto Serif TC', serif;
  font-size: clamp(16px, 2vw, 22px); font-weight: 300;
  line-height: 1.7; color: var(--feat-title); margin-bottom: 10px; flex: 1;
  transition: color .35s;
}
.u4-feat-title a { color: inherit; text-decoration: none; }
.u4-feat-title a:hover { color: var(--gold); }
.u4-feat-date { font-size: 10px; color: var(--muted); letter-spacing: .15em; margin-bottom: 14px; transition: color .35s; }
.u4-feat-ex   { font-size: 13px; line-height: 1.85; color: var(--feat-ex); margin-bottom: 20px; transition: color .35s; display: none; }
.u4-feat-item:only-child .u4-feat-ex { display: block; }
.u4-feat-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 9px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  border: 1px solid rgba(201,168,76,.3); padding: 8px 18px;
  align-self: flex-start; transition: all .25s;
}
.u4-feat-link:hover { background: var(--gold); color: var(--bg); }

/* ── Divider ── */
.u4-divider { display: flex; align-items: center; margin: 64px 56px 0; }
.u4-divider-line    { flex: 1; height: 1px; background: var(--divider-line); transition: background .35s; }
.u4-divider-diamond { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); margin: 0 16px; flex-shrink: 0; }

/* ── Cards Grid ── */
.u4-cards-wrap { padding: 40px 56px 80px; }
.u4-cards-label {
  display: flex; align-items: center; gap: 16px;
  font-size: 9px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 36px; transition: color .35s;
}
.u4-cards-label::after { content: ''; flex: 1; height: 1px; background: var(--cards-label-line); transition: background .35s; }

.u4-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--grid-gap); transition: background .35s; }

.u4-card {
  background: var(--card-bg); display: flex; flex-direction: column;
  transition: background .25s; position: relative;
}
.u4-card:hover { background: var(--card-hover); }
.u4-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s; z-index: 1;
}
.u4-card:hover::before { transform: scaleX(1); }

.u4-card-num {
  position: absolute; top: 16px; right: 20px;
  font-family: 'Noto Serif TC', serif; font-size: 36px; font-weight: 600;
  color: rgba(201,168,76,.08); line-height: 1; z-index: 0; pointer-events: none;
}
.u4-card-img {
  width: 100%; aspect-ratio: 16/9;
  background: var(--dim) center/cover no-repeat;
  position: relative; overflow: hidden; transition: background .35s;
}
.u4--light .u4-card-img--empty {
  background: repeating-linear-gradient(135deg,#EAE5D8,#EAE5D8 4px,#EDE8DE 4px,#EDE8DE 8px);
}
body.u4:not(.u4--light) .u4-card-img--empty {
  background: repeating-linear-gradient(135deg,#111,#111 4px,#161616 4px,#161616 8px);
}
.u4-card-img--empty { display: flex; align-items: center; justify-content: center; }
.u4-card-img--empty::after { content: 'UHUA'; font-size: 9px; letter-spacing: .4em; color: rgba(201,168,76,.2); }

.u4-card-body { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 1; }
.u4-card-cat  { font-size: 8px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.u4-card-title {
  font-family: 'Noto Serif TC', serif; font-size: 14px; font-weight: 300;
  line-height: 1.75; color: var(--card-title); margin-bottom: 10px; flex: 1; transition: color .35s;
}
.u4-card-title a { color: inherit; text-decoration: none; }
.u4-card-title a:hover { color: var(--gold); }
.u4-card-date { font-size: 9px; color: var(--muted); letter-spacing: .1em; margin-bottom: 16px; transition: color .35s; }
.u4-card-more {
  font-size: 9px; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(201,168,76,.5); text-decoration: none;
  align-self: flex-start; border-bottom: 1px solid rgba(201,168,76,.2);
  padding-bottom: 2px; transition: color .2s;
}
.u4-card-more:hover { color: var(--gold); }

/* ── CTA ── */
.u4-cta { padding: 0 56px 72px; text-align: center; }
.u4-cta a {
  display: inline-block; font-size: 9px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  border: 1px solid rgba(201,168,76,.3); padding: 14px 44px;
  transition: all .25s;
}
.u4-cta a:hover { background: var(--gold); color: var(--bg); }

/* ── Loading / Empty ── */
.u4-loading { padding: 60px; text-align: center; color: var(--muted); font-size: 12px; letter-spacing: .2em; }

/* ══════════════════════════════════════
   SINGLE POST
══════════════════════════════════════ */
.u4-single-hero {
  width: 100%; max-height: 480px; overflow: hidden;
  background: var(--dim) center/cover no-repeat;
  position: relative;
}
.u4-single-hero img { width: 100%; height: 480px; object-fit: cover; opacity: .8; }
.u4-single-hero--empty {
  height: 200px;
  background: repeating-linear-gradient(45deg,var(--dim),var(--dim) 6px,var(--bg) 6px,var(--bg) 12px);
  display: flex; align-items: center; justify-content: center;
}
.u4-single-hero--empty::after {
  content: 'UHUA'; font-size: 11px; letter-spacing: .5em; color: rgba(201,168,76,.2);
}

.u4-single-wrap { max-width: 760px; margin: 0 auto; padding: 64px 40px 100px; }

.u4-single-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.u4-single-cat  {
  font-size: 8px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(201,168,76,.3); padding: 4px 12px;
}
.u4-single-date { font-size: 10px; color: var(--muted); letter-spacing: .12em; }

.u4-single-title {
  font-family: 'Noto Serif TC', serif;
  font-size: clamp(22px, 3.5vw, 38px); font-weight: 300;
  line-height: 1.6; color: var(--feat-title);
  margin-bottom: 40px; padding-bottom: 32px;
  border-bottom: 1px solid var(--entry-border);
  transition: color .35s;
}

/* Post content typography */
.u4-entry-content {
  font-size: 15px; line-height: 2; color: var(--entry-text);
  transition: color .35s;
}
.u4-entry-content h1,
.u4-entry-content h2,
.u4-entry-content h3,
.u4-entry-content h4,
.u4-entry-content h5,
.u4-entry-content h6 {
  font-family: 'Noto Serif TC', serif; font-weight: 300;
  color: var(--entry-heading); margin: 40px 0 16px; line-height: 1.5;
  transition: color .35s;
}
.u4-entry-content h2 { font-size: 22px; border-left: 2px solid var(--gold); padding-left: 16px; }
.u4-entry-content h3 { font-size: 18px; }
.u4-entry-content p  { margin-bottom: 20px; }
.u4-entry-content a  { color: var(--gold); border-bottom: 1px solid rgba(201,168,76,.3); transition: border-color .2s; }
.u4-entry-content a:hover { border-color: var(--gold); }
.u4-entry-content img { width: 100%; margin: 32px 0; }
.u4-entry-content blockquote {
  margin: 32px 0;
  padding: 20px 28px;
  border-left: 2px solid var(--gold);
  background: var(--dim);
  font-family: 'Noto Serif TC', serif;
  font-style: italic; color: var(--feat-ex);
  transition: background .35s;
}
.u4-entry-content ul,
.u4-entry-content ol { padding-left: 24px; margin-bottom: 20px; }
.u4-entry-content li { margin-bottom: 8px; }
.u4-entry-content figure { margin: 32px 0; }
.u4-entry-content figcaption { font-size: 11px; color: var(--muted); text-align: center; margin-top: 8px; letter-spacing: .1em; }

/* Post nav */
.u4-post-nav {
  display: flex; justify-content: space-between; gap: 24px;
  margin-top: 64px; padding-top: 40px;
  border-top: 1px solid var(--entry-border);
}
.u4-post-nav a {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .2s;
  display: flex; align-items: center; gap: 8px;
}
.u4-post-nav a:hover { color: var(--gold); }
.u4-post-nav-title { font-family: 'Noto Serif TC', serif; font-size: 13px; font-weight: 300; margin-top: 6px; color: var(--feat-title); transition: color .35s; }

.u4-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 40px; cursor: pointer;
  transition: color .2s; text-decoration: none;
}
.u4-back:hover { color: var(--gold); }

/* ══════════════════════════════════════
   DARK/LIGHT MODE — POST CONTENT OVERRIDE
   WordPress block styles load after ours and can override CSS vars.
   We use !important here to guarantee colour changes on all pages.
══════════════════════════════════════ */

/* Page wrappers — explicit background so they change with mode */
.u4-single-wrap,
.u4-page-wrap {
  background: var(--bg);
  transition: background .35s;
}
/* Also cover the full viewport in case body has residual colour */
body.u4 { background: var(--bg) !important; color: var(--text) !important; }

/* ── Body text & inline elements ── */
.u4-entry-content,
.u4-entry-content p,
.u4-entry-content li,
.u4-entry-content dt,
.u4-entry-content dd,
.u4-entry-content td,
.u4-entry-content th,
.u4-entry-content caption {
  color: var(--entry-text) !important;
  transition: color .35s !important;
}

/* ── Headings ── */
.u4-entry-content h1,
.u4-entry-content h2,
.u4-entry-content h3,
.u4-entry-content h4,
.u4-entry-content h5,
.u4-entry-content h6,
.u4-single-title {
  color: var(--entry-heading) !important;
  transition: color .35s !important;
}

/* ── Links ── */
.u4-entry-content a {
  color: var(--gold) !important;
}

/* ── WP block paragraphs & headings ── */
.u4-entry-content .wp-block-paragraph,
.u4-entry-content .wp-block-list,
.u4-entry-content .wp-block-list li {
  color: var(--entry-text) !important;
  transition: color .35s !important;
}
.u4-entry-content .wp-block-heading {
  color: var(--entry-heading) !important;
  transition: color .35s !important;
}

/* ── Blockquote / Pullquote ── */
.u4-entry-content blockquote,
.u4-entry-content .wp-block-quote,
.u4-entry-content .wp-block-pullquote {
  background: var(--dim) !important;
  border-color: var(--gold) !important;
  transition: background .35s !important;
}
.u4-entry-content blockquote p,
.u4-entry-content .wp-block-quote p,
.u4-entry-content .wp-block-pullquote p,
.u4-entry-content .wp-block-quote cite,
.u4-entry-content .wp-block-pullquote cite {
  color: var(--feat-ex) !important;
  transition: color .35s !important;
}

/* ── Code / Pre ── */
.u4-entry-content code,
.u4-entry-content pre,
.u4-entry-content .wp-block-code {
  background: var(--dim) !important;
  color: var(--gold) !important;
  transition: background .35s, color .35s !important;
}

/* ── Table ── */
.u4-entry-content table { border-color: var(--border) !important; }
.u4-entry-content td, .u4-entry-content th {
  border-color: var(--border) !important;
  background: transparent !important;
}
.u4-entry-content thead td,
.u4-entry-content thead th {
  background: var(--dim) !important;
  color: var(--feat-title) !important;
}

/* ── Separator / HR ── */
.u4-entry-content hr,
.u4-entry-content .wp-block-separator {
  border-color: var(--border) !important;
  background: var(--border) !important;
}

/* ── Image caption ── */
.u4-entry-content figcaption,
.u4-entry-content .wp-block-image figcaption {
  color: var(--muted) !important;
  background: transparent !important;
}

/* ── Buttons ── */
.u4-entry-content .wp-block-button__link {
  background-color: var(--gold) !important;
  color: var(--bg) !important;
  transition: background .25s, color .25s !important;
}

/* ── Gutenberg colour palette classes ── */
.u4-entry-content .has-text-color    { color: inherit !important; }
.u4-entry-content .has-background    { background-color: var(--dim) !important; }
.u4-entry-content .has-white-color   { color: var(--entry-text) !important; }
.u4-entry-content .has-black-color   { color: var(--entry-text) !important; }

/* ── Containers / Groups ── */
.u4-entry-content .wp-block-group,
.u4-entry-content .wp-block-column,
.u4-entry-content .wp-block-columns {
  background: transparent;
  color: var(--entry-text);
  transition: background .35s, color .35s;
}

/* ── Single page meta & decorators ── */
.u4-single-meta .u4-single-date { transition: color .35s; }
.u4-single-title { border-color: var(--entry-border) !important; transition: color .35s, border-color .35s; }
.u4-back { transition: color .2s; }
.u4-post-nav-title { color: var(--feat-title) !important; transition: color .35s; }

/* ══════════════════════════════════════
   ARCHIVE / CATEGORY PAGE
══════════════════════════════════════ */
.u4-archive-header { padding: 56px 56px 0; }
.u4-archive-eyebrow {
  font-size: 9px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.u4-archive-title {
  font-family: 'Noto Serif TC', serif; font-size: clamp(24px, 3vw, 36px); font-weight: 300;
  color: var(--feat-title); margin-bottom: 48px; padding-bottom: 32px;
  border-bottom: 1px solid var(--border); position: relative;
  transition: color .35s;
}
.u4-archive-title::after {
  content: ''; position: absolute; bottom: -1px; left: 0;
  width: 60px; height: 2px; background: var(--gold);
}

/* Pagination */
.u4-pagination {
  display: flex; justify-content: center; gap: 8px;
  padding: 0 56px 80px;
}
.u4-pagination .page-numbers {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  font-size: 11px; letter-spacing: .1em;
  color: var(--muted); text-decoration: none;
  border: 1px solid rgba(201,168,76,.2);
  transition: all .2s;
}
.u4-pagination .page-numbers:hover,
.u4-pagination .page-numbers.current { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.u4-pagination .page-numbers.dots { border: none; }

/* ══════════════════════════════════════
   STATIC PAGE
══════════════════════════════════════ */
.u4-page-wrap { max-width: 760px; margin: 0 auto; padding: 72px 40px 100px; }
.u4-page-title {
  font-family: 'Noto Serif TC', serif; font-size: clamp(24px,3vw,36px); font-weight: 300;
  color: var(--feat-title); margin-bottom: 48px; padding-bottom: 28px;
  border-bottom: 1px solid var(--border); position: relative;
  transition: color .35s;
}
.u4-page-title::after {
  content: ''; position: absolute; bottom: -1px; left: 0;
  width: 60px; height: 2px; background: var(--gold);
}

/* ══════════════════════════════════════
   404 PAGE
══════════════════════════════════════ */
.u4-404 {
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 40px; text-align: center;
}
.u4-404-num {
  font-family: 'Noto Serif TC', serif; font-size: clamp(80px,15vw,140px); font-weight: 600;
  color: rgba(201,168,76,.08); line-height: 1; margin-bottom: 8px;
}
.u4-404-label {
  font-size: 9px; letter-spacing: .5em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px;
}
.u4-404-text { font-size: 14px; color: var(--muted); margin-bottom: 40px; }
.u4-404 a {
  font-size: 9px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(201,168,76,.3); padding: 12px 36px;
  transition: all .25s;
}
.u4-404 a:hover { background: var(--gold); color: var(--bg); }

/* ══════════════════════════════════════
   SEARCH PAGE
══════════════════════════════════════ */
.u4-search-form { padding: 0 56px 48px; display: flex; gap: 0; max-width: 560px; }
.u4-search-form input[type=search] {
  flex: 1; background: var(--dim); color: var(--text);
  border: 1px solid var(--border); border-right: none;
  padding: 12px 16px; font-size: 13px; outline: none;
  font-family: inherit; transition: background .35s, color .35s, border-color .35s;
}
.u4-search-form button {
  background: var(--gold); color: var(--bg); border: none;
  padding: 12px 20px; cursor: pointer; font-size: 12px;
  letter-spacing: .1em; transition: background .2s;
}
.u4-search-form button:hover { background: var(--gold2); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.u4-footer {
  text-align: center; padding: 32px 56px;
  border-top: 1px solid var(--border);
  font-size: 10px; letter-spacing: .2em; color: var(--muted);
  transition: border-color .35s, color .35s;
}
.u4-footer a { color: var(--muted); text-decoration: none; transition: color .2s; }
.u4-footer a:hover { color: var(--gold); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
  .u4-hd, .u4-feat-wrap, .u4-cards-wrap, .u4-cta,
  .u4-archive-header, .u4-pagination, .u4-search-form { padding-left: 24px; padding-right: 24px; }
  .u4-divider { margin-left: 24px; margin-right: 24px; }
  .u4-feat-grid { grid-template-columns: 1fr; }
  .u4-feat-item:only-child { grid-template-columns: 1fr; }
  .u4-feat-item:only-child .u4-feat-img { min-height: 220px; aspect-ratio: 16/9; }
  .u4-grid   { grid-template-columns: repeat(2,1fr); }
  .u4-single-wrap, .u4-page-wrap { padding: 40px 24px 80px; }
  .u4-footer { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 540px) {
  .u4-hd { flex-direction: column; gap: 16px; padding: 20px 24px; }
  .u4-hd nav, .u4-hd nav ul { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .u4-grid { grid-template-columns: 1fr; }
  .u4-feat-body { padding: 32px 24px; }
  .u4-toggle { bottom: 20px; right: 20px; }
  .u4-single-title { font-size: 22px; }
  .u4-post-nav { flex-direction: column; }
}