/*
 * CTX News — AIDEN publisher-php design (Oct 2026)
 * The look of the CTX SmartMag WordPress theme (10.4.3-ctx) for publisher-php sites:
 * black header with a wrapping menu row, underlined uppercase section headings, white
 * page, black footer. Article/list/sidebar structure comes from EVS Grid's rules.
 * Loaded after the SmartMag base styles; every rule is scoped to body.design-ctx so the
 * file is inert on any page that does not opt in.
 */

body.design-ctx {
    --ctx-main: #2ab391;
    --ctx-main-dark: #208f74;
    --ctx-text: #161616;
    --ctx-muted: #595959;
    --ctx-meta: #8a8a8a;
    --ctx-line: #e8e8e8;
    --ctx-soft: #f7f7f7;
    --ctx-card: #fff;
    --ctx-bg: #fff;
    --ctx-footer: #000;
    --ctx-width: 1200px;
    font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ctx-text);
    background: var(--ctx-bg);
}

body.design-ctx.scheme-dark {
    --ctx-text: #f2f2f2;
    --ctx-muted: #c4c4c4;
    --ctx-meta: #9a9a9a;
    --ctx-line: #2b2b2b;
    --ctx-soft: #171717;
    --ctx-card: #121212;
    --ctx-bg: #0b0b0b;
}

body.design-ctx h1,
body.design-ctx h2,
body.design-ctx h3,
body.design-ctx h4,
body.design-ctx h5,
body.design-ctx .post-title,
body.design-ctx .post-title a {
    font-family: "Public Sans", system-ui, sans-serif;
    color: var(--ctx-text);
}

body.design-ctx a { color: inherit; }

body.design-ctx a:hover { color: var(--ctx-main); }

body.design-ctx .container,
body.design-ctx .wrap {
    max-width: var(--ctx-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* ---------- Header: black bar, ONE row — logo · limited menu (+ "More") · buttons ----------
   ID-level selectors + !important where needed: the optional smartmag-modern.css (modern_* site
   flags) forces its own flex header with !important rules. ctx-news.js keeps the menu to one
   line and moves the rest into "More"; without JS the first 7 items show. */
body.design-ctx #smart-head .smart-head-main {
    background: #000;
    border-bottom: 0;
    box-shadow: none;
}
body.design-ctx #smart-head .inner.wrap {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav actions";
    align-items: center !important;
    column-gap: 28px;
    min-height: 72px;
    padding-top: 0;
    padding-bottom: 0;
}
body.design-ctx #smart-head .inner.wrap > .items.items-left { grid-area: logo; min-width: 0; }
body.design-ctx #smart-head .inner.wrap > .items.items-center {
    grid-area: nav;
    display: block !important;
    min-width: 0 !important;
    margin: 0;
    border: 0;
}
body.design-ctx #smart-head .nav-wrap { overflow: visible; }
body.design-ctx #smart-head .navigation-main ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: visible;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.design-ctx #smart-head .navigation-main > ul { overflow: hidden; }   /* measured by ctx-news.js */
body.design-ctx #smart-head .navigation-main > ul.ctx-nav-ready { overflow: visible; }
body.design-ctx #smart-head .navigation-main > ul:not(.ctx-nav-ready) > li:nth-child(n+8) { display: none; }
body.design-ctx #smart-head .navigation-main ul li { flex: 0 0 auto; position: relative; }
body.design-ctx #smart-head .navigation-main ul li a {
    display: block;
    white-space: nowrap;
    padding: 0 12px !important;
    line-height: 72px;
    font-size: 14px !important;
    font-weight: 600;
    color: #fff;
}
body.design-ctx #smart-head .navigation-main > ul > li:first-child > a { padding-left: 0 !important; }
body.design-ctx #smart-head .navigation-main li.current-menu-item > a,
body.design-ctx #smart-head .navigation-main li a:hover { color: var(--ctx-main); }
/* "More" dropdown */
body.design-ctx #smart-head li.ctx-more > a::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
}
body.design-ctx #smart-head li.ctx-more > ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto !important;   /* the base .sub-menu sets left:0, which pushed the panel off screen */
    z-index: 1000;
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px 0;
    flex-direction: column;
    background: #fff;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
body.design-ctx #smart-head li.ctx-more:hover > ul,
body.design-ctx #smart-head li.ctx-more:focus-within > ul,
body.design-ctx #smart-head li.ctx-more.open > ul { display: flex; }
body.design-ctx #smart-head li.ctx-more > a,
body.design-ctx #smart-head li.ctx-more > a:hover,
body.design-ctx #smart-head li.ctx-more.open > a { background: transparent !important; }
body.design-ctx #smart-head li.ctx-more > ul li { width: 100%; text-align: left; }
body.design-ctx #smart-head li.ctx-more > ul li a {
    text-align: left;
    padding: 9px 18px !important;
    line-height: 1.4;
    font-size: 14px !important;
    color: #161616;
}
body.design-ctx #smart-head li.ctx-more > ul li a:hover { color: var(--ctx-main); background: #f5f5f5; }
/* Buttons on the right: room to breathe, one size, a divider after the social links */
body.design-ctx #smart-head .inner.wrap > .items.items-right {
    grid-area: actions;
    display: flex !important;
    align-items: center;
    gap: 6px;
}
body.design-ctx #smart-head .items-right .spc-social { display: flex; gap: 6px; margin-right: 8px; padding-right: 12px; border-right: 1px solid rgba(255, 255, 255, .18); }
body.design-ctx #smart-head .items-right .spc-social .link,
body.design-ctx #smart-head .items-right .search-icon,
body.design-ctx #smart-head .items-right .scheme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
body.design-ctx #smart-head .items-right .spc-social .link:hover,
body.design-ctx #smart-head .items-right .search-icon:hover,
body.design-ctx #smart-head .items-right .scheme-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
body.design-ctx #smart-head .items-right select { margin: 0 6px; }
body.design-ctx #smart-head .items-right a,
body.design-ctx #smart-head .items-right button,
body.design-ctx #smart-head .items-right .tsi { color: #fff; }
body.design-ctx .smart-head .hamburger .bar { background: #fff !important; }
/* Logo: an image with its own white background sits in a deliberate white tile */
body.design-ctx .smart-head-logo a { display: inline-flex; align-items: center; }
body.design-ctx #smart-head .smart-head-logo .logo-main,
body.design-ctx #smart-head-mobile .smart-head-logo img { background: #fff; border-radius: 6px; padding: 5px 9px; box-sizing: content-box; }
body.design-ctx #smart-head .smart-head-logo img { display: block; max-height: 40px !important; width: auto; height: auto; }
body.design-ctx #smart-head-mobile .smart-head-logo img { max-height: 30px !important; }
body.design-ctx .smart-head-logo .text-logo-inner { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
body.design-ctx .logo-dark { display: none !important; }
/* Narrower desktops: drop the social links before the menu gets squeezed */
@media (max-width: 1180px) {
    body.design-ctx #smart-head .items-right .spc-social { display: none; }
}
/* Mobile header: black, white icons */
body.design-ctx #smart-head-mobile,
body.design-ctx #smart-head-mobile.smart-head-mobile,
body.design-ctx #smart-head-mobile .smart-head-main { background: #000 !important; border-bottom-color: #000 !important; }
/* white only on the black bar — NOT inside the menu panel (.mobile-nav-wrap is white) */
body.design-ctx #smart-head-mobile .smart-head-row a,
body.design-ctx #smart-head-mobile .hamburger,
body.design-ctx #smart-head-mobile .search-icon,
body.design-ctx #smart-head-mobile .smart-head-row .tsi { color: #fff !important; }
/* Mobile menu panel */
body.design-ctx #smart-head-mobile .mobile-nav-wrap { background: #fff !important; overflow-y: auto; }
body.design-ctx #smart-head-mobile .mobile-nav-wrap ul { margin: 0; padding: 6px 0 24px; list-style: none; }
body.design-ctx #smart-head-mobile .mobile-nav-wrap li { border-bottom: 1px solid var(--ctx-line); }
body.design-ctx #smart-head-mobile .mobile-nav-wrap li a {
    display: block;
    padding: 15px 20px;
    color: #161616 !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
body.design-ctx #smart-head-mobile .mobile-nav-wrap li a:active,
body.design-ctx #smart-head-mobile .mobile-nav-wrap li a:hover { color: var(--ctx-main) !important; background: #f7f7f7; }

/* ---------- Section headings: uppercase, thin rule, accent underline (CTX SmartMag) ---------- */
body.design-ctx .hpn-head,
body.design-ctx .main-content .block-head,
body.design-ctx .home-section .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ctx-line);
}
body.design-ctx .hpn-head h2,
body.design-ctx .main-content .block-head .heading,
body.design-ctx .home-section .section-title {
    position: relative;
    margin: 0;
    padding: 0 0 8px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ctx-text);
}
body.design-ctx .hpn-head h2::after,
body.design-ctx .main-content .block-head .heading::after,
body.design-ctx .home-section .section-title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--ctx-main);
}
body.design-ctx .block-head .heading .color { color: inherit; }
body.design-ctx .hpn-head a.hp-va {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ctx-main);
    text-decoration: none;
}

/* Sidebar headings: same underline style as the page sections */
body.design-ctx .sidebar .block-head,
body.design-ctx .sidebar .widget-title {
    display: block;
    position: relative;
    margin: 0 0 16px;
    padding: 0 0 8px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ctx-line);
}
body.design-ctx .sidebar .block-head .heading,
body.design-ctx .sidebar .widget-title,
body.design-ctx .sidebar .block-head .heading .color {
    margin: 0;
    color: var(--ctx-text);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
body.design-ctx .sidebar .block-head::after,
body.design-ctx .sidebar .widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 3px;
    background: var(--ctx-main);
}


/* The base lazy-load fade only marks an image "loaded" from a load listener, so an image that
   finished before the script ran (cached / repeated card) stayed invisible. Native lazy
   loading is enough here — never hide images. */
body.design-ctx img[loading="lazy"] { opacity: 1; }

/* ---------- Media ---------- */

body.design-ctx .ar-16x9 { aspect-ratio: 16 / 9; }

body.design-ctx .ar-3x2 { aspect-ratio: 3 / 2; }

body.design-ctx .ar-1x1 { aspect-ratio: 1 / 1; }

body.design-ctx .ar-4x3 { aspect-ratio: 4 / 3; }

/* ---------- Home: hero ---------- */

/* ---------- Home: picks (numbered) ---------- */

/* ---------- Home: list + overlay column ---------- */

/* Home categories section (Browse by Category) */

/* ---------- Sidebar small posts ---------- */
body.design-ctx .sidebar .small-post { display: flex; gap: 14px; margin-bottom: 16px; }

body.design-ctx .sidebar .small-post .media { flex: 0 0 105px; height: 70px; overflow: hidden; }

body.design-ctx .sidebar .small-post .media > a { display: block; height: 70px; padding: 0 !important; }

body.design-ctx .sidebar .small-post .media .img,
body.design-ctx .sidebar .small-post .media img { display: block; width: 105px; height: 70px; object-fit: cover; border-radius: 0; }

body.design-ctx .sidebar .img-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 105px; height: 70px;
    background: linear-gradient(135deg, var(--ctx-main) 0%, #0f5d4b 100%) !important;
    color: #fff; font-weight: 700; border-radius: 0 !important;
}

body.design-ctx .sidebar .small-post .post-title { font-size: 14px; font-weight: 600; line-height: 1.35; margin: 0 0 6px; }

body.design-ctx .sidebar .post-date { font-size: 11px; color: var(--ctx-meta); }

body.design-ctx .sidebar .tag-cloud a,
body.design-ctx .sidebar .tagcloud a {
    border: 1px solid var(--ctx-line);
    border-radius: 0;
    background: transparent;
    color: var(--ctx-text);
}

/* ---------- Article ---------- */
/* Ad containers can be injected straight into the article/sidebar flex row; give them their
   own full-width line so the two columns stay side by side. */
body.design-ctx .content-wrap.ts-row { display: flex; flex-wrap: wrap; }

body.design-ctx .content-wrap.ts-row > [class*="gam-"],
body.design-ctx .content-wrap.ts-row > [class*="ad-"] { flex: 0 0 100%; max-width: 100%; order: -1; }

body.design-ctx .content-wrap.ts-row > .main-content { order: 0; }

body.design-ctx .content-wrap.ts-row > .sidebar { order: 1; }

body.design-ctx .post-classic .post-header { margin: 0 0 18px; }

body.design-ctx .post-classic .post-header .post-title,
body.design-ctx .post-classic h1.post-title { font-size: 34px; font-weight: 700; line-height: 1.25; }

body.design-ctx .post-classic .featured-image { margin: 0 0 22px; }

body.design-ctx .post-classic .featured-image img { width: 100%; height: auto; display: block; }

body.design-ctx .post-content.entry-content {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ctx-text);
}

body.design-ctx .post-content.entry-content > p:first-child {
    padding: 18px 20px;
    border: 1px solid var(--ctx-line);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

body.design-ctx .related-posts > h3 { display: none; }

/* ---------- Category / tag lists (server-generated cards) ---------- */
body.design-ctx .archive-header { padding: 30px 0 10px; }

body.design-ctx .archive-header h1 { font-size: 30px; font-weight: 700; margin: 0 0 8px; }

body.design-ctx .posts-list { display: block !important; }

body.design-ctx .posts-list .article-card {
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 22px;
    margin: 0 0 24px;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
    transform: none !important;
}

body.design-ctx .posts-list .article-card:not(:has(.article-image)) { grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--ctx-line); padding-bottom: 18px; }

body.design-ctx .posts-list .article-image { height: auto !important; aspect-ratio: 3 / 2; }

body.design-ctx .posts-list .article-content { padding: 0 !important; }

body.design-ctx .posts-list .article-title { font-size: 21px !important; color: var(--ctx-text) !important; }

body.design-ctx .posts-list .article-excerpt { font-size: 14px !important; color: var(--ctx-muted) !important; }

body.design-ctx .posts-list #loadMoreBtn {
    background: var(--ctx-card) !important;
    color: var(--ctx-text) !important;
    border: 1px solid var(--ctx-line) !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------- Footer ---------- */
body.design-ctx .main-footer {
    margin-top: 40px;
    padding: 40px 0 34px;
    background: var(--ctx-footer);
    color: #bbb;
    text-align: center;
}

body.design-ctx .main-footer .footer-policy-links { border: 0; padding: 0; margin: 0 0 18px; }

body.design-ctx .main-footer .footer-policy-links a,
body.design-ctx .main-footer .footer-nav a {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
}

body.design-ctx .main-footer .copyright,
body.design-ctx .main-footer .copyright a { color: #9a9a9a; font-size: 12px; }

@media (max-width: 600px) {
body.design-ctx .posts-list .article-card { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }

body.design-ctx .posts-list .article-title { font-size: 16px !important; }

body.design-ctx .post-classic .post-header .post-title,
body.design-ctx .post-classic h1.post-title { font-size: 26px; }
}

/* ---------- Icons: the base theme falls back to emoji (🔍 ☀️ 🌙) and bare letters for social
   links. CTX uses monochrome line icons that take the text colour. ---------- */
body.design-ctx .tsi::before { content: "" !important; display: inline-block; width: 18px; height: 18px; vertical-align: middle; background-color: currentColor; -webkit-mask: var(--ctx-icon) center / contain no-repeat; mask: var(--ctx-icon) center / contain no-repeat; }
body.design-ctx .tsi-search { --ctx-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%2710.5%27%20cy%3D%2710.5%27%20r%3D%276.5%27%2F%3E%3Cpath%20d%3D%27M15.5%2015.5%2021%2021%27%2F%3E%3C%2Fsvg%3E"); }
body.design-ctx .tsi-sun { --ctx-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4%27%2F%3E%3C%2Fsvg%3E"); }
body.design-ctx .tsi-moon { --ctx-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M20.5%2014.6A8.5%208.5%200%200%201%209.4%203.5a8.5%208.5%200%201%200%2011.1%2011.1z%27%2F%3E%3C%2Fsvg%3E"); }
body.design-ctx .tsi-facebook { --ctx-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M13.5%2021v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5%201.5-1.5h1.6V4.4c-.3%200-1.2-.1-2.3-.1-2.3%200-3.8%201.4-3.8%203.9v2.3H7.9v3h2.6V21h3z%27%2F%3E%3C%2Fsvg%3E"); }
body.design-ctx .tsi-twitter { --ctx-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M17.8%203h3.1l-6.8%207.8%208%2010.2h-6.3l-4.9-6.4L5.3%2021H2.2l7.3-8.3L1.8%203h6.4l4.4%205.9L17.8%203zm-1.1%2016.2h1.7L7.4%204.7H5.5l11.2%2014.5z%27%2F%3E%3C%2Fsvg%3E"); }
body.design-ctx .tsi-instagram { --ctx-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%3E%3Crect%20x%3D%273.5%27%20y%3D%273.5%27%20width%3D%2717%27%20height%3D%2717%27%20rx%3D%275%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2717.3%27%20cy%3D%276.7%27%20r%3D%271%27%20fill%3D%27%23000%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
body.design-ctx .tsi-linkedin { --ctx-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M4.98%203.5a2.5%202.5%200%201%201%200%205%202.5%202.5%200%200%201%200-5zM3%209.5h4v11H3v-11zm6.5%200h3.8v1.6c.6-1%201.9-1.9%203.9-1.9%204%200%204.8%202.6%204.8%206v5.3h-4v-4.7c0-1.2%200-2.7-1.7-2.7s-1.9%201.3-1.9%202.6v4.8h-4v-11z%27%2F%3E%3C%2Fsvg%3E"); }
body.design-ctx .tsi-youtube { --ctx-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M22%208.2c-.2-1.6-1-2.7-2.7-2.9C16.9%205%2012%205%2012%205s-4.9%200-7.3.3C3%205.5%202.2%206.6%202%208.2%201.8%209.4%201.8%2012%201.8%2012s0%202.6.2%203.8c.2%201.6%201%202.7%202.7%202.9C7.1%2019%2012%2019%2012%2019s4.9%200%207.3-.3c1.7-.2%202.5-1.3%202.7-2.9.2-1.2.2-3.8.2-3.8s0-2.6-.2-3.8zM10%2015V9l5.2%203L10%2015z%27%2F%3E%3C%2Fsvg%3E"); }
body.design-ctx .spc-social .tsi::before { width: 16px; height: 16px; }
/* sun/moon: show only the one that applies */
body.design-ctx .scheme-toggle .dark-icon { display: none; }
body.design-ctx.scheme-dark .scheme-toggle .dark-icon { display: inline-block; }
body.design-ctx.scheme-dark .scheme-toggle .light-icon { display: none; }

/* ---------- Small posts (sidebars, tag/category side lists): compact rows (image · title · date), like the home headlines.
   The base meta block is a flex column with a 20px bottom margin, which pushed every date far
   below its title and left large gaps between items. ---------- */
body.design-ctx .small-post {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--ctx-line);
}
body.design-ctx .small-post:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
body.design-ctx .small-post .media { flex: 0 0 96px; width: 96px; height: 64px; }
body.design-ctx .small-post .media > a,
body.design-ctx .small-post .media .img { width: 96px !important; height: 64px !important; border-radius: 4px; }
body.design-ctx .small-post .content { min-width: 0; }
body.design-ctx .small-post .post-meta { display: block !important; margin: 0 !important; }
body.design-ctx .small-post .post-title { font-size: 14px !important; font-weight: 700; line-height: 1.35 !important; margin: 0 0 4px; }
body.design-ctx .sidebar .post-date,
body.design-ctx .small-post .meta-below,
body.design-ctx .small-post time { font-size: 12px; color: var(--ctx-meta); margin: 0; }

/* ---------- 404 ---------- */
body.design-ctx .ctx-404 .error-404-content { max-width: 720px; margin: 56px auto 64px; text-align: center; }
body.design-ctx .ctx-404-code { margin: 0; font-size: 96px; font-weight: 800; line-height: 1; color: var(--ctx-main); letter-spacing: -.02em; }
body.design-ctx .ctx-404 .error-404-title { margin: 12px 0 10px; font-size: 30px; font-weight: 800; }
body.design-ctx .ctx-404 .error-404-text { margin: 0 auto 24px; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--ctx-muted); }
body.design-ctx .ctx-404 .error-404-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
body.design-ctx .ctx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border: 1px solid var(--ctx-line); border-radius: 6px; background: var(--ctx-card); color: var(--ctx-text); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
body.design-ctx .ctx-btn-primary { border-color: var(--ctx-main); background: var(--ctx-main); color: #fff; }
body.design-ctx .ctx-btn:hover { filter: brightness(.95); color: inherit; }
body.design-ctx .ctx-btn-primary:hover { color: #fff; }
body.design-ctx .ctx-404-search { display: flex; gap: 8px; max-width: 520px; margin: 0 auto 36px; }
body.design-ctx .ctx-404-search input { flex: 1; min-width: 0; min-height: 42px; padding: 0 14px; border: 1px solid var(--ctx-line); border-radius: 6px; font-size: 15px; background: var(--ctx-card); color: var(--ctx-text); }
body.design-ctx .ctx-404-cats h2 { margin: 0 0 14px; font-size: 15px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
body.design-ctx .ctx-404-cats ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.design-ctx .ctx-404-cats li a { display: inline-block; padding: 7px 14px; border: 1px solid var(--ctx-line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ctx-text); text-decoration: none; }
body.design-ctx .ctx-404-cats li a:hover { border-color: var(--ctx-main); color: var(--ctx-main); }
@media (max-width: 600px) {
    body.design-ctx .ctx-404-code { font-size: 72px; }
    body.design-ctx .ctx-404-search { flex-direction: column; }
}

/* ---------- Footer: on phones the category list is already in the menu — keep the footer to
   the policy links instead of a 16-line column. ---------- */
@media (max-width: 768px) {
    body.design-ctx .main-footer .footer-nav { display: none; }
}

/* ---------- Country selector: not shown in this design (country pages still work by URL) ---------- */
body.design-ctx .geo-country-selector,
body.design-ctx #geo-country-select,
body.design-ctx .geo-selector-label { display: none !important; }

/* ---------- Related posts: heading on top, three equal cards, card-sized titles.
   .related-grid is a grid in the base theme, which put the heading in a column of its own. ---------- */
body.design-ctx .related-posts { margin: 40px 0 0; }
body.design-ctx .related-posts > h3 { display: none; }
body.design-ctx .related-posts .related-grid { display: block !important; }
body.design-ctx .related-posts .block-head { margin-bottom: 18px; }
body.design-ctx .related-posts .loop-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin: 0 !important;
}
body.design-ctx .related-posts .grid-post { margin: 0 !important; width: auto !important; max-width: none !important; }
body.design-ctx .related-posts .grid-post .media { margin: 0 0 10px; }
body.design-ctx .related-posts .grid-post .image-link { display: block; aspect-ratio: 3 / 2; border-radius: 5px; overflow: hidden; }
body.design-ctx .related-posts .grid-post .image-link .img { display: block; width: 100%; height: 100%; }
body.design-ctx .related-posts .post-meta { margin: 0 !important; }
body.design-ctx .related-posts .post-title { margin: 0 0 4px !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.35 !important; }
body.design-ctx .related-posts .post-title a { color: var(--ctx-text) !important; }
body.design-ctx .related-posts .post-title a:hover { color: var(--ctx-main) !important; }
body.design-ctx .related-posts .post-date { font-size: 12px; color: var(--ctx-meta); }
@media (max-width: 900px) {
    body.design-ctx .related-posts .loop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    body.design-ctx .related-posts .loop-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
}

/* ---------- Tables in articles: never wider than the column ---------- */
body.design-ctx .post-content table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; line-height: 1.5; }
body.design-ctx .post-content th,
body.design-ctx .post-content td { padding: 9px 12px; border-bottom: 1px solid var(--ctx-line); text-align: left; vertical-align: top; }
body.design-ctx .post-content thead th { background: var(--ctx-soft); font-weight: 700; }
/* a two-row "labels / values" table is shown as label | value pairs (ctx-news.js) */
body.design-ctx .post-content table.ctx-kv th { width: 38%; background: var(--ctx-soft); font-weight: 600; color: var(--ctx-text); }
/* anything still too wide scrolls inside the column instead of spilling into the sidebar */
body.design-ctx .post-content .ctx-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 22px; }
body.design-ctx .post-content .ctx-table-scroll > table { margin: 0; min-width: 560px; }

/* ---------- Sticky menu, NOT a sticky ad.
   The ad engine can place an ad "above the menu" (target .smart-head-row, position before) — that
   puts it INSIDE <header id="smart-head">, and the whole header is sticky, so the ad stayed pinned
   to the top of the screen while the page scrolled under it. And on phones the desktop header is
   display:none, which hid that ad entirely. The header box is dissolved (display: contents) so its
   children sit in the page flow: only the black menu row sticks, the ad scrolls away like content,
   and on phones the ad still shows (above the mobile header) while the desktop row stays hidden. ---------- */
body.design-ctx #smart-head,
body.design-ctx #smart-head.sticky-header { display: contents !important; position: static !important; }
body.design-ctx #smart-head > .smart-head-row.smart-head-main {
    position: sticky;
    top: 0;
    z-index: 1000;
}
body.design-ctx #smart-head > :not(.smart-head-row) { position: relative; z-index: 1; background: #fff; text-align: center; }
@media (max-width: 768px) {
    body.design-ctx #smart-head > .smart-head-row.smart-head-main { display: none !important; }
}


/* ==========================================================================
   Home — CTX news layout (ported from the CTX SmartMag WordPress theme 10.4.3-ctx)
   ========================================================================== */

CTX Homepage — news layout (10.4.2-ctx)
   ========================================================================== */

body.design-ctx .hpn { padding-top: 24px; }
body.design-ctx .hpn .hp-sec { margin-bottom: 36px; }


body.design-ctx .hpn h3 { margin: 0; font-weight: 700; line-height: 1.35; }
body.design-ctx .hpn h3 a { color: var(--ctx-text); text-decoration: none; }
body.design-ctx .hpn h3 a:hover { color: var(--ctx-main); }

body.design-ctx .hpn-badge {
    display: inline-block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ctx-main);
    text-decoration: none;
}
body.design-ctx .hpn-badge:hover { text-decoration: underline; }

body.design-ctx .hpn-t { display: block; margin-top: 4px; font-size: 12px; color: var(--ctx-meta); }
body.design-ctx .hpn-ex { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ctx-muted); }

/* 1. Top Stories */
body.design-ctx .hpn-top-g {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 24px;
}
body.design-ctx .hpn-lead {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    border-radius: 6px;
    overflow: hidden;
    background: #374151 center / cover no-repeat;
}
body.design-ctx .hpn-lead-noimg { min-height: 260px; }
body.design-ctx .hpn-lead-cover { position: absolute; inset: 0; z-index: 1; }
body.design-ctx .hpn-lead-c {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 70px 24px 22px;
    background: linear-gradient(to top, rgba(0, 0, 0, .88), rgba(0, 0, 0, .55) 60%, transparent);
    pointer-events: none;
}
body.design-ctx .hpn-lead-c a { pointer-events: auto; }
body.design-ctx .hpn-lead .hpn-badge { color: #fff; background: var(--ctx-main); padding: 3px 8px; border-radius: 2px; }
body.design-ctx .hpn-lead h3 { font-size: 26px; line-height: 1.25; }
body.design-ctx .hpn-lead h3 a,
body.design-ctx .hpn-lead h3 a:hover { color: #fff; }
body.design-ctx .hpn-lead .hpn-ex { color: rgba(255, 255, 255, .85); }
body.design-ctx .hpn-lead .hpn-t { color: rgba(255, 255, 255, .75); }

body.design-ctx .hpn-side { display: flex; flex-direction: column; }
body.design-ctx .hpn-side .hpn-row:first-child { padding-top: 0; }

/* Headline row (side list,
category blocks) */
body.design-ctx .hpn-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ctx-line);
}
body.design-ctx .hpn-row:last-child { border-bottom: 0; }
body.design-ctx .hpn-row-img { flex: 0 0 96px; }
body.design-ctx .hpn-row-img img { width: 96px; height: 68px; object-fit: cover; border-radius: 4px; display: block; }
body.design-ctx .hpn-row-b { min-width: 0; }
body.design-ctx .hpn-row h3 { font-size: 15px; }

/* 2. Latest Updates + categories */
body.design-ctx .hpn-latest-g {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 32px;
}
body.design-ctx .hpn-tl { list-style: none; margin: 0; padding: 0; }
body.design-ctx .hpn-tl li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ctx-line);
}
body.design-ctx .hpn-tl li:last-child { border-bottom: 0; }
body.design-ctx .hpn-tl .hpn-t { margin-top: 2px; font-weight: 600; color: var(--ctx-main); }
body.design-ctx .hpn-tl .hpn-badge { display: block; margin-bottom: 2px; color: var(--ctx-meta); }
body.design-ctx .hpn-tl-a { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ctx-text); text-decoration: none; }
body.design-ctx .hpn-tl-a:hover { color: var(--ctx-main); }

body.design-ctx .hpn-cats ul { list-style: none; margin: 0; padding: 0; }
body.design-ctx .hpn-cats li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ctx-line);
    font-size: 14px;
    font-weight: 600;
    color: var(--ctx-text);
    text-decoration: none;
}
body.design-ctx .hpn-cats li a:hover { color: var(--ctx-main); }
body.design-ctx .hpn-cats li b {
    min-width: 28px;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--ctx-soft);
    font-size: 12px;
    text-align: center;
    color: var(--ctx-muted);
}

/* 3. Category blocks */
body.design-ctx .hpn-blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 32px;
}
body.design-ctx .hpn-block .hpn-card { margin-bottom: 4px; }
body.design-ctx .hpn-block .hpn-card-img img { aspect-ratio: 2 / 1; }

/* Cards (category block lead,
More Stories) */
body.design-ctx .hpn-card-img { display: block; margin-bottom: 10px; }
body.design-ctx .hpn-card-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; display: block; }
body.design-ctx .hpn-card h3 { font-size: 18px; }

/* 4. More Stories */
body.design-ctx .hpn-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
}
body.design-ctx .hpn-grid .hpn-card h3 { font-size: 16px; }

@media (max-width: 1024px) {
    body.design-ctx .hpn-lead { min-height: 360px; }
    body.design-ctx .hpn-lead h3 { font-size: 22px; }
    body.design-ctx .hpn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    body.design-ctx .hpn { padding-top: 14px; }
    body.design-ctx .hpn-top-g,
body.design-ctx .hpn-latest-g,
body.design-ctx .hpn-blocks,
body.design-ctx .hpn-grid { grid-template-columns: minmax(0, 1fr); }
    body.design-ctx .hpn-lead { min-height: 300px; }
    body.design-ctx .hpn-lead-c { padding: 60px 16px 16px; }
    body.design-ctx .hpn-lead h3 { font-size: 20px; }
    body.design-ctx .hpn-lead .hpn-ex { display: none; }
    body.design-ctx .hpn-tl li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    body.design-ctx .hpn-cats li:nth-child(n+9) { display: none; }
    body.design-ctx .hpn-row-img { flex-basis: 84px; }
    body.design-ctx .hpn-row-img img { width: 84px; height: 60px; }
}