/* ==========================================================================
   Nunoo Blog - Modern UI layer
   --------------------------------------------------------------------------
   What    : A last-loaded override sheet that modernises the look of the
             Maan News theme (typography, spacing, cards, forms, footer).
   Loaded  : resources/views/frontend/master.blade.php, after color-change.css
   Rules   : - No markup changes, no original file is modified.
             - Nothing is tied to a theme-* class, so the admin
               "theme colour" picker keeps working.
             - !important is used only where color-change.css already uses it.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
    /* Surfaces & text */
    --nb-ink: #0B1220;
    --nb-body: #475569;
    --nb-muted: #64748B;
    --nb-bg: #F6F7F9;
    --nb-surface: #FFFFFF;
    --nb-border: #E7EAF0;

    /* Accent (default; re-mapped per theme-* palette below) */
    --nb-accent: #ED1A3B;
    --nb-accent-soft: rgba(237, 26, 59, .08);

    /* Breaking-news red. Fixed on purpose: the badge keeps its "stop the
       press" red whatever theme-* colour the admin picks. */
    --nb-breaking: #C8102E;

    /* Geometry */
    --nb-radius-sm: 8px;
    --nb-radius: 14px;
    --nb-radius-lg: 20px;
    --nb-radius-pill: 999px;

    /* Elevation */
    --nb-shadow-sm: 0 1px 2px rgba(11, 18, 32, .05);
    --nb-shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 12px 28px -16px rgba(11, 18, 32, .18);
    --nb-shadow-lg: 0 24px 48px -24px rgba(11, 18, 32, .28);

    /* Motion */
    --nb-ease: cubic-bezier(.22, .61, .36, 1);
    --nb-speed: .22s;

    /* Reading measure for article bodies */
    --nb-measure: 72ch;
}

/*
 * One accent token per palette so every theme choice looks intentional.
 * (The stock theme-magenta accent is #FF00FF, which reads as neon - it is
 *  deliberately tamed here.)
 */
.theme-red     { --nb-accent: #ED1A3B; --nb-accent-soft: rgba(237, 26, 59, .08); }
.theme-maroon  { --nb-accent: #8C1D2C; --nb-accent-soft: rgba(140, 29, 44, .08); }
.theme-magenta { --nb-accent: #D6246E; --nb-accent-soft: rgba(214, 36, 110, .08); }
.theme-pink    { --nb-accent: #D6427C; --nb-accent-soft: rgba(214, 66, 124, .08); }
.theme-violet  { --nb-accent: #6D28D9; --nb-accent-soft: rgba(109, 40, 217, .08); }
.theme-blue    { --nb-accent: #1D6FE0; --nb-accent-soft: rgba(29, 111, 224, .08); }
.theme-green   { --nb-accent: #12855B; --nb-accent-soft: rgba(18, 133, 91, .08); }
.theme-orange  { --nb-accent: #D9730D; --nb-accent-soft: rgba(217, 115, 13, .08); }
.theme-brown   { --nb-accent: #96552F; --nb-accent-soft: rgba(150, 85, 47, .08); }
.theme-dark    { --nb-accent: #6B7280; --nb-accent-soft: rgba(107, 114, 128, .08); }

/* ==========================================================================
   2. Typography
   ========================================================================== */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--nb-body);
    background: var(--nb-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    color: var(--nb-ink);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.015em;
    margin: 0 0 .5rem;
}

h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
h2 { font-size: clamp(1.45rem, 2.2vw, 1.95rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
h4 { font-size: 1.0625rem; }
h5 { font-size: 1rem; }
h6 { font-size: .9375rem; }

p { margin: 0 0 1rem; }

a {
    color: var(--nb-ink);
    text-decoration: none;
    transition: color var(--nb-speed) var(--nb-ease),
        background-color var(--nb-speed) var(--nb-ease),
        border-color var(--nb-speed) var(--nb-ease),
        opacity var(--nb-speed) var(--nb-ease);
}

a:hover { color: var(--nb-accent); }

::selection {
    background: var(--nb-accent);
    color: #fff;
}

/* Visible, consistent keyboard focus everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--nb-accent);
    outline-offset: 2px;
    border-radius: var(--nb-radius-sm);
}

/* Section rhythm: a calmer beat than the stock padding. */
section { padding: 56px 0; }

/*
 * Home page: the "Top Categories" block that used to sit between these two
 * sections is commented out in home.blade.php, so their paddings now stack
 * (Top News' own 60px bottom padding + the 56px from the rule above) and read
 * as a hole in the page. Top News already carries the bottom padding the rest
 * of the page uses, so drop the duplicate and let the adjacency do the work.
 * Because the rule keys off the sibling relationship it stops applying the
 * moment the block is restored.
 */
.maan-top-news-section + .maan-most-popular-section { padding-top: 0; }

/* ==========================================================================
   3. Top bar (date / clock / socials)
   ========================================================================== */
#main-wrapper .maan-top-bar {
    background: var(--nb-ink);
    color: rgba(255, 255, 255, .72);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px;
    padding: 9px 0;
}

#main-wrapper .maan-top-bar .maan-current-week,
#main-wrapper .maan-top-bar .maan-current-day {
    color: #fff;
    font-weight: 500;
}

.maan-current-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.maan-current-date .icon svg {
    fill: var(--nb-accent);
    width: 13px;
    height: 13px;
    vertical-align: -2px;
}

#clock {
    font-family: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    opacity: .8;
    padding: 0;
    text-align: left;
}

/* The stock theme floats the clock against the social list and clamps that
   list to 163px, while spacing its items with margin-right. Five 30px buttons
   therefore needed 238px inside a 160px column, so the list overflowed out of
   its start edge and sat on top of the clock. The list now takes the full
   column, the flex gap replaces the per-item margins, and it may wrap instead
   of ever overlapping. */
#main-wrapper .maan-top-bar .date-time {
    min-width: 0;
}

#main-wrapper .maan-top-bar .maan-social-link {
    max-width: none;
    margin-left: auto;
}

#main-wrapper .maan-social-link ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    border: 0;
    margin: 0;
    padding: 0;
}

#main-wrapper .maan-social-link ul li {
    margin: 0;
}

#main-wrapper .maan-social-link ul li a {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--nb-radius-pill);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    transition: background-color var(--nb-speed) var(--nb-ease),
        color var(--nb-speed) var(--nb-ease),
        transform var(--nb-speed) var(--nb-ease);
}

#main-wrapper .maan-social-link ul li a:hover,
#main-wrapper .maan-social-link ul li a:focus {
    background: var(--nb-accent);
    color: #fff;
    transform: translateY(-1px);
}

/* ==========================================================================
   4. Masthead (logo + advert)
   ========================================================================== */
#main-wrapper .maan-mid-bar {
    background: var(--nb-surface);
    border-bottom: 1px solid var(--nb-border);
    padding: 18px 0;
}

.maan-logo { max-width: 190px; }

.maan-logo img {
    max-height: 62px;
    width: auto;
    object-fit: contain;
}

.maan-header-adds img,
.maan-header-adds picture {
    border-radius: var(--nb-radius-sm);
    max-height: 84px;
    width: auto;
    object-fit: contain;
}

/* ==========================================================================
   5. Primary navigation
   (stock theme paints this bar in the accent colour; a white surface with an
    ink/ink-underline treatment reads far more current)
   ========================================================================== */
#main-wrapper .maan-manu-bar {
    background: var(--nb-surface);
    border-bottom: 1px solid var(--nb-border);
    box-shadow: var(--nb-shadow-sm);
    padding: 0;
    min-height: 56px;
}

#main-wrapper .maan-main-manu > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The stock sheet spaces the items with a 24px margin-right that the flex gap
   above never replaced: eight items then needed ~1094px inside a ~1056px
   column, so the last one ("Contact Us") was squeezed onto a second line.
   The gap now does the spacing on its own, and the row may wrap, so a link is
   always shown whole instead of being squashed inside its own 56px line. */
#main-wrapper .maan-main-manu > ul > li {
    margin-right: 0;
}

/* 992-1199px the lg-10 column is narrower than the row of links; the tighter
   padding above keeps as many of them as possible on the first row. */
@media (max-width: 1199.98px) {
    #main-wrapper .maan-main-manu ul li > a {
        padding: 0 10px;
    }
}

#main-wrapper .maan-main-manu ul li > a {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0 14px;
    color: var(--nb-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    position: relative;
}

#main-wrapper .maan-main-manu ul li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    background: var(--nb-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--nb-speed) var(--nb-ease);
}

#main-wrapper .maan-main-manu ul li:hover > a,
#main-wrapper .maan-main-manu ul li > a:hover,
#main-wrapper .maan-main-manu ul li.active > a {
    color: var(--nb-accent);
}

#main-wrapper .maan-main-manu ul li:hover > a::after,
#main-wrapper .maan-main-manu ul li > a:hover::after {
    transform: scaleX(1);
}

/* Dropdowns */
#main-wrapper .dropdown-menu {
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow-lg);
    padding: 8px;
    min-width: 200px;
    margin-top: 0;
}

#main-wrapper .dropdown-menu li a {
    display: block;
    height: auto;
    padding: 9px 12px;
    border-radius: var(--nb-radius-sm);
    color: var(--nb-body);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

#main-wrapper .dropdown-menu li a::after { content: none; }

#main-wrapper .dropdown-menu li a:hover,
#main-wrapper .dropdown-menu li a:focus {
    background: var(--nb-accent-soft) !important;
    color: var(--nb-accent) !important;
}

/* Search / account buttons in the bar */
#main-wrapper .maan-right-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#main-wrapper .maan-right-btns li { margin: 0; }

/*
 * Only the search/account buttons get the pill treatment. The mobile hamburger
 * (.manu-btn) is deliberately left alone: the stock theme draws its three bars
 * absolutely inside a 30x20 box, so resizing the box would misplace them.
 */
#main-wrapper .maan-search-btn,
#main-wrapper .maan-profile-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-pill);
    background: var(--nb-surface);
    color: var(--nb-ink);
    cursor: pointer;
    transition: background-color var(--nb-speed) var(--nb-ease),
        border-color var(--nb-speed) var(--nb-ease),
        color var(--nb-speed) var(--nb-ease);
}

/* the stock icons are white (built for a coloured bar): repaint for a light bar */
#main-wrapper .maan-search-btn svg,
#main-wrapper .maan-profile-btn svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

#main-wrapper .maan-search-btn:hover,
#main-wrapper .maan-profile-btn:hover {
    background: var(--nb-accent);
    border-color: var(--nb-accent);
    color: #fff;
}

#main-wrapper .maan-search-btn:hover svg path,
#main-wrapper .maan-profile-btn:hover svg path {
    fill: #fff;
}

/* ==========================================================================
   6. Overlays (search / sign-in / sign-up modals)
   ========================================================================== */
#main-wrapper .modal-dialog { margin: 8vh auto; }

#main-wrapper .modal-content {
    border: 0;
    border-radius: var(--nb-radius-lg);
    box-shadow: var(--nb-shadow-lg);
}

#main-wrapper .modal-backdrop.show { opacity: .5; }

#popupSearch .modal-content { padding: 10px; }

#popupSearch .modal-content form {
    display: flex;
    align-items: center;
    gap: 8px;
}

#popupSearch .modal-content input[type="search"] {
    flex: 1 1 auto;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-sm);
    font-size: 15px;
}

#main-wrapper .maan-user-avatar { padding: 26px; }

#main-wrapper .maan-user-avatar .maan-login-header {
    margin-bottom: 18px;
    font-size: 1.25rem;
}

#main-wrapper .maan-user-avatar .alert {
    border: 0;
    border-radius: var(--nb-radius-sm);
    font-size: 14px;
}

/* ==========================================================================
   7. Breaking-news strip
   ========================================================================== */
#main-wrapper .maan-breaking-news-section {
    background: var(--nb-surface);
    border-bottom: 1px solid var(--nb-border);
    padding: 10px 0;
}

/* The stock theme washes this label with a 10%-opacity blue, so the whole
   strip read as "blue". It is now the classic breaking-news red (--nb-breaking),
   carried through the icon and the slider arrows. */
#main-wrapper .maan-breaking-news-section .maan-slide-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--nb-radius-sm);
    background: var(--nb-breaking);
    font-weight: 700;
    color: #fff;
}

/* Retire the stock 10%-blue wash behind the label. */
#main-wrapper .maan-breaking-news-section .maan-slide-title::before {
    content: none;
}

.maan-breaking-news-section .maan-slide-title h6 {
    margin: 0;
    color: inherit;
    font-size: 14px;
    white-space: nowrap;
}

.maan-breaking-news-section .maan-slide-title .icon svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

#main-wrapper .maan-breaking-news-section a { font-size: 14px; }

#main-wrapper .maan-breaking-news-section .maan-slide-text .slick-arrow:hover {
    background: var(--nb-breaking);
    border-color: var(--nb-breaking);
}

#main-wrapper .maan-breaking-news-section .maan-slide-text .slick-arrow:hover svg {
    fill: #fff;
}

/* ==========================================================================
   8. Cards, thumbnails & media
   ========================================================================== */
#main-wrapper .card {
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow-sm);
    transition: transform var(--nb-speed) var(--nb-ease),
        box-shadow var(--nb-speed) var(--nb-ease),
        border-color var(--nb-speed) var(--nb-ease);
}

#main-wrapper .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--nb-shadow);
    border-color: #DCE1EA;
}

#main-wrapper .card img {
    display: block;
    max-width: 100%;
    height: auto;
}

#main-wrapper .maan-card-img {
    border-radius: var(--nb-radius);
    overflow: hidden;
}

#main-wrapper .maan-card-img img,
#main-wrapper .topnews-thumb img,
#main-wrapper .maan-default-post img,
#main-wrapper .trending-news-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform .55s var(--nb-ease);
}

#main-wrapper .card:hover .maan-card-img img,
#main-wrapper .topnews-big-card:hover .topnews-thumb img {
    transform: scale(1.04);
}

/* Fixed-ratio thumbnails remove the "stretched demo image" look. */
#main-wrapper .maan-list-img img,
#main-wrapper .news10-list-img img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--nb-radius-sm);
}

#main-wrapper .card .maan-card-body { padding: 16px 16px 18px; }

#main-wrapper .maan-text h4 { margin-bottom: .25rem; }

#main-wrapper .maan-text h4 a {
    color: var(--nb-ink);
    font-size: 1.0625rem;
    line-height: 1.45;
}

#main-wrapper .card:hover .maan-text h4 a { color: var(--nb-accent); }

#main-wrapper .maan-text ul li {
    color: var(--nb-muted);
    font-size: 13px;
}

#main-wrapper .maan-text ul li .maan-icon svg {
    width: 12px;
    height: 12px;
    fill: var(--nb-muted);
}

/* ==========================================================================
   9. Section headings
   ========================================================================== */
#main-wrapper .maan-title { margin-bottom: 22px; }

#main-wrapper .maan-title .maan-title-text h2 {
    display: inline-block;
    margin: 0;
    padding-bottom: 10px;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nb-ink);
}

#main-wrapper .maan-title-center .maan-title-text h2 {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ==========================================================================
   10. Vertical news lists
   ========================================================================== */
#main-wrapper .maan-news-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-wrapper .maan-news-list li {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid var(--nb-border);
}

#main-wrapper .maan-news-list li:last-child { border-bottom: 0; }

#main-wrapper .maan-news-list li .maan-list-text h4 {
    font-size: .95rem;
    line-height: 1.4;
    margin-bottom: 4px;
}

#main-wrapper .maan-news-list li .maan-list-text h4 a { color: var(--nb-ink); }

#main-wrapper .maan-news-list li:hover .maan-list-text h4 a {
    color: var(--nb-accent);
}

/* the meta row inside a list item is not a grid itself */
#main-wrapper .maan-news-list li .maan-list-text ul li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    grid-template-columns: none;
    border: 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--nb-muted);
}

/* ==========================================================================
   11. Pagination
   ========================================================================== */
#main-wrapper .maan-pagination ul,
#main-wrapper .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

#main-wrapper .maan-pagination ul li a,
#main-wrapper .maan-pagination ul li span,
#main-wrapper .pagination li a,
#main-wrapper .pagination li span {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-sm);
    background: var(--nb-surface);
    color: var(--nb-ink);
    font-size: 14px;
    font-weight: 600;
}

#main-wrapper .maan-pagination ul li a:hover,
#main-wrapper .maan-pagination ul li.active a,
#main-wrapper .pagination li a:hover,
#main-wrapper .pagination li.active span {
    background: var(--nb-accent);
    border-color: var(--nb-accent);
    color: #fff;
}

/* ==========================================================================
   12. Breadcrumb / archive header
   ========================================================================== */
#main-wrapper .maan-breadcrumb {
    background: var(--nb-surface);
    border-bottom: 1px solid var(--nb-border);
    padding: 28px 0;
}

#main-wrapper .maan-breadcrumb h1,
#main-wrapper .maan-breadcrumb h2 { margin-bottom: 6px; }

#main-wrapper .maan-breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    color: var(--nb-muted);
}

#main-wrapper .maan-breadcrumb ul li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--nb-border);
}

/* ==========================================================================
   13. Sidebar widgets
   ========================================================================== */
#main-wrapper .maan-widgets {
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
    box-shadow: var(--nb-shadow-sm);
    padding: 20px;
    margin-bottom: 24px;
}

#main-wrapper .maan-widgets .maan-title,
#main-wrapper .maan-widgets .news10-title { margin-bottom: 14px; }

#main-wrapper .maan-widgets .category-link ul,
#main-wrapper .maan-widgets .widgets-tags ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-wrapper .maan-widgets .category-link li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--nb-border);
    color: var(--nb-body);
    font-weight: 500;
    font-size: 14.5px;
}

#main-wrapper .maan-widgets .category-link li:last-child a { border-bottom: 0; }

#main-wrapper .maan-widgets .category-link li a:hover { color: var(--nb-accent); }

#main-wrapper .maan-widgets .widgets-tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#main-wrapper .maan-widgets .widgets-tags ul li a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-pill);
    background: var(--nb-bg);
    color: var(--nb-body);
    font-size: 13px;
}

#main-wrapper .maan-widgets .widgets-tags ul li a:hover {
    background: var(--nb-accent);
    border-color: var(--nb-accent);
    color: #fff;
}

/* ==========================================================================
   14. Sliders / carousels
   (the theme draws each arrow as an inline SVG sitting on a transparent
    button with a ::before "plate", so the plate carries the visual style)
   ========================================================================== */
#main-wrapper .slick-arrow::before {
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-pill);
    background: var(--nb-surface);
    box-shadow: var(--nb-shadow-sm);
    transition: background-color var(--nb-speed) var(--nb-ease),
        border-color var(--nb-speed) var(--nb-ease);
}

#main-wrapper .slick-arrow svg {
    fill: var(--nb-ink);
    transition: fill var(--nb-speed) var(--nb-ease);
}

#main-wrapper .slick-arrow:hover::before,
#main-wrapper .slick-arrow:focus::before {
    background: var(--nb-accent);
    border-color: var(--nb-accent);
}

#main-wrapper .slick-arrow:hover svg,
#main-wrapper .slick-arrow:focus svg { fill: #fff; }

#main-wrapper .slick-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

#main-wrapper .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--nb-radius-pill);
    background: #CBD5E1;
    font-size: 0;
    color: transparent;
}

#main-wrapper .slick-dots li.slick-active button { background: var(--nb-accent); }

/* ==========================================================================
   15. Article / news-detail typography
   ========================================================================== */
#main-wrapper .maan-archive-details .maan-card-body img {
    border-radius: var(--nb-radius);
    margin: 8px 0 20px;
}

#main-wrapper .maan-archive-details .maan-card-body > p {
    font-size: 16.5px;
    line-height: 1.78;
}

#main-wrapper .maan-archive-details .maan-card-body h2,
#main-wrapper .maan-archive-details .maan-card-body h3 {
    margin-top: 32px;
}

#main-wrapper .maan-archive-details .maan-card-body blockquote {
    margin: 24px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--nb-accent);
    border-radius: 0 var(--nb-radius-sm) var(--nb-radius-sm) 0;
    background: var(--nb-accent-soft);
    color: var(--nb-ink);
    font-size: 17px;
    font-style: italic;
}

/* ==========================================================================
   16. Forms & buttons
   (scoped to .form-control and the theme's own button classes so the dark
    footer's transparent inputs keep their white-on-dark treatment)
   ========================================================================== */
#main-wrapper .form-control {
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-sm);
    background: var(--nb-surface);
    color: var(--nb-ink);
    font-size: 15px;
    box-shadow: none;
}

#main-wrapper .form-control:focus {
    border-color: var(--nb-accent);
    box-shadow: 0 0 0 3px var(--nb-accent-soft);
}

#main-wrapper .form-control::placeholder { color: var(--nb-muted); }

#main-wrapper .d-btn,
#main-wrapper .link-btn,
#main-wrapper .maan-btn,
#main-wrapper .maan-news-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--nb-radius-sm);
    background: var(--nb-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter var(--nb-speed) var(--nb-ease),
        transform var(--nb-speed) var(--nb-ease),
        box-shadow var(--nb-speed) var(--nb-ease);
}

#main-wrapper .d-btn:hover,
#main-wrapper .link-btn:hover,
#main-wrapper .maan-btn:hover,
#main-wrapper .maan-news-form button:hover {
    filter: brightness(.93);
    transform: translateY(-1px);
    box-shadow: var(--nb-shadow);
    color: #fff;
}

#main-wrapper .maan-news-form button { height: 44px; padding: 0 18px; }

/* ==========================================================================
   17. Footer
   (the active footer is footer_5, i.e. .news10-info-footer - a dark band)
   ========================================================================== */
#main-wrapper .news10-info-footer {
    background: var(--nb-ink);
    color: rgba(255, 255, 255, .72);
}

#main-wrapper .news10-info-footer .row { padding: 52px 0; }

#main-wrapper .news10-info-footer .row.news10-link-footer {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

#main-wrapper .news10-info-footer .news10-title { margin-bottom: 18px; }

#main-wrapper .news10-info-footer .news10-title h2 {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#main-wrapper .news10-info-footer .news10-title::after {
    background: var(--nb-accent);
}

#main-wrapper .news10-info-footer .footer-left .logo a { max-width: 170px; }

#main-wrapper .news10-info-footer .footer-left .logo a img {
    height: auto;
    max-height: 60px;
    object-fit: contain;
}

#main-wrapper .news10-info-footer .footer-left p,
#main-wrapper .news10-info-footer .lint-list li p,
#main-wrapper .news10-info-footer .lint-list li p a {
    color: rgba(255, 255, 255, .72);
    font-size: 14.5px;
    line-height: 1.7;
}

#main-wrapper .news10-info-footer .lint-list li p a:hover { color: #fff; }

#main-wrapper .news10-info-footer .footer-social-link ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#main-wrapper .news10-info-footer .footer-social-link li a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--nb-radius-pill);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transition: background-color var(--nb-speed) var(--nb-ease),
        border-color var(--nb-speed) var(--nb-ease);
}

#main-wrapper .news10-info-footer .footer-social-link li a:hover {
    background: var(--nb-accent);
    border-color: var(--nb-accent);
}

#main-wrapper .news10-info-footer .footer-social-link li svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

#main-wrapper .news10-info-footer .news10-news-list h4 {
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 2px;
}

#main-wrapper .news10-info-footer .news10-news-list h4 a { color: rgba(255, 255, 255, .9); }
#main-wrapper .news10-info-footer .news10-news-list h4 a:hover { color: var(--nb-accent); }

#main-wrapper .news10-info-footer .news10-news-list .news10-item-text {
    color: rgba(255, 255, 255, .55);
    font-size: 12.5px;
}

#main-wrapper .news10-info-footer .news10-news-tags ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#main-wrapper .news10-info-footer .news10-news-tags ul li a {
    display: inline-block;
    padding: 6px 12px !important;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--nb-radius-pill);
    color: rgba(255, 255, 255, .8);
    font-size: 12.5px;
}

#main-wrapper .news10-info-footer .news10-news-tags ul li a:hover {
    background: var(--nb-accent);
    border-color: var(--nb-accent);
    color: #fff;
}

#main-wrapper .news10-info-footer .news10-email .input-group input {
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--nb-radius-sm) !important;
    background: rgba(255, 255, 255, .04);
    color: #fff;
}

#main-wrapper .news10-info-footer .news10-email .input-group input::placeholder {
    color: rgba(255, 255, 255, .45);
}

#main-wrapper .news10-info-footer .news10-email .input-group .news10-icon svg {
    fill: rgba(255, 255, 255, .5);
}

#main-wrapper .news10-info-footer .news10-email button {
    width: 100%;
    height: 48px;
    margin-top: 14px;
    padding: 0 24px;
}

#main-wrapper .news10-main-footer {
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

#main-wrapper .news10-main-footer h6 {
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    font-weight: 400;
}

/* ==========================================================================
   18. Accent normalisation
   --------------------------------------------------------------------------
   color-change.css pins the accent colour per palette with a handful of
   !important declarations (several hidden inside comma-separated selector
   lists). Re-pointing them at --nb-accent keeps every palette consistent with
   the rest of this sheet - and tames the stock theme-magenta #FF00FF.
   ========================================================================== */
#main-wrapper section .maan-title::after,
#main-wrapper section .maan-title-center::after,
#main-wrapper .maan-most-popular-section .news-tab .nav-pills button::before {
    background: var(--nb-accent) !important;
}

#main-wrapper .maan-most-popular-section .news-tab .nav-pills .nav-link.active {
    color: var(--nb-accent);
}

#main-wrapper .business .maan-default-post .maan-text .maan-icon svg path,
#main-wrapper .maan-widgets .maan-list-text .maan-icon svg {
    fill: var(--nb-accent) !important;
}

/* "Black & White" is selectable in the admin picker (its selectors are not
   prefixed with theme- in color-change.css); give it an accent token too. */
.black-white {
    --nb-accent: #111827;
    --nb-accent-soft: rgba(17, 24, 39, .08);
}

/* ==========================================================================
   19. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    #main-wrapper *,
    #main-wrapper *::before,
    #main-wrapper *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    #main-wrapper .card:hover { transform: none; }
}

/* ==========================================================================
   20. Responsive adjustments
   ========================================================================== */
/*
 * A media query adds no specificity, so the 56px section padding above would
 * otherwise override responsive.css' 40px on small screens.
 */
@media (max-width: 991px) {
    section { padding: 40px 0; }

    /* The nav bar stays light, but the slide-in drawer is a dark panel, so the
       ink link colour has to be restored to white inside it. */
    #main-wrapper .maan-main-manu {
        background: var(--nb-ink);
        box-shadow: var(--nb-shadow-lg);
    }

    #main-wrapper .maan-main-manu > ul { display: block; }

    #main-wrapper .maan-main-manu ul li > a {
        height: auto;
        padding: 12px 20px;
        color: #fff;
        font-size: 14px;
    }

    #main-wrapper .maan-main-manu ul li > a::after { content: none; }

    #main-wrapper .maan-main-manu ul li:hover > a,
    #main-wrapper .maan-main-manu ul li > a:hover { color: var(--nb-accent); }

    #main-wrapper .maan-main-manu .dropdown-menu {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 8px;
    }

    #main-wrapper .maan-main-manu .dropdown-menu li a {
        color: rgba(255, 255, 255, .75);
    }

    #main-wrapper .maan-manu-bar .close-btn span { background: #fff; }

    #main-wrapper .news10-info-footer .row { padding: 36px 0; }
}

@media (max-width: 575px) {
    #main-wrapper .maan-news-list li { grid-template-columns: 80px 1fr; }
    #main-wrapper .maan-top-bar { text-align: center; }
    #main-wrapper .maan-social-link ul { justify-content: center; }
    #main-wrapper .slick-arrow { display: none !important; }
}

/* ==========================================================================
   21. Cascade corrections
   --------------------------------------------------------------------------
   The stock theme was built around a coloured nav bar, so a few of its
   decorations are white-on-white once the bar is light. These rules remove
   those leftovers (nothing here changes layout).
   ========================================================================== */
/* stock hover underline is white and would sit on top of the accent bar */
#main-wrapper .maan-manu-bar .maan-main-manu li a::before { content: none; }

/* stock search/account buttons carry their own white plate behind the icon */
#main-wrapper .maan-right-btns .maan-search-btn::before,
#main-wrapper .maan-right-btns .maan-profile-btn::before { content: none; }

/* keep the mobile hamburger exactly as the theme draws it */
#main-wrapper .maan-manu-bar .manu-btn {
    width: 30px;
    height: 20px;
    border: 0;
    background: transparent;
}
/* ==========================================================================
   22. Featured video (front page)
   --------------------------------------------------------------------------
   Home One now carries the featured-video block that used to exist only on the
   theme's Home Two demo page: one 16:9 player plus a short playlist of the
   newest clips. Every rule is scoped to .maan-featured-video-section and takes
   its geometry from the section 1 tokens, so nothing here can leak into the
   rest of the page.
   ========================================================================== */
#main-wrapper .maan-featured-video-section {
    padding-bottom: 80px;
}

#main-wrapper .maan-featured-video-player {
    position: relative;
    background: var(--nb-ink);
    border-radius: var(--nb-radius);
    overflow: hidden;
    box-shadow: var(--nb-shadow);
}

#main-wrapper .maan-featured-video-player iframe {
    display: block;
    width: 100%;
    height: 430px;
    border: 0;
}

#main-wrapper .maan-featured-video-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 2px 0;
}

#main-wrapper .maan-featured-video-caption h4 {
    margin: 0;
    font-size: 20px;
    line-height: 26px;
    color: var(--nb-ink);
}

#main-wrapper .maan-featured-video-caption span {
    color: var(--nb-muted);
    font-size: 13px;
    white-space: nowrap;
}

#main-wrapper .maan-featured-video-list {
    display: grid;
    gap: 16px;
    align-content: start;
}

#main-wrapper .maan-featured-video-item {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 14px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nb-border);
}

#main-wrapper .maan-featured-video-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

#main-wrapper .maan-featured-video-thumb {
    position: relative;
    display: block;
    background: var(--nb-bg);
    border-radius: var(--nb-radius-sm);
    overflow: hidden;
}

#main-wrapper .maan-featured-video-thumb img {
    display: block;
    width: 100%;
    height: 78px;
    object-fit: cover;
    transition: transform .35s var(--nb-ease);
}

#main-wrapper .maan-featured-video-thumb:hover img {
    transform: scale(1.04);
}

#main-wrapper .maan-featured-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #fff;
    background: rgba(11, 18, 32, .6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: background .25s var(--nb-ease);
}

#main-wrapper .maan-featured-video-thumb:hover .maan-featured-video-play {
    background: var(--nb-accent);
}

#main-wrapper .maan-featured-video-play svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

#main-wrapper .maan-featured-video-body h4 {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 22px;
}

#main-wrapper .maan-featured-video-body h4 a {
    color: var(--nb-ink);
}

#main-wrapper .maan-featured-video-body h4 a:hover,
#main-wrapper .maan-featured-video-body h4 a:focus {
    color: var(--nb-accent);
}

#main-wrapper .maan-featured-video-meta {
    color: var(--nb-muted);
    font-size: 13px;
}

/* ==========================================================================
   23. Featured video - responsive
   ========================================================================== */
@media (max-width: 991px) {
    #main-wrapper .maan-featured-video-player iframe { height: 320px; }
    #main-wrapper .maan-featured-video-caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    #main-wrapper .maan-featured-video-list { margin-top: 24px; }
}

@media (max-width: 575px) {
    #main-wrapper .maan-featured-video-player iframe { height: 220px; }
    #main-wrapper .maan-featured-video-item { grid-template-columns: 92px 1fr; }
    #main-wrapper .maan-featured-video-thumb img { height: 64px; }
}

/* ==========================================================================
   24. Video gallery page, sidebar media widgets and section "Show All" buttons
   ========================================================================== */
#main-wrapper .maan-section-more {
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
}

#main-wrapper .maan-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 26px;
    border: 1px solid var(--nb-accent);
    border-radius: var(--nb-radius-pill);
    background: var(--nb-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    transition: background var(--nb-speed) var(--nb-ease), border-color var(--nb-speed) var(--nb-ease), color var(--nb-speed) var(--nb-ease);
}

#main-wrapper .maan-more-btn:hover,
#main-wrapper .maan-more-btn:focus {
    background: var(--nb-ink);
    border-color: var(--nb-ink);
    color: #fff;
}

#main-wrapper .maan-widget-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--nb-accent);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

#main-wrapper .maan-widget-more:hover,
#main-wrapper .maan-widget-more:focus {
    color: var(--nb-ink);
}

#main-wrapper .maan-video-gallery-grid .card {
    height: 100%;
    margin-bottom: 30px;
}

#main-wrapper .maan-video-gallery-grid .maan-post-img {
    position: relative;
    overflow: hidden;
}

#main-wrapper .maan-video-gallery-grid .maan-post-img img {
    width: 100%;
    height: 215px;
    object-fit: cover;
    object-position: center;
}

/* style.css:535 turns every ".card .maan-post-img a.venobox" into a 50x50 round
   button, because the theme's own video cards put nothing but the play glyph
   inside. Here the poster sits in the flow and that same anchor is stretched
   over it, so the round button can be its own element (.maan-video-play). */
#main-wrapper .maan-video-gallery-grid .maan-post-img a.venobox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    line-height: normal;
    transform: none;
}

#main-wrapper .maan-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 12px 26px rgba(11, 18, 32, .3);
    transform: translate(-50%, -50%);
    transition: transform var(--nb-speed) var(--nb-ease), background var(--nb-speed) var(--nb-ease);
}

#main-wrapper .maan-video-play svg {
    width: 16px;
    height: 16px;
    fill: var(--nb-accent);
}

#main-wrapper .maan-video-gallery-grid .card:hover .maan-video-play {
    transform: translate(-50%, -50%) scale(1.12);
}

#main-wrapper .maan-video-widget a {
    position: relative;
    display: block;
}

#main-wrapper .maan-video-widget a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
    transform: translate(-40%, -50%);
    filter: drop-shadow(0 2px 6px rgba(11, 18, 32, .55));
}

#main-wrapper .maan-media-empty {
    padding: 30px 0 40px;
    color: var(--nb-muted);
}

#main-wrapper .maan-media-empty a {
    color: var(--nb-accent);
    font-weight: 600;
}

/* ==========================================================================
   25. Video gallery - responsive
   ========================================================================== */
@media (max-width: 991px) {
    #main-wrapper .maan-video-gallery-grid .maan-post-img img { height: 190px; }
}

@media (max-width: 575px) {
    #main-wrapper .maan-video-gallery-grid .maan-post-img img { height: 175px; }
    #main-wrapper .maan-section-more { margin-top: 20px; }
    #main-wrapper .maan-more-btn { width: 100%; justify-content: center; }
}