/* Agency FB Bold */
@font-face {
    font-family: 'Agency FB';
    src: url('../fonts/AgencyFB/Agency_FB.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Agency FB Bold';
    src: url('../fonts/AgencyFB/AGENCYB.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Barlow Condensed Regular */
@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Barlow Condensed Bold */
@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/BarlowCondensed/BarlowCondensed-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Oswald Regular */
/* 200 - ExtraLight */
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald/Oswald-ExtraLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 300 - Light */
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald/Oswald-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* 400 - Regular */
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald/Oswald-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* 500 - Medium */
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald/Oswald-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* 600 - SemiBold */
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald/Oswald-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* 700 - Bold */
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald/Oswald-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {  
	font-family: 'OswaldCredits';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+000-5FF;
	src: local('Oswald');
}
.custom_font {
	font-family: 'OswaldCredits', sans-serif;
	font-size: 18px;
	width:150;
	text-align: center;
	color: #C0C0C0;
}
.custom_font td {
	padding-left: 10px;
	padding-right: 10px;
}


/* Body */

/* 2. Force full background rendering across all container blocks */
body {
		background-color: #202225 !important;
		background-image: none !important;
	}");


.body .container {
	color: #C0C0C0;
	background-color: #36393F;
	font-size: 18px;
	line-height: 24px;
}

div.row-fluid div.search {
	background-color: #4B4F56;
	padding: 10px 20px 10px 20px;
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

/* Item Page */
/* 1. Strip the default side paddings from Cassiopeia's main layout columns */
.container-component, 
main {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    width: 100%;
}

/* 2. Configure the Item Page card layout with a clean 10px outer gap */
div.item-page {
    border: 2px solid #383B3F;
    border-radius: 10px;
    background-color: #2F3136;
    padding: 20px;
    margin-top: 10px;
	margin-bottom: 20px;
    
    /* ── 10PX SIDE GAP CONFIGURATION ── */
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 20px); /* Subtracts 10px left + 10px right */
    box-sizing: border-box;   /* Locks paddings inside the width math */
}

div.item-page h1 {
    font-family: 'Agency FB', sans-serif;
	letter-spacing: 4px;
	color: #73E9B2;
}

div.item-page li, div.item-page p {
    font-family: 'Oswald', sans-serif;
	font-size: 20px;
}
div.item-page a {
    color: #0085E5;
	text-decoration: none;
}
div.item-page a:hover {
    color: #32ADFF;
	text-decoration: none;
}

div.item-page h2 {
    background-color: #2F3136;          /* Discord-style subtle dark grey backdrop */
    color: #FFB27F;                     /* Clean, crisp white text */
    padding: 6px 10px 4px 10px;                 /* Internal breathing room (top/bottom and sides) */
    border-radius: 6px;                 /* Smooth curved corners to match your UI design */
    font-family: 'Agency FB', sans-serif; /* Utilizing your game-themed headline asset */
	font-size: 26px;
    text-transform: uppercase;          /* Clean, uniform capital letters */
	letter-spacing: 2px;
    
    /* ── FULL WIDTH LOCK ENGINE ── */
    display: block;                     /* Guarantees block formatting context */
    width: 100%;                        /* Instructs the width to scale to full boundaries */
    box-sizing: border-box;             /* Forces the side padding inside the 100% math */
    background-color: #42454A;
    /* Clean exterior structural spacing separation rows */
    margin-top: 25px 0px 15px 0px;
}

/* ==========================================================================
   Social Media Links Module (Clean Structure Layout)
   ========================================================================== */

/* 1. Target the raw <ul> list wrapper to force items side-by-side */
ul.social-media-links-module {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none; /* Deletes Joomla's default bullet points */
    margin: 0;
    padding: 0;
}

/* 2. Style the anchor links to behave as block layout elements */
ul.social-media-links-module li a {
    display: inline-block;
    text-decoration: none;
}

/* 3. Apply your exact updated image designs and full 3px borders */
ul.social-media-links-module img {
    height: 40px;
    width: 40px;
    margin: 5px; /* Individual breathing room spacing around each bubble */
    
    background-color: #2F3136;   
    display: inline-block;       
    padding: 5px;               
    box-sizing: content-box;     
    
    /* Smooth rounded square layout configuration */
    border-radius: 10px;        
    border: 3px solid #383B3F;  /* Full uniform 3px dark grey frame ring */
    
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* 4. Complete full-border hover highlight pop animation */
ul.social-media-links-module img:hover {
    transform: scale(1.1);
    border-color: #7289DA; /* Shifts the entire 3px ring to Discord blurple */
}

/* ==========================================================================
   Profile classes
   ========================================================================== */
/* Container box background wrapper matching your dark Discord theme */
.profile-card-container {
    background-color: #2F3136;
    padding: 0px;
    box-sizing: border-box;
}

/* ── THE FLOAT ENGINE: This forces the text wrap mechanism ── */
img.profile-logo-image {
    float: left;                /* Pulls image left, forcing text up beside it */
    margin-right: 10px;         /* Creates the vertical gap spacing next to text */
    margin-bottom: 10px;         /* Creates the vertical gap spacing next to text */
}

/* Text formatting matching your global Oswald typography profiles */
p.profile-description-text {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    line-height: 26px;
    color: #FFFFFF;
    margin: 0;
}

/* ── THE SAFETY BRAKE: Prevents the shortcode from cramming beside the image ── */
.clear-layout-break {
    clear: both;                /* Resets the document flow layout boundary */
}

/* Bottom social linkages module block padding constraints */
.profile-social-links-row {
    margin-top: 15px;
}

/* ==========================================================================
   Patch notes table
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
   ========================================================================== */
table.customTableClass1 {
    width: 100%;                /* Forces table to use 100% of available screen width */
    max-width: 100%;            /* Prevents it from spilling out of its parent wrapper */
    border: 2px solid #2F3136;
    border-radius: 10px;        
    border-collapse: separate;  
    border-spacing: 0;          
    overflow: hidden;           
}

.customTableClass1 td {
    color: #C0C0C0;
    border: 2px solid #36393E;
    vertical-align: top;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    line-height: 24px;
    padding: 5px;               /* Matches your cellpadding="5" in CSS */
    
    /* Crucial rules to force text wrapping on mobile */
    word-wrap: break-word;       
    white-space: normal;         
}


.customTableClass1 tr:nth-child(odd) {
	background-color: #42454A;
}

.customTableClass1 tr:nth-child(even) {
	background-color: #3E4146;
}


/* ==========================================================================
   Custom Code Snippets Styling Box
   ========================================================================== */

/* 1. Target the outer structural code block containers */
pre[class*="language-"],
pre.language-markup {
    background-color: #1E1F22;          
    border: 2px solid #383B3F;          
    border-left: 5px solid #7289DA;     
    border-radius: 8px;                 
    
    /* ── DIRECT UNIFORM PADDING RESET ── */
    padding: 16px 20px 16px 20px;                 /* Symmetrical gaps on all 4 sides */
    margin: 20px 0px 20px 0px;                     
    overflow-x: auto;                   
    box-sizing: border-box;             
    
    /* ── TIMING & CONTENT RE-ALIGNMENT ── */
    display: block;                     /* Forces normal block formatting context */
}

/* 2. Target the inner typographic text layout and strip uneven spacing blocks */
pre[class*="language-"] code,
pre.language-markup code {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 15px;
    color: #E3E5E8;                     
    text-shadow: none;                  
    
    /* ── THE EVEN-PADDING FIXES ── */
    display: inline-block;              /* Forces the inner text engine block context */
    vertical-align: top;                /* Locks text lines starting exactly at pixel 0 */
    line-height: 22px;                  /* Locks explicit font execution space */
    margin: 0;                          /* Strips out hidden library margin padding shifts */
    padding: 0;                         /* Disconnects any native inner padding creep */
}

/* ── PRISM.JS SPECIFIC COMPONENT STRIPPING ── */
/* Some styling packages inject hidden line layouts that push elements down */
pre[class*="language-"]::before,
pre[class*="language-"]::after {
    content: none;                      /* Disables ghost line markers completely */
}


/* ==========================================================================
   NOBOSS NAVIGATION - DESKTOP
   ========================================================================== */
.container-banner {
	display: block;
	margin: 0;
}

header.nobossheader {
	background-color: #3D3D3D;
}

header.nobossheader .nb-container {
    max-width: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    background: transparent;
}
header.nobossheader .nb-container ul.menu.mod-list.nav {
	background-color: #3D3D3D;
}

/* 1. Target the menu list container directly from your parent base */
header.nobossheader .nb-container ul.menu.mod-list.nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 0px !important;                 /* Erases gaps between button slots */
    padding: 0px !important;
    margin: 0px !important;
    list-style: none !important;
    border-left: 1px solid #2d3135 !important; /* far-left grid border line */
}

/* 2. Target individual list items to reset default margins */
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item {
    margin: 0px !important;
    padding: 0px !important;
}

/* 3. Style the actual links into your original yellow boxed grid elements */
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item a,
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item span {
    color: #e2cb1f !important;            /* Classic bright yellow text */
    background: transparent !important;
    border: none !important;
    border-right: 1px solid #2d3135 !important; /* Vertical lines between buttons */
    padding: 10px 20px !important;        /* Thick cell box size */
    font-weight: bold !important;
	font-size: 20px;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    white-space: nowrap !important;       /* Prevents text from breaking internally */
}

/* 4. Active state block style (Targets the active list item e.g. PATCH NOTES grey backdrop cell) */
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item.current.active a,
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item.current a,
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item.active a {
    color: #e2cb1f !important;
    background-color: #555555 !important; /* Lighter gray accent cell backdrop */
}

/* ==========================================================================
   DESKTOP FINISHING TOUCHES: HOVER & ARROW POSITIONING
   ========================================================================== */

/* 1. Add the hover effect when mousing over a navigation link */
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item:hover > a,
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item:hover > span {
    color: #ffffff !important;            /* Turns text crisp white on hover */
    background-color: rgba(255, 255, 255, 0.05) !important; /* Micro-highlight block */
}

/* 2. Fix the dropdown indicator arrows (caret placement) */
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item.deeper.parent > a,
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item.deeper.parent > span {
    display: inline-flex !important;
    align-items: center !important;       /* Vertically centers both text and arrow together */
    gap: 6px !important;                 /* Places a clean space right after the text */
}

/* Ensure the absolute positioning or float of the default arrow icon is reset */
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item.deeper.parent > a::after,
header.nobossheader .nb-container ul.menu.mod-list.nav li.nav-item.deeper.parent > span::after {
    position: static !important;          /* Pulls it out of the top-right corner */
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* ==========================================================================
   DESKTOP SUB-MENU: EXACT HTML ELEMENT EDGE-TO-EDGE HOVER RESTORATION
   ========================================================================== */

/* 1. Strip default structural padding from the sub-menu container block */
header.nobossheader .nb-container ul.menu__sub.list-unstyled.small {
    padding: 0px !important;               /* Completely opens the inner area to the edges */
    margin: 0px !important;
    background-color: #212529 !important; /* Forces a crisp, clean dark gray drop box */
    border: 1px solid #2d3135 !important;
}

/* 2. Clear spacing from the list items and make them span full box width */
header.nobossheader .nb-container ul.menu__sub.list-unstyled.small li.nav-item {
    margin: 0px !important;
    padding: 0px !important;
    width: 100% !important;
    display: block !important;
}

/* 3. Style the sub-menu links to capture the whole click/hover canvas footprint */
header.nobossheader .nb-container ul.menu__sub.list-unstyled.small li.nav-item a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;    /* Safely contains the internal cell sizing */
    padding: 12px 20px !important;        /* Generates the link height and text inset edge buffer */
    color: #e2cb1f !important;            /* Original bright yellow text */
	font-size: 16px !important;
    background-color: transparent !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    text-decoration: none !important;
    text-align: left !important;
    border: none !important;
}

/* 4. Sub-menu Hover Effect: Fully highlight the hovered block from edge to edge */
header.nobossheader .nb-container ul.menu__sub.list-unstyled.small li.nav-item a:hover {
    color: #ffffff !important;            /* Text switches to white when highlighted */
    background-color: #555555 !important; /* Lighter gray block fill matching your main active cell */
}


/* ==========================================================================
   NOBOSS MOBILE
   ========================================================================== */
header.nobossheader--mobile {
	padding: 5px !important;
}
/* ==========================================================================
   NOBOSS MOBILE MENU RESTORATION
   ========================================================================== */

/* 1. Base State: Force all mobile links to turn yellow and strip default blocks */
header.nobossheader--mobile ul.menu li a,
header.nobossheader--mobile ul.menu li span,
header.nobossheader--mobile [class*="mobile"] ul li a {
    color: #e2cb1f !important;            /* Your classic yellow menu text */
    background: transparent !important;   /* Strips any default link background layers */
    border: none !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: block !important;
    padding: 14px 20px !important;        /* Keeps vertical tapping footprint clean and spacious */
}

/* 2. Active State: Kill the bright pink background block and use your gray accent */
header.nobossheader--mobile ul.menu li.current,
header.nobossheader--mobile ul.menu li.active,
header.nobossheader--mobile ul.menu li.current-active,
header.nobossheader--mobile ul.menu li[class*="active"],
header.nobossheader--mobile ul.menu li[class*="current"] {
    background-color: #555555 !important; /* Replaces pink with the elegant dark gray block */
    background-image: none !important;
}

/* Ensure the link text inside that active block stays yellow and clean */
header.nobossheader--mobile ul.menu li.current > a,
header.nobossheader--mobile ul.menu li.active > a,
header.nobossheader--mobile ul.menu li.current-active > a {
    color: #e2cb1f !important;
    background: transparent !important;   /* Prevents nested background coloring fight */
}

/* 3. Hover/Tap feedback interaction for mobile links */
header.nobossheader--mobile ul.menu li a:hover,
header.nobossheader--mobile ul.menu li a:active {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Subtle gray response block */
    color: #ffffff !important;            /* Turns text white momentarily on hover/press */
}
/* ==========================================================================
   MOBILE SUB-MENU ALIGNMENT CORRECTION
   ========================================================================== */

/* 1. Force the nested sub-menu list container to align left */
header.nobossheader--mobile ul.menu ul,
header.nobossheader--mobile ul.menu__sub {
    text-align: left !important;
    padding-left: 15px !important;       /* Indents sub-items slightly so they look nested */
    margin: 0px !important;
}

/* 2. Lock the sub-menu list items to the left edge */
header.nobossheader--mobile ul.menu ul li,
header.nobossheader--mobile ul.menu__sub li {
    text-align: left !important;
    display: block !important;
    width: 100% !important;
}

/* 3. Force the sub-menu link text anchors to line up left instead of centering */
header.nobossheader--mobile ul.menu ul li a,
header.nobossheader--mobile ul.menu__sub li a,
header.nobossheader--mobile ul.menu ul li span,
header.nobossheader--mobile ul.menu__sub li span {
    text-align: left !important;
    display: block !important;
    width: 100% !important;
	font-size: 18px !important;
    box-sizing: border-box !important;
}