/* =========================================================
   Click Dharan — Header, Menu (desktop + mobile), Hero meta
   ========================================================= */
:root {
    --cd-blue: #4267b2;
    --cd-blue-dark: #29487d;
    --cd-blue-soft: #eef3fc;
    --cd-green: #00a50d;
    --cd-red: #e62117;
    --cd-ink: #1f2633;
    --cd-muted: #5f6b7c;
    --cd-line: #e5e9f1;
    --cd-ease: cubic-bezier(.22, .61, .36, 1);
}

[hidden] { display: none !important; }

/* Bootstrap 3 .container clearfix pseudo-elements would become flex items */
.cdh-top-inner::before, .cdh-top-inner::after,
.cdh-brand-inner::before, .cdh-brand-inner::after,
.cdn-inner::before, .cdn-inner::after { display: none; content: none; }

/* ---------- Top bar ---------- */
.cdh-top {
    background: #fff;
    border-bottom: 1px solid var(--cd-line);
}
.cdh-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 44px;
}
.cdh-time { flex: 0 1 420px; min-width: 0; line-height: 0; }
.cdh-time iframe, .cdn-date iframe, .cdd-date iframe {
    display: block;
    width: 100%;
    height: 38px;
    border: 0;
    overflow: hidden;
    background: transparent;
}
.cdh-unicode {
    color: var(--cd-ink);
    font: 500 16px/1 'Mukta', sans-serif;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--cd-blue-soft);
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.cdh-unicode:hover, .cdh-unicode:focus { background: var(--cd-blue); color: #fff; text-decoration: none; }
.cdh-unicode .fa { margin-right: 4px; }
.cdh-yt { min-width: 150px; height: 24px; text-align: right; }

/* ---------- Logo + ad row ---------- */
.cdh-brand {
    background: linear-gradient(180deg, #f7f8fb 0%, #eef1f6 100%);
    border-bottom: 1px solid var(--cd-line);
}
.cdh-brand-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-top: 22px;
    padding-bottom: 22px;
}
.cdh-logo { flex: 0 0 auto; display: block; }
.cdh-logo img { display: block; width: 300px; max-width: 100%; height: auto; }
.cdh-ad { flex: 1 1 auto; min-width: 0; text-align: right; }
.cdh-ad img { max-width: 100%; height: auto; display: inline-block; }

/* ---------- Desktop menu (sticky) ---------- */
.cdn-sentinel { height: 1px; margin-bottom: -1px; }
.cdn {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .97);
    border-top: 4px solid var(--cd-blue);
    border-bottom: 1px solid var(--cd-line);
    transition: box-shadow .35s var(--cd-ease), border-color .35s var(--cd-ease);
}
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
    .cdn { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); }
}
.cdn.is-stuck {
    box-shadow: 0 8px 24px -10px rgba(31, 38, 51, .28);
    border-bottom-color: transparent;
}
.cdn-inner {
    display: flex;
    align-items: center;
    height: 58px;
}
/* logo + date slide in only while stuck */
.cdn-logo, .cdn-date {
    flex: 0 0 auto;
    overflow: hidden;
    opacity: 0;
    max-width: 0;
    transition: max-width .4s var(--cd-ease), opacity .3s ease, margin .4s var(--cd-ease);
}
.cdn-logo img { display: block; height: 40px; width: auto; max-width: none; }
.cdn-date { line-height: 0; }
.cdn-date iframe { width: 250px; }
.cdn.is-stuck .cdn-logo { max-width: 130px; opacity: 1; margin-right: 18px; }
.cdn.is-stuck .cdn-date { max-width: 260px; opacity: 1; margin-left: 14px; }
.cdn.is-stuck .cdn-menu > .cdn-item > a { padding: 0 10px; }

.cdn-menu {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cdn-item { position: relative; flex: 0 0 auto; }
.cdn-item > a {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    padding: 0 13px;
    border-radius: 8px;
    color: var(--cd-ink);
    font: 500 18px/1 'Mukta', sans-serif;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s, background .2s;
}
.cdn-item > a:hover, .cdn-item > a:focus, .cdn-item:focus-within > a {
    color: var(--cd-blue);
    background: var(--cd-blue-soft);
    text-decoration: none;
    outline: none;
}
.cdn-item.is-active > a, .cdn-item.is-active > a:hover {
    color: #fff;
    background: var(--cd-blue);
}
.cdn-caret { font-size: 15px; transition: transform .25s var(--cd-ease); }
.cdn-item.has-sub:hover > a .cdn-caret,
.cdn-item.has-sub:focus-within > a .cdn-caret,
.cdn-item.has-sub.is-open > a .cdn-caret { transform: rotate(180deg); }

/* dropdown */
.cdn-sub {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--cd-line);
    border-top: 3px solid var(--cd-green);
    border-radius: 10px;
    box-shadow: 0 18px 40px -12px rgba(31, 38, 51, .3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .25s var(--cd-ease), visibility 0s linear .25s;
    z-index: 5;
}
.cdn-sub::before { /* hover bridge */
    content: "";
    position: absolute;
    left: 0; right: 0; top: -13px; height: 13px;
}
.cdn-item.has-sub:hover > .cdn-sub,
.cdn-item.has-sub:focus-within > .cdn-sub,
.cdn-item.has-sub.is-open > .cdn-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease, transform .25s var(--cd-ease), visibility 0s;
}
.cdn-more > .cdn-sub, .cdn-menu > .cdn-item:last-child > .cdn-sub { left: auto; right: 0; }
.cdn-sub .cdn-item > a {
    height: auto;
    padding: 10px 12px;
    font-size: 17px;
    justify-content: space-between;
}
.cdn-sub .cdn-item.is-active > a { color: var(--cd-blue); background: var(--cd-blue-soft); }
/* nested lists inside a dropdown open in place, not as fly-outs */
.cdn-sub .cdn-sub {
    position: static;
    min-width: 0;
    padding: 0 0 4px 14px;
    border: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
}
.cdn-sub .cdn-sub::before { display: none; }
.cdn-sub .cdn-caret { display: none; }

/* ---------- Mobile bar ---------- */
.cdm { display: none; }

/* ---------- Mobile drawer ---------- */
.cdd, .cdd-overlay { display: none; }

/* ---------- Hero meta (author + time) ---------- */
.cd-hero .taajaImage img { border-radius: 6px; }
.cd-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    padding: 4px 30px 10px;
    color: var(--cd-muted);
    font: 500 18px/1.4 'Mukta', sans-serif;
}
.cd-hero-author { color: var(--cd-blue); font-weight: 600; }
.cd-hero-author .fa, .cd-hero-time .fa { margin-right: 5px; }
.cd-hero-time .fa { color: var(--cd-green); }
.cd-hero-dot { width: 5px; height: 5px; border-radius: 50%; background: #c3cad6; }

/* ---------- Unicode page ---------- */
.cd-unicode { padding: 24px 0; background: transparent; border: 0; }
.cd-unicode .translation { border-radius: 10px; }

/* =========================================================
   Tablet + Mobile (below 1200px)
   ========================================================= */
@media (max-width: 1199px) {
    .cdh-top, .cdn, .cdn-sentinel { display: none; }

    .cdh-brand { background: transparent; border-bottom: 0; }
    .cdh-brand-inner { padding-top: 8px; padding-bottom: 8px; display: block; }
    .cdh-logo { display: none; }
    .cdh-ad { text-align: center; }

    /* top bar with menu button + logo */
    .cdm {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1000;
        height: 62px;
        padding: 0 14px;
        background: #fff;
        box-shadow: 0 1px 0 var(--cd-line);
        transition: box-shadow .3s var(--cd-ease);
    }
    .cdm::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--cd-blue) 0 60%, var(--cd-green) 60% 100%);
    }
    .cdm.is-stuck { box-shadow: 0 8px 22px -12px rgba(31, 38, 51, .45); }

    .cdm-burger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 12px 0 10px;
        border: 0;
        border-radius: 10px;
        background: var(--cd-blue);
        color: #fff;
        font: 600 16px/1 'Mukta', sans-serif;
        cursor: pointer;
    }
    .cdm-burger:focus-visible { outline: 3px solid rgba(66, 103, 178, .35); outline-offset: 2px; }
    .cdm-lines { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
    .cdm-lines span { display: block; height: 2px; border-radius: 2px; background: #fff; }
    .cdm-lines span:nth-child(2) { width: 70%; }

    .cdm-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); line-height: 0; }
    .cdm-logo img { height: 42px; width: auto; max-width: 46vw; }

    .cdm-yt {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: var(--cd-red);
        background: #fff0ef;
        font-size: 22px;
    }
    .cdm-yt:hover, .cdm-yt:focus { color: #fff; background: var(--cd-red); text-decoration: none; }

    /* drawer */
    .cdd-overlay {
        display: block;
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: 1090;
        background: rgba(15, 22, 38, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
    }
    .cdd {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; bottom: 0; left: 0;
        z-index: 1100;
        width: 86vw;
        max-width: 360px;
        background: #fff;
        box-shadow: 20px 0 50px -20px rgba(15, 22, 38, .5);
        transform: translateX(-104%);
        visibility: hidden;
        transition: transform .38s var(--cd-ease), visibility 0s linear .38s;
        overscroll-behavior: contain;
    }
    .cd-drawer-open .cdd-overlay { opacity: 1; visibility: visible; transition: opacity .3s ease; }
    .cd-drawer-open .cdd { transform: none; visibility: visible; transition: transform .38s var(--cd-ease); }
    html.cd-drawer-open { overflow: hidden; }

    .cdd-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px;
        background: linear-gradient(135deg, var(--cd-blue) 0%, var(--cd-blue-dark) 100%);
    }
    .cdd-logo { background: #fff; border-radius: 10px; padding: 6px 10px; line-height: 0; }
    .cdd-logo img { height: 40px; width: auto; }
    .cdd-close {
        width: 40px; height: 40px;
        border: 0; border-radius: 50%;
        background: rgba(255, 255, 255, .16);
        color: #fff;
        font-size: 20px;
        cursor: pointer;
    }
    .cdd-close:hover, .cdd-close:focus { background: rgba(255, 255, 255, .3); outline: none; }

    .cdd-date { padding: 6px 16px; background: var(--cd-blue-soft); border-bottom: 1px solid var(--cd-line); line-height: 0; }

    .cdd-nav { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0; }
    .cdd-menu, .cdd-sub { list-style: none; margin: 0; padding: 0; }
    .cdd-item { border-bottom: 1px solid #f0f2f6; }
    .cdd-row { display: flex; align-items: stretch; }
    .cdd-row a {
        flex: 1 1 auto;
        display: block;
        padding: 13px 20px;
        color: var(--cd-ink);
        font: 500 18px/1.3 'Mukta', sans-serif;
        border-left: 4px solid transparent;
        text-decoration: none;
    }
    .cdd-row a:hover, .cdd-row a:focus { color: var(--cd-blue); background: #f7f9fd; outline: none; }
    .cdd-item.is-active > .cdd-row a { color: var(--cd-blue); border-left-color: var(--cd-blue); background: var(--cd-blue-soft); font-weight: 600; }
    .cdd-toggle {
        flex: 0 0 52px;
        border: 0;
        border-left: 1px solid #f0f2f6;
        background: transparent;
        color: var(--cd-muted);
        font-size: 20px;
        cursor: pointer;
    }
    .cdd-toggle .fa { transition: transform .25s var(--cd-ease); }
    .cdd-item.is-open > .cdd-row .cdd-toggle .fa { transform: rotate(180deg); color: var(--cd-blue); }
    .cdd-sub { display: none; background: #fafbfd; }
    .cdd-item.is-open > .cdd-sub { display: block; animation: cdFade .25s var(--cd-ease); }
    .cdd-sub .cdd-row a { padding-left: 36px; font-size: 17px; }
    .cdd-sub .cdd-sub .cdd-row a { padding-left: 52px; }

    .cdd-foot {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--cd-line);
        background: #fafbfd;
    }
    .cdd-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 999px;
        color: #fff;
        font: 500 15px/1 'Mukta', sans-serif;
        text-decoration: none;
    }
    .cdd-pill:hover, .cdd-pill:focus { color: #fff; text-decoration: none; filter: brightness(1.08); }
    .cdd-pill-yt { background: var(--cd-red); }
    .cdd-pill-fb { background: #1877f2; }
    .cdd-pill-uni { background: var(--cd-green); }

    .cd-hero-meta { font-size: 16px; padding: 2px 12px 8px; }
}

@media (max-width: 480px) {
    .cdm-burger-text { display: none; }
    .cdm-burger { padding: 0 11px; }
    .cdm-logo img { height: 38px; }
}

@keyframes cdFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cdn, .cdn-logo, .cdn-date, .cdn-sub, .cdd, .cdd-overlay, .cdm { transition: none !important; animation: none !important; }
}