/* ======================================================
   snippet.css — 03.17.2026 
   Snippet Parser + Accordion Styling (scoped)
   ====================================================== */


/* ======================================================
   SNIPPET TAG STYLING (scoped)
   Matches parser output: .tbp-note/.tbp-offer/etc
   ====================================================== */

.tbp-snippet-raw{
  margin: 0;
}

/* headings */
.tbp-snippet-raw h1{
  font-size: 2.25rem;  /* 36px */
  font-weight: 700;
  color: #FFFFFF; /* ................. H1 White */
  margin: 14px 0 8px;
}

.tbp-snippet-raw h2{
  font-size: 1.75rem;  /* 24px */
  font-weight: 600;
  color: #EBD96F; /*.................. H2 Golden */
  margin: 14px 0 10px;
}

.tbp-snippet-raw h3{
  font-size: 1.32rem;  /* 20px */
  font-weight: 600;
  color: #FFA346; /*.................. H3 Pollen */
  margin: 12px 0 8px;
}


/* base paragraph */
.tbp-snippet-raw p{
  margin: 0 0 12px;
  font-size: 1.00rem;
  font-weight: 500;
  color: #FAF5E2; /* .................. p Butter */
  line-height: 1.55;
}

.tbp-snippet-raw .tbp-sub{
  font-size: 1.00rem;
  font-weight: 500;
  color: #F0ECB6; /* .....F0ECB6.......... SUB Honey */
}

/* semantic paragraph classes */

.tbp-snippet-raw .tbp-note{
  font-size: 1.00rem;
  font-weight: 400;
  color: #FAF5E2; /* .................. Note Butter */
}

.tbp-snippet-raw .tbp-offer{
  font-size: 1.00rem;
  font-weight: 500;
  color: #87B0EC; /* .................. Offer Blue */
}


.tbp-snippet-raw .tbp-gold{
  font-size: 1.125rem;
  font-weight: 400;
  color: #FFD000; /* .................. gold Gold */
}

.tbp-snippet-raw .tbp-ogold{
  font-size: 1.00rem;
  font-weight: 400;
  color: #EBD96F; /* .................. ogold Golden */
}

.tbp-snippet-raw .tbp-honey{
  font-size: 1.00rem;
  font-weight: 500;
  color: #F0ECB6; /* .................. honey Honey */
}

.tbp-snippet-raw .tbp-honey20{
  font-size: 2.25rem;  /* 36px */
  font-weight: 700;
  color: #F0ECB6; /* .................. honey Honey20 */
}
.tbp-snippet-raw .tbp-wn10{
  font-size: 0.625rem;
  font-weight: 400;
  color: #F0ECB6; /* .................. WN10 Px Honey WingNut */
}

.tbp-snippet-raw .tbp-br12{
  font-size: 0.75rem;
  font-weight: 400;
  color: #F0ECB6; /* .................. BR12 Px Honey BunnyR */
}

.tbp-snippet-raw .tbp-sr14{
  font-size: 0.875rem;
  font-weight: 600;
  color: #F0ECB6; /* .................. SR14 Px Honey Summer */
}

.tbp-snippet-raw .tbp-gg14{
  font-size: .875rem;
  font-weight: 600;
  color: #EBD96F; /* .................. GiGi14 Px GiGi */
}
.tbp-snippet-raw .tbp-sk18{
  font-size: 1.125rem;
  font-weight: 500;
  color: #EBD96F; /* .................. Sk18 Px Sky */
}
.tbp-snippet-raw .tbp-pr20{
  font-size: 1.313rem;
  font-weight: 500;
  color: #EBD96F; /* .................. PR20 Px ShortCake */
}
.tbp-snippet-raw .tbp-bz24{
  font-size: 1.500rem;
  font-weight: 600;
  color: #EBD96F; /* .................. BZ24 Px Breeza */
}

.tbp-snippet-raw .tbp-gdlite{
  font-size: 1.400rem;
  font-weight: 800;
  color: #EBD96F; /* ..................  GDLite Golden */
  margin: 12px 0 8px;
}

.tbp-snippet-raw .tbp-pollen{
  font-size: 1.00rem;
  font-weight: 500;
  color: #FFA346; /* ..................  Pollen */
  margin: 12px 0 8px;
}

.tbp-snippet-raw .tbp-butter{
  font-size: 1.00rem;
  font-weight: 500;
  color: #FAF5E2; /*  .................. Butter */
}

.tbp-snippet-raw .tbp-wing{
  font-size: 1.30rem;
  font-weight: 600;
  color: #FFFFFF; /*  .................. Wing */
}

.tbp-snippet-raw .tbp-yoke{
  font-size: 1.10rem;
  font-weight: 300;
  color: #FDFC01; /*  .................. Yoke */
}

.tbp-snippet-raw .tbp-wax{
  font-size: 1.00rem;
  font-weight: 500;
  color: #CFBA6F; /*  .................. Wax */
}

.tbp-snippet-raw .tbp-comb{
  font-size: 1.00rem;
  font-weight: 500;
  color: #9B9375; /* .................. COMB */
}

.tbp-snippet-raw .tbp-propolis{
  font-size: 1.125rem;
  font-weight: 600;
  color: #402A16; /*  .................. [PROPOLIS] Propolis */
}

.tbp-snippet-raw .tbp-related{
  font-size: 1.00rem;
  font-weight: 500;
  color: #FFD000; /* .................. [RELATED] GOLD */
  text-decoration: none;
  text-underline-offset: 3px;
}


/* ==========================================
   TBP FAQ BLOCK (matches snippets.php output)
   Outputs:
   - .tbp-faq-q
   - .tbp-faq-a
   - .tbp-faq-line
   ========================================== */

.tbp-snippet-raw .tbp-faq{
  margin: 10px 0 14px 0;
}

/* Question (Wax Gold / italic) */
.tbp-snippet-raw .tbp-faq-q{
  font-size: 1.00rem;
  font-weight: 600;
  color: #CFBA6F; /* Wax */
  font-style: italic;
  margin: 10px 0 4px 0;
}

/* Answer (Butter / normal) */
.tbp-snippet-raw .tbp-faq-a{
  font-size: 1.00rem;
  font-weight: 400;
  color: #FAF5E2; /* Butter */
  font-style: normal;
  margin: 0 0 10px 0;

  /* soft visual separation */
  padding-left: 14px;
  border-left: 2px solid rgba(207, 186, 111, 0.35);
}

/* Helper/extra lines inside FAQ blocks (Comb muted) */
.tbp-snippet-raw .tbp-faq-line{
  font-size: 1.00rem;
  font-weight: 400;
  color: #9B9375; /* Comb */
  font-style: normal;
  margin: 0 0 10px 0;
}


/* links in snippets */
.tbp-snippet-raw a{
  color: #FDFC01; /* ..................  YOKE */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tbp-snippet-raw .tbp-lead{ /* ..for text following [W]..... Honey tone */
  font-size: 1.25rem;
  font-weight: 500;
  color: #F0ECB6;  
  line-height: 1.6;
  text-align: left;
}

/* Parent pages center everything — snippets must opt out - added 12:43 am 119 */
.tbp-parent-explained .tbp-snippet-raw{
  text-align: left;
}


/* Dropcap Block 2 — FINAL (baseline-aligned, cross-browser) */
.tbp-snippet-raw p.tbp-lead span.tbp-dropcap{
  all: revert;
  float: left;
  display: inline-block;

  font-size: 1.7rem;
  line-height: 1;

  font-weight: 600;
  color: #FFD000;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 3px;

  padding: 1px 6px 1px;

  /* baseline alignment */
  margin-top: -0.10em;
  margin-right: 0;
  margin-left: 0;
}

.tbp-snippet-raw p.tbp-lead{
  text-indent: -0.35em;
  padding-left: 0.35em;
}


/* =========================
   LIST FIX — ACCORDION ARROW STYLE
   ========================= */

.tbp-snippet-raw ul.tbp-list{
  margin: 10px 0 14px 0;
  padding-left: 0;
  list-style: none !important;
  text-align: left;
}

.tbp-snippet-raw ul.tbp-list li.tbp-list-main{
  list-style: none !important;
  position: relative;
  padding-left: 22px;
  margin: 6px 0;
  text-align: left;
}

.tbp-snippet-raw ul.tbp-list li.tbp-list-main::before{
  content: "▼";
  position: absolute;
  left: 0;
  top: 2px;
  color: #EBD96F;
  font-size: 14px;
  line-height: 1;
  transform: rotate(-90deg);
  transform-origin: center center;
}

.tbp-snippet-raw .tbp-list-main{
  color: #F0ECB6;
  font-size: 1.00rem;
  font-weight: 400;
  margin: 6px 0;
}

.tbp-snippet-raw .tbp-list-faq{
  color: #FFD000;
  font-size: 1.00rem;
  font-weight: 400;
  margin: 6px 0;
  font-style: italic;
}

/* mobile tighten */
@media (max-width: 640px){
  .tbp-accordion summary{
    font-size: 18px;
    padding: 11px 12px;
  }
}

/* Back arrow — matches accordion style */
.tbp-back-arrow{
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 8px;
  vertical-align: middle;

  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #EBD96F; /* same gold */

  position: relative;
  top: -1px; /* tiny vertical alignment tweak */
}

/* ==============================================
   HERO SNIPPET — CENTERED
   ============================================== */
/* Center hero snippet content */

.tbp-snippet-raw .tbp-hero {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.tbp-snippet-raw .tbp-hero h1,
.tbp-snippet-raw .tbp-hero h2,
.tbp-snippet-raw .tbp-hero p {
  text-align: center;
}

/* Added HTML to Snipes ... needed correct link color */
/* ======================================================
   Snippet links — TBP 3.0
   ====================================================== */

.tbp-snippet-raw a {
  color: #ffd000;              /* TBP gold */
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted rgba(255, 208, 0, 0.6);
}

.tbp-snippet-raw a:hover {
  color: #fff3b0;
  border-bottom-style: solid;
}

.tbp-snippet-raw a:focus {
  outline: none;
  text-decoration: underline;
}

/* ======================================================
   TBP Snippet — Alignment + Text-Only Extensions
   ====================================================== */

/* Alignment overrides */
.tbp-left {
  text-align: left;
}

.tbp-center {
  text-align: center;
}

/* Text-only semantic block */
.tbp-text {
  max-width: 100%;
}

/* Optional: ensure lists respect alignment */
.tbp-left ul,
.tbp-left ol {
  margin-left: 1.25rem;
}

/* ======================================================
   Snippet extensions — 02.01.2026
   ====================================================== */
.tbp-left { text-align: left; }
.tbp-center { text-align: center; }
.tbp-text-block { max-width: 100%; }

/* ======================================================
   [TEXT] Snippet Block — Final Styling
   ====================================================== */

.tbp-text-block {
  background: #1b1b1b;                 /* deep charcoal */
  padding: 1.5rem 2rem;
  margin: 1.5rem auto;
  border: 1px solid #2a2a2a;           /* subtle edge, not a box */
  border-left: 4px solid #B4A262;      /* old gold accent */
  border-radius: 6px;                  /* matches accordion feel */
}


/* Mobile refinement */
@media (max-width: 768px) {
  .tbp-text-block {
    padding: 1.25rem 1.25rem;
  }
}

/* Universal snippet image containment */
.tbp-snippet-pic img,
.tbp-snippet-rotate img,
.tbp-snippet-rotate-4x3 img,
.tbp-snippet-video video {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Caption should inherit image centering */
figure.tbp-snippet-pic {
  text-align: center;
}

/* ======================================================
   LIGHTBOX MAGNIFY INDICATOR
   ====================================================== */

figure.tbp-snippet-pic a.tbp-lightbox{
  position: relative;
  display: inline-block;
}

figure.tbp-snippet-pic a.tbp-lightbox::after{
  content: "🔍";
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 20px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 6px;
  border-radius: 50%;
  pointer-events: none;
}

/* ======================================================
   TBP LIGHTBOX OVERLAY
   ====================================================== */

#tbp-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
}

.tbp-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.85);
}

.tbp-lightbox-inner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.tbp-lightbox-inner img{
  max-width:100%;
  max-height:100%;
  height:auto;
  border-radius:6px;
  box-shadow:0 0 30px rgba(0,0,0,0.8);
}

.tbp-lightbox-close{
  position:absolute;
  top:16px;
  right:16px;
  font-size:32px;
  line-height:32px;
  width:44px;
  height:44px;
  border:none;
  background:rgba(0,0,0,0.6);
  color:#fff;
  border-radius:50%;
  cursor:pointer;
}

.tbp-lightbox-close:hover{
  background:rgba(255,255,255,0.15);
}


/* ======================================================
   ROTATE SYSTEM
   03.17.2026 — 02:35 AM CST (America/Chicago)

   .tbp-rotate       = original flexible rotator
   .tbp-rotate-4x3   = fixed 4:3 rotator with temporary placeholder

   Notes:
   - Keep this as the ONLY rotate section in this file
   - Do not duplicate these selectors elsewhere
   ====================================================== */

/* ------------------------------------------------------
   ORIGINAL ROTATE (flex height + smooth fade)
   03.17.2026 — FINAL
   Matches 4x3 behavior but without fixed aspect ratio
/* ------------------------------------------------------
   ORIGINAL ROTATE (flexible width/height, centered)
   03.17.2026 — FINAL FIX
   ------------------------------------------------------ */
.tbp-rotate {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
  overflow: hidden;
}

.tbp-rotate img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 450ms ease-in-out;
}

.tbp-rotate img:first-child {
  opacity: 1;
}
/* End ORIGINAL ROTATE */
/*  End of ORIGINAL ROTATE */


/* ------------------------------------------------------
   ROTATE 4x3 (fixed box + placeholder while first image loads)
   Placeholder is removed by snippet.js when first image is ready
   ------------------------------------------------------ */
.tbp-rotate-4x3 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3;
  margin: 20px auto;
  text-align: center;
  overflow: hidden;
  background: url('/_adam/images/loading-images-frame.jpg') center center / cover no-repeat;
}

.tbp-rotate-4x3.is-ready {
  background: none;
}

.tbp-rotate-4x3 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 450ms ease-in-out;
}

/* ------------------------------------------------------
   Single-image fallback for [ROTATE4x3]
   No permanent placeholder behind the final image
   ------------------------------------------------------ */
.tbp-snippet-rotate-4x3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3;
  margin: 20px auto;
  overflow: hidden;
  text-align: center;
}

.tbp-snippet-rotate-4x3 img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------
   Rotate helpers
   ------------------------------------------------------ */
@media (hover: none), (max-width: 640px) {
  .tbp-rotate::after,
  .tbp-rotate-4x3::after {
    display: none;
  }
}

/* ====================== END ROTATE SYSTEM ====================== */

/* =========================================================
   TBP Media Panel – Snippet Wrapper
   Purpose: Standard container for video/image snippets
   ========================================================= */

.tbp-media-panel {
    background: #1a1a1a;        /* PANEL BACKGROUND
                                   → Darker = heavier frame
                                   → Lighter = softer / blends into page */

    border: 1px solid #2a2a2a; /* PANEL EDGE
                                   → Primary “frame” definition
                                   → Increase contrast for more separation */

    border-radius: 6px;        /* PANEL CORNERS
                                   → Match accordion radius here
                                   → 0 = sharp, 8–10px = softer */

    padding: 16px;             /* INNER SPACING
                                   → Most important comfort knob
                                   → 12px = tighter
                                   → 18–20px = airier */

    margin: 18px 0;            /* OUTER SPACING
                                   → Vertical breathing room
                                   → Adjust to fit content density */
}

/* =========================================================
   Media inside the TBP media panel
   Purpose: Normalize layout + prevent control bleed
   ========================================================= */

/* Panel is responsible for clipping overflow */
.tbp-media-panel {
    overflow: hidden; /* clips video control bar / rounding artifacts */
}

/* Media elements inside the panel */
.tbp-media-panel video,
.tbp-media-panel iframe,
.tbp-media-panel img {
    display: block;   /* removes inline baseline gaps */
    width: 100%;
    height: auto;

    border-radius: 4px;        /* INNER MEDIA CORNERS
                                   → Usually panel radius minus ~2px */

    background: #000;          /* LETTERBOX COLOR
                                   → Visible before video loads
                                   → Keeps black bars clean */
}

/* Optional title/label above media */
.tbp-media-label {
    font-size: 0.95rem;        /* LABEL SIZE
                                   → Slightly smaller than body text */

    font-weight: 600;          /* LABEL WEIGHT
                                   → Semi-bold for hierarchy */

    color: #e6cf7a;            /* ACCENT COLOR
                                   → Gold family = “featured” feel */

    margin-bottom: 10px;       /* SPACE BETWEEN LABEL AND MEDIA */
}

/* =========================================================
   TBP Media Panel – Optional Enhancements (Dark Neutral)
   All colors aligned to #111111 family
   ========================================================= */

/* Subtle depth (very restrained) */
.tbp-media-panel {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    overflow: hidden; /* clips control bar bleed */
}

/* Slightly stronger separation (if desired) */
.tbp-media-panel.strong {
    border-color: #333333;
}

/* Hover affordance (desktop only, very subtle) */
@media (hover: hover) {
    .tbp-media-panel:hover {
        border-color: #3a3a3a;
    }
}

/* Featured variant (dark neutral, no gold) */
.tbp-media-panel.featured {
    border-color: #444444;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        0 1px 3px rgba(0,0,0,0.7);
}

/* Optional top divider (neutral, not gold) */
.tbp-media-panel::before {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent,
        #2a2a2a,
        transparent
    );
    margin-bottom: 12px;
}


/* END OF FILE: snippet.css — 03.17.2026 — 02:35 AM CST */