/*
Theme Name: Mzansi News
Theme URI: https://mzansinewsonline.co.za
Description: Elegant editorial South African good-news theme for Mzansi News Online. Playfair Display serif headlines, Inter body, a warm off-white canvas, small-caps kickers, image-forward spacious layout and drop caps. Inspired by The New Yorker's refinement and Beautiful News's optimism. Block child theme of Twenty Twenty-Five.
Author: Mzansi News Online
Template: twentytwentyfive
Version: 0.7.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mzansi-news
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,700&family=Inter:wght@400;500;600;700&display=swap');

/* ============ Base ============ */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--wp--preset--color--paper); }
a { transition: color .15s ease; }
img { display: block; }
.mz-card img, .wp-block-post-featured-image img { transition: filter .4s ease, opacity .4s ease; }
.mz-card a:hover img { filter: brightness(1.04); }

/* small-caps label utility */
.mz-kicker, .mz-cat a, .mz-cat {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--wp--preset--color--accent) !important; text-decoration: none !important;
}
.mz-cat a:hover { color: var(--wp--preset--color--accent-deep) !important; }

/* ============ Top bar ============ */
.mz-topbar {
  border-bottom: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em;
}
.mz-topbar a { color: var(--wp--preset--color--muted); }
.mz-topbar a:hover { color: var(--wp--preset--color--accent); }

/* ============ Masthead (centered, elegant) ============ */
.mz-masthead { text-align: center; border-bottom: 1px solid var(--wp--preset--color--line); }
.mz-brand a, .mz-brand.wp-block-site-title a {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800; letter-spacing: -0.01em; color: var(--wp--preset--color--ink);
}
.mz-brand.wp-block-site-title { font-size: clamp(2.2rem, 1rem + 4vw, 3.6rem) !important; line-height: 1.05; }
.mz-tagline {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.mz-masthead .wp-block-search { display: flex; justify-content: center; }
.mz-masthead .wp-block-search__inside-wrapper { max-width: 300px; border: 1px solid var(--wp--preset--color--ink); border-radius: 0; }
.mz-masthead .wp-block-search__button { background: var(--wp--preset--color--ink); color: #fff; border-radius: 0; }
.mz-masthead .wp-block-search__button:hover { background: var(--wp--preset--color--accent); }

/* ============ Nav (centered small-caps) ============ */
.mz-navbar { border-bottom: 1px solid var(--wp--preset--color--line); }
.mz-navbar .wp-block-navigation { justify-content: center; font-family: var(--wp--preset--font-family--sans); }
.mz-navbar .wp-block-navigation-item__content {
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--wp--preset--color--ink-soft); padding: 0.9rem 0.95rem; display: block;
}
.mz-navbar .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.mz-navbar .current-menu-item .wp-block-navigation-item__content { color: var(--wp--preset--color--accent); }

/* ============ Section headings ============ */
.mz-section-head {
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem !important;
  color: var(--wp--preset--color--ink); padding-bottom: 0.6rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--wp--preset--color--ink);
}

/* ============ Cards (image-forward, elegant) ============ */
.mz-card { display: flex; flex-direction: column; gap: 0.7rem; }
.mz-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mz-card .mz-card__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; margin: 0; }
.mz-card .mz-card__title a:hover { color: var(--wp--preset--color--accent); }
.mz-card .wp-block-post-excerpt { color: var(--wp--preset--color--ink-soft); line-height: 1.55; }
.mz-meta { color: var(--wp--preset--color--muted); font-size: 0.78rem; font-family: var(--wp--preset--font-family--sans); }

/* Lead / hero (image on top, serif headline below) */
.mz-lead .mz-card img { aspect-ratio: 16 / 9; }
.mz-lead .mz-card__title { font-size: clamp(2rem, 1rem + 3vw, 3.4rem); line-height: 1.04; font-weight: 800; }
.mz-lead .wp-block-post-excerpt { font-size: 1.15rem; }
.mz-secondary .mz-card__title { font-size: 1.4rem; }
.mz-secondary .wp-block-post-template { display: flex; flex-direction: column; gap: 2rem; }

/* ============ Most Read (refined serif numerals) ============ */
.mz-mostread .wp-block-post-template { list-style: none; margin: 0; padding: 0; counter-reset: mz; }
.mz-mostread .wp-block-post-template > li { counter-increment: mz; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.8rem; align-items: start; padding: 1rem 0; margin: 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.mz-mostread .wp-block-post-template > li:last-child { border-bottom: 0; }
.mz-mostread .wp-block-post-template > li::before { content: counter(mz); font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.7rem; color: var(--wp--preset--color--accent); line-height: 0.9; }
.mz-mostread h3 { font-family: var(--wp--preset--font-family--display); font-size: 1.05rem; line-height: 1.2; font-weight: 600; }
.mz-mostread h3 a { color: var(--wp--preset--color--ink); }
.mz-mostread h3 a:hover { color: var(--wp--preset--color--accent); }

/* ============ Single article (elegant, drop cap) ============ */
.mz-single-hero img { width: 100%; object-fit: cover; }
.mz-article-title { font-size: clamp(2.2rem, 1rem + 4vw, 3.6rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.3rem; }
.mz-prose { font-size: 1.16rem; line-height: 1.78; }
.mz-prose p:first-of-type::first-letter {
  font-family: var(--wp--preset--font-family--display); font-weight: 800;
  float: left; font-size: 3.6rem; line-height: 0.78; padding: 0.1rem 0.6rem 0 0; color: var(--wp--preset--color--accent);
}
.mz-prose h2 { margin-top: 2.25rem; }
.mz-sidebar { position: sticky; top: 1.25rem; }
@media (max-width: 781px) { .mz-sidebar { position: static; } .mz-prose p:first-of-type::first-letter { font-size: 3rem; } }

/* ============ Footer (light, elegant) ============ */
.mz-footer { background: var(--wp--preset--color--surface); border-top: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink-soft); }
.mz-footer a { color: var(--wp--preset--color--ink-soft); }
.mz-footer a:hover { color: var(--wp--preset--color--accent); }
.mz-footer .mz-section-head { color: var(--wp--preset--color--ink); }
.mz-footer .wp-block-categories a, .mz-footer .wp-block-page-list a { line-height: 2.1; }

/* ============ Rules & bits ============ */
.mz-flagrule { height: 1px; border: 0; background: var(--wp--preset--color--ink); }
hr.wp-block-separator:not(.mz-flagrule) { border-color: var(--wp--preset--color--line); opacity: 1; }
.wp-block-query-pagination a, .wp-block-query-pagination span { font-family: var(--wp--preset--font-family--sans); font-weight: 600; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.1em; }

/* ============ Cinematic full-bleed hero (Beautiful News) ============ */
.mz-fullhero { position: relative; margin: 0 0 2.75rem; background: var(--wp--preset--color--ink); overflow: hidden; }
.mz-fullhero .wp-block-post-featured-image { margin: 0; height: clamp(380px, 62vh, 660px); }
.mz-fullhero .wp-block-post-featured-image a { display: block; height: 100%; }
.mz-fullhero .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-fullhero__content { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 5rem; background: linear-gradient(to top, rgba(16,14,11,.9) 0%, rgba(16,14,11,.35) 55%, transparent 100%); }
.mz-fullhero__inner { max-width: 1100px; margin: 0 auto; padding: 0 6vw 2.5rem; }
.mz-fullhero .mz-card__title { font-size: clamp(2.2rem, 1rem + 4.2vw, 4.2rem); line-height: 1.0; margin: .4rem 0 .5rem; }
.mz-fullhero .mz-card__title a, .mz-fullhero .mz-card__title { color: #fff; }
.mz-fullhero .mz-card__title a:hover { color: var(--wp--preset--color--gold); }
.mz-fullhero .mz-cat a { color: #fff !important; }
.mz-fullhero .mz-meta, .mz-fullhero .mz-meta * { color: #eae6dd !important; }

/* article: full-width photo, wider + airier reading */
.mz-hero-img { margin-bottom: 2.25rem; height: clamp(340px, 56vh, 600px); }
.mz-hero-img a { display: block; height: 100%; }
.mz-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.mz-prose { font-size: 1.2rem; line-height: 1.85; }
.mz-prose p { margin-bottom: 1.45rem; }
.mz-prose h2 { margin-top: 2.6rem; margin-bottom: .5rem; }

/* bigger, airier homepage grid */
.mz-grid .wp-block-post-template { gap: 3rem 2.5rem !important; }
.mz-grid .mz-card img { aspect-ratio: 3 / 2; }
.mz-card .mz-card__title { font-size: 1.5rem; }

/* ===== Article page: two columns fill the page, tighter vertical rhythm ===== */
.mz-prose { font-size: 1.15rem; line-height: 1.72; max-width: none; }
.mz-prose p { margin-bottom: 1.2rem; }
.mz-prose h2 { margin-top: 2.2rem; }
.mz-article-title { margin-top: 0.5rem; }
.mz-side { font-family: var(--wp--preset--font-family--sans); }
.mz-side-block { position: sticky; top: 1.25rem; }
.mz-side-block + .mz-side-block { margin-top: 2.25rem; }
.mz-side .mz-section-head { margin-top: 0; margin-bottom: 0.75rem; }
.mz-side .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mz-side .wp-block-post-template > li { margin: 0; }
.mz-side-card { display: grid; grid-template-columns: 92px 1fr; gap: 0.85rem; align-items: start; padding: 0.8rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.mz-side-card .wp-block-post-featured-image { margin: 0; }
.mz-side-card img { width: 92px; height: 68px; object-fit: cover; }
.mz-side-card .wp-block-post-title { font-family: var(--wp--preset--font-family--display); font-size: 1.02rem; line-height: 1.18; font-weight: 600; margin: 0; }
.mz-side-card .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.mz-side-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
@media (max-width: 781px) { .mz-side-block { position: static; } }
.mz-credit { font-size: 0.82rem; color: var(--wp--preset--color--muted); font-style: italic; margin-top: 0.6rem; }
.mz-credit a { color: var(--wp--preset--color--muted); }