/*
Theme Name: Small Space, Sorted
Theme URI: https://smallspacesorted.com
Description: Custom child theme for Small Space, Sorted — applies the Bold Jewel color palette (Brick/Forest/Gold), Space Grotesk + Inter fonts, and layout styling on top of GeneratePress.
Author: Small Space, Sorted
Template: generatepress
Version: 1.0.0
Text Domain: small-space-sorted
*/

/* =====================================================================
   HOW THIS WORKS
   This is a "child theme" — WordPress requires the parent theme,
   GeneratePress, to be installed and active-able (it does NOT need to
   be the active theme; activating this child theme automatically
   loads GeneratePress's code underneath it).

   Everything below is the same custom styling from the CSS file —
   it just lives in the right place now so the .zip installs directly
   as a real theme via Appearance → Themes → Add New → Upload Theme.

   If something doesn't restyle, right-click that element on your
   live site → Inspect → find its actual class name → adjust the
   selector below to match.
   ===================================================================== */

/* ---------- 1. FONTS + COLOR PALETTE ---------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --clay:#B8452A; --clay-dark:#9A3A22;
  --ink:#211D1A; --linen:#FBF7F1; --linen-deep:#F0E3CE; --linen-deeper:#E4CFA9;
  --sage:#3E5A44; --sage-dark:#304536; --sage-tint:#E8EDE8;
  --mustard:#C9973A;
  --grey:#6E675C; --grey-light:#948C7C; --white:#FFFFFF;
  --border:#E3D2B0; --border-soft:#ECDCC0;
}

/* ---------- 2. GLOBAL TYPOGRAPHY ---------- */
body, p, li, a, input, textarea, button{
  font-family:'Inter', -apple-system, sans-serif;
  color:var(--ink);
}
body{ background:var(--linen); }
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .widget-title, .page-title{
  font-family:'Space Grotesk', sans-serif !important;
  font-weight:700 !important;
  color:var(--ink) !important;
  letter-spacing:-0.01em;
}
a{ color:var(--clay); }
a:hover{ color:var(--clay-dark); }
::selection{ background:var(--linen-deeper); }

/* ---------- 3. BUTTONS (GeneratePress buttons + Gutenberg blocks) ---------- */
.button, .wp-block-button__link, .wp-element-button,
input[type="submit"], button.gform_button, .elementor-button{
  font-family:'Space Grotesk', sans-serif !important;
  font-weight:600 !important;
  background:var(--clay) !important;
  color:var(--white) !important;
  border:none !important;
  border-radius:8px !important;
  padding:13px 24px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  transition:opacity .15s ease;
}
.button:hover, .wp-block-button__link:hover, .wp-element-button:hover{
  opacity:.88 !important;
  background:var(--clay) !important;
  color:var(--white) !important;
}
.is-style-outline .wp-block-button__link{
  background:transparent !important;
  border:1.5px solid var(--ink) !important;
  color:var(--ink) !important;
}

/* ---------- 4. HEADER / NAVIGATION ---------- */
.site-header, #masthead{
  background:rgba(250,243,235,.94) !important;
  border-bottom:1px solid var(--border);
  box-shadow:none !important;
}
.site-header .main-title a, .site-title a{
  font-family:'Space Grotesk', sans-serif !important;
  font-weight:700 !important;
  color:var(--ink) !important;
}
.main-navigation, .main-navigation .inside-navigation{
  background:transparent !important;
}
.main-navigation .main-nav ul li a{
  font-family:'Space Grotesk', sans-serif !important;
  font-weight:500 !important;
  font-size:14px !important;
  color:var(--ink) !important;
  border-bottom:2px solid transparent;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a{
  color:var(--clay) !important;
  border-bottom-color:var(--clay);
}

/* ---------- 5. PAGE / CONTENT WIDTH + SPACING ---------- */
.site-content, .content-area, .inside-article{
  background:transparent !important;
}
.entry-content{
  font-size:16.5px;
  line-height:1.7;
}
.entry-content p{ margin-bottom:20px; }

/* ---------- 6. BLOG / CATEGORY ARCHIVE POST CARDS ---------- */
article.post, .post, .type-post{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:20px;
  margin-bottom:28px;
}
article.post .entry-title, .post .entry-title{
  font-size:20px !important;
  margin-bottom:8px;
}
article.post .entry-title a{ color:var(--ink) !important; }
article.post .entry-title a:hover{ color:var(--clay) !important; }
article.post .entry-meta, .post .entry-meta{
  font-size:11.5px;
  color:var(--grey-light);
  font-family:'Space Grotesk', sans-serif;
  text-transform:uppercase;
  letter-spacing:.5px;
}
article.post .post-image img, .post .post-image img{
  border-radius:8px;
  margin-bottom:14px;
}
/* Category label / taxonomy badge shown above post title */
.entry-meta .cat-links a, .entry-categories a{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:11.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--clay);
}

/* ---------- 7. SIDEBAR WIDGETS ---------- */
#right-sidebar .widget, .widget-area .widget, aside.sidebar .widget{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  margin-bottom:24px;
}
.widget-title{
  font-size:15.5px !important;
  margin-bottom:14px;
  text-transform:none !important;
}
/* Newsletter signup widget (Text/HTML widget with a form embed) */
.widget input[type="email"], .widget input[type="text"]{
  width:100%;
  padding:10px 12px;
  border-radius:7px;
  border:1px solid var(--border);
  background:var(--linen);
  font-size:13px;
  margin-bottom:9px;
}

/* ---------- 8. FOOTER ---------- */
#footer-widgets, .footer-widgets{
  background:var(--linen) !important;
  border-top:1px solid var(--border);
}
#footer-widgets .widget-title{
  font-family:'Space Grotesk', sans-serif !important;
  font-size:12px !important;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--grey);
}
#footer-widgets a, .footer-widgets a{
  display:block;
  font-size:14px;
  color:var(--ink);
  margin-bottom:9px;
}
#footer-widgets a:hover{ color:var(--clay); }
.site-footer, .site-info, #site-footer{
  background:var(--linen) !important;
  border-top:1px solid var(--border);
  color:var(--grey-light) !important;
  font-size:12px;
}

/* ---------- 9. AFFILIATE / "OUR PICK" CALLOUT BOX ----------
   Wrap any product recommendation in the block editor with a
   Group block, add the class "pick-card" in Advanced settings. */
.pick-card{
  background:var(--linen-deep);
  border-left:4px solid var(--clay);
  border-radius:0 10px 10px 0;
  padding:22px 24px;
  margin:28px 0;
}
.pick-card .pick-eyebrow{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--clay);
}

/* ---------- 10. AFFILIATE DISCLOSURE / AD-SLOT LABEL ----------
   Add class "disclosure-line" to a Paragraph block at the top of
   an article; add class "ad-slot" to a Group block wrapping any
   ad unit shortcode once you're approved for AdSense/Ezoic. */
.disclosure-line{
  font-size:12.5px;
  color:var(--grey);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  padding:10px 0;
}
.ad-slot{
  text-align:center;
  font-family:'Space Grotesk', sans-serif;
  font-size:10.5px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--grey-light);
  margin:32px 0;
}

/* ---------- 11. RESPONSIVE ---------- */
@media(max-width:768px){
  .button, .wp-block-button__link{ width:100%; text-align:center; }
}