/*
Theme Name: Consign with Grace
Theme URI: https://consignwithgrace.com
Author: Tim Lemons
Description: One-page site for Lindsey Silcox's Wee-Cycle It consignment concierge business.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
*/

:root{
  --sage:#6E7F5C;
  --sage-dark:#4B5940;
  --blush:#D98E73;
  --blush-dark:#B36847;
  --cream:#FBF6EE;
  --card:#F3EEE2;
  --ink:#33302A;
  --ink-soft:#6B6355;
  --line:#E4DBC9;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
/* WordPress's core block-library CSS gives paragraphs, headings, lists,
   groups and images their own default margins. This theme's layout is
   built with explicit spacing everywhere, so start every block at zero
   and let the classes below add spacing back in on purpose. */
p,h1,h2,h3,ul,li,figure,.wp-block-group,.wp-block-heading,.wp-block-list,.wp-block-image{margin:0;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Nunito Sans', sans-serif;
  line-height:1.6;
}
h1,h2,h3,.wordmark{font-family:'Fraunces', serif;}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}

header.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;max-width:1080px;margin:0 auto;
}
.wordmark{font-size:24px;font-weight:600;color:var(--sage-dark);}
.wordmark a{color:inherit;text-decoration:none;}
.wordmark span{color:var(--blush-dark);}
header.site-header nav{display:flex;align-items:center;gap:28px;}
header.site-header nav li{list-style:none;}
header.site-header nav a{font-size:15px;font-weight:600;text-decoration:none;color:var(--ink-soft);}
.btn{
  display:inline-block;background:var(--sage);color:#fff;
  padding:12px 22px;border-radius:30px;text-decoration:none;
  font-weight:700;font-size:15px;white-space:nowrap;
  border:2px solid var(--sage);
}
.btn:hover{background:var(--sage-dark);border-color:var(--sage-dark);}
.btn-outline{
  display:inline-block;border:2px solid var(--sage);color:var(--sage-dark);
  padding:10px 20px;border-radius:30px;text-decoration:none;font-weight:700;font-size:15px;
}
.btn-outline-invert{border-color:#fff;color:#fff;}

.hero{padding:40px 0 70px;}
/* WordPress wraps a Group block's children in an extra
   .wp-block-group__inner-container div at render time (not visible in the
   saved block content) -- that inner div is the real flex/grid parent of
   the block's children, so the layout rules target it specifically rather
   than the outer .hero-grid/.steps/etc wrapper (which only ever has that
   one inner div as its own single child). */
.hero-grid>.wp-block-group__inner-container{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;}
.eyebrow{
  color:var(--blush-dark);font-weight:700;font-size:13px;letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:14px;
}
.hero h1{font-size:44px;line-height:1.15;margin:0 0 20px;color:var(--ink);}
.hero p.lead{font-size:18px;color:var(--ink-soft);margin:0 0 28px;max-width:480px;}
.hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.trust-line{margin-top:18px;font-size:14px;color:var(--ink-soft);}
.hero-image{border-radius:20px;overflow:hidden;}
.hero-image img{width:100%;display:block;}

.section{padding:60px 0;}
.section-label{
  text-align:center;color:var(--blush-dark);font-weight:700;font-size:13px;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;
}
h2.section-title{text-align:center;font-size:32px;margin:0 0 40px;}

.steps>.wp-block-group__inner-container{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.step-card{background:var(--card);border-radius:16px;padding:26px 22px;}
.step-num{
  width:34px;height:34px;border-radius:50%;background:var(--sage);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
  margin-bottom:16px;
}
.step-card h3{font-size:18px;margin:0 0 8px;}
.step-card p{font-size:14.5px;color:var(--ink-soft);margin:0;}

.split>.wp-block-group__inner-container{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.accept-list{list-style:none;margin:0;padding:0;}
.accept-list li{
  padding:10px 0 10px 30px;position:relative;font-size:15.5px;border-bottom:1px solid var(--line);
}
.accept-list li:last-child{border-bottom:none;}
.accept-list li:before{
  content:"\2713";position:absolute;left:0;top:10px;color:var(--sage-dark);font-weight:700;
}
.note{font-size:14px;color:var(--ink-soft);margin-top:16px;}

.pricing-card{
  background:var(--sage);color:#fff;border-radius:20px;padding:34px;
}
.pricing-card h3{color:#fff;margin:0 0 6px;font-size:22px;}
.pricing-row{
  display:flex;justify-content:space-between;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.25);font-size:15.5px;
}
.pricing-row:last-of-type{border-bottom:none;}
.pricing-row strong{font-weight:700;}
.pricing-card .fine{font-size:13px;opacity:0.85;margin-top:16px;}

.dates-banner{
  background:var(--blush);color:#fff;border-radius:20px;padding:32px 36px;
}
.dates-banner>.wp-block-group__inner-container{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
}
.dates-banner h3{margin:0 0 6px;font-size:20px;}
.dates-banner p{margin:0;font-size:15px;opacity:0.95;}

.site-footer-content{
  background:var(--ink);color:#EFE9DC;padding:44px 0;margin-top:20px;
}
.footer-grid>.wp-block-group__inner-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
.site-footer-content .wordmark{color:#EFE9DC;font-size:20px;}
.site-footer-content .wordmark span{color:var(--blush);}
.site-footer-content a{text-decoration:none;color:#EFE9DC;font-size:14.5px;}
.site-footer-content .foot-links{display:flex;gap:24px;flex-wrap:wrap;}
.copyright{font-size:13px;color:#B7AF9E;margin-top:24px;text-align:center;}

@media (max-width:820px){
  .hero-grid>.wp-block-group__inner-container,.split>.wp-block-group__inner-container{grid-template-columns:1fr;}
  .steps>.wp-block-group__inner-container{grid-template-columns:1fr 1fr;}
  header.site-header nav{display:none;}
  .hero h1{font-size:32px;}
}
@media (max-width:420px){
  .wordmark{font-size:19px;}
  header.site-header{flex-wrap:wrap;row-gap:10px;}
}