/*
 * BASE Stylesheet (base.css)
 * 
 * PURPOSE:
 * This file contains the foundation of the theme. 
 * Defining variables and global styles here ensures consistency across the entire site.
 * Changing a color here changes it EVERYWHERE. This is crucial for Maintainability.
 * 
 * CONTENTS:
 * 1. CSS Variables (The Design System)
 * 2. CSS Reset (Normalizing Browser Defaults)
 * 3. Typography (Global Font Rules)
 * 4. Helper Classes (Common utilities)
 */

/* =========================================
   1. CSS VARIABLES (Design System)
   ========================================= */
:root {
    /* 
     * THEME COLORS 
     * hnp = HindiNewsPro prefix 
     */
    --hnp-red: #c4161c;
    /* Main Brand Red (Aaj Tak style) */
    --hnp-red-dark: #9e1217;
    /* Hover state */
    --hnp-black: #121212;
    /* Headlines */
    --hnp-dark-gray: #333333;
    /* Sub-headings / Footer bg */
    --hnp-gray: #f4f5f6;
    /* Body Background (Light Gray for contrast) */
    --hnp-light-gray: #e0e0e0;
    /* Borders */
    --hnp-white: #ffffff;
    --hnp-blue: #0056b3;
    /* Links */

    /* Functional Colors */
    --hnp-live: #cc0000;
    /* Flashing Live Indicator */
    --hnp-breaking: #ffc107;
    /* Breaking News Strip Background */

    /* 
     * TYPOGRAPHY 
     * Using 'Mukta' for Hindi body text as it is highly legible.
     * Using 'Rajdhani' for English/Hindi hybrid headlines (Technical feel).
     */
    --font-primary: 'Mukta', sans-serif;
    --font-heading: 'Rajdhani', sans-serif;

    /* Spacing */
    --container-width: 1280px;
}

/* =========================================
   2. GLOBAL RESET & BODY
   ========================================= */
body {
    background-color: var(--hnp-gray);
    color: var(--hnp-dark-gray);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    /* Sharper text on Mac */
}

/* Ensure images never break out of containers */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Links */
a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

a:hover {
    color: var(--hnp-red);
}

/* =========================================
   3. TYPOGRAPHY
   ========================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--hnp-black);
    /* Darker than body text */
    margin-top: 0;
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

h1 {
    font-size: 2.25rem;
}

/* 36px */
h2 {
    font-size: 1.875rem;
}

/* 30px */
h3 {
    font-size: 1.5rem;
}

/* 24px */
h4 {
    font-size: 1.25rem;
}

/* 20px */
h5 {
    font-size: 1.125rem;
}

/* 18px */
h6 {
    font-size: 1rem;
}

/* 16px */

p {
    margin-bottom: 1rem;
}

/* =========================================
   4. UTILITY HELPER CLASSES
   ========================================= */
/* Custom container override if strict Bootstrap container isn't wide enough */
.hnp-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 15px;
}

/* Section Title Style (Red left border) */
.hnp-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    border-left: 5px solid var(--hnp-red);
    padding-left: 12px;
    margin-bottom: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.bg-news-red {
    background-color: var(--hnp-red) !important;
    color: var(--hnp-white);
}

.text-news-red {
    color: var(--hnp-red) !important;
}