/* =========================================================
   Gimmie Girl Productions — GOLD / BLACK Override Theme
   File: gold.css
   How to use: include AFTER your current CSS links, e.g.

   <link href="/images/skins/pink/assets/css/styles.css" rel="stylesheet">
   <link href="/images/skins/pink/assets/css/media-queries.css" rel="stylesheet">
   <link href="/images/css/css_main.css" rel="stylesheet">
   <link href="/images/css/mobile.css" rel="stylesheet">
   <!-- Add this line LAST to override everything: -->
   <link href="/themes/gold/gold.css" rel="stylesheet">

   This file overrides colors, backgrounds, and common UI elements
   to produce a cohesive gold/black theme while keeping your existing
   HTML and layout intact.
   ========================================================= */

/* ------------ Palette (CSS variables) ------------- */
:root
{
    --gold-1: #d4af37;   /* primary rich gold */
    --gold-2: #c29a2b;   /* hover gold */
    --gold-3: #b48a20;   /* pressed gold */
    --gold-4: #8f6f16;   /* deep accent */
    --gold-soft: #e9d8a6;/* light gold for borders/lines */
    --ink-0: #0b0b0c;    /* page background */
    --ink-1: #111111;    /* text background */
    --ink-2: #181818;    /* panels */
    --ink-3: #1f1f1f;    /* elevated panels */
    --ink-4: #262626;    /* darker lines */
    --text-0: #f5f0dc;   /* primary text (warm off-white) */
    --text-1: #e9e4cf;   /* secondary text */
    --text-2: #bfb89a;   /* muted text */
    --link:   #e2c675;   /* link gold */
    --link-h: #ffd76e;   /* link hover gold */
}

/* ----------------- Global ----------------- */
html, body
{
    background-color: var(--ink-0) !important;
    color: var(--text-0) !important;
    /* subtle tiled background */
    background-image: url("gold_bg.svg") !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-size: auto !important;
}

/* Normalize system fonts to keep existing family but enforce color */
body, p, table, td, tr, div, a, input, fieldset, legend, textarea, select, ul, li,
h1, h2, h3, h4, h5, .header
{
    color: var(--text-0) !important;
}

/* Links */
a
{
    color: var(--link) !important;
    text-decoration: none;
}
a:hover,
a:focus
{
    color: var(--link-h) !important;
}

/* Horizontal rules / separators */
hr
{
    height:3px !important;
    background: linear-gradient(90deg, var(--gold-3), var(--gold-1)) !important;
    border:0 !important;
}

/* ----------------- Site Header / Nav ----------------- */
.thewrapper,
.theheader,
.thescrollhead,
.thescrollnav,
.m-theheader
{
    background-color: transparent !important;
}

.theheader
{
    background: linear-gradient(180deg, var(--ink-3), var(--ink-2)) !important;
    border-bottom: 1px solid var(--gold-4) !important;
}
.thelogo,
.thescrolllogo,
.m-thelogo
{
    color: var(--gold-1) !important;
}
.thenav a,
.thescrollnav a
{
    color: var(--text-0) !important;
    border-bottom: 0 !important;
}
.thenav a:hover,
.thescrollnav a:hover
{
    color: var(--link-h) !important;
}

/* Join / CTA buttons */
.nav-joinbutton,
.pagebutton,
input.pagebutton,
.cbbutton,
.cb,
.cutebutton,
.cutebuttond,
.cutebuttondark,
.cutebuttonr,
.mb input.cutesmall,
.mv input.cutesmall,
.mg input.cutebuttonb,
.mv input.cutebuttonb,
.mb input.cutebuttonb,
.bigbuttonfb,
.bigbuttonfg,
.bigbuttonfo,
.cutebutton_subscribe,
.cutebutton_unsubscribe,
.cutebutton_red,
.delete_small
{
    background-image: none !important;
    background-color: var(--gold-1) !important;
    color: #0b0b0c !important;
    border: 1px solid var(--gold-3) !important;
    box-shadow: 0 0 0 1px rgba(212,175,55,0.15) inset, 0 1px 2px rgba(0,0,0,0.35) !important;
}
.nav-joinbutton:hover,
.pagebutton:hover,
input.pagebutton:hover,
.cbbutton:hover,
.cb:hover,
.cutebutton:hover,
.cutebuttond:hover,
.cutebuttondark:hover,
.cutebuttonr:hover,
.mb input.cutesmall:hover,
.mv input.cutesmall:hover,
.mg input.cutebuttonb:hover,
.mv input.cutebuttonb:hover,
.mb input.cutebuttonb:hover,
.bigbuttonfb:hover,
.bigbuttonfg:hover,
.bigbuttonfo:hover,
.cutebutton_subscribe:hover,
.cutebutton_unsubscribe:hover,
.cutebutton_red:hover,
.delete_small:hover
{
    background-color: var(--gold-2) !important;
    color: #0b0b0c !important;
    border-color: var(--gold-4) !important;
}

/* Inputs */
input, select, textarea, button
{
    background-color: var(--ink-2) !important;
    color: var(--text-0) !important;
    border: 1px solid var(--ink-4) !important;
}
input:focus, select:focus, textarea:focus, button:focus
{
    outline: 1px solid var(--gold-2) !important;
    border-color: var(--gold-2) !important;
}

/* ----------------- Splash / Hero ----------------- */
.thesplash
{
    background: radial-gradient(1200px 600px at 30% 30%, rgba(212,175,55,0.12), transparent 70%) !important;
}
.splash-front h1,
.splash-front h2,
.splash-front p
{
    color: var(--text-0) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Fallback foreground image overlay tint */
.fadein2 > img,
.fadein img
{
    filter: saturate(0.8) contrast(0.95) brightness(0.9);
}

/* ----------------- Updates / Lists ----------------- */
.theupdates header h1,
.theupdates header h2
{
    color: var(--gold-1) !important;
}
.theupdates,
.theupdates ul li a h1,
.theupdates ul li a h2,
.theupdates ul li a p
{
    color: var(--text-0) !important;
}
.theupdates ul li a p
{
    color: var(--text-2) !important;
}

/* Pagination */
.browse_next,
.browse_next a
{
    color: var(--text-0) !important;
}
.browse_next a:hover,
.pagelink_sel
{
    background-color: var(--gold-1) !important;
    color: #000 !important;
    border-radius: 3px;
}

/* ----------------- Footer ----------------- */
.thefooter
{
    background: linear-gradient(180deg, var(--ink-2), var(--ink-0)) !important;
    color: var(--text-1) !important;
    border-top: 1px solid var(--gold-4) !important;
}
.thefooter a
{
    color: var(--link) !important;
}
.thefooter a:hover
{
    color: var(--link-h) !important;
}

/* ----------------- Legacy classes from main.css ----------------- */
/* Many of these had pinks/purples/blues and image backgrounds.
   We neutralize them to gold/black defaults without breaking layout. */

.small, .small a,
.mediumred, .mediumred a,
.smallred, .smallred a,
.username, .header, h1, h2, h3
{
    color: var(--text-0) !important;
}

.botm a,
.botcm a,
.feed_desc a,
.profilebasic span a,
.profilebasic div a,
.vg_a a, .vg_9a a, .vg_9b a,
.rel_2 a, .rel_a a, .browse_sm td div a,
.accountlink a, .upla a,
.abold a, .feed_vtitle a
{
    color: var(--link) !important;
    border-bottom: 1px dotted var(--gold-3) !important;
}
.botm a:hover,
.botcm a:hover,
.feed_desc a:hover,
.profilebasic span a:hover,
.profilebasic div a:hover,
.vg_a a:hover, .vg_9a a:hover, .vg_9b a:hover,
.rel_2 a:hover, .rel_a a:hover, .browse_sm td div a:hover,
.accountlink a:hover, .upla a:hover,
.abold a:hover, .feed_vtitle a:hover
{
    color: var(--link-h) !important;
    border-bottom-color: var(--gold-2) !important;
}

/* Panels / blocks */
.bigmessage,
.bigmessagebg,
.bigmessageyellow,
.bigmessagegreen,
.bigmessageblue,
.bigmessagelightblue,
.bigmessagebluelight,
.bd4,
.profile_4,
.profile_6,
.profile_desc,
.comment_body,
.comment_header
{
    background-color: var(--ink-2) !important;
    border-color: var(--ink-4) !important;
    color: var(--text-0) !important;
    background-image: none !important;
}

/* Dotted/category bars and borders */
.b1l, .b1b, .b1o, .b1y, .b1v, .b2b,
.h1b, .h1w, .h1c, .h1v, .h1g,
.profile_info_0, .profilo_bar,
.br_line, .feed_divider,
.gallery_descriptionline,
.calendar_by, .calendar_bz,
.vg_7, .vg_d
{
    border-color: var(--gold-4) !important;
    background-color: var(--ink-2) !important;
    color: var(--text-0) !important;
    background-image: none !important;
}

/* Tables / lists */
.b0, .b1, .b2,
.browse_bkbody,
.em_read, .em_unread, .em_sentitems, .em_friendrequest
{
    background-color: var(--ink-2) !important;
    color: var(--text-0) !important;
}

/* Hover rows */
.b1:hover, .b2:hover
{
    background-color: rgba(212,175,55,0.12) !important;
}

/* Error / alerts */
.errorbox, .errorbox2
{
    background-color: #3b1111 !important;
    border: 1px solid #7a2222 !important;
    color: #ffdede !important;
}

/* Galleries / tabs */
.bd_tabsp, .bd_tabsv, .bd_tabsf1, .bd_tabsp1, .bd_tabsv1
{
    background: linear-gradient(180deg, var(--ink-3), var(--ink-2)) !important;
}

/* Cut out image-based button backgrounds */
.cbbutton,
.cbgold,
.cuteinput,
.cutebutton_subscribe,
.cutebutton_unsubscribe,
.cutebutton_red
{
    background-image: none !important;
}

/* Horizontal badges/chips */
.aa span, .aa,
.ab span, .ab,
.ae, .af
{
    background: var(--ink-3) !important;
    color: var(--text-0) !important;
}

/* Profile header tabs */
#profileheader li a
{
    background-color: var(--ink-3) !important;
    color: var(--text-0) !important;
    border: 1px solid var(--ink-4) !important;
    border-bottom-color: var(--ink-3) !important;
}
#profileheader li a:hover
{
    background-color: var(--ink-4) !important;
    color: var(--link-h) !important;
}
#profileheader #selected
{
    background: var(--ink-2) !important;
    color: var(--gold-1) !important;
    border: 1px solid var(--gold-4) !important;
    border-bottom: 0 !important;
}

/* Forms on landing / signup */
.main_signupinputs, .main_signuppass, .main_countryselect, .main_postal, .main_birthselect
{
    background-color: var(--ink-2) !important;
    border: 1px solid var(--ink-4) !important;
    color: var(--text-0) !important;
}
.main_forgotemail
{
    color: var(--text-1) !important;
}

/* Pagination links within .browse_next already handled, but dotted links too */
.browse_submenu a
{
    color: var(--link) !important;
}
.browse_submenu a:hover
{
    color: var(--link-h) !important;
}

/* ----------------- Mobile overrides ----------------- */
.m-theheader
{
    background: linear-gradient(180deg, var(--ink-3), var(--ink-2)) !important;
    border-bottom: 1px solid var(--gold-4) !important;
}
.m-thesidemenu
{
    background: var(--ink-2) !important;
    color: var(--text-0) !important;
}
.m-thesidemenu header h1,
.m-thesidemenu a h1
{
    color: var(--text-0) !important;
}
.m-thesidemenu a
{
    color: var(--link) !important;
    border-bottom: 0 !important;
}
.m-thesidemenu a:hover
{
    color: var(--link-h) !important;
}

/* Mobile dotted separators */
.ip_dotted
{
    border-bottom: 1px dotted var(--gold-3) !important;
}

/* Mobile menu tabs */
.ip_menutab,
.ip_menutab a
{
    color: var(--text-0) !important;
}

/* Search bars / inputs */
.ip_search,
.ip_acbar
{
    color: var(--text-0) !important;
}

/* Force any residual white backgrounds to dark */
*[style*="background-color: #fff"],
*[style*="background-color:#fff"]
{
    background-color: var(--ink-1) !important;
}

/* Images keep their look; add optional soft radius */
img
{
    border-radius: 2px;
}

/* Accessibility: increase default contrast for small grey text */
.small, .small a, .grey
{
    color: var(--text-1) !important;
}

/* Tooltips / diamonds */
.diamond span
{
    background: var(--gold-1) !important;
    border-color: var(--gold-4) !important;
    color: #0b0b0c !important;
}