/* The Dacca: front page, cards, header, post page and footer on top of Suhka Lite.
   Loaded after dist/style.min.css; every new component uses the dc- prefix so it never collides with the base theme. */

:root {
    --dc-ink: #111111;
    --dc-ink-2: #4a4845;
    --dc-ink-3: #77746f;
    --dc-rule: #e4e1dc;
    --dc-red: #e2232a;
    --dc-bg: #ffffff;
    --dc-wash: #f6f4f0;
    --dc-serif: "Merriweather", "Noto Serif Bengali", Georgia, serif;
    --dc-sans: "Barlow", "Noto Serif Bengali", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --epcl-background-color: #ffffff;
    --epcl-font-family: var(--dc-serif);
    --epcl-title-font-family: var(--dc-serif);
}

body { background: var(--dc-bg); color: var(--dc-ink); }
.grayscale-effect img { filter: none !important; }
/* Article charts need pointer events; the base plugin CSS disables them on every svg */
.post-content svg, .kg-card svg { pointer-events: auto !important; }

.dc-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* ---------- header ---------- */
#header.dc-header { position: sticky; top: 0; z-index: 50; background: var(--dc-bg); border-bottom: 1px solid var(--dc-ink); padding: 0; margin: 0; }
.dc-header-row { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.dc-header .logo { margin: 0; padding: 0; line-height: 0; flex: none; }
.dc-header .logo img { height: 34px; width: auto; }
.dc-nav { flex: 1; min-width: 0; }
.dc-nav ul { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.dc-nav ul li { margin: 0; padding: 0; list-style: none; }
.dc-nav ul li::before, .dc-nav ul li::after { display: none; }
.dc-nav a { font: 600 15px/1 var(--dc-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--dc-ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.dc-nav a:hover, .dc-nav .current-menu-item a { border-bottom-color: var(--dc-red); }
.dc-search { flex: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--dc-ink); line-height: 0; }
.menu-mobile, nav.mobile.main-nav, .menu-overlay { display: none !important; }

/* ---------- shared bits ---------- */
.dc-kicker { display: inline-block; font: 700 13px/1.2 var(--dc-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dc-red) !important; text-decoration: none; margin: 0 0 8px; }
.dc-kicker:hover { text-decoration: underline; }
.dc-label { font: 700 13px/1 var(--dc-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dc-ink-3); margin: 0 0 16px; }
.dc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 2px solid var(--dc-ink); padding-top: 12px; margin: 0 0 20px; }
.dc-section-head h2 { font: 700 22px/1.2 var(--dc-sans); letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.dc-section-head h2 a { color: var(--dc-ink); text-decoration: none; }
.dc-more { font: 600 14px/1 var(--dc-sans); color: var(--dc-ink-2) !important; text-decoration: none; white-space: nowrap; }
.dc-more:hover { color: var(--dc-red) !important; }

/* ---------- cards ---------- */
.dc-grid { display: grid; gap: 32px 28px; }
.dc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dc-card { margin: 0; padding: 0; background: none; border: 0; }
.dc-thumb { display: block; overflow: hidden; background: var(--dc-wash); aspect-ratio: 16 / 10; margin: 0 0 14px; }
.dc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; border: 0; }
.dc-card:hover .dc-thumb img { transform: scale(1.03); }
.dc-title { font: 700 19px/1.32 var(--dc-serif); margin: 0 0 10px; }
.dc-title a { color: var(--dc-ink); text-decoration: none; }
.dc-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dc-excerpt { font: 400 16px/1.6 var(--dc-serif); color: var(--dc-ink-2); margin: 0 0 12px; }
.dc-meta { font: 500 14px/1.3 var(--dc-sans); color: var(--dc-ink-3); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.dc-author { color: var(--dc-ink-2); font-weight: 600; }

/* lead story */
.dc-home { padding: 32px 0 64px; }
.dc-lead { margin: 0 0 48px; }
.dc-card--lead { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.dc-card--lead .dc-thumb { margin: 0; aspect-ratio: 3 / 2; }
.dc-card--lead .dc-title { font-size: clamp(28px, 3.2vw, 40px); font-weight: 900; line-height: 1.18; margin-bottom: 14px; }
.dc-card--lead .dc-excerpt { font-size: 18px; }
.dc-card--lead .dc-kicker { font-size: 14px; }
.dc-featured { margin: 0 0 56px; padding-bottom: 8px; }
.dc-section { margin: 0 0 56px; }
.dc-latest { margin: 0; }

/* pagination (base theme markup) */
.dc-latest .pagination, .dc-grid + .pagination { margin-top: 40px; }

/* ---------- section / author archives ---------- */
#archives .tag-description { margin-top: 40px; }
#archives .dc-grid { margin-top: 8px; }

/* ---------- post page ---------- */
.dc-single { padding: 40px 0 64px; }
.dc-article-head { max-width: 820px; text-align: left; }
.dc-headline { font: 900 clamp(30px, 4vw, 46px)/1.15 var(--dc-serif); margin: 0 0 16px; color: var(--dc-ink); }
.dc-dek { font: 400 20px/1.55 var(--dc-serif); color: var(--dc-ink-2); margin: 0 0 22px; }
.dc-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font: 500 15px/1.3 var(--dc-sans); color: var(--dc-ink-3); border-top: 1px solid var(--dc-rule); padding-top: 14px; }
.dc-byline-author { display: inline-flex; align-items: center; gap: 10px; color: var(--dc-ink) !important; font-weight: 600; text-decoration: none; }
.dc-byline-author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.dc-hero { max-width: 1080px; margin: 28px auto 36px; padding: 0 24px; box-sizing: border-box; }
.dc-hero img { width: 100%; height: auto; display: block; }
.dc-hero figcaption { font: 400 14px/1.5 var(--dc-sans); color: var(--dc-ink-3); margin-top: 8px; }
.dc-text { max-width: 820px; }
.dc-disclaimer { font: italic 500 15px/1.5 var(--dc-sans); color: var(--dc-ink-3); margin: 0 0 28px; padding: 0 0 14px; border-bottom: 1px solid var(--dc-rule); }
.dc-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 40px 0 28px; padding-top: 20px; border-top: 1px solid var(--dc-rule); }
.dc-share-label { font: 700 13px/1 var(--dc-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dc-ink-3); margin-right: 6px; }
.dc-share-btn { font: 600 14px/1 var(--dc-sans); color: var(--dc-ink) !important; background: var(--dc-bg); border: 1px solid var(--dc-ink); border-radius: 999px; padding: 9px 16px; text-decoration: none; cursor: pointer; }
.dc-share-btn:hover { background: var(--dc-ink); color: #fff !important; }
.dc-authorbox { display: flex; gap: 16px; align-items: flex-start; background: var(--dc-wash); padding: 18px 20px; margin: 0 0 12px; }
.dc-authorbox img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.dc-authorbox-name { font: 700 18px/1.3 var(--dc-sans); margin: 0 0 4px; }
.dc-authorbox-name a { color: var(--dc-ink); text-decoration: none; }
.dc-authorbox-bio { font: 400 15px/1.55 var(--dc-serif); color: var(--dc-ink-2); margin: 0; }
.dc-related { margin-top: 56px; }

/* ---------- footer ---------- */
#footer.dc-footer { border-top: 2px solid var(--dc-ink); margin-top: 24px; padding: 40px 0 24px; text-align: left; background: var(--dc-bg); }
.dc-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; align-items: start; }
.dc-footer .logo { margin: 0 0 12px; text-align: left; }
.dc-footer .logo img { height: 34px; width: auto; }
.dc-footer-brand p { font: 400 16px/1.5 var(--dc-serif); color: var(--dc-ink-2); margin: 0; max-width: 420px; }
.dc-footer-nav ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dc-footer-nav ul li { margin: 0; padding: 0; }
.dc-footer-nav ul li::before, .dc-footer-nav ul li::after { display: none; }
.dc-footer-nav a, .dc-footer-social a { font: 600 15px/1.2 var(--dc-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--dc-ink) !important; text-decoration: none; }
.dc-footer-social { display: flex; flex-direction: column; gap: 10px; }
.dc-footer-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--dc-rule); font: 500 14px/1.3 var(--dc-sans); color: var(--dc-ink-3); }
.dc-footer-bottom a { color: var(--dc-ink-2) !important; }

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
    .dc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc-card--lead { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
    .dc-container { padding: 0 16px; }
    .dc-header-row { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-top: 12px; }
    .dc-header .logo img { height: 28px; }
    .dc-search { margin-left: auto; }
    .dc-nav { order: 3; flex-basis: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 8px -16px 0; padding: 0 16px; }
    .dc-nav::-webkit-scrollbar { display: none; }
    .dc-nav ul { gap: 22px; padding: 6px 0 10px; }
    .dc-nav a { font-size: 14px; white-space: nowrap; }
    .dc-home { padding-top: 20px; }
    .dc-grid--3, .dc-grid--4 { grid-template-columns: 1fr; gap: 0; }
    /* compact list: small square thumb on the right */
    .dc-grid .dc-card { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--dc-rule); }
    .dc-grid .dc-card .dc-thumb { grid-column: 2; grid-row: 1; aspect-ratio: 1 / 1; margin: 0; }
    .dc-grid .dc-card .dc-body { grid-column: 1; grid-row: 1; }
    .dc-grid .dc-card.no-image { grid-template-columns: 1fr; }
    .dc-grid .dc-title { font-size: 17px; }
    .dc-card--lead .dc-title { font-size: 28px; }
    .dc-section-head h2 { font-size: 19px; }
    .dc-single { padding-top: 24px; }
    .dc-dek { font-size: 18px; }
    .dc-hero { padding: 0; margin: 20px 0 28px; }
    .dc-footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .dc-footer-bottom { flex-direction: column; }
}

/* logo: the base theme centres .logo; keep it left in the header and footer */
.dc-header .logo, .dc-footer .logo { text-align: left !important; width: auto !important; float: none !important; position: static !important; margin: 0 !important; }
.dc-footer .logo { margin: 0 0 12px !important; }
.dc-header .logo a, .dc-footer .logo a { display: inline-block; }

/* a section row whose posts all sit in the featured block above has nothing new to show */
.dc-section:not(:has(.dc-card)) { display: none; }
#header.dc-header .logo, #footer.dc-footer .logo { margin: 0 !important; padding: 0 !important; width: auto !important; }
#footer.dc-footer .logo { margin-bottom: 12px !important; }