/* ============================================
    Custom stylesheet, including:
      • self-hosted fonts
      • velvet background image (fixed)
      • BuddyPanel gradient
    ============================================

Theme Name:    Tantric Awakening™ Virtual Temple - custom style sheet
                            (BuddyBoss Child)
Description:       Global type, background, frames, cards, and fixes.
Author: 	              Andrei Knight, TantricAwakening.net
Author URl: 	       https://www.TantricAwakening.net
License: 		GNU General Public License v3 or later
License URl: 	http://www.gnu.org/licenses/gpl-3.0.html
Template: 		buddyboss-theme
File:                     /wp-content/themes/tantric-virtual-temple/assets/css/custom.css
Version: 		5.1.3

   Purpose:
     - Retain global typography + rose-gold framing
     - Integrate velvet background layer
     - Clean redundant BuddyBoss overrides
     - Maintain alignment + scroll stability
*/

/*============================================================
  1) FONTS – latin + latin-ext (Bonheur Royale & Lugrasimo)
     (Note: @font-face does not accept color)
============================================================*/
@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
============================================================*/
:root{
  /* locked typography colors */
  --tantric-text-title:#ffd9a8;  /* warm gold */
  --tantric-text-body: #ffb56b;  /* rose gold */

  /* borders + glow */
  --tantric-border-inner:#d48345;                    /* softened BuddyBoss inner */
  --tantric-border-outer:rgba(255,198,135,.42);      /* temple outer line */
  --tantric-aura-outer:0 0 22px rgba(255,210,150,.28);
  --tantric-aura-outer-hover:0 0 26px rgba(255,220,170,.35);
  --tantric-aura-inner:inset 0 0 10px rgba(255,200,150,.26);

  /* burgundy + layout */
  --tantric-burgundy-1:#3D0203;
  --tantric-burgundy-2:#2C0D0D;
  --tantric-underlay:#200202;

  --tantric-radius:14px;
  --tantric-radius-inner:12px;
  --tantric-moat-w:12px;

  --tantric-page-padding:clamp(16px,4vw,28px);
  --tantric-content-max:1200px;
}

/*============================================================
  3) BASE TYPE + GLOBAL COLORS (locked)
============================================================*/
html, body{
  font-family:'Lugrasimo', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 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', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
  color: var(--tantric-text-title);
  font-weight:400;
  letter-spacing:.2px;
}

/*============================================================
  4) FIXED VELVET BACKGROUND (5.0.14 reference)
============================================================*/
@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;
  }
}
/* Dedicated fixed layer (functions.php injects #tantric-fixed-bg) */
#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 */
#page,.site,.site-content,.bb-grid,#wrapper,#content,.bb-container{
  position:relative; z-index:1;
}

/*============================================================
  5) HEADER & BUDDYPANEL GRADIENTS
============================================================*/
.site-header,
.site-header .site-header-container,
.bb-header, header#masthead{
  background:linear-gradient(180deg, var(--tantric-burgundy-1) 0%, var(--tantric-burgundy-2) 100%) !important;
  border:none !important;
  box-shadow:none !important;
}

/* Panel/drawer fill full height; inner parts transparent */
.bb-mobile-panel-wrapper.left,
aside.buddypanel{
  background:linear-gradient(180deg, var(--tantric-burgundy-1) 0%, var(--tantric-burgundy-2) 100%) !important;
  top:0 !important; bottom:0 !important;
  box-shadow: inset -1px 0 0 rgba(255,215,160,.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;
}

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

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

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

/*============================================================
  8) WOBBLE CONTROL (no horizontal jiggle)
============================================================*/
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; }

/*============================================================
  9) TEMPLE CARDS – DOUBLE BORDER + MOAT + GLOW
     - Keep softened inner line (BuddyBoss), round corners
     - Add OUTER line via :before to create the moat
     - Subtle aura; thumbnails live inside the inner line
============================================================*/
/* Base nodes for decoration */
.blog .post, .archive .post, .single .entry,
.bb-activity-item, .widget, .bb-profile-card, .bb-card{
  position:relative;
  border:1px solid var(--tantric-border-inner) !important;  /* softened */
  border-radius:var(--tantric-radius-inner) !important;
  background:transparent !important;
  box-shadow:none !important;
  margin: 1.25rem 0; /* vertical spacing between cards */
}

/* OUTER border + moat */
.blog .post:before, .archive .post:before, .single .entry:before,
.bb-activity-item:before, .widget:before, .bb-profile-card:before, .bb-card:before{
  content:""; position:absolute; inset:0;
  border-radius:var(--tantric-radius);
  box-shadow:0 0 0 1px var(--tantric-border-outer), var(--tantric-aura-outer);
  padding:var(--tantric-moat-w);
  background:transparent;
  pointer-events:none; z-index:0;
}

/* INNER glow layer */
.blog .post:after, .archive .post:after, .single .entry:after,
.bb-activity-item:after, .widget:after, .bb-profile-card:after, .bb-card:after{
  content:""; position:absolute; inset: var(--tantric-moat-w);
  border-radius:var(--tantric-radius-inner);
  box-shadow: var(--tantric-aura-inner);
  pointer-events:none; z-index:0;
}

/* Hover/active aura bump */
.blog .post:hover:before, .archive .post:hover:before, .single .entry:hover:before,
.bb-activity-item:hover:before, .widget:hover:before, .bb-profile-card:hover:before, .bb-card:hover:before{
  box-shadow:0 0 0 1px var(--tantric-border-outer), var(--tantric-aura-outer-hover);
}

/* Ensure real content sits above decorative layers */
.blog .post .entry-content,
.blog .post .entry-header,
.single .entry .entry-header,
.single .entry .entry-content,
.bb-card > *{
  position:relative; z-index:1;
  padding-left: calc(var(--tantric-moat-w) + 1rem);
  padding-right: calc(var(--tantric-moat-w) + 1rem);
  padding-top: 1rem; padding-bottom: 1.1rem;
}

/* Thumbnails INSIDE the inner border, no extra orange border */
.post-thumbnail, .entry-thumbnail, .bb-card .card-media{
  position:relative; z-index:1;
  margin: calc(var(--tantric-moat-w) + .65rem) calc(var(--tantric-moat-w) + 1rem) 0;
  border-radius: var(--tantric-radius-inner);
  overflow:hidden; border:none !important; box-shadow:none !important;
}
.post-thumbnail img, .entry-thumbnail img, .bb-card .card-media img{
  display:block; width:100%; height:auto;
  object-fit: contain;  /* resize, don’t crop on list */
  border:none !important; box-shadow:none !important;
  border-radius: var(--tantric-radius-inner);
}

/*============================================================
  10) TITLES / META COLOR LOCKS
============================================================*/
.entry-title, .post-title, .single .entry-title, .bb-title{
  color: var(--tantric-text-title) !important;
}
.entry-meta, .entry-meta a,
.posted-on, .posted-on a,
.entry-date, .byline, .comments-link a,
.single .entry .entry-meta, .single .entry .entry-meta a{
  color: var(--tantric-text-body) !important;  /* date uses body color */
  opacity:.95;
}

/*============================================================
  11) AVATARS / PROFILE PHOTOS (circles)
============================================================*/
.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;     /* author card size */
  border:2px solid rgba(255,215,160,.25);
  box-shadow:0 0 0 2px rgba(0,0,0,.2);
}
/* Large profile header avatar */
#buddypress div.item-header img.avatar{
  width:160px; height:160px !important;
  border-radius:50% !important;
  border:2px solid rgba(255,215,160,.25);
  box-shadow:0 0 0 2px rgba(0,0,0,.25);
}

/*============================================================
  12) BUTTONS / LOGIN
============================================================*/
button, .button, .bb-button, .bp-primary-action, .bp-secondary-action,
input[type=submit], .bb-form button{
  border-radius:6px !important;
  border:1px solid rgba(255,215,160,.25);
  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;
}
/* Login fields */
.login input[type="text"], .login input[type="password"],
input[type="text"], input[type="email"], input[type="password"]{
  background:rgba(255,215,160,.08) !important;
  color:var(--tantric-text-body) !important;
}

/* Header “Sign in” button (match search icon color) */
.site-header .header-actions .button,
.site-header .login-link a{
  color: var(--tantric-text-title) !important;
  border:1px solid rgba(255,215,160,.25);
  padding:.4rem .7rem; border-radius:6px;
  background:linear-gradient(180deg, var(--tantric-burgundy-1), var(--tantric-burgundy-2)) !important;
}

/*============================================================
  13) PORTRAIT vs LANDSCAPE
============================================================*/
/* Portrait: list items mimic hero title size */
@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; } /* resize, don’t crop */
}
/* Landscape: hero follows grid sizing (no double width) */
@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;
  }
  /* Let the grid control columns so hero matches other cards */
  .bb-loop-posts .post,
  .blog .posts-list .post{
    width:auto;
  }
}

/*============================================================
  14) MISC CLEANUPS
============================================================*/
#wrapper:before,#wrapper:after,#content:before,#content:after{ display:none !important; }
main, .site-main, .content-area{ position:relative; z-index:1; }

/* Menu item color parity with user/account dropdown */
.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; }

/* Remove stray light lines under header / panel edges */
.bb-header, .site-header{ border-bottom:none !important; }
aside.buddypanel{ border-right:none !important; }


/* ============================================
   End custom.css
   ============================================ */