/*
Theme Name: The Way of Joy
Theme URI: https://thewayofjoy.com/
Author: Joshua & Sarah White
Author URI: https://thewayofjoy.com/
Description: A quiet, image-forward memorial blog theme recreating the original look of The Way of Joy — a two-column magazine layout with elegant serif titles, a soft sage-green accent, and a reflective, uncluttered feel. Built for sharing writing on grief, growth, and the discipline of joy.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thewayofjoy
Tags: two-columns, right-sidebar, blog, custom-menu, featured-images, sticky-post, translation-ready
*/

/* ============================================================
   The Way of Joy — recreation of the original blog styling
   Fonts: Playfair Display (serif titles) + Karla (sans body)
   Accent: sage green #8FBF9F
   ============================================================ */

:root{
  --accent:#8FBF9F;
  --accent-dark:#79a88a;
  --ink:#3d3d3d;
  --body:#6b6b6b;
  --muted:#9a9a9a;
  --line:#e7e7e7;
  --dotted:#d8d8d8;
  --bg:#ffffff;
  --maxwidth:1140px;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:'Karla','Helvetica Neue',Arial,sans-serif;
  font-size:17px;
  line-height:1.8;
  font-weight:400;
}

a{color:var(--accent-dark);text-decoration:none;transition:color .2s ease;}
a:hover{color:var(--ink);}

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

h1,h2,h3,h4,h5,h6{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  color:var(--ink);
  font-weight:700;
  line-height:1.25;
  margin:0 0 .5em;
}

p{margin:0 0 1.4em;}

blockquote{
  margin:1.6em 0;
  padding:.2em 0 .2em 1.4em;
  border-left:3px solid var(--accent);
  font-style:italic;
  color:#555;
}

/* ---------- Layout ---------- */
.container{
  max-width:var(--maxwidth);
  margin:0 auto;
  padding:0 24px;
}

.site-content{
  display:flex;
  flex-wrap:wrap;
  gap:56px;
  padding:56px 0 24px;
}

.content-area{flex:1 1 62%;min-width:0;}
.sidebar{flex:1 1 26%;min-width:230px;}

/* ---------- Header ---------- */
.site-header{
  padding:48px 0 0;
  text-align:center;
}
.site-branding{padding-bottom:34px;}
.site-title{
  font-size:44px;
  letter-spacing:.02em;
  margin:0 0 10px;
}
.site-title a{color:var(--ink);}
.site-title a:hover{color:var(--accent-dark);}
.custom-logo-link img{display:inline-block;margin:0 auto;}
.site-description{
  font-family:'Karla',sans-serif;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:12px;
  color:var(--muted);
  margin:0;
}

/* ---------- Navigation ---------- */
.main-navigation{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:6px;
}
.main-navigation ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.main-navigation li{position:relative;}
.main-navigation a{
  display:block;
  padding:20px 18px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:700;
}
.main-navigation a:hover{color:var(--accent-dark);}
.main-navigation .sub-menu{
  display:none;
  position:absolute;
  top:100%;left:0;
  background:#fff;
  border:1px solid var(--line);
  min-width:200px;
  z-index:20;
  flex-direction:column;
}
.main-navigation li:hover > .sub-menu{display:flex;}
.main-navigation .sub-menu a{padding:12px 18px;text-align:left;}

/* ---------- Post cards (blog index) ---------- */
.post-card{
  padding-bottom:52px;
  margin-bottom:52px;
  border-bottom:1px solid var(--line);
}
.post-thumb{margin-bottom:30px;}
.post-thumb img{width:100%;display:block;}

.entry-title{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:30px;
  margin:0 0 16px;
}
.entry-title a{color:var(--ink);}
.entry-title a:hover{color:var(--accent-dark);}

.entry-meta{
  text-align:center;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:24px;
}
.entry-meta a{color:var(--accent-dark);}
.entry-meta .sep{margin:0 6px;color:var(--dotted);}
.entry-meta .meta-icon{margin-right:6px;opacity:.7;}

.entry-summary,.entry-content{color:var(--body);}
.entry-summary p:last-child{margin-bottom:0;}

.readmore-wrap{text-align:center;margin-top:30px;}
.btn-readmore{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  font-weight:700;
  padding:13px 30px;
  border-radius:40px;
}
.btn-readmore:hover{background:var(--accent-dark);color:#fff;}

/* ---------- Post footer meta row ---------- */
.entry-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.entry-footer a{color:var(--muted);}
.entry-footer a:hover{color:var(--accent-dark);}
.share-links a{margin:0 8px;}

/* ---------- Single post ---------- */
.single .entry-content{margin-top:8px;}
.single .entry-title{font-size:38px;}

.post-navigation{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin:48px 0;
  padding:26px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.post-navigation .nav-previous,
.post-navigation .nav-next{flex:1 1 50%;}
.post-navigation .nav-next{text-align:right;}
.post-navigation .nav-label{
  display:block;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.post-navigation .nav-title{
  font-family:'Playfair Display',serif;
  color:var(--ink);
  font-size:18px;
}

/* ---------- Sidebar widgets ---------- */
.widget{margin-bottom:46px;text-align:center;}
.widget-title{
  font-family:'Karla',sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:22px;
}
.widget ul{list-style:none;margin:0;padding:0;}
.widget li{
  padding:14px 0;
  border-bottom:1px dotted var(--dotted);
  font-family:'Playfair Display',serif;
  font-size:17px;
}
.widget li:first-child{border-top:1px dotted var(--dotted);}
.widget li a{color:var(--ink);}
.widget li a:hover{color:var(--accent-dark);}

.search-form{position:relative;display:block;}
.search-form label{display:block;}
.search-form .search-field{
  width:100%;
  border:1px solid var(--line);
  border-radius:40px;
  padding:14px 46px 14px 20px;
  font-family:'Karla',sans-serif;
  font-size:14px;
  color:var(--body);
  background:#fff;
}
.search-form .search-submit{
  position:absolute;
  right:6px;top:50%;
  transform:translateY(-50%);
  border:none;background:transparent;
  color:var(--muted);
  padding:8px 14px;
  cursor:pointer;
  font-size:14px;
}

/* ---------- Comments ---------- */
.comments-area{margin-top:48px;}
.comments-title,.comment-reply-title{
  font-size:22px;text-transform:uppercase;letter-spacing:.04em;text-align:center;
}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list li{padding:22px 0;border-bottom:1px dotted var(--dotted);}
.comment-author{font-family:'Playfair Display',serif;color:var(--ink);font-size:16px;}
.comment-metadata{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  font-family:'Karla',sans-serif;font-size:15px;margin-bottom:14px;
}
.comment-form .submit,
.wp-block-search__button{
  background:var(--accent);color:#fff;border:none;border-radius:40px;
  padding:13px 30px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  font-weight:700;cursor:pointer;
}
.comment-form .submit:hover{background:var(--accent-dark);}

/* ---------- Pagination ---------- */
.pagination{
  display:flex;justify-content:center;gap:10px;margin:20px 0 40px;
}
.pagination .page-numbers{
  padding:10px 16px;border:1px solid var(--line);border-radius:4px;
  font-size:13px;letter-spacing:.08em;color:var(--ink);
}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff;}
.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent-dark);}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  margin-top:40px;
  padding:40px 0;
  text-align:center;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.site-footer a{color:var(--muted);}
.site-footer a:hover{color:var(--accent-dark);}

/* ---------- Page + misc ---------- */
.page .entry-title{margin-bottom:30px;}
.entry-content img{margin:10px 0;}
.entry-content a{text-decoration:underline;}
.sticky-badge{color:var(--accent-dark);}
.wp-caption-text,.entry-content figcaption{
  text-align:center;font-size:13px;color:var(--muted);font-style:italic;margin-top:8px;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .site-content{flex-direction:column;gap:40px;padding-top:40px;}
  .content-area,.sidebar{flex:1 1 100%;}
  .sidebar{border-top:1px solid var(--line);padding-top:40px;}
  .site-title{font-size:34px;}
  .entry-title{font-size:25px;}
  .single .entry-title{font-size:30px;}
  .main-navigation ul{justify-content:flex-start;}
  .main-navigation a{padding:14px 12px;}
}

@media (max-width:480px){
  .entry-footer{flex-direction:column;gap:12px;text-align:center;}
  .post-navigation{flex-direction:column;}
  .post-navigation .nav-next{text-align:left;}
}