/*
Theme Name: FansPaysite
Theme URI: https://fanspaysite.com/theme
Author: videowhisper
Author URI: https://videowhisper.com
Contributors: videowhisper
Description: FansPaysite is a theme designed for digital content creators. Features: vertical hierarchical menus with configurable icons, dark/light mode with skin presets and a palette manager, three archive display modes (Classic card listings, Fullpage snap-scroll social-media style, Grid boxes with avatars), responsive mobile-first layout, accessible footer menu support, block editor support with theme.json and patterns, post format templates (aside, quote, video, image, link, gallery, audio), WooCommerce and BuddyPress integration, RTL language support, accessibility-ready with keyboard navigation and focus management, Elementor-compatible page templates, skin management system.
Version: 2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fanspaysite
Tags: accessibility-ready, blog, e-commerce, entertainment, one-column, two-columns, three-columns, left-sidebar, right-sidebar, wide-blocks, block-patterns, block-styles, buddypress, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Requires PHP: 7.4
Requires at least: 5.1
Tested up to: 6.8

FansPaysite WordPress Theme, Copyright 2024 VideoWhisper.com .
FansPaysite is distributed under the terms of the GNU GPL.

*/

/* ==============================================
   Table of Contents
   ===============================================
   1. Design Tokens (CSS Variables)
   2. Reset & Base Styles
   3. Layout System
   4. Header & Logo
   5. Sidebar Widgets
   6. Theme Modes (Light/Dark)
   7. Post Listing & Sticky
   8. Links & Typography
   9. Blocks & Alignments
   10. Accessibility
   11. Main Menu Display Modes
   12. Secondary Menus (Submenus)
   13. Top Bar Layout
   14. Burger Menu Controls
   15. Submenu Burger Display Mode
   16. Page Templates & Elementor
   17. Touch Targets
   18. Footer
   =============================================== */

/* ==============================================
   1. Design Tokens (CSS Variables)
   ============================================== */

:root {
  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Sizing */
  --sidebar-width: 200px;
  --sidebar-narrow: 90px;
  --sidebar-right-width: 200px;
  --topbar-height: 50px;
  --touch-target-min: 44px;
  --content-max-width: 1200px;

  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-lg: 18px;
  --line-height-base: 1.6;
}

/* ==============================================
   2. Reset & Base Styles
   ============================================== */

/* Media overflow prevention */
img, video, embed, object, iframe {
  max-width: 100%;
  height: auto;
}

/* ==============================================
   3. Layout System
   ============================================== */
/* Reset default margins and paddings */

body, html {
  margin: 0;
  padding: 0;
  color: var(--text-color, #000);
  background-color: var(
    --background-color,
    #ffffff)
}

.site-wrapper {
  display: flex;
  flex-direction: row; /* Keeps the layout horizontal */
  min-height: 100vh; /* Fills viewport; sticky mode adds height:100vh via customizer CSS */
  color: var(--text-color, #000);
  background-color: var(
    --background-color,
    #ffffff)
}

.site-sidebar {
  /* Site sidebar contains menu and site-sidebar-left */
  overflow-y: auto; /* Allows scrolling within the sidebar if content overflows */  
  display: flex; /* Establishes a flex container */
  flex-direction: column; /* Stacks flex items vertically */
  align-items: center; /* Centers flex items horizontally in the container */
  min-width: 200px; /* Minimum width for the sidebar */
  width: 5%;
}

.site-content {
  flex-grow: 1; /* Allows content area to grow and fill available space */
  overflow-y: auto; /* Enables vertical scrolling for site-content */
  background: no-repeat center center;
  background-size: cover; /* Ensure the background covers the entire content area */
  padding: 8px;
  margin-bottom: 0;
  padding-bottom: var(--space-md);
}

.site-sidebar-left {
  padding: 8px; /* Padding around the content inside the sidebar */
  width: 200px; /* Example fixed width for sidebars */
}


.site-sidebar-right {
  display: none; /* Hide the sidebar on small screens */
  width: 200px;
  min-width: 200px; /* Minimum width for the sidebar */
  padding: 8px; /* Padding around the content inside the sidebar */
  overflow-y: auto; /* Makes the sidebar scrollable vertically if content overflows */
}

@media (min-width: 1000px) {
  .site-sidebar-right {
    display: block; /* Show the sidebar on screens wider than 992px */
    flex: 1; /* Allows the sidebar to grow and fill available space */
    order: 3; /* Position the sidebar to the right of the content if using flexbox layout */
  }
}

.site-footer {
   /* Footer styles */
   width: 100%; /* Ensures footer spans the entire width of the viewport */
   padding: 10px;
   text-align: center; /* Center the text in the footer */
  }

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer.has-footer-menu .site-footer-inner {
  justify-content: space-between;
}

.site-info {
  text-align: center;
}

.site-footer.has-footer-menu .site-info {
  text-align: left;
}

.fanspaysite-back-to-top {
  position: fixed;
  right: max(18px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(127, 127, 127, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-color, #222);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  z-index: 1200;
}

.fanspaysite-back-to-top i,
.fanspaysite-back-to-top .icon,
.fanspaysite-back-to-top .fas {
  color: inherit;
}

.fanspaysite-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.fanspaysite-back-to-top:hover,
.fanspaysite-back-to-top:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(127, 127, 127, 0.48);
}

body[data-theme="light"] .fanspaysite-back-to-top,
html[data-theme="light"] .fanspaysite-back-to-top {
  background: rgba(255, 255, 255, 0.7);
  color: rgba(0, 0, 0, 0.78);
  border-color: rgba(34, 36, 38, 0.18);
}

body[data-theme="dark"] .fanspaysite-back-to-top,
html[data-theme="dark"] .fanspaysite-back-to-top {
  background: rgba(18, 18, 24, 0.38);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

body.archive-display-fullpage .fanspaysite-back-to-top {
  display: none !important;
}

.footer-navigation {
  margin-left: auto;
}

.footer-navigation .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-navigation .menu-item {
  margin: 0;
}

.footer-navigation a {
  font-size: 0.85rem;
  text-decoration: none;
}

@media (max-width: 768px) {
  .site-footer.has-footer-menu .site-footer-inner {
    justify-content: center;
  }

  .footer-navigation {
    margin-left: 0;
    width: 100%;
  }

  .footer-navigation .menu {
    justify-content: center;
  }

  .site-info {
    text-align: center;
  }

  /* Use page scrolling on small screens so the footer is always reachable. */
  .site-wrapper,
  .site-content-wrapper {
    min-height: 0;
  }

  .site-content-wrapper {
    display: block;
    overflow: visible;
  }

  .site-content,
  .layout-top-bar .site-content {
    overflow: visible;
    height: auto;
    max-height: none;
    -webkit-overflow-scrolling: auto;
  }

  .site-footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .fanspaysite-back-to-top {
    right: max(14px, calc(env(safe-area-inset-right, 0px) + 10px));
    bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  }
}

  /* Left sidebar adjustments for narrow screens */
@media (max-width: 768px) {
  /* Make sidebar narrower */
  .site-sidebar {
    min-width: 70px; /* Adjust the sidebar's width */
  }

  /* Make logo smaller */ 
  .custom-logo-link img {
    max-width: 65px; /* Adjust the logo's height */
    padding: 4px;
    padding-top: 20px;
  }

  /*Hide menu text */
  .menu-item-title {
    display: none;
  }

  .site-sidebar-left {
    display: none; /* Hide the left sidebar on small screens */
  }

}

/* Fix for the Semantic UI dropdown menu levels, to fit on left sidebar */
.ui.dropdown.fpsDropdown .menu {
  left: 4px !important;
  right: 100% !important; /* This makes the menu open to the left */
  top: 0 !important; /* Aligns the menu at the top of the dropdown */
  position: absolute;
}

.ui.menu .item a {
  color: var(--text-color, #333);
}


#fanspaysiteMode {
  position: relative;
  display: inline-flex;
  padding: 2px;
}

body[data-theme="light"] #fanspaysiteMode {
  --fps-mode-button-color: rgba(0, 0, 0, 0.75);
  --fps-mode-button-bg: #f2f3f5;
  --fps-mode-button-border: rgba(34, 36, 38, 0.18);
}

body[data-theme="dark"] #fanspaysiteMode {
  --fps-mode-button-color: rgba(255, 255, 255, 0.92);
  --fps-mode-button-bg: rgba(255, 255, 255, 0.08);
  --fps-mode-button-border: rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] #fanspaysiteMode .fpsModeCurrent,
html[data-theme="light"] #fanspaysiteMode .fps-mode-options .ui.button,
body[data-theme="light"] #fanspaysiteMode .fpsModeCurrent,
body[data-theme="light"] #fanspaysiteMode .fps-mode-options .ui.button {
  color: rgba(0, 0, 0, 0.75) !important;
  background-color: #f2f3f5 !important;
  border-color: rgba(34, 36, 38, 0.18) !important;
}

html[data-theme="dark"] #fanspaysiteMode .fpsModeCurrent,
html[data-theme="dark"] #fanspaysiteMode .fps-mode-options .ui.button,
body[data-theme="dark"] #fanspaysiteMode .fpsModeCurrent,
body[data-theme="dark"] #fanspaysiteMode .fps-mode-options .ui.button {
  color: rgba(255, 255, 255, 0.92) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

#fanspaysiteMode .fpsModeCurrent,
#fanspaysiteMode .fps-mode-options .ui.button {
  min-height: 30px;
  min-width: 30px;
  padding: 0.45em 0.65em !important;
  font-size: 0.82rem;
  color: var(--fps-mode-button-color, rgba(0, 0, 0, 0.75)) !important;
  background: var(--fps-mode-button-bg, #f2f3f5) !important;
  border: 1px solid var(--fps-mode-button-border, rgba(34, 36, 38, 0.18)) !important;
  box-shadow: none !important;
}

#fanspaysiteMode .fpsModeCurrent i.icon,
#fanspaysiteMode .fpsModeCurrent > .fas,
#fanspaysiteMode .fpsModeCurrent > .far,
#fanspaysiteMode .fpsModeCurrent > .fab,
#fanspaysiteMode .fps-mode-options .ui.button i.icon,
#fanspaysiteMode .fps-mode-options .ui.button > .fas,
#fanspaysiteMode .fps-mode-options .ui.button > .far,
#fanspaysiteMode .fps-mode-options .ui.button > .fab {
  font-size: 0.95em;
  color: inherit !important;
  opacity: 1;
}

#fanspaysiteMode .fps-mode-options {
  position: absolute;
  top: 0;
  left: calc(100% + 2px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background-color: var(--background-color, #ffffff);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 30;
}

#fanspaysiteMode:hover .fps-mode-options,
#fanspaysiteMode:focus-within .fps-mode-options,
#fanspaysiteMode.is-open .fps-mode-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

#fanspaysiteMode.is-click-closed .fps-mode-options {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-4px);
}

#fanspaysiteMode .fpsMode.is-current {
  display: none;
}

/* Big icon mode: stack mode buttons vertically in narrow sidebar */
.menu-display-big_icon #fanspaysiteMode.ui.buttons {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.menu-display-big_icon #fanspaysiteMode .ui.button {
  margin: 2px 0 !important;
  border-radius: 4px !important;
}

/*Title & Logo*/

.site-title {
  font-size: clamp(
    5px,
    1vw,
    32px
  ); /* centered */
  padding: 4px;
  font: sans-serif;
  text-align: center;
}

.site-title a {
  color: var(--text-color, #000);
  text-decoration: none;
}

.site-tagline
{
  font-size: clamp(
    5px,
    0.9vw,
    24px
  );
  color: var(--text-color, #000);
  text-align: center;
}

.custom-logo-link img {
  /* Logo shows inside side-sidebar, centered */
  padding: 4px;
  max-height: 128px; /* Adjust the logo's height */
  max-width: 128px; /* Adjust the logo's height */
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Dark mode logo switching ---- */
/* Dark logo hidden by default; light logo always visible unless a dark logo is provided */
.fps-logo-dark { display: none; }
[data-theme="dark"] .fps-has-dark-logo .fps-logo-light { display: none; }
[data-theme="dark"] .fps-has-dark-logo .fps-logo-dark  { display: block; }

/* ---- Contrast logo ---- */
/* Thin drop-shadow around transparent logos for visibility on any background */
.fps-contrast-logo .fps-logo-wrap .custom-logo {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
}
[data-theme="dark"] .fps-contrast-logo .fps-logo-wrap .custom-logo {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.75));
}

.site-header,
.site-footer {
  color: var(--text-color, #000);
  background-color: var(
    --background-color,
    #ffffff
  ); /* Fallback for light mode */
}



/*  Sidebar Widget Styling */
 .widget {
  display: block; /* Stacks widgets vertically */
  font-size: 10px; /* Size of the widget content */
  margin-bottom: 8px; /* Space between widgets */
}

.widget .wp-block-heading {
  display: block;
  font-size: 12px; /* Size of the widget title */
  margin-bottom: 8px; /* Space below the widget title */
}

/* Targeting ul within widget_block class specifically */
.widget_block ul, .wp-block-archives-list {
  display: block; /* Stacks lists vertically */
  list-style-type: none; /* Removes bullets from lists */
  padding-left: 0; /* Removes indentation/padding from lists */
  margin-left: 0; /* Ensures lists start from the very edge */
}

/* Targeting li within wp-block-archives-list specifically */
.wp-block-archives-list li {
  padding-left: 0; /* Removes indentation/padding from list items */
}

/* Ensure sections within sidebar widgets are displayed as blocks and not inline */
 section{
  display: block; /* This will stack sections vertically */
  padding-bottom: 8px; /* Space below each section */
}

/* Target the widget area and remove padding from the list */
.widget_recent_comments .wp-block-latest-comments {
  padding-left: 0; /* Removes indentation for the list */
}

.ui.comments .comment-list {
  list-style: none; /* Removes bullets */
}

/* Themes */

/* Default styles (can be considered light theme) */
:root {
  --text-color: #333;
  --background-color: #fff;

  --menu-text-color: #333; /* Light text color for dark mode */
  --menu-background-color: #fff; /* Dark background color for dark mode */

  --link-color: #77145d; /* Adjust the color to fit your theme */
}

/* Light theme styles */
[data-theme="light"] {
  --background-color: #fff;
  --text-color: #333;

  --link-color: #77145d; /* Adjust the color to fit your theme */
}

/* Dark theme styles */
[data-theme="dark"] {
  --text-color: #ffffff;
  --background-color: #333333;

  --link-color: #d39ed8; /* Adjust the color to fit your theme */
}

/* Palette bridge for authored Fomantic inverted content.
   Use the theme dark palette instead of Fomantic's default black/blue values. */
.ui.inverted.segment,
.ui.inverted.segments .segment,
.ui.inverted.attached.segment,
.ui.inverted.raised.segment,
.ui.inverted.piled.segment,
.ui.inverted.vertical.segment {
  background-color: var(--fanspaysite-dark-background-color, #18122b) !important;
  color: var(--fanspaysite-dark-text-color, #ffffff) !important;
}

.ui.inverted.segment,
.ui.inverted.segment p,
.ui.inverted.segment .ui.header,
.ui.inverted.segment .ui.header .sub.header,
.ui.inverted.header,
.ui.inverted.basic.button,
.ui.inverted.basic.buttons .button,
.ui.inverted.basic.button:hover,
.ui.inverted.basic.buttons .button:hover {
  color: var(--fanspaysite-dark-text-color, #ffffff) !important;
}

.ui.inverted.segment .ui.header .sub.header,
.ui.inverted.header .sub.header {
  opacity: 0.82;
}

.ui.inverted.segment a:not(.ui.button),
.ui.inverted.segment a:not(.ui.button):visited,
.ui.inverted.header a,
.ui.inverted.header a:visited {
  color: var(--fanspaysite-dark-link-color, #d39ed8) !important;
}

.ui.inverted.segment a.ui.primary.button,
.ui.inverted.segment .ui.primary.button,
.ui.inverted.segment .ui.primary.buttons .button,
.ui.primary.inverted.button,
.ui.inverted.primary.button {
  background: var(--fanspaysite-dark-link-color, #d39ed8) !important;
  background-color: var(--fanspaysite-dark-link-color, #d39ed8) !important;
  background-image: none !important;
  border-color: var(--fanspaysite-dark-link-color, #d39ed8) !important;
  box-shadow: none !important;
  color: var(--fanspaysite-dark-background-color, #18122b) !important;
}

.ui.inverted.segment a.ui.primary.button:hover,
.ui.inverted.segment .ui.primary.button:hover,
.ui.inverted.segment .ui.primary.buttons .button:hover,
.ui.primary.inverted.button:hover,
.ui.inverted.primary.button:hover {
  filter: brightness(1.06);
}

.ui.inverted.segment a.ui.basic.button,
.ui.inverted.segment .ui.basic.button,
.ui.inverted.segment .ui.basic.buttons .button,
.ui.inverted.basic.button,
.ui.inverted.basic.buttons .button {
  border-color: var(--fanspaysite-dark-text-color, #ffffff) !important;
  box-shadow: 0 0 0 1px var(--fanspaysite-dark-text-color, #ffffff) inset !important;
}


/* Listing Styling */
.row.mb-3:not(:last-child) {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  margin-bottom: 20px;
}


.col-9 p {
  margin-bottom: 0.5rem;
}

.badge.bg-secondary {
  margin-right: 5px; /* Space between tags */
}

/* Sticky Post */
.sticky {
  background-color: var(--background-color, #f0f0f0);
  color: var(--text-color, #000);
  border-left: 2px solid #553344; /* Blue border on the left */
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 4px;
}

.sticky h2 {
  color: #003366; /* Blue text for titles */
}

/* Link styles */
a,
a:visited,
h2 a,
h2 a:visited
{
  color: var(--link-color, #173e2a); /* Use the link color defined in the Customizer */
}

a:hover,
a:focus {
  opacity: 0.8; /* Slightly reduce the opacity on hover/focus */
}


/* Ensure all links within block-level content are underlined */
.post-content a,
.entry-content a,
.entry-summary a,
.comment-content a,
.widget_text a,
.widget a,
.text a,
.custom-content a {
    text-decoration: underline;
    color: var(--link-color);
}



/* Blocks */
.mode-text-block {
  background-color: var(--background-color);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
}

/* Handle wide and full alignments */
.alignwide {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px; /* Adjust as needed */
}

.alignfull {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Make embeds responsive */
.wp-embed-responsive iframe,
.wp-embed-responsive video,
.wp-embed-responsive embed,
.wp-embed-responsive object {
  /*  position: absolute;*/ 
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
}

.wp-embed-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

/* Make all video embeds in entry content responsive */
.entry-content > p > iframe,
.entry-content > iframe,
.entry-content > p > video,
.entry-content > video,
.entry-content > p > embed,
.entry-content > embed {
  display: block;
  width: 100% !important;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  height: auto;
  border: none;
}

/* Force aspect ratio calculation for iframes specifically */
.entry-content > p > iframe,
.entry-content > iframe {
  height: unset !important;
}

/* Fallback for older browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
  .entry-content > p > iframe,
  .entry-content > iframe {
    height: calc(100vw * 0.5625) !important;
    max-height: 600px;
  }
  @media (min-width: 768px) {
    .entry-content > p > iframe,
    .entry-content > iframe {
      height: calc(768px * 0.5625) !important;
    }
  }
}


/* Ensure nav-links flex container is properly styled for inline display */
.nav-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: var(--space-md);
}

.nav-links .nav-previous {
  order: 2;
}

.nav-links .nav-next {
  order: 1;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--link-color);
  color: #fff !important;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s;
  font-weight: 500;
}

.nav-links a:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.nav-links .nav-previous a::after {
  content: " →";
  color: #fff;
  margin-left: var(--space-xs);
}

.nav-links .nav-next a::before {
  content: "← ";
  color: #fff;
  margin-right: var(--space-xs);
}

/* Caption styles */
.wp-caption {
  padding: 4px;
  margin-bottom: 20px;
  background-color: var(--background-color);
  max-width: 100%;
  text-align: center;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Full-width images on single post pages */
.fps-single .entry-content .wp-caption,
.fps-single .entry-content figure {
  width: 100% !important;
}

.fps-single .entry-content .wp-caption a,
.fps-single .entry-content figure a {
  display: block;
}

.fps-single .entry-content .wp-caption img,
.fps-single .entry-content figure img {
  width: 100%;
  height: auto;
  display: block;
}

.wp-caption-text,
.gallery-caption {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color);
  margin: 0;
}

/* Gutenberg block gallery */
.wp-block-gallery .blocks-gallery-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wp-block-gallery .blocks-gallery-item {
  margin: 0;
  flex-grow: 1;
  overflow: hidden;
}

.wp-block-gallery .blocks-gallery-item figure {
  height: 100%;
  margin: 0;
}

.wp-block-gallery .blocks-gallery-item a {
  display: block;
  height: 100%;
}

.wp-block-gallery .blocks-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wp-block-gallery.is-cropped .blocks-gallery-item img {
  object-fit: cover;
}

/* Column widths */
.wp-block-gallery.columns-1 .blocks-gallery-item  { flex-basis: 100%; max-width: 100%; }
.wp-block-gallery.columns-2 .blocks-gallery-item  { flex-basis: calc(50% - 4px);    max-width: calc(50% - 4px); }
.wp-block-gallery.columns-3 .blocks-gallery-item  { flex-basis: calc(33.33% - 6px); max-width: calc(33.33% - 6px); }
.wp-block-gallery.columns-4 .blocks-gallery-item  { flex-basis: calc(25% - 6px);    max-width: calc(25% - 6px); }
.wp-block-gallery.columns-5 .blocks-gallery-item  { flex-basis: calc(20% - 7px);    max-width: calc(20% - 7px); }
.wp-block-gallery.columns-6 .blocks-gallery-item  { flex-basis: calc(16.66% - 7px); max-width: calc(16.66% - 7px); }
.wp-block-gallery.columns-7 .blocks-gallery-item  { flex-basis: calc(14.28% - 7px); max-width: calc(14.28% - 7px); }
.wp-block-gallery.columns-8 .blocks-gallery-item  { flex-basis: calc(12.5% - 7px);  max-width: calc(12.5% - 7px); }

/* Collapse to 2 columns on narrow screens */
@media (max-width: 600px) {
  .wp-block-gallery[class*="columns-"] .blocks-gallery-item {
    flex-basis: calc(50% - 4px);
    max-width: calc(50% - 4px);
  }
  .wp-block-gallery.columns-1 .blocks-gallery-item {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Gallery caption below grid */
.wp-block-gallery .blocks-gallery-caption {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: var(--text-color);
  margin-top: 4px;
}

.wp-block-gallery.blocks-gallery-item__caption {
  font-size: 12px;
  text-align: center;
  padding: 4px;
}

/* alignfull: reset the viewport-width breakout — use container width instead
   to avoid offset issues when content is not horizontally centered (sidebar layouts) */
.entry-content .alignfull {
  width: 100%;
  left: auto;
  right: auto;
  margin-left: 0;
  margin-right: 0;
}

/* Styles to highlight comments by the post author */
.bypostauthor {
  background-color: var(--background-color);
  border-left: 4px solid;
  padding-left: 16px;
}

/* Alignment classes */
.alignright {
  float: right;
  margin: 0 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 0 20px 20px 0;
}

.aligncenter {
  display: block;
  margin: 0 auto 20px auto;
}

/* Clearfix for floated elements */
.alignright:after,
.alignleft:after,
.aligncenter:after {
  content: "";
  display: table;
  clear: both;
}


/* Accessibility */
/* Text meant only for screen readers. */

.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 !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  right: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/* Visible focus outlines for keyboard navigation (accessibility-ready) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* =============================================
   Main Menu Display Modes
   ============================================= */

/* Big icon mode - main menu: icon only, no text */
.menu-display-big_icon .site-sidebar .main-navigation > div > .item > .menu-item-icon,
.menu-display-big_icon .site-sidebar .main-navigation > div > .fpsDropdown > a > .menu-item-icon {
  font-size: 20px !important;
  display: block !important;
  text-align: center;
  padding: 4px 0;
}
.menu-display-big_icon .site-sidebar .main-navigation > div > .item > .menu-item-title,
.menu-display-big_icon .site-sidebar .main-navigation > div > .fpsDropdown > a > .menu-item-title {
  display: none !important;
}
.menu-display-big_icon .site-sidebar {
  min-width: 90px;
  max-width: 110px;
  width: auto;
  overflow-y: auto;
  overflow-x: hidden;
}
.menu-display-big_icon .site-sidebar-left {
  display: none;
}
.menu-display-big_icon .site-title,
.menu-display-big_icon .site-tagline {
  display: none;
}
/* Big icon mode: constrain logo to match Top Bar logo size */
.menu-display-big_icon .site-sidebar .custom-logo-link img {
  max-height: 40px;
  max-width: 40px;
}
.menu-display-big_icon .site-sidebar .main-navigation > div > .fpsDropdown > a > .dropdown.icon {
  display: none !important;
}
/* Big icon mode: remove Fomantic UI borders between menu items */
.menu-display-big_icon .site-sidebar .main-navigation > div.ui.menu {
  border: none !important;
  box-shadow: none !important;
}
.menu-display-big_icon .site-sidebar .main-navigation > div.ui.menu > .item,
.menu-display-big_icon .site-sidebar .main-navigation > div.ui.menu > .fpsDropdown {
  border: none !important;
}
.menu-display-big_icon .site-sidebar .main-navigation > div.ui.menu > .item:before,
.menu-display-big_icon .site-sidebar .main-navigation > div.ui.menu > .fpsDropdown:before {
  display: none !important;
}
/* Big icon mode: submenus open to the right, over the content.
   Sidebar temporarily switches to overflow:visible via JS when a submenu opens. */
.menu-display-big_icon .ui.dropdown.fpsDropdown .menu {
  left: 100% !important;
  right: auto !important;
  top: 0 !important;
  z-index: 10000;
  max-height: 80vh;
  overflow-y: auto;
}

/* Auto mode - big icons on narrow screens OR touch devices (JS adds .menu-display-touch) */
@media (max-width: 768px) {
  .menu-display-auto .site-sidebar .main-navigation > div > .item > .menu-item-icon,
  .menu-display-auto .site-sidebar .main-navigation > div > .fpsDropdown > a > .menu-item-icon {
    font-size: 20px;
    display: block;
    text-align: center;
    padding: 4px 0;
  }
  .menu-display-auto .site-sidebar .main-navigation > div > .item > .menu-item-title,
  .menu-display-auto .site-sidebar .main-navigation > div > .fpsDropdown > a > .menu-item-title {
    display: none;
  }
  .menu-display-auto .site-sidebar {
    min-width: 90px;
    max-width: 110px;
    width: auto;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .menu-display-auto .site-sidebar-left {
    display: none;
  }
  .menu-display-auto .site-sidebar .custom-logo-link img {
    max-height: 40px;
    max-width: 40px;
  }
  .menu-display-auto .site-sidebar .main-navigation > div > .fpsDropdown > a > .dropdown.icon {
    display: none;
  }
  .menu-display-auto .ui.dropdown.fpsDropdown .menu {
    left: 100% !important;
    right: auto !important;
    top: 0 !important;
    z-index: 10000;
    max-height: 80vh;
    overflow-y: auto;
  }
  .menu-display-auto #fanspaysiteMode.ui.buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .menu-display-auto #fanspaysiteMode .ui.button {
    margin: 2px 0 !important;
    border-radius: 4px !important;
  }
}

/* Touch device big icons (added by JS for Auto mode) */
.menu-display-touch .site-sidebar .main-navigation > div > .item > .menu-item-icon,
.menu-display-touch .site-sidebar .main-navigation > div > .fpsDropdown > a > .menu-item-icon {
  font-size: 20px;
  display: block;
  text-align: center;
  padding: 4px 0;
}
.menu-display-touch .site-sidebar .main-navigation > div > .item > .menu-item-title,
.menu-display-touch .site-sidebar .main-navigation > div > .fpsDropdown > a > .menu-item-title {
  display: none;
}
.menu-display-touch .site-sidebar {
  min-width: 90px;
  max-width: 110px;
  width: auto;
  overflow-y: auto;
  overflow-x: hidden;
}
.menu-display-touch .site-sidebar-left {
  display: none;
}
.menu-display-touch .site-sidebar .custom-logo-link img {
  max-height: 40px;
  max-width: 40px;
}
.menu-display-touch .site-sidebar .main-navigation > div > .fpsDropdown > a > .dropdown.icon {
  display: none;
}
.menu-display-touch #fanspaysiteMode.ui.buttons {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.menu-display-touch #fanspaysiteMode .ui.button {
  margin: 2px 0 !important;
  border-radius: 4px !important;
}
.menu-display-touch .ui.dropdown.fpsDropdown .menu {
  left: 100% !important;
  right: auto !important;
  top: 0 !important;
  z-index: 10000;
  max-height: 80vh;
  overflow-y: auto;
}

/* Small icon + text mode: remove Fomantic UI borders between left sidebar menu items */
.menu-display-small_icon_text .site-sidebar .main-navigation > div.ui.menu {
  border: none !important;
  box-shadow: none !important;
}
.menu-display-small_icon_text .site-sidebar .main-navigation > div.ui.menu > .item,
.menu-display-small_icon_text .site-sidebar .main-navigation > div.ui.menu > .fpsDropdown {
  border: none !important;
}
.menu-display-small_icon_text .site-sidebar .main-navigation > div.ui.menu > .item:before,
.menu-display-small_icon_text .site-sidebar .main-navigation > div.ui.menu > .fpsDropdown:before {
  display: none !important;
}

/* Auto mode (wide screens, icons + text): remove borders in left sidebar too */
@media (min-width: 769px) {
  .menu-display-auto .site-sidebar .main-navigation > div.ui.menu {
    border: none !important;
    box-shadow: none !important;
  }
  .menu-display-auto .site-sidebar .main-navigation > div.ui.menu > .item,
  .menu-display-auto .site-sidebar .main-navigation > div.ui.menu > .fpsDropdown {
    border: none !important;
  }
  .menu-display-auto .site-sidebar .main-navigation > div.ui.menu > .item:before,
  .menu-display-auto .site-sidebar .main-navigation > div.ui.menu > .fpsDropdown:before {
    display: none !important;
  }
}

/* Auto Hide mode: hide sidebar nav when burger button is active */
/* burger-menu-yes + auto_hide: always collapse sidebar to burger-only */
.menu-display-auto_hide.burger-menu-yes .sidebar-menu-panel:not(.fps-open) {
  display: none;
}
.menu-display-auto_hide.burger-menu-yes .site-title,
.menu-display-auto_hide.burger-menu-yes .site-tagline,
.menu-display-auto_hide.burger-menu-yes .site-sidebar-left {
  display: none;
}
.menu-display-auto_hide.burger-menu-yes .site-sidebar {
  min-width: 60px;
  max-width: 80px;
  width: auto;
  overflow: visible;
}

/* burger-menu-auto + auto_hide: collapse on narrow screens */
@media (max-width: 768px) {
  .menu-display-auto_hide.burger-menu-auto .sidebar-menu-panel:not(.fps-open) {
    display: none;
  }
  .menu-display-auto_hide.burger-menu-auto .site-title,
  .menu-display-auto_hide.burger-menu-auto .site-tagline,
  .menu-display-auto_hide.burger-menu-auto .site-sidebar-left {
    display: none;
  }
  .menu-display-auto_hide.burger-menu-auto .site-sidebar {
    min-width: 60px;
    max-width: 80px;
    width: auto;
    overflow: visible;
  }
}

/* touch + auto + auto_hide: collapse on touch devices */
.menu-display-auto_hide.burger-menu-auto.fps-burger-touch .sidebar-menu-panel:not(.fps-open) {
  display: none;
}
.menu-display-auto_hide.burger-menu-auto.fps-burger-touch .site-title,
.menu-display-auto_hide.burger-menu-auto.fps-burger-touch .site-tagline,
.menu-display-auto_hide.burger-menu-auto.fps-burger-touch .site-sidebar-left {
  display: none;
}
.menu-display-auto_hide.burger-menu-auto.fps-burger-touch .site-sidebar {
  min-width: 60px;
  max-width: 80px;
  overflow: visible;
}

/* =============================================
   Secondary Menus (Submenus) Display Modes
   ============================================= */

/* Secondary menus: always show text (icons & text) in submenus, regardless of main menu mode */
.fps-submenu .menu-item-title {
  display: inline !important;
}
.fps-submenu .menu-item-icon {
  font-size: 14px !important;
  display: inline !important;
}

/* Secondary big icon mode: submenus show only icons */
.submenu-display-big_icon .fps-submenu .menu-item-title {
  display: none !important;
}
.submenu-display-big_icon .fps-submenu .menu-item-icon {
  font-size: 20px !important;
  display: block !important;
  text-align: center;
}

/* Secondary auto mode: icons & text by default, burger-style on narrow/touch */
@media (max-width: 768px) {
  .submenu-display-auto .fps-submenu {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background-color, #fff);
    z-index: 10000;
    overflow-y: auto;
    padding: 16px;
    border-radius: 0;
  }
}

/* Parent link injected by JS when hover is off */
.fps-parent-link {
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

/* =============================================
   Top Bar Layout (Fansly-style)
   ============================================= */

/* Switch wrapper to column direction */
.layout-top-bar .site-wrapper {
  flex-direction: column;
}

/* Hide left sidebar in top-bar layout */
.layout-top-bar .site-sidebar {
  display: none;
}

/* Top Bar layout: mode switcher stays horizontal (overrides narrow-sidebar vertical rules) */
.layout-top-bar #fanspaysiteMode.ui.buttons {
  display: inline-flex;
  flex-direction: row;
  width: auto;
}
.layout-top-bar #fanspaysiteMode {
  display: inline-flex;
}

.layout-top-bar #fanspaysiteMode .fpsModeCurrent,
.layout-top-bar #fanspaysiteMode .fps-mode-options .ui.button {
  margin: 0 !important;
  min-height: 28px;
  min-width: 28px;
  padding: 0.4em 0.6em !important;
}

.layout-top-bar #fanspaysiteMode .fps-mode-options {
  top: calc(100% + 2px);
  left: auto;
  right: 0;
  transform: translateY(-4px);
}

.layout-top-bar #fanspaysiteMode:hover .fps-mode-options,
.layout-top-bar #fanspaysiteMode:focus-within .fps-mode-options,
.layout-top-bar #fanspaysiteMode.is-open .fps-mode-options {
  transform: translateY(0);
}

.layout-top-bar #fanspaysiteMode.is-click-closed .fps-mode-options {
  transform: translateY(-4px);
}

/* Top bar */
.site-topbar {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--background-color, #1a1a2e);
  color: var(--text-color, #e0e0e0);
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  gap: 12px;
  min-height: 50px;
  flex-shrink: 0;
  z-index: 200; /* must exceed videowhisperSupportContainer (102) so submenus open over the app */
  position: relative;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.topbar-logo .custom-logo-link img {
  max-height: 50px;
  max-width: 200px;
  width: auto;
  display: block;
}

.topbar-logo .site-title {
  font-size: 16px;
  padding: 0;
  text-align: left;
}

/* Horizontal icon menu */
.topbar-nav {
  flex: 1;
  overflow: visible;
}

.topbar-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.topbar-item {
  position: relative;
}

.topbar-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--text-color, #e0e0e0);
  text-decoration: none;
  transition: background-color 0.2s;
  font-size: 20px;
}

.topbar-icon-link:visited {
  color: var(--text-color, #e0e0e0);
}

/* Current page / active ancestor — sidebar menu */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
  background-color: rgba(128, 128, 128, 0.1) !important;
}

/* Current page / active ancestor — top bar menu */
.current-menu-item > .topbar-icon-link,
.current-menu-ancestor > .topbar-icon-link,
.current_page_item > .topbar-icon-link,
.current_page_ancestor > .topbar-icon-link {
  background-color: rgba(128, 128, 128, 0.1);
}

/* Current page — top bar submenus */
.topbar-submenu .current-menu-item > .topbar-submenu-item,
.topbar-submenu .current_page_item > .topbar-submenu-item {
  background-color: rgba(128, 128, 128, 0.1);
}

.topbar-icon-link:hover,
.topbar-icon-link:focus {
  background-color: rgba(128, 128, 128, 0.2);
  color: var(--link-color, #64b5f6);
}

/* Top bar: text label in top-level items, hidden by default (big icon mode) */
.topbar-item-text {
  display: none;
}

/* Icons & Text mode: show text below icon in top bar */
.menu-display-small_icon_text .topbar-icon-link {
  flex-direction: column;
  width: auto;
  height: auto;
  padding: 4px 8px;
  font-size: 16px;
  gap: 1px;
}
.menu-display-small_icon_text .topbar-item-text {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* Auto mode: icons & text on wide screens, big icons on narrow */
@media (min-width: 769px) {
  .menu-display-auto .topbar-icon-link {
    flex-direction: column;
    width: auto;
    height: auto;
    padding: 4px 8px;
    font-size: 16px;
    gap: 1px;
  }
  .menu-display-auto .topbar-item-text {
    display: block;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }
}

/* Submenu dropdown from top bar items */
.topbar-item .topbar-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--background-color, #1a1a2e);
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  min-width: 220px;
  z-index: 10000;
  padding: 4px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Hover mode: show submenu on hover */
.submenu-hover-yes .topbar-item:hover .topbar-submenu,
.submenu-hover-yes .topbar-item:focus-within .topbar-submenu {
  display: block;
}

/* Auto hover mode: hover on non-touch (desktop), JS handles touch */
.submenu-hover-auto .topbar-item:hover .topbar-submenu,
.submenu-hover-auto .topbar-item:focus-within .topbar-submenu {
  display: block;
}

/* No hover mode: JS handles click toggle via .fps-open class */
.submenu-hover-no .topbar-item:hover .topbar-submenu,
.submenu-hover-no .topbar-item:focus-within .topbar-submenu {
  display: none;
}
.topbar-submenu.fps-open {
  display: block !important;
}

.topbar-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--text-color, #e0e0e0);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}

.topbar-submenu-item:visited {
  color: var(--text-color, #e0e0e0);
}

.topbar-submenu-item:hover {
  background-color: rgba(128, 128, 128, 0.2);
  color: var(--link-color, #64b5f6);
}

.topbar-submenu-item .menu-item-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Parent link in top bar submenu - only visible when hover is disabled */
.topbar-parent-link {
  display: none;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  font-weight: 600;
}
.submenu-hover-no .topbar-parent-link {
  display: flex;
}
/* Also show parent link on touch devices in auto mode (JS adds body class) */
.submenu-hover-auto.fps-no-hover .topbar-parent-link {
  display: flex;
}

/* Top bar submenu display modes */
/* Big icon mode for submenus: hide text, show only icons */
.submenu-display-big_icon .topbar-submenu .menu-item-title {
  display: none !important;
}
.submenu-display-big_icon .topbar-submenu .menu-item-icon {
  font-size: 20px !important;
  width: auto;
}
.submenu-display-big_icon .topbar-submenu .topbar-submenu-item {
  justify-content: center;
  padding: 8px;
}
/* Keep parent link text visible even in big icon submenu mode */
.submenu-display-big_icon .topbar-parent-link .menu-item-title {
  display: inline !important;
}

/* Nested submenus in top bar - hierarchical flyout */
.topbar-nested-item {
  position: relative;
}
.topbar-nested-toggle {
  display: flex;
  align-items: center;
  width: 100%;
}
.topbar-nested-arrow {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.6;
}
.topbar-submenu-nested {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: var(--background-color, #1a1a2e);
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  min-width: 200px;
  z-index: 10001;
  padding: 4px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Hover mode: show nested submenu on hover */
.submenu-hover-yes .topbar-nested-item:hover > .topbar-submenu-nested,
.submenu-hover-yes .topbar-nested-item:focus-within > .topbar-submenu-nested,
.submenu-hover-auto .topbar-nested-item:hover > .topbar-submenu-nested,
.submenu-hover-auto .topbar-nested-item:focus-within > .topbar-submenu-nested {
  display: block;
}
/* No hover mode: JS handles click toggle */
.submenu-hover-no .topbar-nested-item:hover > .topbar-submenu-nested,
.submenu-hover-no .topbar-nested-item:focus-within > .topbar-submenu-nested {
  display: none;
}
.topbar-submenu-nested.fps-open {
  display: block !important;
}

/* Top bar actions (mode switcher + hamburger) */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.topbar-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 8px;
  color: var(--text-color, #e0e0e0);
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.topbar-hamburger:hover {
  background-color: rgba(128, 128, 128, 0.2);
}

/* Expanded menu panel (hamburger) - always shows icons & text */
.site-topbar-expanded {
  background-color: var(--background-color, #1a1a2e);
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  max-height: 60vh;
  overflow-y: auto;
  flex-shrink: 0;
  z-index: 9999;
  position: relative;
}

/* Force text visible in expanded menu regardless of main menu display mode */
.fps-expanded-menu .menu-item-title {
  display: inline !important;
}
.fps-expanded-menu .menu-item-icon {
  font-size: 14px !important;
  display: inline !important;
}
.fps-expanded-menu .dropdown.icon {
  display: inline !important;
}

.topbar-expanded-inner {
  padding: 16px;
}

.topbar-expanded-inner .ui.vertical.menu {
  max-width: 100%;
}
/* Expanded menu always burger-style: submenus expand inline */
.site-topbar-expanded .ui.dropdown.fpsDropdown .menu {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: unset !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 16px;
  z-index: auto;
}
.site-topbar-expanded .fps-has-submenu:not(.fpsDropdown) > .fps-submenu {
  display: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: unset !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 16px;
}
.site-topbar-expanded .fps-submenu.fps-nested-open {
  display: block !important;
}

/* Content wrapper for top-bar layout (2 columns below top bar) */
.site-content-wrapper {
  display: flex;
  flex: 1;
  overflow: visible;
  min-height: 0;
}

.layout-top-bar .site-content {
  flex: 1;
  overflow-y: auto;
}

/* Use page scrolling on normal pages so the footer remains reachable. */
body:not(.archive-display-fullpage) .site-content,
body:not(.archive-display-fullpage) .layout-top-bar .site-content {
  overflow-x: visible;
  overflow-y: visible;
  height: auto;
  max-height: none;
}

/* Keep a small breathing space below the footer instead of gluing it to the viewport edge. */
body:not(.archive-display-fullpage) .site-content::after {
  content: "";
  display: block;
  height: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* Right sidebar in top-bar layout: limited width */
.layout-top-bar .site-sidebar-right {
  display: block;
  width: 200px;
  max-width: 20%;
  min-width: 150px;
  overflow-y: auto;
  padding: 8px;
  border-left: 1px solid rgba(128, 128, 128, 0.2);
}

/* Relocated widgets from left sidebar in top-bar layout */
.sidebar-relocated-widgets {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

@media (max-width: 1000px) {
  .layout-top-bar .site-topbar {
    flex-wrap: wrap;
  }

  .layout-top-bar .topbar-nav {
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
  }

  .layout-top-bar .topbar-menu {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

/* Hide right sidebar on narrow screens in top-bar layout too */
@media (max-width: 768px) {

  .layout-top-bar .site-sidebar-right {
    display: none;
  }

  /* Hide icon menu on narrow when burger is active (auto or yes) */
  .burger-menu-auto .topbar-menu,
  .burger-menu-yes .topbar-menu {
    display: none;
  }
}

/* =============================================
   Burger Menu Controls
   ============================================= */

/* Sidebar burger button (left-sidebar layout) */
.sidebar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 8px;
  color: var(--text-color, #333);
  font-size: 18px;
  cursor: pointer;
  margin: 8px auto 4px;
  transition: background-color 0.2s;
}
.sidebar-hamburger:hover {
  background-color: rgba(128, 128, 128, 0.15);
}

/* Sidebar menu panel: default block display (non-burger mode) */
.sidebar-menu-panel {
  width: 100%;
}

/* Close button inside sidebar-menu-panel (only visible when panel is overlay) */
.sidebar-panel-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 8px;
  color: var(--text-color, #333);
  font-size: 18px;
  cursor: pointer;
  float: right;
  margin-bottom: 8px;
}
.sidebar-panel-close:hover {
  background-color: rgba(128, 128, 128, 0.15);
}

/* Open state: panel becomes full-screen overlay */
.sidebar-menu-panel.fps-open {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background-color, #fff);
  z-index: 10000;
  overflow-y: auto;
  padding: 16px;
}
.sidebar-menu-panel.fps-open .sidebar-panel-close {
  display: flex;
}
/* Normalize menu display in full-screen overlay: always small icon + text */
.sidebar-menu-panel.fps-open .main-navigation > div > .item > .menu-item-icon,
.sidebar-menu-panel.fps-open .main-navigation > div > .fpsDropdown > a > .menu-item-icon {
  font-size: 14px !important;
  display: inline !important;
  text-align: left;
  padding: 0;
}
.sidebar-menu-panel.fps-open .main-navigation > div > .item > .menu-item-title,
.sidebar-menu-panel.fps-open .main-navigation > div > .fpsDropdown > a > .menu-item-title {
  display: inline !important;
}
.sidebar-menu-panel.fps-open .main-navigation > div > .fpsDropdown > a > .dropdown.icon {
  display: inline !important;
}
/* Restore Fomantic borders in overlay (big_icon mode removes them) */
.sidebar-menu-panel.fps-open .main-navigation > div.ui.menu {
  border: initial !important;
  box-shadow: initial !important;
}
.sidebar-menu-panel.fps-open .main-navigation > div.ui.menu > .item:before,
.sidebar-menu-panel.fps-open .main-navigation > div.ui.menu > .fpsDropdown:before {
  display: block !important;
}
/* In overlay, submenus expand inline (mobile-friendly) */
.sidebar-menu-panel.fps-open .ui.dropdown.fpsDropdown .menu {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: unset !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 16px;
  z-index: auto;
}
/* Hide nested submenus by default in overlay, show via click toggle */
.sidebar-menu-panel.fps-open .fps-has-submenu:not(.fpsDropdown) > .fps-submenu {
  display: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: unset !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 16px;
}
.sidebar-menu-panel.fps-open .fps-submenu.fps-nested-open {
  display: block !important;
}

/* burger-menu-no: hide all burger buttons, always show menus */
.burger-menu-no .topbar-hamburger,
.burger-menu-no .sidebar-hamburger {
  display: none !important;
}
.burger-menu-no .topbar-menu {
  display: flex !important;
}

/* burger-menu-yes: always show sidebar burger button */
.burger-menu-yes .sidebar-hamburger {
  display: flex;
}

/* burger-menu-auto: show sidebar burger on narrow screens */
@media (max-width: 768px) {
  .burger-menu-auto .sidebar-hamburger {
    display: flex;
  }
}

/* Touch device + auto mode: show burger (JS adds fps-burger-touch) */
.burger-menu-auto.fps-burger-touch .sidebar-hamburger {
  display: flex;
}

/* Top bar auto mode: hide hamburger on wide non-touch screens */
@media (min-width: 769px) {
  .burger-menu-auto:not(.fps-burger-touch) .topbar-hamburger {
    display: none;
  }
}
/* Top bar touch + auto mode: show hamburger, hide icon menu */
.burger-menu-auto.fps-burger-touch .topbar-hamburger {
  display: flex !important;
}
.burger-menu-auto.fps-burger-touch .topbar-menu {
  display: none !important;
}

/* =============================================
   Submenu Burger Display Mode
   ============================================= */

/* Burger mode: override hover-based submenu display (always click-only) */
.submenu-display-burger.submenu-hover-yes .topbar-item:hover .topbar-submenu,
.submenu-display-burger.submenu-hover-yes .topbar-item:focus-within .topbar-submenu,
.submenu-display-burger.submenu-hover-auto .topbar-item:hover .topbar-submenu,
.submenu-display-burger.submenu-hover-auto .topbar-item:focus-within .topbar-submenu,
.submenu-display-burger.submenu-hover-yes .topbar-nested-item:hover > .topbar-submenu-nested,
.submenu-display-burger.submenu-hover-auto .topbar-nested-item:hover > .topbar-submenu-nested {
  display: none !important;
}
/* fps-open must beat the hover-hide rules above (match specificity, placed after) */
.submenu-display-burger.submenu-hover-yes .topbar-item .topbar-submenu.fps-open,
.submenu-display-burger.submenu-hover-auto .topbar-item .topbar-submenu.fps-open,
.submenu-display-burger .topbar-submenu.fps-open {
  display: block !important;
}
.submenu-display-burger.submenu-hover-yes .topbar-nested-item .topbar-submenu-nested.fps-open,
.submenu-display-burger.submenu-hover-auto .topbar-nested-item .topbar-submenu-nested.fps-open,
.submenu-display-burger .topbar-submenu-nested.fps-open {
  display: block !important;
}

/* Burger mode: left sidebar fps-submenu as full-page overlay.
   High specificity to override .ui.dropdown.fpsDropdown .menu positioning */
.submenu-display-burger .fps-submenu,
.submenu-display-burger .ui.dropdown.fpsDropdown .menu.fps-submenu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  min-width: unset !important;
  background-color: var(--background-color, #fff);
  z-index: 10000;
  overflow-y: auto;
  padding: 16px;
  border-radius: 0 !important;
}
/* Ensure text visible in burger submenu overlay */
.submenu-display-burger .fps-submenu .menu-item-title {
  display: inline !important;
}

/* Burger mode: topbar submenus as full-page overlay */
.submenu-display-burger .topbar-submenu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-width: unset !important;
  background-color: var(--background-color, #fff);
  z-index: 10000;
  overflow-y: auto;
  padding: 16px;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Burger mode: nested submenus expand inline (not flyout) */
.submenu-display-burger .topbar-submenu-nested {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  box-shadow: none !important;
  min-width: unset !important;
  width: 100%;
  border: 1px solid rgba(128, 128, 128, 0.2) !important;
  border-radius: 4px;
  background-color: rgba(128, 128, 128, 0.05);
}

/* Burger submenu close button (injected by JS) */
.fps-burger-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 8px;
  color: var(--text-color, #333);
  font-size: 18px;
  cursor: pointer;
  float: right;
  margin-bottom: 8px;
}
.fps-burger-close:hover {
  background-color: rgba(128, 128, 128, 0.15);
}

/* ==============================================
   16. Page Templates & Elementor
   ============================================== */

/* Full-width page template */
.container-full-width {
  max-width: 100%;
  padding: var(--space-md);
}

/* Blank Canvas template */
.fps-blank-canvas .site-wrapper,
.fps-blank-canvas .site-sidebar,
.fps-blank-canvas .site-sidebar-right,
.fps-blank-canvas .site-topbar,
.fps-blank-canvas .site-footer {
  display: none !important;
}
.fps-canvas-content {
  width: 100%;
}

/* Elementor: disable conflicting container widths */
.elementor-page .site-content {
  max-width: none;
  padding: 0;
  overflow: visible;
}
.elementor-page .container-full-width {
  padding: 0;
}

/* ==============================================
   17. Touch Targets
   ============================================== */

.topbar-icon-link,
.topbar-hamburger,
.sidebar-hamburger,
.sidebar-panel-close,
.fps-burger-close,
.ui.button.fpsMode,
.topbar-submenu-item,
.main-navigation .item,
.main-navigation .fpsDropdown > a {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

/* ==============================================
   18. Post Listing
   ============================================== */

.fps-post-card {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}
.fps-post-thumbnail {
  flex: 0 0 25%;
  max-width: 200px;
}
.fps-post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}
.fps-post-body {
  flex: 1;
  min-width: 0;
}
@media (max-width: 576px) {
  .fps-post-card {
    flex-direction: column;
  }
  .fps-post-thumbnail {
    max-width: 100%;
    flex-basis: auto;
  }
}

/* ==============================================
   19. Footer
   ============================================== */

.fps-footer-widgets {
  padding: var(--space-md);
  border-top: 1px solid rgba(128, 128, 128, 0.15);
}

/* ==============================================
   20. Post Formats
   ============================================== */

/* Shared format icon badge */
.fps-format-icon {
  display: inline-block;
  color: var(--link-color);
  font-size: 0.85em;
  margin-bottom: 6px;
  opacity: 0.7;
}

/* Shared format meta (date / domain) */
.fps-format-meta {
  color: var(--text-color);
  opacity: 0.55;
  font-size: 0.82em;
  text-decoration: none;
}

.fps-format-meta:hover {
  color: var(--link-color);
  opacity: 1;
}

/* Aside: compact, no thumbnail */
.fps-format-aside {
  border-left: 3px solid var(--link-color);
}
.fps-format-aside .fps-post-body {
  padding: 12px 16px;
}

/* Quote: blockquote styling */
.fps-format-quote blockquote {
  margin: 0;
  padding: 0;
  font-style: italic;
  font-size: 1.1em;
  line-height: 1.5;
}
.fps-format-quote blockquote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 0.85em;
  opacity: 0.7;
}
.fps-format-quote blockquote cite a {
  color: var(--link-color);
  text-decoration: none;
}

/* Link: emphasise the URL domain */
.fps-format-link h2 a {
  text-decoration: underline;
}

/* Video / Audio: responsive media container */
.fps-post-media {
  margin-bottom: 10px;
}
.fps-responsive-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}
.fps-responsive-embed p {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
  .fps-responsive-embed {
    padding-bottom: 56.25%;
    height: 0;
  }
}
.fps-responsive-embed iframe,
.fps-responsive-embed video,
.fps-responsive-embed embed,
.fps-responsive-embed object {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 4px;
  object-fit: contain;
}
.fps-post-media audio {
  width: 100%;
}
.fps-post-media .wp-audio-shortcode {
  width: 100% !important;
}


/* Image / Gallery: full-width thumbnail */
.fps-image-full {
  max-width: 100%;
  flex-basis: auto;
  position: relative;
}
.fps-image-full img {
  width: 100%;
  height: auto;
}

/* Gallery: image count badge */
.fps-gallery-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.82em;
}

/* ==============================================
   21. Archive Display Modes
   ============================================== */

/* --- Shared card actions --- */
.fps-card-footer {
  display: flex;
  align-items: center;
  margin-top: var(--space-sm);
}
.fps-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.fps-comments-count {
  color: var(--text-color);
  opacity: 0.6;
  font-size: var(--font-size-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fps-comments-count:hover {
  opacity: 1;
  color: var(--link-color);
}

/* --- Classic Mode --- */
.fps-classic-card {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

@media (max-width: 576px) {
  .fps-classic-card {
    flex-direction: column;
  }
  .fps-classic-card .fps-post-thumbnail {
    max-width: 100%;
    flex-basis: auto;
  }
}

/* --- Fullpage Mode --- */
.fps-fullpage-container {
  overflow-y: visible;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.layout-top-bar .fps-fullpage-container {
  min-height: calc(100vh - var(--topbar-height, 0px));
  min-height: calc(100dvh - var(--topbar-height, 0px));
  min-height: calc(100svh - var(--topbar-height, 0px));
}
.fps-fullpage-slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 0;
  scroll-margin-bottom: 0;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #000;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.layout-top-bar .fps-fullpage-slide {
  height: calc(100vh - var(--topbar-height, 0px));
  height: calc(100dvh - var(--topbar-height, 0px));
  height: calc(100svh - var(--topbar-height, 0px));
}
.fps-fullpage-media {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fps-fullpage-bg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fps-fullpage-video {
  width: 100%;
  height: 100%;
  position: relative;
}
.fps-fullpage-video iframe,
.fps-fullpage-video video,
.fps-fullpage-video embed,
.fps-fullpage-video object {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.fps-fullpage-audio-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fps-fullpage-audio-wrap .fps-fullpage-bg {
  object-fit: cover;
  filter: blur(8px) brightness(0.6);
}
.fps-fullpage-audio {
  position: absolute;
  bottom: 30%;
  left: 10%;
  right: 10%;
  z-index: 2;
}
.fps-fullpage-audio audio {
  width: 100%;
}
.fps-fullpage-overlay {
  position: absolute;
  bottom: 0;
  left: 0; 
  right: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.9) 100%);
  padding: var(--space-md) var(--space-md) var(--space-md);
  padding-bottom: max(var(--space-md), calc(var(--space-sm) + env(safe-area-inset-bottom, 0px) + 24px));
  color: #fff;
  box-sizing: border-box;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fps-fullpage-overlay h2 {
  margin: 0 0 var(--space-xs);
  font-size: 1.3em;
  flex-shrink: 0;
}
.fps-fullpage-overlay h2 a {
  color: #fff;
  text-decoration: none;
}
.fps-fullpage-overlay h2 a:hover {
  text-decoration: underline;
}
.fps-fullpage-info {
  max-width: 100%;
}
.fps-fullpage-excerpt {
  font-size: var(--font-size-sm);
  opacity: 0.85;
  margin-bottom: var(--space-sm);
  line-height: 1.5;
  max-height: 3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fps-fullpage-overlay .fps-card-actions {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  flex-shrink: 0;
}
.fps-fullpage-overlay .fps-comments-count {
  color: #fff;
  opacity: 0.7;
}
.fps-fullpage-overlay .fps-comments-count:hover {
  opacity: 1;
}
.fps-fullpage-overlay blockquote {
  font-style: italic;
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  color: #fff;
}
.fps-fullpage-overlay blockquote cite {
  display: block;
  margin-top: var(--space-xs);
  font-style: normal;
  font-size: 0.8em;
  opacity: 0.7;
}

/* Fullpage overlay: mobile optimization */
@media (max-height: 667px), (max-width: 576px) {
  .fps-fullpage-overlay {
    padding: var(--space-sm) var(--space-sm) var(--space-sm);
    padding-bottom: max(var(--space-sm), calc(env(safe-area-inset-bottom, 0px) + 24px));
  }
  .fps-fullpage-overlay h2 {
    font-size: 1.1em;
    margin-bottom: var(--space-xs);
  }
  .fps-fullpage-excerpt {
    max-height: 2.4em;
    font-size: var(--font-size-xs);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.2;
  }
  .fps-fullpage-overlay .fps-card-actions {
    margin-top: var(--space-xs);
  }
}

/* Fullpage: pagination styling */
.archive-display-fullpage .nav-links {
  position: relative;
  z-index: 10;
  background: var(--background-color);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
  border-top: 1px solid rgba(128, 128, 128, 0.15);
  min-height: 100px;
  scroll-snap-align: start;
}

.archive-display-fullpage .nav-links .nav-previous {
  order: 2;
}

.archive-display-fullpage .nav-links .nav-next {
  order: 1;
}

.archive-display-fullpage .nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--link-color);
  color: #fff !important;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.2s;
}

.archive-display-fullpage .nav-links a:hover {
  opacity: 0.8;
}

.archive-display-fullpage .nav-links .nav-previous a::after {
  content: " →";
  color: #fff;
  margin-left: var(--space-xs);
}

.archive-display-fullpage .nav-links .nav-next a::before {
  content: "← ";
  color: #fff;
  margin-right: var(--space-xs);
}

/* Fullpage: fix double scrollbar and content overflow issues */
.archive-display-fullpage .site-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

.archive-display-fullpage .site-content {
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 0;
  padding-bottom: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
  scroll-padding-bottom: 0;
}

.layout-top-bar.archive-display-fullpage .site-content {
  height: calc(100vh - var(--topbar-height, 0px));
  height: calc(100dvh - var(--topbar-height, 0px));
  height: calc(100svh - var(--topbar-height, 0px));
}

.archive-display-fullpage .content-area,
.archive-display-fullpage .site-main {
  height: auto;
  margin: 0;
  padding: 0;
}

.archive-display-fullpage .site-footer {
  position: relative;
  z-index: 10;
  background: var(--background-color);
}

.archive-display-fullpage .site-sidebar-right {
  overflow-y: auto;
  height: 100vh;
  height: 100dvh;
}

@media (max-width: 768px) {
  .archive-display-fullpage .site-wrapper,
  .layout-top-bar.archive-display-fullpage .site-wrapper {
    min-height: 0;
  }

  .archive-display-fullpage .site-content,
  .layout-top-bar.archive-display-fullpage .site-content,
  .archive-display-fullpage .site-sidebar-right {
    overflow: visible;
    height: auto;
    max-height: none;
  }

  .archive-display-fullpage .site-content {
    scroll-snap-type: none;
    padding-bottom: var(--space-md);
  }

  .fps-fullpage-container,
  .fps-fullpage-slide,
  .layout-top-bar .fps-fullpage-container,
  .layout-top-bar .fps-fullpage-slide {
    min-height: 0;
    height: auto;
  }
}

/* Fullpage: navigation dots */
.fps-fullpage-dots {
  position: fixed;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: 100;
}
.fps-fullpage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.fps-fullpage-dot.active {
  background: #fff;
}

/* --- Boxes Mode --- */
.fps-boxes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}
@media (max-width: 768px) {
  .fps-boxes-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .fps-boxes-grid {
    grid-template-columns: 1fr;
  }
}
.fps-box-card {
  border: 1px solid rgba(128, 128, 128, 0.15);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--background-color);
  transition: box-shadow 0.2s;
}
.fps-box-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.fps-box-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(128, 128, 128, 0.1);
}
.fps-box-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fps-box-media .fps-responsive-embed {
  height: 100%;
  aspect-ratio: auto;
}
.fps-box-format-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: var(--font-size-xs);
}
/* Audio overlay inside grid card media area */
.fps-box-audio-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
  padding: 20px 6px 6px;
  pointer-events: none;
}
.fps-box-audio-overlay audio,
.fps-box-audio-overlay .wp-audio-shortcode {
  width: 100% !important;
  display: block;
  pointer-events: auto;
}
.fps-box-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fps-box-author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-xs);
}
.fps-box-avatar {
  border-radius: 50%;
  width: 28px;
  height: 28px;
}
.fps-box-author-name {
  font-weight: 600;
  color: var(--text-color);
}
.fps-box-date {
  color: var(--text-color);
  opacity: 0.5;
  margin-left: auto;
}
.fps-box-title {
  font-size: 1em;
  margin: 0 0 var(--space-xs);
  line-height: 1.3;
}
.fps-box-title a {
  color: var(--text-color);
  text-decoration: none;
}
.fps-box-title a:hover {
  color: var(--link-color);
}
.fps-box-excerpt {
  font-size: var(--font-size-sm);
  color: var(--text-color);
  opacity: 0.7;
  margin-bottom: var(--space-sm);
  flex: 1;
}
.fps-box-quote {
  font-style: italic;
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-sm);
  flex: 1;
}
.fps-box-actions {
  margin-top: auto;
  padding-top: var(--space-xs);
  border-top: 1px solid rgba(128, 128, 128, 0.1);
}