/*
Theme Name: WatchRanker — The Movement
Theme URI: https://watchranker.com/blog/
Author: Yorker Media
Description: The Movement, WatchRanker's blog, in the directory's own look ("Night dial"): the bar and the foot come from the directory app (/wp-chrome/), the stories are set for reading. Keeps the estate's wiring: wp_body_open, the Phase3 offset, Ad Inserter's anchor, entry-content article-content, sidebar-1, primary and footer menus, no lazy images.
Version: 1.0.0
Requires PHP: 8.1
Text Domain: watchranker-movement
*/
/* The colours, type, bar and foot come with the chrome's stylesheet (the directory's chrome.css, tokens on :root). This file draws only the
   blog's own parts, under .mv / .mv-* names, so nothing here reaches the ads, the widgets or the plugins' own boxes. */
html { -webkit-text-size-adjust: 100%; }
body.mv { margin: 0; background: var(--bg, #f3f5f8); color: var(--ink, #0b1324); font: 400 1rem/1.6 var(--text, system-ui, sans-serif); overflow-x: hidden; }
.mv-main a { color: var(--accent, #17663a); text-underline-offset: 3px; }
.mv-skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--lume, #b8f25c); color: #0a1121; padding: 8px 12px; border-radius: 8px; font-weight: 700; }
.mv-skip:focus { left: 12px; }
.mv-main .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.mv-adslot { margin: 0; padding: 0; height: 0; overflow: visible; }
.mv-adslot header { margin: 0; padding: 0; }

/* the dial-edge rule: sixty marks, every fifth one long, the first one lume */
.mv-ticks { height: 12px; margin: 14px 0 12px; opacity: .9;
  background:
    linear-gradient(90deg, var(--lume, #b8f25c) 0 3px, transparent 3px) left top / 3px 12px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2, #c4cdda) 0 2px, transparent 2px 60px) left bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--line, #dce2ea) 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat; }

/* the story */
.mv-story { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; padding-top: 18px; padding-bottom: 20px; }
.mv-story--wide { grid-template-columns: minmax(0, 1fr); max-width: 860px !important; }
.mv-col { min-width: 0; max-width: 760px; }
.mv-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 18px; font-size: .86rem; color: var(--muted, #586274); }
.mv-crumbs a { color: var(--muted, #586274); text-decoration: none; }
.mv-crumbs span[aria-hidden] { color: var(--line-2, #c4cdda); }
.mv-kicker { display: inline-flex; align-items: center; gap: .55em; margin: 0 0 .7em; font: 700 .74rem/1 var(--wide, sans-serif); font-stretch: 125%; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent, #17663a); text-decoration: none; }
.mv-kicker::before { content: ''; width: .62em; height: .62em; background: currentColor; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.mv-head h1, .mv-list-head h1 { margin: 0; font: 800 clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem)/1.08 var(--wide, sans-serif); font-stretch: 110%; letter-spacing: -.012em; color: var(--ink, #0b1324); overflow-wrap: anywhere; }
.mv-list-head h1 small { font-size: .5em; color: var(--muted, #586274); font-weight: 600; }
.mv-byline { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 18px; font-size: .9rem; color: var(--muted, #586274); }
.mv-byline a { color: var(--ink, #0b1324); font-weight: 650; text-decoration: none; }
.mv-hero { margin: 0 0 22px; border-radius: 16px; overflow: hidden; background: var(--tray-2, #ebeff4); }
.mv-hero img { display: block; width: 100%; height: auto; }

/* the words */
.entry-content.article-content { font-size: 1.09rem; line-height: 1.72; color: var(--ink-2, #2b3547); overflow-wrap: break-word; }
.entry-content.article-content > * { max-width: 100%; }
.entry-content.article-content h2, .entry-content.article-content h3, .entry-content.article-content h4 { font-family: var(--wide, sans-serif); font-stretch: 108%; line-height: 1.2; color: var(--ink, #0b1324); margin: 1.6em 0 .55em; }
.entry-content.article-content h2 { font-size: 1.55rem; font-weight: 780; }
.entry-content.article-content h3 { font-size: 1.22rem; font-weight: 740; }
.entry-content.article-content p { margin: 0 0 1.1em; }
.entry-content.article-content ul, .entry-content.article-content ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.entry-content.article-content li { margin: .35em 0; }
.entry-content.article-content blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--lume, #b8f25c); color: var(--ink, #0b1324); font-size: 1.12rem; }
.entry-content.article-content img { max-width: 100%; height: auto; border-radius: 10px; }
.entry-content.article-content figure { margin: 1.4em 0; }
.entry-content.article-content figcaption { font-size: .84rem; color: var(--muted, #586274); margin-top: 6px; }
.entry-content.article-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .94rem; margin: 1.2em 0; }
.entry-content.article-content th, .entry-content.article-content td { padding: 8px 12px; border-bottom: 1px solid var(--line, #dce2ea); text-align: left; vertical-align: top; }
.entry-content.article-content th { background: var(--tray-2, #ebeff4); }
.entry-content.article-content iframe, .entry-content.article-content video { max-width: 100%; }
.mv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.mv-tags a { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2, #c4cdda); color: var(--ink-2, #2b3547); text-decoration: none; font-size: .85rem; font-weight: 600; }
.mv-tags a:hover { border-color: var(--accent, #17663a); color: var(--accent, #17663a); }
.mv-hop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 30px 0; }
.mv-hop a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line, #dce2ea); border-radius: 12px; background: var(--tray, #fff); color: var(--ink, #0b1324); text-decoration: none; }
.mv-hop a:hover { border-color: var(--accent, #17663a); }
.mv-hop small { font: 700 .7rem/1 var(--wide, sans-serif); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #586274); }
.mv-hop-next { text-align: right; grid-column: 2; }
.mv-comments { margin-top: 30px; }

/* the side: WatchRanker's widget area (the Ezoic ad positions, the latest-cards widget) */
.mv-side { min-width: 0; display: grid; gap: 18px; align-content: start; }
.mv-side .widget { min-width: 0; }
.mv-side .widget-title { margin: 0 0 10px; font: 780 .78rem/1.2 var(--wide, sans-serif); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #586274); }
.mv-newest ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mv-newest li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line, #dce2ea); }
.mv-newest a { color: var(--ink, #0b1324); font-weight: 650; text-decoration: none; line-height: 1.3; }
.mv-newest time { font-size: .8rem; color: var(--muted, #586274); }

/* listings and cards */
.mv-list { padding-top: 22px; padding-bottom: 20px; }
.mv-list--side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.mv-list-head { margin-bottom: 18px; }
.mv-lede { max-width: 66ch; color: var(--ink-2, #2b3547); font-size: 1.08rem; margin: 12px 0 0; }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.mv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mv-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--tray, #fff); border: 1px solid var(--line, #dce2ea); border-radius: 16px; overflow: hidden; }
.mv-card--lead { grid-column: 1 / -1; grid-template-rows: auto; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.mv-pic { display: block; aspect-ratio: 16 / 9; background: var(--tray-2, #ebeff4); overflow: hidden; }
.mv-card--lead .mv-pic { aspect-ratio: auto; min-height: 100%; }
.mv-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mv-card-body { display: grid; gap: 7px; align-content: start; padding: 14px 16px 16px; }
.mv-card--lead .mv-card-body { padding: 22px; align-content: center; }
.mv-sec { font: 700 .7rem/1 var(--wide, sans-serif); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #17663a); text-decoration: none; }
.mv-card-title { margin: 0; font: 720 1.04rem/1.3 var(--text, sans-serif); }
.mv-card--lead .mv-card-title { font: 800 1.5rem/1.15 var(--wide, sans-serif); font-stretch: 108%; }
.mv-card-title a { color: var(--ink, #0b1324); text-decoration: none; }
.mv-card-title a:hover { color: var(--accent, #17663a); }
.mv-card-line { margin: 0; color: var(--muted, #586274); }
.mv-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: .8rem; color: var(--muted, #586274); }
.mv-next h2 { margin: 0 0 14px; font: 780 1.3rem/1.2 var(--wide, sans-serif); font-stretch: 110%; }
.mv-pager .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 26px 0 0; }
.mv-pager .page-numbers { min-width: 40px; padding: 8px 12px; text-align: center; border-radius: 9px; border: 1px solid var(--line, #dce2ea); text-decoration: none; color: var(--ink, #0b1324); font-weight: 650; }
.mv-pager .page-numbers.current { background: var(--ink, #0b1324); color: var(--bg, #f3f5f8); border-color: var(--ink, #0b1324); }
.mv-empty { color: var(--muted, #586274); }
.ym-srch-wrap { padding-left: 0 !important; padding-right: 0 !important; }

@media (max-width: 1020px) {
  .mv-story, .mv-list--side { grid-template-columns: minmax(0, 1fr); }
  .mv-side { max-width: 640px; }
}
@media (max-width: 760px) {
  .mv-main .wrap { padding: 0 16px; }
  .mv-card--lead { grid-template-columns: minmax(0, 1fr); }
  .mv-card--lead .mv-pic { aspect-ratio: 16 / 9; }
  .mv-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .mv-hop { grid-template-columns: minmax(0, 1fr); }
  .mv-hop-next { grid-column: auto; text-align: left; }
  .entry-content.article-content { font-size: 1.04rem; }
}
/* on the blog the estate's own header search (ym-header-search) is the search; the directory's /find/ button would be a second one */
.mv .bar .icon-btn[href="/find/"] { display: none; }