/*!
 * FastNaija — Sleek Flat Design System (frontend)
 * -----------------------------------------------------------------
 * Modeled directly on the Kreator/Helpblogger master stylesheet's
 * design language: no gradients, no box-shadow glow/blur, no lift-
 * on-hover, no pill buttons. Depth comes only from hairline borders
 * and flat tonal surfaces derived with color-mix() — never a
 * shadow. Radii are deliberately mixed (small on controls, larger
 * only on real containers) instead of one blanket rounded look.
 *
 * Every brand colour here is read from the CSS variables FastNaija
 * already writes to :root from Settings → Colors & Fonts (see
 * fn_build_dynamic_css() in functions.php): --header-background-color,
 * --navi-color, --primary-color, --page-background-color,
 * --text-color, --footer-background-color, --footer-text-color,
 * --text-font, --title-font. Change a colour in the admin and this
 * entire layer follows automatically — nothing brand-related is
 * redefined here. (The WP admin options screens keep their own
 * separate flat-3D cartoon styling — this file is frontend only.)
 * ----------------------------------------------------------------- */

:root {
    /* ---- aliases onto FastNaija's own admin-driven variables ---- */
    --sk-nav-bg:     var(--header-background-color, #111111);
    --sk-nav-text:   var(--navi-color, #ffffff);
    --sk-primary:    var(--primary-color, #c62828);
    --sk-body-bg:    var(--page-background-color, #ffffff);
    --sk-text:       var(--text-color, #111111);
    --sk-footer-bg:  var(--footer-background-color, #000000);
    --sk-footer-txt: var(--footer-text-color, rgba(255,255,255,.6));

    /* ---- derived tokens (structural, computed — not brand) ---- */
    --sk-line:          color-mix(in srgb, var(--sk-text) 12%, var(--sk-body-bg));
    --sk-line-strong:   color-mix(in srgb, var(--sk-text) 22%, var(--sk-body-bg));
    --sk-muted:         color-mix(in srgb, var(--sk-text) 52%, var(--sk-body-bg));
    --sk-faint:         color-mix(in srgb, var(--sk-text) 34%, var(--sk-body-bg));
    --sk-surface-sunken:color-mix(in srgb, var(--sk-text) 3.5%, var(--sk-body-bg));
    --sk-primary-wash:  color-mix(in srgb, var(--sk-primary) 7%, var(--sk-body-bg));
    --sk-primary-line:  color-mix(in srgb, var(--sk-primary) 30%, var(--sk-body-bg));
    --sk-primary-strong:color-mix(in srgb, var(--sk-primary) 82%, black);
    --sk-nav-line:      color-mix(in srgb, var(--sk-nav-text) 14%, transparent);
    --sk-nav-hover:     color-mix(in srgb, var(--sk-nav-text) 8%, transparent);

    /* geometry — deliberately mixed, not one blanket radius */
    --sk-r-control: 6px;   /* buttons, inputs, tags, badges */
    --sk-r-frame:   3px;   /* thumbnails, tight chrome */
    --sk-r-card:    0px;   /* cards / full-bleed editorial blocks */
    --sk-ease: cubic-bezier(.2,.65,.3,1);
    --sk-fast: .16s var(--sk-ease);
}

/* Never let a flex/grid child force horizontal overflow anywhere on the site */
.header-main, .fn-nav-group, .fn-menu, .fn-side-card, .fn-list-card,
.fn-lead-row, .fn-edit-grid, .fn-mobile-list { min-width: 0; }

/* ============================================================
   1. HEADER NAV — proper arrangement, no uppercase, single row,
      flat/sleek — no borders, no chips, just clean hairline
      underline on hover/current.
   ============================================================
   Fixes: the old fixed 60px header height clipped a 2nd wrapped
   nav row on menus with several items. Nav is now a single,
   non-wrapping row that scrolls horizontally if it ever runs out
   of room, instead of silently wrapping and getting clipped. */
.header-main {
    min-height: 64px;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
}

.fn-nav-group { gap: .5rem; }

.fn-menu {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    gap: .1rem;
    align-items: center;
}
.fn-menu::-webkit-scrollbar { display: none; }

.fn-menu > li { flex: 0 0 auto; }

.fn-menu > li > a {
    text-transform: none !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    white-space: nowrap;
    padding: .55rem .8rem !important;
    border-bottom: 2px solid transparent;
    transition: border-color var(--sk-fast), color var(--sk-fast);
}

.fn-menu > li > a:hover,
.fn-menu > li.menu-item-has-children:hover > a {
    border-bottom-color: var(--sk-nav-line);
}

.fn-menu > li.current-menu-item > a,
.fn-menu > li.current-menu-ancestor > a {
    text-decoration: none !important;
    border-bottom-color: currentColor;
}

/* Desktop flyout sub-menu — flat, hairline only */
.fn-menu .sub-menu {
    border: 1px solid var(--sk-nav-line);
    border-top: none;
}
.fn-menu .sub-menu li a { text-transform: none; }

/* Mobile full-screen menu — same "no uppercase" rule for consistency */
.fn-mobile-list > li > a { text-transform: none !important; font-weight: 600; }

/* ============================================================
   2. CARDS — flat, hairline frame, no shadow, no lift
   ============================================================ */
.fn-thumb-link {
    border-radius: var(--sk-r-frame) !important;
    overflow: hidden;
}

/* Fixes the layout bug where side/list card text didn't stretch to
   fill its column, leaving dead white space to the right of the
   container instead of a properly centered, fully-used width. */
.fn-side-card, .fn-list-card { align-items: flex-start; }
.fn-side-card .fn-side-body,
.fn-list-card .fn-list-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Category eyebrow — flat text label, no chip/pill */
.fn-cat a, .meta-category a {
    display: inline-block;
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ============================================================
   3. BUTTONS — flat fill, no border, no shadow, no lift
   ============================================================ */
.fn-button,
.fn-404-btn,
.fn-dl-btn,
.entry-content h3 a[href*=".mp4"],
.entry-content h3 a[href*="download"],
.comment-form .submit,
#respond .submit,
.fn-search-submit {
    border-radius: var(--sk-r-control) !important;
    border: none !important;
    box-shadow: none !important;
    transition: background var(--sk-fast);
}
.fn-button:hover,
.fn-404-btn:hover,
.fn-dl-btn:hover,
.entry-content h3 a[href*=".mp4"]:hover,
.entry-content h3 a[href*="download"]:hover,
.comment-form .submit:hover,
#respond .submit:hover,
.fn-search-submit:hover {
    background: var(--sk-primary-strong);
    box-shadow: none !important;
    transform: none !important;
}

/* ============================================================
   4. CHIPS / TAGS / PAGINATION — flat rectangular, hairline only
   ============================================================ */
.meta-tags a,
.tagcloud a,
.tag-cloud-link {
    border-radius: var(--sk-r-control) !important;
    border: 1px solid var(--sk-line) !important;
    font-weight: 600;
    background: transparent !important;
}
.meta-tags a:hover,
.tagcloud a:hover,
.tag-cloud-link:hover {
    border-color: var(--sk-primary-line) !important;
}

.fn-archive-wrap .page-numbers,
.pagination .page-numbers {
    border-radius: var(--sk-r-control) !important;
    border: 1px solid var(--sk-line) !important;
    background: transparent !important;
    font-weight: 600 !important;
}
.fn-archive-wrap .page-numbers.current,
.pagination .page-numbers.current {
    border-color: var(--sk-primary-strong) !important;
}

/* Telegram / channel bar — flat, no inset shadow */
.fn-channel-bar { box-shadow: none !important; }
.fn-channel-bar-inner { box-shadow: none !important; }

/* ============================================================
   5. FORM CONTROLS — hairline border, flat fill, no inset glow
   ============================================================ */
.fn-search-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.no-results .search-field,
.fn-404-search .search-field {
    border: 1px solid var(--sk-line-strong) !important;
    border-radius: var(--sk-r-control) !important;
    box-shadow: none !important;
    transition: border-color var(--sk-fast);
}
.fn-search-field { border-radius: var(--sk-r-control) 0 0 var(--sk-r-control) !important; }

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    box-shadow: none !important;
    border-color: var(--sk-primary) !important;
}

/* Sidebar widgets — flat panel, hairline top rule only */
.widget {
    border: none;
    border-top: 1px solid var(--sk-line);
    border-radius: 0;
    padding: 1.2rem 0;
    box-shadow: none !important;
    background: transparent;
    box-sizing: border-box;
}
.widget:first-child { border-top: none; }

/* ============================================================
   6. CONTAINER CENTERING (desktop)
   ============================================================
   Every top-level wrap already used margin:0 auto — this just
   guarantees it holds even if a future template forgets to set
   it explicitly, and keeps everything symmetric on wide screens. */
.fn-archive-wrap,
.fn-content-wrap,
.header-main,
.fn-header-ad,
.site-footer {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 768px) {
    .fn-menu > li > a { font-size: .85rem !important; padding: .5rem .6rem !important; }
}