/*
Theme Name: Sage Sheets Design
Theme URI: https://sagesheetsdesign.com
Author: Sage Sheets Design
Description: A calm, clean block theme for Sage Sheets Design, built for Google Sheets templates, helpful homeowner content, and custom spreadsheet services.
Version: 1.0.1
Requires at least: 6.8
Requires PHP: 7.4
Text Domain: sage-sheets-design
*/

:root {
  --ssd-sage: #789953;
  --ssd-cream: #f8f4ea;
  --ssd-ink: #171817;
  --ssd-muted: #5d6258;
  --ssd-pale-sage: #eaf0e3;
  --ssd-border: #d9d8cf;
  --ssd-white: #ffffff;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

.wp-site-blocks { overflow-x: hidden; }

.ssd-card {
  border: 1px solid var(--ssd-border);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(23, 24, 23, 0.06);
  height: 100%;
}

.ssd-eyebrow {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 700;
}

.ssd-soft-section {
  border-top: 1px solid var(--ssd-border);
  border-bottom: 1px solid var(--ssd-border);
}

.ssd-contact-form {
  display: grid;
  gap: 1rem;
  max-width: 760px;
}
.ssd-contact-form label {
  display: grid;
  gap: .4rem;
  font-weight: 700;
}
.ssd-contact-form input,
.ssd-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ssd-border);
  border-radius: 10px;
  background: #fff;
  color: var(--ssd-ink);
  font: inherit;
  padding: .85rem 1rem;
}
.ssd-contact-form textarea { min-height: 170px; resize: vertical; }
.ssd-contact-form button {
  width: fit-content;
  border: 0;
  border-radius: 999px;
  background: var(--ssd-sage);
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: .85rem 1.35rem;
  cursor: pointer;
}
.ssd-contact-form button:hover { filter: brightness(.94); }
.ssd-form-notice {
  border-radius: 10px;
  padding: .9rem 1rem;
  background: var(--ssd-pale-sage);
  border: 1px solid #cbd9bf;
}
.ssd-form-error {
  background: #fff1ef;
  border-color: #e3b9b1;
}
.ssd-hp { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }

.wp-block-navigation .wp-block-navigation-item__content { text-decoration: none; }
.wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--ssd-sage); }

.wp-element-button,
.wp-block-button__link {
  transition: transform .15s ease, filter .15s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
  transform: translateY(-1px);
  filter: brightness(.96);
}

@media (max-width: 781px) {
  .ssd-hero-columns { gap: 2rem !important; }
}


/* Final site-wide polish */
.ssd-contact-form > br,
.ssd-contact-form label br { display: none; }
.ssd-contact-form label { margin: 0; }
.ssd-contact-card { max-width: 760px; }
.ssd-blog-card .wp-block-post-title { line-height: 1.18; }
.ssd-blog-card .wp-block-post-excerpt__more-link { font-weight: 700; }
@media (min-width: 782px) {
  .ssd-blog-card { min-height: 100%; }
}
@media (max-width: 781px) {
  h1.has-xx-large-font-size { font-size: clamp(2.4rem, 12vw, 3.5rem) !important; line-height: 1.08 !important; }
  .ssd-card { height: auto; }
}


/* Homepage proportion polish */
body.home h1 {
  font-size: clamp(3.4rem, 5vw, 4.3rem) !important;
  line-height: 1.08 !important;
}
@media (max-width: 781px) {
  body.home h1 { font-size: clamp(2.7rem, 12vw, 3.5rem) !important; }
}


/* Homepage footer and articles repair */
body.home .wp-site-blocks > .wp-block-group > .wp-block-columns:first-child {
  max-width: 960px;
  align-items: flex-start;
}
body.home .wp-site-blocks > .wp-block-group > .wp-block-columns:first-child > .wp-block-column:first-child {
  flex-basis: 32% !important;
}
body.home .wp-site-blocks > .wp-block-group > .wp-block-columns:first-child > .wp-block-column:last-child {
  flex-basis: 68% !important;
}
body.home .wp-site-blocks > .wp-block-group > .wp-block-columns:first-child h2 {
  font-size: 1.85rem;
  line-height: 1.2;
}
body.home .wp-block-latest-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  padding: 0;
}
body.home .wp-block-latest-posts > li {
  margin: 0 !important;
  padding: 20px;
  border: 1px solid var(--ssd-border);
  border-radius: 16px;
  background: var(--ssd-white);
  box-shadow: 0 8px 28px rgba(23,24,23,.05);
}
body.home .wp-block-latest-posts__featured-image.alignleft {
  float: none;
  margin: 0 0 16px 0;
}
body.home .wp-block-latest-posts__featured-image img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 10px;
}
body.home .wp-block-latest-posts__post-title {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.22;
  margin-bottom: 8px;
}
body.home .wp-block-latest-posts__post-date {
  margin-bottom: 12px;
}
body.home .wp-block-latest-posts__post-excerpt {
  margin-top: 12px;
}
header .wp-block-site-logo img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
}
@media (max-width: 781px) {
  body.home .wp-site-blocks > .wp-block-group > .wp-block-columns:first-child { display: block; }
  body.home .wp-block-latest-posts { grid-template-columns: 1fr; }
  header .wp-block-site-logo img { width: 56px !important; height: 56px !important; }
}


/* Center an unpaired final blog card */
body.blog .wp-block-post-template > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc(50% - 12px);
  justify-self: center;
}
@media (max-width: 781px) {
  body.blog .wp-block-post-template > li:last-child:nth-child(odd) {
    width: 100%;
  }
}


/* Shop product images */
.ssd-shop-image {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 20px;
  overflow: hidden;
  border: 1px solid var(--ssd-border);
  border-radius: 12px;
  background: #f4f1cf;
}
.ssd-shop-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 600px) {
  .ssd-shop-image { margin-bottom: 18px; }
}
