/* ===================================================================
   Indian Loop Premium — base.css
   Reset, design tokens, color system. Loaded first.
   =================================================================== */

:root {
    /* Design tokens — overridden by Customizer inline <style id="ilp-critical-vars"> */
    --ilp-primary:  #d50000;
    --ilp-primary-dark: #b71c1c;
    --ilp-accent:   #111111;
    --ilp-bg:       #ffffff;
    --ilp-fg:       #111111;
    --ilp-muted:    #f5f5f7;
    --ilp-line:     #e8e8ec;
    --ilp-subtle:   #6b7280;
    --ilp-success:  #138808;
    --ilp-warn:     #ff9933;
    --ilp-info:     #1565c0;
    --ilp-radius:   14px;
    --ilp-radius-sm: 8px;
    --ilp-radius-pill: 999px;
    --ilp-shadow-xs: 0 1px 2px rgba(0,0,0,.04);
    --ilp-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --ilp-shadow-md: 0 6px 24px rgba(0,0,0,.08);
    --ilp-shadow-lg: 0 16px 48px rgba(0,0,0,.12);
    --ilp-trans:    180ms cubic-bezier(.2,.7,.3,1);
    --ilp-container: 1200px;
    --ilp-gap:      20px;
    --ilp-gap-lg:   28px;
    --ilp-header-h: 64px;
}

.ilp-layout-wide  { --ilp-container: 1440px; }
.ilp-layout-full  { --ilp-container: 100%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--ilp-bg);
    color: var(--ilp-fg);
    font-family: var(--ilp-font-hi, "Noto Sans Devanagari"), "Mukta", system-ui, sans-serif;
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ilp-primary); text-decoration: none; transition: color var(--ilp-trans); }
a:hover { color: var(--ilp-primary-dark); }
ul, ol { padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--ilp-line); margin: 32px 0; }

/* Containers + helpers */
.ilp-container { width: min(100% - 32px, var(--ilp-container)); margin-inline: auto; }
.ilp-content   { min-height: 60vh; }
.ilp-main      { padding: 24px 0 48px; }
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute !important; width: 1px;
}
.skip-link { position: absolute; top: -200%; left: 0; background: var(--ilp-primary); color: #fff; padding: 8px 12px; z-index: 9999; }
.skip-link:focus { top: 0; }

/* Buttons */
.ilp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; border-radius: var(--ilp-radius-sm);
    font-weight: 600; line-height: 1; transition: all var(--ilp-trans);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.ilp-btn--primary { background: var(--ilp-primary); color: #fff; }
.ilp-btn--primary:hover { background: var(--ilp-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--ilp-shadow-sm); }
.ilp-btn--ghost   { background: transparent; color: var(--ilp-fg); border-color: var(--ilp-line); }
.ilp-btn--ghost:hover { border-color: var(--ilp-primary); color: var(--ilp-primary); }
.ilp-btn--block   { width: 100%; }

/* Pills */
.ilp-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--ilp-radius-pill);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
    background: var(--ilp-muted); color: var(--ilp-fg); line-height: 1.4;
}
.ilp-pill--cat { background: var(--pill, var(--ilp-primary)); color: #fff; }
.ilp-pill--breaking { background: var(--ilp-primary); color: #fff; animation: ilpPulse 1.4s ease-in-out infinite; }
.ilp-pill--live { background: #d50000; color: #fff; }
.ilp-pill--ai { background: linear-gradient(135deg,#7c3aed,#06b6d4); color: #fff; }
.ilp-pill--tag { background: transparent; border: 1px solid var(--ilp-line); color: var(--ilp-fg); font-weight: 500; }
.ilp-pill--tag:hover { border-color: var(--ilp-primary); color: var(--ilp-primary); }

/* Section titles */
.ilp-section { padding: 32px 0; }
.ilp-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ilp-section-title {
    display: flex; align-items: center; gap: 10px;
    margin: 0; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.25;
}
.ilp-section-title__bar { display: inline-block; width: 5px; height: 22px; background: var(--ilp-primary); border-radius: 3px; }
.ilp-section-title__bar--gold { background: linear-gradient(135deg,#f59e0b,#d97706); }
.ilp-section-title__bar--gradient { background: linear-gradient(135deg,#7c3aed,#06b6d4); }
.ilp-section-header__sub { font-size: 13px; color: var(--ilp-subtle); }
.ilp-section-more { font-size: 14px; font-weight: 600; color: var(--ilp-primary); }
.ilp-section-more:hover { text-decoration: underline; }

/* Ad placeholder */
.ilp-ad {
    display: flex; justify-content: center; align-items: center;
    margin: 18px 0; min-height: 90px;
}
.ilp-ad-placeholder {
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 8px, #f0f0f0 8px, #f0f0f0 16px);
    color: #999; padding: 18px; border-radius: var(--ilp-radius-sm);
    font-size: 12px; text-transform: uppercase; letter-spacing: .1em; width: 100%; text-align: center;
}

/* Reading progress */
.ilp-reading-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%;
    background: transparent; z-index: 9998; pointer-events: none;
}
.ilp-reading-progress span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--ilp-primary), #ff5722);
    transition: width .1s linear;
}

/* Breadcrumbs */
.ilp-breadcrumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 13px; color: var(--ilp-subtle); margin-bottom: 18px;
}
.ilp-breadcrumbs a { color: var(--ilp-subtle); }
.ilp-breadcrumbs a:hover { color: var(--ilp-primary); }
.ilp-breadcrumbs__sep { color: #c9c9d1; }

/* Tag cloud */
.ilp-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 24px 0; }
.ilp-tag-cloud__label { font-weight: 700; }
.ilp-tag-cloud a { padding: 4px 10px; border: 1px solid var(--ilp-line); border-radius: var(--ilp-radius-pill); font-size: 13px; color: var(--ilp-fg); }
.ilp-tag-cloud a:hover { border-color: var(--ilp-primary); color: var(--ilp-primary); }

/* Pagination */
.navigation.pagination, .ilp-pagination { display: flex; justify-content: center; margin: 32px 0; }
.page-numbers { padding: 8px 12px; margin: 0 3px; border: 1px solid var(--ilp-line); border-radius: 8px; color: var(--ilp-fg); }
.page-numbers.current, .page-numbers:hover { background: var(--ilp-primary); color: #fff; border-color: var(--ilp-primary); }

/* Scroll top */
.ilp-scroll-top {
    position: fixed; right: 16px; bottom: 88px;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--ilp-primary); color: #fff;
    box-shadow: var(--ilp-shadow-md); opacity: 0; pointer-events: none;
    transition: opacity var(--ilp-trans), transform var(--ilp-trans);
    z-index: 90; font-size: 20px;
}
.ilp-scroll-top.is-visible { opacity: 1; pointer-events: auto; }
.ilp-scroll-top:hover { transform: translateY(-3px); }

/* Loadmore */
.ilp-loadmore-wrap { display: flex; justify-content: center; margin: 28px 0; }
.ilp-loadmore-btn.is-loading { opacity: .6; pointer-events: none; }

/* None / empty state */
.ilp-none { text-align: center; padding: 60px 20px; }
.ilp-none__title { font-size: 26px; margin: 0 0 10px; }
.ilp-none__text { color: var(--ilp-subtle); margin-bottom: 24px; }

@keyframes ilpPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(213,0,0,.5); }
    50%      { box-shadow: 0 0 0 8px rgba(213,0,0,0); }
}