/* ============================================================
   BLOG 2026 RESTYLE - mrc's Cup of Joe (WordPress / Astra 3.9.4)
   Maps the 2026 design system (assets/css/mrc-2026.css) onto
   Astra's selectors. Load AFTER the theme + Customizer CSS:
   easiest is enqueueing this URL from the child theme, or
   pasting the whole file into Appearance > Customize >
   Additional CSS.

   Same-domain absolute paths are used for fonts, so this works
   whether it's hosted at /assets/css/ or pasted into WP.

   Scope: typography, colors, hero band, index cards, sidebar,
   pagination, single-post content, blockquotes, buttons,
   comments, email box. Does NOT touch the legacy navbar/footer
   chrome (that swaps at 2026 launch) and does not change any
   WP templates.
   ============================================================ */

/* ---- Inter Tight (self-hosted on main domain, latin subset) ---- */
@font-face {
	font-family: 'Inter Tight';
	src: url('https://www.mrc-productivity.com/fonts/inter/InterTight-Latin-VariableFont_wght.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter Tight';
	src: url('https://www.mrc-productivity.com/fonts/inter/InterTight-Latin-Italic-VariableFont_wght.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* ---- 2026 design tokens ---- */
:root {
	--ink: #1a1a1c;
	--body: #5b6470;
	--muted: #8a929c;
	--line: #e8eaef;
	--accent: #006478;       /* mrc teal */
	--accent-dk: #00485a;
	--accent-tint: #e7f2f4;
	--cyan: #2dd4bf;
	--btn-ink: #2046ae;      /* m-Power blue (primary buttons) */
	--bg-soft: #f4f5f8;
	--radius: 22px;
}

/* ============================================================
   BASE TYPOGRAPHY
   The old Customizer CSS sets Dosis/Roboto Flex and some
   'Inter' rules with !important, so font-family overrides here
   carry !important to win the cascade.
   ============================================================ */
body, button, input, select, textarea, .ast-button, .ast-custom-button {
	font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body { color: var(--body); }

h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.entry-title, .entry-title a, .widget-title, .comment-reply-title {
	font-family: 'Inter Tight', sans-serif !important;
	color: var(--ink);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-dk); }
::selection { background-color: var(--accent); color: #fff; }

/* ============================================================
   BLOG HERO BAND
   Replaces the coffee-photo header with the 2026 hero gradient.
   The photo + 7px border are inline styles, so !important is
   required. H1 weight 700 per the 2026 hero rule.
   ============================================================ */
header.header.text-white {
	background-image:
		radial-gradient(58% 55% at 86% -8%, rgba(45,212,191,.32), transparent 60%),
		radial-gradient(52% 50% at 2% 104%, rgba(32,100,174,.16), transparent 62%),
		linear-gradient(180deg, #e4f2f4 0%, #f1f9fa 56%, #e9f5f7 100%) !important;
	border-bottom: 1px solid var(--line) !important;
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}
/* the theme paints a teal overlay over the photo via pseudo-elements
   hooked to data-overlay-teal; kill both so the gradient shows */
header.header[data-overlay-teal]::before,
header.header[data-overlay-teal]::after,
header.header.text-white::before,
header.header.text-white::after,
header.header.text-white > .overlay,
header.header.text-white [class*="overlay"] { display: none !important; content: none !important; }
header.header.text-white .container { position: relative; z-index: 2; }
header.header.text-white h1,
header.header.text-white h1 a {
	color: var(--ink) !important;
	font-weight: 700 !important;
	letter-spacing: -0.035em;
	font-size: clamp(2.2rem, 4.6vw, 3.1rem);
	text-decoration: none;
}
header.header.text-white .lead-2 {
	color: #3d4750 !important;
	font-size: 1.18rem;
	max-width: 640px;
	margin: .9rem auto 0;
}

/* Legacy navbar readability: the nav starts transparent with WHITE
   links/logo (built for the dark coffee photo). On the light 2026
   hero, force the dark-text state at all times. The navbar carries
   both logo images, so swap which one shows. */
.navbar .nav-link { color: var(--ink) !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--accent) !important; }
/* the dark logo is lazy-loaded and has no src at the top of the page,
   so darken the white logo with a filter instead of swapping images */
.navbar .navbar-brand .logo-light { filter: brightness(.25); }
.navbar .navbar-toggler { color: var(--ink) !important; }

/* 2026 SSI navbar pin: the newsletter WP head still injects the legacy
   theme (page.min.css) AFTER this file, and its .navbar rule re-absolutes
   the navbar so it floats over the hero and clips the title. Scoped via
   :has(.mnav-burger) so only the 2026 navbar is pinned; the legacy
   navbar (blog, until its swap) is untouched. */
.navbar:has(.mnav-burger) { position: sticky !important; top: 0 !important; }
/* Same collision, footer edition: page.min.css's legacy .footer rule paints
   the footer white, hiding the 2026 dark band (white links on white). Pin
   the v3 footer surface; the text colors already win on their own. */
.footer.footer-v3 { background: #006478 !important; }
/* Astra's list spacing puts margin-bottom:10px on the navbar's li.nav-item,
   making the bar 10px taller than on the static pages; zero it. */
.navbar .nav-item { margin-bottom: 0 !important; }
/* Simple Custom CSS's generic ul rule (margin-block 1em, padding-inline 40px)
   leaks into the navbar menu: its ul gets margin-top 16px, making the bar
   exactly 16px taller than the static pages (measured 92 vs 76). Reset all
   navbar lists; content lists elsewhere keep the generic rule. */
.navbar ul { margin: 0 !important; padding: 0 !important; }

/* breadcrumbs bar on single posts: quiet, hairline, no shadow */
.main-header-bar.ast-header-breadcrumb {
	background: #fff;
	border-bottom: 1px solid var(--line) !important;
	box-shadow: none;
	font-size: .85rem;
	color: var(--muted);
}
.ast-breadcrumbs-wrapper a { color: var(--muted); }
.ast-breadcrumbs-wrapper a:hover { color: var(--accent); }

/* ============================================================
   BLOG INDEX: posts as soft cards (2026 .card-soft treatment)
   ============================================================ */
.blog .site-content { background: var(--bg-soft); }
.blog .ast-article-post {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 2.1rem 2.2rem 1.9rem;
	margin-bottom: 1.6rem;
	transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.blog .ast-article-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 46px rgba(15,30,45,.1);
	border-color: #d8dde4;
}

.blog .entry-title {
	font-size: 1.45rem;
	margin-bottom: .4em;
	padding: 0;
}
#content .entry-title a { color: var(--ink); font-weight: 600 !important; text-decoration: none; }
#content .entry-title a:hover { color: var(--accent); }

/* meta row: small, muted, teal only on hover */
.entry-meta, .entry-meta * { color: var(--muted); font-size: .85rem; }
.entry-meta a { color: var(--accent-dk); text-decoration: none; }
.entry-meta a:hover, .entry-meta a:hover * { color: var(--accent); }

/* excerpt + read-more arrow link (2026 .sec-link treatment) */
.blog .entry-content p { font-size: 1rem; color: var(--body); }
.ast-the-content-more-link, .read-more a, .entry-content .more-link {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}
.ast-the-content-more-link:hover, .entry-content .more-link:hover { color: var(--accent-dk); }

/* pagination: pill numbers */
.ast-pagination .page-numbers {
	border-radius: 999px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--body);
	margin: 0 .2rem;
}
.ast-pagination .page-numbers.current {
	background: var(--ink) !important;
	border-color: var(--ink) !important;
	color: #fff !important;
	border-radius: 999px !important;
}
.ast-pagination a:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   SIDEBAR
   ============================================================ */
#secondary .widget {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.6rem 1.7rem;
	margin-bottom: 1.6rem;
}
#secondary .widget-title, #secondary h2 {
	font-size: .82rem !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--accent-dk);
	margin-bottom: 1em;
}
#secondary, #secondary li { font-size: .95rem; line-height: 1.55; }
#secondary a { color: var(--body); text-decoration: none; }
#secondary a:hover { color: var(--accent); }
#secondary .textwidget p { font-size: .95rem !important; line-height: 1.6 !important; }
#secondary .textwidget a { color: var(--accent); font-weight: 500; }

/* search + dropdown fields */
#secondary input[type="search"], #secondary select, .search-form .search-field {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fbfcfd;
	padding: .6rem .9rem;
}
#secondary input[type="search"]:focus, .search-form .search-field:focus {
	border-color: var(--accent);
	outline: none;
}

/* sidebar search submit: small round icon button inset in the field.
   Overrides the legacy absolute offset (Simple Custom CSS top:18px) and
   the generic 2026 pill-button padding that blew it up to a 72px blob. */
#secondary .widget_search .search-form { position: relative; }
#secondary .widget_search .search-form label { display: block; margin: 0; }
#secondary .widget_search .search-field { width: 100%; box-sizing: border-box; padding-right: 3rem; }
/* The widget renders either a <button> (with icon markup) or a plain
   <input type="submit" value="Search"> depending on the page, and inputs
   can't take pseudo-element icons. So: zero the text out and paint the
   magnifier as a background image; works identically on both. */
#secondary .widget_search .search-submit {
	position: absolute !important;
	top: 8px !important;
	right: 6px !important;
	transform: none !important;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	border-radius: 999px !important;
	font-size: 0 !important;
	color: transparent !important;
	line-height: 1;
	background-color: var(--btn-ink) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.4-3.4'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 15px 15px !important;
}
#secondary .widget_search .search-submit span,
#secondary .widget_search .search-submit i { display: none !important; }
/* the 2026 button hover animation (lift transform + slide-in glyph) fights
   this little button; pin it still and strip any decorative pseudo content */
#secondary .widget_search .search-submit:hover,
#secondary .widget_search .search-submit:focus {
	transform: none !important;
	background-color: #1a3a94 !important;
}
#secondary .widget_search .search-submit::before,
#secondary .widget_search .search-submit::after {
	content: none !important;
	display: none !important;
}

/* ============================================================
   SINGLE POST: long-form typography (2026 .cs-wrap scale)
   ============================================================ */
.ast-single-post .entry-title {
	font-size: clamp(1.9rem, 3.6vw, 2.5rem);
	font-weight: 700 !important;
	letter-spacing: -0.03em;
	line-height: 1.12;
	padding: 0 0 .35em;
}
.ast-single-post .entry-header { margin-bottom: 1.4rem; }

.ast-single-post .entry-content p {
	font-size: 1.08rem !important;
	color: var(--body);
	line-height: 1.75 !important;
	margin-bottom: 1.3rem !important;
}
.ast-single-post .entry-content p span { font-size: 1.08rem !important; }
.ast-single-post .entry-content li {
	font-size: 1.08rem;
	color: var(--body);
	line-height: 1.7;
	margin-bottom: .45rem;
}
.ast-single-post .entry-content h2 {
	font-size: clamp(1.6rem, 3vw, 2rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em;
	margin: 2.6rem 0 .9rem;
	line-height: 1.18;
}
.ast-single-post .entry-content h3 {
	font-size: 1.45rem !important;
	font-weight: 600 !important;
	margin: 2.4rem 0 .7rem !important;
}
.ast-single-post .entry-content h4 {
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	margin: 2rem 0 .6rem !important;
}
.ast-single-post .entry-content a { color: var(--accent); font-weight: 500; }
.internal-link { color: var(--accent) !important; font-weight: 600; }

b, strong { color: var(--ink); }

/* content images: rounded like 2026 figures */
.ast-single-post .entry-content img,
.ast-single-post .entry-content figure img {
	border-radius: 14px;
}
.ast-single-post .entry-content figcaption {
	font-size: .85rem;
	color: var(--muted);
	text-align: center;
	margin-top: .6rem;
}

/* blockquotes: the 2026 pull-quote (teal tint, left rule) */
.ast-single-post .entry-content blockquote, .blog-quote {
	background: var(--accent-tint) !important;
	border-left: 4px solid var(--accent) !important;
	border-radius: 0 12px 12px 0;
	padding: 1.4rem 1.6rem !important;
	margin: 1.9rem 0 !important;
	font-style: italic;
}
.ast-single-post .entry-content blockquote p {
	color: var(--ink) !important;
	font-size: 1.12rem !important;
	line-height: 1.55 !important;
	margin-bottom: .5rem !important;
}
.ast-single-post .entry-content blockquote p:last-child { margin-bottom: 0 !important; }

/* tables */
.ast-single-post .entry-content table { border-collapse: collapse; width: 100%; }
.ast-single-post .entry-content th {
	text-align: left;
	color: var(--muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .04em;
	padding: .6rem .7rem;
	border-bottom: 1px solid var(--line);
}
.ast-single-post .entry-content td {
	padding: .65rem .7rem;
	border-bottom: 1px solid var(--line);
	color: var(--body);
}

/* ============================================================
   BUTTONS: pill shape, m-Power blue (2026 .btn-pill/.btn-ink)
   ============================================================ */
/* scoped to #content (Astra's content wrapper) so the legacy navbar's
   <button> menu items are untouched; in the served DOM the navbar ends
   up nested inside #page, so #page is NOT a safe scope */
#content .menu-toggle, #content button, #content .ast-button, #content .ast-custom-button, #content .button,
#content input#submit, #content input[type="button"], #content input[type="submit"], #content input[type="reset"],
#content .wp-block-button .wp-block-button__link,
#content .wp-block-search .wp-block-search__button,
#content .search-submit, .mautic-submit-button {
	background-color: var(--btn-ink) !important;
	border-radius: 999px !important;
	color: #fcfcfc !important;
	font-weight: 500;
	padding: .85rem 1.7rem;
	border: 1px solid transparent;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
	line-height: 1;
}
#content .menu-toggle:hover, #content button:hover, #content .ast-button:hover, #content .button:hover,
#content input#submit:hover, #content input[type="button"]:hover, #content input[type="submit"]:hover,
#content .wp-block-button .wp-block-button__link:hover,
.mautic-submit-button:hover {
	background-color: var(--btn-ink) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(32,70,174,.30);
}

/* keep the sidebar search button compact */
.widget_search .search-form button, .search .search-submit { padding: .6rem 1.1rem; }

/* ============================================================
   POST NAVIGATION + COMMENTS
   ============================================================ */
.single .nav-links .nav-previous a, .single .nav-links .nav-next a {
	color: var(--accent);
	font-weight: 600;
}
.comments-area { border-top: 1px solid var(--line); }
.comments-area textarea#comment,
.comments-area .ast-comment-formwrap input[type="text"] {
	border: 1px solid var(--line);
	border-radius: 12px !important;
	background: #fbfcfd;
	padding: .8rem 1rem;
}
.comments-area textarea#comment:focus,
.comments-area .ast-comment-formwrap input[type="text"]:focus {
	border-color: var(--accent) !important;
	outline: none;
}
.ast-comment-meta { color: var(--muted); }

/* ============================================================
   EMAIL SIGNUP BOX (Mautic)
   ============================================================ */
div#email-box {
	background-color: var(--accent-tint) !important;
	border: 1px solid rgba(0,100,120,.18) !important;
	border-radius: 16px;
	padding: 1.4rem 1.5rem;
}
div#email-box input[type="text"], div#email-box input[type="email"] {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: .7rem .9rem;
	background: #fff;
}