
/* Sunoti – Profile Header (PUBLIC) */
/* Namespaced to avoid collisions: sntph-* */

:root{
  --sntph-blue:#1E90FF;
  --sntph-black:#000;
  --sntph-white:#fff;
  --sntph-border:#eef0f2;
  --sntph-muted:#65676b;
  --sntph-up:#16a34a;
  --sntph-down:#dc2626;
}

/* ---- Isolation / shield ---- */
.sntph-root{
  isolation:isolate;
  contain:layout style; /* <- sin paint para que no corte el glow */
  overflow:visible; 
  width:100%;
  max-width:1000px;
  margin:15px auto 22px auto !important;
  padding:0 18px !important;
  box-sizing:border-box;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--sntph-black);
}

.sntph-root *{
  box-sizing:border-box;
}

.sntph-root a,
.sntph-root button{
  font-family: inherit;
}

/* Min reset (avoid theme typography/margins bleeding in) */
.sntph-root h1,
.sntph-root div,
.sntph-root span,
.sntph-root a,
.sntph-root img,
.sntph-root button{
  margin:0;
  padding:0;
  border:0;
  text-decoration:none;
}

/* Card */
.sntph-card{
  background:var(--sntph-white);
  padding:0 !important;
}

.sntph-card:before{content:'';display:block;height:0;}


/* Layout */
.sntph-header-content{
  padding:0 !important;
  display:flex;
  align-items:flex-start;
  gap:24px;
  width:100%;
}
.sntph-pic{flex:0 0 auto;}

/* Avatars */
.sntph-avatar,
.sntph-avatar-story,
.sntph-avatar-story-off{
  width:220px;height:220px;border-radius:50%;
  object-fit:cover;display:block;
  border:4px solid var(--sntph-white);
}

.sntph-avatar{
  box-shadow: 0 0 26px 4px #cccccc;
}

.sntph-avatar-story-off{
  box-shadow: 0 0 0 4px #cccccc;
}

.sntph-avatar-story{
  box-shadow:
    0 0 0 4px var(--sntph-blue),
    0 0 18px 6px rgba(30,144,255,.28);
  animation: sntphStoryLoopNoZoom 1.25s ease-in-out infinite;
}

@keyframes sntphStoryLoopNoZoom{
  0%{
    box-shadow:
      0 0 0 4px var(--sntph-blue),
      0 0 0 4px rgba(30,144,255,.60),
      0 0 20px 6px rgba(30,144,255,.20);
  }
  45%{
    box-shadow:
      0 0 0 4px var(--sntph-blue),
      0 0 0 16px rgba(30,144,255,0),
      0 0 32px 12px rgba(30,144,255,.45);
  }
  100%{
    box-shadow:
      0 0 0 4px var(--sntph-blue),
      0 0 0 26px rgba(30,144,255,0),
      0 0 20px 6px rgba(30,144,255,.20);
  }
}
@media (prefers-reduced-motion: reduce){
  .sntph-avatar-story{ animation:none; }
}

.sntph-info{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

/* Title */
.sntph-title-block{display:flex;flex-direction:column;gap:4px;}
.sntph-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-start;}
.sntph-name{
  font-size:28px;
  font-weight:800;
  letter-spacing:-.5px;
  line-height:1.1;
}
.sntph-verified{width:24px;height:24px;object-fit:contain;}
.sntph-username{font-size:18px;color:var(--sntph-muted);font-weight:400;}

/* Status */
.sntph-status-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}

.sntph-rank-tag{
  font-weight:800;
  color:var(--sntph-blue);
  font-size:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-variant-numeric: tabular-nums;
}

.sntph-trending{
  background:#FF4500;
  color:#fff;
  padding:4px 12px !important;
  border-radius:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
}

.sntph-category-badge{
  background:#eef6ff;
  color:var(--sntph-blue);
  padding:4px 12px !important;
  border-radius:6px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.sntph-popular-badge{
  background:var(--sntph-blue);
  color:#fff;
  padding:4px 12px !important;
  border-radius:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
}

.sntph-stream-live{
  background:red;
  color:#fff;
  padding:4px 8px !important;
  border-radius:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
}

.sntph-stream-live:hover{color:#fff;}

.sntph-stream-live-circle{
  display:inline-block;
  line-height:1;
  animation:sntphRecBlink 1s infinite;
  transform-origin:center;
}
@keyframes sntphRecBlink{
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .2; transform: scale(.9); }
}

.sntph-happyb{
  background:#13c600;
  color:#fff;
  padding:4px 12px !important;
  border-radius:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
}

/* Meta */
.sntph-meta-row{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:14px;
  color:var(--sntph-muted);
  padding:12px 0 !important;
  border-top:1px solid #f0f0f0;
  border-bottom:1px solid #f0f0f0;
}
.sntph-meta-item b{color:var(--sntph-black);}

/* Actions */
.sntph-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
.sntph-btn{
  height:40px;
  padding:0 18px !important;
  border-radius:8px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all .2s ease;
  text-decoration:none !important;
  line-height:40px;
  user-select:none;
}
.sntph-btn-primary{background:var(--sntph-blue);color:#fff !important;}
.sntph-btn-primary:hover{filter:brightness(.93);}
.sntph-btn-secondary{background:#f0f2f5;color:#000 !important;}
.sntph-btn-secondary:hover{background:#f9f9f9;}
.sntph-btn-secondary:active{background:#f0f2f5 !important;}

.sntph-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;line-height:1;flex:0 0 16px;}
.sntph-ico i{font-size:16px;line-height:1;display:block;}

/* Mobile */
@media (max-width:768px){
  .sntph-root{padding:18px !important;}
  .sntph-header-content{flex-direction:column;align-items:center;text-align:center;}
  .sntph-title-row{justify-content:center;}
  .sntph-status-row,.sntph-meta-row,.sntph-actions{justify-content:center;}
}

/* Hide theme duplicates ONLY when active */
body.sntph-active .entry-header h1,
body.sntph-active header.entry-header h1,
body.sntph-active h1.entry-title,
body.sntph-active h1.post-title,
body.sntph-active .entry-header .entry-title,
body.sntph-active .wp-block-post-title{
  display:none !important;
}

body.sntph-active .entry-header .wp-block-post-featured-image,
body.sntph-active .entry-header figure.wp-block-post-featured-image,
body.sntph-active .entry-header .post-thumbnail,
body.sntph-active header.entry-header .post-thumbnail,
body.sntph-active figure.wp-block-post-featured-image,
body.sntph-active .wp-block-post-featured-image,
body.sntph-active .post-thumbnail,
body.sntph-active .featured-image,
body.sntph-active .featured-media,
body.sntph-active .post-featured-image,
body.sntph-active .single-post .post-thumbnail{
  display:none !important;
}


.sntph-share-label{display:inline;}


/* --- Force our title visible even if the theme hides H1 globally --- */
.sntph-root .sntph-name,
.sntph-root .sunoti-name{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:2 !important;
}
body.sntph-active .sntph-root h1{
  display:block !important;
  visibility:visible !important;
}
