/*
Theme Name: Sea Ess Em Jay
Theme URI: https://cathjenkin.com
Author: Cath Jenkin
Description: A warm, literary blog theme. Notes from underneath the table.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: semj
*/

/* ─── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

/* ─── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:         #FAF6EF;
  --bg-alt:     #F3EDE0;
  --border:     rgba(44, 26, 14, 0.13);
  --border-md:  rgba(44, 26, 14, 0.22);
  --text-1:     #2C1A0E;
  --text-2:     #6B4F3A;
  --text-3:     #9B7E69;
  --accent:     #C4844A;
  --accent-dk:  #A06535;
  --accent-lt:  #F5E6D3;
  --serif:      'Playfair Display', Georgia, serif;
  --body:       'Lora', 'Times New Roman', serif;
  --radius:     6px;
}

/* ─── Base ───────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dk); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ─── Layout ─────────────────────────────────────────────────────────── */
.site { min-height: 100vh; display: flex; flex-direction: column; }

.site-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
}

.site-inner {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 4rem;
  padding: 3rem 0 4rem;
}

/* ─── Header ─────────────────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--border-md);
  padding: 1.75rem 0;
}

.header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-branding {}

.site-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
}

.site-title a { color: var(--text-1); }
.site-title a:hover { color: var(--accent); text-decoration: none; }

.site-tagline {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 0.35rem;
}

/* ─── Navigation ─────────────────────────────────────────────────────── */
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.75rem;
}

.main-nav a {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  font-family: var(--body);
}

.main-nav a:hover,
.main-nav .current-menu-item a,
.main-nav .current_page_item a {
  color: var(--accent);
  text-decoration: none;
}

/* ─── Main Content ───────────────────────────────────────────────────── */
.site-main {}

/* ─── Post List ──────────────────────────────────────────────────────── */
.section-label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 0.75rem;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 2rem;
}

.post-list { list-style: none; }

.post-card {
  padding-bottom: 2.25rem;
  margin-bottom: 2.25rem;
  border-bottom: 0.5px solid var(--border);
}

.post-card:last-child { border-bottom: none; margin-bottom: 0; }

.post-meta {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.5rem;
}

.post-meta a { color: var(--text-3); }
.post-meta a:hover { color: var(--accent); text-decoration: none; }

.post-meta .sep { margin: 0 0.4rem; }

.entry-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.entry-title a { color: var(--text-1); }
.entry-title a:hover { color: var(--accent); text-decoration: none; }

.entry-excerpt {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

.read-more {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.read-more::after { content: '→'; }
.read-more:hover { color: var(--accent-dk); text-decoration: none; }

/* ─── Single Post ────────────────────────────────────────────────────── */
.single-post-header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }

.single .entry-title {
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.entry-content {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-1);
}

.entry-content p { margin-bottom: 1.5rem; }
.entry-content h2 { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; margin: 2rem 0 0.75rem; color: var(--text-1); }
.entry-content h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; margin: 1.5rem 0 0.5rem; }
.entry-content blockquote {
  border-left: 2px solid var(--accent);
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-style: italic;
  color: var(--text-2);
}
.entry-content a { color: var(--accent); }
.entry-content ul, .entry-content ol { margin: 0 0 1.5rem 1.5rem; }
.entry-content li { margin-bottom: 0.4rem; }

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
}

.post-nav a { color: var(--text-2); }
.post-nav a:hover { color: var(--accent); }
.post-nav .nav-label { display: block; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.3rem; }
.post-nav .nav-next { text-align: right; }

/* ─── Sidebar ────────────────────────────────────────────────────────── */
.sidebar {}

.sidebar-about {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-2);
  line-height: 1.7;
  padding: 1rem 1.1rem;
  background: var(--bg-alt);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 2rem;
}

.widget { margin-bottom: 2rem; }

.widget-title {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 0.75rem;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 1rem;
}

/* ─── Archive Widget (sidebar) ───────────────────────────────────────── */
.widget_archives ul,
.widget_archive ul { list-style: none; }

.widget_archives li,
.widget_archive li {
  padding: 0.3rem 0;
  border-bottom: 0.5px solid var(--border);
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.widget_archives li:last-child,
.widget_archive li:last-child { border-bottom: none; }

.widget_archives a,
.widget_archive a { color: var(--text-2); }

.widget_archives a:hover,
.widget_archive a:hover { color: var(--accent); text-decoration: none; }

/* ─── Full Archive Page ──────────────────────────────────────────────── */
.archive-full { }

.archive-year-group { margin-bottom: 1.5rem; }

.archive-year-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  cursor: pointer;
  border-bottom: 1px solid var(--border-md);
  user-select: none;
}

.archive-year-toggle:hover .year-num { color: var(--accent); }

.year-num {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text-1);
  transition: color 0.2s;
}

.year-chevron {
  font-size: 0.75rem;
  color: var(--text-3);
  transition: transform 0.25s ease;
  display: inline-block;
}

.archive-year-group.open .year-chevron { transform: rotate(90deg); }

.archive-months {
  display: none;
  padding-left: 0.5rem;
}

.archive-year-group.open .archive-months { display: block; }

.archive-month-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  border-bottom: 0.5px solid var(--border);
  font-size: 0.875rem;
}

.archive-month-item:last-child { border-bottom: none; }
.archive-month-item a { color: var(--text-2); }
.archive-month-item a:hover { color: var(--accent); text-decoration: none; }

.archive-count {
  font-size: 0.7rem;
  color: var(--text-3);
  background: var(--bg-alt);
  padding: 1px 7px;
  border-radius: 10px;
}

/* ─── Archive Header ─────────────────────────────────────────────────── */
.archive-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.archive-header h1 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
}

/* ─── Pagination ─────────────────────────────────────────────────────── */
.pagination {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 0.5px solid var(--border);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.pagination .page-numbers {
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
  border: 0.5px solid var(--border-md);
  border-radius: var(--radius);
  color: var(--text-2);
}

.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ─── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-3);
}

/* ─── No Results ─────────────────────────────────────────────────────── */
.no-results { font-style: italic; color: var(--text-2); padding: 2rem 0; }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .site-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2rem 0 3rem;
  }

  .sidebar { border-top: 1px solid var(--border); padding-top: 2rem; }

  .header-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .single .entry-title { font-size: 1.5rem; }
}