/* ============================================================
   Y - Connect · Public Styles
   ============================================================ */

/* ── Standalone body ─────────────────────────────────────── */
body.yc-standalone-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ── Outer wrap ──────────────────────────────────────────── */
.yc-connect-wrap {
    --yc-bg:             #0f0f0f;
    --yc-text:           #ffffff;
    --yc-radius:         50px;
    --yc-btn-std-text:   #ffffff;
    --yc-btn-std-bg:     #000000;
    --yc-btn-std-border: #d4a843;
    --yc-btn-hov-text:   #000000;
    --yc-btn-hov-bg:     #d4a843;
    --yc-btn-hov-border: #d4a843;

    background: var(--yc-bg);
    color: var(--yc-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Standalone: full width, natural height */
.yc-connect-wrap.yc-standalone {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ── Single centred column ───────────────────────────────── */
.yc-connect-inner {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 48px 24px 36px;
    box-sizing: border-box;
}

/* ── Header ──────────────────────────────────────────────── */
.yc-header      { text-align: center; margin-bottom: 32px; }
.yc-avatar-wrap { margin-bottom: 14px; }

.yc-avatar {
    width: 88px; height: 88px;
    border-radius: 50%; object-fit: cover;
    border: 3px solid var(--yc-btn-std-border);
    box-shadow: 0 0 0 5px rgba(255,255,255,.06);
    display: inline-block;
}

.yc-title {
    font-size: 22px; font-weight: 700;
    margin: 0 0 8px; color: var(--yc-text); letter-spacing: -.01em;
}

.yc-bio { font-size: 14px; margin: 0; opacity: .7; line-height: 1.6; }

/* ── Items list ──────────────────────────────────────────── */
.yc-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

/* ── Panel — full viewport width bleed ───────────────────── */
/*
 * The panel must bleed to full viewport width regardless of
 * what theme container it's nested inside.
 * Technique: position relative, negative left margin = 50% of
 * viewport minus 50% of its own width, giving true edge-to-edge.
 *
 * Works because:
 *   margin-left: calc(-50vw + 50%)  moves left edge to viewport left
 *   width: 100vw                    stretches to full viewport width
 *   The .yc-items inside is re-centred with max-width + margin:auto
 */
.yc-panel {
    /* padding-top / padding-bottom / background set inline by PHP */
    position: relative;
    width: 100vw;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-sizing: border-box;
}

/* Re-centre the items inside the full-width panel */
.yc-panel > .yc-items {
    max-width: 520px;
    margin-left:  auto;
    margin-right: auto;
    padding-left:  24px;
    padding-right: 24px;
    box-sizing: border-box;
    margin-bottom: 0; /* override default .yc-items margin */
}

/* ── Buttons ─────────────────────────────────────────────── */
.yc-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--yc-radius);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .15s ease, box-shadow .15s ease,
                color .15s ease, background-color .15s ease, border-color .15s ease;

    color:            var(--yc-btn-std-text);
    background-color: var(--yc-btn-std-bg);
    border: 2px solid var(--yc-btn-std-border);
}

.yc-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    color:            var(--yc-btn-hov-text);
    background-color: var(--yc-btn-hov-bg);
    border-color:     var(--yc-btn-hov-border);
}

.yc-btn-label { flex: 1; text-align: center; }
.yc-btn-arrow { opacity: .45; font-size: 16px; }
.yc-btn-icon  { flex-shrink: 0; font-size: 18px; width: 18px; height: 18px; }

/* ── Separator Line ──────────────────────────────────────── */
.yc-separator {
    display: flex;
    align-items: center;
    gap: 10px;
}

.yc-sep-rule-full { display: block; width: 100%; height: 0; }
.yc-sep-rule      { flex: 1; height: 0; }

.yc-sep-label {
    flex-shrink: 0;
    font-weight: 600;
    opacity: .65; white-space: nowrap;
    /* font-size and color applied inline per item */
}

/* ── Image item ──────────────────────────────────────────── */
.yc-image-item { text-align: center; }

.yc-image-item a {
    display: inline-block;
    border-radius: 10px; overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.yc-image-item a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

.yc-image { max-width: 100%; height: auto; display: block; border-radius: 10px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 560px) {
    .yc-connect-inner     { padding: 36px 16px 28px; }
    .yc-panel > .yc-items { padding-left: 16px; padding-right: 16px; }
    .yc-title             { font-size: 19px; }
    .yc-btn               { font-size: 14px; padding: 12px 16px; }
}