/*
Theme Name: WP Diary Child - Specs & Curls
Template: wp-diary
Version: 2.0
Description: Child theme of WP Diary for specsandcurls.com. Adds the animated homepage (front-page.php) and re-skins all inner pages — posts, categories, archives, about — to match: Bricolage Grotesque + Karla typography, navy headings, the theme's pink accent, rounded cards, and the subtle heart-pattern background.
*/

:root{
  --sc-pink:#EC9FA1;        /* wp-diary's own primary, kept */
  --sc-pale:#FBD9D8;
  --sc-ink:#161534;         /* logo navy */
  --sc-body:#3E3D55;
  --sc-line:#ECECF0;
  --sc-radius:18px;
}

/* ---------- typography sync ---------- */
body, button, input, select, textarea{
  font-family:'Karla',sans-serif !important;
  color:var(--sc-body);
}
h1,h2,h3,h4,h5,h6,
.site-title, .entry-title, .mt-post-title,
.widget-title, .mt-related-post-title, .mt-author-name{
  font-family:'Bricolage Grotesque',sans-serif !important;
  color:var(--sc-ink);
  letter-spacing:-.015em;
}
.site-title a, .entry-title a, .mt-post-title a{color:var(--sc-ink);transition:color .2s}
.site-title a:hover, .entry-title a:hover, .mt-post-title a:hover{color:var(--sc-pink)}
::selection{background:var(--sc-pink);color:#fff}

/* ---------- subtle heart-pattern backdrop (matches the homepage) ---------- */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="140" viewBox="0 0 180 140"><path transform="translate(14,10) rotate(-8 12 12)" fill="%23EC9FA1" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/><path transform="translate(100,18) rotate(7 12 12)" fill="%238B8B93" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/><path transform="translate(54,68) scale(1.15) rotate(-4 12 12)" fill="%23FBD9D8" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/><path transform="translate(146,80) scale(.9) rotate(10 12 12)" fill="%23FBD9D8" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
  background-size:180px 140px;opacity:.18;
}

/* ---------- rounded, lifted cards ---------- */
article, .mt-single-post-wrap, #secondary .widget, .mt-author-box,
.mt-related-posts-wrapper .post{
  border-radius:var(--sc-radius) !important;
  overflow:hidden;
}
article{transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s}
.archive article:hover, .blog article:hover, .home article:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px -18px rgba(22,21,52,.22);
}
.entry-content img, .mt-post-thumb img, article img{border-radius:14px}
#secondary .widget{border:1px solid var(--sc-line);background:#FAFAFC}

/* ---------- pills: buttons, read-more, categories, tags ---------- */
.mt-readmore-btn, .slider-btn,
input[type="submit"], button[type="submit"], .wp-block-search__button{
  border-radius:999px !important;
  background:var(--sc-ink) !important;
  color:#fff !important;
  border:none !important;
  padding:9px 22px !important;
  font-weight:700;
  transition:background .25s, transform .25s !important;
}
.mt-readmore-btn:hover, .slider-btn:hover,
input[type="submit"]:hover, button[type="submit"]:hover{
  background:var(--sc-pink) !important;
  transform:translateY(-2px);
}
a[rel~="category"], a[rel~="tag"]{
  display:inline-block;border-radius:999px;
  background:var(--sc-pale);color:var(--sc-ink) !important;
  padding:3px 12px;font-size:.78rem;font-weight:700;
  transition:background .2s, color .2s;
}
a[rel~="category"]:hover, a[rel~="tag"]:hover{background:var(--sc-pink);color:#fff !important}

/* ---------- details ---------- */
blockquote{border-left:4px solid var(--sc-pink);border-radius:0 12px 12px 0;background:#FAFAFC}
.widget-title{position:relative;padding-bottom:10px}
.widget-title::after{content:'';position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:var(--sc-pink)}
input[type="text"], input[type="email"], input[type="search"], input[type="url"], textarea{
  border-radius:12px !important;border:1.5px solid var(--sc-line) !important;
  transition:border-color .2s;
}
input:focus, textarea:focus{border-color:var(--sc-pink) !important;outline:none}
.comment-body{border-radius:var(--sc-radius)}