/*
Theme Name: Thyme
Theme URI: https://thymefoodblog.com
Author: Sarah
Description: A warm, rustic personal food and travel blog theme built for Thyme, recipes rooted in Cajun heritage and New England life, told one table at a time.
Version: 1.0.0
Text Domain: thyme
*/

/* ── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Colors */
  --color-bg:#FAF6EE;
  --color-surface:#F1EADA;
  --color-text:#34302A;
  --color-primary:#5E6B4F;
  --color-accent:#8C2F39;
  --color-border:#DDD3BC;
  --color-white:#FFFFFF;

  /* Typography */
  --font-heading:'Cinzel', Georgia, serif;
  --font-body:'Crimson Text', Georgia, serif;
  --font-size-base:18px;
  --line-height-base:1.75;
  --font-size-h1:2.6rem;
  --font-size-h2:1.9rem;
  --font-size-h3:1.4rem;

  /* Spacing */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:32px;
  --space-xl:64px;

  /* Layout */
  --max-w-site:1180px;
  --max-w-post:760px;

  /* Breakpoints (referenced in comments only, CSS can't read these) */
  --bp-tablet:768px;
  --bp-desktop:1024px;
  --bp-wide:1280px;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:var(--font-size-base);
  line-height:var(--line-height-base);
  background:var(--color-bg);
  color:var(--color-text);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--color-accent);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--color-primary)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer}

/* ── TYPOGRAPHY ────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--color-primary);
  line-height:1.3;
  font-weight:400;
  letter-spacing:.01em;
}
h1{font-size:var(--font-size-h1);margin-bottom:var(--space-md)}
h2{font-size:var(--font-size-h2);margin-bottom:var(--space-md)}
h3{font-size:var(--font-size-h3);margin-bottom:var(--space-sm)}
p{margin-bottom:var(--space-md)}
.eyebrow{
  display:inline-block;
  font-family:var(--font-heading);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:var(--space-sm);
}

/* ── LAYOUT ────────────────────────────────────────────────── */
.container{
  max-width:var(--max-w-site);
  margin:0 auto;
  padding:0 var(--space-md);
}
.section{padding:var(--space-xl) 0}
.section-narrow{max-width:var(--max-w-post);margin:0 auto;padding:0 var(--space-md)}

/* ── SITE HEADER ───────────────────────────────────────────── */
.site-header{
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
}
.header-inner{
  max-width:var(--max-w-site);
  margin:0 auto;
  padding:var(--space-md);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-branding{display:flex;align-items:baseline;gap:var(--space-xs)}
.site-logo{
  font-family:var(--font-heading);
  font-size:1.6rem;
  color:var(--color-primary);
  letter-spacing:.05em;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.site-logo:hover{color:var(--color-accent)}
.site-logo img{
  height:1.8rem;
  width:auto;
  display:block;
}
.site-tagline{
  font-family:var(--font-body);
  font-style:italic;
  font-size:.85rem;
  color:var(--color-text);
  opacity:.7;
  display:none;
}

.primary-nav{
  display:none;
  /* Hidden on mobile by default. An inline style="display:none" is also set
     on the element in header.php as a caching-proof fallback. The
     min-width:1024px media query below switches this to visible on desktop. */
}
.primary-nav ul{
  display:flex;
  align-items:center;
  gap:var(--space-lg);
}
.primary-nav a{
  font-family:var(--font-heading);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-primary);
}
.primary-nav a:hover,
.primary-nav a.current-menu-item{color:var(--color-accent)}

.nav-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background:transparent;
  border:1px solid var(--color-border);
  border-radius:4px;
  /* Visible by default on mobile/tablet. Hidden on desktop by the
     min-width:1024px media query below, mirrored with an inline
     style="display:none" set via JS at desktop widths in main.js. */
}
.nav-toggle span{display:block;position:relative;width:20px;height:14px}
.nav-toggle span::before,
.nav-toggle span::after,
.nav-toggle .bar-mid{
  content:'';
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:var(--color-primary);
}
.nav-toggle span::before{top:0}
.nav-toggle .bar-mid{top:6px}
.nav-toggle span::after{top:12px}

.mobile-nav{
  display:none;
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  /* Closed by default (inline style="display:none" is also set in
     header.php as a caching-proof fallback). main.js removes the inline
     style and toggles the .is-open class to reveal it on mobile/tablet. */
}
.mobile-nav.is-open{display:block !important}
.mobile-nav ul{padding:var(--space-md)}
.mobile-nav li{border-bottom:1px solid var(--color-border)}
.mobile-nav li:last-child{border-bottom:none}
.mobile-nav a{
  display:block;
  padding:var(--space-md) 0;
  font-family:var(--font-heading);
  font-size:.95rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-primary);
}
.mobile-nav a:hover{color:var(--color-accent)}

/* ── HERO ──────────────────────────────────────────────────── */
.hero{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  padding:var(--space-xl) 0;
  text-align:center;
}
.hero-inner{max-width:680px;margin:0 auto;padding:0 var(--space-md)}
.hero h1{font-size:var(--font-size-h1)}
.hero-sub{
  font-family:var(--font-body);
  font-style:italic;
  font-size:1.15rem;
  color:var(--color-text);
  line-height:var(--line-height-base);
}

/* ── ARCHIVE / CATEGORY INTRO ──────────────────────────────── */
.archive-intro{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  padding:var(--space-lg) 0;
  text-align:center;
}
.archive-intro .container{max-width:760px}
.archive-intro p{font-style:italic;color:var(--color-text)}

/* ── POST CARD GRID ────────────────────────────────────────── */
.post-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg);
}
.post-card{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:6px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.post-card-img-wrap{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--color-surface);
  display:block;
}
.post-card-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.post-card-img-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--color-surface),var(--color-border));
  color:var(--color-primary);
  font-family:var(--font-heading);
  font-size:.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.post-card-body{
  padding:var(--space-md);
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.post-card-cat{
  display:inline-block;
  font-family:var(--font-heading);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:var(--space-xs);
}
.post-card-title{font-size:1.25rem;margin-bottom:var(--space-sm)}
.post-card-title a{color:var(--color-primary)}
.post-card-title a:hover{color:var(--color-accent)}
.post-card-excerpt{
  font-size:.95rem;
  color:var(--color-text);
  flex-grow:1;
  margin-bottom:var(--space-sm);
}
.post-card-meta{
  font-size:.8rem;
  color:var(--color-text);
  opacity:.65;
  border-top:1px solid var(--color-border);
  padding-top:var(--space-sm);
}

/* ── SINGLE POST ───────────────────────────────────────────── */
.single-post{
  max-width:var(--max-w-post);
  margin:0 auto;
  padding:0 var(--space-md);
}
.single-featured-img{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:6px;
  margin-bottom:var(--space-lg);
  background:var(--color-surface);
}
.single-featured-img img{width:100%;height:100%;object-fit:cover}
.single-meta{
  font-family:var(--font-heading);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:var(--space-sm);
  display:flex;
  gap:var(--space-sm);
  flex-wrap:wrap;
  align-items:center;
}
.single-meta .sep{color:var(--color-border)}
.single-title{margin-bottom:var(--space-lg)}
.article-body{font-size:1.05rem}
.article-body p{margin-bottom:var(--space-md)}
.article-body img{border-radius:6px;margin:var(--space-md) 0}
.article-body h2{margin-top:var(--space-lg)}
.article-body h3{margin-top:var(--space-md)}

/* ── RECIPE CARD ───────────────────────────────────────────── */
.recipe-card{
  background:var(--color-surface);
  border-top:4px solid var(--color-accent);
  border-radius:6px;
  padding:var(--space-lg);
  margin:var(--space-lg) 0;
}
.recipe-card h3{
  margin-bottom:var(--space-md);
  border-bottom:1px solid var(--color-border);
  padding-bottom:var(--space-sm);
}
.recipe-card h4{
  font-family:var(--font-heading);
  font-size:1rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-top:var(--space-md);
  margin-bottom:var(--space-sm);
}
.recipe-card ul{margin-bottom:var(--space-md)}
.recipe-card ul li{
  position:relative;
  padding-left:var(--space-md);
  margin-bottom:var(--space-xs);
}
.recipe-card ul li::before{
  content:'\2022';
  position:absolute;
  left:0;
  color:var(--color-accent);
}
.recipe-card ol{margin-bottom:var(--space-md);counter-reset:steps}
.recipe-card ol li{
  position:relative;
  padding-left:var(--space-lg);
  margin-bottom:var(--space-sm);
  counter-increment:steps;
}
.recipe-card ol li::before{
  content:counter(steps);
  position:absolute;
  left:0;
  top:0;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--color-accent);
  color:var(--color-white);
  font-size:.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ── TAGS ──────────────────────────────────────────────────── */
.post-tags{
  margin-top:var(--space-lg);
  padding-top:var(--space-md);
  border-top:1px solid var(--color-border);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
  align-items:center;
}
.post-tags-label{
  font-family:var(--font-heading);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-primary);
}
.tag-pill{
  display:inline-block;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  color:var(--color-text);
  font-size:.8rem;
  padding:var(--space-xs) var(--space-sm);
  border-radius:20px;
}
.tag-pill:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* ── COMMENTS ──────────────────────────────────────────────── */
.comments-area{
  max-width:var(--max-w-post);
  margin:var(--space-xl) auto 0;
  padding:var(--space-lg) var(--space-md) 0;
  border-top:1px solid var(--color-border);
}
.comments-title{margin-bottom:var(--space-lg)}
.comment-list{margin-bottom:var(--space-lg)}
.comment-list .comment{
  background:var(--color-surface);
  border-radius:6px;
  padding:var(--space-md);
  margin-bottom:var(--space-md);
}
.comment-list .children{margin-left:var(--space-lg);margin-top:var(--space-md)}
.comment-author{
  font-family:var(--font-heading);
  font-size:.95rem;
  color:var(--color-primary);
  margin-bottom:var(--space-xs);
}
.comment-meta{font-size:.8rem;color:var(--color-text);opacity:.6;margin-bottom:var(--space-sm)}
.comment-meta a{color:inherit}
.comment-content p{margin-bottom:var(--space-sm);font-size:.95rem}
.comment-reply-link{
  display:inline-block;
  margin-top:var(--space-xs);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--color-accent);
}
.comment-respond{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:6px;
  padding:var(--space-lg);
}
#commentform p{margin-bottom:var(--space-md)}
#commentform label{
  display:block;
  font-family:var(--font-heading);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-primary);
  margin-bottom:var(--space-xs);
}
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:1rem;
  padding:var(--space-sm) var(--space-md);
  border:1px solid var(--color-border);
  border-radius:4px;
  background:var(--color-bg);
  color:var(--color-text);
}
#commentform textarea{min-height:140px;resize:vertical}
#commentform input:focus,
#commentform textarea:focus{outline:2px solid var(--color-accent);outline-offset:1px}
#commentform #submit{
  display:inline-block;
  background:var(--color-accent);
  color:var(--color-white);
  border:none;
  font-family:var(--font-heading);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:var(--space-sm) var(--space-lg);
  border-radius:4px;
  transition:background .2s ease;
}
#commentform #submit:hover{background:var(--color-primary)}
.no-comments{color:var(--color-text);opacity:.7;font-style:italic}

/* ── PAGE TEMPLATE ─────────────────────────────────────────── */
.page-content{
  max-width:var(--max-w-post);
  margin:0 auto;
  padding:0 var(--space-md);
}
.page-content .page-title{margin-bottom:var(--space-lg)}

/* ── ACCESSIBILITY UTILITY ─────────────────────────────────── */
.screen-reader-text{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ── SEARCH / 404 ──────────────────────────────────────────── */
.search-form{
  display:flex;
  gap:var(--space-sm);
  max-width:480px;
  margin:0 auto var(--space-lg);
}
.search-form input[type="search"]{
  flex-grow:1;
  font-family:var(--font-body);
  font-size:1rem;
  padding:var(--space-sm) var(--space-md);
  border:1px solid var(--color-border);
  border-radius:4px;
  background:var(--color-white);
  color:var(--color-text);
}
.search-form button{
  background:var(--color-accent);
  color:var(--color-white);
  border:none;
  font-family:var(--font-heading);
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:0 var(--space-lg);
  border-radius:4px;
}
.search-form button:hover{background:var(--color-primary)}
.no-results{text-align:center;padding:var(--space-xl) 0}
.error-404{text-align:center;padding:var(--space-xl) var(--space-md)}
.error-404 .error-code{
  font-family:var(--font-heading);
  font-size:5rem;
  color:var(--color-border);
  line-height:1;
}
.error-404 h1{margin-top:var(--space-md)}

/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer{
  background:var(--color-primary);
  color:var(--color-bg);
  padding:var(--space-lg) 0;
  margin-top:var(--space-xl);
}
.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-md);
  text-align:center;
}
.footer-logo{
  font-family:var(--font-heading);
  font-size:1.3rem;
  color:var(--color-white);
}
.footer-nav ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-md);
}
.footer-nav a{
  color:var(--color-bg);
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.footer-nav a:hover{color:var(--color-white)}
.footer-copy{font-size:.8rem;opacity:.75}

/* ── PAGINATION ────────────────────────────────────────────── */
.pagination{
  display:flex;
  justify-content:center;
  gap:var(--space-sm);
  margin-top:var(--space-lg);
  flex-wrap:wrap;
}
.pagination a,
.pagination span{
  display:inline-block;
  padding:var(--space-xs) var(--space-md);
  border:1px solid var(--color-border);
  border-radius:4px;
  font-size:.9rem;
  color:var(--color-primary);
}
.pagination .current{background:var(--color-accent);color:var(--color-white);border-color:var(--color-accent)}
.pagination a:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* ── TABLET (min-width: 768px) ────────────────────────────── */
@media (min-width:768px){
  .site-tagline{display:inline}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .hero{padding:calc(var(--space-xl) * 1.25) 0}
  .footer-inner{flex-direction:row;justify-content:space-between;text-align:left}
}

/* ── DESKTOP (min-width: 1024px) ──────────────────────────── */
@media (min-width:1024px){
  .primary-nav{display:block !important}
  .nav-toggle{display:none}
  .mobile-nav{display:none !important}
  .single-title{font-size:calc(var(--font-size-h1) * 1.05)}
}

/* ── WIDE (min-width: 1280px) ──────────────────────────────── */
@media (min-width:1280px){
  .post-grid{grid-template-columns:repeat(3,1fr)}
}