/* GENERAL
------------------------------------- */
blockquote {
    margin-left: 70px;
    margin-right: 40px;
    padding-left: 10px;
    border-left: 5px solid #0d7991;
}

body {
  font-family: "Sofia Sans", Arial, sans-serif;
}

.t4-mainbody .t4-component,
.t4-mainbody .component {
        padding-top: 10px;
}

/* HEADINGS / DISPLAY FONTS
------------------------------------- */
.navbar-brand.logo-text .site-name,
.t4-section-module .sub-title,
.category-module.mod-blog .category-link,
.category-module.mod-projects .category-link,
.blog .item-content .page-header>h2 a,
.t4-masthead .ja-masthead .ja-masthead-title,
.ja-masthead .ja-masthead-detail,
.acm-hero .hero-heading,
.acm-hero h2.hero-heading,
h1, h2, h3, h4, h5, h6 {
    font-family: "Exo 2", sans-serif;
    font-weight: bolder;
}

.module-title,
.acm-hero.style-2 .hero-heading a,
.blog .item-content .page-header>h2 a {
    color: #097d50;
}

.acm-hero.style-2 .hero-heading a:hover,
.blog .item-content .page-header>h2 a:hover {
    color: #522063;
}

/* Mobile */
.t4-mainbody h1 {
    font-size: 2.25rem; /* 36px */
    line-height: 1.15;
}

.t4-mainbody h2 {
    font-size: 1.5625rem; /* 25px */
    line-height: 1.2;
}

.t4-mainbody h3 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.25;
}

/* Desktop */
@media (min-width: 992px) {
    .t4-mainbody h1 {
        font-size: 2.375rem; /* 38px */
    }

    .t4-mainbody h2 {
        font-size: 1.75rem; /* 28px */
    }

    .t4-mainbody h3 {
        font-size: 1.25rem; /* 20px */
    }
}

/* CATEGORY BLOG
------------------------------------- */
/* Hides intro image on pages that requires it, class added to page options on the menu item */
body.view-category.hide-intro-image
.com-content-category-blog__items
figure.item-image {
    display: none;
}


/* HERO
------------------------------------- */

/* MASTHEAD
------------------------------------- */
.t4-masthead {
    padding: 0px;   
}

/* BREADCRUMB
------------------------------------- */
.breadcrumb {
    background-color: transparent;
}

/* SECTION-2, SERVICES
------------------------------------- */

/* SECTION-3, WHY I WRITE
------------------------------------- */

/* SECTION-4, FEATURED GUIDES
------------------------------------- */

/* SECTION-5
------------------------------------- */

/* SECTION-6, BLOG
------------------------------------- */

/* SECTION-7
------------------------------------- */

/* SECTION-8
------------------------------------- */

/* BACK TO TOP BUTTON
------------------------------------- */
#back-to-top {
    background: #30d68280;
}

/* TAGS
------------------------------------- */
.badge-info {
    background-color: #522063;
    margin: 5px 3px;
    border: solid 1px #522063;
}
.tags > li .badge-info {
    padding: 0.5rem;
    color: #fdfdfd;
}
a.badge-info:hover {
    background-color: transparent;
    border: solid 1px #522063;
    color: #522063;
}

/* PAGINATION
------------------------------------- */
.page-item.active .page-link {
    background-color: #522063;
    border: solid 1px #522063;
    color: #fdfdfd;
}

/* OFF CANVAS
------------------------------------- */
.t4-offcanvas .t4-off-canvas-header {
    background-color: #097d50;
}

.t4-offcanvas .t4-off-canvas-header a {
    color: #fdfdfd;
}


/* COLLECTION TABLES
------------------------------------- */

.datagrid.collection-table {
    width: 100%;
    margin-top: 1.5rem;
    font-family: "Sofia Sans", sans-serif;
}

.datagrid.collection-table table {
    width: 100%;
    border-collapse: collapse;
}

/* Sortable headers */
.datagrid.collection-table table thead th {
    padding: 0.65rem 0.75rem;
    border-bottom: 2px solid #097d50;
    color: #097d50;
    font-family: "Exo 2", sans-serif;
    font-weight: bolder;
    text-align: left;
    vertical-align: bottom;
    white-space: nowrap;
}

.datagrid.collection-table table thead th:hover {
    color: #522063;
}

/* Table cells */
.datagrid.collection-table table tbody td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #dddddd;
    vertical-align: top;
    text-align: left;
    font-family: "Sofia Sans", sans-serif;
}

.datagrid.collection-table table tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

/* Neutral sortable heading */
.datagrid.collection-table thead th label::after {
    content: "↕";
    display: inline-block;
    margin-left: 0.35rem;
    color: currentColor;
    font-family: "Sofia Sans", sans-serif;
    font-size: 0.85em;
    font-weight: normal;
    line-height: 1;
    vertical-align: 0.05em;
    opacity: 0.8;
}

/* Replace Custom Tables' sorting image */
.datagrid.collection-table thead th img.ctToolBarIcon {
    display: none;
}

/* Neutral sortable column */
.datagrid.collection-table thead th label::after {
    content: "↕";
    display: inline-block;
    margin-left: 0.35rem;
    color: currentColor;
    font-family: "Sofia Sans", sans-serif;
    font-size: 0.85em;
    font-weight: normal;
    line-height: 1;
    vertical-align: 0.05em;
    opacity: 0.8;
}

/* Currently sorted ascending */
.datagrid.collection-table thead th
label:has(img[src*="/up.png"])::after {
    content: "↑";
    opacity: 1;
}

/* Currently sorted descending */
.datagrid.collection-table thead th
label:has(img[src*="/down.png"])::after {
    content: "↓";
    opacity: 1;
}

.datagrid.collection-table thead th
label:has(img[src*="/up.png"]),
.datagrid.collection-table thead th
label:has(img[src*="/down.png"]) {
    color: #522063;
}

/* Override Custom Tables' first-column alignment */
.datagrid.collection-table table thead tr th:first-child {
    text-align: left;
    vertical-align: bottom;
}


/* COLLECTION SEARCH
------------------------------------- */

.collection-search {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.collection-search input[type="search"] {
    width: 37%;
    min-width: 280px;
    padding: 0.65rem 0.75rem;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-family: "Sofia Sans", sans-serif;
    font-size: 1rem;
}

.collection-search input[type="search"]:focus {
    border-color: #097d50;
    outline: none;
}

.collection-search button {
    padding: 0.65rem 1rem;
    border: 1px solid #097d50;
    border-radius: 4px;
    background-color: #097d50;
    color: #fdfdfd;
    font-family: "Sofia Sans", sans-serif;
    white-space: nowrap;
}


/* COMMANDS TABLE
------------------------------------- */

/* Command */
.datagrid.commands-table th:nth-child(1),
.datagrid.commands-table td:nth-child(1) {
    width: 12%;
    white-space: nowrap;
}

/* Aliases */
.datagrid.commands-table th:nth-child(2),
.datagrid.commands-table td:nth-child(2) {
    width: 12%;
}

/* Description */
.datagrid.commands-table th:nth-child(3),
.datagrid.commands-table td:nth-child(3) {
    width: 37%;
}

/* Global Cooldown */
.datagrid.commands-table th:nth-child(4),
.datagrid.commands-table td:nth-child(4) {
    width: 6%;
}

/* User Cooldown */
.datagrid.commands-table th:nth-child(5),
.datagrid.commands-table td:nth-child(5) {
    width: 6%;
}

/* Access Level */
.datagrid.commands-table th:nth-child(6),
.datagrid.commands-table td:nth-child(6) {
    width: 12%;
}

/* Service */
.datagrid.commands-table th:nth-child(7),
.datagrid.commands-table td:nth-child(7) {
    width: 15%;
}

/* Keep Service explicitly left aligned */
.datagrid.commands-table table thead th:nth-child(7),
.datagrid.commands-table table tbody td:nth-child(7) {
    text-align: left;
}

/* Allow longer Commands headings to wrap */
.datagrid.commands-table th:nth-child(4) label,
.datagrid.commands-table th:nth-child(5) label,
.datagrid.commands-table th:nth-child(6) label {
    display: inline-block;
    white-space: normal;
    line-height: 1.1;
}


/* TRADE TABLES
------------------------------------- */

/* Type */
.datagrid.trade-table th:nth-child(1),
.datagrid.trade-table td:nth-child(1) {
    width: 15%;
}

/* Name */
.datagrid.trade-table th:nth-child(2),
.datagrid.trade-table td:nth-child(2) {
    width: 45%;
}

/* Have */
.datagrid.trade-table th:nth-child(3),
.datagrid.trade-table td:nth-child(3) {
    width: 13%;
}

/* Extra */
.datagrid.trade-table th:nth-child(4),
.datagrid.trade-table td:nth-child(4) {
    width: 12%;
}

/* Want */
.datagrid.trade-table th:nth-child(5),
.datagrid.trade-table td:nth-child(5) {
    width: 15%;
}

/* Keep the final column left aligned */
.datagrid.collection-table table thead tr th:last-child,
.datagrid.collection-table table tbody tr td:last-child {
    text-align: left;
}

/* ARTIFACTS TABLE
------------------------------------- */

/* Area */
.datagrid.artifacts-table th:nth-child(1),
.datagrid.artifacts-table td:nth-child(1) {
    width: 18%;
}

/* Set */
.datagrid.artifacts-table th:nth-child(2),
.datagrid.artifacts-table td:nth-child(2) {
    width: 18%;
}

/* Item */
.datagrid.artifacts-table th:nth-child(3),
.datagrid.artifacts-table td:nth-child(3) {
    width: 40%;
}

/* Amount */
.datagrid.artifacts-table th:nth-child(4),
.datagrid.artifacts-table td:nth-child(4) {
    width: 12%;
}

/* Need */
.datagrid.artifacts-table th:nth-child(5),
.datagrid.artifacts-table td:nth-child(5) {
    width: 12%;
}

/* COLLECTION PAGINATION
------------------------------------- */

.collection-pagination {
    margin-top: 1rem;
    text-align: center;
}

/* COLLECTION TABLES - MOBILE
------------------------------------- */

@media (max-width: 767px) {

    .collection-search {
        justify-content: stretch;
    }

    .collection-search input[type="search"] {
        width: 100%;
        min-width: 0;
        flex: 1;
    }

    .datagrid.collection-table table,
    .datagrid.collection-table tbody,
    .datagrid.collection-table tr,
    .datagrid.collection-table td {
        display: block;
        width: 100%;
    }

    /* Override every desktop column width */
    .datagrid.collection-table tbody tr td:nth-child(n) {
        width: 100%;
        white-space: normal;
    }

    /* Mobile sorting controls */
    .datagrid.collection-table thead {
        display: block;
        margin-bottom: 1rem;
    }

    .datagrid.collection-table thead::before {
        content: "Sort by";
        display: block;
        margin-bottom: 0.5rem;
        color: #097d50;
        font-family: "Exo 2", sans-serif;
        font-weight: bolder;
    }

    .datagrid.collection-table thead tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .datagrid.collection-table thead tr th:nth-child(n) {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
        vertical-align: middle;
        white-space: normal;
    }

    .datagrid.collection-table thead th label {
        display: inline-flex;
        align-items: center;
        padding: 0.45rem 0.65rem;
        border: 1px solid #097d50;
        border-radius: 4px;
        color: #097d50;
        background-color: #ffffff;
        line-height: 1.1;
    }

    .datagrid.collection-table thead th label:hover {
        border-color: #522063;
        color: #522063;
    }

    .datagrid.collection-table tbody tr {
        margin-bottom: 1rem;
        border: 1px solid #dddddd;
        border-top: 3px solid #097d50;
        border-radius: 4px;
        background-color: #ffffff;
    }

    .datagrid.collection-table tbody td {
        display: grid;
        grid-template-columns: 8rem minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid #eeeeee;
        text-align: left;
    }

    .datagrid.collection-table tbody td:last-child {
        border-bottom: 0;
    }

    .datagrid.collection-table tbody td::before {
        content: attr(data-label);
        color: #097d50;
        font-family: "Exo 2", sans-serif;
        font-weight: bolder;
        text-align: left;
    }
}

/* Commands Description is not sortable */
@media (max-width: 767px) {
    .datagrid.collection-table.commands-table
    table thead tr th:nth-child(3) {
        display: none !important;
    }
}