/*
Theme Name: Thimble
Theme URI: https://example.com/thimble
Author: Your Name
Description: A cheerful craft and DIY theme. Each project shows its skill level, time and a materials checklist makers can tick off as they gather supplies. Pattern-envelope hero, browse by skill level, fabric-swatch craft tiles with pinking-shear edges, light and dark modes, self-hosted fonts and one-click demo content with original artwork.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thimble
Tags: blog, craft, education, three-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
  --bg: #fffdf9;
  --surface: #ffffff;
  --surface-2: #f6f1e8;
  --text: #22324c;
  --text-2: #465670;
  --muted: #6c7890;
  --line: #e8e1d4;
  --accent: #d64545;
  --accent-ink: #ffffff;
  --denim: #2f4a73;
  --bias: #f2c14e;
  --sage: #8fb3a0;
  --blush: #f29c8f;
  --sage-tint: #e6efe9;
  --font-display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --w-display: 760;
  --track-display: -0.02em;
  --lh-display: 1.08;
  --radius: 18px;
  --radius-ui: 999px;
  --footer-bg: #22324c;
  --footer-text: #fff8ee;
  --footer-muted: #b9c3d6;
  --footer-line: rgba(255,255,255,.14);
  --accent-hover: #22324c;
  --accent-hover-ink: #ffffff;
}
:root[data-theme="dark"] {
  --bg: #141b28;
  --surface: #1a2333;
  --surface-2: #202b3e;
  --text: #f4efe6;
  --text-2: #d3d8e2;
  --muted: #9ea9bd;
  --line: #2e3a50;
  --accent: #ff6b6b;
  --accent-ink: #1b1010;
  --denim: #8fb0de;
  --sage-tint: #1c2a2a;
  --footer-bg: #0e141e;
  --accent-hover: #f4efe6;
  --accent-hover-ink: #141b28;
}

h1, h2, h3, h4, .brand__name { font-stretch: 92%; }
body { font-size: 17px; }
.brand__name { font-size: 1.7rem; font-weight: 800; }
.brand__mark { width: 40px; height: 40px; color: var(--denim); }
.site-header { border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.primary-menu > li > a { font-weight: 700; font-size: .96rem; padding: .5rem .85rem; }
.primary-menu > li > a:hover, .primary-menu .current-menu-item > a { background: var(--surface-2); color: var(--text); }
.cat { font-family: var(--font-body); font-weight: 800; font-size: .82rem; color: var(--denim); }
.section-title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.btn { font-family: var(--font-body); font-weight: 800; }
.th-note { font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.1; color: var(--accent); }

/* ---------- Pattern-envelope hero ---------- */
.th-hero { display: grid; gap: 1.5rem; align-items: center; padding-block: clamp(28px, 4vw, 56px); }
@media (min-width: 960px) { .th-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.th-hero__media { aspect-ratio: 4 / 3; border-radius: 30px; }
.th-envelope { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(24px, 3vw, 40px); background: var(--surface-2); border-radius: 26px; outline: 2px dashed color-mix(in srgb, var(--denim) 45%, transparent); outline-offset: -12px; box-shadow: 0 30px 60px -36px rgba(34,50,76,.5); }
@media (min-width: 960px) { .th-envelope { margin-left: -110px; } }
.th-envelope__title { font-size: clamp(1.8rem, 3.3vw, 2.6rem); }
.th-envelope__title a:hover { color: var(--accent); }
.th-envelope__text { color: var(--text-2); font-size: 1.05rem; }
.th-envelope__stats { display: flex; flex-wrap: wrap; gap: .6rem; margin: .3rem 0; }
.th-envelope__stats div { padding: .55rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.th-envelope__stats dt { font-size: .75rem; color: var(--muted); font-weight: 700; }
.th-envelope__stats dd { margin: 0; font-family: var(--font-display); font-weight: 750; font-size: 1.1rem; }
.th-envelope__note { transform: rotate(-4deg); align-self: flex-start; margin: -.2rem 0 .1rem; }
.th-envelope .btn { align-self: flex-start; }

/* ---------- Skill levels ---------- */
.th-skills { padding-block: clamp(24px, 3vw, 40px); }
.th-skills__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 1.1rem; }
.th-skills__list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.th-skillcard { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: 1.1rem 1.3rem 1.1rem 3.2rem; border-radius: 20px; border: 2px solid var(--line); background: var(--surface); transition: border-color .15s, transform .15s; }
.th-skillcard::before { content: ""; position: absolute; left: 1.2rem; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 5px color-mix(in srgb, var(--dot) 25%, transparent); }
.th-skillcard--beginner { --dot: var(--sage); }
.th-skillcard--intermediate { --dot: var(--bias); }
.th-skillcard--advanced { --dot: var(--accent); }
.th-skillcard:hover { border-color: var(--dot); transform: translateY(-2px); }
.th-skillcard__name { font-family: var(--font-display); font-weight: 780; font-size: 1.2rem; }
.th-skillcard__count { color: var(--muted); font-size: .9rem; }

/* ---------- Swatches with pinked edges ---------- */
.th-swatches__grid { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px) { .th-swatches__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.th-swatch { display: flex; flex-direction: column; align-items: center; gap: .65rem; text-align: center; }
.th-swatch__img { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); clip-path: polygon(0% 0%, 5.56% 3.4%, 11.11% 0%, 16.67% 3.4%, 22.22% 0%, 27.78% 3.4%, 33.33% 0%, 38.89% 3.4%, 44.44% 0%, 50% 3.4%, 55.56% 0%, 61.11% 3.4%, 66.67% 0%, 72.22% 3.4%, 77.78% 0%, 83.33% 3.4%, 88.89% 0%, 94.44% 3.4%, 100% 0%, 96.6% 5.56%, 100% 11.11%, 96.6% 16.67%, 100% 22.22%, 96.6% 27.78%, 100% 33.33%, 96.6% 38.89%, 100% 44.44%, 96.6% 50%, 100% 55.56%, 96.6% 61.11%, 100% 66.67%, 96.6% 72.22%, 100% 77.78%, 96.6% 83.33%, 100% 88.89%, 96.6% 94.44%, 100% 100%, 94.44% 96.6%, 88.89% 100%, 83.33% 96.6%, 77.78% 100%, 72.22% 96.6%, 66.67% 100%, 61.11% 96.6%, 55.56% 100%, 50% 96.6%, 44.44% 100%, 38.89% 96.6%, 33.33% 100%, 27.78% 96.6%, 22.22% 100%, 16.67% 96.6%, 11.11% 100%, 5.56% 96.6%, 0% 100%, 3.4% 94.44%, 0% 88.89%, 3.4% 83.33%, 0% 77.78%, 3.4% 72.22%, 0% 66.67%, 3.4% 61.11%, 0% 55.56%, 3.4% 50%, 0% 44.44%, 3.4% 38.89%, 0% 33.33%, 3.4% 27.78%, 0% 22.22%, 3.4% 16.67%, 0% 11.11%, 3.4% 5.56%); transition: transform .2s ease; }
.th-swatch__img img { width: 100%; height: 100%; object-fit: cover; }
.th-swatch:hover .th-swatch__img { transform: rotate(-3deg) scale(1.03); }
.th-swatch__name { font-family: var(--font-display); font-weight: 760; font-size: 1.05rem; }

/* ---------- Project cards ---------- */
.th-grid .card { padding: 12px 12px 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); gap: .9rem; }
.th-grid .card .media { border-radius: 16px; aspect-ratio: 4 / 3; }
.th-grid .card__body { padding-inline: 6px; }
.th-grid .card__title { font-size: 1.25rem; }
.th-skill { position: absolute; left: 12px; top: 12px; z-index: 1; padding: .3rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 800; background: var(--surface); color: var(--text); box-shadow: 0 4px 12px -6px rgba(0,0,0,.35); }
.th-skill::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .4rem; border-radius: 50%; background: var(--dot, var(--sage)); vertical-align: 1px; }
.th-skill--beginner { --dot: var(--sage); }
.th-skill--intermediate { --dot: var(--bias); }
.th-skill--advanced { --dot: var(--accent); }
.meta__time { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--text-2); }
.meta__time .icon { width: 15px; height: 15px; }

/* ---------- Scalloped beginner band ---------- */
.th-band { position: relative; background: var(--sage-tint); margin-top: 28px; }
.th-band::before { content: ""; position: absolute; left: 0; right: 0; top: -27px; height: 28px; background: radial-gradient(circle at 20px 28px, var(--sage-tint) 19px, transparent 20px) 0 0 / 40px 28px repeat-x; }
.th-band .card { background: var(--surface); }

/* ---------- Stitched newsletter ---------- */
.signup--band { display: grid; gap: 1.4rem; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 32px; background: var(--denim); color: #fff8ee; outline: 2px dashed rgba(255,255,255,.45); outline-offset: -14px; }
@media (min-width: 900px) { .signup--band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.signup--band .signup__title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.signup--band .signup__button, .site-footer .signup__button { background: var(--bias); color: #22324c; }
.signup--sidebar { background: var(--surface-2); color: var(--text); outline: 2px dashed color-mix(in srgb, var(--denim) 40%, transparent); outline-offset: -10px; }
.signup--sidebar .signup__button { background: var(--accent); color: var(--accent-ink); }
.site-footer .signup { background: rgba(255,255,255,.06); color: var(--footer-text); padding: 1.4rem; }
.site-footer .signup__title { font-size: 1.15rem; }

/* ---------- Project box on posts ---------- */
.th-project { margin: 0 0 2.2rem; padding: clamp(20px, 3vw, 32px); border-radius: 26px; background: var(--surface-2); outline: 2px dashed color-mix(in srgb, var(--denim) 40%, transparent); outline-offset: -12px; font-size: 1rem; }
.th-project__stats { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.th-project__stats div { display: flex; flex-direction: column; padding: .6rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.th-project__stats span { font-size: .78rem; font-weight: 700; color: var(--muted); }
.th-project__stats strong { font-family: var(--font-display); font-size: 1.15rem; }
.entry-content .th-project__title { margin: 0; font-size: 1.5rem; }
.th-project .th-note { margin: .2rem 0 .8rem; }
.th-checklist { list-style: none; margin: 0; padding: 0 !important; columns: 2 220px; column-gap: 1.5rem; }
.th-checklist li { break-inside: avoid; margin: 0 0 .45rem !important; }
.th-checklist label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.th-checklist input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--accent); flex: 0 0 auto; }
.th-checklist input:checked + span { text-decoration: line-through; color: var(--muted); }
.entry-media img { border-radius: 28px; }
.entry-content blockquote { border-left-color: var(--bias); font-family: var(--font-hand); font-size: 1.9rem; line-height: 1.2; }
.site-footer .brand__mark { color: var(--footer-text); }