/* ==========================================================================
   Crypto Today — modern skin (v2)
   Added 2026-08-19. Additive override layer loaded AFTER lara-mag.css.
   Original work: restyles existing lara-mag markup into a light,
   whitespace-driven news layout. Nothing here is copied from another site.

   DESIGN NOTE: lara-mag is a float-based legacy theme. This layer deliberately
   does NOT re-architect the header or column layout (v1 did and broke the nav);
   it changes appearance — colour, type, spacing, borders, hover — and applies
   CSS grid only INSIDE .block-post-wrap-content, which is self-contained.

   CACHING NOTE: kept as its own file because lara-mag.css ships under a fixed
   ?v= with cache-control: max-age=604800.
   ========================================================================== */

:root {
    --ct-bg:          #ffffff;
    --ct-bg-soft:     #f5f6f8;
    --ct-bg-sunken:   #eceff3;
    --ct-border:      #e4e7ec;
    --ct-border-soft: #eef0f4;
    --ct-text:        #10131a;
    --ct-text-2:      #333a45;
    --ct-muted:       #6b7280;
    --ct-muted-2:     #98a0ab;
    --ct-accent:      #d81e40;
    --ct-radius:      10px;
    --ct-radius-sm:   6px;
    --ct-shadow-h:    0 2px 6px rgba(16,19,26,.07), 0 12px 26px rgba(16,19,26,.09);
}

/* ---------- base ---------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
body {
    background: var(--ct-bg) !important;
    color: var(--ct-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
}
img { max-width: 100%; height: auto; }
a { transition: color .15s ease; }

/* ---------- header -------------------------------------------------------- */
/* IMPORTANT — the header bar is DARK on purpose. The brand logo
   (crypto-todaylogo-2.png) is 78% transparent / 12% crimson / 9.5% WHITE and
   contains ZERO dark ink: its "Crypto Today" wordmark is pure white, drawn for
   a dark header. On a white bar that wordmark is invisible (only the crimson
   mark and strapline show). Rather than alter the brand asset, the bar stays
   dark — which also gives the light body a clean modern contrast. If a
   dark-ink logo is ever supplied, this block can be flipped to a light bar. */
.header-menu-top, .header-right-top { background: #0b0e14 !important; border-bottom: 1px solid rgba(255,255,255,.06); }
.header-menu-top a, .header-menu-top span, .header-right-top a, .header-right-top span { color: #9aa3b1 !important; }
.header-menu-top a:hover, .header-right-top a:hover { color: #fff !important; }

/* NOTE: the theme renders TWO .header-bottom sections — the nav bar, and a
   second one (.header-bottom.bottoms) holding the CoinMarketCap price ticker.
   Only the nav bar goes dark; the ticker widget draws its own dark text, so
   darkening it too made it dark-on-dark. */
.header-bottom:not(.bottoms) {
    background: #10141c !important;
    border: 0 !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
.header-bottom.bottoms {
    background: var(--ct-bg-soft) !important;
    border-bottom: 1px solid var(--ct-border) !important;
    box-shadow: none !important;
}
.header-bottom.bottoms, .header-bottom.bottoms * { color: var(--ct-text-2) !important; }
.logo-img img, h1.logo img { max-height: 44px; width: auto; height: auto; display: block; }
.logo-img { padding: 9px 26px 9px 0 !important; }

/* nav — .menu IS the <ul>; keep the theme's float flow, restyle only */
.header-bottom:not(.bottoms) .menu > li > a,
.main-nav .menu > li > a {
    color: #dfe3ea !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 0 13px !important;
}
.header-bottom:not(.bottoms) .menu > li > a span,
.main-nav .menu > li > a span { color: inherit !important; }
.header-bottom:not(.bottoms) .menu > li > a:hover,
.header-bottom:not(.bottoms) .menu > li > a:hover span,
.main-nav .menu > li > a:hover,
.main-nav .menu > li > a:hover span { color: #ff5c78 !important; }
.header-bottom:not(.bottoms) .menu > li.current-menu-item > a,
.header-bottom:not(.bottoms) .menu > li.active > a { color: #ff5c78 !important; }
.header-bottom:not(.bottoms) .fa-search, .header-bottom:not(.bottoms) > .container i { color: #dfe3ea !important; }

/* dropdowns */
.main-nav .menu ul { background: #161b25 !important; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 30px rgba(0,0,0,.35); border-radius: var(--ct-radius-sm); }
.main-nav .menu ul li a, .main-nav .menu ul li a span { color: #dfe3ea !important; }
.main-nav .menu ul li a:hover, .main-nav .menu ul li a:hover span { color: #fff !important; background: rgba(255,255,255,.06) !important; }

/* search + ticker strip */
.super-search, .header-search { background: transparent !important; }
.header-ticker, .coin-ticker { background: var(--ct-bg-soft) !important; border-bottom: 1px solid var(--ct-border); }

/* ---------- section headings --------------------------------------------- */
/* lara-mag draws a skewed parallelogram after the label; neutralise all of it */
.block-post-wrap-head, .sidebar-item-head {
    background: none !important;
    border: 0 !important;
    border-bottom: 2px solid var(--ct-border) !important;
    border-radius: 0 !important;
    padding: 0 0 9px !important;
    margin: 0 0 18px !important;
    position: relative;
    overflow: visible !important;
}
.block-post-wrap-head:before, .block-post-wrap-head:after,
.sidebar-item-head:before,  .sidebar-item-head:after,
.block-post-wrap-head a:before, .block-post-wrap-head a:after,
.sidebar-item-head a:before,  .sidebar-item-head a:after,
.block-post-wrap-head span:before, .block-post-wrap-head span:after,
.sidebar-item-head span:before,  .sidebar-item-head span:after { display: none !important; content: none !important; }

/* accent underline */
.block-post-wrap-head, .sidebar-item-head { background-image: none !important; }
.block-post-wrap-head > a:first-child:after { content: none !important; }
.block-post-wrap-head:has(> a):after { content: "" !important; display: block !important; position: absolute; left: 0; bottom: -2px; width: 54px; height: 2px; background: var(--ct-accent); }

.block-post-wrap-head a, .sidebar-item-head a,
.block-post-wrap-head span, .sidebar-item-head span {
    background: none !important;
    color: var(--ct-text) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    text-transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    display: inline !important;
}
.block-post-wrap-head i, .sidebar-item-head i { color: var(--ct-accent) !important; margin-right: 9px; font-size: 15px !important; }

/* ---------- post blocks --------------------------------------------------- */
.block-post-wrap-item { margin-bottom: 38px !important; }
.block-post-wrap-content {
    background: var(--ct-bg) !important;
    padding: 0 !important;
    display: grid;
    /* auto-fit: half-width blocks (~425px) collapse to a single column instead of
       squeezing two 203px cards side by side; full-width blocks get 2-3 across. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    align-items: start;
}
.block-post-wrap-content > .post1-item { float: none !important; width: auto !important; margin: 0 !important; }
.block-post-wrap-content > .post1-item-list,
.block-post-wrap-content > .cboth { grid-column: 1 / -1; }
.block-post-wrap-content > .cboth { display: none; }

/* ---------- post cards ---------------------------------------------------- */
.post1-item {
    background: var(--ct-bg);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.post1-item:hover { box-shadow: var(--ct-shadow-h); transform: translateY(-2px); border-color: #dadee4; }

.post1-item-thumb, .item-thumbnail {
    float: none !important; width: 100% !important; margin: 0 !important;
    display: block; overflow: hidden; background: var(--ct-bg-sunken);
    aspect-ratio: 16 / 9;
}
.post1-item-thumb img, .item-thumbnail img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block; transition: transform .35s ease;
}
.post1-item:hover .post1-item-thumb img { transform: scale(1.04); }

.post1-item-info { padding: 14px 16px 16px !important; float: none !important; width: auto !important; }
.post1-item-title { margin: 0 0 7px !important; }
.post1-item-title a {
    color: var(--ct-text) !important;
    font-size: 16px !important; font-weight: 700 !important;
    line-height: 1.33 !important; letter-spacing: -.005em; display: block;
}
.post1-item-title a:hover { color: var(--ct-accent) !important; }
.post1-item-des { color: var(--ct-muted) !important; font-size: 13.5px !important; line-height: 1.55 !important; margin: 0 !important; }
.post1-item-bottom { color: var(--ct-muted-2) !important; font-size: 12px !important; margin-top: 10px !important; }
.post1-item-bottom a, .post1-item-bottom span { color: var(--ct-muted-2) !important; }
.post1-item-bottom i { color: var(--ct-muted-2) !important; margin-right: 5px; }

/* headline-only rows — text-forward, reads well with no image */
.post1-item-list {
    border-top: 1px solid var(--ct-border-soft);
    padding: 11px 2px !important; margin: 0 !important; float: none !important; width: auto !important;
}
.post1-item-list a { color: var(--ct-text) !important; font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.45 !important; }
.post1-item-list a:hover { color: var(--ct-accent) !important; }
.post1-item-list i { color: var(--ct-accent) !important; margin-right: 8px; }

/* ---------- let headlines wrap ------------------------------------------- */
/* lara-mag puts .white-space (white-space:nowrap; overflow:hidden;
   text-overflow:ellipsis) on every headline, which truncates each one to a
   single line -- fine for a one-line ticker, wrong for cards. Re-enable
   wrapping and clamp to a sensible number of lines instead. */
.post1-item-title a.white-space,
.post1-item-list a.white-space,
.sidebar-new-item-info a.white-space,
.featured-home-post-item-title a.white-space,
.post1-item-title a,
.sidebar-new-item-info a {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.post1-item-title a.white-space, .post1-item-title a { -webkit-line-clamp: 3; }
.post1-item-list a.white-space, .post1-item-list a { -webkit-line-clamp: 2; }
.sidebar-new-item-info a.white-space, .sidebar-new-item-info a { -webkit-line-clamp: 3; }
.featured-home-post-item-title a.white-space, .featured-home-post-item-title a { white-space: normal !important; text-overflow: clip !important; }
/* section headings must stay on one line, unclamped */
.block-post-wrap-head a.white-space, .sidebar-item-head a.white-space {
    display: inline !important; overflow: visible !important; white-space: normal !important;
}

/* ---------- hero / featured ---------------------------------------------- */
.featured-home-post-item { border-radius: var(--ct-radius); overflow: hidden; }
.featured-home-post-item img { object-fit: cover !important; }
.featured-home-post-item-title a { color: #fff !important; font-weight: 800 !important; letter-spacing: -.01em; line-height: 1.26 !important; }
.featured-home-post-item-title a:hover { color: #fff !important; text-decoration: underline; }
.featured-home-post-item-date, .featured-home-post-item-date a, .featured-home-post-item-date i { color: rgba(255,255,255,.82) !important; font-size: 12px !important; }
.thumbnail-hoverlay { background: linear-gradient(180deg, rgba(8,10,14,0) 38%, rgba(8,10,14,.85) 100%) !important; }
.thumbnail-hoverlay-icon { display: none !important; }

/* ---------- sidebar ------------------------------------------------------- */
.sidebar-item-content { background: transparent !important; padding: 0 !important; }
.sidebar-new-item { padding: 12px 0 !important; border-bottom: 1px solid var(--ct-border-soft); background: transparent !important; overflow: hidden; }
.sidebar-new-item:last-child { border-bottom: 0; }
.sidebar-new-item-thumb {
    width: 84px !important; height: 60px !important; margin: 0 12px 0 0 !important;
    border-radius: var(--ct-radius-sm); overflow: hidden; background: var(--ct-bg-sunken);
}
.sidebar-new-item-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.sidebar-new-item-info { overflow: hidden; margin: 0 !important; }
.sidebar-new-item-info h2 { margin: 0 0 5px !important; }
.sidebar-new-item-info a { color: var(--ct-text) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.38 !important; }
.sidebar-new-item-info a:hover { color: var(--ct-accent) !important; }
.sidebar-new-item-des, .sidebar-new-item-des i { color: var(--ct-muted-2) !important; font-size: 12px !important; }

.sidebar-item-content ul { list-style: none; margin: 0; padding: 0; }
.sidebar-item-content ul li { padding: 10px 0; border-bottom: 1px solid var(--ct-border-soft); }
.sidebar-item-content ul li:last-child { border-bottom: 0; }
.sidebar-item-content ul li a { color: var(--ct-text) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.42 !important; }
.sidebar-item-content ul li a:hover { color: var(--ct-accent) !important; }
.sidebar-item-content ul li i { color: var(--ct-accent) !important; }

/* ---------- article page -------------------------------------------------- */
h1, h2, h3 { color: var(--ct-text); letter-spacing: -.015em; }
.post-detail, .entry-content, .ck-content { font-size: 17px; line-height: 1.75; color: var(--ct-text-2); }
.post-detail img, .entry-content img { border-radius: var(--ct-radius); }
.breadcrumb, .breadcrumb a { color: var(--ct-muted) !important; font-size: 13px; }
.breadcrumb a:hover { color: var(--ct-accent) !important; }

/* ---------- utilities the theme leans on --------------------------------- */
.main-color-1-bg { background: var(--ct-bg) !important; }

/* ---------- footer -------------------------------------------------------- */
footer, .footer, .footer-wrap, .footer-bottom { background: #0f1218 !important; color: #aeb6c2; }
footer a, .footer a, .footer-bottom a { color: #cfd6e0 !important; }
footer a:hover, .footer a:hover { color: #fff !important; }

/* ---------- responsive ---------------------------------------------------- */
@media (max-width: 1024px) {
    .block-post-wrap-content { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
}
@media (max-width: 720px) {
    .block-post-wrap-content { grid-template-columns: 1fr; gap: 14px; }
    .post1-item-title a { font-size: 15.5px !important; }
    .sidebar-new-item-thumb { width: 72px !important; height: 54px !important; }
    .block-post-wrap-head a, .sidebar-item-head a,
    .block-post-wrap-head span, .sidebar-item-head span { font-size: 17px !important; }
}