/*
 * blog-pages-v1.css
 * Shared styles for /newblogs/, /newblogslisting/, /authors/.
 * All selectors are namespaced (.np-blogs-*, .np-listing-*, .np-author-*).
 * Bump ?ver= when editing.
 */

/* Local Nexa fallbacks — the global custom.css declarations point to a
   CORS-protected CloudFront origin that 'nicosure.in' allows but local/stg
   do not. Local copies live at wp-content/themes/storefront/fonts/.
   These declarations override the global ones in the cascade so the page
   uses local files everywhere; on production they're identical to S3. */
@font-face {
    font-family: 'Nexa';
    src: local('Nexa Book'), local('Nexa-Book'),
         url('../fonts/Nexa-Book.woff2') format('woff2'),
         url('../fonts/Nexa-Book.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nexa';
    src: local('Nexa Regular'), local('Nexa-Regular'),
         url('../fonts/Nexa-Regular.woff2') format('woff2'),
         url('../fonts/Nexa-Regular.woff')  format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nexa';
    src: local('Nexa Bold'), local('NexaBold'),
         url('../fonts/NexaBold.woff2') format('woff2'),
         url('../fonts/NexaBold.woff')  format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nexa';
    src: local('Nexa Black'), local('Nexa-Black'),
         url('../fonts/Nexa-Black.woff2') format('woff2'),
         url('../fonts/Nexa-Black.woff')  format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nexa';
    src: local('Nexa Light'), local('NexaLight'),
         url('../fonts/NexaLight.woff2') format('woff2'),
         url('../fonts/NexaLight.woff')  format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
    --np-h1: #066ef1;           /* brand H1 color */
    --np-h2: #004051;           /* brand H2 color */
    --np-blue: #066ef1;         /* alias of H1 for accent / interactive elements */
    --np-blue-dark: #004051;
    --np-blue-darker: #002a37;
    --np-button: #066ef1;       /* brand H1 blue */
    --np-button-hover: #0556bd;
    --np-cyan: #00c2dd;
    --np-bg-soft: #f6fbff;
    --np-bg-band: #e6f4fa;
    --np-border: #e4ecf2;
    --np-text: #055569;         /* site body color */
    --np-muted: #5b6b75;
}

/* ===== Page wrappers (account for existing fixed header) ===== */
.np-blogs-page,
.np-listing-page,
.np-author-page {
    padding-top: 10px;
    padding-bottom: 0;
    color: var(--np-text);
    font-family: 'Nexa', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: #fff;
}

.np-blogs-page .container,
.np-listing-page .container,
.np-author-page .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Breadcrumb ===== */
.np-blogs-breadcrumb {
    font-size: 14px;
    color: var(--np-muted);
    padding: 18px 0 6px;
}

.np-blogs-breadcrumb a {
    color: var(--np-muted);
    text-decoration: none;
}

.np-blogs-breadcrumb a:hover { color: var(--np-blue); }
.np-blogs-breadcrumb .sep { margin: 0 6px; color: #b8c3cc; }
.np-blogs-breadcrumb .current { color: var(--np-text); }

/* ===== Page titles ===== */
.np-blogs-title,
.np-listing-title {
    font-size: 38px;
    font-weight: 700;
    color: var(--np-blue);
    margin: 14px 0 32px;
    text-align: center;
    line-height: 1.2;
}

.np-listing-title { text-align: left; margin-bottom: 28px; font-size: 34px; }

/* ===== Two-column layout (main + sidebar) ===== */
.np-blogs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 30px;
    align-items: start;
}

.np-blogs-main,
.np-listing-main { min-width: 0; }

.np-blogs-sidebar {
    position: sticky;
    top: 110px;
}

/* ===== Article sections (landing page) ===== */
.np-blogs-section { margin-bottom: 36px; }

.np-blogs-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--np-h2);
    margin: 0 0 18px;
}

.np-blogs-grid,
.np-listing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.np-listing-grid { gap: 22px; }

/* ===== Card ===== */
.np-blogs-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--np-border);
    border-radius: 6px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.np-blogs-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10, 114, 187, 0.10);
    border-color: #c9dceb;
}

.np-blogs-card-imgwrap {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f0f4f7;
}

.np-blogs-card-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.np-blogs-card-title {
    display: block;
    padding: 14px 16px 18px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--np-text);
}

/* ===== View all link ===== */
.np-blogs-viewall-row {
    margin-top: 14px;
    text-align: center;
}

.np-blogs-viewall {
    font-size: 15px;
    color: var(--np-blue);
    text-decoration: underline;
    font-weight: 700;
}

/* ===== Pagination (decorative) ===== */
.np-listing-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 34px 0 12px;
}

.np-listing-pager-page,
.np-listing-pager-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 15px;
    color: var(--np-muted);
    text-decoration: none;
    border-radius: 4px;
    transition: background .15s, color .15s;
}

.np-listing-pager-page:hover,
.np-listing-pager-arrow:hover { color: var(--np-blue); background: #eef6fb; }

.np-listing-pager-page.is-current {
    background: var(--np-button);
    color: #fff;
    font-weight: 700;
}

/* ===== Best Sellers sidebar ===== */
.np-blogs-bestsellers {
    border: 1px solid var(--np-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--np-bg-soft);
}

.np-blogs-bestsellers-header {
    background: var(--np-blue-dark);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 16px;
    letter-spacing: .02em;
}

.np-blogs-bestsellers-body {
    padding: 22px 18px 24px;
    text-align: center;
}

.np-blogs-bestsellers-imglink {
    display: block;
    width: 130px;
    margin: 0 auto 14px;
}

.np-blogs-bestsellers-imglink img {
    width: 100%;
    height: auto;
    display: block;
}

.np-blogs-bestsellers-name {
    color: var(--np-blue);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.4;
}

.np-blogs-buybtn {
    display: inline-block;
    background: var(--np-button);
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 32px;
    border-radius: 24px;
    transition: background .15s;
}

.np-blogs-buybtn:hover { background: var(--np-button-hover); color: #fff; }

/* ===== SEO band (full-width) ===== */
.np-blogs-seo-band {
    margin-top: 30px;
    background: var(--np-bg-band);
    padding: 40px 0;
}

.np-blogs-seo-band .container {
    max-width: 980px;
}

.np-blogs-seo-text {
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: #2d4451;
    margin: 0;
}

.np-blogs-seo-heading {
    text-align: center;
    color: var(--np-blue);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 18px;
}

.np-blogs-seo-allrow {
    text-align: center;
    margin-top: 16px;
}

.np-blogs-seeall {
    color: var(--np-blue);
    text-decoration: underline;
    font-size: 14px;
    font-weight: 700;
}

/* ===== Author page ===== */
.np-author-header {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 0 28px;
    border-bottom: 1px solid var(--np-border);
    margin-bottom: 28px;
}

.np-author-headshot {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e5edf3;
}

.np-author-headshot img,
.np-author-headshot svg {
    width: 100%;
    height: 100%;
    display: block;
}

.np-author-id { flex: 0 1 auto; min-width: 0; text-align: right; }

.np-author-name {
    color: var(--np-blue);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.2;
}

.np-author-role {
    color: var(--np-text);
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 12px;
}

.np-author-social {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.np-author-social-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--np-blue);
    color: #fff;
    text-decoration: none;
    transition: background .15s;
}

.np-author-social-icon:hover { background: var(--np-blue-dark); color: #fff; }

.np-author-section { margin-bottom: 32px; }

.np-author-section-title {
    color: var(--np-h1);
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 16px;
    line-height: 1.2;
}

.np-author-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--np-text);
    margin: 0;
}

.np-author-list {
    margin: 0;
    padding-left: 18px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--np-text);
}

.np-author-list li { margin-bottom: 4px; }

.np-author-list-2col {
    columns: 2;
    column-gap: 36px;
}

.np-author-list-bold li { font-weight: 400; }
.np-author-list-bold strong { color: var(--np-text); font-weight: 700; }

.np-author-reviewed {
    margin: 36px 0 24px;
}

.np-author-reviewed-title {
    color: var(--np-h1);
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 24px;
    line-height: 1.2;
}

.np-author-reviewed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 26px;
}

.np-author-reviewed-grid .np-blogs-card-title {
    text-align: center;
    font-weight: 600;
    color: var(--np-text);
}

.np-author-loadmore-row {
    text-align: center;
    margin-top: 6px;
}

.np-author-loadmore {
    display: inline-block;
    background: var(--np-button);
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    padding: 11px 34px;
    border-radius: 26px;
    transition: background .15s;
}

.np-author-loadmore:hover { background: var(--np-button-hover); color: #fff; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
    .np-blogs-layout {
        grid-template-columns: 1fr;
    }

    .np-blogs-sidebar {
        position: static;
        max-width: 360px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 720px) {
    .np-blogs-page,
    .np-listing-page,
    .np-author-page { padding-top: 10px; }

    .np-blogs-title,
    .np-listing-title { font-size: 26px; }

    .np-blogs-section-title { font-size: 20px; }
    .np-author-name { font-size: 24px; }
    .np-author-section-title { font-size: 22px; }
    .np-author-reviewed-title { font-size: 22px; }

    .np-blogs-grid,
    .np-listing-grid,
    .np-author-reviewed-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .np-author-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .np-author-id { text-align: center; }

    .np-author-social { justify-content: center; }

    .np-author-list-2col { columns: 1; }

    .np-blogs-seo-band { padding: 28px 0; }
}

/* ============================================
   Authorship block on single article (v2)
   ============================================ */
.ns-blog-authorship {
    margin: 2.5rem 0 1.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid #e3e8ec;
    border-bottom: 1px solid #e3e8ec;
    font-size: 0.95rem;
    color: #333;
}
.ns-blog-authorship p {
    margin: 0.25rem 0;
}
.ns-blog-writtenby span {
    color: #111;
    font-weight: 600;
}
.ns-blog-reviewedby a {
    color: #0a7d61;
    font-weight: 600;
    text-decoration: none;
}
.ns-blog-reviewedby a:hover {
    text-decoration: underline;
}

/* ============================================
   Author page load-more (v2)
   ============================================ */
.np-author-loadmore.is-loading {
    opacity: 0.6;
    pointer-events: none;
}