/*
 Theme Name:   Wayhome Theme (Bootscore Child)
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  wayhome-theme
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/

/* Global Variables */
@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,700,800,800i,900i&display=swap");

:root {
  /* Color Palette */
  --primary-color: rgb(46, 71, 86);
  --light-color: #f9f6f2;
  --accent-color: #e3d5cc;
  --text-color: #212529;
  --light-text-color: #ffffff;
  --light-text-muted: rgba(255, 255, 255, 0.7);
  --dark-text-muted: rgb(52, 58, 64);
  --custom-blue: #2a7bac;

  /* Typography */
  --font-family-base: "Nunito Sans", Arial, Roboto, Tahoma, Verdana,
    Helvetica Neue, Helvetica, sans-serif;

  /* Aliases for backward compatibility */
  --bg-footer-color: var(--primary-color);
  --header-bg-color: var(--light-color);
  --footer-link-color: var(--light-text-muted);
}

/* Debug Helpers */
/* * { outline: 1px blue solid; } */
/* * { background: rgb(0 100 0 / 0.1) !important; } */
/* .post-container { border: 1px solid black; } */

/* Set default background color for the entire body */
body {
  background-color: var(--light-color);
  font-family: var(--font-family-base);
}

/* Set white background specifically for single post pages */
body.single {
  background-color: #fff;
}

body #content.site-content,
body .single-post-hero {
  font-family: var(--font-family-base);
  background-color: var(--light-color);
}

body.single #content.site-content,
body.single .single-post-hero {
  background-color: #fff;
}

/* Apply text color to all headings */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  color: var(--text-color);
}

/* Apply text color to all links except those with specific classes */
a:not(.btn):not(.footer-link):not(.social-media-icons):not(.login-link) {
  color: var(--text-color);
}

/* Background Colors */
.bg-footer {
  background-color: var(--primary-color);
}

.bg-header {
  background-color: var(--light-color);
}

/* Text Colors */
.text-header {
  color: var(--dark-text-muted);
  font-size: 16px;
  opacity: 1;
}

.login-link {
  color: var(--primary-color);
  font-size: 16px;
}

.footer-link {
  text-decoration: none;
  color: var(--light-text-muted);
}

.social-media-icons {
  color: var(--light-text-color);
  margin: 0 20px;
}

/* Custom Button Styles */
.btn-filled-color {
  background-color: var(--primary-color);
  color: var(--light-text-color);
}

.btn-filled-color:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-color {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

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

/* Custom Pagination Styles */
.pagination .page-item.active .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--light-text-color);
}

.pagination .page-item .page-link:hover,
.pagination .page-item:not(.active) .page-link:hover,
.pagination .page-item:hover .page-link {
  background-color: var(--primary-color);
  color: var(--light-text-color);
  border-color: var(--primary-color);
}

.pagination .page-item:not(.active) .page-link {
  color: var(--text-color);
}

/* HOMEPAGE STYLES */
/* Ensure posts are visible on small screens */
@media (max-width: 575.98px) {
  #latestPostsCarousel .post-row {
    display: block !important;
    transform: none !important;
  }

  #latestPostsCarousel .post-item {
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Carousel Slider Styles for homepage */
.carousel-inner {
  overflow: hidden;
  position: relative;
}

.post-row {
  display: flex;
  transition: transform 0.5s ease;
}

/* Button states for carousel navigation */
.btn-link.prev-posts,
.btn-link.next-posts {
  background: transparent;
  border: none;
  color: var(--primary-color);
  font-size: 1.5rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
  text-decoration: none;
}

.btn-link.prev-posts:hover,
.btn-link.next-posts:hover {
  opacity: 0.8;
  text-decoration: none;
}

.prev-posts.disabled,
.next-posts.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* CATEGORIES FOOTER */
.category-badge {
  text-decoration: none;
  color: var(--primary-color);
}

.category-badge:hover {
  text-decoration: underline;
  opacity: 0.9;
}

.category-badge-active {
  text-decoration: underline;
  font-weight: bold;
}

/* SINGLE POST STYLES */
.single-post-hero .rounded {
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

.single-post-title {
  background-color: var(--primary-color);
  color: var(--light-text-color);
}

.single-post-info {
  background-color: var(--light-color);
}

.cta-card {
  background-color: var(--accent-color);
}

.cta-btn {
  background-color: var(--primary-color);
  color: var(--light-text-color);
}

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

.border-bottom-md {
  border-bottom: 0 !important;
}

@media (min-width: 768px) {
  .border-bottom-md {
    border-bottom: 1px solid !important;
  }
}

.overlay-content {
  position: absolute;
  inset: 0;
}

.entry-title {
  color: var(--primary-color);
}

.filter-grayscale img {
  filter: grayscale(100%);
  opacity: 15%;
}

/* Target reading time, date, and excerpt */
.reading-time,
.reading-time span,
.rt-reading-time,
.post-date,
.custom-border-blue {
  color: var(--primary-color) !important;
  border-color: var(--custom-blue) !important;
}

.post-thumbnail img {
  object-fit: cover;
  width: 1375px; /* Magic numbers when Jeff, Jonathan, and Monte were vibe coding */
  height: 250px;
}

.post-thumbnail-wrapper {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0.5rem;
  position: relative;
}

.post-thumbnail-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}