/*
Theme Name: Expanding Tiles Lite Back to Top
Theme URI: https://katharinakamphausen.de
Author: Valsze (DK)
Author URI: https://katharinakamphausen.de
Description: Ambient Reading Room full optimization suite with Back to Top button. Features: Critical CSS, Preconnect, LQIP, Scroll Animations, Responsive Images, Breadcrumb Schema, and a floating Back to Top button with circular progress ring indicator. Shows scroll percentage and smooth-scrolls to top. Builds on v2.1.0.
Version: 2.2.0.0-back-to-top
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: expanding-tiles
Tags: blog, grid-layout, featured-images, custom-colors, dark-mode, translation-ready, accessibility-ready, footer-widgets, sticky-post, performance-optimized

Expanding Tiles WordPress Theme - Critical CSS Edition, (C) 2026 Valsze
Expanding Tiles is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================
   DESIGN TOKENS & CSS VARIABLES
   ========================================================= */

:root {
  /* Brand Colors - From Flow/Katharina Theme */
  --ink: #111111;
  --ink2: #222222;
  --muted: #444444;
  
  --accent: #27b6a4;
  --accent2: #29c29b;
  --accentDark: #005b50;
  
  /* Background Colors */
  --bg-light: #f5f5f5;
  --bg-dark: #1a1a1a;
  --card-bg-light: #ffffff;
  --card-bg-dark: #2c2c2c;
  
  /* Text Colors */
  --text-light: #111111;
  --text-dark: #e0e0e0;
  --heading-light: #2c3e50;
  --heading-dark: #ffffff;
  
  /* Category Colors */
  --cat-personal: #e74c3c;
  --cat-scraps: #9b59b6;
  --cat-flavors: #f39c12;
  --cat-archipelago: #16a085;
  --cat-travel: #3498db;
  
  /* Borders */
  --pillBorder: rgba(0, 0, 0, 0.14);
  --cardBorder: rgba(0, 0, 0, 0.06);
  --cardBorder-dark: rgba(255, 255, 255, 0.1);
  
  /* Shadows */
  --shadowSoft: 0 10px 24px rgba(0, 0, 0, 0.10);
  --shadowHover: 0 14px 32px rgba(0, 0, 0, 0.22);
  --shadowCard: 0 2px 15px rgba(0, 0, 0, 0.08);
  --shadowCardHover: 0 5px 25px rgba(0, 0, 0, 0.12);
  
  /* Border Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --card-radius: 12px;
  
  /* Layout */
  --max-width: 1400px;
  --article-max-width: 1200px;
  --content-max-width: 800px;
  --grid-gap: 2rem;
  --header-height: 80px;
  --fixed-header-height: 0px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Z-index Scale */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 1000;
  --z-lightbox: 10000;
  --z-translate: 9999;

  /* Typography - Fluid & Responsive */
  --font-title: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  
  /* Fluid Typography Scales */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  
  /* Active Theme Colors (Light Mode Default) */
  --bg: var(--bg-light);
  --card-bg: var(--card-bg-light);
  --text: var(--text-light);
  --heading: var(--heading-light);
  --border: var(--cardBorder);
  
  /* Performance: Reduce animations for users who prefer reduced motion */
  --animation-duration: 0.3s;
  --animation-distance: 10px;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --animation-duration: 0.01ms;
    --animation-distance: 0px;
    --transition-fast: 0.01ms;
    --transition-normal: 0.01ms;
    --transition-slow: 0.01ms;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --bg: var(--bg-dark);
  --card-bg: var(--card-bg-dark);
  --text: var(--text-dark);
  --heading: var(--heading-dark);
  --border: var(--cardBorder-dark);

  /* Improve muted text contrast (excerpt/meta/secondary text) */
  --muted: rgba(255, 255, 255, 0.88);
  
  --shadowSoft: 0 10px 24px rgba(0, 0, 0, 0.4);
  --shadowHover: 0 14px 32px rgba(0, 0, 0, 0.6);
  --shadowCard: 0 2px 15px rgba(0, 0, 0, 0.3);
  --shadowCardHover: 0 5px 25px rgba(0, 0, 0, 0.5);
}

/* WordPress Admin Bar Offset */
body {
  --adminbar: 0px;
}

body.admin-bar {
  --adminbar: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --adminbar: 46px;
  }
}

/* =========================================================
   RESET & BASE STYLES
   ========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  transition: background-color var(--transition-normal), color var(--transition-normal);
  overflow-x: hidden;
}

/* =========================================================
   TYPOGRAPHY - FLUID & RESPONSIVE
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  color: var(--heading);
  line-height: 1.3;
  font-weight: 600;
  transition: color var(--transition-normal);
}

h1 {
  font-size: var(--text-4xl);
  line-height: 1.1;
}

h2 {
  font-size: var(--text-3xl);
  line-height: 1.2;
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-base);
}

p {
  margin-bottom: 1rem;
  line-height: 1.8;
  font-size: var(--text-base);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

/* Code Blocks */
code {
  font-family: 'Courier New', Consolas, Monaco, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  color: #e83e8c;
}

pre {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  line-height: 1.5;
}

pre code {
  background: transparent;
  padding: 0;
  font-size: 0.875rem;
  color: #333;
  display: block;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
}

/* WordPress code blocks */
.wp-block-code {
  max-width: 100%;
  overflow-x: auto;
}

.wp-block-code code {
  display: block;
  white-space: pre;
  overflow-wrap: normal;
}

/* Dark mode code blocks */
body.dark-mode pre {
  background: #1e1e1e;
  border-color: #404040;
}

body.dark-mode code {
  background: rgba(255, 255, 255, 0.1);
  color: #f8c555;
}

body.dark-mode pre code {
  background: transparent;
  color: #d4d4d4;
}

/* Scrollbar for code blocks */
pre::-webkit-scrollbar {
  height: 8px;
}

pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

pre::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

body.dark-mode pre::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

body.dark-mode pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

body.dark-mode pre::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

/* Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accentDark);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Skip to Content Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 1rem 2rem;
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
  top: 0;
}

/* Scroll Margin for Anchor Links */
:where(h1, h2, h3, h4, h5, h6, [id]) {
  scroll-margin-top: calc(var(--adminbar) + var(--fixed-header-height) + 72px);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.content-wrapper {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* =========================================================
   WORDPRESS CORE STYLES
   ========================================================= */

/* Alignments */
.alignleft {
  float: left;
  margin: 0 1.5rem 1rem 'align-none';
}

.alignright {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Galleries */
.gallery {
  margin-bottom: 1.5rem;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
  padding: 0.5rem;
}

/* Captions */
.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.5rem;
  text-align: center;
}

/* Sticky Posts */
.sticky {
  /* Styles will be added in components */
}

/* =========================================================
   RESPONSIVE UTILITIES
   ========================================================= */

@media (max-width: 1200px) {
  :root {
    --max-width: 100%;
    --grid-gap: 1.5rem;
  }
  
  .container {
    padding: 0 1.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --grid-gap: 1rem;
    --header-height: 60px;
  }
  
  html {
    font-size: 15px;
  }
  
  .container {
    padding: 0 1rem;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --grid-gap: 0.75rem;
  }
  
  html {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
}

/* =========================================================
   PRINT STYLES
   ========================================================= */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  img {
    page-break-inside: avoid;
  }
  
  h2,
  h3,
  p {
    orphans: 3;
    widows: 3;
  }
  
  h2,
  h3 {
    page-break-after: avoid;
  }
  
  .header,
  .footer,
  .sidebar {
    display: none;
  }
}

/* =========================================================
   UTILITIES & HELPERS
   ========================================================= */

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Text utilities */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }

.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 600 !important; }

/* Spacing utilities */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.5rem !important; }
.p-2 { padding: 1rem !important; }
.p-3 { padding: 1.5rem !important; }
.p-4 { padding: 2rem !important; }

/* Color utilities */
.text-accent { color: var(--accent) !important; }
.text-muted { color: var(--muted) !important; }
.bg-accent { background-color: var(--accent) !important; }

/* Border utilities */
.border-radius-sm { border-radius: var(--r-sm) !important; }
.border-radius-md { border-radius: var(--r-md) !important; }
.border-radius-lg { border-radius: var(--r-lg) !important; }
.border-radius-pill { border-radius: var(--r-pill) !important; }

/* Shadow utilities */
.shadow-soft { box-shadow: var(--shadowSoft) !important; }
.shadow-card { box-shadow: var(--shadowCard) !important; }
.shadow-none { box-shadow: none !important; }

/* Responsive utilities */
@media (max-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
}

@media (min-width: 769px) {
  .d-md-up-none { display: none !important; }
}

/* Animation utilities */
.fade-in {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-up {
  animation: slideUp 0.5s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* No JS fallback */
.no-js .needs-js {
  display: none !important;
}

/* =========================================================
   BROWSER-SPECIFIC FIXES
   ========================================================= */

/* Safari fixes */
@supports (-webkit-backdrop-filter: blur(10px)) {
  .article-overlay {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

/* Firefox fixes */
@-moz-document url-prefix() {
  .post-card {
    image-rendering: -moz-crisp-edges;
  }
}

/* IE11 fixes (graceful degradation) */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .posts-grid {
    display: block;
  }
  
  .post-card {
    width: 30%;
    float: left;
    margin: 1.5%;
  }
}

/* =========================================================
   WPBAKERY / ULTIMATE VC ADDONS TABS FIX
   ========================================================= */

/* Force hide non-active tab content */
.vc_tta-panel:not(.vc_active) .vc_tta-panel-body,
.wpb_tab:not(.ui-tabs-panel-active):not(.vc_active):not(.active),
.ultimate-tab-content:not(.active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Force show active tab content */
.vc_tta-panel.vc_active .vc_tta-panel-body,
.wpb_tab.ui-tabs-panel-active,
.wpb_tab.vc_active,
.wpb_tab.active,
.ultimate-tab-content.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  animation: fadeInTab 0.4s ease forwards;
}

@keyframes fadeInTab {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ultimate VC Addons Tabs */
.ultimate-tabs-wrapper {
  width: 100%;
  margin: 2rem 0;
  clear: both;
}

.ultimate-tabs-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--border-color, #e0e0e0);
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.ultimate-tabs-nav li {
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  background: color-mix(in srgb, var(--card-bg) 94%, var(--accent) 6%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 3px solid transparent;
  border-radius: 0.9rem 0.9rem 0 0;
  transition: all 0.3s ease;
  position: relative;
  margin-bottom: -2px;
  font-weight: 500;
  color: var(--heading);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.ultimate-tabs-nav li:hover {
  background: color-mix(in srgb, var(--card-bg) 82%, var(--accent) 18%);
  border-bottom-color: var(--accent2, #29c29b);
  border-color: rgba(39, 182, 164, 0.28);
  transform: translateY(-1px);
}

.ultimate-tabs-nav li.active {
  border-bottom-color: transparent;
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent, #27b6a4), var(--accent2, #29c29b));
  box-shadow: 0 14px 30px rgba(39, 182, 164, 0.25);
}

.ultimate-tabs-nav li a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.ultimate-tab-content {
  padding: 1.5rem 0;
  min-height: 100px;
}

/* Standard WPBakery Tabs */
.wpb_tabs {
  margin: 2rem 0;
  clear: both;
}

.wpb_tabs .wpb_tabs_nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--border-color, #e0e0e0);
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.wpb_tabs .wpb_tabs_nav li {
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  background: color-mix(in srgb, var(--card-bg) 94%, var(--accent) 6%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 3px solid transparent;
  border-radius: 0.9rem 0.9rem 0 0;
  transition: all 0.3s ease;
  margin-bottom: -2px;
  font-weight: 500;
  color: var(--heading);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.wpb_tabs .wpb_tabs_nav li:hover {
  background: color-mix(in srgb, var(--card-bg) 82%, var(--accent) 18%);
  border-bottom-color: var(--accent2, #29c29b);
  border-color: rgba(39, 182, 164, 0.28);
  transform: translateY(-1px);
}

.wpb_tabs .wpb_tabs_nav li.ui-tabs-active,
.wpb_tabs .wpb_tabs_nav li.ui-state-active,
.wpb_tabs .wpb_tabs_nav li.active {
  border-bottom-color: transparent;
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent, #27b6a4), var(--accent2, #29c29b));
  box-shadow: 0 14px 30px rgba(39, 182, 164, 0.25);
}

.wpb_tabs .wpb_tabs_nav li a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.wpb_tabs .wpb_tab {
  padding: 1.5rem 0;
  min-height: 100px;
}

/* VC TTA Tabs */
.vc_tta-tabs-container {
  margin: 2rem 0;
  clear: both;
}

.vc_tta-tabs-list {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--border-color, #e0e0e0);
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.vc_tta-tabs .vc_tta-tab {
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: -2px;
}

.vc_tta-tabs .vc_tta-tab a {
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  display: block;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 3px solid transparent;
  border-radius: 0.9rem 0.9rem 0 0;
  transition: all 0.3s ease;
  font-weight: 500;
  background: color-mix(in srgb, var(--card-bg) 94%, var(--accent) 6%);
  color: var(--heading);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.vc_tta-tabs .vc_tta-tab:hover a {
  background: color-mix(in srgb, var(--card-bg) 82%, var(--accent) 18%);
  border-bottom-color: var(--accent2, #29c29b);
  border-color: rgba(39, 182, 164, 0.28);
  transform: translateY(-1px);
}

.vc_tta-tabs .vc_tta-tab.vc_active a {
  border-bottom-color: transparent;
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent, #27b6a4), var(--accent2, #29c29b));
  box-shadow: 0 14px 30px rgba(39, 182, 164, 0.25);
}

/* Light mode hardening: keep tab labels readable even if plugin CSS overrides anchor color */
.article-body .ultimate-tabs-nav li,
.single-content .ultimate-tabs-nav li,
.entry-content .ultimate-tabs-nav li,
.article-body .ultimate-tabs-nav li a,
.single-content .ultimate-tabs-nav li a,
.entry-content .ultimate-tabs-nav li a,
.article-body .wpb_tabs .wpb_tabs_nav li,
.single-content .wpb_tabs .wpb_tabs_nav li,
.entry-content .wpb_tabs .wpb_tabs_nav li,
.article-body .wpb_tabs .wpb_tabs_nav li a,
.single-content .wpb_tabs .wpb_tabs_nav li a,
.entry-content .wpb_tabs .wpb_tabs_nav li a,
.article-body .vc_tta-tabs .vc_tta-tab a,
.single-content .vc_tta-tabs .vc_tta-tab a,
.entry-content .vc_tta-tabs .vc_tta-tab a {
  color: var(--heading) !important;
  -webkit-text-fill-color: currentColor;
  opacity: 1 !important;
}

.article-body .ultimate-tabs-nav li.active,
.single-content .ultimate-tabs-nav li.active,
.entry-content .ultimate-tabs-nav li.active,
.article-body .ultimate-tabs-nav li.active a,
.single-content .ultimate-tabs-nav li.active a,
.entry-content .ultimate-tabs-nav li.active a,
.article-body .wpb_tabs .wpb_tabs_nav li.ui-tabs-active,
.article-body .wpb_tabs .wpb_tabs_nav li.ui-state-active,
.article-body .wpb_tabs .wpb_tabs_nav li.active,
.single-content .wpb_tabs .wpb_tabs_nav li.ui-tabs-active,
.single-content .wpb_tabs .wpb_tabs_nav li.ui-state-active,
.single-content .wpb_tabs .wpb_tabs_nav li.active,
.entry-content .wpb_tabs .wpb_tabs_nav li.ui-tabs-active,
.entry-content .wpb_tabs .wpb_tabs_nav li.ui-state-active,
.entry-content .wpb_tabs .wpb_tabs_nav li.active,
.article-body .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a,
.article-body .wpb_tabs .wpb_tabs_nav li.ui-state-active a,
.article-body .wpb_tabs .wpb_tabs_nav li.active a,
.single-content .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a,
.single-content .wpb_tabs .wpb_tabs_nav li.ui-state-active a,
.single-content .wpb_tabs .wpb_tabs_nav li.active a,
.entry-content .wpb_tabs .wpb_tabs_nav li.ui-tabs-active a,
.entry-content .wpb_tabs .wpb_tabs_nav li.ui-state-active a,
.entry-content .wpb_tabs .wpb_tabs_nav li.active a,
.article-body .vc_tta-tabs .vc_tta-tab.vc_active a,
.single-content .vc_tta-tabs .vc_tta-tab.vc_active a,
.entry-content .vc_tta-tabs .vc_tta-tab.vc_active a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.vc_tta-panel {
  padding: 1.5rem 0;
  min-height: 100px;
}

.vc_tta-panel-body {
  padding: 0;
}

/* Dark mode support for tabs */
body.dark-mode .ultimate-tabs-nav,
body.dark-mode .wpb_tabs_nav,
body.dark-mode .vc_tta-tabs-list {
  border-bottom-color: var(--border-dark, #404040);
}

body.dark-mode .ultimate-tabs-nav li:hover,
body.dark-mode .wpb_tabs_nav li:hover,
body.dark-mode .vc_tta-tab:hover a {
  background: var(--hover-dark, rgba(255, 255, 255, 0.1));
}

body.dark-mode .ultimate-tabs-nav li.active,
body.dark-mode .wpb_tabs_nav li.ui-tabs-active,
body.dark-mode .wpb_tabs_nav li.active,
body.dark-mode .vc_tta-tab.vc_active a {
  background: var(--hover-dark, rgba(255, 255, 255, 0.05));
}

/* =========================================================
   THEME COMPLETE - v1.5.0.5 Lite Safe
   ========================================================= */


/* =========================================================
   AMBIENT READING ROOM THEME (v1.5.0.11)
   Subtle site-wide backdrop based on the uploaded desk-night artwork.
   ========================================================= */
:root {
  --ambient-image: url("assets/images/ambient-reading-room.webp");
  --ambient-bg-light: #fdf8f2;
  --ambient-bg-dark: #09111c;
  --ambient-page-bg: var(--ambient-bg-light);
  --ambient-overlay-top: rgba(255, 253, 250, 0.98);
  --ambient-overlay-bottom: rgba(255, 248, 241, 0.96);
  --ambient-after-top: rgba(255, 255, 255, 0.28);
  --ambient-after-bottom: rgba(249, 240, 230, 0.34);
  --ambient-card: rgba(255, 253, 250, 0.94);
  --ambient-card-strong: rgba(255, 255, 255, 0.985);
  --ambient-border: rgba(113, 87, 56, 0.10);
  --ambient-highlight: rgba(247, 190, 112, 0.18);
  --ambient-image-filter: blur(10px) saturate(0.9) brightness(1.05);
  --ambient-image-filter-mobile: blur(10px) saturate(0.84) brightness(1.10);
  --ambient-image-opacity: 0.94;
  --ambient-header-bg: color-mix(in srgb, rgba(255, 255, 255, 0.96) 88%, transparent);
  --ambient-header-bg-scrolled: color-mix(in srgb, rgba(255, 255, 255, 0.99) 92%, transparent);
  --ambient-header-border: rgba(113, 87, 56, 0.08);
  --ambient-header-shadow: 0 14px 34px rgba(173, 129, 84, 0.12);
  --ambient-nav-strong: #18212e;
  --ambient-nav-muted: rgba(24, 33, 46, 0.82);
  --ambient-control-bg: rgba(255, 255, 255, 0.86);
  --ambient-control-border: rgba(113, 87, 56, 0.10);
  --ambient-control-hover-bg: rgba(255, 255, 255, 0.96);
  --ambient-control-shadow: 0 10px 24px rgba(124, 96, 67, 0.12);
  --ambient-control-shadow-hover: 0 14px 28px rgba(124, 96, 67, 0.16);
  --ambient-nav-hover-bg: rgba(255, 255, 255, 0.72);
  --ambient-nav-active-bg: linear-gradient(135deg, rgba(39, 182, 164, 0.14), rgba(255, 255, 255, 0.95));
  --ambient-nav-active-border: rgba(39, 182, 164, 0.16);
  --ambient-nav-active-shadow: 0 12px 26px rgba(39, 182, 164, 0.10);
  --ambient-nav-active-line: var(--accent);
  --ambient-shell-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(255, 250, 244, 0.74));
  --ambient-shell-border: rgba(113, 87, 56, 0.06);
  --ambient-shell-shadow: 0 22px 64px rgba(124, 96, 67, 0.10);
  --ambient-surface-shadow: 0 18px 50px rgba(124, 96, 67, 0.12);
  --ambient-overlay-surface: rgba(255, 250, 244, 0.52);
  --ambient-card-focus-border: rgba(39, 182, 164, 0.14);
  --ambient-card-focus-ring: rgba(39, 182, 164, 0.06);
  --ambient-card-focus-bg: rgba(255, 255, 255, 0.99);
  --ambient-card-focus-shadow: 0 24px 50px rgba(124, 96, 67, 0.14);
  --ambient-body-text: rgba(31, 41, 55, 0.96);
  --ambient-meta-text: rgba(71, 85, 105, 0.88);
  --ambient-link: var(--accentDark);
  --ambient-link-hover: var(--accent);
  --ambient-mobile-card: rgba(255, 255, 255, 0.97);
}

html {
  background: var(--ambient-page-bg);
}

body {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 12%, rgba(244, 177, 93, 0.10), transparent 18%),
    linear-gradient(180deg, var(--ambient-overlay-top), var(--ambient-overlay-bottom)),
    var(--ambient-page-bg);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
  background-image: var(--ambient-image);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: var(--ambient-image-filter);
  transform: scale(1.08);
  opacity: var(--ambient-image-opacity);
}

body::after {
  z-index: -1;
  background:
    linear-gradient(180deg, var(--ambient-after-top), var(--ambient-after-bottom)),
    radial-gradient(circle at 84% 18%, rgba(244, 177, 93, 0.14), transparent 22%),
    radial-gradient(circle at 16% 80%, rgba(59, 130, 246, 0.08), transparent 24%);
}

body:not(.dark-mode),
[data-theme="light"] body,
body.light-mode {
  --bg: rgba(255, 253, 249, 0.94);
  --card-bg: var(--ambient-card);
  --text: var(--text-light);
  --heading: var(--heading-light);
  --muted: rgba(92, 74, 55, 0.76);
  --border: rgba(113, 87, 56, 0.08);
}

[data-theme="dark"] body,
body.dark-mode {
  --ambient-page-bg: var(--ambient-bg-dark);
  --ambient-overlay-top: rgba(9, 17, 28, 0.97);
  --ambient-overlay-bottom: rgba(7, 13, 21, 0.94);
  --ambient-after-top: rgba(5, 10, 16, 0.50);
  --ambient-after-bottom: rgba(7, 12, 20, 0.60);
  --ambient-card: rgba(30, 33, 39, 0.84);
  --ambient-card-strong: rgba(28, 31, 37, 0.92);
  --ambient-border: rgba(255, 235, 205, 0.10);
  --ambient-highlight: rgba(247, 190, 112, 0.18);
  --ambient-image-filter: blur(10px) saturate(0.92) brightness(0.52);
  --ambient-image-filter-mobile: blur(10px) saturate(0.78) brightness(0.28);
  --ambient-image-opacity: 1;
  --ambient-header-bg: color-mix(in srgb, #11161d 74%, transparent);
  --ambient-header-bg-scrolled: color-mix(in srgb, #0d131b 82%, transparent);
  --ambient-header-border: rgba(255, 255, 255, 0.08);
  --ambient-header-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  --ambient-nav-strong: #f8fafc;
  --ambient-nav-muted: rgba(237, 242, 247, 0.80);
  --ambient-control-bg: rgba(255, 255, 255, 0.04);
  --ambient-control-border: rgba(255, 255, 255, 0.08);
  --ambient-control-hover-bg: rgba(255, 255, 255, 0.08);
  --ambient-control-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  --ambient-control-shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.40);
  --ambient-nav-hover-bg: rgba(255, 255, 255, 0.06);
  --ambient-nav-active-bg: linear-gradient(135deg, rgba(39, 182, 164, 0.24), rgba(255, 255, 255, 0.08));
  --ambient-nav-active-border: rgba(39, 182, 164, 0.24);
  --ambient-nav-active-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
  --ambient-nav-active-line: color-mix(in srgb, var(--accent2) 78%, white 22%);
  --ambient-shell-bg: linear-gradient(180deg, rgba(18, 22, 29, 0.56), rgba(18, 22, 29, 0.38));
  --ambient-shell-border: rgba(255, 255, 255, 0.06);
  --ambient-shell-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  --ambient-surface-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  --ambient-overlay-surface: rgba(6, 10, 16, 0.56);
  --ambient-card-focus-border: rgba(39, 182, 164, 0.22);
  --ambient-card-focus-ring: rgba(39, 182, 164, 0.12);
  --ambient-card-focus-bg: color-mix(in srgb, var(--ambient-card-strong) 96%, rgba(255, 255, 255, 0.04));
  --ambient-card-focus-shadow: 0 28px 58px rgba(0, 0, 0, 0.38);
  --ambient-body-text: rgba(236, 241, 247, 0.96);
  --ambient-meta-text: rgba(231, 236, 243, 0.74);
  --ambient-link: #ffd089;
  --ambient-link-hover: #ffe7bf;
  --ambient-mobile-card: rgba(26, 29, 35, 0.94);
  --bg: rgba(12, 16, 22, 0.94);
  --card-bg: var(--ambient-card);
  --border: rgba(255, 255, 255, 0.10);
  --text: #e8edf3;
  --heading: #f7f8fb;
  --muted: rgba(232, 237, 243, 0.82);
}


/* Stronger ambient preview, especially visible in Customizer */
body.customize-support::before,
.wp-customizer body::before {
  filter: blur(8px) saturate(0.96) brightness(0.6);
  opacity: 1;
}

body.customize-support::after,
.wp-customizer body::after {
  background:
    linear-gradient(180deg, rgba(5, 10, 16, 0.40), rgba(7, 12, 20, 0.48)),
    radial-gradient(circle at 84% 18%, rgba(244, 177, 93, 0.22), transparent 24%),
    radial-gradient(circle at 16% 80%, rgba(59, 130, 246, 0.12), transparent 26%);
}