/*
Theme Name: FnNewz
Theme URI: https://fnnewz.com
Author: FnNewz
Author URI: https://fnnewz.com
Description: A fast, clean, professional news & magazine theme for FnNewz. Built for speed (single stylesheet, no render-blocking web fonts by default, lazy-loaded ads and images) with built-in AdSense widget areas, an in-content ad inserter, a virtual ads.txt, and NewsArticle schema for better AdSense/SEO performance.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fnnewz
Tags: news, blog, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, theme-options

FnNewz is derived from the WordPress core "_s" starter theme structure and contains no third-party code.
*/

/* =========================================================
   0. DESIGN TOKENS
   Clean white / professional editorial theme.
   Primary: deep signal-blue. Neutral: cool slate grays.
   No web fonts loaded by default — system stack only, so
   the very first paint never waits on a font request.
   ========================================================= */
:root{
  /* Color */
  --fn-white:        #ffffff;
  --fn-paper:         #f5f7fa;   /* section backgrounds */
  --fn-ink:           #12161c;   /* primary text, near-black not pure black */
  --fn-ink-soft:      #454e5b;   /* secondary text */
  --fn-mute:          #6b7480;   /* meta / captions */
  --fn-line:          #e2e6eb;   /* hairline borders */
  --fn-line-strong:   #c7ccd3;

  --fn-blue:          #163a6e;   /* brand / primary */
  --fn-blue-deep:     #0d2748;
  --fn-blue-bright:   #2e6fe0;   /* links, CTAs, hover */
  --fn-blue-wash:     #eef3fb;   /* tinted backgrounds, pills */

  --fn-red:           #b3261e;   /* "breaking" flag only — used sparingly */

  /* Type */
  --fn-font-head: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --fn-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --fn-container: 1180px;
  --fn-radius: 3px;
  --fn-gap: 28px;
}

.fn-fonts-enhanced{
  --fn-font-head: "Source Serif Pro", Georgia, serif;
  --fn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--fn-font-body);
  font-size:16px;
  line-height:1.55;
  color:var(--fn-ink);
  background:var(--fn-white);
  text-rendering:optimizeSpeed;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--fn-blue-bright); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{ margin:0 0 .5em; font-family:var(--fn-font-head); font-weight:700; line-height:1.2; color:var(--fn-ink); }
p{ margin:0 0 1.1em; }
button{ font-family:inherit; }
figure{ margin:0; }
table{ border-collapse:collapse; width:100%; }

:focus-visible{ outline:3px solid var(--fn-blue-bright); outline-offset:2px; }
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--fn-blue); color:#fff; padding:.8em 1.2em; border-radius:0 0 var(--fn-radius) 0;
}
.skip-link:focus{ left:0; }

.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.fn-wrap{ max-width:var(--fn-container); margin:0 auto; padding:0 20px; }

/* =========================================================
   2. TOP UTILITY BAR
   ========================================================= */
.fn-topbar{ background:var(--fn-blue-deep); color:#cfd9ea; font-size:13px; }
.fn-topbar .fn-wrap{ display:flex; align-items:center; justify-content:space-between; height:36px; gap:16px; overflow:hidden; }
.fn-topbar__date{ white-space:nowrap; }
.fn-topbar__social{ display:flex; gap:14px; }
.fn-topbar__social a{ color:#cfd9ea; }
.fn-topbar__social a:hover{ color:#fff; text-decoration:none; }
.fn-topbar__ticker{ flex:1; overflow:hidden; white-space:nowrap; text-align:right; color:#9db2d6; }

/* =========================================================
   3. HEADER
   ========================================================= */
.fn-header{ border-bottom:1px solid var(--fn-line); background:var(--fn-white); }
.fn-header__row{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:24px; }
.fn-logo{ font-family:var(--fn-font-head); font-size:30px; font-weight:700; letter-spacing:-.5px; color:var(--fn-ink); line-height:1; }
.fn-logo a{ color:inherit; }
.fn-logo a:hover{ text-decoration:none; }
.fn-logo img{ max-height:46px; width:auto; }

.fn-nav-bar{ background:var(--fn-blue); }
.fn-nav-bar .fn-wrap{ display:flex; align-items:center; justify-content:space-between; }
.fn-primary-menu{ display:flex; flex-wrap:wrap; }
.fn-primary-menu a{
  display:block; padding:14px 16px; color:#fff; font-size:14.5px; font-weight:600;
}
.fn-primary-menu a:hover, .fn-primary-menu .current-menu-item > a{ background:rgba(255,255,255,.12); text-decoration:none; }
.fn-primary-menu .menu-item-has-children{ position:relative; }
.fn-primary-menu .sub-menu{
  display:none; position:absolute; left:0; top:100%; min-width:210px; background:var(--fn-white);
  box-shadow:0 8px 24px rgba(13,39,72,.18); border-top:2px solid var(--fn-blue-bright); z-index:50;
}
.fn-primary-menu .menu-item-has-children:hover > .sub-menu,
.fn-primary-menu .menu-item-has-children:focus-within > .sub-menu{ display:block; }
.fn-primary-menu .sub-menu a{ color:var(--fn-ink); padding:11px 16px; font-weight:500; }
.fn-primary-menu .sub-menu a:hover{ background:var(--fn-blue-wash); }

.fn-header-tools{ display:flex; align-items:center; gap:8px; padding:8px 0; }
.fn-icon-btn{
  border:1px solid var(--fn-line); background:var(--fn-white); border-radius:50%;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--fn-ink);
}
.fn-icon-btn:hover{ border-color:var(--fn-blue-bright); color:var(--fn-blue-bright); }
.fn-menu-toggle{ display:none; }

.fn-search-panel{
  display:none; border-bottom:1px solid var(--fn-line); background:var(--fn-paper); padding:16px 0;
}
.fn-search-panel.is-open{ display:block; }
.fn-search-panel form{ display:flex; gap:8px; }
.fn-search-panel input[type="search"]{
  flex:1; padding:12px 14px; border:1px solid var(--fn-line-strong); border-radius:var(--fn-radius); font-size:16px;
}
.fn-search-panel button{
  padding:0 20px; background:var(--fn-blue); color:#fff; border:0; border-radius:var(--fn-radius); font-weight:600; cursor:pointer;
}

/* =========================================================
   4. AD SLOTS
   ========================================================= */
.fn-ad{ margin:22px 0; text-align:center; }
.fn-ad__label{
  font-size:11px; letter-spacing:.03em; color:var(--fn-mute); margin-bottom:6px;
}
.fn-ad__frame{ min-height:90px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.fn-ad--header{ margin:0 0 0; padding:14px 0; background:var(--fn-paper); border-bottom:1px solid var(--fn-line); }
.fn-ad--incontent{ padding:18px 0; border-top:1px solid var(--fn-line); border-bottom:1px solid var(--fn-line); }
.fn-ad--sidebar{ margin-top:0; }

/* =========================================================
   5. LAYOUT GRID (content + sidebar)
   ========================================================= */
.fn-layout{ display:grid; grid-template-columns:1fr; gap:var(--fn-gap); padding:36px 0 56px; }
.fn-layout--with-sidebar{ grid-template-columns:minmax(0,1fr) 320px; }
.fn-sidebar > * + *{ margin-top:30px; }

.fn-section-title{
  font-size:21px; margin:0 0 18px; padding-bottom:12px; border-bottom:2px solid var(--fn-ink);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.fn-section-title a{ font-family:var(--fn-font-body); font-size:13.5px; font-weight:600; color:var(--fn-blue-bright); }
.fn-section{ padding:34px 0; }
.fn-section + .fn-section{ border-top:1px solid var(--fn-line); }
.fn-section--tint{ background:var(--fn-paper); }

/* =========================================================
   6. HOMEPAGE HERO
   ========================================================= */
.fn-hero{ display:grid; grid-template-columns:1.6fr 1fr; gap:var(--fn-gap); padding-top:32px; }
.fn-hero__main{ position:relative; }
.fn-hero__main .fn-thumb{ aspect-ratio:16/9.5; }
.fn-hero__main h1, .fn-hero__main h2{ font-size:33px; margin:16px 0 10px; }
.fn-hero__side{ display:flex; flex-direction:column; gap:20px; }
.fn-hero__side article{ display:flex; gap:14px; }
.fn-hero__side .fn-thumb{ width:132px; flex:0 0 132px; aspect-ratio:4/3; }
.fn-hero__side h3{ font-size:16.5px; margin:0 0 6px; }

.fn-thumb{
  display:block; overflow:hidden; background:var(--fn-paper); border-radius:var(--fn-radius); position:relative;
}
.fn-thumb img{ width:100%; height:100%; object-fit:cover; }

.fn-kicker{
  display:inline-block; font-size:12px; font-weight:700; color:var(--fn-blue);
  background:var(--fn-blue-wash); padding:3px 9px; border-radius:2px; margin-bottom:8px;
}
.fn-kicker--breaking{ background:#fbe9e8; color:var(--fn-red); }

.fn-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:13px; color:var(--fn-mute); }
.fn-meta__item{ display:inline-flex; align-items:center; gap:5px; }
.fn-meta svg{ width:14px; height:14px; flex:0 0 auto; opacity:.75; }
.fn-excerpt{ color:var(--fn-ink-soft); font-size:15.5px; }

/* =========================================================
   7. POST CARDS / GRID
   ========================================================= */
.fn-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.fn-grid--3{ grid-template-columns:repeat(3,1fr); }
.fn-card h3{ font-size:17px; margin:14px 0 8px; }
.fn-card h3 a{ color:var(--fn-ink); }
.fn-card h3 a:hover{ color:var(--fn-blue-bright); text-decoration:none; }
.fn-card .fn-excerpt{ font-size:14px; margin-bottom:8px; }

.fn-list{ display:flex; flex-direction:column; }
.fn-list > * + *{ margin-top:22px; padding-top:22px; border-top:1px solid var(--fn-line); }
.fn-list-item{ display:grid; grid-template-columns:200px 1fr; gap:20px; }
.fn-list-item .fn-thumb{ aspect-ratio:4/3; }
.fn-list-item h2{ font-size:22px; margin:0 0 8px; }

.fn-trending{ counter-reset:fn-rank; }
.fn-trending li{ counter-increment:fn-rank; display:flex; gap:14px; align-items:flex-start; }
.fn-trending li + li{ margin-top:16px; padding-top:16px; border-top:1px solid var(--fn-line); }
.fn-trending li::before{
  content:counter(fn-rank); font-family:var(--fn-font-head); font-size:22px; font-weight:700;
  color:var(--fn-line-strong); width:28px; flex:0 0 28px; line-height:1.2;
}
.fn-trending h4{ font-size:15px; margin:0 0 4px; }
.fn-trending h4 a{ color:var(--fn-ink); }

/* =========================================================
   8. WIDGETS / SIDEBAR
   ========================================================= */
.widget{ }
.widget-title{ font-size:16px; padding-bottom:10px; margin-bottom:16px; border-bottom:2px solid var(--fn-ink); }
.fn-tagcloud a{
  display:inline-block; margin:0 6px 8px 0; padding:5px 11px; background:var(--fn-paper); border:1px solid var(--fn-line);
  border-radius:20px; font-size:12.5px; color:var(--fn-ink-soft);
}
.fn-tagcloud a:hover{ background:var(--fn-blue-wash); border-color:var(--fn-blue-bright); color:var(--fn-blue); text-decoration:none; }

.fn-newsletter{ background:var(--fn-blue-deep); color:#fff; padding:26px; border-radius:var(--fn-radius); }
.fn-newsletter h4{ color:#fff; font-size:18px; }
.fn-newsletter p{ color:#c6d3e8; font-size:14px; }
.fn-newsletter form{ display:flex; gap:8px; margin-top:12px; }
.fn-newsletter input[type="email"]{ flex:1; padding:11px 12px; border:0; border-radius:var(--fn-radius); }
.fn-newsletter button{ background:var(--fn-blue-bright); color:#fff; border:0; border-radius:var(--fn-radius); padding:0 16px; font-weight:600; cursor:pointer; }

/* =========================================================
   9. SINGLE POST
   ========================================================= */
.fn-article__header{ max-width:760px; margin:0 auto 26px; text-align:left; }
.fn-article__header h1{ font-size:36px; margin:12px 0 14px; }
.fn-article__lede{ font-size:18px; color:var(--fn-ink-soft); margin-bottom:14px; }
.fn-article__cover{ margin-bottom:8px; }
.fn-article__cover figcaption{ font-size:12.5px; color:var(--fn-mute); margin-top:8px; }

.fn-byline{ display:flex; align-items:center; gap:12px; margin:18px 0; }
.fn-byline img{ width:42px; height:42px; border-radius:50%; }
.fn-byline strong{ display:block; font-size:14.5px; }
.fn-byline span{ font-size:13px; color:var(--fn-mute); }
.fn-share{ display:flex; gap:8px; }

.fn-content{ max-width:760px; margin:0 auto; font-size:17.5px; line-height:1.75; color:var(--fn-ink); }
.fn-content h2{ font-size:25px; margin-top:1.5em; }
.fn-content h3{ font-size:20px; margin-top:1.4em; }
.fn-content blockquote{
  margin:1.6em 0; padding:.2em 0 .2em 22px; border-left:3px solid var(--fn-blue); font-family:var(--fn-font-head);
  font-size:20px; font-style:italic; color:var(--fn-ink-soft);
}
.fn-content img{ border-radius:var(--fn-radius); }
.fn-content figure{ margin:1.6em 0; }
.fn-content figcaption{ font-size:13px; color:var(--fn-mute); margin-top:8px; text-align:center; }
.fn-content a{ text-decoration:underline; text-underline-offset:2px; }
.fn-content ul, .fn-content ol{ margin:0 0 1.2em 1.3em; list-style:revert; }
.fn-content pre{ background:var(--fn-paper); padding:16px; overflow:auto; border-radius:var(--fn-radius); font-size:14px; }

.fn-tags{ max-width:760px; margin:26px auto 0; display:flex; flex-wrap:wrap; gap:8px; }
.fn-authorbox{
  max-width:760px; margin:34px auto 0; padding:22px; background:var(--fn-paper); border-radius:var(--fn-radius);
  display:flex; gap:16px;
}
.fn-authorbox img{ width:64px; height:64px; border-radius:50%; flex:0 0 auto; }
.fn-authorbox h4{ font-size:16px; margin:0 0 6px; }
.fn-authorbox p{ font-size:14px; color:var(--fn-ink-soft); margin:0; }

.fn-related{ margin-top:44px; }

/* Reading progress bar (article pages) */
.fn-progress{ position:fixed; top:0; left:0; height:3px; background:var(--fn-blue-bright); width:0%; z-index:9999; }

/* =========================================================
   10. PAGINATION / FORMS / MISC
   ========================================================= */
.fn-pagination{ display:flex; justify-content:center; gap:8px; margin-top:36px; }
.fn-pagination a, .fn-pagination span{
  min-width:38px; height:38px; padding:0 10px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--fn-line); border-radius:var(--fn-radius); font-size:14px; color:var(--fn-ink-soft);
}
.fn-pagination .current{ background:var(--fn-blue); border-color:var(--fn-blue); color:#fff; }
.fn-pagination a:hover{ border-color:var(--fn-blue-bright); color:var(--fn-blue-bright); text-decoration:none; }

.fn-btn{
  display:inline-block; padding:11px 20px; background:var(--fn-blue); color:#fff; border-radius:var(--fn-radius);
  font-weight:600; font-size:14px; border:0; cursor:pointer;
}
.fn-btn:hover{ background:var(--fn-blue-bright); text-decoration:none; }

.comment-form input, .comment-form textarea{
  width:100%; padding:11px 12px; border:1px solid var(--fn-line-strong); border-radius:var(--fn-radius); font-size:15px; margin-bottom:12px;
}
.comment-list{ max-width:760px; margin:0 auto; }
.comment-list .children{ margin-left:36px; }
.comment-body{ padding:18px 0; border-top:1px solid var(--fn-line); }
.comment-author img{ border-radius:50%; vertical-align:middle; margin-right:8px; }

.fn-404{ text-align:center; padding:60px 0; }
.fn-404 h1{ font-size:80px; color:var(--fn-line-strong); margin-bottom:0; }

/* =========================================================
   11. FOOTER
   ========================================================= */
.fn-footer{ background:var(--fn-blue-deep); color:#c6d3e8; margin-top:20px; }
.fn-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding:48px 0 30px; }
.fn-footer h4{ color:#fff; font-size:15.5px; margin-bottom:16px; }
.fn-footer a{ color:#c6d3e8; }
.fn-footer a:hover{ color:#fff; }
.fn-footer ul li{ margin-bottom:9px; font-size:14px; }
.fn-footer p{ font-size:14px; color:#a9bad9; }
.fn-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:18px 0; }
.fn-footer-bottom .fn-wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; }
.fn-footer-menu{ display:flex; gap:16px; flex-wrap:wrap; }

.fn-back-top{
  position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%; background:var(--fn-blue);
  color:#fff; display:none; align-items:center; justify-content:center; border:0; cursor:pointer; box-shadow:0 6px 18px rgba(13,39,72,.3); z-index:60;
}
.fn-back-top.is-visible{ display:flex; }

/* =========================================================
   12. RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .fn-layout--with-sidebar{ grid-template-columns:1fr; }
  .fn-sidebar{ order:2; }
  .fn-grid{ grid-template-columns:repeat(3,1fr); }
  .fn-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:780px){
  .fn-topbar__ticker, .fn-topbar__social{ display:none; }
  .fn-primary-menu{
    display:none; flex-direction:column; position:absolute; left:0; right:0; top:100%; background:var(--fn-blue); z-index:80;
  }
  .fn-primary-menu.is-open{ display:flex; }
  .fn-nav-bar{ position:relative; }
  .fn-primary-menu .sub-menu{ position:static; box-shadow:none; border-top:0; background:rgba(0,0,0,.12); }
  .fn-menu-toggle{ display:flex; }
  .fn-hero{ grid-template-columns:1fr; }
  .fn-hero__side{ flex-direction:column; }
  .fn-grid{ grid-template-columns:repeat(2,1fr); }
  .fn-list-item{ grid-template-columns:1fr; }
  .fn-list-item .fn-thumb{ aspect-ratio:16/9; }
  .fn-article__header h1{ font-size:28px; }
  .fn-authorbox{ flex-direction:column; }
}
@media (max-width:520px){
  .fn-grid{ grid-template-columns:1fr; }
  .fn-footer__grid{ grid-template-columns:1fr; padding:36px 0 20px; }
  .fn-content{ font-size:16.5px; }
}

/* Print */
@media print{
  .fn-header, .fn-topbar, .fn-nav-bar, .fn-sidebar, .fn-footer, .fn-ad, .fn-back-top{ display:none !important; }
}