/* === LIVE TEST - if you see white background this CSS is working === */
body, body.home-two, html { background-color: #ffffff !important; }
h1, h2, h3, .text-white { color: #111111 !important; }

/* ============================================================
   MindscapeHub — Editorial Redesign
   Style: Minimal, editorial — Aeon.co / Psyche.co / LRB.co.uk
   Colors: #FFFFFF bg, #111111 text, #2C5F6E accent (teal)
   Fonts: Playfair Display (headings) + Inter (body)
   ============================================================ */

/* --- Google Fonts Import (fallback if not in head) --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* --- CSS Custom Properties --- */
:root {
  --color-bg:       #FFFFFF;
  --color-text:     #111111;
  --color-muted:    #555555;
  --color-border:   #E8E8E8;
  --color-light:    #F7F7F7;
  --color-accent:   #2C5F6E;
  --color-accent-h: #1e4550;
  --font-heading:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--color-bg) !important;
  scroll-behavior: smooth;
}

body,
body.home-one,
body.home-two,
body.home-three,
body.home-four,
body.home-five,
body.mindscape-editorial {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   KILL ALL DARK BACKGROUNDS — systematic overrides
   ============================================================ */

/* Tailwind dark utility classes used in this theme */
.bg-buisness-dark-black,
.bg-buisness-light-black,
[class*="bg-buisness-dark"],
[class*="bg-buisness-black"],
[class*="bg-buisness-light-black"] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Arbitrary Tailwind bg values */
.bg-\[\#141417\],
.bg-\[\#1a1a1e\],
.bg-\[\#0d0d0f\],
.bg-\[\#18181b\],
.bg-\[\#111117\],
.bg-\[\#0f0f12\],
.bg-\[\#1c1c20\],
.bg-\[\#131316\],
.bg-\[\#16161a\],
.bg-\[\#0e0e11\],
.bg-\[\#12121a\] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Generic dark bg catch-alls */
[style*="background:#14"],
[style*="background: #14"],
[style*="background-color:#14"],
[style*="background-color: #14"] {
  background-color: var(--color-bg) !important;
}

/* Sections */
section,
.section,
[class*="section"],
article,
main,
aside,
.container,
.wrapper {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Card components */
.card,
[class*="-card"],
[class*="card-"],
.service-card,
.blog-card,
.portfolio-card,
.team-card,
.pricing-card,
.feature-card,
.testimonial-card,
.product-card {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading) !important;
  color: var(--color-text) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  margin-bottom: 0.75em;
}

h1, .h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; }
h2, .h2 { font-size: clamp(1.6rem, 4vw, 2.75rem) !important; }
h3, .h3 { font-size: clamp(1.3rem, 3vw, 2rem) !important; }
h4, .h4 { font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important; }
h5, .h5 { font-size: 1.15rem !important; }
h6, .h6 { font-size: 1rem !important; }

/* Hero / display headings */
.hero-title,
[class*="hero"] h1,
[class*="hero"] h2,
.banner-title,
[class*="banner"] h1,
[class*="banner"] h2,
.section-title,
.main-title,
.page-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em;
}

p, li, td, th, label, input, textarea, select, blockquote {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

p {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: var(--color-muted) !important;
}

blockquote {
  border-left: 3px solid var(--color-accent) !important;
  padding-left: 1.5rem !important;
  font-style: italic !important;
  font-family: var(--font-heading) !important;
  font-size: 1.2rem !important;
  color: var(--color-muted) !important;
  margin: 2rem 0 !important;
}

/* ============================================================
   LINKS & ACCENTS
   ============================================================ */

a {
  color: var(--color-accent) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

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

/* Text that should stay dark (nav links, headings in nav) */
.text-white,
nav .text-white,
header .text-white,
.header-wrapper .text-white,
#h5-header .text-white {
  color: var(--color-text) !important;
}

.text-buisness-red,
.text-buisness-primary,
[class*="text-buisness-red"] {
  color: var(--color-accent) !important;
}

/* ============================================================
   NAVBAR — White, minimal, editorial
   ============================================================ */

/* Hide the top info bar */
.top-bar,
[class*="top-bar"],
#top-bar,
.top-info-bar,
.header-top,
.info-bar {
  display: none !important;
}

/* Header container */
#h5-header,
.header-wrapper,
header,
nav,
.navbar,
.nav-wrapper {
  background-color: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* Fixed header */
#h5-header.header-wrapper {
  background-color: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

/* Nav header inner */
#h5-header header {
  background-color: var(--color-bg) !important;
  border: none !important;
}

/* Logo area */
.header-wrapper a img,
#h5-header .logo,
header .logo {
  filter: none !important;
}

/* Nav links */
nav ul li a,
.header-wrapper ul li a,
#h5-header ul li a,
header ul li a,
.navbar-nav .nav-link {
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  transition: color 0.2s ease !important;
}

nav ul li a:hover,
.header-wrapper ul li a:hover,
#h5-header ul li a:hover {
  color: var(--color-accent) !important;
}

/* Active nav state */
.home-two-nav-item,
[class*="nav-item"] {
  color: var(--color-text) !important;
}

/* Dropdown menus */
nav .absolute ul,
.dropdown-menu,
[class*="dropdown"] ul,
#h5-header .group:hover .absolute ul {
  background-color: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

nav .absolute ul a,
.dropdown-menu a,
[class*="dropdown"] ul a {
  color: var(--color-text) !important;
}

/* Search input in navbar */
#h5-header input,
header input,
nav input {
  background-color: var(--color-light) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 4px !important;
}

#h5-header input::placeholder,
header input::placeholder {
  color: var(--color-muted) !important;
}

/* Nav search/button wrappers with dark bg */
#h5-header .bg-\[\#141417\],
header .bg-\[\#141417\] {
  background-color: var(--color-light) !important;
  border-color: var(--color-border) !important;
}

/* Cart/account icon buttons */
#h5-header button,
header button {
  color: var(--color-text) !important;
}

/* Currency/language selects */
#currency_select,
#language_select_inner,
.custom-select {
  color: var(--color-text) !important;
}

/* Mobile navbar */
#mobile-menu,
.mobile-menu,
.mobile-nav,
[id*="mobile"],
[class*="mobile-nav"] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* ============================================================
   PRELOADER
   ============================================================ */

#preloader,
.preloader,
.preloder,
[class*="preloader"],
[id*="preloader"] {
  background-color: var(--color-bg) !important;
}

.preloader-spinner,
[class*="loader-spinner"],
[class*="preloader-dot"] {
  border-color: var(--color-accent) transparent transparent transparent !important;
}

/* ============================================================
   HERO / BANNER SECTIONS
   ============================================================ */

.hero,
[class*="hero-"],
[-class*="-hero"],
.banner,
[class*="banner-"],
.hero-section,
.banner-section {
  background-color: var(--color-bg) !important;
  padding-top: 8rem !important;
  padding-bottom: 5rem !important;
}

/* Override any dark hero backgrounds */
.hero::before,
.banner::before,
[class*="hero-"]::before,
[class*="banner-"]::before {
  display: none !important;
}

/* ============================================================
   SECTION SPACING — generous whitespace
   ============================================================ */

section,
.section {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

@media (min-width: 768px) {
  section,
  .section {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}

/* Section labels / eyebrows */
.section-label,
.eyebrow,
[class*="sub-title"],
[class*="subtitle"],
.section-subtitle {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-accent) !important;
  margin-bottom: 1rem !important;
}

/* Dividers */
hr,
.divider,
[class*="divider"] {
  border-color: var(--color-border) !important;
  opacity: 1 !important;
}

/* ============================================================
   BUTTONS — minimal, teal, no pill
   ============================================================ */

/* Base button reset */
.btn,
button:not([class*="icon"]):not([class*="close"]):not([class*="toggle"]):not([class*="hamburger"]),
[class*="btn-"],
a.btn,
input[type="submit"],
input[type="button"] {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.04em !important;
  border-radius: 3px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

/* Primary / filled button */
.btn-primary,
.btn-main,
.btn-theme,
.buisness-btn,
[class*="btn-primary"],
[class*="btn-main"],
.cta-btn,
a[class*="btn-primary"],
a[class*="btn-main"] {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--color-accent) !important;
  border-radius: 3px !important;
  padding: 0.6rem 1.5rem !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-main:hover,
.btn-theme:hover,
.buisness-btn:hover,
a[class*="btn-primary"]:hover,
a[class*="btn-main"]:hover {
  background-color: var(--color-accent-h) !important;
  border-color: var(--color-accent-h) !important;
  color: #FFFFFF !important;
}

/* Outline button */
.btn-outline,
.btn-secondary,
[class*="btn-outline"],
[class*="btn-secondary"] {
  background-color: transparent !important;
  color: var(--color-accent) !important;
  border: 1.5px solid var(--color-accent) !important;
  border-radius: 3px !important;
  padding: 0.6rem 1.5rem !important;
}

.btn-outline:hover,
.btn-secondary:hover {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
}

/* Remove pill/rounded on any button */
[class*="rounded-full"] .btn,
.btn.rounded-full,
[class*="rounded-\[100px\]"] {
  border-radius: 3px !important;
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */

input,
textarea,
select {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 3px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  padding: 0.5rem 0.75rem !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px rgba(44, 95, 110, 0.15) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-muted) !important;
  opacity: 0.7 !important;
}

/* ============================================================
   FOOTER — minimal white, thin top border
   ============================================================ */

footer,
.footer,
#footer,
[class*="footer"],
[id*="footer"] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-top: 1px solid var(--color-border) !important;
  padding-top: 4rem !important;
  padding-bottom: 2rem !important;
}

footer *,
.footer *,
#footer * {
  color: var(--color-text) !important;
  background-color: transparent !important;
  border-color: var(--color-border) !important;
}

footer a,
.footer a,
#footer a {
  color: var(--color-muted) !important;
  font-size: 0.875rem !important;
}

footer a:hover,
.footer a:hover {
  color: var(--color-accent) !important;
}

footer h3,
footer h4,
footer h5,
.footer h3,
.footer h4,
.footer h5 {
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  margin-bottom: 1rem !important;
  letter-spacing: 0;
}

.footer-copyright,
[class*="copyright"] {
  font-size: 0.8rem !important;
  color: var(--color-muted) !important;
  border-top: 1px solid var(--color-border) !important;
  padding-top: 1.5rem !important;
  margin-top: 2rem !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumb,
[class*="breadcrumb"] {
  background-color: var(--color-light) !important;
  padding: 0.5rem 0 !important;
}

.breadcrumb a,
[class*="breadcrumb"] a {
  color: var(--color-muted) !important;
  font-size: 0.85rem !important;
}

/* ============================================================
   BLOG / EDITORIAL CARDS
   ============================================================ */

.blog-card,
.post-card,
[class*="blog"],
[class*="post-card"] {
  background-color: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
}

.blog-card:hover,
.post-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonial,
[class*="testimonial"] {
  background-color: var(--color-light) !important;
  border-left: 3px solid var(--color-accent) !important;
  padding: 1.5rem 2rem !important;
  border-radius: 2px !important;
}

/* ============================================================
   PRICING TABLES
   ============================================================ */

.pricing-card,
[class*="pricing"] {
  background-color: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

.pricing-card.featured,
.pricing-card.active,
[class*="pricing"].featured {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px var(--color-accent) !important;
}

/* ============================================================
   TAGS & BADGES
   ============================================================ */

.badge,
.tag,
[class*="badge"],
[class*="tag-"] {
  background-color: var(--color-light) !important;
  color: var(--color-muted) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  padding: 0.2rem 0.6rem !important;
}

/* ============================================================
   SWIPER / SLIDERS — minimal or hidden
   ============================================================ */

.swiper-pagination-bullet {
  background-color: var(--color-border) !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--color-accent) !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--color-accent) !important;
}

/* ============================================================
   MISC ELEMENTS
   ============================================================ */

/* SVG icons inheriting dark colors */
#h5-header svg path,
header svg path {
  stroke: var(--color-text) !important;
}

/* Cookie banner */
#cookie-banner,
.cookie-banner,
[id*="cookie"],
[class*="cookie"] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-top: 1px solid var(--color-border) !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.06) !important;
}

/* Notification / alert */
.alert,
[class*="alert-"] {
  background-color: var(--color-light) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: 3px !important;
}

/* Pagination */
.pagination,
[class*="pagination"] {
  font-family: var(--font-body) !important;
}

.page-link,
.pagination a {
  color: var(--color-accent) !important;
  border-color: var(--color-border) !important;
  background-color: var(--color-bg) !important;
}

.page-link:hover,
.pagination a:hover,
.page-item.active .page-link {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--color-accent) !important;
}

/* ============================================================
   TOASTR — keep functionality, style to match
   ============================================================ */

.toast-success { background-color: var(--color-accent) !important; }
.toast-error   { background-color: #c0392b !important; }
.toast-warning { background-color: #d68910 !important; }
.toast-info    { background-color: var(--color-muted) !important; }

/* ============================================================
   RESPONSIVE / MOBILE
   ============================================================ */

@media (max-width: 1279px) {
  /* Mobile header */
  #h5-header {
    display: none !important;
  }

  /* Make sure mobile menu (xl:hidden equivalent) is styled correctly */
  [class*="mobile-menu"],
  [class*="mobile-nav"],
  [id*="mobile-menu"],
  [id*="mobile-nav"] {
    background-color: var(--color-bg) !important;
    border-bottom: 1px solid var(--color-border) !important;
  }
}

@media (max-width: 768px) {
  h1, .hero-title { font-size: 2.25rem !important; }
  h2 { font-size: 1.8rem !important; }
  h3 { font-size: 1.4rem !important; }

  section, .section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .hero, [class*="hero-"], .banner {
    padding-top: 5rem !important;
    padding-bottom: 3rem !important;
  }

  footer, .footer {
    padding-top: 2.5rem !important;
  }

  p { font-size: 0.95rem !important; }
}

/* ============================================================
   UTILITY: force white on any remaining dark elements
   ============================================================ */

[class*="dark:"],
[class*="-dark"],
[class*="dark-"],
.dark-section,
.dark-bg,
[class*="bg-dark"] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Catch-all for inline dark styles common in this theme */
[style*="background-color: rgb(20"],
[style*="background-color:rgb(20"],
[style*="background: rgb(20"],
[style*="background:rgb(20"] {
  background-color: var(--color-bg) !important;
}


/* ============================================================
   TARGETED OVERRIDES — remaining inline Tailwind dark classes
   ============================================================ */

/* bg-[#141417] inline hex — nav buttons, icons */
.bg-\[#141417\] {
  background-color: var(--color-light) !important;
  border-color: var(--color-border) !important;
}

/* nav cart/login buttons with dark pill bg */
.rounded-\[100px\].bg-\[#141417\],
.rounded-full.bg-\[#141417\] {
  background-color: var(--color-light) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* home-two-btn-bg dark button */
.home-two-btn-bg,
.home-two-btn-bg.bg-buisness-dark-black {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #FFFFFF !important;
}

.home-two-btn-bg:hover {
  background-color: var(--color-accent-h) !important;
  border-color: var(--color-accent-h) !important;
}

/* Slider prev/next buttons */
.h5-story-prev, .h5-story-next,
[class*="h5-story-"],
.bg-buisness-dark-black\/10 {
  background-color: var(--color-light) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* Bottom full-width dark bar (footer/section divider) */
.h-\[80px\].bg-buisness-dark-black,
.h-\[65px\].bg-buisness-dark-black,
[class*="h-\["][class*="bg-buisness-dark-black"] {
  background-color: var(--color-bg) !important;
  border-top: 1px solid var(--color-border) !important;
}

/* Catch all remaining border-[#302F31] dark borders */
.border-\[#302F31\] {
  border-color: var(--color-border) !important;
}

/* nav text color override for light nav */
#h5-header .text-white,
#h5-header span.text-white,
#h5-header .text-inherit {
  color: var(--color-text) !important;
}

/* Active nav indicator — red to teal */
.before\:text-buisness-red,
.hover\:text-buisness-red:hover,
.text-buisness-red {
  color: var(--color-accent) !important;
}

.before\:border-buisness-red {
  border-color: var(--color-accent) !important;
}