/*
 * MISRYOUM News — modern front-end layer.
 * Kept separate from the structural and responsive stylesheets so updates
 * remain maintainable and existing layout choices continue to work.
 */

:root {
    --misr-surface: #fff;
    --misr-surface-soft: #f7f8fa;
    --misr-border: #e6e9ee;
    --misr-text: #161a20;
    --misr-muted: #737d89;
    --misr-shadow: 0 8px 28px rgba(18, 28, 42, .07);
    --misr-shadow-hover: 0 14px 34px rgba(18, 28, 42, .11);
    --misr-ease: 180ms ease;
}

html {
    scroll-padding-top: 90px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    color: var(--misr-text);
    background: var(--site-bg, #f7f7f8);
    font-family: var(--font-body, Tahoma, Arial, sans-serif);
    font-size: var(--body-font-size, 16px);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(var(--accent-rgb, 181, 9, 32), .42);
    outline-offset: 3px;
}

/* The top bar is intentionally reserved for the date only. */
.topbar {
    min-height: 34px;
    color: #f8fafc;
    background: #171a20;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 11px;
    letter-spacing: .01em;
}

.topbar-inner {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

.topbar-date {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: rtl;
}

.site-header {
    background: var(--misr-surface);
    border-bottom: 1px solid var(--misr-border);
    box-shadow: 0 3px 16px rgba(16, 24, 40, .045);
}

.site-header.header-layout-4 {
    color: #fff;
    background: #17191d;
    border-bottom: 3px solid var(--accent);
}

.header-inner {
    min-height: 86px;
    gap: clamp(14px, 2.2vw, 30px);
}

.site-branding {
    flex-shrink: 0;
}

.misr-logo-link,
.site-branding .custom-logo-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.misr-logo,
.site-branding .custom-logo {
    max-height: var(--logo-height, 70px);
    width: auto;
    object-fit: contain;
}

.primary-menu {
    gap: clamp(13px, 2vw, 28px);
}

.primary-menu > li > a {
    position: relative;
    padding-block: 27px;
    color: inherit;
    font-size: var(--nav-font-size, 14px);
    font-weight: 800;
    transition: color var(--misr-ease);
}

.primary-menu > li > a::after {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
    height: 2px;
    content: "";
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--misr-ease);
}

.primary-menu > li:hover > a::after,
.primary-menu > li:focus-within > a::after,
.primary-menu > li.current-menu-item > a::after,
.primary-menu > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}

.primary-menu .sub-menu {
    border: 1px solid var(--misr-border);
    border-radius: 0 0 var(--radius, 0) var(--radius, 0);
    box-shadow: var(--misr-shadow);
}

.primary-menu .sub-menu a {
    transition: color var(--misr-ease), background-color var(--misr-ease);
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible {
    color: var(--accent);
    background: var(--misr-surface-soft);
}

.header-search {
    border-color: var(--misr-border);
    transition: color var(--misr-ease), border-color var(--misr-ease), background-color var(--misr-ease);
}

.header-search:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 181, 9, 32), .045);
}

.mobile-menu-toggle {
    transition: border-color var(--misr-ease), background-color var(--misr-ease);
}

.mobile-menu-toggle:hover {
    border-color: var(--accent);
    background: var(--misr-surface-soft);
}

.breaking-bar {
    box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
}

.news-card,
.misr-latest-card,
.widget,
.archive-header,
.category-heading,
.single-article,
.page-article {
    border-color: var(--misr-border);
    border-radius: var(--radius, 0);
}

.news-card,
.misr-latest-card {
    background: var(--card-bg, #fff);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .035);
    transition: box-shadow var(--misr-ease), transform var(--misr-ease), border-color var(--misr-ease);
}

.news-card:hover,
.misr-latest-card:hover {
    border-color: rgba(var(--accent-rgb, 181, 9, 32), .24);
    box-shadow: var(--misr-shadow-hover);
}

.news-card h3,
.misr-latest-card h3,
.hero-title {
    font-family: var(--font-headings, var(--font-body, Tahoma, Arial, sans-serif));
    letter-spacing: -.015em;
}

.section-heading {
    border-bottom-color: var(--accent);
}

.section-heading h2,
.misr-latest-heading h2,
.widget-title,
.footer-widget-title {
    font-family: var(--font-headings, var(--font-body, Tahoma, Arial, sans-serif));
}

.article-header h1,
.misr-article-heading h1 {
    font-family: var(--font-headings, var(--font-body, Tahoma, Arial, sans-serif));
    letter-spacing: -.025em;
    text-wrap: pretty;
}

.article-content.entry-content {
    color: #29313b;
    font-size: var(--article-body-size, 19px);
    line-height: var(--article-line-height, 2.05);
    overflow-wrap: anywhere;
}

.article-content.entry-content img,
.article-featured-image img {
    border-radius: var(--radius, 0);
}

.pagination .page-numbers,
.posts-navigation .nav-links a {
    border-radius: max(0px, var(--radius, 0));
    transition: color var(--misr-ease), background-color var(--misr-ease), border-color var(--misr-ease);
}

.pagination .page-numbers:not(.current):hover,
.posts-navigation .nav-links a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 800px) {
    .topbar-inner {
        justify-content: flex-start;
        min-height: 30px;
    }

    .topbar-date {
        min-height: 30px;
    }

    .header-inner {
        min-height: 70px;
    }

    .primary-navigation {
        border-bottom: 1px solid var(--misr-border);
    }

    .primary-menu > li > a::after {
        display: none;
    }
}

@media (max-width: 560px) {
    .topbar,
    .topbar-date {
        font-size: 10px;
    }

    .news-card,
    .misr-latest-card {
        box-shadow: 0 1px 5px rgba(16, 24, 40, .035);
    }

    .article-content.entry-content {
        font-size: clamp(16px, 4.4vw, var(--article-body-size, 19px));
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*
 * Date-only topbar compatibility.
 * Older releases allowed a secondary menu and social links beside the date.
 * Cached pages or child-theme header fragments can retain that old markup.
 * Hide those legacy nodes without hiding the date itself.
 */
.topbar .menu,
.topbar .menu-top-container,
.topbar nav,
.topbar .social-top,
.topbar .social-links,
.topbar .top-links > a,
.topbar .top-links > nav,
.topbar .top-links > ul,
.topbar .top-links > div:not(.topbar-date) {
    display: none !important;
}

.topbar .topbar-inner,
.topbar .misr-date-only-inner {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0 !important;
    direction: rtl;
}

.topbar .topbar-date,
.topbar .top-links > span,
.topbar .top-links > time {
    display: inline-flex;
    align-items: center;
}

.topbar .top-links > :not(span):not(time):not(.topbar-date) {
    display: none !important;
}



/*
 * 1.6.2 — Keep the date bar visually independent from the primary navigation.
 * The source HTML contains only <time> inside #misr-date-only-topbar.
 * These stacking/layout guards prevent stale or over-broad cached CSS from
 * allowing a header menu item to overlap the date bar on home/archive pages.
 */
#misr-date-only-topbar,
.topbar.misr-date-only-topbar {
    position: relative !important;
    z-index: 2147483000 !important;
    isolation: isolate;
    display: block;
    width: 100%;
    min-height: 34px;
    overflow: hidden;
}

#misr-date-only-topbar::before,
#misr-date-only-topbar::after {
    content: none !important;
    display: none !important;
}

#misr-date-only-topbar > .misr-date-only-inner {
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    min-height: 34px;
    gap: 0 !important;
    direction: rtl;
}

#misr-date-only-topbar .topbar-date {
    position: static !important;
    display: inline-flex !important;
    margin: 0;
    padding: 0;
    transform: none !important;
}

.site-header {
    position: relative;
    z-index: 30;
    isolation: isolate;
}

@media (min-width: 801px) {
    .site-header .header-inner {
        position: relative;
    }

    .site-header .primary-navigation {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        transform: none !important;
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 800px) {
    #misr-date-only-topbar,
    #misr-date-only-topbar > .misr-date-only-inner {
        min-height: 30px;
    }
}

/* Footer template library — lightweight, responsive and RTL-first. */
.site-footer{--footer-accent:var(--accent,#b50920);position:relative;overflow:hidden}
.site-footer .footer-modern-top{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:22px;min-height:76px}
.footer-brand,.footer-site-name{display:inline-flex;align-items:center;gap:10px;color:inherit!important;text-decoration:none;font-size:20px;font-weight:900;white-space:nowrap}
.footer-brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--footer-accent);color:#fff;font-size:18px}
.footer-inline-nav,.footer-inline-nav ul{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,24px);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.footer-inline-nav a{color:inherit;text-decoration:none;font-size:13px;font-weight:700;opacity:.86}
.footer-inline-nav a:hover{color:var(--footer-accent);opacity:1}
.footer-social-icons{display:flex;align-items:center;gap:8px}
.footer-social-icons a{display:grid;place-items:center;width:36px;height:36px;border:1px solid currentColor;border-radius:50%;color:inherit;text-decoration:none;opacity:.8;transition:background .18s,color .18s,transform .18s}
.footer-social-icons a:hover{background:var(--footer-accent);border-color:var(--footer-accent);color:#fff;opacity:1;transform:translateY(-2px)}
.footer-social-icons a span{font-size:15px;font-weight:800;line-height:1}
.footer-modern-about{padding:0 0 18px;color:inherit;opacity:.7;font-size:13px;line-height:1.8}
.footer-template-compact .footer-modern-top{padding-block:13px;min-height:60px}
.footer-template-compact .footer-brand{font-size:17px}
.footer-template-compact .footer-brand-mark{width:32px;height:32px;border-radius:9px}
.footer-template-compact .footer-social-icons a{width:31px;height:31px}
.footer-template-modern-bar .footer-bottom{border-top:1px solid rgba(127,127,127,.2)}
.footer-template-social-focus .footer-grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
.footer-template-social-focus .footer-about{grid-column:1/-1;text-align:center;display:flex;flex-direction:column;align-items:center}
.footer-template-social-focus .footer-about p{max-width:620px}
.footer-template-social-focus .footer-social-icons{justify-content:center;margin-top:8px}
.footer-template-premium-dark{background:#101820!important;color:#f4f7fa!important}
.footer-template-premium-dark .footer-grid{padding-top:52px;padding-bottom:44px}
.footer-template-premium-dark .footer-bottom{background:#0a1118;border-top:1px solid rgba(255,255,255,.1)}
.footer-template-premium-dark .footer-grid h3{position:relative;padding-bottom:12px}
.footer-template-premium-dark .footer-grid h3:after{content:"";position:absolute;right:0;bottom:0;width:32px;height:2px;background:var(--footer-accent)}
.footer-template-premium-dark .footer-site-name{font-size:25px}
.footer-template-editorial .footer-grid{padding-top:42px;padding-bottom:36px}
.footer-template-editorial .footer-latest li{padding-block:5px;border-bottom:1px solid rgba(127,127,127,.16)}
.footer-size-small .footer-grid{padding-top:22px;padding-bottom:20px;gap:22px}
.footer-size-small .footer-bottom-inner{padding-block:11px}
.footer-size-medium .footer-grid{padding-top:36px;padding-bottom:32px}
.footer-size-large .footer-grid{padding-top:58px;padding-bottom:52px;gap:36px}
.footer-size-large .footer-grid p{max-width:420px}
.site-footer.footer-style-light .footer-brand,.site-footer.footer-style-light .footer-inline-nav a{color:#202630!important}
.site-footer.footer-style-light .footer-modern-about{color:#4d5560}
.site-footer.footer-style-light .footer-social-icons a{border-color:rgba(0,0,0,.2)}
.site-footer.footer-style-accent .footer-brand-mark{background:#fff;color:var(--footer-accent)}
@media(max-width:800px){.site-footer .footer-modern-top{flex-wrap:wrap;justify-content:center;text-align:center;gap:14px;padding-block:20px}.footer-inline-nav{order:3;width:100%}.footer-modern-about{text-align:center}.footer-template-social-focus .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.site-footer .footer-modern-top{gap:12px}.footer-brand{font-size:18px}.footer-inline-nav,.footer-inline-nav ul{gap:9px 15px}.footer-inline-nav a{font-size:12px}.footer-social-icons{justify-content:center}.footer-template-social-focus .footer-grid{grid-template-columns:1fr}.footer-template-social-focus .footer-about{grid-column:auto}.footer-size-large .footer-grid{padding-top:32px;padding-bottom:28px;gap:20px}.footer-bottom-inner{align-items:center;text-align:center}}