/*
Theme Name: Media Mole DarkNews Child
Description: Media Mole customisations for DarkNews Pro.
Author: Media Mole
Template: darknews-pro
Version: 1.2.14
Text Domain: media-mole-darknews-child
*/

/*
 * Big Brother 2026 launch transition. Before 21:00 UK on launch night, the
 * existing countdown remains visible. The companion script reveals this Day
 * panel at the deadline even when a pre-launch page is still cached or open.
 */
.mm-bb-day-widget[hidden],
.mm-bb-countdown[hidden] {
    display: none !important;
}

.mm-bb-day-widget {
    overflow: hidden;
    border: 1px solid #97566f;
    border-radius: 15px;
    background: linear-gradient(105deg, #3b1830 0%, #55203f 100%);
    box-shadow: 0 2px 0 rgba(39, 10, 31, 0.16);
}

.mm-bb-day-widget__link {
    display: flex;
    min-height: 70px;
    align-items: center;
    gap: 11px;
    padding: 8px 13px 8px 9px;
    color: #fff4ed;
    line-height: 1.18;
    text-decoration: none;
}

.mm-bb-day-widget__link:hover,
.mm-bb-day-widget__link:focus-visible {
    color: #fff;
}

.mm-bb-day-widget__link:focus-visible {
    outline: 2px solid #f2b821;
    outline-offset: -3px;
}

.mm-bb-day-widget__eye {
    position: relative;
    display: block;
    flex: 0 0 96px;
    width: 96px;
    height: 54px;
    overflow: hidden;
    border-radius: 50%;
}

.mm-bb-day-widget__eye img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mm-bb-day-widget__copy {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    color: #fff4ed;
    font-size: 16px;
    white-space: nowrap;
}

.mm-bb-day-widget__title {
    font-weight: 700;
}

.mm-bb-day-widget__day {
    display: inline-block;
    padding: 4px 8px 5px;
    border-radius: 999px;
    background: #b53691;
    color: #fff8f3;
    font-weight: 800;
    letter-spacing: 0.01em;
}

/*
 * Main Sidebar Newswire: a compact chronological rail with a fixed date/time
 * column and alternating branded rows. The PHP renderer is restricted to the
 * established Newswire widget, so other Latest Posts blocks keep their style.
 */
#block-18 .mm-newswire__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The heading widget contains an intentional -15px inset; 15px here cancels
 * the theme's remaining space so the first Newswire row starts flush below. */
#block-16.widget {
    margin-bottom: 15px;
}

#block-18 .mm-newswire__item {
    margin: 0;
    padding: 0;
    border: 0;
}

#block-18 .mm-newswire__item:nth-child(odd) {
    background: #48134f;
}

#block-18 .mm-newswire__item:nth-child(even) {
    background: #642060;
}

#block-18 .mm-newswire__link {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    color: #fff;
    text-decoration: none;
    transition: background-color 150ms ease;
}

#block-18 .mm-newswire__link:hover,
#block-18 .mm-newswire__link:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

#block-18 .mm-newswire__link:focus-visible {
    outline: 2px solid #f2b821;
    outline-offset: -2px;
}

#block-18 .mm-newswire__time {
    padding-top: 1px;
    color: #f0d9eb;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.35;
    white-space: nowrap;
}

#block-18 .mm-newswire__headline {
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

/*
 * Genuine Trending bridges the calmer article canvas and the vivid site
 * frame. Rankings are supplied by the companion curation plugin; the child
 * theme is deliberately responsible only for presentation and fallbacks.
 */
.mm-trending {
    width: 100%;
    margin: 28px 0 30px;
}

.mm-trending__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    min-height: 66px;
    margin: 0;
    padding: 14px 18px;
    border-bottom: 3px solid #411371;
    background: #540439;
    color: #fff;
}

.mm-trending__title {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-transform: uppercase;
}

.mm-trending__explanation {
    margin: 0;
    color: #eadce6;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: right;
}

.mm-trending__explanation-mobile {
    display: none;
}

.mm-trending__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mm-trend-card {
    display: grid;
    grid-template-columns: minmax(122px, 34%) 1fr;
    min-height: 142px;
    overflow: hidden;
    border: 1px solid #ddd2da;
    border-radius: 3px;
    background: #efe9ed;
    box-shadow: 0 2px 7px rgba(29, 7, 41, 0.14);
}

.mm-trend-card__image-link {
    position: relative;
    display: block;
    min-height: 142px;
    overflow: hidden;
    background: #411371;
}

.mm-trend-card__image-link img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 142px;
    object-fit: cover;
}

.mm-trend-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 142px;
    padding: 12px;
    background: linear-gradient(145deg, #411371, #682178);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    text-align: center;
}

.mm-trend-card__rank {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    background: #540439;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.mm-trend-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 13px 14px 11px;
}

.mm-trend-card__category {
    display: inline-block;
    margin-bottom: 7px;
    padding: 4px 7px 3px;
    background: #c40769;
    color: #fff !important;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.mm-trend-card__category:hover,
.mm-trend-card__category:focus {
    background: #540439;
    color: #fff !important;
}

.mm-trend-card__title {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #2a2230;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.23;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.mm-trend-card__title a,
.mm-trend-card__title a:visited {
    color: #2a2230;
}

.mm-trend-card__title a:hover,
.mm-trend-card__title a:focus {
    color: #6e0e53;
}

.mm-trend-card__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: auto 0 0;
    padding-top: 7px;
    color: #776b75;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.mm-trend-card__clock {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1.6px solid currentColor;
    border-radius: 50%;
}

.mm-trend-card__clock::before,
.mm-trend-card__clock::after {
    position: absolute;
    top: 2px;
    left: 5px;
    width: 1.4px;
    height: 4px;
    background: currentColor;
    content: "";
    transform-origin: 50% 100%;
}

.mm-trend-card__clock::after {
    transform: translateY(3px) rotate(125deg);
}

/*
 * A calmer editorial canvas for ordinary news articles. Bright purple remains
 * around the content as the Media Mole frame; the reading surface itself is a
 * warm neutral, with the navigation burgundy reserved for the headline panel.
 */
body.single-post .entry-header-details {
    overflow: hidden;
    width: 100%;
    padding-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #540439;
}

/*
 * Give category landing pages the same structured headline treatment as
 * articles, while leaving tag, people, date and general archive headings
 * untouched. The panel spans the archive grid rather than hugging the text.
 */
body.archive.category .header-title-wrapper1.entry-header-details {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 20px;
    padding: 19px 24px 21px;
    border-radius: 8px;
    background: #540439;
    color: #fff;
}

body.archive.category .header-title-wrapper1.entry-header-details > .page-title {
    margin: 0;
    color: #fff;
    font-size: 38px;
    line-height: 1.08;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

body.archive.category .header-title-wrapper1.entry-header-details > .archive-description {
    margin-top: 10px;
    color: #eee7eb;
    font-weight: 400;
}

/*
 * Category story cards: retain the vivid Media Mole frame while moving the
 * article information onto a calmer, more legible editorial surface. Category
 * labels are intentionally omitted here because the page heading already
 * supplies that context; tags, people and other archives keep their defaults.
 */
body.archive.category .aft-archive-wrapper.two-col-masonry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}

body.archive.category .aft-archive-wrapper.two-col-masonry::before,
body.archive.category .aft-archive-wrapper.two-col-masonry::after {
    content: none;
}

body.archive.category .aft-archive-wrapper.two-col-masonry > article.archive-layout-grid {
    float: none;
    width: auto;
    height: auto !important;
    margin: 0;
    padding: 0;
}

body.archive.category .archive-layout-grid .archive-grid-post,
body.archive.category .archive-layout-grid .read-single {
    height: 100%;
}

body.archive.category .archive-layout-grid .read-single {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding: 0;
    border: 1px solid #ddd2da;
    border-radius: 8px;
    background: #f4f0f2;
    box-shadow: 0 2px 7px rgba(29, 7, 41, 0.13);
}

body.archive.category .archive-layout-grid .read-img {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    background: #411371;
}

body.archive.category .archive-layout-grid .read-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.archive.category .archive-layout-grid .category-min-read-wrap {
    display: none;
}

body.archive.category .archive-layout-grid .read-details.color-tp-pad {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 17px 18px 13px;
    background: #f4f0f2;
    color: #2a2230;
}

body.archive.category .archive-layout-grid .read-title {
    order: 1;
}

body.archive.category .archive-layout-grid .read-title h4 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.22;
}

body.archive.category .archive-layout-grid .read-title a,
body.archive.category .archive-layout-grid .read-title a:visited {
    color: #2a2230;
}

body.archive.category .archive-layout-grid .read-title a:hover,
body.archive.category .archive-layout-grid .read-title a:focus {
    color: #6e0e53;
}

body.archive.category .archive-layout-grid .post-description {
    display: -webkit-box;
    overflow: hidden;
    order: 2;
    margin: 0 0 14px;
    color: #5f5360;
    font-size: 14px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.archive.category .archive-layout-grid .aft-readmore-wrapper {
    display: none;
}

body.archive.category .archive-layout-grid .post-item-metadata {
    display: flex;
    order: 3;
    align-items: center;
    margin: auto 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #ddd2da;
    color: #790c5b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

body.archive.category .archive-layout-grid .post-item-metadata .author-links,
body.archive.category .archive-layout-grid .post-item-metadata .item-metadata,
body.archive.category .archive-layout-grid .post-item-metadata i {
    color: #790c5b !important;
    opacity: 1;
}

body.single-post .entry-header-details > .figure-categories {
    margin: 0;
    padding: 20px 24px 8px;
}

body.single-post .entry-header-details > .entry-title {
    margin: 0;
    padding: 0 24px 22px;
    color: #fff;
}

body.single-post .entry-header-details > .single-posts-promotions {
    margin: 0;
    padding: 0 24px 20px;
}

body.single-post .aft-post-excerpt-and-meta.mm-article-summary {
    margin: 0;
    padding: 0;
    background: #f7f5f4;
    color: #2a2230;
}

body.single-post .aft-post-excerpt-and-meta .mm-article-standfirst {
    margin: 0 !important;
    padding: 18px 24px !important;
    border: 0 !important;
    background: #eee7eb;
    color: #3b2938;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
}

body.single-post .aft-post-excerpt-and-meta .mm-article-standfirst::before,
body.single-post .aft-post-excerpt-and-meta .mm-article-standfirst::after {
    content: none;
}

body.single-post .mm-article-publication {
    padding: 13px 24px 12px;
    border-top: 1px solid #ddd2da;
    background: #f7f5f4;
    color: #3b2938;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

body.single-post .mm-article-publication p {
    margin: 0;
    color: inherit;
}

body.single-post .mm-article-publication p > strong {
    margin-right: 0.25em;
}

body.single-post .mm-article-publication__local {
    margin-top: 3px;
}

body.single-post .mm-article-publication a,
body.single-post .mm-article-publication a:visited {
    color: #6e0e53;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(110, 14, 83, 0.35);
    text-underline-offset: 2px;
}

body.single-post .mm-article-summary > .entry-meta {
    margin: 0;
    padding: 0 24px 12px;
    background: #f7f5f4;
    color: #3b2938;
}

body.single-post .inner-entry-content {
    padding: 24px;
    border-radius: 0 0 8px 8px;
    background: #f7f5f4;
    color: #2a2230;
}

body.single-post .entry-content.read-details {
    margin-top: 0 !important;
}

/* Match paragraph spacing after top-level article lists. */
body.single-post .inner-entry-content > ul,
body.single-post .inner-entry-content > ol {
    margin-bottom: 15px;
}

body.single-post .inner-entry-content :where(p, li, dt, dd, figcaption, td, th) {
    color: inherit;
}

body.single-post .inner-entry-content :where(h2, h3, h4, h5, h6) {
    color: #540439;
}

/* Component headings retain their own high-contrast colour treatment. */
body.single-post .inner-entry-content .mm-box-office-chart__heading {
    color: #fff;
}

body.single-post .inner-entry-content a,
body.single-post .inner-entry-content a:visited {
    color: #6e0e53;
}

/* DarkNews dark-mode link rules use white with high specificity. */
body.single-post .inner-entry-content p a:not(.wp-block-button__link),
body.single-post .inner-entry-content li a:not(.wp-block-button__link),
body.single-post .inner-entry-content a.mm-person-link,
body.single-post .inner-entry-content .tags-links a {
    color: #6e0e53 !important;
}

body.single-post .inner-entry-content .tags-links {
    color: #3b2938 !important;
}

/* Match inline-image captions to DarkNews's featured-image caption bar. */
body.single-post .inner-entry-content figure.wp-block-image > figcaption,
body.single-post .inner-entry-content .wp-caption > .wp-caption-text {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 16px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff !important;
    font-size: 16px;
    font-style: normal;
    line-height: 1.7;
    text-align: left;
}

body.single-post .inner-entry-content blockquote,
body.single-post .inner-entry-content .wp-block-quote {
    margin: 24px 0;
    padding: 18px 22px;
    border-left: 5px solid #8b2670;
    background: #eee7eb;
    color: #3b2938;
}

/* Ordinary quotations follow body typography; Pullquote blocks stay prominent. */
body.single-post .inner-entry-content blockquote:not(.wp-block-pullquote blockquote),
body.single-post .inner-entry-content .wp-block-quote {
    font-size: inherit;
    line-height: inherit;
}

body.single-post .inner-entry-content blockquote > :last-child,
body.single-post .inner-entry-content .wp-block-quote > :last-child {
    margin-bottom: 0;
}

/* Make the decorative masthead artwork a valid, accessible homepage link. */
.af-middle-header.af-header-image {
    position: relative;
}

.af-middle-header .mm-header-home-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.af-middle-header .container-wrapper {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.af-middle-header .container-wrapper a,
.af-middle-header .container-wrapper button,
.af-middle-header .container-wrapper input,
.af-middle-header .container-wrapper select,
.af-middle-header .container-wrapper textarea {
    pointer-events: auto;
}

.mm-mobile-menu-slot,
.mm-mobile-search-slot {
    display: none;
}

/* Let the lead-story wrapper follow the theme's responsive card height.
 * Its inherited 430px cap otherwise clips the 600px tablet card's headline.
 * Keep overflow containment for the carousel; only remove the stale height cap.
 */
body.home .aft-banner-layout-1 .af-banner-carousel {
    max-height: none;
}

/*
 * Give the four More Top Stories cards a clearer, more consistent hierarchy.
 * Categories sit away from faces at the top-right, while a graduated lower
 * shadow protects the headline and timestamp without dimming the whole image.
 */
.af-main-banner-featured-posts .grid-design-texts-over-image .read-details {
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: auto;
    padding: 10px 10px 6px;
    background: linear-gradient(
        to bottom,
        rgba(20, 0, 24, 0) 0%,
        rgba(20, 0, 24, 0.03) 35%,
        rgba(20, 0, 24, 0.38) 58%,
        rgba(20, 0, 24, 0.9) 100%
    );
}

.af-main-banner-featured-posts .grid-design-texts-over-image .read-categories {
    position: absolute;
    top: 6px;
    right: 10px;
    left: 10px;
    z-index: 2;
    line-height: 1;
    text-align: right;
}

.af-main-banner-featured-posts .grid-design-texts-over-image.mm-compact-age-ready .read-categories {
    right: 10px;
}

.af-main-banner-featured-posts .grid-design-texts-over-image .read-categories > ul {
    line-height: 1;
}

/* The parent theme adds 5px after every category, including the last one. */
.af-main-banner-featured-posts .grid-design-texts-over-image .read-categories .meta-category:last-child {
    margin-right: 0;
}

.af-main-banner-featured-posts .grid-design-texts-over-image .read-title {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.af-main-banner-featured-posts .grid-design-texts-over-image.mm-compact-age-ready .post-item-metadata {
    position: absolute;
    top: 34px;
    right: 10px;
    z-index: 3;
    width: auto;
    margin: 0;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.af-main-banner-featured-posts .grid-design-texts-over-image.mm-compact-age-ready .post-item-metadata .posts-date {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 4px 8px 4px 6px;
    color: #fff;
    background: #585858;
    font-size: 10px;
    font-weight: 700;
    line-height: 10px;
    opacity: 1;
}

.af-main-banner-featured-posts .grid-design-texts-over-image.mm-compact-age-ready .post-item-metadata .posts-date i {
    margin-right: 3px;
    font-size: 10px;
}

/* Replace the Latest/Popular tabs with four deliberately curated page links. */
.mm-handy-quick-links-heading {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 11px;
    padding: 8px 15px 6px;
    border-bottom: 2px solid #411371;
    background: #540439;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

.mm-handy-quick-links .read-single {
    min-height: 89px;
}

.mm-handy-quick-links .read-img img {
    width: 89px;
    height: 89px;
    object-fit: cover;
}

.mm-handy-quick-links .read-details.pad {
    display: flex;
    align-items: center;
    min-height: 89px;
    max-height: none;
}

.mm-handy-quick-links .read-title h4 {
    margin-top: 0;
    margin-bottom: 0;
}

.mm-handy-quick-links .mm-quick-link-no-image .read-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #411371;
    color: #fff;
}

.mm-quick-link-placeholder-mark {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

/*
 * A post or page may use its featured image as index/social artwork without
 * repeating that image at the top of the singular item. The class is added
 * only when the per-item editor option is enabled. DarkNews renders the image
 * caption separately, so explicitly hide that residual caption as well.
 */
.mm-hide-lead-image .read-img > .aft-image-caption {
    display: none !important;
}

/*
 * Reusable MasterChef menu cards.
 *
 * All colours live here rather than in post content, preventing Gutenberg's
 * inline colour spans and the dark article theme from producing mixed or
 * low-contrast menu text. Editors insert the Media Mole > MasterChef Menu
 * pattern and duplicate or remove complete contestant rows as required.
 */
.inner-entry-content .mm-masterchef-menu {
    overflow: hidden;
    margin: 28px 0;
    padding: 0;
    border: 1px solid #d8cedf;
    border-radius: 8px;
    background: #e8e1d7;
    color: #2a2230;
    box-shadow: 0 3px 12px rgba(16, 5, 24, 0.16);
}

.inner-entry-content .mm-masterchef-menu__title {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 16px 24px !important;
    background: #540439 !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.inner-entry-content .mm-masterchef-menu__entries {
    margin: 0;
    padding: 4px 24px;
}

.inner-entry-content .mm-masterchef-menu__entry {
    margin: 0;
    padding: 18px 0 17px;
    border-bottom: 1px solid #d8cedf;
}

.inner-entry-content .mm-masterchef-menu__entry:last-child {
    border-bottom: 0;
}

.inner-entry-content .mm-masterchef-menu__name {
    margin: 0 0 5px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #540439 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.inner-entry-content .mm-masterchef-menu__name a,
.inner-entry-content .mm-masterchef-menu__name a:visited {
    color: inherit;
    text-decoration-color: rgba(84, 4, 57, 0.45);
    text-underline-offset: 2px;
}

.inner-entry-content .mm-masterchef-menu__dish {
    margin: 0 !important;
    color: #2a2230 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

/* On phones, show the Media Mole wordmark and crop Maurice out of view. */
@media only screen and (max-width: 480px) {
    .mm-handy-quick-links .read-single,
    .mm-handy-quick-links .read-details.pad {
        min-height: 110px;
    }

    .mm-handy-quick-links .read-img img {
        width: 100%;
        height: 100%;
    }

    body.archive.category .header-title-wrapper1.entry-header-details {
        margin-bottom: 14px;
        padding: 14px 16px 15px;
        border-radius: 6px;
    }

    body.archive.category .header-title-wrapper1.entry-header-details > .page-title {
        font-size: 20px;
        line-height: 1.15;
        letter-spacing: 0.01em;
    }

    body.archive.category .aft-archive-wrapper.two-col-masonry {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    body.archive.category .archive-layout-grid .read-details.color-tp-pad {
        padding: 15px 15px 12px;
    }

    body.archive.category .archive-layout-grid .read-title h4 {
        font-size: 19px;
    }

    body.single-post .entry-header-details > .figure-categories {
        padding: 16px 16px 7px;
    }

    body.single-post .entry-header-details > .entry-title {
        padding: 0 16px 18px;
    }

    body.single-post .aft-post-excerpt-and-meta .mm-article-standfirst {
        padding: 15px 16px !important;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.5;
    }

    body.single-post .mm-article-publication {
        padding: 12px 16px 11px;
        font-size: 13px;
    }

    body.single-post .mm-article-summary > .entry-meta {
        padding: 0 16px 10px;
    }

    body.single-post .inner-entry-content {
        padding: 18px 16px;
        border-radius: 0 0 6px 6px;
    }

    .inner-entry-content .mm-masterchef-menu {
        margin: 22px 0;
        border-radius: 6px;
    }

    .inner-entry-content .mm-masterchef-menu__title {
        padding: 14px 16px !important;
        font-size: 19px !important;
    }

    .inner-entry-content .mm-masterchef-menu__entries {
        padding: 2px 16px;
    }

    .inner-entry-content .mm-masterchef-menu__entry {
        padding: 15px 0 14px;
    }

    .inner-entry-content .mm-masterchef-menu__name {
        font-size: 17px !important;
    }

    .aft-enable-top-bottom-gaps.af-boxed-layout .af-whole-wrapper {
        margin-top: 0;
        margin-bottom: 0;
    }

    .header-layout-default .top-header {
        padding: 8px 0;
    }

    .header-layout-default .top-bar-flex {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        min-height: 44px;
    }

    .header-layout-default .top-bar-flex .top-bar-left {
        grid-column: 2;
        width: auto;
        justify-content: center;
        text-align: center;
    }

    .header-layout-default .top-bar-flex .top-bar-right {
        display: none;
    }

    .header-layout-default .mm-mobile-menu-slot,
    .header-layout-default .mm-mobile-search-slot {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-layout-default .mm-mobile-menu-slot {
        grid-column: 1;
        grid-row: 1;
    }

    .header-layout-default .mm-mobile-search-slot {
        grid-column: 3;
        grid-row: 1;
    }

    .header-layout-default .mm-mobile-menu-slot .toggle-menu,
    .header-layout-default .mm-mobile-search-slot .search-icon {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
    }

    .header-layout-default .mm-mobile-menu-slot .ham {
        top: auto;
        left: auto;
        margin: 0;
        transform: none;
    }

    .header-layout-default .mm-mobile-menu-slot .navigation-container,
    .header-layout-default .mm-mobile-menu-slot .main-navigation,
    .header-layout-default .mm-mobile-search-slot .af-search-wrap {
        width: 44px;
        margin: 0;
    }

    .header-layout-default .af-bottom-header {
        display: none;
    }

    .af-middle-header.af-header-image {
        width: 100%;
        height: 80px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background-image: url("assets/images/media-mole-mobile-header.jpg") !important;
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
}

@media only screen and (max-width: 1024px) {
    .mm-trending__grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 480px) {
    .mm-trending__heading {
        display: block;
        min-height: 0;
        margin-bottom: 0;
        padding: 13px 15px 11px;
    }

    .mm-trending__title {
        font-size: 20px;
    }

    .mm-trending__explanation {
        margin-top: 4px;
        font-size: 11px;
        text-align: left;
    }

    .mm-trending__explanation-desktop {
        display: none;
    }

    .mm-trending__explanation-mobile {
        display: inline;
    }

    .mm-trending__grid {
        gap: 11px;
    }

    .mm-trend-card {
        grid-template-columns: 36% 1fr;
        min-height: 112px;
    }

    .mm-trend-card__image-link,
    .mm-trend-card__image-link img,
    .mm-trend-card__placeholder {
        min-height: 112px;
    }

    .mm-trend-card__rank {
        top: 7px;
        left: 7px;
        width: 31px;
        height: 31px;
        border-width: 1.5px;
        font-size: 15px;
    }

    .mm-trend-card__content {
        padding: 10px 11px 8px;
    }

    .mm-trend-card__category {
        margin-bottom: 5px;
        padding: 3px 6px;
        font-size: 9px;
    }

    .mm-trend-card__title {
        font-size: 14px;
        line-height: 1.22;
    }

    .mm-trend-card__meta {
        padding-top: 5px;
        font-size: 10px;
    }

    .mm-trend-card__clock {
        width: 12px;
        height: 12px;
    }

    .mm-trend-card__clock::before,
    .mm-trend-card__clock::after {
        top: 1px;
        left: 4px;
    }
}