/* ============================================
    Custom stylesheet for tantric-virtual-temple
    Tantric Awakening Virtual Temple - BuddyBoss Child Theme
    File: /wp-content/themes/tantric-virtual-temple/assets/css/custom.css
    Version: 5.2.1
    Updated: 2026-06-12  (v5.2.0 design-system sync + BB variable override
                          for OLS/no-Customizer environments)
   ============================================ */

/*============================================================
  1) FONTS - self-hosted Bonheur Royale + Lugrasimo
============================================================*/
@font-face {
  font-family: 'Bonheur Royale';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/wp-content/themes/tantric-virtual-temple/assets/fonts/bonheur-royale-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Bonheur Royale';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/wp-content/themes/tantric-virtual-temple/assets/fonts/bonheur-royale.woff2') format('woff2');
}
@font-face {
  font-family: 'Lugrasimo';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/wp-content/themes/tantric-virtual-temple/assets/fonts/lugrasimo-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Lugrasimo';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/wp-content/themes/tantric-virtual-temple/assets/fonts/lugrasimo-latin.woff2') format('woff2');
}

/*============================================================
  2) BUDDYBOSS VARIABLE OVERRIDE
     Replaces BuddyBoss factory-default white CSS variables at
     the source. Works on servers with no Customizer settings
     saved (e.g. fresh OLS install). Every element that uses
     these variables inherits the dark temple theme automatically.
============================================================*/
:root {
  --bb-content-background-color:              rgba(34, 7, 10, 0.55) !important;
  --bb-content-alternate-background-color:    rgba(34, 7, 10, 0.72) !important;
  --bb-body-background-color:                 #200202 !important;
  --bb-header-background:                     rgba(0, 0, 0, 0.48) !important;
  --bb-sidenav-background:                    rgba(30, 4, 6, 0.88) !important;
  --bb-sidenav-menu-background-color-regular: transparent !important;
  --bb-content-border-color:                  rgba(200, 88, 32, 0.35) !important;
  --bb-headings-color:                        #FFD9A8 !important;
  --bb-body-text-color:                       #FFB56B !important;
  /* Nav hover/active - gold brightening, no blue */
  --bb-sidenav-text-regular:                  #FFB56B !important;
  --bb-sidenav-text-hover:                    #FFD9A8 !important;
  --bb-sidenav-text-active:                   #FFD9A8 !important;
  --bb-sidenav-menu-background-color-hover:   rgba(255, 198, 135, 0.12) !important;
  --bb-sidenav-menu-background-color-active:  rgba(200, 88, 32, 0.35) !important;
  --bb-sidenav-count-background-color-hover:  rgba(255, 198, 135, 0.18) !important;
  --bb-sidenav-count-background-color-active: rgba(200, 88, 32, 0.50) !important;
  --bb-sidenav-count-text-color-hover:        #FFD9A8 !important;
  --bb-sidenav-count-text-color-active:       #FFD9A8 !important;
  /* Header links - gold not blue */
  --bb-header-links:                          #FFB56B !important;
  --bb-header-links-hover:                    #FFD9A8 !important;
}

/*============================================================
  3) DESIGN TOKENS (aligned with design system v5.2)
============================================================*/
:root {
  /* Typography colors */
  --tantric-text-title:    #FFD9A8;  /* warm gold - headings */
  --tantric-text-body:     #FFB56B;  /* rose gold - body/links */
  --tantric-text-soft:     #E6AF91;  /* muted golden - secondary */

  /* Card border + glow (single-border system) */
  --tantric-border-inner:  #D48345;
  --tantric-border-outer:  rgba(255, 198, 135, 0.42);
  --tantric-glow-card:     0 0 0 1px rgba(200, 88, 32, 0.85), 0 0 16px rgba(216, 110, 60, 0.14);
  --tantric-glow-hover:    0 0 0 1px rgba(232, 130, 74, 1.0), 0 0 24px rgba(232, 130, 74, 0.30);
  --tantric-aura-outer:    0 0 18px rgba(216, 110, 60, 0.18);
  --tantric-aura-inner:    inset 0 0 24px rgba(0, 0, 0, 0.28);

  /* CTA - orange gold */
  --tantric-cta-bg:        linear-gradient(178deg, #E8762C 0%, #C85820 62%, #B14A1A 100%);
  --tantric-cta-glow:      0 1px 2px rgba(0,0,0,0.30), 0 0 14px rgba(232,110,60,0.18);

  /* Backgrounds */
  --tantric-burgundy-1:    #3D0203;
  --tantric-burgundy-2:    #2C0D0D;
  --tantric-underlay:      #200202;
  --tantric-card-fill:     rgba(34, 7, 10, 0.55);

  /* Layout */
  --tantric-radius:        14px;
  --tantric-radius-inner:  12px;
  --tantric-page-padding:  clamp(16px, 4vw, 28px);
  --tantric-content-max:   1200px;
}

/*============================================================
  4) BASE TYPE + GLOBAL COLORS
============================================================*/
html, body {
  font-family: 'Lugrasimo', system-ui, -apple-system, sans-serif !important;
  color: var(--tantric-text-body);
  background-color: var(--tantric-underlay) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.site-title, .entry-title, .post-title,
.bb-title, .bb-typography-heading,
.elementor-heading-title {
  font-family: 'Bonheur Royale', Georgia, 'Times New Roman', serif !important;
  color: var(--tantric-text-title) !important;
  font-weight: 400;
  letter-spacing: .2px;
}

/*============================================================
  5) FIXED VELVET BACKGROUND
     Primary: R2-hosted velvet drape photo.
     Fallback: CSS radial gradient.
============================================================*/
@supports (background-attachment: fixed) {
  body {
    background-image: url('https://r2.tantricawakening.net/wp-content/uploads/2025/09/26092336/IMG_5706.jpeg') !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}
/* CSS gradient fallback */
body {
  background-image: radial-gradient(140% 110% at 50% -12%,
    #571016 0%, #380A0E 48%, #220609 100%) !important;
}
/* Dedicated fixed layer */
#tantric-fixed-bg {
  position: fixed; inset: 0;
  background-image: url('https://r2.tantricawakening.net/wp-content/uploads/2025/09/26092336/IMG_5706.jpeg');
  background-size: cover; background-repeat: no-repeat; background-position: center;
  z-index: 0; pointer-events: none;
}
/* Lift content above the fixed layer */
#page, .site, .site-content, .bb-grid, #wrapper, #content, .bb-container {
  position: relative; z-index: 1;
}

/*============================================================
  6) HEADER - semi-transparent dark screen over the velvet
============================================================*/
.site-header,
.site-header .site-header-container,
.bb-header, header#masthead {
  background: rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: none !important;
  border-bottom: 1px solid rgba(200, 88, 32, 0.22) !important;
  box-shadow: none !important;
}
/* Header text + icons */
.site-header a, .site-header .bb-search-form__input,
.bb-header .bb-icons, .site-header .site-title {
  color: var(--tantric-text-title) !important;
}

/*============================================================
  7) SIDEBAR / BUDDYPANEL - dark glass panel
============================================================*/
.bb-mobile-panel-wrapper.left,
aside.buddypanel {
  background: rgba(30, 4, 6, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  top: 0 !important; bottom: 0 !important;
  box-shadow: inset -1px 0 0 rgba(255, 215, 160, 0.18);
  border: none !important;
}
.bb-mobile-panel-inner,
.bb-mobile-panel-header,
aside.buddypanel .panel-head,
aside.buddypanel .side-panel-inner,
aside.buddypanel .side-panel-menu-container,
aside.buddypanel .buddypanel-menu,
aside.buddypanel .side-panel-menu {
  background: transparent !important;
  box-shadow: none !important;
}
/* Panel menu item colors */
.buddypanel .menu-item > a,
.buddypanel .sub-menu .menu-item > a {
  color: var(--tantric-text-body) !important;
}
.buddypanel .menu-item > a:hover { color: var(--tantric-text-title) !important; }

/* Prevent logo shrink on panel toggle */
.buddypanel--toggle-on .site-header .site-branding img,
.bb-mobile-panel-open .site-header .site-branding img {
  transform: none !important;
  max-height: 48px !important;
  height: auto !important; width: auto !important;
}

/*============================================================
  8) ADMIN BAR
============================================================*/
body:not(.logged-in) #wpadminbar { display: none !important; }
html { margin-top: 0 !important; }

/*============================================================
  9) PAGE WIDTH
============================================================*/
.site-content .container, .content-area, .bb-container, .site-main {
  max-width: var(--tantric-content-max);
  padding-left: var(--tantric-page-padding);
  padding-right: var(--tantric-page-padding);
  margin: 0 auto;
}

/*============================================================
  10) WOBBLE CONTROL
============================================================*/
html, body { overscroll-behavior-x: none !important; overflow-x: hidden !important; }
.bb-mobile-panel-wrapper, .bb-mobile-panel-inner { overflow-x: hidden !important; }
aside.buddypanel .side-panel-inner { touch-action: pan-y !important; overscroll-behavior-x: none !important; }
.site-header { position: sticky; top: 0; z-index: 1000; }

/*============================================================
  11) TEMPLE CARDS - single thin orange border + soft glow.
      Translucent dark-wine fill floating over the velvet.
      Matches the live .net feed exactly.
============================================================*/
.blog .post, .archive .post, .single .entry,
.bb-activity-item, .activity-list li.activity-item,
.widget, .bb-profile-card, .bb-card,
.bp-generic-meta, .entry,
#buddypress .activity-list > li {
  position: relative;
  background: var(--tantric-card-fill) !important;
  border: none !important;
  border-radius: var(--tantric-radius) !important;
  box-shadow: var(--tantric-glow-card) !important;
  margin: 1rem 0;
  transition: box-shadow 240ms ease;
}
.blog .post:hover, .archive .post:hover,
.bb-activity-item:hover, .activity-list li.activity-item:hover,
.bb-card:hover {
  box-shadow: var(--tantric-glow-hover) !important;
}
/* Remove old :before/:after moat decoration */
.blog .post:before, .archive .post:before, .single .entry:before,
.bb-activity-item:before, .widget:before, .bb-profile-card:before, .bb-card:before,
.blog .post:after, .archive .post:after, .single .entry:after,
.bb-activity-item:after, .widget:after, .bb-profile-card:after, .bb-card:after,
#buddypress .activity-list > li:before,
#buddypress .activity-list > li:after {
  display: none !important;
  content: none !important;
}
/* Content padding inside cards */
.bb-activity-item .activity-content,
.activity-list li .activity-content,
.bb-card > * { padding: 16px 18px !important; }

/* Activity item inner dividers (gold hairline) */
.bb-activity-item .activity-meta,
.activity-list li .activity-meta,
.bb-activity-item .activity-comments {
  border-top: 1px solid rgba(200, 88, 32, 0.35) !important;
  color: var(--tantric-text-soft) !important;
}

/* Post/feed search box */
.bb-search-form, .activity-filter-bar input[type="search"],
#activity-search-form input {
  background: rgba(34, 7, 10, 0.45) !important;
  border: 1px solid var(--tantric-border-inner) !important;
  border-radius: var(--tantric-radius) !important;
  box-shadow: 0 0 0 1px rgba(200, 88, 32, 0.5) !important;
  color: var(--tantric-text-body) !important;
}
.bb-search-form:focus-within {
  box-shadow: 0 0 0 1px #C85820 !important;
}

/*============================================================
  12) TITLES + META COLORS
============================================================*/
.entry-title, .post-title, .single .entry-title, .bb-title,
#buddypress .activity-list .activity-header a {
  color: var(--tantric-text-title) !important;
}
.entry-meta, .entry-meta a, .posted-on, .posted-on a,
.entry-date, .byline, .comments-link a,
#buddypress .activity-list .activity-header .time-since,
#buddypress .activity-list .activity-header .activity-time-since a {
  color: var(--tantric-text-body) !important;
  opacity: .95;
}

/*============================================================
  13) AVATARS
============================================================*/
.avatar, img.avatar, .profile .avatar,
.bp-user .item-header-avatar img,
.buddypress .item-header-avatar img {
  border-radius: 50% !important;
  object-fit: cover !important;
  aspect-ratio: 1 !important;
  width: 48px !important;
  max-width: 48px !important;
  height: auto !important;
  border: 2px solid rgba(255, 215, 160, 0.25);
  box-shadow: 0 0 0 2px rgba(0,0,0,.2);
}
#buddypress div.item-header img.avatar {
  width: 160px !important;
  max-width: 160px !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 215, 160, 0.25);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}

/*============================================================
  14) BUTTONS
  Primary / submit actions: orange-gold gradient (CTA).
  Secondary / ghost: burgundy gradient with gold edge.
============================================================*/

/* Primary CTA - orange gold */
.bp-primary-action button, .bp-primary-action input[type="submit"],
.bb-submit-btn, button[type="submit"].submit,
.single button[type="submit"],
.woocommerce button.button.alt,
.woocommerce input.button.alt,
#buddypress input[type="submit"],
#buddypress a.button.bp-primary-action,
.buddypress input[type="submit"],
.login input[type="submit"],
.bb-form button[type="submit"] {
  background: var(--tantric-cta-bg) !important;
  color: #2C0D0D !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: var(--tantric-cta-glow) !important;
  transition: filter 240ms ease, transform 160ms ease !important;
}
/* All other buttons - secondary burgundy */
button, .button, .bb-button, .bp-secondary-action,
input[type="submit"], .bb-form button,
.site-header .header-actions .button,
.site-header .login-link a {
  border-radius: 6px !important;
  border: 1px solid rgba(255, 215, 160, 0.25) !important;
  background: linear-gradient(180deg, var(--tantric-burgundy-1) 0%, var(--tantric-burgundy-2) 100%) !important;
  color: var(--tantric-text-title) !important;
  box-shadow: none !important;
}

/* Input fields - gold-tinted */
.login input[type="text"], .login input[type="password"],
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea, select {
  background: rgba(255, 215, 160, 0.08) !important;
  border: 1px solid rgba(255, 215, 160, 0.25) !important;
  border-radius: 6px !important;
  color: var(--tantric-text-body) !important;
  transition: border-color 240ms ease, box-shadow 240ms ease !important;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus {
  border-color: #C85820 !important;
  box-shadow: 0 0 0 1px #C85820 !important;
  outline: none !important;
}

/*============================================================
  15) PORTRAIT vs LANDSCAPE
============================================================*/
@media (orientation: portrait) {
  .blog .post .entry-title, .archive .post .entry-title {
    font-size: clamp(28px, 5.6vw, 38px) !important;
    line-height: 1.1;
  }
  .post-thumbnail img { object-fit: contain; }
}
@media (orientation: landscape) {
  .site-header .site-branding img { max-height: 44px !important; }
  .blog .post .entry-title, .archive .post .entry-title {
    font-size: clamp(22px, 2.2vw, 30px) !important;
  }
}

/*============================================================
  16) MISC CLEANUPS
============================================================*/
#wrapper:before, #wrapper:after,
#content:before, #content:after { display: none !important; }
main, .site-main, .content-area { position: relative; z-index: 1; }
.bb-header, .site-header { border-bottom: none !important; }
aside.buddypanel { border-right: none !important; }

/*============================================================
  17) BUDDYPANEL - hide fixed sidenav on non-buddypanel layouts
      Only visible when BuddyBoss JS adds buddypanel-open class
============================================================*/
/* Hide buddypanel entirely when closed - clip to zero width with no overflow */
aside.buddypanel {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: width 0.2s ease, opacity 0.2s ease !important;
}
body.buddypanel-open aside.buddypanel {
  width: 260px !important;
  min-width: 260px !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(20, 3, 5, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
/* Panel inner toggle button - hide when panel is closed */
aside.buddypanel .panel-head {
  display: none !important;
}
body.buddypanel-open aside.buddypanel .panel-head {
  display: flex !important;
}

/*============================================================
  18) NAV LINK HOVER + ACTIVE - gold brightening system
      Matches the BB variable overrides in Section 2
============================================================*/
/* Kill default blue on all link states - tap, visited, active */
a, a:visited, a:active, a:hover {
  color: inherit;
}
a:hover { color: var(--tantric-text-title) !important; }
a:active, a:focus {
  color: var(--tantric-text-title) !important;
  -webkit-tap-highlight-color: rgba(200, 88, 32, 0.25) !important;
}
/* Headings that are links */
.entry-title a, .post-title a, h1 a, h2 a, h3 a {
  color: var(--tantric-text-title) !important;
}
.entry-title a:hover, .post-title a:hover,
.entry-title a:active, .post-title a:active {
  color: #FFFFFF !important;
  text-shadow: 0 0 18px rgba(255, 215, 160, 0.8) !important;
  -webkit-tap-highlight-color: rgba(200, 88, 32, 0.25) !important;
}

/* Primary nav links */
.site-header a:hover,
.site-header .current-menu-item > a,
.site-header .current_page_item > a,
.primary-menu .menu-item > a:hover,
.primary-menu .current-menu-item > a {
  color: var(--tantric-text-title) !important;
  opacity: 1 !important;
}
/* Buddypanel nav links */
.buddypanel .menu-item > a:hover,
.buddypanel .current-menu-item > a,
.buddypanel-open .buddypanel .menu-item.current-menu-item > a,
.buddypanel ul li.current-menu-item > a,
.buddypanel ul li.selected > a {
  color: var(--tantric-text-title) !important;
  background: rgba(200, 88, 32, 0.35) !important;
  border-radius: 6px !important;
}
/* Remove blue highlight from any interactive element */
a:focus, button:focus, input:focus,
.bb-activity-item:focus-within {
  outline-color: rgba(200, 88, 32, 0.6) !important;
}
/* Tab/Unread indicators - gold not blue */
.bb-active-tab, .selected-tab,
#buddypress .item-list-tabs ul li.selected a,
#buddypress .item-list-tabs ul li a:hover,
#buddypress nav.bp-navs ul li.current a,
#buddypress nav.bp-navs ul li a:hover {
  color: var(--tantric-text-title) !important;
  border-bottom-color: var(--tantric-border-inner) !important;
  background: transparent !important;
}

/*============================================================
  19) LOGO - force immediate load, bypass WP Rocket lazy loader
      The logo img uses data-lazy-src; we make it visible always
============================================================*/
#site-logo .bb-logo,
#site-logo .bb-logo img,
.mobile-logo-wrapper .bb-mobile-logo,
.mobile-logo-wrapper .bb-mobile-logo img,
.bb-mobile-panel-header .bb-mobile-logo,
.bb-mobile-panel-header .bb-mobile-logo img {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}
/* Ensure lazy-loaded logo src swaps in correctly */
.site-branding .bb-logo img[data-lazy-src],
.mobile-logo-wrapper img[data-lazy-src] {
  min-width: 120px !important;
  min-height: 34px !important;
}

/*============================================================
  20) LANDSCAPE HAMBURGER - ensure toggle is always visible
      On header-style-1, the panel toggle is in .bb-mobile-header
============================================================*/
.bb-left-panel-icon-wrap,
.bb-left-panel-icon-wrap a,
.push-left.bb-left-panel-mobile,
a.bb-toggle-panel {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ============================================
   End custom.css  v5.2.1
   ============================================ */