/* ============================================================================
   Studio71 Creator Portfolio — front-end styles
   Philipp Breidenbach (with Claude Code): 2026-06-23 | v2
   Enqueued by the plugin (s71-creator-portfolio.php). Pairs with the shortcodes
   in includes/shortcodes.php (pf_creator_stats, pf_creator_list,
   pf_creator_demographics, pf_creator_hashtags).
   ============================================================================ */

/* --- Social Reach stats bar (pf_creator_stats): Total Reach + per-platform --- */
/* Zone panel — same look as the demographics group panels, so the blocks align
   and share a left edge (Social Reach starts where the gender panel starts). */
.pf-stats-zone { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 1.25rem 1.5rem 1.4rem; margin: 0 0 1.5rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-sizing: border-box; }
.pf-stats-heading { color: #eb002a !important; margin: 0 0 .6rem; }   /* above the zone panel */
.pf-stats { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-end; }  /* labels share one baseline */
.pf-stat { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; }
.pf-stat-icon { width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(1); }  /* white logos */
.pf-stat-num { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.pf-stat-unit { font-size: .85rem; opacity: .8; }
.pf-stat--total { padding-right: 2.5rem; border-right: 1px solid rgba(255,255,255,.2); }
.pf-stat--total .pf-stat-num { font-size: 3rem; color: #00ffcf; }   /* enlarged mint Total Reach */
/* linked tiles (pf_url present) — clickable icon + number, opens the channel.
   !important + border-bottom:0 to beat Avada's default dotted link underline. */
.pf-stat--link, .pf-stat--link:hover, .pf-stat--link:focus, .pf-stat--link:active { text-decoration: none !important; border-bottom: 0 !important; color: inherit; }
.pf-stat--link { cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.pf-stat--link:hover { transform: translateY(-2px); opacity: .85; }
.pf-stat--link:focus-visible { outline: 2px solid #00ffcf; outline-offset: 4px; border-radius: 6px; }
.pf-stat--link .pf-stat-icon { border: 0 !important; }

/* --- Creator sidebar (pf_creator_list): avatar + name, current highlighted --- */
/* Scrolls when the list is taller than the viewport, but the scrollbar chrome is
   hidden (the theme was painting it brand-red). overflow-x:hidden kills the
   horizontal bar that long names would otherwise trigger. */
.pf-creator-list { position: sticky; top: 120px; max-height: 80vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.pf-creator-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pf-creator-list ul { list-style: none; margin: 0; padding: 0; }
.pf-creator-list a { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; color: #fff; text-decoration: none !important; border-bottom: 0 !important; }
.pf-creator-list img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.pf-creator-list .pf-creator-name { line-height: 1.2; }
.pf-creator-list li.is-active a, .pf-creator-list a:hover { color: #eb002a; font-weight: 700; text-decoration: none !important; }
@media (max-width: 1024px) { .pf-creator-list { display: none; } }   /* desktop-only browse aid */

/* --- Audience demographics (pf_creator_demographics) --- */
.pf-demo { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: stretch; margin-top: 1.5rem; }
.pf-demo-heading { flex: 0 0 100%; margin: 0 0 .5rem; color: #eb002a !important; font-size: 1.4rem; }   /* largest */
/* Each group sits in its own rounded "zone" panel — translucent on the dark bg,
   subtle border + frost; align-items:stretch makes the panels equal height. */
.pf-demo-group { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 1.25rem 1.5rem 1.4rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-sizing: border-box; }
/* group titles must beat Avada's <h5> theme styling -> !important */
.pf-demo .pf-demo-group-title { font-size: .95rem !important; font-weight: 700 !important; margin: 0 0 .9rem !important; color: #00ffcf !important; text-transform: uppercase; letter-spacing: .04em; }
.pf-demo-group--gender, .pf-demo-group--country { width: 260px; max-width: 100%; }

/* gender = big colour-matched percentage numbers (no bar), CreatorIQ style.
   Centered in the panel so they read large beside the age bars. */
.pf-demo-group--gender { display: flex; flex-direction: column; }
.pf-demo-gender { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: .9rem; }
.pf-demo-gnum { display: flex; align-items: baseline; justify-content: flex-start; gap: .5rem; }
.pf-demo-gpct { font-size: 2.8rem; font-weight: 800; line-height: 1; }
.pf-demo-glabel { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.pf-demo-gnum--f .pf-demo-gpct { color: #00ffcf; }   /* female = mint */
.pf-demo-gnum--m .pf-demo-gpct { color: #eb002a; }   /* male = red */

/* horizontal bars (country, etc.) — fill scaled to group max in the shortcode */
.pf-demo-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.pf-demo-bar { display: grid; grid-template-columns: 5rem 1fr 2.6rem; align-items: center; gap: .6rem; }
.pf-demo-label { font-size: .9rem; }
.pf-demo-track { height: 9px; background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden; }
.pf-demo-fill { display: block; width: var(--pf-bar, 0%); height: 100%; background: #00ffcf; border-radius: inherit; transform-origin: left; animation: pf-demo-grow 1.1s cubic-bezier(.2,.7,.2,1) both; }
.pf-demo-value { font-size: .9rem; font-weight: 700; text-align: right; }
.pf-demo-bar:hover .pf-demo-fill { filter: brightness(1.15); }
@keyframes pf-demo-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* age = vertical bars; fill anchored to the BOTTOM, tallest (= group max) fills the track */
.pf-demo-group--age .pf-demo-bars { flex-direction: row; align-items: flex-end; gap: 1.1rem; }
.pf-demo-group--age .pf-demo-bar { display: flex; flex-direction: column-reverse; align-items: center; gap: .35rem; }
.pf-demo-group--age .pf-demo-track { width: 26px; height: 110px; display: flex; flex-direction: column; justify-content: flex-end; }   /* wider + taller bars */
.pf-demo-group--age .pf-demo-fill { width: 100%; height: var(--pf-bar, 0%); transform-origin: bottom; animation-name: pf-demo-grow-v; }
.pf-demo-group--age .pf-demo-label { font-size: .82rem; }
.pf-demo-group--age .pf-demo-value { font-size: .82rem; text-align: center; }
@keyframes pf-demo-grow-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 640px) { .pf-demo-bar { grid-template-columns: 4.5rem 1fr 2.4rem; } }

/* --- Hashtags (pf_creator_hashtags): each term in its own frosted pill --- */
/* Same translucent card look as the stats/demographics zones. !important on
   typography to beat Avada's <span>/.fusion-text styling. */
.pf-hashtags { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; padding: 0; }
.pf-hashtag { display: inline-block; padding: .38rem .85rem; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #ffffff !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .02em; font-size: .9rem; line-height: 1.2; }

/* --- Contact button (pf_creator_contact): mint mailto CTA --- */
/* !important beats Avada's default link underline / colour. */
.pf-contact, .pf-contact:hover, .pf-contact:focus, .pf-contact:active { text-decoration: none !important; border-bottom: 0 !important; }
.pf-contact { display: flex; width: fit-content; align-items: center; gap: .5rem; margin: 4rem 0 2.5rem; padding: .3rem 1rem; background: #eb002a; color: #ffffff !important; border-radius: 999px; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .02em; font-size: 1.4rem; line-height: 1.2; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.pf-contact:hover { transform: translateY(-2px); opacity: .9; }
.pf-contact:focus-visible { outline: 2px solid #eb002a; outline-offset: 4px; }
.pf-contact-icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; }