/*
Theme Name: PavlikParent
Theme URI: https://pavlikparent.com
Author: Jen
Description: A clean, editorial theme for PavlikParent.com — a resource for parents navigating the Pavlik harness weeks. Ported from a static HTML/CSS prototype.
Version: 1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: pavlikparent
*/

:root{
  --paper:#ffffff;
  --cream:#faf9f5;
  --ink:#1e1c19;
  --ink-soft:#8a8375;
  --olive:#66614a;
  --olive-dark:#4c4838;
  --rose:#b98470;
  --line:#e9e4d9;
  --radius:2px;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* Topbar */
.topbar{
  background:var(--cream);
  color:var(--ink-soft);
  text-align:center;
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:8px 12px;
  border-bottom:1px solid var(--line);
}
.topbar a{border-bottom:1px solid var(--ink-soft);color:var(--ink);}

/* Header */
header.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:40;
}
.header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding:22px 0;
}

/* Primary nav — built on wp_nav_menu() default <ul> markup */
.main-nav .nav-menu{
  display:flex;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.main-nav .nav-menu li{position:relative;}
.main-nav .nav-menu > li > a{
  padding:6px 0;
  display:inline-block;
  border-bottom:1px solid transparent;
}
.main-nav .nav-menu > li > a:hover,
.main-nav .nav-menu > li.current-menu-item > a,
.main-nav .nav-menu > li.current_page_item > a{
  border-bottom-color:var(--rose);
  color:var(--rose);
}
.main-nav .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  background:var(--olive);
  color:#f4f1e8;
  padding:18px 26px;
  min-width:220px;
  list-style:none;
  margin:0;
  border-radius:2px;
}
.main-nav li:hover > .sub-menu{display:block;}
.main-nav .sub-menu a{
  display:block;
  padding:7px 0;
  color:#f4f1e8;
  border-bottom:1px solid rgba(244,241,232,0.15);
}
.main-nav .sub-menu li:last-child a{border-bottom:none;}
.main-nav .sub-menu a:hover{color:#e3d9c4;}

/* Brand / custom logo */
.brand{
  font-family:var(--serif);
  font-size:1.9rem;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--ink);
  text-align:center;
  white-space:nowrap;
}
.brand img{max-height:48px;width:auto;margin:0 auto;}
.brand .small{
  font-family:var(--sans);
  font-size:0.62rem;
  letter-spacing:0.32em;
  font-weight:500;
  vertical-align:middle;
  margin-left:6px;
  color:var(--ink-soft);
}

/* Utility nav (About / Contact) */
.utility-menu{
  display:flex;
  gap:22px;
  justify-content:flex-end;
  list-style:none;
  margin:0;
  padding:0;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.utility-menu a:hover{color:var(--rose);}

/* Intro line under nav */
.page-intro{
  text-align:center;
  padding:64px 0 40px;
}
.page-intro .eyebrow{
  display:block;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--rose);
  margin-bottom:18px;
}
.page-intro h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:2.6rem;
  line-height:1.2;
  margin:0 auto 18px;
  max-width:720px;
}
.page-intro p{
  font-size:1rem;
  color:var(--ink-soft);
  max-width:520px;
  margin:0 auto;
}

/* Section wrapper */
section.page-section{padding:56px 0;}
section.page-section.alt{
  background:var(--cream);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-head{text-align:center;max-width:600px;margin:0 auto 44px;}
.section-head .eyebrow{
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--rose);
  display:block;
  margin-bottom:10px;
}
.section-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.9rem;
  margin:0;
}

/* Post-card grid — used for the blog index loop */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:38px 30px;
}
.post-card{display:flex;flex-direction:column;text-align:left;list-style:none;}
.post-card .thumb{
  aspect-ratio:4/5;
  background:linear-gradient(160deg,#f2ede2,#e4dac6);
  border-radius:var(--radius);
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  color:var(--olive);
  overflow:hidden;
}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;}
.post-card .meta{
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.post-card .meta span{color:var(--rose);}
.post-card h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.35rem;
  margin:0 0 12px;
  line-height:1.3;
}
.post-card .read-link{
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
  align-self:flex-start;
}
.post-card .read-link:hover{color:var(--rose);border-color:var(--rose);}

/* Article prose (single page/post content) */
.article{max-width:660px;margin:0 auto;}
.article h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.5rem;
  margin:40px 0 12px;
}
.article h2:first-child{margin-top:0;}
.article p{color:var(--ink-soft);margin:0 0 8px;}
.article img{border-radius:var(--radius);margin:24px 0;}
.article blockquote{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.4rem;
  color:var(--ink);
  border-left:none;
  text-align:center;
  margin:36px 0;
  padding:0;
}

/* Pagination */
.pagination, .nav-links{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:48px;
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.pagination a, .nav-links a{border-bottom:1px solid var(--ink);}
.pagination a:hover, .nav-links a:hover{color:var(--rose);border-color:var(--rose);}

/* Newsletter */
.newsletter{
  background:var(--cream);
  border-top:1px solid var(--line);
  text-align:center;
  padding:56px 24px;
}
.newsletter h2{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:0 0 8px;}
.newsletter p{color:var(--ink-soft);margin:0 0 22px;font-size:0.9rem;}
.newsletter-form{display:flex;gap:0;justify-content:center;flex-wrap:wrap;max-width:380px;margin:0 auto;border-bottom:1px solid var(--ink);}
.newsletter-form input[type=email]{
  flex:1;
  min-width:180px;
  padding:10px 6px;
  border:none;
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-size:0.88rem;
}
.newsletter-form input::placeholder{color:var(--ink-soft);}
.newsletter-form button{
  background:none;
  color:var(--ink);
  border:none;
  padding:10px 4px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-size:0.7rem;
  cursor:pointer;
}
.newsletter-form button:hover{color:var(--rose);}

/* Footer */
footer.site-footer{
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:58px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:40px;
  text-align:center;
}
.foot-bio h4{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:1.2rem;
  margin:0 0 10px;
}
.foot-bio p{color:var(--ink-soft);font-size:0.88rem;max-width:260px;margin:0 auto 12px;}
.foot-bio a{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px;}

.foot-mark{display:flex;flex-direction:column;align-items:center;gap:14px;}
.foot-mark .monogram{
  font-family:var(--serif);
  font-size:1.7rem;
  border:1px solid var(--line);
  border-radius:50%;
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
}
.foot-social{display:flex;gap:16px;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;list-style:none;margin:0;padding:0;}
.foot-social a:hover{color:var(--rose);}
.foot-copy{font-size:0.72rem;color:var(--ink-soft);}

.foot-links{display:flex;gap:36px;justify-content:flex-end;}
.foot-col{text-align:left;}
.foot-col h5{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:0.95rem;
  margin:0 0 12px;
}
.foot-menu{list-style:none;margin:0;padding:0;}
.foot-menu li{margin-bottom:9px;}
.foot-menu a{display:block;font-size:0.78rem;color:var(--ink-soft);}
.foot-menu a:hover{color:var(--rose);}

.foot-legal{
  text-align:center;
  font-size:0.72rem;
  color:var(--ink-soft);
  margin-top:44px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.foot-legal a{border-bottom:1px solid var(--ink-soft);}

/* ============================================================
   Page-content components — used inside Custom HTML blocks in
   the block editor. These are not auto-generated by index.php;
   paste the matching markup into a Page's content to use them.
   ============================================================ */

/* Shoppable horizontal carousel (Best Pajamas / Daytime Clothing) */
.shop-row-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:22px;
}
.shop-row-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.4rem;
  margin:0;
}
.shop-row-head h2 em{font-style:italic;color:var(--rose);margin-right:6px;}
.shop-row-head .hint{font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}
.carousel{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:14px;
  margin-bottom:48px;
  list-style:none;
  padding-left:0;
}
.carousel::-webkit-scrollbar{height:5px;}
.carousel::-webkit-scrollbar-thumb{background:var(--line);}
.shop-item{flex:0 0 220px;scroll-snap-align:start;}
.shop-item .thumb{
  aspect-ratio:4/5;
  background:linear-gradient(160deg,#f2ede2,#e4dac6);
  border-radius:var(--radius);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  color:var(--olive);
  overflow:hidden;
}
.shop-item .thumb img{width:100%;height:100%;object-fit:cover;}
.shop-item .note{
  font-size:0.7rem;
  color:var(--rose);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:4px;
}
.shop-item h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.02rem;
  margin:0 0 8px;
  line-height:1.3;
}
.shop-item a.shop-link{
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border-bottom:1px solid var(--ink);
  padding-bottom:1px;
}
.shop-item a.shop-link:hover{color:var(--rose);border-color:var(--rose);}

/* Numbered list (Best Practices, Pavlik Harness Guide) */
.simple-list{max-width:660px;margin:0 auto;}
.simple-item{
  border-bottom:1px solid var(--line);
  padding:22px 0;
  display:flex;
  gap:18px;
}
.simple-item:first-child{padding-top:0;}
.simple-item:last-child{border-bottom:none;}
.simple-item .num{
  font-family:var(--serif);
  font-style:italic;
  color:var(--rose);
  font-size:1.1rem;
  flex:0 0 28px;
}
.simple-item .body h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.08rem;
  margin:0 0 4px;
}
.simple-item .body p{color:var(--ink-soft);margin:0;font-size:0.94rem;}

/* Quiet disclosure / note line */
.note-line{
  max-width:660px;
  margin:36px auto 0;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:0.85rem;
  color:var(--ink-soft);
}
.note-line strong{color:var(--ink);font-weight:600;}
.note-line + .note-line{margin-top:20px;padding-top:20px;}

/* Category pill row (Shopping List) */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:48px;list-style:none;padding-left:0;}
.pill-row a, .pill-row span{
  border:1px solid var(--line);
  padding:8px 18px;
  border-radius:999px;
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  background:var(--paper);
  color:var(--ink-soft);
}
.pill-row a:hover{border-color:var(--rose);color:var(--rose);}

/* About page: photo + copy grid, and full-width pull-quote */
.about-grid{
  display:grid;
  grid-template-columns:0.85fr 1fr;
  gap:56px;
  align-items:center;
  max-width:1000px;
  margin:0 auto;
}
.about-grid img{border-radius:var(--radius);width:100%;}
.about-copy h2{font-family:var(--serif);font-weight:500;font-size:1.9rem;margin:0 0 18px;}
.about-copy p{color:var(--ink-soft);margin:0 0 16px;}
.about-quote{max-width:640px;margin:0 auto;text-align:center;padding:24px 0;}
.about-quote img{width:280px;margin:0 auto 32px;border-radius:var(--radius);}
.about-quote p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.5rem;
  line-height:1.45;
  color:var(--ink);
  margin:0;
}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;}
}

@media (max-width:860px){
  .header-inner{grid-template-columns:1fr;justify-items:center;gap:14px;}
  .main-nav .nav-menu{justify-content:center;flex-wrap:wrap;}
  .utility-menu{justify-content:center;}
  .footer-grid{grid-template-columns:1fr;text-align:center;}
  .foot-links{justify-content:center;flex-wrap:wrap;}
  .foot-col{text-align:center;}
}
@media (max-width:640px){
  .page-intro h1{font-size:1.9rem;}
  section.page-section{padding:44px 0;}
}