/*
Theme Name: Julio Pizarro
Theme URI: https://juliopizarro.com
Author: Julio Pizarro
Description: A split-panel personal site theme built around a dark navigation panel and a light content panel, with independent mobile reflow for navigation, content, and illustration.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: juliopizarro
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  --panel-dark: #1B1815;
  --panel-dark-2: #242019;
  --panel-light: #FDFCFA;
  --ink-warm: #2A241C;
  --ink-warm-dim: #6B6153;
  --gold: #C9A876;
  --gold-bright: #D9BE8F;
  --beige: #C7AC8B;
  --rule: rgba(201, 168, 118, 0.25);
  --rule-light: rgba(42, 36, 28, 0.12);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', -apple-system, sans-serif;
  --font-nav: 'Jost', sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-warm);
  line-height: 1.65;
  background: var(--panel-light);
}

a { text-decoration: none; color: inherit; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--panel-dark);
  padding: 12px 20px;
  z-index: 1000;
}
.skip-link:focus {
  left: 10px;
  top: 10px;
}

/* Visible keyboard focus everywhere, required baseline */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Split-panel front page layout
   Structure: .site-split is the grid container. Nav block, content block,
   illustration, and footer are TRUE SIBLINGS, so each can be independently
   repositioned per breakpoint via grid-template-areas, rather than nested
   inside one another where reordering the illustration past the content
   block would not be possible.
   ========================================================================== */

.site-split {
  display: grid;
  grid-template-columns: 44% 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "nav      content"
    "illust   content"
    "footer   content";
  min-height: 100vh;
}

.split-nav      { grid-area: nav; }
.split-illust   { grid-area: illust; }
.split-footer   { grid-area: footer; }
.split-content  { grid-area: content; }

.split-nav, .split-illust, .split-footer {
  background: var(--panel-dark);
  padding: 0 48px;
}
.split-nav { padding-top: 60px; display: flex; align-items: center; }
.split-illust { padding: 0 48px 40px; text-align: center; }
.split-footer { padding-bottom: 40px; text-align: center; }

.split-content {
  background: var(--panel-light);
  padding: 80px 64px;
}

.panel-nav-inner { width: 100%; }

.panel-nav-illustration img {
  max-width: 260px;
  margin: 0 auto;
}

.panel-nav-footer {
  font-size: 0.78rem;
  color: var(--beige);
  letter-spacing: 0.02em;
}

.panel-nav-footer a {
  color: var(--beige);
  transition: color 0.2s ease;
}
.panel-nav-footer a:hover { color: var(--gold-bright); }

.site-name {
  font-family: var(--font-nav);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--beige);
  text-align: center;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.site-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 40px;
}
.site-tagline .rule { flex: 1; max-width: 60px; height: 1px; background: var(--rule); }
.site-tagline span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
  white-space: nowrap;
}

.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.primary-nav a {
  font-family: var(--font-nav);
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--gold-bright); }

/* Content panel */

.content-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 0 24px;
}
.content-eyebrow .rule { flex: 1; max-width: 90px; height: 1px; background: var(--rule-light); }
.content-eyebrow span {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-warm-dim);
  font-size: 1.05rem;
  white-space: nowrap;
}

.content-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 500;
  color: var(--ink-warm);
  margin: 0 0 48px;
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.recent-item h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-warm);
  margin: 0 0 8px;
}
.recent-item h3 a:hover,
.recent-item h3 a:focus-visible { color: var(--gold); }

.recent-item p {
  color: var(--ink-warm-dim);
  font-size: 0.94rem;
  margin: 0;
  max-width: 60ch;
}

/* ==========================================================================
   Standard page layout (non-front-page)
   ========================================================================== */

.site-header-compact {
  background: var(--panel-dark);
  padding: 32px 48px;
}
.site-header-compact .site-name {
  font-size: 1.4rem;
  margin: 0 0 16px;
}
.site-header-compact .primary-nav ul { gap: 28px; }

.page-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px;
}

.page-wrap h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin: 0 0 32px;
  color: var(--ink-warm);
}

.page-wrap .entry-content p { margin: 0 0 20px; color: var(--ink-warm-dim); }
.page-wrap .entry-content a { color: var(--gold); border-bottom: 1px solid var(--rule); }
.page-wrap .entry-content a:hover { border-bottom-color: var(--gold); }

/* Category-based post visual */
.category-visual {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 28px;
}

/* Archive listing */
.post-list { display: flex; flex-direction: column; gap: 48px; }
.post-list-item { display: flex; gap: 24px; align-items: flex-start; }
.post-list-item .category-visual { width: 160px; aspect-ratio: 4/3; flex-shrink: 0; margin-bottom: 0; }
.post-list-item .post-list-body { flex: 1; }
.post-list-item h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 8px; }
.post-list-item .post-meta { font-size: 0.8rem; color: var(--ink-warm-dim); margin: 0 0 10px; }
.post-list-item p { color: var(--ink-warm-dim); margin: 0; }

@media (max-width: 640px) {
  .post-list-item { flex-direction: column; }
  .post-list-item .category-visual { width: 100%; aspect-ratio: 16/9; }
}

/* Contact form */
.contact-form { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.contact-form label { font-size: 0.85rem; color: var(--ink-warm-dim); margin-bottom: 6px; display: block; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-light);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: #fff;
}
.contact-form button {
  align-self: flex-start;
  background: var(--panel-dark);
  color: var(--gold-bright);
  border: none;
  padding: 14px 32px;
  font-family: var(--font-nav);
  letter-spacing: 0.03em;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.2s ease;
}
.contact-form button:hover { background: var(--panel-dark-2); }

/* ==========================================================================
   Responsive: navigation panel compresses and reflows above content,
   illustration moves to the very bottom, independently of the nav block.
   ========================================================================== */

/* ==========================================================================
   Responsive: nav block compresses and moves to the top, footer stays
   with it, content follows, and the illustration moves independently
   to the very bottom of the page. All four are true siblings of
   .site-split, so grid-template-areas can freely reorder each one.
   ========================================================================== */

@media (max-width: 900px) {
  .site-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "nav"
      "footer"
      "content"
      "illust";
  }
  .split-nav { padding: 40px 32px 16px; }
  .split-footer { padding: 0 32px 40px; }
  .split-illust { padding: 0 32px 48px; }
  .split-content { padding: 48px 32px; }
}

@media (max-width: 640px) {
  .site-name { font-size: 1.5rem; letter-spacing: 0.1em; }
  .primary-nav ul { gap: 24px; }
  .content-heading { margin-bottom: 32px; }
  .split-content { padding: 40px 24px; }
  .split-nav { padding: 32px 24px 16px; }
  .split-footer { padding: 0 24px 32px; }
  .split-illust { padding: 0 24px 40px; }
}

@media (max-width: 640px) {
  .site-header-compact { padding: 24px; }
  .site-header-compact .primary-nav ul { gap: 20px; flex-wrap: wrap; justify-content: flex-start; }
}