/*
Theme Name: Wandering Inn (Solstice Child)
Template: solstice
Author: The Image Shoppe
Author URI: https://theimageshoppe.com
Description: A theme designed for wanderinginn.com
Version: 2.4.6.1745270322
Updated: 2025-04-21 21:18:42

*/
/* Restore bullets inside main post/page content */
.entry-content ul,
.elementor-widget-theme-post-content ul,
.elementor-widget-container ul {
    list-style: disc !important;
    margin-left: 1.5em !important;
    padding-left: 1.5em !important;
}

/* Restore bullets for ordered lists too */
.entry-content ol,
.elementor-widget-theme-post-content ol,
.elementor-widget-container ol {
    list-style: decimal !important;
    margin-left: 1.5em !important;
    padding-left: 1.5em !important;
}

* {
  border-radius: 0 !important;
}
div.fadeMe {
  opacity:    0.5; 
  background: linear-gradient(
  to right, #0f1319 0%,rgba(141, 154, 173, 0) 47%,#0f1319 100%);
  width:      100%;
  height:     100%; 
  z-index:    -96;
  top:        0; 
  left:       0; 
  position:   fixed; 
}
/* Rotated side button */
.side-button {
  position: fixed;
  top: 450px;
  right: 36px;
  transform: rotate(-90deg);
  transform-origin: top right;
  z-index: 9999;
  transition: right 200ms ease; /* slide when hidden */
}

.side-button a {
  background-color: #F96854 !important;
  font-family: "Open Sans", Sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff !important;
  text-decoration: none !important;
}

/* Little flag (not rotated) */
.side-flag {
  position: fixed;
  top: 430px;
  right: -0px;
  z-index: 10000;
  border: 0;
  padding: 10px 15px 10px 21px !important;
  background: #F96854;
  color: #fff;
  font: 700 12px/1 "Open Sans", sans-serif;
  cursor: pointer;
  border-radius: 6px 0 0 6px; /* rounded left side */
  /* Make it vertical without rotating: */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  user-select: none;
  line-height: 0px;
}

/* Hidden state: slide the rotated button offscreen, keep flag visible */
.side-button.is-hidden {
  right: -160px; /* adjust based on your button width to fully tuck it away */
}

/* Optional: change flag label arrow depending on state via data-attr */
.side-flag::after {
  content: " ‹";
  font-weight: 900;
}
.side-flag[aria-expanded="false"]::after {
  content: " ›";
}

/* Small screens: nudge positions if needed */
@media (max-width: 768px) {
  .side-button { display: none!important; }
  .side-flag   { display: none!important; }
}


.btn-background{
  background-color: #0F1319 !important;
  position: fixed;
  top: 220px;
  right: 36px;
  transform: rotate(-90deg);
  transform-origin: top right;
  z-index: 9999; /* Keeps it on top */
  color: white !important;
  font-size: 12px;
  padding: 4px 6px !important;
  padding-left: 30px !important;
  background-image: url('/wp-content/uploads/2025/04/image-icon-small-1.svg');
  background-size: 20px;
  background-position: left 4px center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .btn-background{
	  top: 50%;
	}
}
.search-tool .swp-input{
	border-color: #344159;
    --border-color: #344159;
    --border-radius: 14px 14px 14px 14px;
    background-color: #181F28 !important;
    font-size: 20px;
    padding: 4px;
}
/* make sure the inner container is positioned relatively */
.new-container-inner {
  position: relative;
}

/* style & position the close button */
.new-container-inner .close-new-container {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  background-color:rgba(0,0,0,0.29);
  border-radius: 50%;
  padding:2px;
  padding-top:3px;
  width: 30px;
  height: 30px;
  text-align: center;
}
.settings-panel .compare-group{
	
	padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    min-width: 350px;
}
.settings-panel .compare-group label{
	font-size: 13px;
	display: inline-flex;
	justify-content: center;
    vertical-align: middle;
}
.settings-panel .buttons{
	gap:1rem;
}
.settings-panel .buttons:last-child {
    margin-bottom: 0rem;
}
.settings-panel .filter-group input {
    width: 100%;
     padding: .9rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: #fff;
    font-size: 1rem;
}
.settings-panel .label-group button {
    width: 100%;
    padding: 1.2rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    align-items: center;
    justify-content: center;
}
.settings-panel .label-group button i{
    margin-left:3px;
}


/* ===========================
   Gridized Elementor Header Nav (centered logo)
   Drop this AFTER Elementor/Theme CSS.
   =========================== */

/* Global defaults (override any of these in Theme Customizer or later in this file) */
:root{
  --logo-size-desktop: 112px;  /* max logo height on desktop */
  --logo-size-tablet:   88px;  /* max logo height <= 1024px */
  --logo-size-mobile:   64px;  /* max logo height <= 767px */
  --logo-size-sticky:   72px;  /* max logo height when header is sticky */
  --logo-span: 2;              /* how many grid columns the logo spans */
  --logo-start: 1;             /* start column (JS sets this automatically) */
  --nav-gap: clamp(10px, 2vw, 28px);
}

/* Make sure the header can grow with a tall logo */
.elementor-location-header .elementor-container,
.elementor-location-header .e-con{
  overflow: visible;
}

/* ============ MAIN MENU (NOT DROPDOWN) ============ */
/* Turn the top-level UL into a full-width grid */
nav.elementor-nav-menu--main ul.elementor-nav-menu.menu-gridized:not(.elementor-nav-menu--dropdown){
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--nav-gap);

  /* Provide fallbacks if JS hasn't set vars yet */
  --cols: 10;
  --logo-span: var(--logo-span);
  --logo-start: var(--logo-start);

  /* Ensure the row height fits the logo */
  min-height: var(--logo-size-desktop);
}

/* Center the injected logo where JS positions it */
nav.elementor-nav-menu--main ul.elementor-nav-menu.menu-gridized:not(.elementor-nav-menu--dropdown) > li.logo-insert{
  grid-column: var(--logo-start) / span var(--logo-span);
}

/* Logo link padding + prevent wrapping */
nav.elementor-nav-menu--main ul.elementor-nav-menu.menu-gridized:not(.elementor-nav-menu--dropdown) > li.logo-insert > a{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding-inline: 0px;
  padding-block: 6px;
  white-space: nowrap;
}

/* Keep the logo image proportional and scale it */
nav.elementor-nav-menu--main ul.elementor-nav-menu.menu-gridized:not(.elementor-nav-menu--dropdown) > li.logo-insert img{
  display: block;
  width: auto !important;
  height: auto !important;
  max-height: clamp(var(--logo-size-mobile), 8vw, var(--logo-size-desktop));
  object-fit: contain;
}

/* Sticky header shrink */
.elementor-sticky--effects nav.elementor-nav-menu--main ul.elementor-nav-menu.menu-gridized:not(.elementor-nav-menu--dropdown) > li.logo-insert img{
  max-height: var(--logo-size-sticky);
}

/* (Optional) give the logo a bit more room on big screens */
@media (min-width: 1200px){
  nav.elementor-nav-menu--main ul.elementor-nav-menu.menu-gridized:not(.elementor-nav-menu--dropdown){
    --logo-span: 3; /* bump from 2 to 3 if items feel crowded */
  }
}

/* Wrap long menu items (but NOT the logo) */
nav.elementor-nav-menu--main ul.elementor-nav-menu.menu-gridized:not(.elementor-nav-menu--dropdown) > li:not(.logo-insert) > a{
  white-space: normal !important;
  text-wrap: balance;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  padding-block: 10px; /* comfy click target */
}

/* (Optional) Make the very first item span extra columns to balance asymmetric menus
   Adjust --first-span as desired or remove this rule if not needed */
/*
nav.elementor-nav-menu--main ul.elementor-nav-menu.menu-gridized:not(.elementor-nav-menu--dropdown) > li.menu-item:first-child{
  grid-column: 1 / span var(--first-span, 2);
}
*/

/* ============ DROPDOWN (SUBNAV) GUARDS ============ */
/* Never gridize or show the injected logo in the dropdown */
ul.elementor-nav-menu--dropdown.menu-gridized{
  display: block !important; /* ensure normal vertical list if a class slips in */
}
ul.elementor-nav-menu--dropdown .logo-insert{
  display: none !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
  nav.elementor-nav-menu--main ul.elementor-nav-menu.menu-gridized:not(.elementor-nav-menu--dropdown) > li.logo-insert img{
    max-height: var(--logo-size-tablet);
  }
}

@media (max-width: 767px){
  nav.elementor-nav-menu--main ul.elementor-nav-menu.menu-gridized:not(.elementor-nav-menu--dropdown){
    gap: clamp(8px, 3vw, 16px);
  }
  nav.elementor-nav-menu--main ul.elementor-nav-menu.menu-gridized:not(.elementor-nav-menu--dropdown) > li.logo-insert img{
    max-height: var(--logo-size-mobile);
  }
  /* If you use Elementor's off-canvas mobile menu, you can hide the inline logo: */
  .elementor-nav-menu--dropdown .logo-insert{ display: none !important; }
}
/* Desktop: never let the logo get narrower than 260px */
@media (min-width: 1025px){
  nav.elementor-nav-menu--main > ul.elementor-nav-menu.menu-gridized > li.logo-insert img{
    width: clamp(260px, 18vw, 380px) !important; /* min 260px, grows with viewport, capped */
    height: auto !important;                     /* keep aspect ratio */
    max-height: none !important;                 /* remove earlier height caps */
  }
  /* Reserve space so neighbors don’t crowd the logo cell */
  nav.elementor-nav-menu--main > ul.elementor-nav-menu.menu-gridized > li.logo-insert{
    min-width: 260px;
  }
}

/* Tablet: set a smaller floor if you like */
@media (min-width: 768px) and (max-width: 1024px){
  nav.elementor-nav-menu--main > ul.elementor-nav-menu.menu-gridized > li.logo-insert img{
    width: clamp(210px, 22vw, 320px) !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Mobile: usually hide the injected logo inside the dropdown */
@media (max-width: 767px){
  .elementor-nav-menu--dropdown .logo-insert{ display:none; }
}

/* end nav adjustments */

.more-news-wrapper{
	
}

.chapter-label{
	font-family: "Merriweather", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    -webkit-text-stroke-color: #000;
    stroke: #000;
    color: #FFFFFF;
}

.eyebrow-chapter-label, .eyebrow-chapter-label .elementor-shortcode{
	font-family: "Merriweather", Sans-serif!important;
    font-size: 16px!important;
    font-weight: 600!important;
    line-height: 24px!important;
    color: #000!important;
}
.next-chapter-home{
	font-family: "Merriweather", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    -webkit-text-stroke-color: #000;
    stroke: #000;
    color: #FFFFFF;
    text-align: center;
}

#latestPatreon:hover,
#latestPublic:hover,
#latestRead:hover {
  text-decoration: none !important;
  color: inherit !important;
  background: inherit !important;
  box-shadow: none !important;
  transform: none !important;
}

#reader-toggle {
  display: block !important;
  visibility: visible !important;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: none;
  border: none;
  padding: 0;
  z-index: 9999;
}

#reader-toggle img {
  width: 120px;
  height: 100px;
  display: block;
}


/* cookie banner */
.cookie-banner {
  position: fixed !important;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff6e9;
  color: #111827; /* Tailwind's dark-900 */
  padding: 1.5em 2em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
  z-index: 99999;
  font-family: sans-serif;
  max-width: 1300px;
  width: 90%;
}

.cookie-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  color: #111827 !important;
}

.cookie-icon {
  font-size: 2em;
  margin-right: 1em;
}

.cookie-text {
  flex: 1;
  font-size: 1rem;
  color: #111827;
}
.cookie-content p{
  flex: 1;
  font-size: 1rem;
  color: #111827 !important;
  font-weight: 700;
}

.cookie-buttons {
  display: flex;
  gap: 0.75em;
  flex-wrap: wrap;
}

.cookie-buttons button,
.cookie-buttons .manage-link {
  padding: 0.6em 1.2em;
  font-size: 0.95rem;
  border: 1px solid #1f2937;
  background: #fff;
  color: #1f2937;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
}

.cookie-buttons .accept-btn {
  background: #1f2937;
  color: white;
}

.cookie-buttons .manage-link {
  border: none;
  background: transparent;
  color: #1f2937;
}

.image-gallery-carousel img {
  width: 100%;
  height: auto;
  display: block;
}

.image-gallery-carousel .gallery-caption {
  margin-top: 10px;
  font-size: 1rem;
}

.image-gallery-carousel {
  transition: height 0.3s ease-in-out;
}
@media only screen and (max-width: 767px) {
    .home-posts .elementor-post__thumbnail__link {
        float: none;
        margin: 0 0 10px 0; /* Adjust spacing as needed */
        display: block;
    }
    .home-posts .elementor-posts--skin-classic .elementor-post {
        overflow: hidden;
        display: block;
    }
    .elementor-18392 .elementor-element.elementor-element-c95cc91 form {
	    max-width: 100% !important;
	    margin-left: auto;
	}
}


/*//search///*/
.swp-input{
	color: white !important;
}
.searchwp-live-search-results {
    background: #181F28 !important;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 2px 0 rgba(30, 30, 30, .4);
    box-shadow: 0 0 2px 0 rgba(30, 30, 30, .4);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    max-height: 300px;
    min-height: 175px;
    min-width: 315px;
    width: 315px;
}
.swp-search-results{
	
}
.swp-search-results .entry-title{
	color: #F7A71B !important;
	font-size: 24px !important;
	font-weight: bold;
}
.swp-search-results .swp-result-item--desc{
	color: white !important;
	font-size: 18px !important;
}

.swp-result-item--button{
	background-color: #F7A71B !important;
	color: #0E1738 !important;
}
.searchwp-form-input-container .swp-input{
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none'%3E%3Cpath fill='%23CFCFCF' d='M6.068 12.136c1.31 0 2.533-.426 3.527-1.136l3.74 3.74c.174.173.402.26.64.26.512 0 .883-.395.883-.9a.87.87 0 0 0-.253-.63L10.89 9.744a6.04 6.04 0 0 0 1.247-3.677C12.136 2.73 9.406 0 6.068 0 2.722 0 0 2.73 0 6.068s2.722 6.068 6.068 6.068m0-1.31c-2.612 0-4.758-2.154-4.758-4.758S3.456 1.31 6.068 1.31c2.604 0 4.758 2.154 4.758 4.758s-2.154 4.758-4.758 4.758'/%3E%3C/svg%3E);
    background-position: right 12px top 50%;
    background-repeat: no-repeat;
    background-size: 15px auto;
    padding-left: .7em;
    padding-right: 38px;
    height: 32px;
    background-color: #1D2530;
    border: 1px solid #273041 !important;
    padding-left: 35px;
}

:root { --header-h: 0px; }

:root { --header-h: 0px; }

/* fixed header */
#hide-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transform: translateY(0);
  transition: transform 200ms ease;
  will-change: transform;
}

.site-content{
  transform: translateY(var(--header-h));
  opacity: 1;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease;
  will-change: transform, opacity;
}

/* push Elementor pages/posts down when header is visible */
:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"], [data-elementor-type="single-page"]){
  transform: translateY(var(--header-h));
  opacity: 1;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease;
  will-change: transform, opacity;
}

/* scrolling DOWN: hide header + pull content up */
body.header-hidden #hide-header{
  transform: translateY(calc(-1 * var(--header-h)));
}
body.header-hidden :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"], [data-elementor-type="single-page"]){
  transform: translateY(0);
}

/* optional: tiny fade when header reappears */
body:not(.header-hidden) :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"], [data-elementor-type="single-page"]){
  opacity: 0.98;
}

/* don't animate inside the Elementor editor */
.elementor-editor-active :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"], [data-elementor-type="single-page"]){
  transform: none !important;
  transition: none !important;
}

/* in-page anchor fix under fixed header */
:is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]) :is(h1,h2,h3,h4,h5,h6){
  scroll-margin-top: var(--header-h);
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  #hide-header,
  :is([data-elementor-type="wp-page"], [data-elementor-type="single-post"]){ transition: none !important; }
}

.discord-online{display:inline;align-items:center;gap:.35rem}
.discord-online .dot{width:.5rem;height:.5rem;border-radius:999px;display:inline}
.discord-online .count{font-weight:600}
.discord-online .label{color:#fff;display:inline}


.volume-books-wrapper { padding: 0.75rem 1rem 1rem; }
.volume-books { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start; }
.volume-book-card { display:flex; align-items:center; gap:0.75rem; text-decoration:none; }
.volume-book-card .book-cover { width:72px; height:auto; border-radius:0.5rem; display:block; }
.book-card-meta { display:flex; flex-direction:column; }
.book-card-number { font-weight:700; color:#f2b84b; /* your accent */ }
.book-card-title { color:#e6e6e6; }

@media (max-width: 640px){
  .volume-book-card .book-cover { width:56px; }
}




/* Make the whole filter row a flex row */
#mla-filter.mla-filter{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:20px;
}

/* MLA inserts width:100% on the UL; override it */
#mla-filter #mla_term_list-1{
  width:auto !important;          /* override MLA's 100% */
  margin:0 !important;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

/* List items inline, no bullets */
#mla-filter #mla_term_list-1 > li{
  list-style:none;
  margin:0;
  padding:0;
}

/* Pills: white by default */
#mla-filter .pill,
#mla-filter #mla_term_list-1 a{
  color:#fff;
  text-decoration:none;
  padding:.4rem .7rem;
  text-decoration: underline;
  border-radius:999px;
  line-height:1;
  display:inline-block;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
#mla-filter .pill:visited,
#mla-filter #mla_term_list-1 a:visited{ color:#fff; }

/* Hover + active = accent color */
#mla-filter .pill:hover,
#mla-filter .pill:focus-visible,
#mla-filter .pill.active,
#mla-filter #mla_term_list-1 a:hover,
#mla-filter #mla_term_list-1 a:focus-visible,
#mla-filter #mla_term_list-1 a.active{
  color:var(--accent-primary);
  border-color:var(--accent-primary);
}

/* Masonry widths (ID-scoped) */
#mla_gallery-1 { position: relative; }
#mla_gallery-1 .gallery-sizer,
#mla_gallery-1 .gallery-item { width: 30% !important; }   /* ~3 cols desktop */
@media (max-width:1024px){
  #mla_gallery-1 .gallery-sizer, #mla_gallery-1 .gallery-item { width: 46% !important; } /* 2 cols */
}
@media (max-width:640px){
  #mla_gallery-1 .gallery-sizer, #mla_gallery-1 .gallery-item { width: 100% !important; } /* 1 col */
}
#mla_gallery-1 .gallery-item{ float:none !important; margin-bottom:1rem; }
#mla_gallery-1 .gallery-icon img{ width:100%; height:auto; display:block; }
#mla_gallery-1 .cap{ padding:.5rem 0; }
#mla_gallery-1 .desc{ opacity:.9; line-height:1.4; }


/* books filter */

/* Pill buttons: white by default */
.e-filter .e-filter-item{
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:.4rem .7rem;
  line-height:1;
  display:inline-block;
  cursor:pointer;
  text-decoration:underline;
  appearance:none; -webkit-appearance:none;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.e-filter .e-filter-item:focus{ outline:none; }
.e-filter .e-filter-item:focus-visible{
  box-shadow:0 0 0 2px rgba(255,255,255,.25);
}

/* Hover + active state → accent */
.e-filter .e-filter-item:hover,
.e-filter .e-filter-item:focus-visible,
.e-filter .e-filter-item.active,
.e-filter .e-filter-item[aria-pressed="true"]{
  color:var(--accent-primary);
  border-color:var(--accent-primary);
}