/* https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block-end: 0;
    margin-block-start: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  /* text-wrap: balance; */
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}



/* WA Override */

/* :where(:root), .wa-theme-default, .wa-light, .wa-dark, .wa-invert {
    --wa-font-weight-bold: 700;
    --wa-color-brand-fill-loud: #800000;
    --wa-color-brand-on-quiet: #800000;
    --wa-color-focus:#B7B7B7;
} */


@font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    src: url('/font/arial.woff2') format('woff2');
}
@font-face {
    font-family: 'Arial';
    font-style: italic;
    font-weight: 400;
    src: url('/font/arial-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 700;
    src: url('/font/arial-bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Arial';
    font-style: italic;
    font-weight: 700;
    src: url('/font/arial-bold-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'League Gothic';
    font-style: normal;
    font-weight: 400;
    src: local('League Gothic'), url('/font/league-gothic-regular.woff2') format('woff2');
}


:root {
	--color-text: #54595F;
	--color-background: #ffffff;
	--color-link: #800000;
	--color-black: #000000;
    --color-link-hover: #B7B7B7;
    --font-header-family: 'League Gothic', Arial, sans-serif;
    --font-body-family: 'Arial', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: 0.2s;
}


/* Layout */


body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body-family);
    color: var(--color-text);
    font-size: 0.875rem;
}

.visually-hidden {
    display: none;
}

.page-width {
	max-width: 80rem;
	width: 100%;
	align-self: center;
	margin: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

/* Header */

header > div.page-width {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 768px) {
    .home-link img.logo {
        max-height: 70px;
    }
}

header nav {
    background: var(--color-black);
    color: var(--color-background);
	position: relative;	
}

header nav ul {
	padding: 0;
    margin: 0;
	list-style: none;
}
 
header nav.desktop-nav ul li.nav-item {
    height: 60px;
	padding: 0 1rem;
    display: flex;
    align-items: center;
}

header nav li.nav-item > a,
header nav h3:not(.wa-heading-s) a {
	display:block;
	color: var(--color-background);
	text-decoration: none;
    font-family: var(--font-header-family);
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
}

header nav li.nav-item > a:hover, 
header nav li.nav-item h3 a:hover, 
header nav li.nav-item ul.submenu li.submenu-item h3 a:hover {
	color: var(--color-link-hover);
}

header nav h3.wa-heading-s {
    font-size: var(--wa-font-size-s);
}

header nav h3.wa-heading-s a {
    color: var(--color-background);
}


nav.desktop-nav ul ul li {
	position: relative;
}

nav.desktop-nav ul li > ul,
nav.desktop-nav ul li > div {
	display: none;
	position: absolute; 
	top: 60px; 
	left: 0;
	z-index: 9999;
	width: 100%;
}
	
nav.desktop-nav ul li:hover > ul,
nav.desktop-nav ul li:hover > div {
	display:flex;
	background: var(--color-black);
}

@media screen and (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
}


/* Mobile Nav */
.mob-nav {
  overflow: visible;
  background-color: var(--color-black);
  position: relative;
  min-height: 2rem;
  display: flex;
  justify-content: end;
  padding: 0.4rem 1rem;
  z-index: 9999;
}

.mob-nav #mobLinks {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-black);
  padding: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
}

.mob-nav #mobLinks.show {
  display: block;
  z-index: 99999;
}

.mob-nav a.icon {
  display: flex;
}
.mob-nav a.icon svg {
    width: 2rem;
    height: 2rem;
    fill: #fff;
}



#mobLinks {
	width: 100%;
  background: #000;
}

#mobLinks .parent {
  display: flex;
    flex-flow: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
#mobLinks .parent svg {
  display: block;
  cursor: pointer;
  width: 1.2rem;
  height: 1.2rem;
  fill: #fff;
}
#mobLinks h3 {
	cursor: pointer;
  background: #000;
  margin: 0;
}

#mobLinks > ul {
    gap: 0rem;
    display: flex;
    flex-flow: column;
}

#mobLinks li {
	list-style-type: none;
}
#mobLinks > ul > li {
    min-height: 2.4rem;
    display: flex;
    align-items: center;
}


#mobLinks ul ul {
	display: none;
    flex-flow: column;
    margin: 0.4rem 0;
    gap: 0.4rem;
    padding-left: 0.8rem;
}
#mobLinks li.active ul {
	display: block;
}


@media screen and (max-width: 600px) {

    .mob-nav #mobLinks {
        padding: 1rem 2rem 2rem;
    }

    #mobLinks > ul > li.nav-item:has(.parent) {
        flex-flow: column;
        align-items: flex-start;
    }   

    #mobLinks ul ul {
        margin: 0.8rem 0;
    }    
        
    #mobLinks .parent,
    #mobLinks > ul > li {
        min-height: 3rem;
    }

}






@media screen and (min-width: 810px) {

    .mob-nav a.icon {
        display: none;
    }    

    .mob-nav #mobLinks {
        display: flex;
        position: relative;
        top: 100%;
        left: 0;
        background-color: var(--color-black);
        padding: 0 1rem;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        width: 100%;
    }
    
    .mob-nav #mobLinks > ul {
        display: flex;
        flex-flow: row;
        align-items: flex-end;
        width: 100%;
        justify-content: flex-start;
        gap: 1.25rem;
    }
    #mobLinks > ul > li:has(.parent) {
        display: flex;
        position: relative;    
    }
    
    #mobLinks ul li.nav-item:hover > ul.submenu {
        display: flex;
        position: absolute;
        background: var(--color-black);
        top: 2.25rem;
        left: 0;
        width: 100%;
        min-width: max-content;
        padding: 1rem;
        margin: 0;
    }

}

@media screen and (min-width: 1024px) {
    .mob-nav #mobLinks > ul {
        gap: 3rem;
    }
}





/* Aside */

aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

aside section {
    display: flex;
    flex-flow: column;
    row-gap: 1rem;
}

aside h2 {
    margin: 0;
}

.archives-container, .authors-container {
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

/* Social */

.social-links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;    
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-links svg {
    width: 2rem;
    background: var(--color-link);
    border-radius: 0;
    height: 2rem;
    display: block;
    fill: var(--color-background);
    padding: 0.5rem;
}

.social-links a:hover svg {
        background: var(--color-black);
}

.link-header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0.8rem;
}

.link-header svg {
    width: 1.4rem;
    transition: 0.2s;
}

.link-header h2 {
    margin: 0;
}

.link-header a {
    display: flex;
}

.link-header a:hover svg {
    fill: var(--color-link);
}  



.author-select,
.archive-select {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--color-link-hover);
    border-radius: 0.375rem;
    background-color: var(--color-background);
    cursor: pointer;
    width: 100%;
}

.author-select:focus,
.archive-select:focus {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
    border-color: var(--color-link-hover);
}

.author-select option,
.archive-select option {
    padding: 0.5rem;
}
/* 

wa-select:not(:defined) {
  display: none;
}

wa-select:defined {
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
} */



/* Custom Styling Classes */

body > section.wa-stack {
	margin-top: 2rem;
}

main {
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.09);
}

.gl-margin-0 {
    margin: 0;
}
.gl-margin-b-a {
	margin-bottom: 0.5rem;
}

.gl-margin-b-m {
	margin-bottom: 1rem;
}

.gl-margin-b-l {
	margin-bottom: 1.5rem;
}

.gl-margin-b-xl {
	margin-bottom: 2rem;
}

.gl-margin-t-a {
	margin-top: 0.5rem;
}

.gl-margin-t-m {
	margin-top: 1rem;
}

.gl-margin-t-l {
	margin-top: 1.5rem;
}

.gl-margin-t-xl {
	margin-top: 2rem;
}

.gl-padding-s {
	padding: 0.5rem;
}

.gl-padding-m {
	padding: 1rem;
}

.gl-padding-l {
	padding: 1.5rem;
}

.gl-padding-xl {
	padding: 2rem;
}

.gl-padding-sides-xl {
	padding: 0 2rem;
}

.gl-padding-b-xl {
    padding-bottom: 4rem;
}

.gl-flex-row {
	flex-flow: row;
}
.gl-gap-xs {
    gap:  0.25rem;
}

.gl-gap-s {
    gap:  0.5rem;
}

.gl-gap-m {
    gap:  1rem;
}

.gl-gap-l {
    gap:  1.5rem;
}

.gl-gap-xl {
    gap:  2rem;
}

.gl-gap-2xl {
    gap:  2.5rem;
}

a.gl-button {
    background: var(--color-link);
    color: var(--color-background);
    padding: 0.6rem 1rem;
}

a.gl-button:hover {
    background-color: var(--color-black);
}

@media screen and (max-width: 600px) {
    .gl-padding-xl {
        padding: 2rem 1rem;
    }
    .gl-padding-sides-xl {
        padding: 0 1rem;
    }    
}




/* Index Homepage */

h2 {
    font-family: var(--font-header-family);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.8rem;
    margin: 0 0 0.8rem;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* Swiper */


.swiper {
	width: 100%;
}
.swiper .swiper-wrapper {
  width: 10rem;
  min-width: 100%;
}

.index-slider .swiper-button-next, 
.index-slider .swiper-button-prev {
    background-color: #FFFFFFB8;
    border-radius: 0px 0px 0px 0px;
    padding: 1rem;
    transition: 0.2s;
}

.index-slider .swiper-button-next:after, 
.index-slider .swiper-button-prev:after {
    color: var(--color-link);
    font-size: 1.5rem;
}

.index-slider .swiper-button-next, 
.index-slider .swiper-rtl .swiper-button-prev {
    right: 0;
}

.index-slider .swiper-button-prev, 
.index-slider .swiper-rtl .swiper-button-next {
    left: 0;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background: var(--color-link-hover);
}

.swiper-button-next:hover:after, .swiper-button-prev:hover:after {
    color: var(--color-background);
}

.swiper-slide {
	height: 450px;
	background-size: cover;
	background-position: center center;
}

.slide-image {
    overflow: hidden;
}

.slide-image img,
.slide-image .no-image {
    height: 460px;
    object-fit: cover;
    width: 100%;
    object-position: center center;
    aspect-ratio: 21 / 9;
}

.slide-details {
    margin-right: 4rem;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    flex-flow: column;
}

.slide-details time {
    color: #fff;
    background: #0000009C;
    padding: 0.4rem 0.8rem 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    align-self: flex-start;
}

.slide-details a {
font-size: 2.15rem;
    line-height: 2.25rem;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    background: #0000009C;
    padding: 0.6rem;
    font-family: var(--font-header-family);
    letter-spacing: 0.025rem;
}


@media screen and (max-width: 600px) {
    .slide-details {
        margin-right: 1rem;
    }    
}


/* Homepage Layout */

.index-container,
.category-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.index-news {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.index-news section {
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

.index-interviews .interviews-section,
.index-photos .photos-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 2rem;
}


/* Tabs */

.tab-list {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1rem;
    justify-content: space-evenly;
}

.tab {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    font-family: var(--font-header-family);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.8rem;
    color: var(--color-text);
    text-transform: uppercase;
}

.tab:hover {
    color: var(--color-link-hover);
}

.tab.active {
    color: var(--color-link);
    border-bottom-color: var(--color-link);
}

.tab-panel {
    display: grid;
    gap: 2rem;    
    padding: 1.5rem;
}

.tab-panel:not(.active) {
    display: none;
}

.tab-panel.active a.gl-button {
    justify-self: baseline;
}

@media screen and (max-width: 600px) {
    .tab-list {
        flex-flow: column;
    }

    .tab {
        padding: 0.25rem 1rem;
    }    
}


/* Cards */


.card-container {
    display: grid;
    column-gap: 2rem;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, min-content);
}

.card-container.card-image {
    row-gap: 1rem;
}

.card-container.card-row {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
}

.card-container img {
    width: 100%;
    height: 14rem;
    object-fit: cover;
    border-radius: 0.4rem;
}

.card-content {
    display: flex;
    flex-flow: column;
    gap: 0.4rem;
}

@media screen and (min-width: 601px) {
    .card-container.card-row a.card-image-link {
        grid-column: 1 / span 2;
    }

    .card-container.card-row .card-content {
        grid-column: 3 / span 3;    
    }
}
.card-content .post-excerpt {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.card-content .postlist-date, .card-content a.read-more-link {
    font-size: 0.7rem;
    margin-block-end: 0.2rem;
    display: inline-block;
}

.card-content a.read-more-link:hover {
    text-decoration: underline;
    color: var(--color-black);
}

.card-container h3 a {
    font-size: 1rem;
    font-weight: 700;
}

.card-container h3 a:hover {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-black);
}

.index-videos .video-section .card-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    display: flex;
    flex-flow: column;
}

.card-video iframe {
    width: 100%;
    height: 100%;
    display: block;
}


section.index-videos {
    padding: 2rem;
    background: var(--color-black);
}

section.index-videos h2, section.index-videos a {
    color: var(--color-background);
}

.video-section .card-content .post-excerpt {
    color: var(--color-background);
}

.video-section .card-container h3 a:hover {
    color: var(--color-link-hover);
}


@media screen and (max-width: 600px) {
    .card-container.card-row {
        grid-template-columns: 1fr;
    }    
}




@media screen and (max-width: 1023px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, auto)
    }

    aside {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    section.social-links {
        grid-column: 1 / span 2;
    }
    
    aside section:last-of-type {
        grid-column: 1 / span 2;
    }  
    
    .index-interviews .interviews-section,
    .index-photos .photos-section {
        grid-template-columns: repeat(4, 1fr);
    }        
}


@media screen and (max-width: 600px) {
    .index-news, 
    .index-interviews .interviews-section, 
    .index-photos .photos-section,
    aside{
        grid-template-columns: 1fr;
        column-gap: 0 !important;
    }

    aside {
        padding: 1rem;
    }
    aside section {
        grid-column: 1;
    }    
}



/* Search */

#search img.pagefind-ui__result-image {
    width: 100%;
    object-fit: cover;
    min-height: 6rem;
}

#search .pagefind-ui__filter-name::after {
    display: none;
}

.pagefind-ui__filter-checkbox:after {
    display: none;
}



/* Pages - General */



section.main-container {
    margin-top: 2rem;
}

section.page_main-container {
    margin-top: -4rem;
}
section.page_main-container main {
    background: var(--color-background);
}
section.page_main-container aside {
    padding-top: 6rem;
}

section.page-header {
    width: 100%;
    background: var(--color-black);
}

section.page-header h1.category-title {
    color: var(--color-background);
    font-family: var(--font-header-family);
    font-weight: 400;
    font-size: 2.4rem;
    padding: 4rem 1rem 8rem;
    text-transform: uppercase;
}

@media screen and (max-width: 768px) {
    section.page-header h1.category-title {
        padding: 0 1rem 1rem;
    }

    section.page_main-container main {
        background: transparent;
        box-shadow: none;
        padding-bottom: 0;
    }

    section.page_main-container {
        margin-top: 0;
        /* padding-left: 2rem;
        padding-right: 2rem; */
    }

    section.page_main-container .index-container {
        padding: 2rem 0;
    }

    section.page_main-container aside {
        padding-top: 3rem;
        border-top: 1px solid var(--color-link-hover);
        padding-left: 2rem;
        padding-right: 2rem;
    }
}




/* Category Page */

.category-container {
    gap: 2rem;
}

ul.categories-list {
    margin: 0;
    padding: 0;
    list-style: none;
    column-count: 2;
}

@media screen and (max-width: 768px) {
    ul.categories-list {
        column-count: 1;
    }
}

ul.categories-list li a {
    font-family: var(--font-header-family);
    text-transform: uppercase;
    font-size: 1.6rem;
}

ul.categories-list li a:hover {
    color: var(--color-black);
}

.no-image {
    background: rgba(0,0,0,0.05);
    max-width: 100%;
    height: 14rem;
    border-radius: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-link-hover);
    font-size: 0.75rem;
}

.category-container .no-image {
    grid-column: 1 / span 2;
}


/* Archives */

.archive-years-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.8rem;
    font-size: 1.4rem;
    font-family: var(--font-header-family);
}

.archive-years-grid a {
    border-radius: 0.25rem;
    background: var(--color-link);
    color: var(--color-background);
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0.4rem 1rem;
}

.archive-years-grid a:hover {
    background: var(--color-text);
}

.wa-grid.archive-years-grid {
    grid-template-columns: repeat(5, 1fr);
}

@media screen and (max-width: 600px) {
    .wa-grid.archive-years-grid {
        grid-template-columns: repeat(2, 1fr);
    }    
}



/* Authors */

ul.author-list {
    list-style: none;
    margin: 0;
    column-count: 1;
    column-gap: 3rem;
}

ul.author-list a {
    color: var(--color-link);
    font-size: 1.25rem;
}

ul.author-list a span {
    color: var(--color-link-hover);
}

ul.author-list a:hover,
ul.author-list a:hover span {
    text-decoration: underline;
    color: var(--color-text);
}

@media screen and (min-width: 601px) {
    ul.author-list {
        column-count: 3;
   }   
    ul.author-list a {
        font-size: inherit;
   }   
}



/* Posts */

.post-header-meta {
    position: relative;
    max-width: 100%;
    display: flex;
    padding: 1rem;
    max-height: 460px; 
}

.post-header-meta .no-image {
    width: 100%;
    height: 100%;
    width: 100%;
    min-height: 428px;
    padding: 1rem;
}

.post-header-meta-content {
    margin-right: 4rem;
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    display: flex;
    flex-flow: column;
}


.post-header-meta ul {
    display: flex;
    gap: 1em;
    font-size: 0.8rem;
    text-transform: uppercase;
    align-items: center;
    padding: 0;
}

.post-header-meta ul li {
    list-style: none;
}

.post-header-meta ul li a {
    color: var(--color-link-hover);
}

.post-header-meta ul li:first-child {
    background: #0000009C;
    padding: 0.4rem 0.8rem;
}

.post-header-meta ul li time {
    color: var(--color-background);
}

.post-header-meta h1 {
    font-size: 2.15rem;
    line-height: 2.25rem;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    background: #0000009C;
    padding: 0.6rem;
    font-family: var(--font-header-family);
    letter-spacing: 0.025rem;
    text-wrap: auto;
}

ul.post-metadata {
    list-style: none;
    font-size: 0.85rem;
}

@media screen and (max-width: 600px) {
    .post-header-meta {
        aspect-ratio: auto;
        min-height: 25rem;
    }
}


.post-container p {
    margin-block-end: 1rem;
}

.post-container {
    line-height: 1.9;
}

.post-container > *:first-child {
    font-weight: 700;
}

.post-container a {
    color: var(--color-link);
    text-decoration: underline;
}

.post-container a:hover {
    color: var(--color-link-hover);
}

.post-container iframe {
    max-width: 100%;
}



ul.links-nextprev {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
}

ul.links-nextprev li {
    display: flex;
    flex-flow: column;
    gap: 1rem;
    max-width: 50%;
}

ul.links-nextprev li.links-nextprev-next {
    align-items: flex-end;
}


ul.links-nextprev li span.links {
    font-family: var(--font-header-family);
    text-transform: uppercase;
    font-size: 1.4rem;
}

ul.links-nextprev a {color: var(--color-link);}

ul.links-nextprev a:hover {
    color: var(--color-link-hover);
}


@media screen and (max-width: 768px) {
    ul.links-nextprev {
        display: flex;
        flex-flow: column;
        gap: 2rem;
    }    

    ul.links-nextprev li.links-nextprev-next,
    ul.links-nextprev li.links-nextprev-prev{
        align-items: center;
    }   
        
    ul.links-nextprev li {
        max-width: 100%;
    } 

}

.social-share {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  gap: 1rem;
align-items: center;    
}

.social-share span {
  font-size: 0.85rem;
}

.social-share-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem; 
  flex-wrap: wrap;
}

.social-share-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--color-link);
  text-decoration: none;
  transition: background 0.2s;
  fill: var(--color-background);
}

.social-share-list a:hover {
  background: var(--color-black);
}

.social-share-list svg {
    width: 1.4rem;
}


/* WP Element Styling */

/* -- Gallery -- */


.post-container figure.wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}

.post-container figure.wp-block-image {
    margin: 0 0 2rem;
}

.post-container figure.wp-block-image a {
    display: block;
}

.post-container figure.wp-block-image img {
    width: 100%;
    height: 100%;
}

.post-container figure.wp-block-image a:hover img {
    transform: none;
}

.post-container figure.wp-block-gallery figure.wp-block-image {
    margin: 0;
}

.post-container figure.wp-block-gallery figure.wp-block-image a:hover img {
    transform: scale(1.05);
    transition: 0.3s;
}

.post-container figure.wp-block-gallery figure.wp-block-image a img {
    transition: 0.3s;
    height: 11rem;
    object-fit: cover;
    border-radius: 0.25rem;  
}



@media screen and (max-width: 768px) {
    .post-container figure.wp-block-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

p {
    word-wrap: break-word;
}



/* Video Posts */

.video-meta {
    margin-bottom: 2rem;
}

.video-embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin-top: 2rem;
}
.video-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}




/* Page Template */

h1.page-title {
    font-size: 2.15rem;
    line-height: 2.25rem;
    font-weight: 400;
    color: var(--color-black);
    text-decoration: none;
    font-family: var(--font-header-family);
    letter-spacing: 0.025rem;
    margin: 0;
}




/* Pagination */

.pagination {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

.pagination a, .pagination span:not(.ellipsis) {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--color-link);
    color: var(--color-background);
    min-width: 2rem;
}

.pagination a:hover {
    background: var(--color-black);
    color: var(--color-background);
}

.pagination a {
    background: var(--color-background);
    color: var(--color-black);
}

.pagination span.ellipsis {
    align-content: center;
}



/* Footer */

footer.footer {
    background: var(--color-black);
    color: var(--color-background);
    padding: 2rem 0 2rem;
}

footer.footer ul.nav {
    margin: 0;
    padding: 1rem 0;
    list-style: none;
    flex-flow: row;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

footer.footer .page-width {
    text-align: center;
}

footer.footer span {
    font-size: 0.75rem;
}

footer.footer ul.nav a {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--color-background);
    text-decoration: none;
}

footer.footer ul.nav a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 600px) {
    footer.footer ul.nav {
        flex-flow: column;
    }    

}