/*
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.2.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); }

/* Header — transparent so the peach hero (home) or light background (interior) shows through.
   The logo and nav are navy, which reads correctly on both peach and off-white. */
.moniger-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
}
.moniger-header .moniger-logo { margin: 0; }
.moniger-header .moniger-logo img { display: block; width: 148px; height: auto; }
.moniger-header .wp-block-navigation { color: var(--wp--preset--color--navy); }
.moniger-header .wp-block-navigation a { color: var(--wp--preset--color--navy); }
.moniger-header .moniger-download-btn .wp-block-button__link {
  background: var(--wp--preset--color--navy); color: #fff;
}

/* On the homepage the header overlays the hero (absolute). On interior pages
   there is no hero, so the page needs top padding to clear the header, plus the
   thin peach→orange accent rule beneath it. Body classes are added by WordPress. */
body:not(.home):not(.blog) .moniger-header {
  position: sticky; background: rgba(249,249,251,.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--wp--preset--color--peach), var(--wp--preset--color--orange)) 1;
}

/* Home/blog: hero sits under the absolute header, so give it headroom */
.home .moniger-hero, .blog .moniger-hero { padding-top: 96px; }

/* 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; }
}

/* ---- Homepage additions (v1.1) ---- */

/* Hero: place a brand image on the right via ::after (user swaps the URL, or add an Image block) */
.moniger-hero { position: relative; overflow: hidden; }
.moniger-hero .wp-block-cover__inner-container { width: 100%; }
@media (min-width: 900px) {
  .moniger-hero { padding-top: 40px; padding-bottom: 40px; }
}

/* Category filter bar */
.moniger-catbar { align-items: center; }
.moniger-catbar p { margin: 0; }
.moniger-catbar__all a,
.moniger-catbar__pill a {
  display: inline-block; text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 10px 18px; border-radius: 999px; transition: var(--moniger-transition);
  white-space: nowrap;
}
.moniger-catbar__all a { background: var(--wp--preset--color--orange); color: #fff; }
.moniger-catbar__all a:hover { background: var(--wp--preset--color--orange-hover); }
.moniger-catbar__pill a { background: #fff; color: var(--wp--preset--color--ink-soft); border: 1px solid var(--wp--preset--color--border); }
.moniger-catbar__pill a:hover { border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); }

/* Outline "View More" button */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: #fff; color: var(--wp--preset--color--navy);
  border: 1px solid var(--wp--preset--color--border); font-weight: 500;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--navy);
}

/* Featured spotlight card */
.moniger-featured { display: flex; }
.moniger-featured .wp-block-post-title a { color: #fff; text-decoration: none; }
.moniger-featured .wp-block-post-title a:hover { color: var(--wp--preset--color--peach); }
.moniger-featured .wp-block-post-terms a { background: rgba(255,255,255,.15); color: #fff; }

/* Hero heading uses navy ink (dark) per design */
.moniger-hero h1 { color: var(--wp--preset--color--navy); }

/* Search button inside hero → navy */
.moniger-hero .wp-block-search__button {
  background: var(--wp--preset--color--navy); color: #fff; border: none;
  border-radius: 10px; padding: 12px 22px; font-weight: 500;
}
.moniger-hero .wp-block-search__input {
  border-radius: 10px; border: 1px solid rgba(0,0,0,.08); padding: 12px 16px;
}

/* Category-section card grids inherit .moniger-card from base styles */

/* ============ App CTA band + Footer (v1.2) ============ */

/* CTA band with shaped top edge */
.moniger-cta { position: relative; background: transparent; }
.moniger-cta__shape { line-height: 0; }
.moniger-cta__shape svg { display: block; width: 100%; height: 70px; }
.moniger-cta__body {
  background: var(--wp--preset--color--navy);
  padding: 8px 24px 80px;
  margin-top: -1px;
}
.moniger-cta__body > * { max-width: 720px; margin-left: auto; margin-right: auto; }

.moniger-badges { display: flex; gap: 14px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.moniger-badges img { height: 54px; width: auto; border-radius: 8px; }

.moniger-security {
  display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
  color: rgba(255,255,255,.85); font-size: 14px; margin-bottom: 48px;
}
.moniger-security span { display: inline-flex; align-items: center; gap: 8px; }

/* Phones — center raised, side ones lower and behind */
.moniger-phones {
  max-width: 900px; display: flex; justify-content: center; align-items: flex-end;
  gap: 0; margin: 0 auto;
}
.moniger-phones img { width: 32%; max-width: 300px; height: auto; display: block; }
.moniger-phones .p-left  { transform: translateX(18%) translateY(6%); z-index: 1; }
.moniger-phones .p-right { transform: translateX(-18%) translateY(6%); z-index: 1; }
.moniger-phones .p-center { z-index: 2; }

/* Footer */
.moniger-footer { position: relative; overflow: hidden; }
.moniger-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.moniger-footer a:hover { color: #fff; }

.moniger-socials { display: flex; gap: 12px; }
.moniger-socials img { width: 40px; height: 40px; display: block; }
.moniger-socials a { line-height: 0; }

.moniger-contact { display: flex; align-items: center; gap: 10px; margin: 0; }
.moniger-contact img { width: 20px; height: 20px; opacity: .85; }

/* Oversized watermark + back-to-top */
.moniger-watermark {
  position: relative; margin: 0 -24px; padding: 0 24px;
  display: flex; align-items: flex-end; justify-content: flex-end; min-height: 120px;
}
.moniger-watermark__text {
  position: absolute; left: 0; right: 0; bottom: -0.35em; text-align: center;
  font-family: var(--wp--preset--font-family--cera);
  font-weight: 700; font-size: clamp(80px, 22vw, 340px); line-height: .8;
  color: rgba(255,255,255,.06); letter-spacing: -0.04em; pointer-events: none;
  white-space: nowrap; overflow: hidden;
}
.moniger-totop {
  position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center;
  margin-bottom: 24px; transition: var(--moniger-transition);
}
.moniger-totop:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }

@media (max-width: 600px) {
  .moniger-cta__body { padding-bottom: 56px; }
  .moniger-phones .p-left, .moniger-phones .p-right { display: none; }
  .moniger-phones .p-center { width: 60%; }
  .moniger-security { gap: 16px; font-size: 13px; }
}