/* ============================================
    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.0
    Updated: 2026-06-11  (design-system sync — single-border cards,
                          semi-transparent header, orange-gold CTA)
   ============================================ */

/*============================================================
  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) 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 — matches the feed) */
  --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;
}

/*============================================================
  3) 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;
}

/*============================================================
  4) FIXED VELVET BACKGROUND
     Primary: R2-hosted velvet drape photo.
     Fallback: CSS radial gradient (works when image unavailable).
============================================================*/
@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 (no image dependency) */
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;
}

/*============================================================
  5) HEADER — semi-transparent dark screen over the velvet.
     Lighter than before so the drape shows through.
============================================================*/
.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;
}

/*============================================================
  6) 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;
}

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

/*============================================================
  8) 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;
}

/*============================================================
  9) 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; }

/*============================================================
  10) TEMPLE CARDS — single thin orange border + soft glow.
      Translucent dark-wine fill that floats over the velvet.
      Brightens on hover. 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 decoration that used to create the moat */
.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;
}

/*============================================================
  11) 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;
}

/*============================================================
  12) 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;
  width: 88px; height: 88px;
  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; height: 160px !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);
}

/*============================================================
  13) BUTTONS
  Primary / submit actions → orange-gold gradient (the 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;
}

/*============================================================
  14) 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;
  }
}

/*============================================================
  15) 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; }

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