/*
Theme Name: TABAIX Tools Directory
Theme URI: https://tabaix.com
Author: Tayyab Ali
Author URI: https://tabaix.com
Description: Ultimate all-in-one theme for free browser tools with dynamic design systems, 5 design themes, mobile interactions, custom cursor, and no bloat.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: tabaix
*/

:root {
    /* ── Glassmorphic Dark Gold Defaults ── */
    --color-primary:        #C9A84C;
    --color-secondary:      #8B6914;
    --color-text-primary:   #F0F0FF;
    --color-text-secondary: #A0A0C0;
    --color-bg-primary:     #05050F;
    --color-bg-elevated:    rgba(255,255,255,0.04);
    --color-border-primary: rgba(201,168,76,0.15);

    --container-2xl:        1280px;
    --border-radius-base:   1rem;

    /* Glassmorphic palette */
    --glass-bg:             #05050F;
    --glass-gold:           #C9A84C;
    --glass-gold-dim:       rgba(201,168,76,0.15);
    --glass-text:           #F0F0FF;
    --glass-text-dim:       #A0A0C0;
    --glass-border:         rgba(201,168,76,0.12);
    --glass-hover:          rgba(201,168,76,0.08);
    --glass-card:           rgba(255,255,255,0.03);

    /* Gradients */
    --grad-gold:  linear-gradient(135deg,#C9A84C 0%,#F5D98B 50%,#C9A84C 100%);
    --grad-hero:  radial-gradient(ellipse 80% 60% at 50% -10%, rgba(201,168,76,0.18) 0%, transparent 70%),
                  radial-gradient(ellipse 50% 40% at 80% 80%, rgba(139,105,20,0.12) 0%, transparent 60%),
                  #05050F;
    --grad-card:  linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(201,168,76,0.03) 100%);
    --g: #C9A84C;
    --b: #05050F;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--glass-bg);
    color: var(--glass-text);
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
h1,h2,h3,h4,h5,h6 { margin-top:0; line-height:1.2; color: var(--glass-text); }
a { color: var(--glass-gold); transition: opacity 0.2s; }
a:hover { opacity: 0.8; }

/* ── Utilities ── */
.text-center  { text-align: center; }
.gold-text    { background: var(--grad-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.rv           { opacity:0; transform:translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; }
.rv.on         { opacity:1; transform:translateY(0); }


/* ── Buttons ── */
.btn-g {
    display:inline-flex; align-items:center; gap:0.4rem;
    background: var(--grad-gold);
    color: #000; font-weight:800;
    padding: 0.75rem 1.6rem;
    border-radius: var(--border-radius-base);
    text-decoration:none;
    transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 0 20px rgba(201,168,76,0.25);
}
.btn-g:hover { transform:translateY(-2px); box-shadow:0 0 32px rgba(201,168,76,0.45); color:#000; opacity:1; }

.btn-gh {
    display:inline-flex; align-items:center; gap:0.4rem;
    background: rgba(255,255,255,0.04);
    color: var(--glass-text); font-weight:700;
    border: 1px solid var(--glass-border);
    padding: 0.75rem 1.6rem;
    border-radius: var(--border-radius-base);
    text-decoration:none; backdrop-filter:blur(8px);
    transition: all 0.25s;
}
.btn-gh:hover { background:var(--glass-gold-dim); border-color:var(--glass-gold); color:var(--glass-gold); opacity:1; }

/* ── Sections ── */
section { padding:5rem 1.5rem; max-width:var(--container-2xl); margin:0 auto; }

/* ── Section pill & title ── */
.section-pill {
    display:inline-block; padding:0.3rem 1rem; border-radius:2rem;
    font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    background:var(--glass-gold-dim); border:1px solid var(--glass-border);
    color:var(--glass-gold); margin-bottom:1rem;
}
.st { font-size:clamp(2rem,4vw,3rem); margin-bottom:2.5rem; font-weight:900; line-height:1.1; }

/* ── Hero ── */
.hero {
    text-align:center; padding:7rem 1.5rem 5rem;
    background: var(--grad-hero);
    position:relative; overflow:hidden;
}
.hero::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(circle 600px at 50% 0%, rgba(201,168,76,0.08) 0%, transparent 70%);
}
.hero-badge {
    display:inline-block; padding:0.3rem 1.2rem; border-radius:2rem;
    font-size:0.82rem; font-weight:700;
    background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.3);
    color:var(--glass-gold); margin-bottom:1.8rem;
    backdrop-filter:blur(4px);
}
.h-title {
    font-size:clamp(3rem,6vw,5.5rem); font-weight:900; letter-spacing:-0.03em;
    margin-bottom:1rem; display:flex; flex-direction:column; gap:0.1em;
}
.h-title .l1 { color: var(--glass-text); }
.h-title .l2 { background:var(--grad-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.h-title .l3 { color:transparent; -webkit-text-stroke:2px var(--glass-gold); }
.h-sub {
    font-size:clamp(1rem,2vw,1.2rem); opacity:0.75;
    max-width:580px; margin:0 auto 2.5rem; line-height:1.7;
}
.h-ctas { display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; margin-bottom:4rem; }

/* ── Stats ── */
.stats-row {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:1.5rem; border-top:1px solid var(--glass-border); padding-top:3rem;
    max-width:800px; margin:0 auto;
}
/* Support both old .stat-cell and new .stat-item */
.stat-cell, .stat-item {
    text-align:center; cursor:default;
    position:relative;
}
.stat-n {
    font-size:2.8rem; font-weight:900; line-height:1;
    background:var(--grad-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-l {
    font-size:0.8rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.07em; opacity:0.6; margin-top:0.4rem;
}
/* Tooltip — works on both .stat-desc and .stat-tip */
.stat-desc, .stat-tip {
    display:none; position:absolute; bottom:calc(100% + 8px); left:50%;
    transform:translateX(-50%); background:rgba(10,10,20,0.95);
    border:1px solid var(--glass-border); color:var(--glass-text);
    font-size:0.78rem; line-height:1.5; padding:0.6rem 1rem;
    border-radius:0.6rem; white-space:normal; width:220px; z-index:100;
    backdrop-filter:blur(12px); text-align:left;
    box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.stat-cell:hover .stat-desc,
.stat-item:hover .stat-tip  { display:block; }

/* ── Tool card glow layer ── */
.tc-glow {
    position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.08) 0%, transparent 70%);
    pointer-events:none; opacity:0; transition:opacity 0.3s;
}
.tc:hover .tc-glow { opacity:1; }
.tc {
    display:flex; flex-direction:column;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(201,168,76,0.12);
    border-radius:var(--border-radius-base,1rem);
    padding:1.5rem; text-decoration:none; color:inherit;
    position:relative; transition:transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    overflow:hidden;
}
.tc:hover {
    transform:translateY(-5px);
    border-color:rgba(201,168,76,0.4);
    box-shadow:0 12px 40px rgba(0,0,0,0.3), 0 0 20px rgba(201,168,76,0.12);
}



/* ── Category filter tabs ── */
.cat-glass { display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:center; margin-bottom:2rem; }
.cg-tab {
    background:rgba(255,255,255,0.03); border:1px solid var(--glass-border);
    color:var(--glass-text-dim); padding:0.45rem 1rem; border-radius:2rem;
    font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.2s;
    text-decoration:none;
}
.cg-tab:hover,.cg-tab.act {
    background:var(--glass-gold-dim); border-color:var(--glass-gold);
    color:var(--glass-gold); opacity:1;
}
.cat-count { opacity:0.5; font-size:0.75rem; margin-left:4px; }

/* ── Tools grid ── */
.tg {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:1.2rem;
}
.tc {
    background:var(--grad-card); border:1px solid var(--glass-border);
    border-radius:var(--border-radius-base); padding:1.5rem;
    text-decoration:none; color:inherit; position:relative;
    transition:transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    overflow:hidden; display:flex; flex-direction:column;
}
.tc:hover {
    transform:translateY(-5px); border-color:rgba(201,168,76,0.45);
    box-shadow:0 8px 40px rgba(201,168,76,0.12); opacity:1;
}
.tc.feat { grid-column:span 2; }
@media(max-width:600px){ .tc.feat{grid-column:span 1;} }
.tc-glow {
    position:absolute; top:-40px; right:-40px; width:120px; height:120px;
    background:radial-gradient(circle,rgba(201,168,76,0.12) 0%,transparent 70%);
    pointer-events:none;
}
.tc-badge {
    position:absolute; top:0.8rem; right:0.8rem; font-size:0.65rem; font-weight:800;
    padding:0.2rem 0.55rem; border-radius:1rem;
    background:rgba(201,168,76,0.15); color:var(--glass-gold);
    border:1px solid rgba(201,168,76,0.3); text-transform:uppercase; letter-spacing:0.05em;
}
.tc-icon { font-size:2rem; margin-bottom:0.8rem; }
.tc-n { font-size:1rem; font-weight:700; margin-bottom:0.4rem; }
.tc-d { font-size:0.82rem; opacity:0.6; margin-bottom:0.8rem; flex:1; }
.tc-sub { font-size:0.72rem; opacity:0.4; margin-top:auto; }
.tc-footer {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.3rem; margin-top: auto; padding-top: 0.8rem;
    border-top: 1px solid rgba(201,168,76,0.08);
}
.tc-cat {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--glass-gold, #C9A84C); opacity: 0.8;
}


/* ── Blog cards ── */
.blog-card { border-radius:var(--border-radius-base) !important; }
.blog-card:hover .blog-card-img img { transform:scale(1.05); }
.blog-card-body { background:var(--grad-card); }

/* ── Card base ── */
.card {
    background:var(--grad-card); border:1px solid var(--glass-border);
    border-radius:var(--border-radius-base); overflow:hidden;
    transition:border-color 0.3s, box-shadow 0.3s;
}
.card:hover { border-color:rgba(201,168,76,0.35); box-shadow:0 4px 24px rgba(201,168,76,0.08); }

/* ── Pagination ── */
.pagination-wrap { display:flex; justify-content:center; gap:0.5rem; flex-wrap:wrap; margin-top:3rem; }
.pagination-wrap .page-numbers {
    padding:0.5rem 1rem; background:rgba(255,255,255,0.04);
    border:1px solid var(--glass-border); border-radius:0.6rem;
    text-decoration:none; font-weight:700; color:var(--glass-text); transition:all 0.2s;
}
.pagination-wrap .page-numbers:hover,
.pagination-wrap .page-numbers.current {
    background:var(--glass-gold-dim); color:var(--glass-gold); border-color:var(--glass-gold);
}


/* ── Responsive ── */
@media (max-width: 768px) {
    .h-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .tg { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    section { padding: 3rem 1rem; }
}
@media (max-width: 480px) {
    .h-ctas { flex-direction: column; align-items: center; }
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .stat-n { font-size: 2rem; }
}

/* ── Gutenberg Block Fixes ── */
.wp-block-social-links { gap: 0.5rem; display: flex; flex-wrap: wrap; }
.wp-block-social-links .wp-social-link { line-height: 0; }
.wp-block-social-links svg { width: 24px; height: 24px; }