/* assets/profilestyle.css
   Creator profile page styles.
   Color schemes, layout configurations, icons, and sidebar.
   Loaded only on profile pages -- not sitewide.
   ---------------------------------------------------------------- */

/* ── Base profile structure ───────────────────────────────────── */
.profilepage {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1em 3em;
}

/* ── Color schemes ────────────────────────────────────────────── */

/* 1. Midnight -- DARK -- pure black, warm gold */
.scheme-midnight {
    --bg:         #000000;
    --bg2:        #141414;
    --bg3:        #242420;
    --border:     #383530;
    --text:       #e8e2d0;
    --textmuted:  #908060;
    --accent:     #c8a84b;
    --accent2:    #a08030;
    --shadow:     rgba(0,0,0,0.8);
}

/* 2. Parchment -- LIGHT -- warm cream, saddle brown */
.scheme-parchment {
    --bg:         #f5f0e8;
    --bg2:        #ede8dc;
    --bg3:        #e0d8c8;
    --border:     #c8b898;
    --text:       #2a1f0f;
    --textmuted:  #7a6040;
    --accent:     #8b4513;
    --accent2:    #6b3410;
    --shadow:     rgba(100,60,20,0.2);
}

/* 3. Crimson -- DARK -- true crimson, cream text */
.scheme-crimson {
    --bg:         #be0032;
    --bg2:        #9a0028;
    --bg3:        #780020;
    --border:     #e03060;
    --text:       #fff0f0;
    --textmuted:  #f0a0b0;
    --accent:     #ffd0d8;
    --accent2:    #ffb0c0;
    --shadow:     rgba(80,0,20,0.6);
}

/* 4. Ocean -- MEDIUM -- mid-ocean blues, bright teal accent */
.scheme-ocean {
    --bg:         #7e90a2;
    --bg2:        #8097ae;
    --bg3:        #83a0bb;
    --border:     #90b2cd;
    --text:       #edf6ff;
    --textmuted:  #c0dbed;
    --accent:     #6fe6ff;
    --accent2:    #6fcde1;
    --shadow:     rgba(0,10,30,0.5);
}

/* 5. Forest -- MEDIUM -- emerald green, gold accent */
.scheme-forest {
    --bg:         #177245;
    --bg2:        #105c38;
    --bg3:        #0a482c;
    --border:     #28a060;
    --text:       #e8fdf0;
    --textmuted:  #90d8a8;
    --accent:     #f0c040;
    --accent2:    #d0a020;
    --shadow:     rgba(0,30,15,0.6);
}

/* 6. Slate -- LIGHT -- cool silver grey, cobalt accent */
.scheme-slate {
    --bg:         #f0f2f5;
    --bg2:        #e4e8ee;
    --bg3:        #d8dde6;
    --border:     #b0b8c8;
    --text:       #1a2030;
    --textmuted:  #506078;
    --accent:     #2060c0;
    --accent2:    #1848a0;
    --shadow:     rgba(20,40,80,0.15);
}

/* 7. Ember -- DARK -- burnt sienna, flame accent */
.scheme-ember {
    --bg:         #cb410b;
    --bg2:        #a83408;
    --bg3:        #882808;
    --border:     #f06030;
    --text:       #fff5ee;
    --textmuted:  #f0c0a0;
    --accent:     #ffe080;
    --accent2:    #ffc040;
    --shadow:     rgba(80,20,0,0.6);
}

/* 8. Monochrome -- LIGHT -- clean white, pure black */
.scheme-monochrome {
    --bg:         #ffffff;
    --bg2:        #f0f0f0;
    --bg3:        #e0e0e0;
    --border:     #c0c0c0;
    --text:       #101010;
    --textmuted:  #606060;
    --accent:     #101010;
    --accent2:    #404040;
    --shadow:     rgba(0,0,0,0.15);
}



/* 9. Hotdog Stand -- LIGHT -- pure yellow, pure red, bun gold */
.scheme-hotdog {
    --bg:         #ffff00;
    --bg2:        #ff0000;
    --bg3:        #cc0000;
    --border:     #8b4513;
    --text:       #1a0000;
    --textmuted:  #4a0000;
    --accent:     #8b4513;
    --accent2:    #5c2d0a;
    --shadow:     rgba(100,0,0,0.4);
}

/* 10. Archangel -- DARK -- black, electric blue, royal blue */
.scheme-archangel {
    --bg:         #000000;
    --bg2:        #0028a0;
    --bg3:        #001870;
    --border:     #0050ff;
    --text:       #ffffff;
    --textmuted:  #a0b8ff;
    --accent:     #0088ff;
    --accent2:    #0060cc;
    --shadow:     rgba(0,0,80,0.8);
}

/* 11. Matrix -- DARK -- black, matrix green */
.scheme-matrix {
    --bg:         #000000;
    --bg2:        #001400;
    --bg3:        #002000;
    --border:     #008000;
    --text:       #00ff41;
    --textmuted:  #008f20;
    --accent:     #00ff41;
    --accent2:    #00c030;
    --shadow:     rgba(0,80,0,0.7);
}

/* 12. Concord -- MEDIUM -- rich purples */
.scheme-concord {
    --bg:         #2a0a4a;
    --bg2:        #3a1060;
    --bg3:        #4a1878;
    --border:     #7030b0;
    --text:       #f0e8ff;
    --textmuted:  #c090e8;
    --accent:     #d080ff;
    --accent2:    #a850e0;
    --shadow:     rgba(40,0,80,0.7);
}

/* 13. Batman -- DARK -- black charcoal, yellow serif */
.scheme-batman {
    --bg:         #000000;
    --bg2:        #141414;
    --bg3:        #282828;
    --border:     #404040;
    --text:       #ffd700;
    --textmuted:  #b89800;
    --accent:     #ffd700;
    --accent2:    #c8a800;
    --shadow:     rgba(0,0,0,0.9);
}

/* 14. Newsdesk -- LIGHT -- white, grey, charcoal, red highlights */
.scheme-newsdesk {
    --bg:         #ffffff;
    --bg2:        #e8e8e8;
    --bg3:        #6e6e6e;
    --border:     #b0b0b0;
    --text:       #1a1a1a;
    --textmuted:  #505050;
    --accent:     #cc0000;
    --accent2:    #990000;
    --shadow:     rgba(0,0,0,0.2);
}

/* 15. Cyberpunk -- DARK -- deep purple-black, neon pink and cyan */
.scheme-cyberpunk {
    --bg:         #0d0015;
    --bg2:        #180028;
    --bg3:        #220038;
    --border:     #8800cc;
    --text:       #f0e8ff;
    --textmuted:  #c080ff;
    --accent:     #ff0090;
    --accent2:    #00ffff;
    --shadow:     rgba(80,0,120,0.8);
}

/* 16. Mustard -- LIGHT -- various warm yellows */
.scheme-mustard {
    --bg:         #f5d020;
    --bg2:        #e6b800;
    --bg3:        #c89800;
    --border:     #a07800;
    --text:       #1a1000;
    --textmuted:  #4a3800;
    --accent:     #7a4800;
    --accent2:    #5a3000;
    --shadow:     rgba(80,50,0,0.3);
}


/* ── Scheme-specific font overrides ──────────────────────────── */
.scheme-newsdesk {
    font-family: "Courier New", Courier, monospace;
}
.scheme-newsdesk h1,
.scheme-newsdesk h2,
.scheme-newsdesk h3,
.scheme-newsdesk .profilename {
    font-family: "Courier New", Courier, monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.scheme-batman .profilename,
.scheme-batman h1,
.scheme-batman h2,
.scheme-batman h3 {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.scheme-matrix {
    font-family: "Courier New", Courier, monospace;
}
/* ── Apply variables to elements ──────────────────────────────── */
/* !important needed on headings/text to override sitestyle.css hardcoded colors */
/* but NOT on links -- tipbtn handles its own color separately               */
.profilepage {
    background: var(--bg);
    color:      var(--text);
}
.profilepage h1,
.profilepage h2,
.profilepage h3 {
    color:        var(--accent) !important;
    border-color: var(--border) !important;
}
.profilepage h2 { border-bottom-color: var(--border) !important; }
.profilepage p,
.profilepage li { color: var(--text); }
.profilepage td { color: var(--text); border-bottom-color: var(--border); }
.profilepage th { color: var(--accent) !important; background: var(--bg3) !important; }
.profilepage tr:nth-child(even) td { background: var(--bg2); }
/* Regular links in profile content */
.profilepage a:not(.tipbtn)         { color: var(--accent); }
.profilepage a:not(.tipbtn):visited { color: var(--accent2); }
.profilepage a:not(.tipbtn):hover   { color: var(--accent2); }

.profilebanner {
    background: var(--bg3);
    border-bottom: 2px solid var(--border);
    position: relative;
    overflow: hidden;
}

/* bannerwrap always holds its height even with no image */
.bannerwrap {
    position: relative;
    min-height: 60px;
    overflow: hidden;
    background: var(--bg3);
}
.profilebanner img.bannerimg {
    width: 100%;
    object-fit: cover;
    display: block;
}
.profilephoto {
    border: 3px solid var(--accent);
    box-shadow: 0 4px 16px var(--shadow);
    background: var(--bg2);
    object-fit: cover;
}
.coverimg {
    background: var(--bg2);
    border: 1px solid var(--border);
    object-fit: cover;
    display: block;
    box-shadow: 0 2px 8px var(--shadow);
    transition: transform 0.2s;
}
.coverimg:hover { transform: translateY(-3px); }

/* ── Image placeholders -- shown when no image is uploaded ────── */
/* These give every image slot a visible shape so the layout
   does not collapse when a creator has not yet added images.    */
.imgplaceholder {
    background: var(--bg3);
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textmuted);
    font-size: 0.75em;
    opacity: 0.6;
}
/* Banner placeholder -- needs explicit height to match bannerimg */
.bannerwrap .imgplaceholder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
}
/* Profile photo placeholder */
.profilephoto.imgplaceholder {
    font-size: 0.7em;
    text-align: center;
    padding: 0.5em;
}
/* Cover image placeholder */
.coverimg.imgplaceholder {
    min-height: 110px;
}

.profileicon {
    color: var(--accent);
    opacity: 0.85;
    font-size: 2em;
    line-height: 1;
}

.profilebio {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 1.2em 1.5em;
    margin: 1em 0;
    line-height: 1.7;
}

.profilesidebar {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 1em 1.2em;
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--textmuted);
    min-width: 200px;
    max-width: 240px;
}
.profilesidebar h3 {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 0;
}

.profilewithsidebar {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
}
.profilewithsidebar .profilemain { flex: 1; min-width: 0; }

/* ── Cover image grid helpers ─────────────────────────────────── */
.coverrow {
    display: flex;
    gap: 0.6em;
    margin: 0.8em 0;
    flex-wrap: nowrap;
}
.covergrid2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6em;
}
.covergrid2x3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6em;
}
.coverrow .coverimg  { flex: 1; min-width: 80px; height: 120px; }
.covergrid2x2 .coverimg { height: 130px; width: 100%; }
.covergrid2x3 .coverimg { height: 120px; width: 100%; }

/* ── Creator name and meta ────────────────────────────────────── */
.profilename {
    font-size: 2em;
    font-weight: bold;
    color: var(--accent);
    margin: 0.2em 0 0.1em;
    line-height: 1.2;
    border: none !important;
    display: inline;
}
.profilemeta {
    font-size: 0.85em;
    color: var(--textmuted);
    margin-bottom: 0.8em;
}
.profilenameline {
    display: block;
    width: 100%;
    text-align: center;
}

/* ── Tip button ───────────────────────────────────────────────── */
.tipbtn {
    display: inline-block;
    padding: 0.5em 1.4em;
    background: var(--accent);
    color: var(--bg);
    font-weight: bold;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 1em;
    margin: 0.5em 0;
    transition: background 0.2s;
}
.tipbtn:hover { background: var(--accent2); color: var(--bg); text-decoration: none; }
.profilepage .tipbtn,
.profilepage .tipbtn:visited,
.profilepage .tipbtn:hover { color: var(--bg) !important; text-decoration: none !important; }

/* ================================================================
   LAYOUT CONFIGURATIONS
   ================================================================ */

/* ── Layout 1: Marquee ────────────────────────────────────────── */
/* Wide banner across top, profile photo overlapping bottom-left,
   icon top-right, 4 cover images in a row below.                 */
/* ── Layout 1: Marquee (table-based) ─────────────────────────── */
.layout-1 .l1table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}
/* Top row: banner spans full width */
.layout-1 .l1banner {
    padding: 0;
    background: var(--bg3);
}
.layout-1 .l1banner img.bannerimg {
    width: 100%; height: auto; display: block;
}
/* Middle row: profile pic left, name/tip center, icon right */
.layout-1 .l1piccel {
    width: 160px;
    text-align: center;
    padding: 1em 1em 0.5em;
    vertical-align: middle;
}
.layout-1 .profilephoto {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
    display: block;
    margin: 0 auto;
}
.layout-1 .l1namecel {
    padding: 1em 1em 0.5em;
    vertical-align: middle;
}
.layout-1 .l1iconcel {
    width: 60px;
    text-align: center;
    vertical-align: middle;
    font-size: 2.2em;
    padding: 0.5em;
    color: var(--accent);
}
/* Bottom row: covers span full width */
.layout-1 .l1covercel {
    padding: 0.8em 0.5em 1.2em;
}
.layout-1 .l1covers {
    display: table;
    width: 100%;
    border-collapse: collapse;
}
.layout-1 .l1coverbox {
    display: table-cell;
    width: 25%;
    text-align: center;
    vertical-align: middle;
    padding: 0.3em;
    border: 1px solid var(--border);
    background: var(--bg2);
}
.layout-1 img.coverimg,
.layout-1 div.coverimg {
    width: 100px;
    height: 100px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* ── Layouts 2-6: All table-based ─────────────────────────────── */
/* Structure handled by inline styles in profileview.php          */
/* Only element sizing defined here                               */

.layout-2 .profilephoto,
.layout-3 .profilephoto,
.layout-4 .profilephoto,
.layout-5 .profilephoto { width:140px; height:140px; border-radius:50%; object-fit:cover; display:block; margin:0 auto; }
.layout-6 .profilephoto { width:100px; height:100px; border-radius:50%; object-fit:cover; display:block; margin:0 auto; }

.layout-2 .bannerimg,
.layout-4 .bannerimg,
.layout-5 .bannerimg { width:100%; height:auto; display:block; }

.layout-2 .coverimg,
.layout-3 .coverimg,
.layout-4 .coverimg,
.layout-5 .coverimg { width:110px; height:110px; object-fit:cover; display:block; margin:0 auto; }