/*
Theme Name: Crochet Pattern Muse
Theme URI: https://crochetpatternmuse.com
Author: Crochet Pattern Muse
Description: A lightweight editorial block theme for crochet patterns, amigurumi, granny squares, and crochet bags.
Version: 1.0.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: crochet-pattern-muse
*/

:root {
  --cpm-cream: #fbf7f1;
  --cpm-paper: #fffdf9;
  --cpm-rose: #b96553;
  --cpm-rose-soft: #e3b6ad;
  --cpm-sage: #8d9b78;
  --cpm-terracotta: #b66e55;
  --cpm-brown: #3f2d25;
  --cpm-muted: #74675f;
  --cpm-line: #eadfd3;
  --cpm-shadow: 0 14px 35px rgba(77, 52, 39, 0.08);
  --cpm-radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--cpm-paper);
  color: var(--cpm-brown);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { transition: color .2s ease, opacity .2s ease, transform .2s ease; }

.wp-site-blocks { overflow: hidden; }

.cpm-header {
  background: rgba(255, 253, 249, .97);
  border-bottom: 1px solid var(--cpm-line);
  position: relative;
  z-index: 20;
}

.cpm-header-inner {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1320px;
  min-height: 88px;
  padding: 14px 28px;
}

.brand-shell {
  align-items: center;
  background: url("assets/images/crochet-pattern-muse-logo.svg") left center / 68px 68px no-repeat;
  display: flex;
  min-height: 68px;
  padding-left: 82px;
}

.brand-shell .wp-block-site-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: .95;
  margin: 0;
  max-width: 220px;
}

.brand-shell .wp-block-site-title a { color: var(--cpm-brown); text-decoration: none; }

.cpm-nav { font-size: .96rem; font-weight: 600; }
.cpm-nav a { color: var(--cpm-brown); text-decoration: none; }
.cpm-nav a:hover { color: var(--cpm-rose); }

.cpm-hero {
  background: var(--cpm-cream) url("assets/images/crochet-pattern-muse-homepage-hero.webp") center right / cover no-repeat;
  min-height: 560px;
  position: relative;
}

.cpm-hero::before {
  background: linear-gradient(90deg, rgba(251,247,241,.98) 0%, rgba(251,247,241,.92) 34%, rgba(251,247,241,.25) 61%, rgba(251,247,241,0) 74%);
  content: "";
  inset: 0;
  position: absolute;
}

.cpm-hero__inner {
  margin: 0 auto;
  max-width: 1320px;
  padding: 96px 28px;
  position: relative;
}

.cpm-hero__content { max-width: 585px; }

.cpm-eyebrow {
  color: var(--cpm-rose);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .15em;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.cpm-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .96;
  margin: 0 0 24px;
}

.cpm-hero p:not(.cpm-eyebrow) {
  color: var(--cpm-muted);
  font-size: 1.13rem;
  line-height: 1.7;
  margin: 0 0 30px;
  max-width: 500px;
}

.cpm-button {
  background: var(--cpm-rose);
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-weight: 750;
  padding: 14px 25px;
  text-decoration: none;
}

.cpm-button:hover { background: #9f5142; color: #fff; transform: translateY(-2px); }

.cpm-section { margin: 0 auto; max-width: 1320px; padding: 72px 28px; }

.cpm-section-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  letter-spacing: -.03em;
  margin: 0 0 34px;
  text-align: center;
}

.cpm-categories {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, 1fr);
}

.cpm-category {
  align-items: flex-end;
  background-position: center;
  background-size: cover;
  border-radius: var(--cpm-radius);
  box-shadow: var(--cpm-shadow);
  color: var(--cpm-brown);
  display: flex;
  min-height: 260px;
  overflow: hidden;
  padding: 24px;
  position: relative;
  text-decoration: none;
}

.cpm-category::after {
  background: linear-gradient(0deg, rgba(255,253,249,.96), rgba(255,253,249,.76) 35%, transparent 68%);
  content: "";
  inset: 0;
  position: absolute;
}

.cpm-category:hover { transform: translateY(-4px); }
.cpm-category--amigurumi { background-image: url("assets/images/crochet-pattern-muse-amigurumi-patterns.webp"); }
.cpm-category--granny { background-image: url("assets/images/crochet-pattern-muse-granny-square-ideas.webp"); }
.cpm-category--bags { background-image: url("assets/images/crochet-pattern-muse-crochet-bags.webp"); }
.cpm-category--fall { background-image: url("https://crochetpatternmuse.com/wp-content/uploads/2026/09/pumpkin-crochet-pattern-1.webp"); }

.cpm-category__text { position: relative; z-index: 2; }
.cpm-category h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.75rem; font-weight: 500; margin: 0 0 5px; }
.cpm-category span { color: var(--cpm-rose); font-size: .85rem; font-weight: 800; text-transform: uppercase; }

.cpm-latest-wrap { background: var(--cpm-cream); }
.cpm-latest-query .wp-block-post-template { gap: 24px; }
.cpm-post-card {
  background: var(--cpm-paper);
  border: 1px solid var(--cpm-line);
  border-radius: var(--cpm-radius);
  box-shadow: var(--cpm-shadow);
  height: 100%;
  overflow: hidden;
  padding: 0 0 22px;
}
.cpm-post-card > *:not(.wp-block-post-featured-image) { margin-left: 22px; margin-right: 22px; }
.cpm-post-card .wp-block-post-title { font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.15; }
.cpm-post-card .wp-block-post-title a { color: var(--cpm-brown); text-decoration: none; }
.cpm-post-card .wp-block-post-excerpt { color: var(--cpm-muted); }

.cpm-newsletter {
  align-items: center;
  background: linear-gradient(110deg, #f3e7df, #f5efe7);
  display: flex;
  gap: 34px;
  justify-content: space-between;
  padding: 48px max(28px, calc((100vw - 1264px) / 2));
}
.cpm-newsletter h2 { font-family: Georgia, "Times New Roman", serif; font-size: 2.2rem; font-weight: 500; margin: 0 0 7px; }
.cpm-newsletter p { color: var(--cpm-muted); margin: 0; }

.cpm-footer { background: #f7f0e8; border-top: 1px solid var(--cpm-line); }
.cpm-footer-inner { margin: 0 auto; max-width: 1320px; padding: 56px 28px 30px; }
.cpm-footer-grid { display: grid; gap: 36px; grid-template-columns: 1.7fr 1fr 1fr; }
.cpm-footer h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; font-weight: 500; margin: 0 0 10px; }
.cpm-footer h3 { font-size: .86rem; letter-spacing: .08em; margin: 0 0 14px; text-transform: uppercase; }
.cpm-footer p, .cpm-footer a { color: var(--cpm-muted); }
.cpm-footer a { display: block; margin: 8px 0; text-decoration: none; }
.cpm-footer a:hover { color: var(--cpm-rose); }
.cpm-copyright { border-top: 1px solid var(--cpm-line); color: var(--cpm-muted); font-size: .85rem; margin-top: 36px; padding-top: 22px; }

.cpm-content-shell { margin: 0 auto; max-width: 860px; padding: 72px 28px 96px; }
.cpm-content-shell h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.7rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.cpm-content-shell :where(p, li) { line-height: 1.78; }

/* Keep article photography elegant and readable instead of filling the whole content column. */
.cpm-content-shell .entry-content figure,
.cpm-content-shell .entry-content .pin-it-container {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 680px;
  width: 100%;
}
.cpm-content-shell .entry-content img {
  display: block;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 680px !important;
  width: 100% !important;
}
.cpm-content-shell > .wp-block-post-featured-image {
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
  width: 100%;
}
.cpm-content-shell > .wp-block-post-featured-image img {
  height: auto !important;
  max-width: 700px;
  width: 100% !important;
}

@media (max-width: 900px) {
  .cpm-content-shell .entry-content figure,
  .cpm-content-shell .entry-content .pin-it-container,
  .cpm-content-shell .entry-content img,
  .cpm-content-shell > .wp-block-post-featured-image,
  .cpm-content-shell > .wp-block-post-featured-image img { max-width: 620px !important; }
  .cpm-header-inner { min-height: 76px; padding: 10px 20px; }
  .brand-shell { background-size: 54px 54px; min-height: 56px; padding-left: 64px; }
  .brand-shell .wp-block-site-title { font-size: 1.45rem; max-width: 170px; }
  .cpm-hero { background-position: 62% center; min-height: 520px; }
  .cpm-hero::before { background: linear-gradient(90deg, rgba(251,247,241,.98) 0%, rgba(251,247,241,.9) 56%, rgba(251,247,241,.3) 82%); }
  .cpm-categories { grid-template-columns: 1fr; }
  .cpm-category { min-height: 300px; }
  .cpm-newsletter { align-items: flex-start; flex-direction: column; }
  .cpm-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .cpm-content-shell .entry-content figure,
  .cpm-content-shell .entry-content .pin-it-container,
  .cpm-content-shell .entry-content img,
  .cpm-content-shell > .wp-block-post-featured-image,
  .cpm-content-shell > .wp-block-post-featured-image img { max-width: 78% !important; }
  .cpm-header-inner { padding: 8px 16px; }
  .brand-shell { background-size: 46px 46px; min-height: 50px; padding-left: 55px; }
  .brand-shell .wp-block-site-title { font-size: 1.18rem; max-width: 140px; }
  .cpm-hero { background-image: none; min-height: auto; }
  .cpm-hero::before { display: none; }
  .cpm-hero__inner { padding: 66px 20px; }
  .cpm-hero h1 { font-size: 3.15rem; }
  .cpm-section { padding: 54px 18px; }
  .cpm-category { min-height: 230px; }
  .cpm-footer-grid { grid-template-columns: 1fr; }
  .cpm-content-shell { padding: 54px 20px 72px; }
}