/* Custom CSS for PBWoW

You can customize whatever you want.
Some defaults are included, like on PBWoW.com

Get all the FontAwesome CSS codes here: https://fortawesome.github.io/Font-Awesome/icons/

*/


/* Special post styles
--------------------------------------------- */

.bg1 .postprofile { background-image: url("./images/avatar-bg1.gif"); }
.bg2 .postprofile { background-image: url("./images/avatar-bg2.gif"); }
.blizz .bg1 .postprofile { background-image: url("./images/avatar-bg1-blizz.gif"); }
.blizz .bg2 .postprofile { background-image: url("./images/avatar-bg2-blizz.gif"); }
.red .bg1 .postprofile { background-image: url("./images/avatar-bg1-red.jpg"); }
.red .bg2 .postprofile { background-image: url("./images/avatar-bg2-red.jpg"); }

.propass .postprofile .avatar:after {
	background-image: url("./images/propass.gif");
	content: "";
	display: block;
	height: 84px;
	width: 120px;
	position: absolute;
	bottom: -9px;
	left: 50%;
	-webkit-transform: translateX(-49px);
	-ms-transform: translateX(-49px);
	transform: translateX(-49px);
}
.propass .postprofile .has-avatar .rank-icon {
	background: none;
}


/* Hide/show profile fields
 * (comment-out the fields that you DO want to display)
--------------------------------------------- */

/*.postprofile .profile-posts, */
/*.postprofile .profile-pb_wow_guild,*/
.profile-context .profile-pb_wow_level,
.profile-context .profile-pb_wow_race,
.profile-context .profile-pb_wow_gender,
.profile-context .profile-pb_wow_class,
.profile-context .profile-pb_diablo_class,
.profile-context .profile-pb_diablo_gender,
.profile-context .profile-pb_diablo_follower,
.profile-context .profile-pb_wildstar_race,
.profile-context .profile-pb_wildstar_class,
.profile-context .profile-pb_wildstar_gender,
.profile-context .profile-pb_wildstar_path,
.profile-context .profile-pb_bnet_host,
.profile-context .profile-pb_bnet_realm,
.profile-context .profile-pb_bnet_name,
.profile-context .profile-pb_bnet_url,
.profile-context .profile-pb_bnet_avatar {
	display: none;
}

.profile-context .profile-rank img,
.profile-context .profile-posts-rank img {
	vertical-align: middle;
}


/* Styling profile fields
 * (example of how to use only CSS to style profile fields)
--------------------------------------------- */

.profile-context .profile-custom-field:before,
.profile-context .profile-custom-field:after { font-family: FontAwesome; }

.profile-context .profile-pb_wow_guild { font-weight: bold; }
.profile-context .profile-pb_wow_guild strong { display: none; }
.profile-context .profile-pb_wow_guild:before { content: '\f104'; }
.profile-context .profile-pb_wow_guild:after { content: ' \f105'; }


/* General post content styling
 * (example of how to apply custom CSS to special rank post layouts)
--------------------------------------------- */

.blizz .content { color: #00C0FF; }
.blizz .content strong { color: #FFF; }

.mvp .content { color: #5DF644; }
.mvp .content strong { color: #FFF; }


/* Top-bar links
 * (example of how to apply custom icons to elements in the top-bar)
--------------------------------------------- */

#top-bar .icon1:before			{ content: '\f1b3'; }
#top-bar .icon2 > a:before		{ content: '\f004'; }
#top-bar .icon3 > a:before		{ content: '\f0ac'; }
#top-bar .icon4 > a:before		{ content: '\f0a4'; }
#top-bar .icon5 > a:before		{ content: '\f019'; }


/* Header links
 * (example of how to apply custom CSS to links in the header)
--------------------------------------------- */

.small-icon.icon-portal > a:before		{ content: '\f0ac'; }
.small-icon.icon-dkp > a:before			{ content: '\f091'; }
.small-icon.icon-custom1 > a:before		{ content: '\f004'; }
.small-icon.icon-custom2 > a:before		{ content: '\f164'; }


/* Other stuff
--------------------------------------------- */

.donate-button {
	background: url('./images/donate.jpg') no-repeat 0 0;
	display: block;
	width: 300px;
	height: 220px;
	padding: 0;
	margin: 0 auto;
}

.donate-button:hover {
	background-position: 0 -220px;
}


/* PBWoW.com specific stuff (personal preference)
--------------------------------------------- */

body.section-viewtopic .postbody h3,
#qr_postform .fields1 > dl {
	display: none;
}

body.section-viewtopic .postbody p.author {
	clear: none;
	margin: 0;
	padding: 8px 0 12px;
}



/* ===== OctoWow overrides -- DO NOT REMOVE ===== */


/* ===== OctoWow overrides -- DO NOT REMOVE ===== */
/* OctoWow PBWoW3 overrides
 *
 * Layered on top of the PayBas/PBWoW3style master GitHub source after
 * first-boot install (deploy/phpbb/entrypoint.sh appends an @import to
 * pbwow3/theme/custom.css). Mirrors the customizations the local
 * Tools/phpbb/ install carries in its own custom.css/stylesheet.css.
 *
 * Each block has a "why" comment explaining the gap in the upstream
 * style + what this fixes.
 */


/* ---- 1. Logo rendering ----
 * PayBas/PBWoW3style master ships #logo with `background: none no-repeat`
 * and `body.pbwow3 #logo { background-image: none; }` -- the upstream
 * style is logo-less by design, expecting each forum to drop its own.
 * The OctoWow brand image lives at images/theme/logo.png (overlaid by
 * entrypoint.sh from the website's public/octowow/logo.png). Set it as
 * the #logo background here, sized to fit PBWoW3's 280x140 logo box.
--------------------------------------------- */
body.pbwow3 .logo,
body.pbwow3 #logo {
	background: url("./images/theme/logo.png") no-repeat;
	background-size: 101%;
	width: 300px;
	height: 180px;
	margin: 10px 10px 40px 10px;
	display: block;
}


/* ---- 2. topiclist DL/DD resets ----
 * pbwow3/stylesheet.css @imports `base.css?v=3.2` but no such file ships in
 * pbwow3/theme/, so the @import 404s silently. PBWoW3 was authored for phpBB
 * 3.2 where prosilver inlined the resets in common.css; in 3.3.x they live in
 * prosilver/base.css which the PBWoW3 templates do NOT load. The float-based
 * topiclist layout in content.css silently depends on those resets -- without
 * them, browsers apply UA defaults (dd { margin-left: 40px } and ul {
 * padding-left: 40px }) and the dd.posts / dd.views / dd.lastpost floats
 * overflow past dt's `margin-right: -440px` pull-back, wrapping dd.lastpost
 * to a row below the title.
--------------------------------------------- */
ul.topiclist { padding: 0; }
ul.topiclist dd { margin: 0; }


/* ---- 3. dl.icon topic-status icon ----
 * PBWoW3 templates use dl.icon but the style ships no background-repeat /
 * background-size for the topic-row status icon, which makes browsers tile
 * the 27x27 topic_read.png across the full row width. Mirror prosilver's
 * dl.row-item rules so the icon renders once at the left.
--------------------------------------------- */
dl.icon {
	background-repeat: no-repeat;
	background-size: 27px;
}
dl.icon dt {
	background-repeat: no-repeat;
	background-position: 5px 95%;
	background-size: 17px;
}
ul.topiclist dl.icon dt .list-inner {
	padding-left: 40px;
}


/* ---- 4. #wrap / #page-body framing (id-only fallback) ----
 * GitHub PBWoW3 templates emit <div id="wrap"> (id only), but the live PBWoW
 * 3.2 templates emit <div id="wrap" class="wrap">. The style's `.wrap {
 * max-width: 990px }` rule only selects by class, so without the class the
 * page expands to full viewport width. Same problem hits <div id="page-body">
 * (no class), which makes the ornate dark frame around the content invisible
 * -- its 8 border-*.gif images, the rgba(0,0,0,0.8) backdrop, and the
 * .page-body:before outer glow all live on .page-body class selectors.
 * Mirror every affected rule onto the id so the layout matches the live
 * forum.turtlecraft.gg styling without touching the templates.
--------------------------------------------- */
#wrap {
	border: none;
	border-radius: 0;
	margin: 0 auto;
	max-width: 990px;
	padding: 0;
	position: relative;
	background:
		url("./images/border-right.gif") repeat-y 100% 0,
		url("./images/border-left.gif") repeat-y 0 0,
		rgba(0, 0, 0, 0.75);
	box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.65);
}

#page-body {
	margin: 0 -1px;
	padding: 20px 30px 38px;
	position: relative;
	background: #000;
	background:
		url("./images/border-bot-left.gif") no-repeat 0 100%,
		url("./images/border-bot-right.gif") no-repeat 100% 100%,
		url("./images/border-top-right.gif") no-repeat 100% 0,
		url("./images/border-top-left.gif") no-repeat 0 0,
		url("./images/border-bot.gif") repeat-x 0 100%,
		url("./images/border-top.gif") repeat-x 0 0,
		url("./images/border-right.gif") repeat-y 100% 0,
		url("./images/border-left.gif") repeat-y 0 0,
		rgba(0, 0, 0, 0.8);
}

#page-body:before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: -53px;
	padding-top: 53px;
	z-index: -1;
	box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.65);
}

#page-body:after {
	clear: both;
	content: "";
	display: block;
}


/* ---- 5. Header navblock + logo inset ----
 * Inset the header logo + FAQ/Register/Login block away from the wrap's
 * border-left.gif / border-right.gif decorative strips so they don't overlap.
--------------------------------------------- */
body.pbwow3 #logo {
	margin-left: 70px;
}

#page-header .navblock {
	right: 65px;
}


/* ---- 6. forum-blocks flex layout ----
 * PBWoW3 lays out forum cards inside each category via
 * .forum-blocks li.row { float: left; width: 33.3% }. That works fine when
 * every card has the same height, but if any card's description wraps to
 * more lines than its neighbours (e.g. Community/Events with a 3-line desc),
 * the next-row cards "snag" against the tall card's bottom edge instead of
 * starting a fresh row -- leaving visible gaps in the grid. Flip the parent
 * <ul> to flex-wrap so each row's height is the max of its members and
 * wrapping is clean regardless of card content length.
--------------------------------------------- */
.forum-blocks ul.forums {
	display: flex;
	flex-wrap: wrap;
}