/*
Theme Name: Newsup Child
Template: newsup
Version: 1.0.0
Text Domain: newsup-child
*/
/*
====================================
DESIGN TOKENS
Source: nctf-style-guide-v2.html — single source of truth for brand
colors/radius/shadow. Reference these with var(--x) instead of hex.
Loaded globally (see inc/enqueue.php $styles list), so this file was
just sitting empty before.
====================================
*/

:root {
    --green: #2E9E5B;
    --green-light: #E8F7EE;
    --teal: #1A8C8C;
    --amber: #F5A623;
    --amber-light: #FEF3DC;
    --coral: #F26B5B;
    --coral-light: #FDEAE7;
    --purple: #7B5EA7;
    --purple-light: #F0EBF8;
    --sky: #3AAFDA;
    --surface: #FAFCFA;
    --white: #FFFFFF;
    --charcoal: #2D2D2D;
    --muted: #7A8591;
    --border: #E4EBE6;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 50px;

    --shadow-card: 0 4px 16px rgba(0, 0, 0, .07);
    --shadow-btn: 0 4px 12px rgba(46, 158, 91, .25);

    /* English fonts */
    --font-en-display: 'Fredoka One', cursive;
    --font-en-body: 'Nunito', sans-serif;

    /* Bengali fonts (site serves EN + BN content — see gtranslate
       switcher in header.php) */
    --font-bn-display: 'Baloo Da 2', cursive;
    --font-bn-body: 'Hind Siliguri', sans-serif;
    --font-bn-ui: 'Noto Sans Bengali', sans-serif;
}
/* Bengali body text */
html[lang="bn"] body,
html[lang="bn"] p,
html[lang="bn"] li,
html[lang="bn"] span,
html[lang="bn"] a,
html[lang="bn"] font {
    font-family: var(--font-bn-body) !important;
}

/* Bengali headings */
html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] h3,
html[lang="bn"] h4,
html[lang="bn"] h5,
html[lang="bn"] h6 {
    font-family: var(--font-bn-display) !important;
}

/* Buttons, inputs, navigation */
html[lang="bn"] button,
html[lang="bn"] input,
html[lang="bn"] textarea,
html[lang="bn"] select,
html[lang="bn"] .menu,
html[lang="bn"] .nav {
    font-family: var(--font-bn-ui) !important;
}

/*
Buttons — use case per style guide:
  .btn-primary  Subscribe, Save, Submit    green fill / white text
  .btn-amber    Join, Register, Donate     amber fill / dark text
  .btn-outline  Read More, View All        green border / green text
  .btn-coral    Report, Alert, urgent CTA  coral fill / white text
  .btn-ghost    Load More, Cancel          white fill / gray border
*/
.btn-primary,
.btn-amber,
.btn-outline,
.btn-coral,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-family: var(--font-en-body);
    font-size: 14px;
    font-weight: 700;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .18s;
}

.btn-primary {
    background: var(--green) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-btn) !important;
    border-color: var(--green) !important;
}

.btn-primary:hover {
    background: #258a4d !important;
    color: var(--white) !important;
}


.btn-amber {
    background: var(--amber) !important;
    color: var(--charcoal) !important;
    box-shadow: 0 4px 12px rgba(245, 166, 35, .3) !important;
}

.btn-amber:hover {
    background: #e0951a !important;
    color: var(--charcoal);
}

.btn-outline {
    background: transparent !important;
    color: var(--green) !important;
    border-color: var(--green) !important;
}

.btn-outline:hover {
    background: var(--green) !important;
    color: var(--white) !important;
}
.btn-outline.active {
    background: var(--green) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-btn) !important;
    border-color: var(--green) !important;
}

.btn-coral {
    background: var(--coral) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 12px rgba(242, 107, 91, .3) !important;
}

.btn-coral:hover {
    background: #e05744 !important;
    color: var(--white) !important;
}

.btn-ghost {
    background: var(--white) !important;
    color: var(--muted) !important;
    border-color: var(--border) !important;
}

.btn-ghost:hover {
    border-color: var(--green) !important;
    color: var(--green) !important;
}

/*
"New" badge — used on every card partial (front page, archive, tag,
category, search). Auto-applied by inc/news/new-badge.php, never a
real taxonomy term, so it never shows up in Popular Tags or anywhere
tags are picked in wp-admin.
*/
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
}

.badge-new {
    background: var(--amber);
    color: var(--charcoal);
}

.badge-live {
    background: var(--green);
    color: var(--white);
}


#content {
    padding: 0 20px !important;
    margin: 0 !important;
}


.mg-sidebar .mg-widget {
    margin-bottom: 30px;
    padding: 20px 20px !important;
    border-radius: 0;
    border-width: 1px;
    border-style: solid;
    overflow-x: hidden;
    border-radius: 20px;
}

.archive-title,
.front-section-title
 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--font-en-display);
    font-weight: 400;
    color: var(--charcoal);
}

.front-section-accent {
    width: 4px;
    height: 28px;
    background: var(--amber);
    border-radius: 20px;
    display: inline-block;
}

.archive-header .front-section-accent {
    flex-shrink: 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.section-header .section-title {
    margin: 0;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
input[type="submit"]:focus,
input[type="reset"]:focus,
button:focus {
    background: var(--green) !important;
    border-color: var(--green) !important;
    color: #ffffff !important;
}