/*
Theme Name: FFNick Child
Theme URI: https://ffnick.com/
Template: generatepress
Author: FFNick
Description: GeneratePress child theme for FFNick.com — Free Fire nickname generator. Lightweight, no jQuery, no Bootstrap. Pairs with the FFNick Data plugin.
Version: 2.0.0
License: GNU General Public License v2 or later
Text Domain: ffnick-child
*/

/* ============================================================
   Demo-style header / footer + clean white page
   ============================================================ */
body, .site{background:#fff;}

.ffnick-header{background:#fff;border-bottom:1px solid #e6e6e6;}
.ffnick-bar{max-width:840px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.ff-logo{font-weight:bold;font-size:18px;color:#1b1b1b;text-decoration:none;line-height:1;}
.ff-logo span{color:#c2410c;}
.ff-nav{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;}
.ffnick-header .ff-nav{margin-left:auto;}
.ff-nav a{color:#c2410c;text-decoration:none;}
.ff-nav a:hover{text-decoration:underline;}

.site-footer{background:#fff;border-top:1px solid #e6e6e6;margin-top:40px;}
.ffnick-footer{max-width:840px;margin:0 auto;padding:22px 16px;color:#777;font-size:13px;}
.ffnick-footer .ff-nav{margin-bottom:10px;}
.ffnick-footer .ff-legal{margin-bottom:12px;}
.ffnick-footer .ff-legal a{color:#777;}
.ffnick-footer .ff-legal a:hover{color:var(--ff-accent);}
.ffnick-footer p{margin:0;}

/* ============================================================
   Base typography (Arial system font, no web fonts)
   ============================================================ */
:root{
  --ff-ink:#1b1b1b; --ff-accent:#c2410c; --ff-accent-dark:#a8370c;
  --ff-line:#e6e6e6; --ff-soft:#eee; --ff-muted:#777; --ff-ok:#1b7a3e;
}
body{font-family:Arial,Helvetica,sans-serif;color:var(--ff-ink);line-height:1.6;}
a{color:var(--ff-accent);}
a:hover{text-decoration:underline;}
.muted{color:var(--ff-muted);}
.lead{font-size:18px;color:#333;}

/* Keep the inner content column narrow & readable, matching the design */
.ffnick{max-width:840px;margin:0 auto;}

/* ============================================================
   Inputs / buttons
   ============================================================ */
.ffnick input,.ffnick select,.ffnick button,.ffnick textarea{font-family:inherit;font-size:15px;}
.ffnick .field{width:100%;padding:10px 12px;border:1px solid #bbb;border-radius:4px;}
.ffnick button.act{padding:10px 16px;border:1px solid var(--ff-accent);background:var(--ff-accent);color:#fff;border-radius:4px;cursor:pointer;}
.ffnick button.act:hover{background:var(--ff-accent-dark);}
.ffnick button.lite{padding:10px 14px;border:1px solid #bbb;background:#f5f5f5;color:var(--ff-ink);border-radius:4px;cursor:pointer;}
.ffnick button.lite:hover{background:#ececec;}
.ffnick .toolrow{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap;}
.ffnick .toolrow input{flex:1;min-width:180px;}

/* Section headings on tool pages */
.ffnick h1{font-size:30px;line-height:1.2;margin:0 0 10px;}
.ffnick h2{font-size:22px;margin:38px 0 6px;padding-top:18px;border-top:1px solid var(--ff-soft);}
.ffnick h3{font-size:16px;margin:18px 0 6px;}

/* ============================================================
   Tabs
   ============================================================ */
.ffnick .tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px;}
.ffnick .tabs button,.ffnick .tabs .tab{padding:7px 14px;border:1px solid #bbb;background:#fff;border-radius:4px;cursor:pointer;font-size:14px;color:var(--ff-ink);}
.ffnick .tabs button[aria-pressed="true"],.ffnick .tabs .tab[aria-pressed="true"]{background:var(--ff-ink);color:#fff;border-color:var(--ff-ink);}

/* ============================================================
   Result rows
   ============================================================ */
.ffnick .rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;}
.ffnick .row{display:flex;align-items:center;gap:10px;border:1px solid #e2e2e2;border-radius:4px;padding:10px 12px;background:#fff;}
.ffnick .row .tag{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#999;width:58px;flex-shrink:0;}
.ffnick .row .name{flex:1;font-size:19px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ffnick .row .rk{font-size:12px;color:#bbb;width:24px;flex-shrink:0;text-align:right;}
.ffnick .copy{padding:5px 11px;border:1px solid #bbb;background:#f5f5f5;color:var(--ff-ink);border-radius:4px;cursor:pointer;font-size:13px;line-height:1.3;flex-shrink:0;}
.ffnick .copy:hover{background:#ececec;}
.ffnick .copy.ok{background:var(--ff-ok);color:#fff;border-color:var(--ff-ok);}

/* Vote buttons (detail page) */
.ffnick .votes{display:flex;gap:6px;flex-shrink:0;}
.ffnick .vote{border:1px solid #ddd;background:#fafafa;border-radius:4px;padding:5px 9px;cursor:pointer;font-size:13px;color:#555;}
.ffnick .vote:hover{background:#f0f0f0;}
.ffnick .vote.up.on{color:var(--ff-ok);border-color:var(--ff-ok);}
.ffnick .vote.down.on{color:#b42318;border-color:#b42318;}

/* ============================================================
   Symbols
   ============================================================ */
.ffnick .symgrid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.ffnick .sym-btn{width:44px;height:44px;border:1px solid #ddd;background:#fff;border-radius:4px;font-size:20px;cursor:pointer;}
.ffnick .sym-btn:hover{background:#f3f3f3;}
.ffnick .sym-btn.ok{background:var(--ff-ok);color:#fff;}

/* ============================================================
   Tables (top 100)
   ============================================================ */
.ffnick table{width:100%;border-collapse:collapse;margin-top:10px;}
.ffnick th,.ffnick td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--ff-soft);font-size:15px;}
.ffnick th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#888;border-bottom:1px solid #ddd;}
.ffnick td.rk{width:40px;color:#999;}
.ffnick td.nm{font-size:18px;}
.ffnick td.cp{width:90px;color:#666;white-space:nowrap;}
.ffnick td.empty{color:#888;text-align:center;padding:18px;}

/* top 15 list */
.ffnick ol.t15{list-style:decimal;padding-left:26px;margin:10px 0;}
.ffnick ol.t15 li{padding:6px 0;border-bottom:1px solid #f0f0f0;display:list-item;}
.ffnick ol.t15 .nm{font-size:18px;margin-right:10px;}
.ffnick ol.t15 .vw{color:#888;font-size:13px;margin-right:10px;}

/* ============================================================
   Submit form
   ============================================================ */
.ffnick form.sub{display:flex;flex-direction:column;gap:10px;max-width:420px;margin-top:10px;}
.ffnick form.sub label{font-size:13px;color:#555;}
.ffnick .subitem{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--ff-soft);border-radius:4px;padding:8px 10px;margin-top:6px;}
.ffnick .subitem .nm{font-size:17px;}
.ffnick .subitem .ct{font-size:12px;color:#888;white-space:nowrap;}
.ffnick .form-msg{color:var(--ff-ok);font-size:14px;min-height:18px;}

/* ============================================================
   FAQ + content article helpers (guide/about pages)
   ============================================================ */
.ffnick .faq h3{margin-top:16px;}
.ffnick .faq p{color:#444;}
.entry-content .callout{background:#fbf4ef;border:1px solid #f0d9c8;border-radius:6px;padding:14px 16px;margin:18px 0;}
.entry-content .callout h2,.entry-content .callout h3{border:0;margin:0 0 6px;padding:0;font-size:16px;}
.entry-content .toc{background:#fafafa;border:1px solid #ececec;border-radius:6px;padding:14px 18px;margin:18px 0;}
.entry-content ol.steps{counter-reset:step;list-style:none;padding-left:0;}
.entry-content ol.steps li{position:relative;padding:4px 0 10px 40px;margin:0;}
.entry-content ol.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:var(--ff-ink);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;}
.entry-content .ex{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.entry-content .ex span{border:1px solid #e2e2e2;border-radius:4px;padding:6px 12px;font-size:18px;}

/* ============================================================
   Detail page extras
   ============================================================ */
.ffnick .breadcrumb{font-size:13px;color:#888;margin:16px 0 4px;}
.ffnick .breadcrumb a{color:#888;}
.ffnick .breadcrumb a:hover{color:var(--ff-accent);}
.ffnick .loadmore-wrap{text-align:center;margin:16px 0;}

/* ============================================================
   Suggestion chips + recently searched
   ============================================================ */
#ff-suggest-bar{margin:14px 0 4px;}
.chips-row{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin:8px 0;}
.chips-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#999;padding-top:7px;white-space:nowrap;}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.ffnick .chip{padding:6px 13px;border:1px solid #ddd;background:#fff;color:var(--ff-ink);border-radius:999px;cursor:pointer;font-size:14px;line-height:1.3;}
.ffnick .chip:hover{border-color:var(--ff-accent);color:var(--ff-accent);}

/* ============================================================
   Trending now
   ============================================================ */
#ff-trending h2 .sub,#ff-foryou h2 .sub{font-size:13px;font-weight:normal;color:#999;}
.trend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;margin-top:10px;}
.trend-item{display:flex;align-items:center;gap:10px;border:1px solid #e2e2e2;border-radius:6px;padding:10px 12px;text-decoration:none;color:var(--ff-ink);background:#fff;}
.trend-item:hover{border-color:var(--ff-accent);text-decoration:none;}
.trend-rk{font-size:13px;color:#bbb;width:18px;flex-shrink:0;text-align:center;}
.trend-name{flex:1;font-weight:bold;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize;}
.trend-count{font-size:12px;color:#888;white-space:nowrap;}
.trend-badge{font-size:12px;font-weight:bold;border-radius:4px;padding:1px 6px;white-space:nowrap;}
.trend-badge.up{color:#1b7a3e;background:#e9f6ee;}
.trend-badge.down{color:#b42318;background:#fdecea;}
.trend-hot{font-size:13px;}

/* ============================================================
   Suggested-for-you cards (tap to copy)
   ============================================================ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-top:10px;}
.ffnick .ff-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;border:1px solid #e2e2e2;border-radius:8px;background:#fff;padding:16px 12px;cursor:pointer;text-align:center;}
.ffnick .ff-card:hover{border-color:var(--ff-accent);}
.ff-card-nick{font-size:18px;color:var(--ff-ink);word-break:break-word;line-height:1.4;}
.ff-card-lbl{font-size:11px;color:#999;}
.ffnick .ff-card.copied::after{content:"Copied ✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(27,122,62,.96);color:#fff;border-radius:8px;font-size:15px;font-weight:bold;}

/* ============================================================
   Full nickname list — one per row, show the whole (long) name
   ============================================================ */
#ff-list{grid-template-columns:1fr;}
#ff-list .row{flex-wrap:wrap;}
#ff-list .name{white-space:normal;overflow:visible;text-overflow:clip;font-size:20px;word-break:break-word;min-width:140px;}
.ffnick .skip{position:absolute;left:-999px;}
.ffnick .skip:focus{left:8px;top:8px;background:#fff;padding:8px;border:1px solid var(--ff-accent);}