/* ============================================================
   BHARAT AI NEWS
   PREMIUM DIGITAL NEWSPAPER
   THEME:
   PURPLE + LIGHT GREEN + ORANGE
   BLACK HEADER/FOOTER PRESERVED
   ============================================================ */

:root {
    /* =========================
       PREMIUM THEME COLORS
    ========================= */

    --purple: #6a1b9a;
    --purple-dark: #4a126d;
    --purple-light: #f3e8ff;

    --green: #66bb6a;
    --green-dark: #388e3c;
    --green-light: #eaf7ea;

    --orange: #f57c00;
    --orange-dark: #d96500;
    --orange-light: #fff3e0;

    --black: #111111;
    --deep-black: #080808;
    --dark: #1b1b1b;

    --text: #222222;
    --text-soft: #444444;
    --muted: #777777;

    --border: #e3e5e8;
    --border-dark: #d3d6da;

    --light: #f5f7f6;
    --lighter: #fafcfb;

    --white: #ffffff;

    --blue: #1466c2;

    --shadow-sm:
        0 2px 10px rgba(0, 0, 0, .045);

    --shadow-md:
        0 6px 22px rgba(0, 0, 0, .075);

    --shadow-lg:
        0 12px 35px rgba(0, 0, 0, .11);

    --radius: 8px;

    --transition: .22s ease;
}


/* ============================================================
   GLOBAL RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            180deg,
            #f4f7f5 0%,
            #eef2ef 100%
        );

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

.container {
    width: 94%;
    max-width: 1280px;
    margin: 0 auto;
}


/* ============================================================
   TOP DATE BAR
   BLACK — PRESERVED
   ============================================================ */

.datetime {
    background: #080808;

    color: #d7d7d7;

    font-size: 13px;

    padding: 7px 15px;

    text-align: center;

    letter-spacing: .35px;

    border-bottom:
        1px solid #242424;
}


/* ============================================================
   MAIN BRAND HEADER
   BLACK — PRESERVED
   ============================================================ */

.main-header {
    background:
        linear-gradient(
            180deg,
            #151515 0%,
            #080808 100%
        );

    padding:
        25px 15px
        22px;

    text-align: center;

    border-bottom:
        4px solid var(--purple);

    position: relative;
}

.main-header h1 {
    margin: 0;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 52px;

    font-weight: 800;

    letter-spacing: -1.5px;

    line-height: 1.05;

    text-shadow:
        0 2px 3px rgba(0,0,0,.35);
}

.main-header h1::first-letter {
    color: #ffcf33;
}


/* ============================================================
   BRAND ACCENT
   ============================================================ */

.brand-accent {
    color: var(--green);
}

.brand-orange {
    color: var(--orange);
}

.brand-purple {
    color: #c084fc;
}


/* ============================================================
   BREAKING NEWS
   ORANGE + PURPLE MIX
   ============================================================ */

.breaking-news {
    min-height: 45px;

    background:
        linear-gradient(
            90deg,
            var(--orange) 0%,
            #ef6c00 45%,
            var(--purple) 100%
        );

    color: #fff;

    display: flex;

    align-items: center;

    overflow: hidden;

    font-size: 15px;

    font-weight: 700;

    border-bottom:
        1px solid var(--purple-dark);

    position: relative;
}

.bn-title {
    background:
        linear-gradient(
            135deg,
            var(--purple-dark),
            var(--purple)
        );

    color: #fff;

    padding:
        11px 18px;

    margin-right: 14px;

    flex-shrink: 0;

    text-transform: uppercase;

    letter-spacing: .8px;

    font-size: 13px;

    font-weight: 800;

    position: relative;

    z-index: 2;
}


/* ============================================================
   PRIMARY NAVIGATION
   ============================================================ */

.sub-header {
    background: rgba(255,255,255,.98);

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    border-bottom:
        1px solid var(--border);

    box-shadow:
        0 2px 12px rgba(0,0,0,.06);

    position: sticky;

    top: 0;

    z-index: 1000;
}

.sub-header a {
    color: #222;

    padding:
        13px 15px;

    margin: 0;

    font-size: 13px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .25px;

    border-bottom:
        3px solid transparent;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.sub-header a:hover {
    color: var(--purple);

    border-bottom-color:
        var(--purple);

    background:
        var(--purple-light);
}

.sub-header a:active {
    transform:
        translateY(1px);
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.content-area {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    gap: 30px;

    align-items: start;

    margin-top: 30px;
}

.left-content {
    width: 100%;
    min-width: 0;
}

.sidebar {
    width: 100%;

    background: #fff;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    padding: 20px;

    box-shadow:
        var(--shadow-md);

    position: relative;
}


/* ============================================================
   SECTION HEADINGS
   PURPLE + ORANGE
   ============================================================ */

.section-title {
    display: flex;

    align-items: center;

    gap: 11px;

    margin:
        0 0 20px;

    padding-bottom:
        10px;

    border-bottom:
        2px solid #222;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;

    font-weight: 800;

    line-height: 1.2;
}

.section-title::before {
    content: "";

    width: 6px;

    height: 28px;

    background:
        linear-gradient(
            180deg,
            var(--purple) 0%,
            var(--purple) 50%,
            var(--orange) 50%,
            var(--orange) 100%
        );

    display: inline-block;

    flex-shrink: 0;

    border-radius: 3px;
}


/* ============================================================
   NEWS CARDS
   ============================================================ */

.news,
.news-card {
    width: 100%;

    max-width: 100%;

    background: #fff;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    padding: 18px;

    margin:
        0 0 22px;

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.news:hover,
.news-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-lg);

    border-color:
        #d7d9dc;
}

.news img,
.news-card img,
.full-img {
    width: 100%;

    height: auto;

    max-height: 540px;

    object-fit: cover;

    display: block;

    border-radius: 6px;

    margin-bottom: 15px;

    background: #ececec;
}

.news-card h2,
.news h2 {
    margin:
        5px 0 9px;

    color: #151515;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;

    line-height: 1.23;

    font-weight: 800;

    letter-spacing: -.25px;
}

.news-card h2 a,
.news h2 a {
    transition:
        color var(--transition);
}

.news-card h2 a:hover,
.news h2 a:hover {
    color:
        var(--purple);
}

.news-card p,
.news p {
    margin: 0;

    color:
        var(--text-soft);

    font-size: 16px;

    line-height: 1.75;
}


/* ============================================================
   META
   ============================================================ */

.meta {
    color:
        var(--muted);

    font-size: 11px;

    margin-bottom: 10px;

    text-transform: uppercase;

    letter-spacing: .45px;

    font-weight: 700;
}


/* ============================================================
   CATEGORY LABEL
   ============================================================ */

.category,
.category-label,
.badge {
    display: inline-block;

    padding:
        4px 9px;

    margin-bottom: 8px;

    border-radius: 20px;

    background:
        var(--purple-light);

    color:
        var(--purple);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .4px;
}

.category.orange,
.badge-orange {
    background:
        var(--orange-light);

    color:
        var(--orange-dark);
}

.category.green,
.badge-green {
    background:
        var(--green-light);

    color:
        var(--green-dark);
}


/* ============================================================
   READ MORE
   ============================================================ */

.read-more,
.readmore-btn {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 13px;

    color:
        var(--purple);

    font-weight: 800;

    font-size: 14px;

    transition:
        color var(--transition),
        transform var(--transition);
}

.read-more::after,
.readmore-btn::after {
    content: "→";

    transition:
        transform var(--transition);
}

.read-more:hover,
.readmore-btn:hover {
    color:
        var(--orange-dark);

    text-decoration: none;
}

.read-more:hover::after,
.readmore-btn:hover::after {
    transform:
        translateX(4px);
}


/* ============================================================
   HERO NEWS
   ============================================================ */

.hero-news {
    position: relative;

    background: #111;

    overflow: hidden;

    border-radius: 9px;

    margin-bottom: 27px;

    box-shadow:
        var(--shadow-lg);
}

.hero-news::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border:
        2px solid rgba(255,255,255,.08);

    border-radius: 9px;
}

.hero-news img {
    width: 100%;

    min-height: 400px;

    object-fit: cover;

    display: block;

    opacity: .84;

    transition:
        transform .45s ease,
        opacity .45s ease;
}

.hero-news:hover img {
    transform:
        scale(1.025);

    opacity: .9;
}

.hero-news-content {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
        80px 30px
        28px;

    color: #fff;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.95)
        );
}

.hero-news-content h1 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 38px;

    line-height: 1.15;

    font-weight: 800;

    max-width: 900px;
}


/* ============================================================
   HERO BUTTON
   ============================================================ */

.hero-news .btn,
.hero-news button {
    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-dark)
        );

    color: #fff;

    border: none;

    margin-top: 14px;
}

.hero-news .btn:hover,
.hero-news button:hover {
    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-dark)
        );
}


/* ============================================================
   ARTICLE PAGE
   ============================================================ */

.full-article {
    background: #fff;

    border:
        1px solid var(--border);

    border-radius: 8px;

    padding: 32px;

    margin-top: 25px;

    box-shadow:
        var(--shadow-md);
}

.full-article h1 {
    margin:
        0 0 12px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 42px;

    line-height: 1.2;

    color: #111;

    letter-spacing: -.45px;
}

.full-article p {
    color: #333;

    font-size: 18px;

    line-height: 1.9;

    margin-top: 0;
}

.full-article img {
    display: block;

    width: 100%;

    max-height: 680px;

    object-fit: contain;

    margin:
        25px auto;

    border-radius: 6px;
}

.full-article h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 29px;

    line-height: 1.3;

    margin-top: 30px;

    padding-bottom: 8px;

    border-bottom:
        2px solid #222;
}

.full-article h3 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;

    margin-top: 25px;
}

.full-article blockquote {
    margin:
        25px 0;

    padding:
        15px 20px;

    border-left:
        5px solid var(--purple);

    background:
        var(--purple-light);

    color: #555;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar h3 {
    margin:
        0 0 15px;

    padding-bottom:
        10px;

    color: #222;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    border-bottom:
        3px solid var(--purple);

    line-height: 1.25;
}

.sidebar-item {
    padding:
        13px 0;

    border-bottom:
        1px solid #e5e5e5;

    transition:
        padding-left var(--transition);
}

.sidebar-item:last-child {
    border-bottom: 0;
}

.sidebar-item:hover {
    padding-left: 4px;
}

.sidebar-item a {
    color: #333;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.45;

    transition:
        color var(--transition);
}

.sidebar-item a:hover {
    color:
        var(--purple);
}


/* ============================================================
   SIDEBAR NUMBERED STORIES
   ============================================================ */

.sidebar-item-number {
    display: flex;

    gap: 12px;

    align-items: flex-start;
}

.sidebar-item-number span {
    min-width: 29px;

    height: 29px;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-dark)
        );

    color: #fff;

    border-radius: 50%;

    text-align: center;

    line-height: 29px;

    font-weight: 800;

    font-size: 13px;
}


/* ============================================================
   BUTTONS
   PURPLE PRIMARY
   ============================================================ */

button,
.btn {
    background:
        linear-gradient(
            135deg,
            var(--purple),
            #7b1fa2
        );

    color: #fff;

    border: none;

    border-radius: 6px;

    padding:
        10px 18px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

button:hover,
.btn:hover {
    background:
        linear-gradient(
            135deg,
            var(--purple-dark),
            #5a167c
        );

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 14px
        rgba(106,27,154,.22);
}


/* ============================================================
   GREEN SECONDARY BUTTON
   ============================================================ */

.btn-green,
.green-btn {
    background:
        linear-gradient(
            135deg,
            var(--green),
            var(--green-dark)
        );
}

.btn-green:hover,
.green-btn:hover {
    background:
        linear-gradient(
            135deg,
            #43a047,
            #2e7d32
        );
}


/* ============================================================
   ORANGE SECONDARY BUTTON
   ============================================================ */

.btn-orange,
.orange-btn {
    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-dark)
        );
}

.btn-orange:hover,
.orange-btn:hover {
    background:
        linear-gradient(
            135deg,
            #e65100,
            #bf4a00
        );
}


/* ============================================================
   ADVERTISEMENT BOX
   ============================================================ */

.ad-box {
    background:
        linear-gradient(
            135deg,
            #fff,
            #fafafa
        );

    min-height: 100px;

    border:
        1px dashed #cfcfcf;

    border-radius: 7px;

    color: #999;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 20px 0;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}


/* ============================================================
   VIDEO GRID
   ============================================================ */

.video-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 20px;
}

.video-card {
    background: #fff;

    padding: 12px;

    border-radius: 8px;

    border:
        1px solid var(--border);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.video-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-md);
}


/* ============================================================
   EDUCATION
   ORANGE + PURPLE
   ============================================================ */

.edu-btn {
    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-dark)
        );

    color: #fff;

    padding:
        10px 18px;

    border: none;

    border-radius: 6px;

    font-size: 16px;

    cursor: pointer;

    margin: 10px 0;

    font-weight: 700;

    transition: .2s ease;
}

.edu-btn:hover {
    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-dark)
        );

    transform:
        translateY(-1px);
}

.class-btn {
    background:
        linear-gradient(
            135deg,
            var(--purple),
            #7b1fa2
        );

    color: #fff;

    padding:
        7px 13px;

    border: none;

    border-radius: 5px;

    margin: 5px;

    cursor: pointer;

    font-weight: 700;
}

.class-btn:hover {
    background:
        var(--purple-dark);

    transform:
        translateY(-1px);
}


/* ============================================================
   Q&A
   ============================================================ */

.qa-box {
    background: #fff;

    padding: 18px;

    margin: 14px 0;

    border-radius: 8px;

    border-left:
        4px solid var(--purple);

    border-top:
        1px solid var(--border);

    border-right:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    box-shadow:
        var(--shadow-sm);
}

.qa-ans {
    color:
        var(--green-dark);

    margin-top: 8px;

    line-height: 1.7;
}


/* ============================================================
   FOOD CARD
   ============================================================ */

.food-card {
    position: relative;

    overflow: hidden;

    border-radius: 8px;

    background: #fff;

    border:
        1px solid #ddd;

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.food-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-md);
}

.food-card img {
    width: 100%;

    height: 200px;

    object-fit: cover;

    display: block;

    transition:
        transform .35s ease;
}

.food-card:hover img {
    transform:
        scale(1.04);
}

.food-title {
    position: absolute;

    bottom: 0;

    width: 100%;

    background:
        rgba(255,255,255,.95);

    color: #3e2723;

    padding: 9px;

    text-align: center;

    font-weight: 800;

    border-top:
        2px solid var(--orange);
}


/* ============================================================
   CAREER
   ============================================================ */

.career-card {
    max-width: 340px;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            #7b1fa2
        );

    border-radius: 14px;

    padding: 22px;

    box-shadow:
        0 10px 30px
        rgba(75,30,130,.25);

    transition: .25s ease;
}

.career-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 16px 38px
        rgba(75,30,130,.35);
}

.career-link {
    display: block;

    color: #fff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}

.career-link h3 {
    margin:
        0 0 8px;

    font-size: 21px;

    font-weight: 800;
}

.career-link p {
    margin: 0;

    font-size: 15px;

    opacity: .95;
}


/* ============================================================
   HINDI EDUCATION
   ============================================================ */

.hindi-link {
    display: block;

    color:
        var(--purple);

    font-size: 20px;

    font-weight: 800;

    margin: 12px 0;

    transition:
        color var(--transition);
}

.hindi-link:hover {
    color:
        var(--orange-dark);

    text-decoration: underline;
}


/* ============================================================
   TABLE
   ============================================================ */

table {
    width: 100%;

    border-collapse: collapse;

    background: #fff;

    border:
        1px solid var(--border);

    border-radius: 7px;

    overflow: hidden;
}

th {
    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-dark)
        );

    color: #fff;

    font-weight: 800;

    text-align: left;
}

th,
td {
    padding:
        11px 13px;

    border-bottom:
        1px solid var(--border);

    font-size: 14px;
}

tr:hover td {
    background:
        var(--purple-light);
}


/* ============================================================
   FORM ELEMENTS
   ============================================================ */

input,
select,
textarea {
    width: 100%;

    border:
        1px solid #d5d5d5;

    border-radius: 6px;

    padding:
        10px 12px;

    background: #fff;

    color: #222;

    font-size: 15px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

input:focus,
select:focus,
textarea:focus {
    border-color:
        var(--purple);

    box-shadow:
        0 0 0 3px
        rgba(106,27,154,.12);

    outline: none;
}


/* ============================================================
   ALERTS
   ============================================================ */

.alert {
    padding:
        13px 16px;

    border-radius: 7px;

    margin:
        15px 0;

    font-size: 14px;

    font-weight: 600;
}

.alert-success {
    background:
        var(--green-light);

    color:
        var(--green-dark);

    border:
        1px solid #c8e8c9;
}

.alert-danger {
    background:
        #fdf0ff;

    color:
        var(--purple-dark);

    border:
        1px solid #e5c9ef;
}

.alert-info {
    background:
        var(--orange-light);

    color:
        #a94d00;

    border:
        1px solid #f5d2a4;
}


/* ============================================================
   FOOTER
   BLACK — PRESERVED
   ============================================================ */

footer {
    background: #101010;

    color: #cfcfcf;

    padding:
        35px 20px;

    text-align: center;

    margin-top: 45px;

    font-size: 14px;

    border-top:
        4px solid var(--purple);
}

footer a {
    color: #fff;

    transition:
        color var(--transition);
}

footer a:hover {
    color:
        var(--orange);
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #eeeeee;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            var(--purple),
            var(--green)
        );

    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        var(--orange);
}


/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */

@media (max-width: 768px) {

    .container {
        width: 94%;
    }

    .main-header {
        padding:
            19px 10px;
    }

    .main-header h1 {
        font-size: 34px;

        letter-spacing: -.7px;
    }

    .breaking-news {
        display: block;

        text-align: center;

        font-size: 14px;
    }

    .bn-title {
        display: block;

        margin: 0;

        padding: 8px;
    }

    .sub-header {
        justify-content: center;

        position: relative;

        top: auto;
    }

    .sub-header a {
        font-size: 12px;

        padding:
            10px 9px;
    }

    .content-area {
        display: block;

        margin-top: 18px;
    }

    .sidebar {
        margin-top: 25px;
    }

    .news,
    .news-card {
        padding: 14px;

        margin-bottom: 18px;
    }

    .news-card h2,
    .news h2 {
        font-size: 23px;
    }

    .news-card p,
    .news p {
        font-size: 15.5px;
    }

    .full-article {
        padding: 20px;
    }

    .full-article h1 {
        font-size: 31px;
    }

    .full-article p {
        font-size: 17px;

        line-height: 1.8;
    }

    .full-article h2 {
        font-size: 25px;
    }

    .hero-news img {
        min-height: 300px;
    }

    .hero-news-content {
        padding:
            70px 20px
            20px;
    }

    .hero-news-content h1 {
        font-size: 28px;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .food-card img {
        height: 190px;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .datetime {
        font-size: 11px;

        padding:
            6px 8px;
    }

    .main-header h1 {
        font-size: 28px;
    }

    .sub-header a {
        font-size: 11px;

        padding:
            8px 6px;

        letter-spacing: 0;
    }

    .section-title {
        font-size: 22px;

        margin-bottom: 15px;
    }

    .section-title::before {
        width: 5px;

        height: 24px;
    }

    .news-card h2,
    .news h2 {
        font-size: 21px;
    }

    .news-card p,
    .news p {
        font-size: 15px;
    }

    .full-article {
        padding: 16px;
    }

    .full-article h1 {
        font-size: 27px;
    }

    .full-article p {
        font-size: 16px;
    }

    .full-article h2 {
        font-size: 23px;
    }

    .hero-news img {
        min-height: 240px;
    }

    .hero-news-content {
        padding:
            55px 15px
            15px;
    }

    .hero-news-content h1 {
        font-size: 23px;
    }

    button,
    .btn {
        font-size: 14px;

        padding:
            9px 14px;
    }

    .sidebar {
        padding: 16px;
    }

    .sidebar h3 {
        font-size: 20px;
    }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline:
        2px solid var(--purple);

    outline-offset: 2px;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;
    }
}


/* ============================================================
   PRINT
   ============================================================ */

@media print {

    .sub-header,
    .breaking-news,
    .sidebar,
    footer,
    button,
    .btn,
    .ad-box {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .news,
    .news-card,
    .full-article {
        box-shadow: none;

        border: none;
    }
}