/**
 * 
 * Copyright (c) 2026 Estait Group LLC
 * All rights reserved.
 */

/*
Theme Name: Network Material Design
Theme URI: https://abbi.chat
Author: WebSentient
Author URI: https://websentient.com
Description: Material Design theme for WordPress Multisite network with shared header and footer
Version: 1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: network-material
*/

/* Material Design Variables - DEFAULT FALLBACKS ONLY (Custom CSS overrides these) */
/* These are ONLY used if site has no custom CSS defined */
:root {
    /* Colors - These will be overridden by wp_custom_css per site */
    --mdc-theme-primary: #6200ee;
    --mdc-theme-secondary: #03dac6;
    --mdc-theme-background: #ffffff;
    --mdc-theme-surface: #ffffff;
    --mdc-theme-on-primary: #ffffff;
    --mdc-theme-on-secondary: #000000;
    
    /* Typography - Will be overridden by custom CSS */
    --mdc-typography-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --mdc-typography-headline1-font-family: var(--mdc-typography-font-family);
    --mdc-typography-headline2-font-family: var(--mdc-typography-font-family);
    --mdc-typography-headline3-font-family: var(--mdc-typography-font-family);
    --mdc-typography-headline4-font-family: var(--mdc-typography-font-family);
    --mdc-typography-headline5-font-family: var(--mdc-typography-font-family);
    --mdc-typography-headline6-font-family: var(--mdc-typography-font-family);
    --mdc-typography-body1-font-family: var(--mdc-typography-font-family);
    --mdc-typography-body2-font-family: var(--mdc-typography-font-family);
    --mdc-typography-button-font-family: var(--mdc-typography-font-family);
}

/* Override WordPress defaults for clean Material Design look */
body {
    background-color: var(--mdc-theme-background);
    color: var(--text-color, #333333);
    font-family: var(--mdc-typography-font-family);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Professional Form Styling */
.mdc-text-field {
    width: 100%;
}

.mdc-text-field--filled {
    background-color: rgba(0, 0, 0, 0.04);
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) {
    background-color: var(--mdc-theme-surface);
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: rgba(0, 0, 0, 0.6);
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: var(--mdc-theme-primary);
}

/* Button Enhancements */
.mdc-button {
    height: auto;
    min-height: 36px;
    white-space: normal;
    letter-spacing: 0.0892857143em;
    text-transform: none;
    font-weight: 500;
}

.mdc-button--raised {
    box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
}

.mdc-button--raised:hover {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
}

/* Card Enhancements - Raised Effect */
.mdc-card {
    border-radius: 8px;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
    transition: box-shadow 0.3s ease;
}

.mdc-card:hover {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
}

.mdc-card--outlined {
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Raised Effects for All Components */
.mdc-text-field--filled,
.mdc-select,
.mdc-chip-set,
.entry-content > *:not(.mdc-card) {
    box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
    transition: box-shadow 0.3s ease;
}

.mdc-text-field--filled:hover,
.mdc-select:hover,
.mdc-chip-set:hover {
    box-shadow: 0 3px 3px -2px rgba(0,0,0,0.2), 0 3px 4px 0 rgba(0,0,0,0.14), 0 1px 8px 0 rgba(0,0,0,0.12);
}

/* Chip Raised Effects */
.mdc-chip {
    box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
}

.mdc-chip:hover {
    box-shadow: 0 3px 3px -2px rgba(0,0,0,0.2), 0 3px 4px 0 rgba(0,0,0,0.14), 0 1px 8px 0 rgba(0,0,0,0.12);
}

/* Professional Content Spacing */
.site-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.entry-content h1,
.entry-content h2,
.entry-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 400;
    line-height: 1.3;
}

.entry-content h1 {
    font-size: 2.5rem;
}

.entry-content h2 {
    font-size: 2rem;
    color: var(--mdc-theme-primary);
}

.entry-content h3 {
    font-size: 1.5rem;
}

.entry-content p {
    margin-bottom: 1.5rem;
}

/* Form Field Spacing */
.mdc-text-field + .mdc-text-field {
    margin-top: 20px;
}

/* Chip Set */
.mdc-chip-set {
    padding: 8px 0;
}

.mdc-chip {
    margin: 4px;
}

/* Header Styles */
.network-header {
    background-color: var(--mdc-theme-primary);
    color: var(--mdc-theme-on-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.network-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.network-header__title {
    font-size: 1.25rem;
    font-weight: 500;
}

/* WEB-230: the hamburger glyph is an inline SVG (see header.php). MDC sizes an
   icon button's content through font-size, which an SVG ignores, so give it
   explicit dimensions; currentColor picks up the app bar's on-primary color. */
.mdc-top-app-bar__navigation-icon .network-header__menu-glyph {
    width: 24px;
    height: 24px;
    display: block;
    fill: currentColor;
}

/* WEB-231: there is deliberately NO body { padding-top } here. header.php
   already emits MDC's <div class="mdc-top-app-bar--fixed-adjust">, which
   reserves the app bar's height AND tracks it across breakpoints (64px
   desktop, 56px on phones). A body padding on top of that stacked a second
   offset: 64px of empty band under the header on every page of every tenant,
   at every width, and 64px does not even match the 56px phone bar. When the
   admin bar shows, WordPress pushes <html> down by the bar's height and
   style.css below moves the fixed header by the same amount, so the spacer
   still lands flush under the header -- no extra rule needed for that case.

   The spacer reads --network-header-clearance, which theme.js sets from a
   MEASUREMENT: the app bar's bottom edge minus the point where content would
   otherwise begin. That is the quantity that matters and it is not the bar's
   height whenever something sits above the bar or a tenant offsets it (admin
   bar, staging banner, a bar ending at 121px while 56px tall). MDC's fixed
   values below remain the no-script fallback, so without JS the page renders
   exactly as MDC intended. */
.mdc-top-app-bar--fixed-adjust {
    padding-top: var(--network-header-clearance, 64px);
}

@media (max-width: 599px) {
    .mdc-top-app-bar--fixed-adjust {
        padding-top: var(--network-header-clearance, 56px);
    }
}

/* Offset the fixed site header when the WP admin bar is visible so the
   bar doesn't sit on top of our nav. WP already pushes <html> down via
   html { margin-top: 32px !important }, but that doesn't move our fixed
   header -- we have to do that ourselves. Breakpoint is WP's 782px. */
body.admin-bar .network-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .network-header {
        top: 46px;
    }
}

/* Footer Styles - Use CSS variables, NO hardcoded colors */
/* Higher specificity to override .mdc-card defaults */
footer.network-footer {
    background-color: var(--mdc-theme-primary);
    color: var(--mdc-theme-on-primary);
    padding: 1.4rem;
    margin-top: 2.8rem;
    border-radius: 0;
}

.network-footer__container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Desktop Navigation Styles */
.network-header__desktop-nav {
    display: none;
}

/* User Auth Section */
.network-header__user {
    display: none;
    align-items: center;
    gap: 12px;
    padding-right: 16px;
    white-space: nowrap;
}

.network-header__username {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-on-primary, #fff);
    font-size: 14px;
    font-weight: 500;
}

.network-header__username .material-icons {
    font-size: 20px;
}

.network-header__auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s, opacity 0.2s;
}

.network-header__auth-btn .material-icons {
    font-size: 18px;
}

.network-header__auth-btn--login {
    color: var(--primary-color, #1a73e8);
    background: var(--text-on-primary, #fff);
}

.network-header__auth-btn--login:hover {
    opacity: 0.9;
}

.network-header__auth-btn--logout {
    color: var(--text-on-primary, #fff);
    background: rgba(255, 255, 255, 0.15);
}

.network-header__auth-btn--logout:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Mobile Drawer User Section */
.network-drawer__user {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 8px;
    margin-top: 8px;
}

.network-drawer__user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--on-surface, #333);
    font-size: 14px;
    font-weight: 500;
}

.network-drawer__user-info .material-icons {
    font-size: 20px;
    color: var(--primary-color, #1a73e8);
}

.network-drawer__auth-link {
    text-decoration: none;
}

.network-drawer__auth-link .material-icons {
    margin-right: 8px;
}

/* Mobile drawer - hidden by default */
.mdc-drawer--modal {
    display: none;
}

.mdc-drawer--modal.mdc-drawer--open {
    display: flex;
}

.mdc-drawer-scrim {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mdc-drawer--open + .mdc-drawer-scrim {
    opacity: 1;
    pointer-events: auto;
}

/* WEB-230: 839px, not 768px, so the header changes mode at the same width
   as mdc-base.css collapses agent-emitted layout grids (its tablet breakpoint
   is <=839px). Between 769 and 839 the desktop nav used to render while the
   content beside it was already in tablet layout; a five-item menu wraps
   there. The two files now agree on where "tablet" ends. */
@media (max-width: 839px) {
    /* Mobile / tablet: show menu button */
    .mdc-top-app-bar__navigation-icon {
        display: inline-flex;
    }
    
    .network-header__desktop-nav {
        display: none;
    }
}

@media (min-width: 840px) {
    /* Desktop: hide menu button and drawer, show nav */
    .network-header__desktop-nav {
        display: flex;
    }
    
    .network-header__user {
        display: flex;
    }
    
    .mdc-top-app-bar__navigation-icon {
        display: none;
    }
    
    .mdc-drawer--modal {
        display: none;
    }
    
    .mdc-drawer-scrim {
        display: none;
    }
}

.network-header__nav {
    display: flex;
    align-items: center;
}

.network-header__menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.network-header__menu li {
    position: relative;
}

.network-header__menu a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    color: var(--mdc-theme-on-primary);
    text-decoration: none;
    font-weight: 500;
    border-radius: 4px;
    transition: background-color 0.3s;
    white-space: nowrap;
}

.network-header__menu a:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.network-header__menu a .material-icons {
    font-size: 20px;
}

.network-header__menu .current-menu-item > a,
.network-header__menu .current_page_item > a {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Mobile Drawer Styles */
.mdc-drawer {
    background-color: var(--mdc-theme-surface);
}

.mdc-drawer__header {
    padding: 20px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mdc-drawer__title {
    color: var(--mdc-theme-primary);
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
}

.mdc-drawer__subtitle {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.875rem;
    margin: 4px 0 0;
}

.mdc-drawer__content {
    padding: 8px 0;
}

.mdc-drawer__content .mdc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mdc-drawer__content .mdc-list-item,
.mdc-drawer__content .mdc-list a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    color: rgba(0, 0, 0, 0.87);
    text-decoration: none;
    transition: background-color 0.3s;
    cursor: pointer;
}

.mdc-drawer__content .mdc-list-item:hover,
.mdc-drawer__content .mdc-list a:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.mdc-drawer__content .material-icons {
    color: rgba(0, 0, 0, 0.54);
    font-size: 24px;
}

.mdc-drawer__content .mdc-list-item__text {
    flex: 1;
}

.mdc-drawer__content .current-menu-item > a,
.mdc-drawer__content .current_page_item > a {
    background-color: rgba(0, 200, 83, 0.08);
    color: var(--mdc-theme-primary);
}

.mdc-drawer__content .current-menu-item .material-icons,
.mdc-drawer__content .current_page_item .material-icons {
    color: var(--mdc-theme-primary);
}

/* Submenu styles */
.network-header__menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    min-width: 200px;
    list-style: none;
    margin: 4px 0 0;
    padding: 8px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s;
}

.network-header__menu li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.network-header__menu .sub-menu a {
    color: rgba(0, 0, 0, 0.87);
    padding: 10px 16px;
    display: block;
}

.network-header__menu .sub-menu a:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Drawer submenu */
.mdc-drawer__content .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 40px;
    background-color: rgba(0, 0, 0, 0.02);
}

.mdc-drawer__content .sub-menu a {
    padding: 10px 16px;
    font-size: 0.875rem;
}

/* Site Content */
.site-content {
    min-height: calc(100vh - 200px);
}

.site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Footer Navigation */
.network-footer__nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.network-footer__nav li {
    margin: 8px 0;
}

.network-footer__nav a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s;
}

.network-footer__nav a:hover {
    color: white;
}


/* ── Blog (WEB-176 / WEB-179) ───────────────────────────────── */

.blog-index,
.blog-single {
    max-width: 1160px;
    margin: 0 auto;
    padding: 3rem 1rem 5rem;
}

/* Masthead + summary */
.blog-masthead {
    max-width: 46rem;
    margin-bottom: 2rem;
}
.blog-masthead-title {
    font-size: 2.75rem;
    line-height: 1.15;
    margin: 0 0 .75rem;
    text-wrap: balance;
}
.blog-summary {
    font-size: 1.1rem;
    line-height: 1.65;
    opacity: .78;
}
.blog-summary p { margin: 0 0 .75rem; }
.blog-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 600;
    opacity: .6;
    margin-bottom: .5rem;
}
.blog-eyebrow--accent {
    color: var(--mdc-theme-primary);
    opacity: 1;
}
.blog-eyebrow-sep { opacity: .5; }

/* Category navigation */
.blog-categories.mdc-chip-set {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 2.5rem;
    padding: 0;
    box-shadow: none;
}
.blog-categories.mdc-chip-set:hover { box-shadow: none; }
.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: var(--mdc-theme-surface);
    color: inherit;
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.2;
}
.blog-chip--active {
    background: var(--mdc-theme-primary);
    color: var(--mdc-theme-on-primary);
}
.blog-chip-count {
    font-size: .75rem;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}
.blog-chip--active .blog-chip-count { opacity: .8; }

/* Featured latest story */
.blog-featured.mdc-card {
    margin-bottom: 3rem;
    overflow: hidden;
}
.blog-featured-link {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    color: inherit;
    text-decoration: none;
}
.blog-featured-media {
    min-height: 100%;
    background: rgba(0, 0, 0, .04);
}
.blog-featured-media img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    display: block;
}
.blog-featured-body {
    padding: 2.25rem 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-featured-title {
    font-size: 1.95rem;
    line-height: 1.2;
    margin: 0 0 .75rem;
    text-wrap: balance;
}
.blog-featured-excerpt {
    font-size: 1.02rem;
    line-height: 1.6;
    opacity: .8;
    margin: 0 0 1.5rem;
}
.blog-featured-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .875rem;
    opacity: .75;
}
.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--mdc-theme-primary);
    font-weight: 500;
    opacity: 1;
}
.blog-read-more .material-icons { font-size: 18px; }
.blog-featured-link:hover .blog-read-more { gap: .55rem; }
.blog-read-more { transition: gap .18s ease; }

/* Card grid */
.blog-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.75rem;
}
.blog-card.mdc-card { overflow: hidden; }
.blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.blog-card-media img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}
.blog-card-media--empty {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .04);
}
.blog-card-media--empty .material-icons {
    font-size: 40px;
    opacity: .3;
}
.blog-card-body {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.blog-card-title {
    font-size: 1.18rem;
    line-height: 1.35;
    margin: 0 0 .5rem;
}
.blog-card-excerpt {
    font-size: .92rem;
    line-height: 1.55;
    opacity: .78;
    margin: 0 0 1.25rem;
    flex: 1;
}
.blog-card-meta {
    font-size: .8rem;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

/* Pagination */
.blog-pagination { margin-top: 3rem; text-align: center; }
.blog-pagination .nav-links {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}
.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 .7rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.blog-pagination .page-numbers.current {
    background: var(--mdc-theme-primary);
    color: var(--mdc-theme-on-primary);
}

/* Empty state */
.blog-empty-state {
    text-align: center;
    padding: 4rem 1rem;
    opacity: .6;
}
.blog-empty-state .material-icons {
    font-size: 48px;
    display: block;
    margin-bottom: .75rem;
}

/* Single post */
.blog-single { max-width: 860px; }
.blog-post-header { margin-bottom: 1.75rem; }
.blog-post-cats.mdc-chip-set {
    display: flex;
    gap: .5rem;
    padding: 0;
    margin: 0 0 1rem;
    box-shadow: none;
}
.blog-post-cats.mdc-chip-set:hover { box-shadow: none; }
.blog-post .entry-title {
    font-size: 2.5rem;
    line-height: 1.15;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: .875rem;
    opacity: .7;
}
.blog-post-meta .material-icons {
    font-size: 16px;
    vertical-align: -3px;
    margin-right: .25rem;
}
.blog-post-origin a { color: inherit; }
.blog-post-thumbnail {
    margin: 0 0 2rem;
}
.blog-post-thumbnail img {
    width: 100%;
    border-radius: 12px;
    display: block;
}
.blog-post-content { font-size: 1.06rem; line-height: 1.75; }
.blog-post-content a { color: var(--mdc-theme-primary); }
.blog-post-content img { max-width: 100%; height: auto; border-radius: 10px; }

/* Rich components inside post content: tables + galleries */
.blog-table-scroll {
    overflow-x: auto;
    margin: 1.75rem 0;
    -webkit-overflow-scrolling: touch;
}
.blog-post-content table,
table.blog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}
.blog-post-content th {
    text-align: left;
    font-weight: 600;
    padding: .8rem 1rem;
    border-bottom: 2px solid var(--mdc-theme-primary);
    white-space: nowrap;
}
.blog-post-content td {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.blog-post-content tbody tr:nth-child(even) { background: rgba(0, 0, 0, .025); }

.blog-post-content .gallery,
.blog-post-content .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .9rem;
    margin: 2rem 0;
}
.blog-post-content .gallery-item,
.blog-post-content .wp-block-image { margin: 0; }
.blog-post-content .gallery img,
.blog-post-content .wp-block-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.blog-post-content blockquote {
    margin: 1.75rem 0;
    padding: .25rem 0 .25rem 1.25rem;
    border-left: 3px solid var(--mdc-theme-primary);
    opacity: .9;
}

/* Post navigation + related */
.blog-post-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
    font-size: .9rem;
}
.blog-post-nav a { color: var(--mdc-theme-primary); text-decoration: none; }
.blog-more { margin-top: 4rem; }
.blog-more-title { font-size: 1.4rem; margin: 0 0 1.5rem; }

/* Homepage Latest Posts section */
.blog-latest-section {
    max-width: 1160px;
    margin: 0 auto;
    padding: 4rem 1rem;
}
.blog-latest-section > h2 {
    text-align: center;
    margin: 0 0 2rem;
}
.blog-latest-more { text-align: center; margin-top: 2rem; }

@media (max-width: 860px) {
    .blog-featured-link { grid-template-columns: 1fr; }
    .blog-featured-media img { min-height: 220px; }
    .blog-featured-body { padding: 1.75rem 1.5rem; }
    .blog-masthead-title { font-size: 2.1rem; }
    .blog-featured-title { font-size: 1.6rem; }
    .blog-post .entry-title { font-size: 2rem; }
}