/* Colors */
:root {
    --extra-dark-od-green: #1e2117;
    --dark-od-green: #2F3328;
    --light-od-green: #4B5043;
    --neon-green: #D6E344;
    --light-gray-green: #DCE0D1;
    --light-gray: #F4F4F4;
    --med-gray: #D9D9D9;
    --gray: #9A9A9A;
    --accent-orange: #C95428;
    --black: #171616;
    --white: #fff;
}
/* Fonts */
:root {
    --abel: 'Abel';
    --open-sans: 'Open Sans';
    --hyperlegible: 'Atkinson Hyperlegible'
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
#body-wrapper .container {
    padding: 40px 0 0 0;
}
h1 {
    font-family: var(--hyperlegible), sans-serif;
    font-size: 80px;
    font-weight: 200;
    font-display: swap;
}
.home h1,
.about h1 {
    color: var(--neon-green);
    /* text-transform: uppercase; */
    text-align: center;
    margin: 0 auto;
}
@media (max-width: 600px) {
    .hero.text-dark h1 {
        font-size: 48px;
    }
    .hero.text-light h1 {
        font-size: 48px;
    }
}
h2 {
    font-family: var(--hyperlegible), sans-serif;
    font-size: 44px;
    font-weight: 400;
}
.home h2,
.about h2 {
    color: var(--white);
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto;
}
h3 {
    font-family: var(--hyperlegible), sans-serif;
    font-size: 36px;
    font-weight: 400;
}
.home h3.special-large,
.about h3.special-large {
    margin: 0;
    font-size: 80px;
    color: var(--white);
}
h4 {
    font-family: var(--hyperlegible), sans-serif;
    font-size: 24px;
    font-weight: 400;
}

h5 {
    font-family: var(--hyperlegible), sans-serif;
    font-size: 18px;
    font-weight: 400;
}
@media (max-width: 840px) {
    h1 {
        font-size: 60px;
    }
    h2 {
        font-size: 36px;
    }
    .home h3.special-large {
        font-size: 60px;
    }
}
p,
a,
ul,
ol,
li {
    font-family: var(--open-sans), sans-serif;
    font-size: 18px;
    line-height: 35px;
}
/* Global Page and Region Styles */
.home,
.portfolio,
.about {
    background-color: var(--dark-od-green);
}
#header {
    background-color: var(--dark-od-green);
}
#footer {
    border-top: 1px solid var(--light-od-green);
    background-color: var(--dark-od-green);
}
#footer a {
    color: var(--neon-green);
}
/* Navigation Styles and Colors */
.treemenu li {
    padding: 20px 0;
}
.treemenu li a {
    color: var(--neon-green);
    font-family: var(--hyperlegible), sans-serif;
    font-size: 40px;
    font-weight: 400;
    text-transform: uppercase;
}
.treemenu li a.active {
    color: var(--accent-orange) !important;
    font-size: 40px;
}
#header a {
    color: var(--neon-green);
    font-family: var(--hyperlegible), sans-serif;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
}
#header a:hover {
    text-decoration: none;
}
#header a.active {
    color: var(--white);
    text-decoration: none;
    font-weight: bold;
}
#header .navbar-section.desktop-menu ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
}
#header .navbar-section.desktop-menu ul li {
    margin: 0 0 0 30px;
}
#header .logo img {
    height: 60px;
}
@media (max-width: 767px) {
    #header .logo img {
        height: 50px;
    }
}
/* Mobile Nav Color Overrides */
.mobile-menu .button_container span {
    background: var(--neon-green);
}
.mobile-menu .button_container.active .top {
    background: var(--accent-orange);
}
.mobile-menu .button_container.active .bottom {
    background: var(--accent-orange);
}
.treemenu li.tree-empty>.toggler {
    display: none;
}
.treemenu li {
    background: unset;
}
/* Homepage Layout */
.home .hero-header-wrapper {
    margin: 30px 0 80px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.home .hero-header {
    background-image: url('../images/topo-lines-hero-header_Home.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: unset;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 240px;
    max-width: 1070px;
    width: 100%;
}
@media (max-width: 840px) {
    .home .hero-header-wrapper {
        margin: 0 0 40px 0;
    }
    .home .hero-header {
        background-size: cover;
        height: 340px;
    }
}
/* Portfolio Page */
.portfolio h2 {
    color: var(--neon-green);
    margin: 40px 0 60px 0;
}
@media (max-width: 600px) {
    .portfolio h2 {
        margin: 0 0 40px 0;
    }
}
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}
.portfolio-grid .links-section:nth-child(5) {
  grid-column: 1 / -1; 
}
.portfolio-grid .feature-block {
    background-color: var(--extra-dark-od-green);
    width: 100%;
    transition: all 0.5s ease;
}
.portfolio-grid .feature-block:hover {
    background-color: var(--neon-green);
}
.portfolio-grid .feature-block a {
    color: var(--white);
    text-decoration: none;
    transition: all 0.5s ease;
}
.portfolio-grid .feature-block:hover a {
    color: var(--extra-dark-od-green);
}
.portfolio-grid .feature-block .feature-image {
    height: 350px;
}
.portfolio-grid .feature-block .feature-image img {
    filter: grayscale(100%);
    object-fit: cover;
    height: 350px;
    width: 100%;
    transition: all 0.5s ease;
}
.portfolio-grid .feature-block:hover .feature-image img {
    filter: grayscale(0%);
}
.portfolio-grid .feature-block .feature-content {
    padding: 40px;
}
.portfolio-grid .feature-block .feature-content h2 {
    color: var(--neon-green);
    margin: 0 0 20px 0;
    transition: all 0.5s ease;
}
.portfolio-grid .feature-block:hover .feature-content h2 {
    color: var(--extra-dark-od-green);
}
/* Links Section on Portfolio Page */
.portfolio-grid .links-section h2 {
    color: var(--neon-green);
}
.portfolio-grid .links-section {
    border-top: 1px solid var(--light-od-green);
    border-bottom: 1px solid var(--light-od-green);
    margin: 40px 0 0px 0;
    padding: 0 0 40px 0;
}
.link-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    padding: 0 0 40px 0;
}
@media (max-width: 840px) {
    .link-columns {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .link-columns {
        grid-template-columns: 1fr;
    }
}
.link-item {
    background-color: var(--extra-dark-od-green);
    text-align: center;
    transition: all 0.5s ease;
}
.link-item:hover {
    background-color: var(--neon-green);
}
.link-item a {
    display: block; /* Make the whole item clickable */
    text-decoration: none;
    padding: 15px;
    color: var(--neon-green);
    font-weight: bold;
    transition: all 0.5s ease;
}
.link-item a:hover {
    color: var(--dark-od-green);
}
@media (max-width: 840px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        grid-template-rows: unset;
    }
    .portfolio-grid .feature-block .feature-image {
        height: 300px;
    }
    .portfolio-grid .feature-block .feature-image img {
        height: 300px;
    }
}
@media (max-width: 600px) {
    .portfolio-grid .feature-block .feature-image {
        height: 200px;
    }
    .portfolio-grid .feature-block .feature-image img {
        height: 200px;
    }
}
/* Work Sample Page */
.work-sample .header-hero {
    background-image: url('/user/themes/blogportfolio2025/images/top-topo-object.svg');
    background-repeat: no-repeat;
    background-position: 35% 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 350px;
    width: 100%;
    z-index: 0;
}
@media (max-width: 840px) {
    .work-sample .header-hero {
        background-image: none;
    }
}
.work-sample .hero-text-and-image {
    display: flex;
    flex-direction: row;
    position: relative;
    margin: 40px 0;
    z-index: 1;
}
@media (max-width: 840px) {
    .work-sample .hero-text-and-image {
        margin: 0 0 40px 0;
    }
    .work-sample .hero-text-and-image {
        flex-direction: column;
    }
}
.work-sample .hero-text-and-image h1,
.work-sample .hero-text-and-image h2 {
    padding-right: 20px;
}
.work-sample .hero-text-and-image h1 {
    margin: 0 0 40px 0;
}
/* Journal List Layout */
.journal {
    background-color: var(--light-gray);
}
.journal .hero {
    padding: 120px 0 60px 0;
}
.journal .blog-listing .card {
    box-shadow: none;
    border-radius: 0;
    min-height: 610px;
}
.journal .blog-listing .card .card-header {
    padding: 20px 40px 0 40px;
}
.journal .blog-listing .card .card-body {
    padding: 20px 40px 0 40px;
}
.journal .bricklayer .card time {
    font-family: var(--hyperlegible);
    color: var(--gray);
}
.journal .bricklayer .card .card-header .p-name a,
.journal .bricklayer .card .card-header .p-name a:visited {
    font-family: var(--hyperlegible);
    font-size: 32px;
    color: var(--light-od-green);
}
.journal .bricklayer .card .card-footer .tags a {
    background-color: var(--neon-green);
    color: var(--dark-od-green);
    border-radius: 0;
    margin: 2px;
    padding: 5px 10px;
}
.journal .sidebar-content h4 {
    margin: 0 0 20px 0;
}
.journal .sidebar-content .tags a.label {
    background-color: var(--neon-green);
    color: var(--dark-od-green);
    border-radius: 0;
    margin: 2px;
    padding: 5px 10px;
}
.journal .sidebar-content .tags a.label.label-primary {
    background-color: var(--dark-od-green);
    color: var(--neon-green);
}
.journal .clear-filters-button {
    border-bottom: 1px solid var(--med-gray);
    margin: 10px 0 20px 0;
    padding-bottom: 20px;
}
.journal .clear-filters-button a {
    color: var(--dark-od-green);
    background-color: var(--light-gray-green);
    padding: 5px 10px;
}
.journal .pagination {
    margin: 20px 0 40px 0;
}
.journal .pagination li a {
    color: var(--dark-od-green);
    background-color: var(--med-gray);
}
.journal .pagination li span.active {
    color: var(--light-gray-green);
    background-color: var(--gray);
}
.journal .h-entry .text-div {
    margin: 0 auto;
    padding: 0 0 20px 0;
    max-width: 940px;
    width: 100%;
}
.journal .h-entry .text-div:nth-of-type(1) {
    padding: 40px 0 20px 0;
}
@media (max-width: 840px) {
    .journal .h-entry .text-div:nth-of-type(1) {
        padding: 0 0 20px 0;
    }
}
.journal .h-entry .text-div h2,
.journal .h-entry .text-div h3 {
    margin: 20px 0;
}
.journal .h-entry .text-div h3 {
    color: var(--gray);
}
.journal .h-entry .text-div > p {
    padding: 0 20px 0 0;
}
.journal .h-entry .image-div,
.journal .h-entry .image-div p img {
    margin: 20px auto;
    max-width: 1276px;
    width: 100%;
}
.journal .h-entry .table-container {
    margin: 0 0 40px 0;
}
.journal .h-entry .table-container table {
    border: 2px solid #D9D9D9;
    border-collapse: collapse;
    font-family: "Open Sans", sans-serif;
    width: 100%;
}
@media (max-width: 767px) {
    .journal .h-entry .table-container table {
        display: none;
    }
}
.journal .h-entry .table-container table tr:nth-child(odd) {
    background-color: var(--white);
}
.journal .h-entry .table-container table th {
    color: #4B5043;
    font-size: 1.8em;
    background-color: #D9D9D9;
    border-right: 1px solid #fff;
}
.journal .h-entry .table-container table td, 
.journal .h-entry .table-container table th {
    font-size: 16px;
    border: 1px solid #D9D9D9;
    padding: 20px;
    text-align: left;
}
.modular-hero .blog-date,
.content-title .blog-date {
    margin-right: 10px;
}
.modular-hero .tags,
.content-title .tags {
    margin-left: 10px;
}
.modular-hero .tags a.label.p-category,
.content-title .tags a.label.p-category {
    background-color: var(--neon-green);
    color: var(--dark-od-green);
}
/* Work Sample Page */
.work-sample h1,
.work-sample h2 {
    max-width: 650px;
}
.work-sample h2 {
    margin: 40px 0;
}
/* About Page */
.about .columns {
    padding: 85px 0;
    border-top: 1px solid var(--light-od-green);
    border-bottom: 1px solid var(--light-od-green);
    justify-content: space-between;
}
.about .columns .right {
    text-align: right;
    align-content: center;
}
.about .columns .right img {
    height: 375px;
    width: 376px;
}
.about .text-blurb p {
    margin: 0;
    font-size: 22px;
    color: var(--white);
    margin: 45px 0 0 0;
}
.about .skillset-blurbs {
    color: var(--white);
}
.about .skillset-blurbs .col-4 {
    max-width: 360px;
}
.about .skillset-blurbs h3 {
    color: var(--white);
    margin-top: 20px;
    max-width: 150px;
}
@media (max-width: 840px) {
    .about .hero-header-wrapper {
        margin: 0 0 40px 0;
    }
    .about .hero-header {
        background-size: cover;
        height: 340px;
    }
}
@media (max-width: 540px) {
    .about .columns .col-6 {
        width: 100%;
    }
    .about .columns .right {
        display: none;
    }
    .about .columns.skillset-blurbs {
        flex-direction: column;
    }
    .about .columns.skillset-blurbs .col-4 {
        width: 100%;
    }
    .about .skillset-blurbs h3 {
        margin-top: 0;
        max-width: unset;
    }
}
/* Social */
.home .social,
.portfolio .social,
.about .social {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    margin: 60px auto;
    max-width: 330px;
    width: 100%;
}
.home .social li img,
.portfolio .social li img,
.about .social li img {
    height: 25px;
    width: 25px;
}