/* ============================================
   SARKARI - Official Government Exam Blueprint
   Design System: Indian Tricolor + Government Seal
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&display=swap');

:root {
    /* Tricolor palette */
    --saffron: #FF6B00;
    --saffron-dark: #E55A00;
    --saffron-light: #FFF3E8;
    --white-pure: #FFFFFF;
    --green-india: #046A38;
    --green-light: #E8F5EE;
    --navy: #0C1B3A;
    --navy-light: #1A2E56;
    --navy-lighter: #2A4070;

    /* Chakra blue (Ashoka Chakra) */
    --chakra: #000080;
    --chakra-light: #E8E8F5;

    /* Government gold/seal */
    --gold: #C7973B;
    --gold-light: #F5ECD8;
    --gold-dark: #8B6914;

    /* Neutrals */
    --parchment: #FEFCF8;
    --cream: #FBF8F1;
    --slate: #374151;
    --muted: #6B7280;
}

body {
    font-family: 'Noto Sans', -apple-system, sans-serif;
    background: var(--cream);
    color: var(--slate);
}

.font-display { font-family: 'Playfair Display', Georgia, serif; }

/* ---- Gradients ---- */
.gradient-navy { background: linear-gradient(135deg, #0C1B3A 0%, #1A2E56 50%, #2A4070 100%); }
.gradient-saffron { background: linear-gradient(135deg, #E55A00 0%, #FF6B00 100%); }
.gradient-tricolor {
    background: linear-gradient(135deg, #FF6B00 0%, #FF6B00 33%, #FFFFFF 33%, #FFFFFF 66%, #046A38 66%, #046A38 100%);
}
.gradient-gold { background: linear-gradient(135deg, #C7973B 0%, #D4A94E 50%, #E8C36A 100%); }

/* ---- Tricolor Top Bar ---- */
.tricolor-bar {
    height: 4px;
    background: linear-gradient(90deg, #FF6B00 0%, #FF6B00 33.33%, #FFFFFF 33.33%, #FFFFFF 66.66%, #046A38 66.66%, #046A38 100%);
}

/* ---- Government Seal/Stamp Effect ---- */
.stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px double var(--gold);
    border-radius: 50%;
    padding: 12px;
    position: relative;
}
.stamp::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid var(--gold);
    border-radius: 50%;
}

/* ---- Ashoka Chakra Spinner ---- */
@keyframes chakra-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.chakra-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--chakra-light);
    border-top-color: var(--chakra);
    border-radius: 50%;
    animation: chakra-spin 0.8s linear infinite;
}

/* ---- Official Badge ---- */
.badge-official {
    background: var(--gold-light);
    color: var(--gold-dark);
    border: 1px solid var(--gold);
    padding: 2px 10px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ---- Paper/Document Effect ---- */
.paper {
    background: var(--parchment);
    border: 1px solid #E5DDD0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
}
.paper-shadow {
    box-shadow:
        0 1px 3px rgba(0,0,0,0.08),
        3px 3px 0 -1px var(--parchment),
        3px 3px 0 0 #E5DDD0,
        6px 6px 0 -1px var(--parchment),
        6px 6px 0 0 #E5DDD0;
}

/* ---- Seal Watermark ---- */
.watermark {
    position: relative;
    overflow: hidden;
}
.watermark::after {
    content: '★';
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 180px;
    color: rgba(199, 151, 59, 0.04);
    font-weight: 900;
    pointer-events: none;
    line-height: 1;
}

/* ---- Dashed Border (like govt forms) ---- */
.border-dashed-gold {
    border: 2px dashed var(--gold);
}

/* ---- Section Dividers ---- */
.divider-ornament {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gold);
}
.divider-ornament::before,
.divider-ornament::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---- Custom Range Slider ---- */
input[type="range"] {
    -webkit-appearance: none;
    height: 6px;
    background: #E5DDD0;
    border-radius: 3px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--saffron);
    cursor: pointer;
    border: 4px solid white;
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3);
}
input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--saffron);
    cursor: pointer;
    border: 4px solid white;
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3);
}

/* ---- Line Clamp ---- */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Pulse Glow (for CTA) ---- */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(255, 107, 0, 0); }
}
.pulse-cta { animation: pulse-glow 2s infinite; }

/* ---- Stat Counter Animation ---- */
@keyframes count-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.stat-animate { animation: count-up 0.6s ease-out forwards; }

/* ---- Print Styles ---- */
@media print {
    nav, footer, .no-print { display: none !important; }
    main { padding: 0 !important; }
    details { display: block !important; }
    details > summary { display: none !important; }
    details > div { display: block !important; }
}

/* ---- Smooth Scrolling ---- */
html { scroll-behavior: smooth; }