/*
Theme Name: Strand and Story
Theme URI: https://tigihairreborn.com
Author: Strand & Story Editors
Description: A soft editorial haircare blog theme for Strand & Story: dusty rose, warm charcoal, and soft ivory, paired with a serif display headline face and a clean grotesque sans body face.
Version: 1.0.1
Text Domain: strand-and-story
*/

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

:root{
  /* Colors */
  --color-bg:#FBF6F3;
  --color-surface:#F2E4E1;
  --color-text:#2E2A2A;
  --color-text-muted:#6B6160;
  --color-accent:#B5707A;
  --color-accent-deep:#8C5E55;
  --color-gold:#D9A86C;
  --color-border:#E5D2CC;
  --color-white:#FFFFFF;

  /* Typography */
  --font-heading:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-base:16px;
  --line-height-base:1.6;
  --font-size-h1:2.5rem;
  --font-size-h2:1.85rem;
  --font-size-h3:1.3rem;

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

  /* Layout */
  --max-w-site:1200px;
  --max-w-post:720px;

  /* Corners */
  --radius-card:12px;
  --radius-sm:8px;

  /* 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-accent-deep)}
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-text);
  line-height:1.25;
  font-weight:600;
}
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-body);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  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:center;gap:var(--space-sm)}
.site-logo{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:600;
  color:var(--color-text);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.site-logo:hover{color:var(--color-accent)}
.site-logo img{
  height:2rem;
  width:auto;
  display:block;
}

.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-body);
  font-size:.92rem;
  font-weight:500;
  color:var(--color-text);
}
.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:42px;
  height:42px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  cursor:pointer;
  /* Visible by default on mobile/tablet. Hidden on desktop by the
     min-width:1024px media query below, mirrored with an inline
     style 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;
  border-radius:2px;
  background:var(--color-text);
}
.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-body);
  font-size:1rem;
  font-weight:500;
  color:var(--color-text);
}
.mobile-nav a:hover{color:var(--color-accent)}

/* ── HERO / FEATURED POST ─────────────────────────────────────── */
.hero-feature{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  padding:var(--space-xl) 0;
}
.hero-feature .container{
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
}
.hero-feature-card{
  display:flex;
  flex-direction:column;
  background:var(--color-white);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:0 4px 24px rgba(46,42,42,0.06);
}
.hero-feature-img-wrap{
  position:relative;
  width:100%;
  height:260px;
  overflow:hidden;
  background:var(--color-border);
  display:block;
}
.hero-feature-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-feature-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-accent-deep);
  font-family:var(--font-heading);
  font-size:1rem;
}
.hero-feature-body{
  padding:var(--space-lg);
}
.hero-feature-title{font-size:calc(var(--font-size-h1) * .85);margin-bottom:var(--space-sm)}
.hero-feature-title a{color:var(--color-text)}
.hero-feature-title a:hover{color:var(--color-accent)}
.hero-feature-excerpt{color:var(--color-text-muted);margin-bottom:var(--space-md)}
.hero-feature-meta{font-size:.85rem;color:var(--color-text-muted)}

/* ── 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{color:var(--color-text-muted)}

/* ── 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:var(--radius-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
.post-card-img-wrap{
  position:relative;
  width:100%;
  height:200px;
  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-accent-deep);
  font-family:var(--font-heading);
  font-size:.95rem;
}
.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-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:var(--space-xs);
}
.post-card-title{font-size:1.2rem;margin-bottom:var(--space-sm)}
.post-card-title a{color:var(--color-text)}
.post-card-title a:hover{color:var(--color-accent)}
.post-card-excerpt{
  font-size:.92rem;
  color:var(--color-text-muted);
  flex-grow:1;
  margin-bottom:var(--space-sm);
}
.post-card-meta{
  font-size:.8rem;
  color:var(--color-text-muted);
  border-top:1px solid var(--color-border);
  padding-top:var(--space-sm);
}

/* ── SINGLE POST ───────────────────────────────────────────── */
/* Named .post-article (not .single-post) on purpose: WordPress
   auto-adds a "single-post" class to <body> on single post pages,
   which collided with a .single-post selector here and was
   shrinking the whole page width, not just the article. Width now
   matches --max-w-site so articles read at the same width as the
   homepage/archive pages. */
.post-article{
  max-width:var(--max-w-site);
  margin:0 auto;
  padding:0 var(--space-md);
}
.single-featured-img{
  width:100%;
  height:320px;
  overflow:hidden;
  border-radius:var(--radius-card);
  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-body);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.06em;
  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:var(--radius-card);margin:var(--space-md) 0}
.article-body h2{margin-top:var(--space-lg)}
.article-body h3{margin-top:var(--space-md)}
.article-body ul,
.article-body ol{margin-bottom:var(--space-md);padding-left:var(--space-lg)}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body strong{color:var(--color-text);font-weight:700}

/* ── TAKEAWAY CALLOUT ──────────────────────────────────────── */
.takeaway-box{
  background:var(--color-surface);
  border-left:4px solid var(--color-gold);
  border-radius:var(--radius-sm);
  padding:var(--space-md) var(--space-lg);
  margin:var(--space-lg) 0;
}
.takeaway-box h3{
  font-size:1rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--color-accent-deep);
  margin-bottom:var(--space-sm);
}

/* ── 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-body);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text);
}
.tag-pill{
  display:inline-block;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  color:var(--color-text-muted);
  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-site);
  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:var(--radius-card);
  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;
  font-weight:600;
  color:var(--color-text);
  margin-bottom:var(--space-xs);
}
.comment-meta{font-size:.8rem;color:var(--color-text-muted);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;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--color-accent);
}
.comment-respond{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  padding:var(--space-lg);
}
#commentform p{margin-bottom:var(--space-md)}
#commentform label{
  display:block;
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-text);
  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:var(--radius-sm);
  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-body);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.02em;
  padding:var(--space-sm) var(--space-lg);
  border-radius:24px;
  transition:background .2s ease;
}
#commentform #submit:hover{background:var(--color-accent-deep)}
.no-comments{color:var(--color-text-muted);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:var(--radius-sm);
  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-body);
  font-size:.9rem;
  font-weight:600;
  padding:0 var(--space-lg);
  border-radius:24px;
}
.search-form button:hover{background:var(--color-accent-deep)}
.no-results{text-align:center;padding:var(--space-xl) 0;color:var(--color-text-muted)}
.error-404{text-align:center;padding:var(--space-xl) var(--space-md)}
.error-404 .error-code{
  font-family:var(--font-heading);
  font-size:5rem;
  font-weight:600;
  color:var(--color-accent);
  line-height:1;
}
.error-404 h1{margin-top:var(--space-md)}
.error-404 p{color:var(--color-text-muted)}

/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer{
  background:var(--color-text);
  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;
  font-weight:600;
  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;
  opacity:.85;
}
.footer-nav a:hover{color:var(--color-gold);opacity:1}
.footer-copy{font-size:.8rem;opacity:.65}

/* ── 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:var(--radius-sm);
  font-size:.9rem;
  color:var(--color-text);
}
.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){
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .hero-feature-card{flex-direction:row}
  .hero-feature-img-wrap{width:46%;height:auto}
  .hero-feature-body{width:54%;padding:var(--space-xl)}
  .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)}
  .single-featured-img{height:420px}
}