/*
Theme Name: Moniger Blog
Theme URI: https://moniger.com
Author: Moniger
Author URI: https://moniger.com
Description: Best-in-class block theme for the Moniger Blog. Built to the Moniger Figma design system — navy/orange brand palette, Cera Pro type scale, editorial single-post layout with sticky table of contents and newsletter capture. Compatible with Yoast SEO, Google Site Kit, caching, and form plugins (Metform/weForms).
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moniger-blog
Tags: blog, block-theme, editorial, custom-colors, custom-logo, featured-images, full-site-editing, sticky-post, threaded-comments
*/

/* -------------------------------------------------------------------------
   Supplemental styles. The bulk of design tokens live in theme.json.
   This file covers interactions and layout details the block editor
   cannot express declaratively (sticky TOC, hover transitions, cards).
   ------------------------------------------------------------------------- */

:root {
  --moniger-shadow-card: 0 1px 2px rgba(28,60,107,.04), 0 8px 24px rgba(28,60,107,.06);
  --moniger-radius: 16px;
  --moniger-transition: 200ms cubic-bezier(.4,0,.2,1);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Smooth focus for keyboard users, quiet for mouse users */
:where(a, button, input, .wp-block-button__link):focus-visible {
  outline: 2px solid var(--wp--preset--color--orange);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Orange (accent) button variant */
.wp-block-button.is-style-accent .wp-block-button__link {
  background-color: var(--wp--preset--color--orange);
  color: #fff;
}
.wp-block-button.is-style-accent .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--orange-hover);
}

/* Category pill */
.moniger-pill,
.wp-block-post-terms a {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--wp--preset--color--peach-tint);
  color: var(--wp--preset--color--orange-hover);
  text-decoration: none;
  transition: var(--moniger-transition);
}
.wp-block-post-terms a:hover { background: var(--wp--preset--color--peach); color: var(--wp--preset--color--navy); }

/* Article card */
.moniger-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--moniger-radius);
  overflow: hidden;
  transition: transform var(--moniger-transition), box-shadow var(--moniger-transition);
  height: 100%;
}
.moniger-card:hover { transform: translateY(-4px); box-shadow: var(--moniger-shadow-card); }
.moniger-card .wp-block-post-featured-image img {
  aspect-ratio: 16/10; object-fit: cover; width: 100%;
}
.moniger-card .wp-block-post-title { font-size: 18px; line-height: 1.35; }
.moniger-card .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.moniger-card .wp-block-post-title a:hover { color: var(--wp--preset--color--orange); }

/* Post meta row (date / read time / views) */
.moniger-meta { color: var(--wp--preset--color--muted); font-size: 13px; }
.moniger-meta .wp-block-post-date { color: var(--wp--preset--color--muted); }

/* Sticky Table of Contents (single post sidebar) */
.moniger-toc {
  position: sticky; top: 96px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--moniger-radius);
  padding: 24px;
}
.moniger-toc h2, .moniger-toc .wp-block-heading { font-size: 16px; margin: 0 0 12px; }
.moniger-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.moniger-toc ol li { counter-increment: toc; padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--border); font-size: 14px; }
.moniger-toc ol li:last-child { border-bottom: 0; }
.moniger-toc ol li a { color: var(--wp--preset--color--ink-soft); text-decoration: none; display: block; }
.moniger-toc ol li a:hover, .moniger-toc ol li.is-active a { color: var(--wp--preset--color--navy); font-weight: 500; }
.moniger-toc ol li::before { content: counter(toc) ". "; color: var(--wp--preset--color--navy); font-weight: 500; }
.moniger-toc ol li.is-active { border-left: 2px solid var(--wp--preset--color--navy); margin-left: -24px; padding-left: 22px; }

/* Key Insight callout */
.moniger-callout {
  background: var(--wp--preset--color--peach-tint);
  border-radius: 12px;
  padding: 20px 24px;
}
.moniger-callout .moniger-callout__label {
  font-weight: 700; font-size: 13px; color: var(--wp--preset--color--orange-hover);
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.moniger-callout p { font-size: 14px; line-height: 1.6; margin: 0; color: var(--wp--preset--color--ink-soft); }

/* Dark newsletter capture card */
.moniger-newsletter-dark {
  background: var(--wp--preset--color--dark-card);
  border-radius: var(--moniger-radius);
  padding: 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.moniger-newsletter-dark h2, .moniger-newsletter-dark .wp-block-heading { color: #fff; font-size: 22px; }
.moniger-newsletter-dark p { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; }
.moniger-newsletter-dark input[type="email"] {
  width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06); color: #fff; font-family: inherit; margin: 12px 0;
}
.moniger-newsletter-dark input[type="email"]::placeholder { color: rgba(255,255,255,.4); }

/* Blockquote / pullquote inside article body */
.entry-content blockquote, .wp-block-quote {
  border-left: 3px solid var(--wp--preset--color--navy);
  background: #EEF3FB;
  padding: 20px 24px; border-radius: 0 12px 12px 0; margin: 28px 0;
}
.entry-content blockquote p, .wp-block-quote p { font-weight: 700; color: var(--wp--preset--color--navy); font-size: 18px; line-height: 1.5; }
.entry-content blockquote cite, .wp-block-quote cite { font-weight: 400; font-style: normal; color: var(--wp--preset--color--muted); font-size: 14px; }

/* Article body rhythm — apply the specified 36px body line-height */
.entry-content > p { line-height: 2.25; letter-spacing: -0.5px; color: var(--wp--preset--color--ink-soft); }

/* Sticky header */
.moniger-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Form plugin friendliness — style native + common markup so Metform/weForms look on-brand */
.wpforms-field input, .wpforms-field textarea,
.metform-input input, .metform-input textarea,
input[type="text"], input[type="email"], input[type="search"], textarea, select {
  font-family: inherit; border-radius: 10px; border: 1px solid var(--wp--preset--color--border);
  padding: 12px 14px; background: #fff;
}
.wpforms-submit, .metform-btn, button[type="submit"] {
  background: var(--wp--preset--color--orange) !important; color: #fff !important;
  border: none !important; border-radius: 10px !important; padding: 12px 24px !important;
  font-family: inherit !important; font-weight: 500 !important; cursor: pointer;
}
.wpforms-submit:hover, .metform-btn:hover { background: var(--wp--preset--color--orange-hover) !important; }

/* Responsive: collapse two-column single post below 900px */
@media (max-width: 900px) {
  .moniger-toc { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}