/* ============================================================
   1. LOCAL FONT DEFINITIONS (PERFORMANCE OPTIMIZED)
   ============================================================ */

/* --- BODY FONT: INTER --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* Ensures text remains visible during load */
  src: url('../fonts/inter-v13-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-v13-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-v13-latin-600.woff2') format('woff2');
}

/* --- HEADING FONT: OUTFIT --- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/outfit-v11-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/outfit-v11-latin-800.woff2') format('woff2');
}

/* ============================================================
   2. GLOBAL VARIABLES & THEME SETTINGS
   ============================================================ */
:root {
    /* Fonts Mapping */
    --font-primary: 'Inter', sans-serif;       /* Body Text */
    --font-secondary: 'Outfit', sans-serif;    /* Headings */
    
    /* Core Colors */
    --color-bg: #F9FAFB;
    --color-card: #FFFFFF;
    --color-text-main: #1F2937;
    
    /* UPDATED: Darkened for better contrast (WCAG) */
    --color-text-muted: #555555; 
    
    /* Brand Colors */
    --color-brand: #FF3366;
    --color-brand-hover: #e0244b;
    
    /* UI States */
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-facebook: #1877F2;

    /* Layout & Spacing */
    --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.08);
    --spacing-unit: 8px;
    --header-height: 70px;
}

/* ============================================================
   3. BASE TYPOGRAPHY & RESET
   ============================================================ */

body {
    background-color: var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-primary);
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

/* Headings Configuration */
h1, h2, h3, h4, h5, h6,
.entry-title, 
.widget-title, 
.section-title,
.hero-title {
    font-family: var(--font-secondary);
    color: #111827;
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* Form Elements & Buttons */
button, input, select, textarea {
    font-family: var(--font-primary);
}

/* Links */
a {
    color: var(--color-brand); 
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--color-brand-hover);
}

/* ============================================================
   4. ACCESSIBILITY & CONTRAST FIXES
   ============================================================ */

/* WCAG Standard (4.5:1) Compliance for lighter text */
.ad-label, 
.search-count, 
.zodiac-date, 
.legacy-role, 
.post-widget-category, 
.fp-empty { 
    color: #666666 !important; 
}

/* Darkened Pink background to ensure white text is readable */
.category-pill { 
    background: #D11D46; 
}

/* Standard WordPress way to hide skip links visually but keep them accessible */
.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 !important;
}

/* Jab user Tab key dabaye tab hi nazar aaye */
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Google Consent Dialog Text Visibility Fix */
.fc-consent-root .fc-dialog .fc-faq-label, 
.fc-consent-root .fc-dialog p {
    color: #333333 !important;
}

/* ============================================================
   5. COMPONENT CLASSES
   ============================================================ */

/* Primary Button */
.button-primary {
    display: inline-block;
    background-color: var(--color-brand);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.button-primary:hover {
    background-color: var(--color-brand-hover);
    transform: translateY(-2px);
}

/* Sticky Wrapper */
.v26-sticky-wrap {
    position: sticky;
    top: var(--header-height, 70px); 
    z-index: 998;
    transition: top 0.3s ease;
}

/* Responsive Embeds (16:9) */
.embed-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-responsive iframe, 
.embed-responsive object, 
.embed-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* AdSense Stability Fix: Prevents layout shift and ensures ads load */
.widget-ad-clean, .sidebar-widget.widget-ad {
    min-width: 300px;
    min-height: 250px;
    display: block;
}

/* ============================================================
   6. RESPONSIVE UTILITIES (Mobile Stack)
   ============================================================ */

@media (max-width: 991px) {
    .v26-sticky-wrap {
        top: 60px; 
    }
    
    .admin-bar .v26-sticky-wrap {
        top: 106px;
    }

    /* Content Stacking */
    .site-content-wrapper {
        display: flex;
        flex-direction: column;
    }

    .site-content-wrapper > .main-content-column,
    .site-content-wrapper > .sidebar-column,
    .site-content-wrapper > .celebrity-content-column,
    .site-content-wrapper > .celebrity-sidebar-column {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* --- CELEBRITY AUTHOR BOX (E-E-A-T) --- */
.celeb-author-box {
    display: flex;
    align-items: center;
    gap: 25px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    margin: 40px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.2s ease;
}

.celeb-author-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    border-color: var(--color-brand);
}

.celeb-author-img img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f8fafc;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.celeb-author-content {
    flex: 1;
}

.celeb-author-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.celeb-author-name {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-family: var(--font-secondary); /* Outfit */
    font-weight: 800;
}

.celeb-author-name a {
    color: var(--color-dark);
    text-decoration: none;
}

.celeb-author-name a:hover {
    color: var(--color-brand);
}

.celeb-author-bio {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 12px 0;
    font-family: var(--font-primary); /* Inter */
}

.celeb-author-link a {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-brand);
    text-decoration: none;
}

.celeb-author-link a:hover {
    text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .celeb-author-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .celeb-author-img img {
        width: 70px;
        height: 70px;
    }
}

.pg-toc-container:not(.is-open) {
    max-height: 65px !important;
}
.pg-toc-header {
    height: 65px !important;
    display: flex !important;
    align-items: center !important;
}

/* ============================================================
   RANKING PILLS SYSTEM (For Ranks > 999)
   ============================================================ */

/* 1. Hide Star SVG when Pill Mode is active */
.rank-badge.is-pill svg,
.a-list-badge.is-pill svg,
.related-badge.is-pill svg,
.card-rank-badge.is-pill .rank-icon {
    display: none !important;
}

/* 2. Pill Shape Styling */
.rank-badge.is-pill,
.a-list-badge.is-pill,
.related-badge.is-pill,
.card-rank-badge.is-pill {
    background-color: var(--color-brand, #FF3366) !important; /* Primary Pink */
    width: auto !important;
    height: auto !important;
    min-width: 40px;
    padding: 4px 10px !important;
    border-radius: 50px !important; /* Pill Shape */
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(255, 51, 102, 0.3) !important;
    border: 2px solid #fff !important; /* White Border for pop */
    z-index: 20 !important;
}

/* 3. Text Styling inside Pill */
.rank-badge.is-pill .rank-badge__number,
.a-list-badge.is-pill .rank-badge-number,
.related-badge.is-pill .rank-badge__number,
.card-rank-badge.is-pill {
    position: static !important; /* Center align fix */
    transform: none !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Specific Fix for Archive Card Badge */
.card-rank-badge.is-pill {
    top: 10px !important;
    left: 10px !important;
    font-size: 11px !important;
    background-image: none !important; /* Remove star image */
}