/*
Theme Name: Cole Blackwood (Matrioska Child)
Theme URI: https://coleblackwood.com
Description: Child theme for Matrioska. Minimal, centered, story-first layout styled to match the homepage mockup, with a subtle background illustration.
Author: Scotty / Cole Blackwood
Template: matrioska
Version: 1.1.0
Text Domain: coleblackwood-matrioska-child
*/

:root{
  --cb-bg: #f6f1ea;
  --cb-text: #2a2623;
  --cb-muted: #6a625c;
  --cb-rule: rgba(42,38,35,.25);

  --cb-radius: 10px;
  --cb-max: 860px;

  --cb-btn-bg: #3f3a36;
  --cb-btn-text: #ffffff;
  --cb-btn-bg-hover: #2f2b28;
}

/* Option A: subtle background illustration */
body{
  background: var(--cb-bg);
  color: var(--cb-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--cb-bg);
  background-image: url("assets/bg.webp");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  opacity: 1; /* lower to 0.8 for softer */
}
@media (min-width: 1400px){
  body::before{ background-image: url("assets/bg@2x.webp"); }
}

/* Layout */
.site, .site-content, .content-area, .entry-content, main{
  max-width: var(--cb-max);
  margin-left: auto;
  margin-right: auto;
}
.entry-content{
  padding: 2.5rem 1.25rem;
  line-height: 1.75;
  font-size: 1.05rem;
}

/* Headings */
.entry-content h1, .entry-content h2, .entry-content h3{
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  letter-spacing: .3px;
  color: var(--cb-text);
}
.entry-content h1{
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  text-align: center;
  margin: 1.25rem 0 .5rem;
}
.entry-content h2{
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  text-align: center;
  margin: 2.5rem 0 1rem;
}
.entry-content h3{
  font-size: 1.35rem;
  text-align: center;
  margin: 2rem 0 .75rem;
}

/* Hero text */
.cb-hero-sub{
  text-align:center;
  font-style: italic;
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--cb-muted);
  margin: 0 0 .75rem;
}
.cb-hero-tag{
  text-align:center;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: .98rem;
  letter-spacing: .2px;
  color: var(--cb-muted);
  margin: 0 0 1.5rem;
}

/* Buttons */
.cb-btn-row{
  display:flex;
  gap: 1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin: 1.25rem 0 2rem;
}
a.cb-btn{
  display:inline-block;
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text) !important;
  text-decoration:none;
  padding: .9rem 1.4rem;
  border-radius: var(--cb-radius);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: .98rem;
  letter-spacing: .15px;
  min-width: 210px;
  text-align:center;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  transition: transform .08s ease, background .15s ease;
}
a.cb-btn:hover{
  background: var(--cb-btn-bg-hover);
  transform: translateY(-1px);
}

/* Dividers */
.cb-rule{
  border: 0;
  height: 1px;
  background: var(--cb-rule);
  margin: 2.25rem auto;
  max-width: 640px;
}

/* Copy */
.cb-center{ text-align:center; }
.cb-lead{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--cb-text);
  font-size: 1.05rem;
  margin: 0 auto;
  max-width: 640px;
}
.cb-italic{
  font-style: italic;
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  color: var(--cb-muted);
  font-size: 1.12rem;
  margin: .75rem auto 0;
  max-width: 640px;
}
.cb-song-title{
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-style: italic;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  text-align:center;
  margin: .25rem 0 .35rem;
}

/* Header/Footer */
.site-header, .site-footer{ background: transparent; }

/* Default WP buttons */
.wp-block-button__link{
  background: var(--cb-btn-bg) !important;
  color: var(--cb-btn-text) !important;
  border-radius: var(--cb-radius) !important;
  padding: .9rem 1.4rem !important;
  text-decoration:none !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.wp-block-button__link:hover{ background: var(--cb-btn-bg-hover) !important; }