/*
Theme Name: FrankFeed Child
Theme URI: https://frankfeed.co.in
Description: FrankFeed Child Theme based on Astra
Author: FrankFeed
Author URI: https://frankfeed.co.in
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: frankfeed-child
*/

/* ── IMPORT PARENT THEME ── */
@import url("../astra/style.css");

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&family=Noto+Sans:wght@400;500;600&display=swap');

:root {
  --ff-brand: #1557BF;
  --ff-brand-dark: #0D3E8A;
  --ff-saffron: #FF6B00;
  --ff-green: #00875A;
  --ff-ink: #0D1117;
  --ff-paper: #F5F7FA;
  --ff-card: #FFFFFF;
  --ff-muted: #6B7280;
  --ff-border: #E5E7EB;
  --ff-tag-bg: #EEF3FF;
}

/* ══════════════════════════════
   GLOBAL
══════════════════════════════ */
body {
  font-family: 'Noto Sans', sans-serif !important;
  background: var(--ff-paper) !important;
  color: var(--ff-ink) !important;
}

/* ══════════════════════════════
   TOPBAR
══════════════════════════════ */
#ff-topbar {
  background: var(--ff-brand-dark);
  color: #fff;
  font-size: 13px;
  padding: 7px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
#ff-topbar a {
  color: #FFD580;
  text-decoration: none;
  font-weight: 600;
}

/* ══════════════════════════════
   HEADER
══════════════════════════════ */
.site-header,
#masthead {
  background: #fff !important;
  border-bottom: 3px solid var(--ff-brand) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* Logo */
.site-title a,
.ast-site-name-text {
  font-family: 'Baloo 2', cursive !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--ff-brand) !important;
  letter-spacing: -0.5px !important;
}

/* Nav links */
.main-navigation a,
.ast-main-header-bar .menu-link {
  font-family: 'Noto Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--ff-ink) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  transition: background 0.15s !important;
}
.main-navigation a:hover,
.ast-main-header-bar .menu-link:hover {
  background: var(--ff-tag-bg) !important;
  color: var(--ff-brand) !important;
}

/* ══════════════════════════════
   TICKER BAR
══════════════════════════════ */
#ff-ticker {
  background: var(--ff-saffron);
  color: #fff;
  padding: 9px 0;
  overflow: hidden;
  white-space: nowrap;
}
.ff-ticker-inner {
  display: inline-block;
  animation: ffticker 35s linear infinite;
  font-size: 13px;
  font-weight: 600;
  padding-left: 100%;
}
@keyframes ffticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.ff-ticker-label {
  background: var(--ff-ink);
  color: #FFD580;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 10px;
  border-radius: 3px;
  margin-right: 12px;
}

/* ══════════════════════════════
   HERO SECTION
══════════════════════════════ */
#ff-hero {
  background: linear-gradient(135deg, var(--ff-brand-dark) 0%, var(--ff-brand) 60%, #2B7FFF 100%);
  color: #fff;
  padding: 52px 20px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#ff-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.ff-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #FFD580;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}
#ff-hero h1 {
  font-family: 'Baloo 2', cursive !important;
  font-size: clamp(28px, 5vw, 46px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  margin-bottom: 12px !important;
}
#ff-hero h1 span { color: #FFD580; }
#ff-hero .ff-hero-sub {
  font-size: 16px;
  opacity: 0.88;
  max-width: 520px;
  margin: 0 auto 28px;
}
.ff-search-wrap {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.ff-search-wrap input {
  flex: 1;
  padding: 15px 18px;
  font-size: 15px;
  border: none;
  outline: none;
  font-family: 'Noto Sans', sans-serif;
}
.ff-search-wrap button {
  background: var(--ff-saffron);
  color: #fff;
  border: none;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
}
.ff-search-wrap button:hover { background: #e05c00; }
.ff-hero-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.ff-hero-stats div { text-align: center; }
.ff-hero-stats strong {
  display: block;
  font-family: 'Baloo 2', cursive;
  font-size: 22px;
  font-weight: 800;
  color: #FFD580;
}
.ff-hero-stats span { font-size: 12px; opacity: 0.8; }

/* ══════════════════════════════
   CATEGORY PILLS
══════════════════════════════ */
#ff-cats {
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 0 20px;
}
.ff-cat-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ff-muted);
  margin-bottom: 12px;
}
.ff-cat-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ff-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
  text-decoration: none !important;
}
.ff-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.ff-pill-govt  { background:#FFF3E0; color:#E65100 !important; border-color:#FFCCBC; }
.ff-pill-wfh   { background:#E8F5E9; color:#2E7D32 !important; border-color:#C8E6C9; }
.ff-pill-priv  { background:#E3F2FD; color:#1565C0 !important; border-color:#BBDEFB; }
.ff-pill-noida { background:#F3E5F5; color:#6A1B9A !important; border-color:#E1BEE7; }
.ff-pill-urgent{ background:#FCE4EC; color:#C62828 !important; border-color:#FFCDD2; }

/* ══════════════════════════════
   MAIN LAYOUT
══════════════════════════════ */
.ff-main-wrap {
  max-width: 1100px;
  margin: 28px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}
.ff-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ff-sec-head h2 {
  font-family: 'Baloo 2', cursive !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}
.ff-sec-head a {
  font-size: 13px;
  color: var(--ff-brand);
  font-weight: 600;
  text-decoration: none;
}

/* ══════════════════════════════
   JOB CARDS (WordPress posts)
══════════════════════════════ */
.ff-job-card,
.post.type-post {
  background: #fff !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  transition: box-shadow 0.15s, transform 0.15s !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.ff-job-card:hover,
.post.type-post:hover {
  box-shadow: 0 6px 20px rgba(21,87,191,0.1) !important;
  transform: translateY(-2px) !important;
}
/* Urgent ribbon */
.ff-job-card.urgent::before,
.post.tag-urgent::before {
  content: 'URGENT';
  position: absolute;
  top: 12px; right: -22px;
  background: var(--ff-saffron);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 28px;
  transform: rotate(45deg);
  letter-spacing: 0.5px;
}
.ff-job-logo {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--ff-tag-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  border: 1px solid var(--ff-border);
}
.ff-job-body { flex: 1; min-width: 0; }
.ff-job-title,
.entry-title a {
  font-family: 'Baloo 2', cursive !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ff-ink) !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 3px !important;
}
.ff-job-title:hover,
.entry-title a:hover { color: var(--ff-brand) !important; }

.ff-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.ff-chip {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}
.ff-chip-loc    { background: #F0F0F0; color: #444; }
.ff-chip-sal    { background: #E8F5E9; color: #2E7D32; font-weight: 700; }
.ff-chip-edu    { background: var(--ff-tag-bg); color: var(--ff-brand); }
.ff-chip-type   { background: #FFF3E0; color: #E65100; }

.ff-job-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.ff-job-date { font-size: 12px; color: #9CA3AF; }

/* Apply button */
.ff-apply-btn,
.ast-button, .wp-block-button__link {
  background: var(--ff-brand) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-family: 'Baloo 2', cursive !important;
  transition: background 0.15s !important;
  display: inline-block !important;
}
.ff-apply-btn:hover,
.ast-button:hover { background: var(--ff-brand-dark) !important; }

/* ══════════════════════════════
   SIDEBAR
══════════════════════════════ */
.ff-sidebar-card,
.widget {
  background: #fff !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  margin-bottom: 18px !important;
}
.ff-sidebar-card h3,
.widget-title {
  font-family: 'Baloo 2', cursive !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  color: var(--ff-ink) !important;
  border-bottom: none !important;
}

/* Telegram CTA widget */
.ff-tg-card {
  background: linear-gradient(135deg, #1877F2, #0D5DBE) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 20px !important;
  text-align: center !important;
  margin-bottom: 18px !important;
  border: none !important;
}
.ff-tg-card h3 {
  font-family: 'Baloo 2', cursive !important;
  font-size: 17px !important;
  color: #fff !important;
  margin-bottom: 6px !important;
}
.ff-tg-card p { font-size: 13px; opacity: 0.9; margin-bottom: 14px; }
.ff-tg-join {
  display: block;
  background: #fff;
  color: #1877F2 !important;
  font-weight: 700;
  font-size: 14px;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none !important;
  font-family: 'Baloo 2', cursive;
}

/* Quick links */
.ff-quick-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ff-border);
  text-decoration: none !important;
  color: var(--ff-ink) !important;
  font-size: 13.5px;
  font-weight: 500;
  transition: color 0.15s;
}
.ff-quick-link:last-child { border-bottom: none; }
.ff-quick-link:hover { color: var(--ff-brand) !important; }
.ff-ql-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.site-footer, #colophon {
  background: var(--ff-ink) !important;
  color: #9CA3AF !important;
  padding: 36px 20px 20px !important;
}
.site-footer .footer-logo {
  font-family: 'Baloo 2', cursive;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.site-footer .footer-logo span { color: var(--ff-saffron); }
.site-footer a { color: #9CA3AF !important; }
.site-footer a:hover { color: #fff !important; }
.site-footer .widget-title { color: #fff !important; }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 768px) {
  .ff-main-wrap { grid-template-columns: 1fr; }
  .ff-sidebar { display: none; }
  .ff-hero-stats { gap: 20px; }
  #ff-topbar span { display: none; }
}