/* ========================
   Base Styles
   ======================== */

/* Ensure fixed background on any body with a class */
body[class] {
    background-attachment: fixed !important;
} 

/* Reset box-shadow for entry elements */
.entry.single-entry,
.entry {
    box-shadow: none;
} 

/* ========================
   Typography
   ======================== */

/* Apply pretty text wrapping to all headings */
h1, h2, h3, h4, h5, h6, .title-entry-excerpt {
    text-wrap: pretty;
}

/* Heading styles within entry and header */
.entry-hero h1,
.entry-taxonomies a,
.entry-meta,
.title-entry-excerpt {
    color: var(--BabyPowder);
}

.entry-header h1 {
    font-size: 2.4rem;
}
body.blog .entry-header h1 {
    line-height: 3;
}

.post-title .title-entry-excerpt {
    font-size: 1.296rem;
    line-height: 1.7;
	color: var(--Xanthous);
}

code {
  background: var(--Periwinkle);
  color: var(--Onyx);
  padding: 0.3em 0.5em;   
  font-size: 0.7em;      
  line-height: 1.6;
  border-radius: 6px;
  vertical-align: middle;
}

/* ========================
   Navigation & Links
   ======================== */

/* Primary menu link color */
body[class] .main-navigation .primary-menu-container > ul > li.menu-item > a {
    color: var(--BabyPowder);
}

/* Footer HTML link colors */
#colophon .site-footer-row-container .site-footer-row .footer-html,
#colophon .site-footer-row-container .site-footer-row .footer-html a {
    color: var(--BabyPowder);
}
#colophon .site-footer-row-container .site-footer-row .footer-html a:hover {
    color: var(--Periwinkle);
}

/* Site navigation link shadow */
#site-navigation a {
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* Subscribe button in main navigation */
#site-navigation .primary-menu-container > ul > li.subscribe > a {
    font-weight: 700;
    line-height: 0;
    height: 2.6rem;
    border-radius: 2em;
    background-color: var(--Xanthous);
    color: var(--Onyx);
    text-shadow: none;
    box-shadow: 4px 4px 8px 0 rgba(255,255,225,0.25);
}
#site-navigation .primary-menu-container > ul > li.subscribe > a::after {
    display: none;
}
#site-navigation .primary-menu-container > ul > li.subscribe > a:hover {
    background-color: var(--SteelPink);
    color: white;
}

.entry-content.single-content a {
  text-decoration: none;
  border-bottom: 2px solid #ffffff;
  background-image: linear-gradient(to right, #8c2c7a, #ffd700, #182562);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: left bottom;
  padding-bottom: 3px;
  transition: 
    background-size 0.4s ease-out,
    border-color    0.4s ease-out;
}

.entry-content.single-content a:hover {
  background-size: 100% 2px;                      /* expand gradient */
  border-color: transparent;                      /* hide the white border */
}

.wp-block-kevinbatdorf-code-block-pro > span {
	border-radius: 6px 6px 0 0;
}

.entry-content .wp-block-kevinbatdorf-code-block-pro pre {
	border-radius: 0 0 6px 6px !important;
}

/* Pagination link styles */
.navigation.pagination a {
    background: rgba(255,255,255,0.15);
    color: var(--global-palette8);
}
.navigation.pagination a:hover {
    background: rgba(255,255,255,0.5);
    color: var(--global-palette2);
}
.nav-links a.page-numbers {
    border-color: var(--global-palette-btn-bg);
    color: var(--global-palette-btn-bg);
}
.nav-links a.page-numbers:hover {
    background-color: var(--global-palette-btn-bg);
    color: var(--global-palette8);
}

/* Post & comment navigation colors */
.post-navigation {
    color: white;
}
.comment-navigation a,
.post-navigation a {
    color: var(--Onyx);
}
.comment-navigation a:hover,
.post-navigation a:hover {
    color: var(--global-palette1);
}

/* ========================
   Containers & Layout
   ======================== */

/* Content containers rounded corners */
body[class] .content-container,
body.color-switch-light .content-container,
body.blog.color-switch-dark .content-container,
body.page.color-switch-dark .content-container,
body.single.color-switch-dark .content-container {
    border-radius: 8px;
}

/* Blog content area reset margin */
.blog .content-area {
    margin: 0;
}

/* Entry padding & rounding */
.entry {
    border-radius: 14px;
    padding: 2rem;
}

.loop-entry .entry-content-wrap {
    padding: 2em 0;
}

.entry.loop-entry {
    box-shadow: none;
}

/* Comments area styling */
.comments-area {
    background: var(--global-palette9);
    padding: 2rem;
    border-radius: 14px;
}

/* RSS block styling */
.has-excerpts.wp-block-rss {
    padding: 0;
}
.has-excerpts.wp-block-rss a {
    margin-bottom: 0.7em;
    display: block;
}

/* Testimonial bubble underline color */
body[class] .kt-testimonial-style-bubble .kt-testimonial-text-wrap:after {
    border-top-color: var(--global-palette7);
}

/* Custom logo styling */
.custom-logo {
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* Footer navigation links */
#footer-navigation a {
    color: var(--BabyPowder);
}

/* Disqus share text links */
.bctt-ctt-text a {
    font-family: inherit !important;
    color: var(--global-palette5) !important;
    font-size: 1.25em;
    line-height: 1.25em;
}
/* ========================
   Comment Styles
   ======================== */
.comment-list .bypostauthor .avatar {
	background-color: var(--Xanthous);
	border: 3px solid var(--Xanthous);
}
.comment-list .comment {
	padding: 2em; 
	border: 1px solid var(--global-palette3);
	border-radius: 4px; 
}

.comment-list .comment .comment-body {
	margin: 0px; 
	border: 0px; 
}

.comment-list .comment .children {
	margin-left: 0px;
}

.comment-list .pingback .comment-body {
	border: 1px solid var(--global-palette4);
	background-color: rgba(255,255,255,0.15);
	padding: 1em 2em;
	border-radius: 4em;
	font-size: 0.9rem;
	margin-top: 3em;
}

/* ========================
   Groundhogg Styles
   ======================== */

form.gh-form {
    font-size: 80%;
}

form.gh-form .gh-form-input-field {
    margin-bottom: 14px;
}

/* ========================
   Color Modes: Light
   ======================== */

/* Light mode header overlay gradient */
body.color-switch-light .site-header-upper-inner-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.125) 45%,
        rgba(0, 0, 0, 0) 95%
    );
}

body.color-switch-light .post-title .title-entry-excerpt {
	color: var(--Plum);
}

/* Light mode page background gradient */
body.page.color-switch-light,
body.blog.color-switch-light,
body.single.color-switch-light {
    background: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 51%, rgb(65, 88, 208) 99%);
}

/* Light mode content container background */
body.color-switch-light .content-container {
    background: var(--global-palette8);
    padding: 0em;
}

body.blog.color-switch-light .content-container {
    padding: 3em;
}

/* Light mode nav hover color */
body.color-switch-light .main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
    color: var(--global-palette7);
}

/* Responsive padding for light mode containers */
@media (max-width: 767px) {
    body.page.color-switch-light .content-container,
    body.blog.color-switch-light .content-container,
    body.single.color-switch-light .content-container {
        padding: 0.25rem;
    }
}

/* ========================
   Color Modes: Dark
   ======================== */

/* Dark mode page background color */
body.page.color-switch-dark,
body.blog.color-switch-dark,
body.single.color-switch-dark {
    background: var(--global-palette9);
}

/* Dark mode content area positioning */
body.page.color-switch-dark .content-area,
body.blog.color-switch-dark .content-area,
body.single.color-switch-dark .content-area {
    position: relative;
}

/* Dark mode nav hover color */
body.color-switch-dark .main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
    color: var(--global-palette1);
}

/* Dark mode category pill background */
.loop-entry.type-post .entry-taxonomies .category-style-pill a {
    background: var(--Onyx);
}

/* Dark mode colorful box-shadow effect adapted from Reddit */
body.page.color-switch-dark .single-entry,
body.blog.color-switch-dark .content-container,
body.single.color-switch-dark .single-entry {
    /* Adapted from https://www.reddit.com/r/web_design/comments/bwtk83/comment/eq1fb4i/ */
    box-shadow:
        10px 10px 200px -25px rgba(255, 210, 23, 0.35),
        -20px 20px 200px -25px rgba(90, 199, 255, 0.35),
        30px -30px 200px -25px rgba(255, 0, 0, 0.35),
        -40px -40px 200px -25px rgba(0, 255, 0, 0.35),
        40px 30px 200px -25px rgba(68, 8, 128, 0.35);
}

/* Dark mode blog content container */
body.blog.color-switch-dark .content-container {
    background: var(--global-palette8);
    padding: 3em;
    border-radius: 20px;
}

/* Dark mode taxonomy link hover color */
body.color-switch-dark .loop-entry.type-post .entry-taxonomies a:hover {
    color: var(--global-palette9);
}

/* Dark mode branding and testimonial text color */
body.color-switch-dark .site-branding .site-title,
body.color-switch-dark #colophon .footer-navigation .footer-menu-container > ul > li > a,
body.color-switch-dark .kt-testimonial-style-bubble .kt-testimonial-content,
body.color-switch-dark .kt-testimonial-style-bubble .kt-testimonial-occupation {
    color: var(--BabyPowder);
}
body.color-switch-dark .site-branding .site-title:hover,
body.color-switch-dark #colophon .footer-navigation .footer-menu-container > ul > li > a:hover,
body.color-switch-dark .kt-testimonial-style-bubble .kt-testimonial-content:hover,
body.color-switch-dark .kt-testimonial-style-bubble .kt-testimonial-occupation:hover {
    color: var(--global-palette1);
}

/* Responsive padding for dark mode containers */
@media (max-width: 767px) {
    body.blog.color-switch-dark .content-container,
    body.single.color-switch-dark .content-container,
    body.page.color-switch-dark .content-container {
        padding: 1em;
    }
}

/* =======================
   End of Styles
   ======================= */