/*
Theme Name: Simplify & Sell
Theme URI: https://simplify-sell.com
Author: Built for Judy Mansour
Description: Warm, first-person block theme for Simplify & Sell — downsizing, decluttering and estate sales in Seattle and on the Eastside. Editable in the Site Editor.
Version: 1.1.1
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simplify-and-sell
*/


  :root{
    --bg:#FDFAF5;
    --surface:#FFFFFF;
    --soft:#F3ECE0;
    --soft-2:#E8DDC9;
    --blush:#FBEFE6;
    --ink:#22302B;
    --ink-2:#4E5D56;
    --green:#2F5D50;
    --green-d:#1E4136;
    --accent:#B75F38;
    --accent-2:#D98A5F;
    --accent-soft:#F8E7DB;
    --gold:#C9A227;
    --line:#E2D8C7;
    --radius:16px;
    --wrap:1140px;
    --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
    --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:92px}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
       font-size:19px; line-height:1.68; -webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.16; letter-spacing:-.01em; margin:0 0 .5em}
  h1{font-size:clamp(2.3rem,5vw,3.5rem)}
  h2{font-size:clamp(1.85rem,3.4vw,2.55rem)}
  h3{font-size:1.3rem}
  p{margin:0 0 1.15em}
  a{color:var(--green-d)}
  img,svg{max-width:100%}
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
  .narrow{max-width:790px; margin-left:max(0px,calc(50vw - 570px)); margin-right:auto}
  .narrow.center{margin-left:auto; margin-right:auto}
  section{padding:82px 0}
  @media(max-width:700px){ section{padding:56px 0} }
  .eyebrow{font-size:.79rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--accent); margin:0 0 14px}
  .lede{font-size:1.2rem; color:var(--ink-2); max-width:66ch}
  .section-head{max-width:740px; margin-bottom:46px}

  .btn{display:inline-flex; align-items:center; gap:9px; justify-content:center;
       font-family:var(--sans); font-size:1.02rem; font-weight:650; padding:16px 28px;
       border-radius:999px; border:2px solid transparent; text-decoration:none; cursor:pointer;
       transition:transform .12s ease, background .18s ease; min-height:56px}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--green); color:#fff; box-shadow:0 8px 20px rgba(47,93,80,.22)}
  .btn-primary:hover{background:var(--green-d)}
  .btn-ghost{background:transparent; color:var(--green-d); border-color:var(--line)}
  .btn-ghost:hover{background:#fff; border-color:var(--green)}
  .btn-lg{padding:19px 32px; font-size:1.06rem}
  a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
  .skip{position:absolute; left:-9999px; top:0; background:#fff; padding:14px 20px; z-index:100}
  .skip:focus{left:12px; top:12px}

  /* Header */
  header.site{position:sticky; top:0; z-index:50; background:rgba(253,250,245,.95);
              backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 24px; max-width:1340px; margin:0 auto}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0}
  .brand-txt{display:flex; flex-direction:column; line-height:1.05}
  .brand-name{font-family:var(--serif); font-size:1.42rem; color:var(--ink); font-weight:600}
  .brand-name .amp{color:var(--accent)}
  .brand-sub{font-size:.6rem; letter-spacing:.19em; color:var(--green); font-weight:700; text-transform:uppercase; margin-top:3px}
  .navlinks{display:flex; align-items:center; gap:22px}
  .navlinks a{font-size:.97rem; text-decoration:none; color:var(--ink-2); font-weight:550; white-space:nowrap}
  .navlinks a:hover{color:var(--green-d)}
  .phone-cta{display:flex; align-items:center; gap:14px; flex-shrink:0}
  .phone-link{font-family:var(--serif); font-size:1.26rem; text-decoration:none; color:var(--green-d); font-weight:600; white-space:nowrap}
  .ph-short{display:none}
  .menu-btn{display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:1rem; cursor:pointer; color:var(--ink)}
  @media(max-width:1540px){ .phone-link{display:none} }
  @media(max-width:1240px){
    .navlinks{display:none}
    .menu-btn{display:block}
    .navlinks.open{display:flex; flex-direction:column; align-items:flex-start; gap:0;
      position:absolute; left:0; right:0; top:100%; background:var(--bg);
      border-bottom:1px solid var(--line); padding:8px 24px 20px}
    .navlinks.open a{padding:14px 0; width:100%; border-bottom:1px solid var(--line); font-size:1.08rem}
  }
  @media(max-width:760px){
    .nav-cta{display:none} .brand-sub{display:none} .brand-name{font-size:1.26rem}
    .ph-full{display:none} .ph-short{display:inline}
    .phone-link{display:inline-flex; align-items:center; background:var(--green); color:#fff;
      padding:12px 18px; border-radius:999px; font-family:var(--sans); font-size:1rem; font-weight:650; min-height:48px}
  }
  @media(max-width:400px){ .brand-name{font-size:1.08rem} .nav{padding:12px 14px; gap:10px} .wrap{padding:0 18px} }

  /* Hero */
  .hero{background:linear-gradient(172deg,var(--blush) 0%, var(--soft) 38%, var(--bg) 88%); padding:64px 0 70px}
  .hero-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:52px; align-items:center}
  @media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:32px} }
  .portrait{
    aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
    background:linear-gradient(160deg,var(--soft-2),#D7CAB2); display:grid; place-items:center;
    text-align:center; padding:26px; box-shadow:0 18px 44px rgba(34,48,43,.13);
  }
  @media(max-width:900px){ .portrait{aspect-ratio:3/2; max-width:420px; margin:0 auto} }
  .portrait span{font-size:.94rem; color:#6B6152}
  .hero h1{margin-bottom:.34em}
  .hero-sig{font-family:var(--serif); font-size:1.16rem; color:var(--green-d); margin-top:22px}
  .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}

  /* Trust bar */
  .trustbar{background:var(--green); color:#EFF3F1; padding:22px 0}
  .trust-inner{display:flex; flex-wrap:wrap; gap:12px 44px; justify-content:center; align-items:center; text-align:center}
  .trust-inner span{font-size:1rem; opacity:.97}
  .trust-inner strong{color:#fff; font-weight:650}

  /* Cards */
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
  @media(max-width:900px){ .grid-3{grid-template-columns:1fr} }
  .svc{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:34px 30px 32px; position:relative; overflow:hidden;
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .svc::before{content:""; position:absolute; inset:0 0 auto 0; height:5px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2))}
  .svc:hover{box-shadow:0 16px 38px rgba(34,48,43,.11); transform:translateY(-3px)}
  .svc h3{margin-bottom:.4em}
  .svc p{font-size:1.02rem; color:var(--ink-2); margin-bottom:0}
  .svc-icon{
    width:78px; height:78px; border-radius:50%; display:grid; place-items:center; margin-bottom:22px;
    background:radial-gradient(circle at 32% 28%, #FFF6EE 0%, var(--accent-soft) 62%, #F2DDCD 100%);
    border:1px solid #EFD9C8;
  }
  .svc-icon svg{width:38px; height:38px; stroke:var(--accent); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round}

  /* Coach box */
  .coach{
    background:linear-gradient(150deg,#FFFDF8,#F7EEE1);
    border:2px solid var(--accent-2); border-radius:var(--radius);
    padding:46px 44px; position:relative;
  }
  @media(max-width:700px){ .coach{padding:32px 24px} }
  .coach .badge{
    display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:#fff;
    font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
    padding:8px 16px; border-radius:999px; margin-bottom:20px;
  }
  .coach h2{margin-bottom:.4em}
  .coach p{font-size:1.09rem}
  .coach .pull{font-family:var(--serif); font-size:1.3rem; line-height:1.5; color:var(--green-d);
               border-left:4px solid var(--accent); padding:4px 0 4px 22px; margin:26px 0}

  /* Steps */
  .steps{display:grid; gap:0; margin-top:6px}
  .step{display:grid; grid-template-columns:84px 1fr; gap:26px; padding:28px 0; border-top:1px solid var(--line)}
  .step:last-child{border-bottom:1px solid var(--line)}
  .step-num{font-family:var(--serif); font-size:1.45rem; color:#fff;
    background:linear-gradient(150deg,var(--green),var(--green-d));
    width:60px; height:60px; border-radius:50%; display:grid; place-items:center; box-shadow:0 6px 14px rgba(47,93,80,.22)}
  .step .label{font-size:.79rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:6px}
  .step h3{margin-bottom:.3em}
  .step p{margin-bottom:0; color:var(--ink-2); font-size:1.03rem}
  @media(max-width:620px){ .step{grid-template-columns:1fr; gap:14px} }

  /* Pricing */
  .rate{background:var(--surface); border:2px solid var(--green); border-radius:var(--radius); padding:38px; margin-bottom:22px}
  @media(max-width:640px){ .rate{padding:26px 20px} }
  .rate-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; padding:22px 0; border-bottom:1px solid var(--line)}
  .rate-row:last-of-type{border-bottom:0; padding-bottom:0}
  .rate-row:first-of-type{padding-top:0}
  .rate-num{font-family:var(--serif); font-size:clamp(2.1rem,5vw,2.9rem); color:var(--green); line-height:1; flex-shrink:0}
  .rate-txt{font-size:1.04rem; color:var(--ink-2); flex:1; min-width:260px}
  .rate-txt strong{color:var(--ink)}

  .checklist{list-style:none; margin:0; padding:0; display:grid; gap:14px}
  .checklist li{display:flex; gap:13px; align-items:flex-start; font-size:1.03rem; line-height:1.55}
  .tick{flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--accent-soft);
        display:grid; place-items:center; margin-top:3px}
  .tick svg{width:14px; height:14px; stroke:var(--accent); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round}

  .alt{background:var(--soft)}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px}

  .quote{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px}
  .quote p{font-family:var(--serif); font-size:1.12rem; line-height:1.55}
  .quote footer{font-size:.94rem; color:var(--ink-2)}
  .stars{color:var(--gold); letter-spacing:3px; margin-bottom:12px}

  .areas{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; justify-content:center}
  .areas span{background:var(--surface); border:1px solid var(--line); border-radius:999px;
              padding:11px 22px; font-size:1rem; font-weight:550}

  details{border-bottom:1px solid var(--line); padding:6px 0}
  details summary{cursor:pointer; padding:20px 44px 20px 0; font-family:var(--serif); font-size:1.16rem; list-style:none; position:relative}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
                         font-size:1.6rem; color:var(--green); font-family:var(--sans); line-height:1}
  details[open] summary::after{content:"\2013"}
  details .answer{padding:0 44px 22px 0; color:var(--ink-2); font-size:1.02rem}
  details .answer p:last-child{margin-bottom:0}

  .contact{background:var(--green); color:#F2F6F4}
  .contact h2{color:#fff}
  .contact .lede{color:#D5E1DB}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
  @media(max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:34px} }
  .contact a{color:#fff}
  .form{background:#fff; border-radius:var(--radius); padding:32px; color:var(--ink)}
  .field{margin-bottom:18px}
  .field label{display:block; font-size:.92rem; font-weight:650; margin-bottom:7px}
  .field input,.field select,.field textarea{width:100%; padding:14px 15px; font-size:1.02rem; font-family:var(--sans);
    border:1px solid var(--line); border-radius:10px; background:#FDFCFA; color:var(--ink)}
  .field textarea{min-height:110px; resize:vertical}

  .editnote{margin-top:26px; padding:16px 20px; background:#FFF9E8; border:1px dashed #D8C48A;
            border-radius:10px; font-size:.93rem; color:#6B5A2E}

  footer.site{background:var(--ink); color:#C9D2CE; padding:52px 0 30px; font-size:.96rem}
  .foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:38px; margin-bottom:36px}
  @media(max-width:820px){ .foot-grid{grid-template-columns:1fr; gap:28px} }
  footer.site h4{color:#fff; font-family:var(--sans); font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:14px}
  footer.site a{color:#C9D2CE; text-decoration:none; display:block; padding:5px 0}
  footer.site a:hover{color:#fff}
  .foot-bottom{border-top:1px solid #3A4A44; padding-top:22px; display:flex; flex-wrap:wrap; gap:14px;
               justify-content:space-between; font-size:.89rem; color:#93A19B}

/* ==========================================================================
   WordPress integration
   The design above was authored as a standalone page. These rules reconcile
   it with the markup the block editor produces, so the layout survives being
   edited in the Site Editor rather than only looking right as shipped.
   ========================================================================== */

/* Core wraps blocks in extra elements and applies its own flow spacing.
   The design controls its own rhythm, so neutralise the injected margins
   and let the rules above do the work. */
:where(.wp-site-blocks) > *,
:where(.wp-site-blocks) :where(.is-layout-flow) > *,
:where(.wp-site-blocks) :where(.is-layout-constrained) > * { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks { padding: 0 }
.wp-block-group { box-sizing: border-box }

/* Headings get a .wp-block-heading class in the editor; keep them in the
   same type system as the original. */
h1.wp-block-heading, h2.wp-block-heading, h3.wp-block-heading { font-family: var(--serif) }

/* The hero portrait is a <figure> under the editor, not a <div>. */
figure.portrait { margin: 0; padding: 0 }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block }

/* Core buttons, dressed as the design's buttons so Judy can add or rename
   one in the editor and have it match. */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px }
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 1.02rem; font-weight: 650;
  padding: 16px 28px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; min-height: 56px; transition: transform .12s ease, background .18s ease;
}
.wp-block-button__link:hover { transform: translateY(-1px) }
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(47,93,80,.22);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--green-d) }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--green-d); border-color: var(--line);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; border-color: var(--green) }
.contact .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #fff; color: var(--green-d) }
.contact .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.45) }

/* Lists inside the checklist keep the design's tick treatment. */
ul.checklist { list-style: none; padding-left: 0 }

/* The sticky header has to clear the admin bar for logged-in editors,
   or the logo hides underneath it while Judy is working. */
body.admin-bar header.site { top: 32px }
@media screen and (max-width: 782px) { body.admin-bar header.site { top: 46px } }

/* Editor canvas: give the same page background so what she sees while
   editing matches what visitors get. */
.editor-styles-wrapper { background: var(--bg) }

/* ---------------------------------------------------------------
   Inner pages. The front page is fully designed; everything else
   (a regular page, a post, search, 404) shares this simple, readable
   column so a page Judy adds later still looks like the site.
   --------------------------------------------------------------- */
.page-shell { padding: 64px 0 88px; background: var(--bg) }
.page-body { max-width: 760px }
.page-body > * + * { margin-top: 20px }
.page-title {
  font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.14; color: var(--ink); margin-bottom: 10px;
}
.page-body h2 { font-size: 1.7rem; margin-top: 38px }
.page-body h3 { font-size: 1.28rem; margin-top: 30px }
.page-body ul, .page-body ol { padding-left: 1.25em }
.page-body li + li { margin-top: 8px }
.page-body img { max-width: 100%; height: auto; border-radius: 14px }
.page-body blockquote {
  border-left: 3px solid var(--accent); padding-left: 20px;
  font-family: var(--serif); font-size: 1.18rem; color: var(--ink-2);
}
.post-meta { color: var(--ink-2); font-size: .95rem; margin-bottom: 18px }
.post-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 28px; margin-top: 22px;
}
.post-card h2 { margin: 0 0 6px; font-size: 1.45rem }
.post-card h2 a { text-decoration: none; color: var(--ink) }
.post-card h2 a:hover { color: var(--green) }
.wp-block-query-pagination { margin-top: 34px; gap: 12px }
@media (max-width: 760px) { .page-shell { padding: 40px 0 64px } }

/* Checklist rows: the tick and the sentence are the only two flex items.
   Without the wrapper span the bold lead-in and the rest of the sentence
   become separate flex items and split into two columns. */
.checklist li > .ck-txt { flex: 1; min-width: 0 }

/* WordPress core ships ":root :where(.is-layout-flow) > * { margin-block-end: 0 }",
   which outranks the plain p/h rules above and collapses the spacing between
   core blocks. Restore the design's own rhythm at matching specificity. */
:root :where(.is-layout-flow, .is-layout-constrained) > p { margin-block-end: 1.15em }
:root :where(.is-layout-flow, .is-layout-constrained) > h1,
:root :where(.is-layout-flow, .is-layout-constrained) > h2,
:root :where(.is-layout-flow, .is-layout-constrained) > h3,
:root :where(.is-layout-flow, .is-layout-constrained) > h4 { margin-block-end: .5em }
:root :where(.is-layout-flow, .is-layout-constrained) > .eyebrow { margin-block-end: 14px }
:root :where(.is-layout-flow, .is-layout-constrained) > .hero h1 { margin-block-end: .34em }

/* On phones the original stylesheet squashed the portrait into a 3:2 landscape
   box, which was fine for the grey placeholder but crops a standing portrait
   down to a forehead. Keep the same 4:5 crop the desktop uses. */
@media (max-width: 900px) {
  .portrait, figure.portrait { aspect-ratio: 4/5; max-width: 340px; margin: 0 auto }
}