/*
Theme Name: Kadence Child
Theme URI: https://makkahpost.com
Template: kadence
Description: Makkahpost v2.0 "Golden Makkah" — Gold & Black Premium News Theme
Version: 2.0.0
Text Domain: makkahpost
*/

/* =============================================
   CSS VARIABLES
   ============================================= */
:root {
    /* Gold palette */
    --mkp-gold: #C8A84E;
    --mkp-gold-dark: #A6882D;
    --mkp-gold-light: #E8D48B;

    /* Dark palette (default) */
    --mkp-black: #0D0D0D;
    --mkp-surface: #1A1A1A;
    --mkp-surface-alt: #2A2A2A;
    --mkp-text: #F5F0E6;
    --mkp-text-muted: #9A9A9A;
    --mkp-border: #333333;
    --mkp-white: #FFFFFF;

    /* Semantic */
    --mkp-breaking: #CC2929;
    --mkp-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Category colors */
    --mkp-cat-local: #AA8719;
    --mkp-cat-intl: #2C5F8A;
    --mkp-cat-economy: #8B6914;
    --mkp-cat-sports: #B84A00;
    --mkp-cat-tech: #3B2E8A;
    --mkp-cat-tourism: #0E7C7B;
    --mkp-cat-mix: #8B4C70;
    --mkp-cat-ent: #C2553A;

    /* Typography */
    --mkp-font-heading: 'Kufam', 'Segoe UI', sans-serif;
    --mkp-font-body: 'Readex Pro', 'Segoe UI', sans-serif;
}

/* =============================================
   BASE & RESET
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--mkp-font-body);
    background: var(--mkp-black);
    color: var(--mkp-text);
    direction: rtl;
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mkp-font-heading);
    line-height: 1.3;
    margin: 0;
}

a {
    color: var(--mkp-gold);
    text-decoration: none;
    transition: color var(--mkp-transition);
}
a:hover { color: var(--mkp-gold-dark); }

img { max-width: 100%; height: auto; display: block; }

.mkp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Hide Kadence defaults */
.site-footer,
.site-header,
#masthead,
#mobile-drawer,
.popup-drawer { display: none !important; }

/* =============================================
   TICKER (Topbar — Tier 1)
   ============================================= */
.mkp-topbar {
    height: 38px;
    background: var(--mkp-black);
    border-bottom: 2px solid var(--mkp-gold);
    overflow: hidden;
    z-index: 1002;
    position: relative;
    transition: transform var(--mkp-transition);
}

.mkp-topbar__inner {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 16px;
}

.mkp-topbar__links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.mkp-topbar__links a {
    color: var(--mkp-text-muted);
    font-size: 0.75rem;
    padding: 0 8px;
    text-decoration: none;
    border-left: 1px solid var(--mkp-border);
    transition: color var(--mkp-transition);
    font-family: var(--mkp-font-body);
}
.mkp-topbar__links a:first-child { border-left: none; }
.mkp-topbar__links a:hover { color: var(--mkp-gold); }

.mkp-ticker {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
}

.mkp-ticker__label {
    background: var(--mkp-breaking);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 4px 18px 4px 14px;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    font-family: var(--mkp-font-body);
}
.mkp-ticker__label::after {
    content: '';
    position: absolute;
    left: -12px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 12px solid var(--mkp-breaking);
}

.mkp-ticker__wrap {
    flex: 1;
    overflow: hidden;
    margin-right: 8px;
}

.mkp-ticker__track {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}

.mkp-ticker__item {
    color: var(--mkp-gold);
    font-size: 0.8125rem;
    padding: 0 24px;
    text-decoration: none;
    border-left: 1px dashed var(--mkp-border);
    transition: color var(--mkp-transition);
    font-family: var(--mkp-font-body);
}
.mkp-ticker__item:hover { color: var(--mkp-gold-light); }

/* =============================================
   LOGO BAR (Tier 2)
   ============================================= */
.mkp-logobar {
    background: var(--mkp-surface);
    border-bottom: 1px solid var(--mkp-border);
    padding: 12px 0;
}

.mkp-logobar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mkp-logobar__dates {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--mkp-text-muted);
}
.mkp-logobar__date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mkp-logobar__date svg { stroke: var(--mkp-gold); }
.mkp-logobar__sep { color: var(--mkp-border); }

.mkp-logobar__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.mkp-logobar__logo img {
    height: 56px;
    width: auto;
}

/* Default (dark): show white logo, hide color */
.mkp-logo-dark { display: block; }
.mkp-logo-light { display: none; }

/* Light mode: show color logo, hide white */
[data-theme="light"] .mkp-logo-dark { display: none; }
[data-theme="light"] .mkp-logo-light { display: block; }

.mkp-logobar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mkp-logobar__weather {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mkp-gold);
    font-size: 0.8125rem;
    font-weight: 500;
}
.mkp-logobar__weather svg { stroke: var(--mkp-gold); }

.mkp-logobar__search-btn {
    background: none;
    border: none;
    color: var(--mkp-text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: color var(--mkp-transition), background var(--mkp-transition);
}
.mkp-logobar__search-btn:hover {
    color: var(--mkp-gold);
    background: var(--mkp-surface-alt);
}

/* Dark/Light Toggle */
.mkp-dark-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mkp-gold);
    color: var(--mkp-black);
    border: none;
    border-radius: 20px;
    height: 32px;
    padding: 0 14px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--mkp-transition);
    font-family: var(--mkp-font-body);
    white-space: nowrap;
}
.mkp-dark-toggle:hover { background: var(--mkp-gold-dark); }

/* Default = dark mode: show sun, hide moon */
.mkp-dark-toggle__sun { display: block; }
.mkp-dark-toggle__moon { display: none; }
.mkp-dark-toggle__label-dark { display: inline; }
.mkp-dark-toggle__label-light { display: none; }

/* Light mode: show moon, hide sun */
[data-theme="light"] .mkp-dark-toggle__sun { display: none; }
[data-theme="light"] .mkp-dark-toggle__moon { display: block; }
[data-theme="light"] .mkp-dark-toggle__label-dark { display: none; }
[data-theme="light"] .mkp-dark-toggle__label-light { display: inline; }
[data-theme="light"] .mkp-dark-toggle {
    background: var(--mkp-surface-alt);
    color: var(--mkp-text);
}

/* =============================================
   NAVIGATION BAR (Tier 3 — Sticky)
   ============================================= */
.mkp-navbar {
    background: var(--mkp-black);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--mkp-border);
}

.mkp-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
}

.mkp-navbar__links {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
}

.mkp-navbar__item {
    position: static; /* megas position against the full-width navbar → centered in the page container */
    height: 100%;
    display: flex;
    align-items: center;
}

.mkp-navbar__link {
    color: var(--mkp-text);
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    transition: color var(--mkp-transition);
    font-family: var(--mkp-font-body);
    text-decoration: none;
}
.mkp-navbar__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    width: 0;
    height: 3px;
    background: var(--mkp-gold);
    transition: width 0.3s ease, right 0.3s ease;
}
.mkp-navbar__link:hover,
.mkp-navbar__link--active {
    color: var(--mkp-gold);
}
.mkp-navbar__link:hover::after,
.mkp-navbar__link--active::after {
    width: 100%;
    right: 0;
}

/* Hamburger */
.mkp-navbar__hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}
.mkp-navbar__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #FFFFFF;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.mkp-navbar__hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mkp-navbar__hamburger.open span:nth-child(2) { opacity: 0; }
.mkp-navbar__hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mega Menu */
/* All dropdown megas are centered on and contained within the page container
   (nav items are static so megas position against the full-width sticky navbar). */
.mkp-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    width: min(760px, calc(100vw - 48px));
    min-width: 0;
    max-width: calc(100vw - 48px);
    background: var(--mkp-surface);
    border-top: 3px solid var(--mkp-gold);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 999;
    padding: 20px;
}
.mkp-navbar__item:hover .mkp-mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mkp-mega__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.mkp-mega__featured {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.mkp-mega__featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mkp-mega__featured-title {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    font-family: var(--mkp-font-heading);
}
.mkp-mega__featured-title:hover { color: var(--mkp-gold); }

.mkp-mega__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mkp-mega__list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--mkp-border);
}
.mkp-mega__list li:last-child { border: 0; }
.mkp-mega__list a {
    color: var(--mkp-text);
    font-size: 0.875rem;
    text-decoration: none;
}
.mkp-mega__list a:hover { color: var(--mkp-gold); }

/* -----------------------------------------------------------------------------
   "أخرى" full mega — 5 secondary desks as columns (heading + featured card + list)
   -------------------------------------------------------------------------- */
/* static so the wide 5-col panel positions against the sticky navbar (full
   width) and can be centered on the page container, not its narrow tab. */
.mkp-navbar__item--more { position: static; }
.mkp-navbar__link--more { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.mkp-more-caret { transition: transform 0.25s ease; flex-shrink: 0; }
.mkp-navbar__item--more:hover .mkp-more-caret,
.mkp-navbar__item--more:focus-within .mkp-more-caret { transform: rotate(180deg); }
/* Wide 5-col panel → centered on and contained within the page container
   (max-width matches the site container), not anchored to the أخرى tab. */
.mkp-mega--more {
    left: 50%;
    right: auto;
    min-width: 0;
    width: min(var(--mkp-container, 1200px), calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    transform: translateX(-50%) translateY(8px);
}
.mkp-navbar__item--more:hover .mkp-mega.mkp-mega--more,
.mkp-navbar__item--more:focus-within .mkp-mega.mkp-mega--more {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.mkp-mega--more .mkp-mega__inner {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    align-items: start;
}
.mkp-mega__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mkp-mega__col-head {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--col-color, var(--mkp-gold));
    padding-bottom: 6px;
    border-bottom: 2px solid var(--col-color, var(--mkp-gold));
}
.mkp-mega__col-icon { display: inline-flex; color: var(--col-color, var(--mkp-gold)); }
.mkp-mega__col-icon svg { width: 16px; height: 16px; }
.mkp-mega__col-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkp-mega__col-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mkp-surface-2, rgba(255,255,255,0.04));
}
.mkp-mega__col-card-img { width: 100%; aspect-ratio: 16/10; overflow: hidden; display: block; }
.mkp-mega__col-card-img img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.mkp-mega__col-card-title {
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mkp-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mkp-mega__col-card:hover .mkp-mega__col-card-title { color: var(--mkp-gold); }
.mkp-mega__col-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mkp-mega__col-list li { padding: 0; border: 0; }
.mkp-mega__col-list li a {
    color: var(--mkp-text);
    font-size: 0.74rem;
    line-height: 1.45;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mkp-mega__col-list li a:hover { color: var(--col-color, var(--mkp-gold)); }
.mkp-mega__ph {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(197,164,90,0.28) 0%, rgba(0,0,0,0.20) 100%);
}

/* =============================================
   HERO — Split-Screen Slider
   ============================================= */
.mkp-hero {
    position: relative;
    height: 520px;
    overflow: hidden;
    background: var(--mkp-black);
}

.mkp-hero__slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 60% 40%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
}
.mkp-hero__slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Image side */
.mkp-hero__image {
    position: relative;
    overflow: hidden;
}
.mkp-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: mkpKenBurns 6s ease-in-out infinite alternate;
}
@keyframes mkpKenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}
.mkp-hero__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.3));
}
.mkp-hero__cat {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px;
    z-index: 2;
    font-family: var(--mkp-font-body);
}

/* Content side */
.mkp-hero__content {
    background: var(--mkp-black);
    border-right: 3px solid var(--mkp-gold);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
}

.mkp-hero__content-cat {
    color: var(--mkp-gold);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-family: var(--mkp-font-body);
}

.mkp-hero__title {
    font-family: var(--mkp-font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mkp-hero__title a {
    color: var(--mkp-text);
    text-decoration: none;
}
.mkp-hero__title a:hover { color: var(--mkp-gold); }

.mkp-hero__excerpt {
    color: var(--mkp-text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mkp-hero__meta {
    color: var(--mkp-text-muted);
    font-size: 0.8125rem;
    margin-bottom: 24px;
}

.mkp-hero__btn {
    display: inline-flex;
    align-items: center;
    background: var(--mkp-gold);
    color: var(--mkp-black);
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background var(--mkp-transition);
    font-family: var(--mkp-font-body);
    width: fit-content;
    text-decoration: none;
}
.mkp-hero__btn:hover {
    background: var(--mkp-gold-dark);
    color: var(--mkp-black);
}

/* Hero Dots */
.mkp-hero__dots {
    position: absolute;
    bottom: 24px;
    left: 40%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.mkp-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--mkp-gold);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background var(--mkp-transition);
}
.mkp-hero__dot.active {
    background: var(--mkp-gold);
}

/* Hero Arrows */
.mkp-hero__arrows {
    position: absolute;
    bottom: 24px;
    left: 20px;
    display: flex;
    gap: 8px;
    z-index: 10;
}
.mkp-hero__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--mkp-gold);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--mkp-transition), transform var(--mkp-transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.mkp-hero__arrow:hover {
    background: var(--mkp-gold-dark);
    transform: scale(1.1);
}
.mkp-hero__arrow svg { fill: #fff; }

/* Hero Progress Bar */
.mkp-hero__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 60%;
    height: 3px;
    background: var(--mkp-border);
    z-index: 10;
}
.mkp-hero__progress-bar {
    height: 100%;
    background: var(--mkp-gold);
    width: 0;
    transition: none;
}
.mkp-hero__progress-bar.animating {
    animation: mkpProgress 6s linear forwards;
}
@keyframes mkpProgress {
    from { width: 0; }
    to { width: 100%; }
}

/* =============================================
   SECTION HEADERS
   ============================================= */
.mkp-section-header {
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mkp-border);
}
.mkp-section-header__title {
    font-family: var(--mkp-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mkp-text);
    padding-right: 16px;
    border-right: 4px solid var(--mkp-gold);
}

/* =============================================
   CATEGORY MOSAIC
   ============================================= */
.mkp-mosaic {
    padding: 48px 0;
}

.mkp-mosaic__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 16px;
}

.mkp-mosaic__card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    text-decoration: none;
}
.mkp-mosaic__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.mkp-mosaic__card:hover img { transform: scale(1.05); }

.mkp-mosaic__card--large {
    grid-column: span 2;
    aspect-ratio: 16/9;
}
.mkp-mosaic__card:not(.mkp-mosaic__card--large) {
    aspect-ratio: 4/3;
}

.mkp-mosaic__overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
}

.mkp-mosaic__badge {
    display: inline-block;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-family: var(--mkp-font-body);
}

.mkp-mosaic__title {
    color: #fff;
    font-family: var(--mkp-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mkp-mosaic__card--large .mkp-mosaic__title { font-size: 1.25rem; }

.mkp-mosaic__date {
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    margin-top: 6px;
    display: block;
}

/* =============================================
   TRENDING / MOST READ TABS
   ============================================= */
.mkp-trending {
    padding: 48px 0;
}

.mkp-trending__tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--mkp-border);
}

.mkp-trending__tab {
    background: none;
    border: none;
    color: var(--mkp-text-muted);
    font-size: 1rem;
    font-weight: 500;
    padding: 12px 24px;
    cursor: pointer;
    position: relative;
    font-family: var(--mkp-font-heading);
    transition: color var(--mkp-transition);
}
.mkp-trending__tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--mkp-gold);
    opacity: 0;
    transition: opacity var(--mkp-transition);
}
.mkp-trending__tab.active {
    color: var(--mkp-gold);
}
.mkp-trending__tab.active::after { opacity: 1; }

.mkp-trending__panel {
    display: none;
    background: var(--mkp-surface);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--mkp-border);
}
.mkp-trending__panel.active { display: block; }

.mkp-trending__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--mkp-border);
}
.mkp-trending__item:last-child { border: 0; }

.mkp-trending__rank {
    font-family: var(--mkp-font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--mkp-gold);
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.mkp-trending__thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.mkp-trending__info { flex: 1; min-width: 0; }

.mkp-trending__title {
    font-family: var(--mkp-font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px;
    line-height: 1.4;
}
.mkp-trending__title a {
    color: var(--mkp-text);
    text-decoration: none;
}
.mkp-trending__title a:hover { color: var(--mkp-gold); }

.mkp-trending__date {
    color: var(--mkp-text-muted);
    font-size: 0.8125rem;
}

/* =============================================
   EDITOR'S PICKS RIBBON
   ============================================= */
.mkp-ribbon {
    padding: 48px 0;
    background: var(--mkp-surface);
}

.mkp-ribbon__wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.mkp-ribbon__scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 16px;
}
.mkp-ribbon__scroll::-webkit-scrollbar { display: none; }

.mkp-ribbon__card {
    flex-shrink: 0;
    width: 280px;
    background: var(--mkp-surface-alt);
    border-radius: 8px;
    overflow: hidden;
    border-bottom: 2px solid var(--mkp-gold);
    scroll-snap-align: start;
    transition: transform var(--mkp-transition);
    text-decoration: none;
}
.mkp-ribbon__card:hover { transform: translateY(-4px); }

.mkp-ribbon__card-img {
    aspect-ratio: 16/9;
    overflow: hidden;
}
.mkp-ribbon__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mkp-ribbon__card-body { padding: 14px; }

.mkp-ribbon__card-cat {
    color: var(--mkp-gold);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--mkp-font-body);
}

.mkp-ribbon__card-title {
    font-family: var(--mkp-font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mkp-text);
    margin: 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.mkp-ribbon__card-date {
    color: var(--mkp-text-muted);
    font-size: 0.75rem;
}

.mkp-ribbon__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mkp-gold);
    color: var(--mkp-black);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    opacity: 0;
    transition: opacity var(--mkp-transition);
}
.mkp-ribbon__wrapper:hover .mkp-ribbon__arrow { opacity: 1; }
.mkp-ribbon__arrow--prev { right: 4px; }
.mkp-ribbon__arrow--next { left: 4px; }
.mkp-ribbon__arrow:hover { background: var(--mkp-gold-dark); }

/* =============================================
   LATEST NEWS GRID
   ============================================= */
.mkp-latest {
    padding: 48px 0;
}

.mkp-latest__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Card (shared across contexts) */
.mkp-card {
    background: var(--mkp-surface);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mkp-border);
    transition: transform var(--mkp-transition), box-shadow var(--mkp-transition);
}
.mkp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.mkp-card__img {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.mkp-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.mkp-card:hover .mkp-card__img img { transform: scale(1.05); }

.mkp-card__body { padding: 16px; }

.mkp-card__cat {
    display: inline-block;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-family: var(--mkp-font-body);
}

.mkp-card__title {
    font-family: var(--mkp-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mkp-card__title a {
    color: var(--mkp-text);
    text-decoration: none;
}
.mkp-card__title a:hover { color: var(--mkp-gold); }

.mkp-card__excerpt {
    color: var(--mkp-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mkp-card__date {
    color: var(--mkp-text-muted);
    font-size: 0.8125rem;
}

/* Load More Button */
.mkp-latest__more {
    display: block;
    margin: 32px auto 0;
    padding: 12px 40px;
    background: transparent;
    color: var(--mkp-gold);
    border: 2px solid var(--mkp-gold);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--mkp-transition), color var(--mkp-transition);
    font-family: var(--mkp-font-body);
}
.mkp-latest__more:hover {
    background: var(--mkp-gold);
    color: var(--mkp-black);
}

/* =============================================
   SINGLE POST
   ============================================= */
.mkp-breadcrumb {
    padding: 16px 0;
    font-size: 0.8125rem;
    color: var(--mkp-text-muted);
    background: var(--mkp-surface);
    border-bottom: 1px solid var(--mkp-border);
}
.mkp-breadcrumb a { color: var(--mkp-gold); text-decoration: none; }
.mkp-breadcrumb a:hover { text-decoration: underline; }
.mkp-breadcrumb__sep { margin: 0 8px; color: var(--mkp-border); }

.mkp-single { padding: 32px 0 48px; }

.mkp-single__grid {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 32px;
}

.mkp-single__content {
    min-width: 0;
}

.mkp-single__badge {
    display: inline-block;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    text-decoration: none;
    font-family: var(--mkp-font-body);
}

.mkp-single__content h1 {
    font-family: var(--mkp-font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--mkp-text);
    margin-bottom: 16px;
}

.mkp-single__meta {
    display: flex;
    gap: 16px;
    color: var(--mkp-text-muted);
    font-size: 0.875rem;
    margin-bottom: 20px;
}
.mkp-single__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mkp-single__meta-item svg { stroke: var(--mkp-gold); }

.mkp-single__share {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}
.mkp-single__share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--mkp-border);
    background: var(--mkp-surface);
    color: var(--mkp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mkp-transition);
    cursor: pointer;
    text-decoration: none;
}
.mkp-single__share-btn:hover {
    background: var(--mkp-gold);
    color: var(--mkp-black);
    border-color: var(--mkp-gold);
}

.mkp-single__featured {
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}
.mkp-single__featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mkp-single__body {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--mkp-text);
}
.mkp-single__body p { margin: 0 0 1.5em; }
.mkp-single__body img { border-radius: 8px; margin: 1.5em 0; }
.mkp-single__body h2, .mkp-single__body h3 {
    font-family: var(--mkp-font-heading);
    color: var(--mkp-text);
    margin: 1.5em 0 0.75em;
}
.mkp-single__body a { color: var(--mkp-gold); text-decoration: underline; }
.mkp-single__body blockquote {
    border-right: 4px solid var(--mkp-gold);
    padding: 16px 24px;
    margin: 1.5em 0;
    background: var(--mkp-surface);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--mkp-text-muted);
}

.mkp-single__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--mkp-border);
}
.mkp-single__tags a {
    color: var(--mkp-gold);
    font-size: 0.8125rem;
    padding: 4px 12px;
    border: 1px solid var(--mkp-gold);
    border-radius: 20px;
    text-decoration: none;
    transition: all var(--mkp-transition);
}
.mkp-single__tags a:hover {
    background: var(--mkp-gold);
    color: var(--mkp-black);
}

.mkp-single__related { margin-top: 40px; }
.mkp-single__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Mobile Share Bar */
.mkp-mobile-share {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mkp-surface);
    border-top: 1px solid var(--mkp-border);
    display: none;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    z-index: 990;
}
.mkp-mobile-share.visible { display: flex; }
.mkp-mobile-share__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--mkp-border);
    background: var(--mkp-surface-alt);
    color: var(--mkp-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}

/* =============================================
   SIDEBAR
   ============================================= */
.mkp-sidebar__widget {
    background: var(--mkp-surface);
    border: 1px solid var(--mkp-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

.mkp-sidebar__widget-header {
    font-family: var(--mkp-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mkp-gold);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--mkp-gold);
}

.mkp-sidebar__widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: sidebar-counter;
}
.mkp-sidebar__widget-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--mkp-border);
    counter-increment: sidebar-counter;
    position: relative;
    padding-right: 32px;
}
.mkp-sidebar__widget-list li:last-child { border: 0; }
.mkp-sidebar__widget-list li::before {
    content: counter(sidebar-counter);
    position: absolute;
    right: 0;
    top: 10px;
    font-family: var(--mkp-font-heading);
    font-weight: 700;
    color: var(--mkp-gold);
    font-size: 0.875rem;
}
.mkp-sidebar__widget-list a {
    color: var(--mkp-text);
    font-size: 0.875rem;
    text-decoration: none;
    line-height: 1.5;
}
.mkp-sidebar__widget-list a:hover { color: var(--mkp-gold); }

/* =============================================
   ARCHIVE
   ============================================= */
.mkp-archive__header {
    background: var(--mkp-surface);
    padding: 32px 0;
    border-bottom: 1px solid var(--mkp-border);
    border-right: 4px solid var(--mkp-gold);
}
.mkp-archive__header h1 {
    font-family: var(--mkp-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mkp-text);
}
.mkp-archive__header span {
    color: var(--mkp-text-muted);
    font-size: 0.875rem;
}

.mkp-archive { padding: 32px 0 48px; }

.mkp-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.mkp-archive__empty {
    color: var(--mkp-text-muted);
    text-align: center;
    padding: 48px 0;
    grid-column: 1 / -1;
}

.mkp-archive__pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 32px;
}
.mkp-archive__pagination a,
.mkp-archive__pagination span {
    padding: 8px 14px;
    border: 1px solid var(--mkp-border);
    border-radius: 6px;
    color: var(--mkp-text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: all var(--mkp-transition);
}
.mkp-archive__pagination a:hover {
    border-color: var(--mkp-gold);
    color: var(--mkp-gold);
}
.mkp-archive__pagination .current {
    background: var(--mkp-gold);
    color: var(--mkp-black);
    border-color: var(--mkp-gold);
    font-weight: 600;
}

/* =============================================
   FOOTER
   ============================================= */
.mkp-footer-cta {
    background: var(--mkp-gold);
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
    padding: 64px 0 32px;
}
.mkp-footer-cta__inner {
    text-align: center;
}
.mkp-footer-cta__inner h3 {
    font-family: var(--mkp-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mkp-black);
    margin-bottom: 16px;
}
.mkp-footer-cta__social {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.mkp-footer-cta__social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.15);
    color: var(--mkp-black);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--mkp-transition);
}
.mkp-footer-cta__social a:hover { background: rgba(0,0,0,0.3); }

.mkp-footer {
    background: var(--mkp-black);
    padding: 48px 0 24px;
}

.mkp-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
}

.mkp-footer__about-logo img {
    height: 80px;
    width: auto;
    margin-bottom: 16px;
}

.mkp-footer__about-text {
    color: var(--mkp-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 16px;
}

.mkp-footer__social {
    display: flex;
    gap: 8px;
}
.mkp-footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--mkp-border);
    color: var(--mkp-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mkp-transition);
}
.mkp-footer__social a:hover {
    border-color: var(--mkp-gold);
    color: var(--mkp-gold);
}

.mkp-footer__col h4 {
    font-family: var(--mkp-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mkp-gold);
    margin-bottom: 16px;
}

.mkp-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mkp-footer__links li { margin-bottom: 10px; }
.mkp-footer__links a {
    color: var(--mkp-text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--mkp-transition);
}
.mkp-footer__links a:hover { color: var(--mkp-gold); }

.mkp-footer__copyright {
    background: #080808;
    padding: 16px 0;
    text-align: center;
    color: var(--mkp-text-muted);
    font-size: 0.8125rem;
}

/* =============================================
   FAB MENU
   ============================================= */
.mkp-fab {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 990;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity var(--mkp-transition), visibility var(--mkp-transition), transform var(--mkp-transition);
}
.mkp-fab--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mkp-fab__btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--mkp-border);
    background: var(--mkp-surface);
    color: var(--mkp-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mkp-transition);
    text-decoration: none;
}
.mkp-fab__btn:hover {
    background: var(--mkp-gold);
    color: var(--mkp-black);
    border-color: var(--mkp-gold);
}

/* =============================================
   WHATSAPP CTA
   ============================================= */
.mkp-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 991;
}
.mkp-whatsapp__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(37,211,102,0.3);
    transition: all var(--mkp-transition);
    font-family: var(--mkp-font-body);
}
.mkp-whatsapp__btn:hover {
    background: #1ea952;
    transform: translateY(-2px);
    color: #fff;
}

/* =============================================
   MOBILE MENU
   ============================================= */
.mkp-mobile-menu__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.mkp-mobile-menu__backdrop.open {
    opacity: 1;
    visibility: visible;
}

.mkp-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 360px;
    background: var(--mkp-black);
    z-index: 1101;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.mkp-mobile-menu.open { transform: translateX(0); }

.mkp-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 2px solid var(--mkp-gold);
}
.mkp-mobile-menu__header-title {
    font-family: var(--mkp-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mkp-text);
}
.mkp-mobile-menu__close {
    background: none;
    border: none;
    color: var(--mkp-text-muted);
    cursor: pointer;
    padding: 4px;
}

.mkp-mobile-menu__search {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mkp-border);
}
.mkp-mobile-menu__search-form {
    display: flex;
    gap: 8px;
}
.mkp-mobile-menu__search-input {
    flex: 1;
    background: var(--mkp-surface-alt);
    border: 1px solid var(--mkp-border);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--mkp-text);
    font-size: 0.875rem;
    font-family: var(--mkp-font-body);
    direction: rtl;
}
.mkp-mobile-menu__search-input::placeholder { color: var(--mkp-text-muted); }
.mkp-mobile-menu__search-btn {
    background: var(--mkp-gold);
    color: var(--mkp-black);
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    cursor: pointer;
}

.mkp-mobile-menu__nav { padding: 8px 0; flex: 1; }

.mkp-mobile-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--mkp-text);
    text-decoration: none;
    transition: background var(--mkp-transition);
}
.mkp-mobile-menu__item:hover { background: var(--mkp-surface); }

.mkp-mobile-menu__item-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.mkp-mobile-menu__item-label {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
}

.mkp-mobile-menu__item-arrow {
    color: var(--mkp-text-muted);
    flex-shrink: 0;
}

.mkp-mobile-menu__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--mkp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mkp-mobile-menu__home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mkp-text);
    font-size: 0.875rem;
    text-decoration: none;
}
.mkp-mobile-menu__social { display: flex; gap: 8px; }
.mkp-mobile-menu__social a {
    color: var(--mkp-text-muted);
    transition: color var(--mkp-transition);
}
.mkp-mobile-menu__social a:hover { color: var(--mkp-gold); }

/* =============================================
   SEARCH OVERLAY
   ============================================= */
.mkp-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.mkp-search-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mkp-search-overlay__close {
    position: absolute;
    top: 24px;
    left: 24px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}

.mkp-search-overlay__form {
    display: flex;
    max-width: 600px;
    width: 90%;
    background: var(--mkp-surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.mkp-search-overlay__input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--mkp-text);
    padding: 18px 24px;
    font-size: 1.125rem;
    font-family: var(--mkp-font-body);
    direction: rtl;
}
.mkp-search-overlay__input::placeholder { color: var(--mkp-text-muted); }
.mkp-search-overlay__input:focus { outline: none; }

.mkp-search-overlay__btn {
    background: var(--mkp-gold);
    border: none;
    color: var(--mkp-black);
    padding: 0 20px;
    cursor: pointer;
    transition: background var(--mkp-transition);
}
.mkp-search-overlay__btn:hover { background: var(--mkp-gold-dark); }

/* =============================================
   SCROLL REVEAL
   ============================================= */
.mkp-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.mkp-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   KADENCE PAGE CONTENT (static pages) — Dark mode
   ============================================= */

/* Force dark backgrounds on all Kadence content wrappers */
body .site,
body .content-bg,
body.content-style-boxed .site,
body.content-style-unboxed .site,
body .site-main,
body .site-main .content-area,
body .site-main .content-container,
body .site-main .entry-content-wrap,
body .site-main .entry.single-entry,
body .site-main .entry-content,
body .entry-hero-container-inner,
body .entry-hero-layout-contained {
    background: #0D0D0D !important;
    color: #F5F0E6 !important;
}

/* Content box (boxed style) */
body.content-style-boxed .site-main .entry-content-wrap {
    background: #1A1A1A !important;
    box-shadow: none !important;
}

body.content-style-boxed .site-main .entry.single-entry {
    box-shadow: none !important;
}

/* All text inside pages */
body .site-main h1,
body .site-main h2,
body .site-main h3,
body .site-main h4,
body .site-main h5,
body .site-main h6,
body .site-main .entry-title,
body .entry-hero .entry-header h1,
body .entry-hero .entry-header .entry-title {
    color: #F5F0E6 !important;
    font-family: var(--mkp-font-heading);
}

body .site-main p,
body .site-main li,
body .site-main span,
body .site-main td,
body .site-main th,
body .site-main label,
body .site-main div,
body .site-main .entry-content p,
body .site-main .entry-content li,
body .site-main .entry-content span,
body .site-main .wp-block-heading {
    color: #F5F0E6 !important;
}

body .site-main a:not(.mkp-card__img):not([class*="mkp-"]) {
    color: #C8A84E !important;
}

/* Form inputs on pages */
body .site-main input[type="text"],
body .site-main input[type="email"],
body .site-main input[type="search"],
body .site-main input[type="url"],
body .site-main input[type="tel"],
body .site-main textarea,
body .site-main select {
    background: #2A2A2A !important;
    color: #F5F0E6 !important;
    border-color: #333 !important;
}

body .site-main input::placeholder,
body .site-main textarea::placeholder {
    color: #9A9A9A !important;
}

body .site-main input[type="submit"],
body .site-main button[type="submit"] {
    background: #C8A84E !important;
    color: #0D0D0D !important;
    border: none !important;
}

/* Gutenberg blocks on pages */
body .site-main .wp-block-group,
body .site-main .wp-block-column,
body .site-main .wp-block-columns,
body .site-main .wp-block-cover__inner-container {
    color: #F5F0E6 !important;
}

/* Entry hero / page title area */
body .entry-hero,
body .entry-hero .entry-hero-container-inner,
body .page-hero-section {
    background: #1A1A1A !important;
}

/* ── Light mode: revert pages to normal ── */
[data-theme="light"] body .site,
[data-theme="light"] body .content-bg,
[data-theme="light"] body.content-style-boxed .site,
[data-theme="light"] body .site-main,
[data-theme="light"] body .site-main .content-area,
[data-theme="light"] body .site-main .content-container,
[data-theme="light"] body .site-main .entry-content,
[data-theme="light"] body .entry-hero-container-inner {
    background: #FDFBF5 !important;
    color: #1A1A1A !important;
}
[data-theme="light"] body.content-style-boxed .site-main .entry-content-wrap {
    background: #FFFFFF !important;
}
[data-theme="light"] body .site-main .entry.single-entry {
    background: #FFFFFF !important;
}
[data-theme="light"] body .site-main h1,
[data-theme="light"] body .site-main h2,
[data-theme="light"] body .site-main h3,
[data-theme="light"] body .site-main h4,
[data-theme="light"] body .site-main p,
[data-theme="light"] body .site-main li,
[data-theme="light"] body .site-main span,
[data-theme="light"] body .site-main div,
[data-theme="light"] body .site-main label,
[data-theme="light"] body .site-main .entry-title,
[data-theme="light"] body .site-main .wp-block-heading {
    color: #1A1A1A !important;
}
[data-theme="light"] body .site-main a:not([class*="mkp-"]) {
    color: #A6882D !important;
}
[data-theme="light"] body .entry-hero,
[data-theme="light"] body .entry-hero .entry-hero-container-inner {
    background: #F5F0E6 !important;
}
[data-theme="light"] body .site-main input[type="text"],
[data-theme="light"] body .site-main input[type="email"],
[data-theme="light"] body .site-main textarea,
[data-theme="light"] body .site-main select {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    border-color: #E5E1D5 !important;
}

/* =============================================
   LIGHT MODE
   ============================================= */
[data-theme="light"] {
    --mkp-black: #FDFBF5;
    --mkp-surface: #FFFFFF;
    --mkp-surface-alt: #F5F0E6;
    --mkp-text: #1A1A1A;
    --mkp-text-muted: #6B7280;
    --mkp-border: #E5E1D5;
}

[data-theme="light"] .mkp-topbar { background: #1A1A1A; }
[data-theme="light"] .mkp-navbar { background: #1A1A1A; }
[data-theme="light"] .mkp-navbar__link { color: #F5F0E6; }
[data-theme="light"] .mkp-hero__content { background: #1A1A1A; }
[data-theme="light"] .mkp-hero__title a { color: #F5F0E6; }
[data-theme="light"] .mkp-hero__excerpt { color: #9A9A9A; }
[data-theme="light"] .mkp-hero__meta { color: #9A9A9A; }
[data-theme="light"] .mkp-hero__content-cat { color: var(--mkp-gold); }
[data-theme="light"] .mkp-footer { background: #1A1A1A; }
[data-theme="light"] .mkp-footer__about-text { color: #9A9A9A; }
[data-theme="light"] .mkp-footer__links a { color: #9A9A9A; }
[data-theme="light"] .mkp-footer__copyright { background: #111; color: #9A9A9A; }
[data-theme="light"] .mkp-mobile-menu { background: #FDFBF5; }
[data-theme="light"] .mkp-mobile-menu__header { border-color: var(--mkp-gold); }

/* =============================================
   RESPONSIVE — Tablet (max-width: 991px)
   ============================================= */
@media (max-width: 991px) {
    .mkp-navbar__links { display: none; }
    .mkp-navbar__hamburger { display: flex; }

    .mkp-mega { display: none !important; }

    .mkp-logobar__dates { display: none; }
    .mkp-logobar__logo { position: static; transform: none; }

    .mkp-hero { height: auto; }
    .mkp-hero__slide {
        grid-template-columns: 1fr;
        position: relative;
    }
    .mkp-hero__slide:not(.active) {
        position: absolute;
    }
    .mkp-hero__image { aspect-ratio: 16/9; }
    .mkp-hero__content {
        padding: 24px;
        border-right: none;
        border-top: 3px solid var(--mkp-gold);
    }
    .mkp-hero__title { font-size: 1.5rem; }
    .mkp-hero__dots { left: 50%; bottom: auto; position: relative; margin-top: 16px; justify-content: center; }
    .mkp-hero__arrows { left: 50%; transform: translateX(-50%); bottom: auto; position: relative; margin-top: 8px; justify-content: center; }
    .mkp-hero__progress { right: 0; left: 0; }

    .mkp-mosaic__grid { grid-template-columns: repeat(2, 1fr); }
    .mkp-mosaic__card--large { grid-column: span 1; }

    .mkp-latest__grid { grid-template-columns: repeat(2, 1fr); }
    .mkp-archive__grid { grid-template-columns: repeat(2, 1fr); }

    .mkp-single__grid { grid-template-columns: 1fr; }
    .mkp-single__related-grid { grid-template-columns: repeat(2, 1fr); }

    .mkp-footer__grid { grid-template-columns: 1fr; text-align: center; }
    .mkp-footer__social { justify-content: center; }
    .mkp-footer__about-logo { display: flex; justify-content: center; }
}

/* =============================================
   RESPONSIVE — Mobile (max-width: 767px)
   ============================================= */
@media (max-width: 767px) {
    .mkp-container { padding: 0 16px; }

    .mkp-topbar { height: 34px; }
    .mkp-topbar__links { display: none; }
    .mkp-ticker__label { font-size: 0.75rem; padding: 3px 12px 3px 10px; }
    .mkp-ticker__item { font-size: 0.75rem; padding: 0 16px; }

    .mkp-logobar__logo img { height: 40px; }
    .mkp-logobar__weather { display: none; }

    .mkp-hero__content { padding: 20px 16px; }
    .mkp-hero__title { font-size: 1.25rem; }
    .mkp-hero__excerpt { font-size: 0.875rem; -webkit-line-clamp: 2; }
    .mkp-hero__btn { padding: 8px 20px; font-size: 0.875rem; }

    .mkp-mosaic__grid { grid-template-columns: 1fr 1fr; }

    .mkp-trending__tab { padding: 10px 16px; font-size: 0.875rem; }
    .mkp-trending__rank { font-size: 1.5rem; min-width: 32px; }
    .mkp-trending__thumb { width: 60px; height: 60px; }

    .mkp-latest__grid { grid-template-columns: 1fr; }
    .mkp-archive__grid { grid-template-columns: 1fr; }

    .mkp-single__content h1 { font-size: 1.5rem; }
    .mkp-single__related-grid { grid-template-columns: 1fr; }

    .mkp-fab { bottom: 16px; left: 16px; }
    .mkp-fab__btn { width: 38px; height: 38px; }

    .mkp-whatsapp { bottom: 16px; right: 16px; }
    .mkp-whatsapp__btn span { display: none; }
    .mkp-whatsapp__btn { padding: 12px; border-radius: 50%; }

    .mkp-footer-cta { clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%); padding: 48px 0 24px; }
    .mkp-footer-cta__inner h3 { font-size: 1.25rem; }
}

/* =============================================
   RESPONSIVE — Small Mobile (max-width: 575px)
   ============================================= */
@media (max-width: 575px) {
    .mkp-mosaic__grid { grid-template-columns: 1fr; }
    .mkp-mosaic__card--large { aspect-ratio: 16/9; }
    .mkp-mosaic__card:not(.mkp-mosaic__card--large) { aspect-ratio: 16/9; }

    .mkp-mobile-menu { width: 100%; max-width: 100%; }

    .mkp-dark-toggle__label-dark,
    .mkp-dark-toggle__label-light { display: none; }
}

/* =============================================================================
   R1 OVERLAY FLATTENING — titles moved off images (no text-on-image)
   ============================================================================= */
.mkp-mega__featured, .mkp-mosaic__card {
    display: flex !important;
    flex-direction: column !important;
    aspect-ratio: auto !important;
    background: var(--mkp-white, #fff) !important;
    height: auto !important;
}
.mkp-mega__featured > img, .mkp-mosaic__card > img {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
}
.mkp-mega__featured-title, .mkp-mosaic__overlay {
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    padding: 0.85rem 1rem 1rem !important;
}
.mkp-mosaic__title, .mkp-mega__featured-title,
.mkp-mosaic__title a, .mkp-mega__featured-title a {
    color: var(--mkp-text-heading, #111827) !important;
    text-shadow: none !important;
}
.mkp-mosaic__date {
    color: var(--mkp-text-muted, #6B7280) !important;
}
.mkp-mosaic__badge {
    position: absolute !important;
    top: 12px !important;
    inset-inline-start: 12px !important;
    z-index: 2 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


/* === HOMEPAGE 3:2 (1200x800) IMAGE FIX — added 2026-07-09 — delete this block to revert === */
/* Forces every homepage post-featured-image container to 3:2 so the baked-in    */
/* logo (top) + headline (bottom) of the 1200x800 source stop getting cropped.   */
/* Scoped to body.home; safe to append at end of style.css. Trending thumbs are  */
/* deliberately excluded (WP 'thumbnail' size = 150x150 hard-crop, see risks).    */

/* 1. HERO SLIDER (.mkp-hero__image is a div wrapping an <img>).
      The desktop split-screen pins the image to a fixed 520px height, which
      defeats aspect-ratio, so neutralize that height and let the active slide
      drive layout. */
body.home .mkp-hero { height: auto !important; min-height: 0 !important; }
body.home .mkp-hero__slide.active { position: relative !important; }
body.home .mkp-hero__image {
    aspect-ratio: 3 / 2 !important; display: block !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start;
}
body.home .mkp-hero__image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* 2. CATEGORY MOSAIC — the R1 flattening block forces the child <img> to 16/9
      with !important, so we must override the img itself (both large + small). */
body.home .mkp-mosaic__card > img {
    aspect-ratio: 3 / 2 !important; display: block !important;
    object-fit: cover;
    width: 100% !important;
    height: auto !important;
}

/* 3. EDITOR'S PICKS RIBBON (.mkp-ribbon__card-img = wrapper div with img). */
body.home .mkp-ribbon__card-img { aspect-ratio: 3 / 2 !important; display: block !important; }
body.home .mkp-ribbon__card-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* 4. LATEST NEWS GRID (.mkp-card__img = wrapper <a> with img; homepage only). */
body.home .mkp-card__img { aspect-ratio: 3 / 2 !important; display: block !important; }
body.home .mkp-card__img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* 5. MEGA-MENU FEATURED (header dropdown; homepage only). R1 block forces the
      child <img> to 16/9 with !important — override the img. */
body.home .mkp-mega__featured > img {
    aspect-ratio: 3 / 2 !important; display: block !important;
    object-fit: cover;
    width: 100% !important;
    height: auto !important;
}

/* NOTE: .mkp-trending__thumb intentionally NOT touched — see risks. */
/* === END HOMEPAGE 3:2 (1200x800) IMAGE FIX === */