/*
Theme Name: Chronicle
Theme URI: https://example.com/chronicle
Author: Chronicle Theme
Description: An editorial WordPress theme with a customisable left-hand sidebar, up to 20 front-page photo links, up to 20 sidebar photo links, user-defined category taxonomy label, font picker, colour picker, logo support, and unlimited pages and posts.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chronicle
Tags: blog, editorial, custom-menu, custom-logo, featured-images, left-sidebar, two-columns, translation-ready, custom-colors
*/

/* ============================================================
   DESIGN TOKENS  (defaults — overridden by Customizer inline CSS)
   ============================================================ */
:root {
  --color-ink:           #0f0e0d;
  --color-paper:         #f5f2ec;
  --color-accent:        #c0392b;
  --color-mid:           #6b6560;
  --color-rule:          #d4cfc8;
  --color-sidebar-bg:    #1a1714;
  --color-sidebar-fg:    #e8e3da;
  --color-sidebar-accent:#c0392b;

  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Crimson Pro', 'Georgia', serif;
  --font-sans:    'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'Courier Prime', 'Courier New', monospace;

  --sidebar-width: 280px;
  --max-content:   860px;
  --transition:    0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 18px; scroll-behavior: smooth; }
body  { background: var(--color-paper); color: var(--color-ink);
        font-family: var(--font-body); line-height: 1.7;
        -webkit-font-smoothing: antialiased; }
img   { max-width: 100%; height: auto; display: block; }
a     { color: inherit; text-decoration: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.chronicle-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.chronicle-sidebar { grid-column: 1; grid-row: 1 / 4; }
.chronicle-header  { grid-column: 2; grid-row: 1; }
.chronicle-main    { grid-column: 2; grid-row: 2; }
.chronicle-footer  { grid-column: 2; grid-row: 3; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.chronicle-sidebar {
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-fg);
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; display: flex; flex-direction: column;
  padding: 2.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: #333 var(--color-sidebar-bg);
}

/* Brand */
.sidebar-brand { padding: 0 1.75rem 2rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 1.5rem; }

.sidebar-logo img { max-width: 160px; max-height: 60px; width: auto; height: auto; object-fit: contain; margin-bottom: .5rem; }

.sidebar-brand-text a {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  color: #fff; letter-spacing: -.02em; display: block; line-height: 1.2;
}
.sidebar-brand-text .tagline {
  font-family: var(--font-sans); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--color-sidebar-accent); margin-top: .3rem;
}

/* Sidebar photo grid — up to 20, auto-columns */
.sidebar-photos {
  padding: 0 1rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
}
.sidebar-photos.count-1  { grid-template-columns: 1fr; }
.sidebar-photos.count-3  .sidebar-photo-item:first-child { grid-column: 1/-1; }
.sidebar-photos.count-5  .sidebar-photo-item:first-child { grid-column: 1/-1; }
.sidebar-photos.count-7  .sidebar-photo-item:first-child { grid-column: 1/-1; }
.sidebar-photos.count-9  .sidebar-photo-item:first-child { grid-column: 1/-1; }

.sidebar-photo-item { display: block; overflow: hidden; position: relative; }
.sidebar-photo-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* NO colour/filter change on hover */
.sidebar-photo-item img,
.photo-card img { transition: transform var(--transition); }
.sidebar-photo-item:hover img,
.photo-card:hover img { transform: scale(1.04); }

/* Nav */
.sidebar-nav { padding: 0 1.25rem; flex: 1; }
.sidebar-nav-label { font-family: var(--font-sans); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: .75rem; padding-left: .5rem; }
.sidebar-nav ul { list-style: none; }
.sidebar-nav ul li a { display: flex; align-items: center; gap: .6rem; padding: .55rem .5rem; font-family: var(--font-sans); font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.65); border-radius: 4px; transition: all var(--transition); }
.sidebar-nav ul li a::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--color-sidebar-accent); opacity:0; transition:opacity var(--transition); flex-shrink:0; }
.sidebar-nav ul li a:hover,
.sidebar-nav ul li.current-menu-item a { color:#fff; background:rgba(255,255,255,.06); }
.sidebar-nav ul li a:hover::before,
.sidebar-nav ul li.current-menu-item a::before { opacity:1; }

/* Taxonomy list */
.sidebar-chapters { padding: 1.5rem 1.25rem 0; }
.sidebar-chapters h3 { font-family:var(--font-sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:.75rem; padding-left:.5rem; }
.sidebar-chapters ul { list-style:none; }
.sidebar-chapters ul li a { display:block; padding:.4rem .5rem; font-family:var(--font-sans); font-size:.78rem; color:rgba(255,255,255,.5); transition:color var(--transition); border-left:2px solid transparent; }
.sidebar-chapters ul li a:hover { color:var(--color-sidebar-accent); border-left-color:var(--color-sidebar-accent); }

/* ============================================================
   HEADER
   ============================================================ */
.chronicle-header { padding:1.5rem 3rem; border-bottom:1px solid var(--color-rule); display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--color-paper); position:sticky; top:0; z-index:100; }
.header-date { font-family:var(--font-sans); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--color-mid); }
.header-search form { display:flex; align-items:center; gap:.5rem; border-bottom:1px solid var(--color-rule); padding-bottom:2px; }
.header-search input { background:none; border:none; outline:none; font-family:var(--font-sans); font-size:.78rem; color:var(--color-ink); width:140px; }
.header-search button { background:none; border:none; cursor:pointer; color:var(--color-mid); font-size:.8rem; padding:0; }
.header-menu { display:flex; list-style:none; gap:1.5rem; }
.header-menu li a { font-family:var(--font-sans); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--color-mid); transition:color var(--transition); }
.header-menu li a:hover,
.header-menu li.current-menu-item a { color:var(--color-ink); }

/* ============================================================
   MAIN
   ============================================================ */
.chronicle-main { padding:3rem; max-width: calc( var(--max-content) + 6rem ); }

/* ============================================================
   PHOTO CARD  (shared by front page and sidebar)
   ============================================================ */
.photo-card { position:relative; overflow:hidden; display:block; background:var(--color-rule); }
.photo-card img { width:100%; height:100%; object-fit:cover; min-height:140px; }
/* No colour/filter on hover — only very subtle scale */
.photo-card:hover img { transform:scale(1.03); }

/* Caption overlay */
.photo-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 60%); display:flex; flex-direction:column; justify-content:flex-end; padding:.8rem; pointer-events:none; opacity:0; transition:opacity var(--transition); }
.photo-card-overlay.always-visible { opacity:1; }
.photo-card:hover .photo-card-overlay:not(.always-visible) { opacity:1; }
.photo-label { font-family:var(--font-sans); font-size:.7rem; font-weight:600; color:#fff; letter-spacing:.04em; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.photo-chapter { font-family:var(--font-sans); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-sidebar-accent); margin-bottom:.25rem; }

.photo-card-placeholder { background:var(--color-rule); display:flex; align-items:center; justify-content:center; min-height:140px; aspect-ratio:4/3; }
.photo-card-placeholder span { font-family:var(--font-sans); font-size:.65rem; color:var(--color-mid); letter-spacing:.05em; }

/* ============================================================
   FRONT PAGE PHOTO GRID
   ============================================================ */
.front-photo-grid { margin-bottom:3.5rem; }
.front-photo-grid > h2 { font-family:var(--font-sans); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--color-mid); margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid var(--color-rule); }

.photo-grid { display:grid; gap:.75rem; }

/* Column counts by photo count */
.photo-grid.grid-count-1  { grid-template-columns:1fr; }
.photo-grid.grid-count-2  { grid-template-columns:repeat(2,1fr); }
.photo-grid.grid-count-3  { grid-template-columns:repeat(3,1fr); }
.photo-grid.grid-count-4  { grid-template-columns:repeat(4,1fr); }
.photo-grid.grid-count-5,
.photo-grid.grid-count-6  { grid-template-columns:repeat(3,1fr); }
.photo-grid.grid-count-7,
.photo-grid.grid-count-8,
.photo-grid.grid-count-9  { grid-template-columns:repeat(3,1fr); }
.photo-grid.grid-count-10,
.photo-grid.grid-count-11,
.photo-grid.grid-count-12 { grid-template-columns:repeat(4,1fr); }
.photo-grid.grid-count-13,
.photo-grid.grid-count-14,
.photo-grid.grid-count-15 { grid-template-columns:repeat(5,1fr); }
.photo-grid.grid-count-16,
.photo-grid.grid-count-17,
.photo-grid.grid-count-18,
.photo-grid.grid-count-19,
.photo-grid.grid-count-20 { grid-template-columns:repeat(5,1fr); }

/* First item always slightly larger */
.photo-grid .grid-featured { grid-column: 1/3; grid-row: 1/3; }
.photo-grid.grid-count-1  .grid-featured,
.photo-grid.grid-count-2  .grid-featured,
.photo-grid.grid-count-3  .grid-featured { grid-column:auto; grid-row:auto; }

.photo-grid .photo-card img { min-height:120px; }
.photo-grid .grid-featured img { min-height:280px; }

/* ============================================================
   FRONT PAGE — LATEST POSTS
   ============================================================ */
.front-latest { margin-top:2rem; }
.section-rule { display:flex; align-items:center; gap:1rem; margin-bottom:1.75rem; }
.section-rule h2 { font-family:var(--font-sans); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--color-mid); white-space:nowrap; }
.section-rule::after { content:''; flex:1; height:1px; background:var(--color-rule); }

/* ============================================================
   POST CARDS
   ============================================================ */
.post-list { display:flex; flex-direction:column; gap:2rem; }
.post-card { display:grid; grid-template-columns:1fr 160px; gap:1.5rem; padding-bottom:2rem; border-bottom:1px solid var(--color-rule); }
.post-card:last-child { border-bottom:none; }
.post-card-meta { display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; }
.post-chapter-tag { font-family:var(--font-sans); font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent); background:rgba(192,57,43,.08); padding:.2em .5em; border-radius:2px; }
.post-date { font-family:var(--font-sans); font-size:.62rem; letter-spacing:.06em; color:var(--color-mid); }
.post-card h2, .post-card h3 { font-family:var(--font-display); font-weight:700; font-size:1.25rem; line-height:1.25; margin-bottom:.5rem; letter-spacing:-.01em; }
.post-card h2 a:hover, .post-card h3 a:hover { color:var(--color-accent); }
.post-card-excerpt { font-size:.9rem; color:var(--color-mid); line-height:1.6; margin-bottom:.75rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.read-more { font-family:var(--font-sans); font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent); display:inline-flex; align-items:center; gap:.35rem; transition:gap var(--transition); }
.read-more:hover { gap:.6rem; }
.post-card-thumb { align-self:start; overflow:hidden; }
.post-card-thumb img { width:160px; height:110px; object-fit:cover; transition:transform var(--transition); }
.post-card:hover .post-card-thumb img { transform:scale(1.04); }

/* ============================================================
   SINGLE / PAGE
   ============================================================ */
.entry-header { margin-bottom:2rem; }
.entry-chapter-label { font-family:var(--font-sans); font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent); margin-bottom:.75rem; display:block; }
.entry-title { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin-bottom:1rem; }
.entry-meta { font-family:var(--font-sans); font-size:.7rem; letter-spacing:.05em; color:var(--color-mid); display:flex; gap:1rem; flex-wrap:wrap; padding-top:1rem; border-top:1px solid var(--color-rule); }
.entry-featured-image { margin:1.5rem 0 2rem; }
.entry-featured-image img { width:100%; max-height:480px; object-fit:cover; }
.entry-content { font-size:1.05rem; line-height:1.75; }
.entry-content h2,.entry-content h3 { font-family:var(--font-display); font-weight:700; margin:2rem 0 .75rem; letter-spacing:-.01em; }
.entry-content h2 { font-size:1.5rem; } .entry-content h3 { font-size:1.2rem; }
.entry-content p { margin-bottom:1.25rem; }
.entry-content a { color:var(--color-accent); border-bottom:1px solid rgba(192,57,43,.3); transition:border-color var(--transition); }
.entry-content a:hover { border-color:var(--color-accent); }
.entry-content blockquote { border-left:3px solid var(--color-accent); margin:1.5rem 0; padding:.75rem 0 .75rem 1.5rem; font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--color-mid); }
.entry-content ul,.entry-content ol { margin:0 0 1.25rem 1.5rem; }
.entry-content li { margin-bottom:.4rem; }
.entry-content pre { background:var(--color-ink); color:#e8e3da; padding:1.25rem; overflow-x:auto; font-family:var(--font-mono); font-size:.82rem; line-height:1.6; margin:1.5rem 0; }
.entry-content code { font-family:var(--font-mono); font-size:.85em; background:rgba(0,0,0,.06); padding:.1em .35em; border-radius:2px; }
.entry-content pre code { background:none; padding:0; }

/* ============================================================
   ARCHIVE HEADER
   ============================================================ */
.archive-header { margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:2px solid var(--color-ink); }
.archive-eyebrow { font-family:var(--font-sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--color-accent); margin-bottom:.5rem; display:block; }
.archive-title { font-family:var(--font-display); font-size:2.2rem; font-weight:700; letter-spacing:-.02em; }

/* ============================================================
   PAGINATION
   ============================================================ */
.chronicle-pagination { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--color-rule); display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem; font-family:var(--font-sans); font-size:.75rem; letter-spacing:.06em; }
.chronicle-pagination a, .chronicle-pagination .current { padding:.5rem .9rem; border:1px solid var(--color-rule); transition:all var(--transition); }
.chronicle-pagination a:hover, .chronicle-pagination .current { background:var(--color-ink); color:var(--color-paper); border-color:var(--color-ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.chronicle-footer { padding:2rem 3rem; border-top:1px solid var(--color-rule); display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:var(--font-sans); font-size:.65rem; letter-spacing:.06em; color:var(--color-mid); }
.footer-nav ul { list-style:none; display:flex; gap:1.5rem; }
.footer-nav ul li a:hover { color:var(--color-ink); }

/* ============================================================
   COMMENTS
   ============================================================ */
.comments-area { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--color-rule); }
.comments-title { font-family:var(--font-display); font-size:1.4rem; font-weight:700; margin-bottom:1.5rem; }
.comment-list { list-style:none; }
.comment { margin-bottom:1.5rem; padding:1.25rem; background:rgba(0,0,0,.03); }
.comment-author { font-family:var(--font-sans); font-weight:600; font-size:.82rem; margin-bottom:.25rem; }
.comment-meta { font-family:var(--font-sans); font-size:.65rem; color:var(--color-mid); margin-bottom:.75rem; }
.comment-form input,.comment-form textarea { width:100%; border:1px solid var(--color-rule); background:#fff; padding:.65rem .85rem; font-family:var(--font-body); font-size:.9rem; outline:none; transition:border-color var(--transition); margin-bottom:.75rem; }
.comment-form input:focus,.comment-form textarea:focus { border-color:var(--color-ink); }
.comment-form .submit { background:var(--color-ink); color:var(--color-paper); border:none; padding:.65rem 1.5rem; font-family:var(--font-sans); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background var(--transition); }
.comment-form .submit:hover { background:var(--color-accent); }

/* ============================================================
   UTILITY
   ============================================================ */
.screen-reader-text { clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; overflow:hidden; white-space:nowrap; position:absolute; }
.no-posts { padding:3rem 0; text-align:center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px) {
  .chronicle-layout { grid-template-columns:1fr; grid-template-rows:auto auto 1fr auto; }
  .chronicle-sidebar { grid-column:1; grid-row:1; position:static; height:auto; overflow:visible; }
  .chronicle-header { grid-column:1; grid-row:2; }
  .chronicle-main   { grid-column:1; grid-row:3; }
  .chronicle-footer { grid-column:1; grid-row:4; }
  .sidebar-photos { grid-template-columns:repeat(4,1fr); }
  .chronicle-main { padding:2rem 1.5rem; }
  .chronicle-header,.chronicle-footer { padding:1rem 1.5rem; }
  .photo-grid { grid-template-columns:repeat(3,1fr) !important; }
  .photo-grid .grid-featured { grid-column:auto; grid-row:auto; }
}
@media (max-width:600px) {
  .post-card { grid-template-columns:1fr; }
  .post-card-thumb { display:none; }
  .photo-grid { grid-template-columns:repeat(2,1fr) !important; }
  .sidebar-photos { grid-template-columns:repeat(2,1fr); }
  .chronicle-footer { flex-direction:column; text-align:center; }
}