/* TABLE OF CONTENTS
------------------------------------------------------------/
1.0     Global & Utilities
1.1         Project Variables
1.2         Theme
1.3         Typography
1.4         Spacing
1.5         Globals 
1.6         Utilities
2.0     Core Components
2.1         Logo
2.2         Buttons
2.3         Social Icons
3.0     Layout & Structure
4.0     Headers
5.0     Menus & Navigation
6.0     Footer
7.0     Sidebars
8.0     Core Templates
8.1         Index Template
8.2         Page Template
8.3         Single Post Template
8.4         Front Page Template
8.5         Home Template
8.6         404 Template
8.7         Search Template
9.0     Blocks
10.0    3rd Party Styling
9999    Here be Dragons

/// END TABLE OF CONTENTS * */
/* * 1.0 Global & Utilities
------------------------------------------------------------ */
/* * 1.1 Project Variables
------------------------------------------------------------ */
:root {
    /* BACKGROUND COLORS */
    --background-color-light: var(--white);
    --background-color-dark: var(--dark);
    --background-color-footer: var(--Footer)

    /* BASE TEXT */;
    --base-text-size: 1rem;

    /* 16px */
    --base-text-weight: 400;
    --base-text-lineheight: 1.5;
    --text-color-dark: var(--dark);
    --text-color-light: var(--light);

    /* ANCHOR TEXT */
    --anchor-color: var(--primary);
    --anchor-color-hover: var(--secondary);

    /* HEADINGS */
    --h1-text-size: 2.5rem;
    --h1-text-weight: 600;
    --h1-text-lineheight: 1.25;
    --h1-text-color: var(--primary);
    --h2-text-size: 2rem;
    --h2-text-weight: 600;
    --h2-text-lineheight: 1.25;
    --h2-text-color: var(--black);
    --h3-text-size: 1.75rem;
    --h3-text-weight: 600;
    --h3-text-lineheight: 1.25;
    --h3-text-color: var(--black);
    --h4-text-size: 1.5rem;
    --h4-text-weight: 600;
    --h4-text-lineheight: 1.25;
    --h4-text-color: var(--black);
    --h5-text-size: 1.2rem;
    --h5-text-weight: 600;
    --h5-text-lineheight: 1.5;
    --h5-text-color: var(--black);
    --h6-text-size: 1rem;
    --h6-text-weight: 600;
    --h6-text-lineheight: 1.5;
    --h6-text-color: var(--black);

    /* VIEWPORT SIZES */
    --layout-max-width: 80rem;
    --layout-content-width: 45rem;

    /* Default Page Padding in REM */
    --page-padding-max: 2rem;
    --page-padding-min: 1.5rem;

    /* Default Section Spacing in REM */
    --section-spacing-top: 2rem;
    --section-spacing-bottomr: 2rem;
}

/* ** END SETUP ** */
/* * 1.2 Theme (Anything specific to this theme)
------------------------------------------------------------ */
/* /** 1.3 Typography
------------------------------------------------------------ */
body {
    font-size: var(--base-text-size);
    font-weight: var(--base-text-weight);
    line-height: var(--base-text-lineheight);
    color: var(--text-color-dark);
}

h1 {
    font-size: var(--h1-text-size);
    font-weight: var(--h1-text-weight);
    line-height: var(--h1-text-lineheight);
    color: var(--h1-text-color);
    margin-block-start: 1.5rem;
    margin-block-end: 1.5rem;
}

h2 {
    font-size: var(--h2-text-size);
    font-weight: var(--h2-text-weight);
    line-height: var(--h2-text-lineheight);
    color: var(--h2-text-color);
    margin-block-start: 1.5rem;
    margin-block-end: 0.5rem;
}

h3 {
    font-size: var(--h3-text-size);
    font-weight: var(--h3-text-weight);
    line-height: var(--h3-text-lineheight);
    color: var(--h3-text-color);
    margin-block-start: 1rem;
    margin-block-end: 0.5rem;
}

h4 {
    font-size: var(--h4-text-size);
    font-weight: var(--h4-text-weight);
    line-height: var(--h4-text-lineheight);
    color: var(--h4-text-color);
    margin-block-start: 1rem;
    margin-block-end: 0.5rem;
}

h5 {
    font-size: var(--h5-text-size);
    font-weight: var(--h5-text-weight);
    line-height: var(--h5-text-lineheight);
    color: var(--h5-text-color);
    margin-block-start: 1rem;
    margin-block-end: 0.5rem;
}

h6 {
    font-size: var(--h6-text-size);
    font-weight: var(--h6-text-weight);
    line-height: var(--h6-text-lineheight);
    color: var(--h6-text-color);
    margin-block-start: 1rem;
    margin-block-end: 0.5rem;
}

a {
    color: var(--anchor-color);
    text-decoration: underline;
}

a:hover {
    color: var(--anchor-color-hover);
}

p {
    margin-block-start: 0.5rem;
    margin-block-end: 1.25rem;
}

/* * 1.4 Spacing
------------------------------------------------------------ */
.layout__x-padding {
    padding-right: var(--page-padding-max);
    padding-left: var(--page-padding-max);
}

.layout__constrained {
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
}

.layout__y-padding--page {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* * 1.5 Globals
------------------------------------------------------------ */
html {
    /* font-size: 100%;
    scroll-padding-top: 10rem; */
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: 0rem;
}

button,
[role="buton"] {
    cursor: pointer;
}

img,
picture {
    height: auto;

    /* Make sure images are scaled correctly. */
    max-width: 100%;

    /* Adhere to container width. dmp: changed from width to max-width */
}

/* Prevents the picture element from taking up additional height */
picture > img {
    display: block;
}

figure {
    margin: 1em 0;

    /* Extra wide images within figure tags don't overflow the content area. */
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}

a {
    cursor: pointer;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

big {
    font-size: 125%;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    .footer__grid {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
        transition-duration: 0s !important;
    }
}

/* Controls Focus Behavior 
*:focus:not(input),
button:focus {
    outline-style: solid;
    outline-width: 0.2rem;
    outline-offset: 0.25em;
} */
/* Disables focus on finger touch for mobile devices */
*:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Needed to cloak hidden elements before JS loads when using Alpine.js */
[x-cloak] {
    display: none !important;
}

/* Disable link clicks in the Block Editor */
.disabled,
.editor-canvas a,
.editor-styles-wrapper a {
    pointer-events: none;
    cursor: pointer;
}

/* * 1.6 Utilities
------------------------------------------------------------ */
.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal!important;
}

.screen-reader-text:focus {
    background-color: #ddd;
    clip: auto!important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* News Column Utilities */
.news-columns {
    columns: 2 20em;
    column-gap: 4em;
    orphans: 2;
}

.news-columns:not(p) {
    margin-bottom: 1em;
}

/* Container Width Utilities */
.contained-768 {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.contained-1024 {
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

.contained-1280 {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

.contained-1440 {
    max-width: 90rem;
    margin-left: auto;
    margin-right: auto;
}

.contained-1600 {
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
}

.contained-1760 {
    max-width: 110rem;
    margin-left: auto;
    margin-right: auto;
}

.contained-1920 {
    max-width: 120rem;
    margin-left: auto;
    margin-right: auto;
}

/* Use this on a text element or div to allow text to break correctly */
.break-hyphenate {
    overflow-wrap: break-word;

    /* Overflow and Word-Wrap are technically the same, but use both */
    word-wrap: break-word;
    -ms-word-break: break-all;

    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;

    /* Instead use this non-standard one: */
    word-break: break-word;
    -webkit-hyphens: auto;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

/* Creates a diagonal div rotated to fit inside a square. */
.square-diagonal {
    position: absolute;
    display: block;
    transform: rotate(45deg);
    transform-origin: bottom right;
    width: 141.42%;
}

/* alignment classes */
.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.aligncenter {
    clear: both;
    margin-bottom: 1.5em;
}

/* Remove margin block utilities */
.no-mb-all {
    margin-block-start: 0;
    margin-block-end: 0;
}

.no-mb-start {
    margin-block-start: 0;
}

.no-mb-end {
    margin-block-end: 0;
}

/* * 2.0 Core Components
------------------------------------------------------------ */
/* * 2.1 Logo
------------------------------------------------------------ */
.header__logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    grid-area: logo;
    row-gap: 0px;
    flex-direction: column;
}

.header__logo-wrapper img {
    max-width: 15rem;
}

div.header__innerwrapper.layout__constrained.layout__x-padding {
    background-image: linear-gradient(90deg, var(--ThemeDark), var(--ThemeLight));
}

.site_name {
    font-family: 'Alfa Slab One', cursive;
    font-weight: 400;
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--ThemeName);
    letter-spacing: 1px;
}

ul.main-menu__list li {
    list-style-type: none;
}

@media (min-width:768px) {
    /* .layout__x-padding ul {
        display: flex;
        flex-direction: column;
    } */
}

/* * 2.2 Buttons
------------------------------------------------------------ */
.btn--base {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
    padding: 0.825rem 1rem;
    display: inline-flex;
    border-radius: 4px;
    transition: all 0.2s;
    margin: 1rem;
    text-decoration: none;
}

.btn--base:hover {
    color: var(--white);
    background-color: var(--secondary);
}

.btn--light {
    background-color: var(--background-color-light);
    color: var(--background-color-dark);
}

/* .btn--light:hover {
    background: var(--light_peach);
    color: var(--white);
} */
.btn--dark {
    background-color: var(--background-color-dark);
    color: var(--background-color-light);
}

.btn--dark:hover {
    background: var(--primary);
    color: var(--light);
}

#topBtn {
    /* display: none */
    /* Hidden by default */
    position: fixed;

    /* Fixed/sticky position */
    bottom: 20px;

    /* Place the button at the bottom of the page */
    right: 30px;

    /* Place the button 30px from the right */
    z-index: 99;

    /* Make sure it does not overlap */
    border: none;

    /* Remove borders */
    outline: none;

    /* Remove outline */
    background-color: var(--dark);

    /* Set a background color */
    color: white;

    /* Text color */
    cursor: pointer;

    /* Add a mouse pointer on hover */
    padding: 0.5rem 0.5rem;

    /* Some padding */
    border-radius: 5px;

    /* Rounded corners */
    font-size: 1rem;

    /* Increase font size */
    transition: all 0.3s ease-in-out;
    visibility: hidden;
}

#topBtn:hover {
    background-color: var(--primary);
}

/* * 2.3 Social Icons
------------------------------------------------------------ */
.part__socialicons ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 0.5rem;
}

.part__socialicons li {
    list-style-type: none;
}

.part__socialicons a {
    padding: 0.5rem;
    display: flex;
    flex-direction: row;
}

.part__socialicons svg {
    height: auto;
    width: 1.5rem;
}

/* * 3.0 Layout & Structure
------------------------------------------------------------ */
.layout-grid__header-content-sidebar {
    display: grid;
    padding-top: 2rem;
    padding-bottom: 2rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 'header' 'content' 'sidebar';
    gap: 1rem;
}

@media (min-width:768px) {
    .layout-grid__header-content-sidebar {
        display: grid;
        grid-template-columns: 1fr minmax(30%, 25rem);
        grid-template-rows: auto auto;
        grid-template-areas: 'header header' 'content sidebar';
        column-gap: 5rem;
        row-gap: 1rem;
    }
}

.header-content-sidebar__header {
    grid-area: header;
}

.header-content-sidebar__sidebar {
    grid-area: sidebar;
}

.layout-grid__content-sidebar {
    display: grid;
    padding-top: 2rem;
    padding-bottom: 2rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 'content' 'sidebar';
    gap: 1rem;
}

@media (min-width:768px) {
    .layout-grid__content-sidebar {
        grid-template-columns: minmax(35rem, 55rem) minmax(15rem, 1fr);
        grid-template-rows: auto;
        grid-template-areas: 'content sidebar';
        display: grid;
        gap: 1rem;
    }
}

.content-sidebar__content {
    grid-area: content;
}

.content-sidebar__sidebar {
    grid-area: sidebar;
    max-width: 100%;
}

.layout__single-container {
    padding-top: 2rem;
    margin-bottom: 2rem;
}

/* * 4.0 Headers
------------------------------------------------------------ */
.site-header {
    background-color: var(--light);
}

.header__layout-grid {
    display: grid;
    grid-template-columns: fit-content(30%) 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 'logo mobile-menu' 'main-menu main-menu';
    padding-top: 1rem;
    padding-bottom: 1rem;
    column-gap: 1rem;
    row-gap: 0.5rem;
}

@media (min-width:768px) {
    .header__layout-grid {
        display: grid;
        grid-template-columns: fit-content(30%) 1fr auto;
        grid-template-rows: auto;
        grid-template-areas: 'logo main-menu mobile-menu';
        padding-top: 1rem;
        padding-bottom: 1rem;
        gap: 1rem;
    }
}

/* * 5.0 Menus & Navigation
------------------------------------------------------------ */
.header__main-menu nav {
    display: none;
    padding: 0rem 2rem 0rem 0rem;
    box-shadow: 2px 2px 5px 2px rgba(159, 94, 29, 0.81);
}

@media (min-width:768px) {
    .header__main-menu nav {
        display: flex;
        padding: unset;
        box-shadow: unset;
        background-color: unset;
    }
}

.site-header nav ul {
    padding: 0;
}

.site-header nav li {
    list-style-type: none;
}

.site-header nav a {
    text-decoration: none;
}

.header__main-menu {
    grid-area: main-menu;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;

    /* flex-direction: row */
}

@media (min-width:768px) {
    .header__main-menu {
        display: flex;
    }
}

.main-menu__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width:768px) {
    .main-menu__list {
        flex-direction: column;
    }
}

.header__main-menu a {
    color: var(--secondary);
    font-weight: bolder;
    font-size: 1.25rem;
    text-decoration: none;
}

.header__main-menu a:hover {
    text-decoration: underline;
}

.header__mobile-menu {
    grid-area: mobile-menu;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (min-width:768px) {
    .header__mobile-menu {
        display: none;
    }
}

.mobile-menu__trigger {
    display: block;
    color: var(--dark);
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    background-color: var(--background-color-light);
}

.mobile-menu__trigger-lines {
    display: block;
    border: 0;
    border-bottom: 2px solid currentColor;
    width: 1.5rem;
    margin: 0.25rem 0;
}

/* * 6.0 Footer
------------------------------------------------------------ */
.site-footer {
    color: var(--text-color-light);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-rows: auto auto auto;
    gap: 0.5rem;
    grid-template-areas: 'logo banner' 'footer-content footer-content' 'copyright copyright';
}

@media (min-width:768px) {
    .footer__grid {
        display: grid;
        grid-template-columns: 1fr 5fr;
        grid-template-rows: auto auto auto;
        gap: 0.5rem;
        grid-template-areas: 'logo banner' 'footer-content footer-content' 'copyright copyright';
    }
}

.footer__banner {
    grid-area: banner;
}

.layout__footer__banner {
    background-color: var(--background-color-footer);
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.footer__logo {
    display: block;

    /* align-items: center */
    /* flex-direction: column */
    grid-area: logo;
}

.photobanner {
    /* used in date_image_generator.php */
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.footer__content_grid {
    grid-area: footer-content;
    display: flex;
    flex-direction: column;
    background-color: var(--light);
    color: var(--text-color-dark);
}

@media (min-width: 768px) {
    .footer__content_grid {
        flex-direction: row;
    }
}

.footer_links {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .footer_links {
        align-items: flex-end;
        flex-basis: 50%;
        padding-right: var(--page-padding-max);
    }
}

/* .footer_links a {
    color: #7699f1;
} */
.footer_links li {
    list-style-type: none;
}

.footer__social p {
    margin-bottom: 0px;

    /* flex-basis: 139px */
}

.footer__social {
    display: flex;
    flex-direction: column;

    /* gap: 0px */
    /* row-gap: 0px */
    /* grid-area: social */
    /* justify-content: flex-start */
    /* flex-wrap: nowrap */
    /* align-items: baseline */
}

.part__socialicons ul {
    margin-top: 0px;
}

@media (min-width:768px) {
    .footer__social {
        align-items: baseline;
    }
}

.footer__copyright {
    grid-area: copyright;

    /* flex-basis: 300px */
}

@media (min-width:768px) {
    /* .footer__social p {
        flex-basis: 85px
    } */
    .footer__copyright {
        display: flex;
        justify-content: center;
    }
}

/* not used 
@media (min-width:768px) {
    .footer__contact div {
        align-items: flex-start;
    }
} */
/* * 7.0 Sidebars
------------------------------------------------------------ */
.sidebar__innerwrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-end;
}

.sidebar__content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.sidebar__category-wrapper {
    display: flex;
    flex-direction: column;
}

.sidebar__category-wrapper h2 {
    margin-top: 0;
}

.sidebar__tag-wrapper {
    display: flex;
    flex-direction: column;
}

.sidebar__tag-wrapper h2 {
    margin-top: 0;
}

#commentform textarea,
#commentform input {
    width: 100%;
}

/* * 8.0 Core Templates
------------------------------------------------------------ */
/* * 8.1 Index Template
------------------------------------------------------------ */
.article-card__wrapper ul {
    padding: 0;
    display: grid;

    /* flex-direction: column */
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto;
}

.article-card__wrapper > ul > li {
    list-style-type: none;
}

.article-card,
.content-sidebar__sidebar .widget {
    /* align-items: flex-start */
    background-color: var(--light);
    padding: 1rem;
    margin-bottom: 1rem;
    max-width: 100%;
}

/* .article-card div {
    ||*| display: flex |*||
    flex: 1;
    flex-direction: column;
    padding-top: 0px;
} */
.article-card a {
    text-decoration: none;
}

.article-card a:hover {
    text-decoration: underline;
}

.article-card h2,
.content-sidebar__sidebar .widget {
    color: var(--primary);
    margin-block-start: 0rem;
}

/* .article-card .post-header__categories {
    flex-direction: row;
}   Not needed 1-dec-24 */
/* .article-card__image-wrapper {  still needed?
} */
.article-card img {
    /* aspect-ratio: auto */
    /* object-fit: cover */
    object-position: 50% 50%;
}

.pagination nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pagination ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
}

.pagination li {
    list-style-type: none;
}

/* * 8.2 Page Template
------------------------------------------------------------ */
/* * 8.3 Single Post Template
------------------------------------------------------------ 
Comments:
Remove avatar image 
Remove list decoration */
.comment-author img {
    display: none;
}

.commentlist li {
    list-style-type: none;
    margin-bottom: 1rem;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
}

li.widget {
    list-style-type: none;
}

.comment-respond {
    max-width: 100%;
}

#respond form {
    max-width: 100%;
}

#cooler-nav .nav-box {
    padding: 8px;
}

#cooler-nav img {
    margin: 0 10px 0 0;
}

#cooler-nav p {
    margin: 0 10px;
}

#cooler-nav .previous {
    vertical-align: middle;

    /* width: 250px */
    /* height: 100px */
}

#cooler-nav a p {
    font-weight: 700;

    /* line-height: 1rerm */
}

#cooler-nav {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3,fit-content(33.3%));

    /* grid-template-columns: minmax(140px, auto) minmax(140px, auto) minmax(140px, auto) */
    gap: 1rem;
}

------------------------------------------------------------ */
/* * 8.4 Front Page Template
------------------------------------------------------------ */
/* * 8.5 Home Template
------------------------------------------------------------ */
/* * 8.6 404 Template
------------------------------------------------------------ */
/* * 8.7 Search Template
------------------------------------------------------------ */
/* * 9.0 Blocks
------------------------------------------------------------ */
/* * 10.0 3rd Party Styling
------------------------------------------------------------ */
/* * 9999 Here be Dragons
------------------------------------------------------------ */
.tag-cloud-link {
    display: inline-block;
    margin-right: 5px;
    text-decoration: none;
}

.firsth1 {
    margin-block-end: 0px;
}

.noflex {
    display: block;
}

.nav-tags {
    grid-area: tags;
}

/* fix comments bug */
.single-post-comments #respond {
    display: none;
}

/* Remove the save your email etc. in comments reply */
.comment-form-cookies-consent {
    display: none;
}

.mgl-gallery-container {
    margin-bottom: 1rem;
}

.header__logo-wrapper a {
    text-decoration: none;
}