/*!
 * JR ATS Core — Public Identity Stylesheet (v11.5.3)
 *
 * Mockup-aligned centered layout. Elementor-resistant via:
 *   - html .selector specificity prefix on every rule
 *   - !important on all layout/color rules
 *
 * Brand color: #5277ba
 *
 * Visual contract (single source of truth — see ProfessionalIdentityShortcode.php):
 *   - Light gray page background (#f5f6f8) frames the whole view.
 *   - Hero elements (avatar, name, position, company, socials, action bar)
 *     float directly on that background — no card wrapper, no shadow.
 *   - Avatar: 120px clean circle, no border, no shadow.
 *   - Name: dark #1a1a1a (NOT brand).
 *   - Position: small muted gray.
 *   - Company: name + leading brand-colored building icon.
 *   - Socials: row of 42px brand-colored circular buttons, white SVG icons.
 *   - Action bar: two equal-width buttons side-by-side, inside the hero flow
 *     (NOT position: fixed). vCard primary (filled brand), Share secondary
 *     (white + light gray border). Border-radius 10px (rounded square,
 *     NOT pill).
 *   - Section cards: flat white, 12px radius, no shadow, RTL alignment,
 *     brand-colored section titles with leading SVG icons.
 *   - Location card: white card with pin avatar on the right, address text,
 *     and a Google Maps share link.
 *
 * Legacy classes from earlier versions (.jrats-pi-stats-grid, .jrats-pi-qr-*,
 * .jrats-pi-hero-left, .jrats-pi-role-sep) are intentionally retained at the
 * bottom in case any admin surface still references them. They no longer
 * render on the public page (shortcode dropped them in v11.5.2 / v11.5.3).
 */

/* =============================================================================
 * 0. CSS variables on the outer wrap.
 * =========================================================================== */

html .jrats-pi-wrap {
    --jrats-pi-brand: #5277ba;
    --jrats-pi-brand-50: #eef3fb;
    --jrats-pi-brand-100: #dce5f3;
    --jrats-pi-brand-700: #3d5a92;
    --jrats-pi-ink: #1a1a1a;
    --jrats-pi-ink-soft: #475569;
    --jrats-pi-ink-mute: #8a8a8a;
    --jrats-pi-surface: #ffffff;
    --jrats-pi-page-bg: #f5f6f8;
    --jrats-pi-border: #e2e4e7;
    --jrats-pi-radius: 12px;
    --jrats-pi-radius-sm: 10px;
    --jrats-pi-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Roboto, "Helvetica Neue", Arial, sans-serif !important;

    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 24px 16px 32px !important;
    background: var(--jrats-pi-page-bg) !important;
    border-radius: 14px !important;
    color: var(--jrats-pi-ink) !important;
    font-family: var(--jrats-pi-font);
    line-height: 1.55 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center !important;
    direction: rtl !important;
}

html .jrats-pi-wrap *,
html .jrats-pi-wrap *::before,
html .jrats-pi-wrap *::after {
    box-sizing: border-box !important;
}

/* Reset paragraph margin so cards don't get unexpected top gap. */
html .jrats-pi-wrap p {
    margin: 0 !important;
}

/* =============================================================================
 * 1. Empty / not-found state.
 * =========================================================================== */

html .jrats-pi-empty {
    min-height: 40vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}
html .jrats-pi-empty-card {
    background: #fff !important;
    border: 1px solid var(--jrats-pi-border) !important;
    border-radius: 12px !important;
    padding: 40px 28px !important;
    text-align: center !important;
    max-width: 380px !important;
    box-shadow: none !important;
}
html .jrats-pi-empty-icon {
    font-size: 44px !important;
    margin-bottom: 10px !important;
    opacity: .55 !important;
}
html .jrats-pi-empty h2 {
    margin: 0 0 6px !important;
    font-size: 18px !important;
    color: var(--jrats-pi-ink) !important;
    font-weight: 700 !important;
}
html .jrats-pi-empty p {
    color: var(--jrats-pi-ink-soft) !important;
    font-size: 14px !important;
}

/* =============================================================================
 * 2. HERO — floats directly on the page background, no card wrapper.
 * =========================================================================== */

html .jrats-pi-hero {
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    overflow: visible !important;
}
html .jrats-pi-hero::before {
    content: none !important;
}
html .jrats-pi-hero-left {
    width: 100% !important;
    min-width: 0 !important;
    display: contents !important;
}

/* Avatar — clean 120px circle. */
html .jrats-pi-avatar {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 0 18px !important;
    background: var(--jrats-pi-brand-50) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    color: var(--jrats-pi-brand) !important;
    font-size: 42px !important;
    letter-spacing: 0 !important;
}
html .jrats-pi-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
html .jrats-pi-avatar-placeholder {
    user-select: none !important;
}

/* Name — dark, not brand. */
html .jrats-pi-name {
    margin: 0 0 6px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: var(--jrats-pi-ink) !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

/* Position line (v11.5.3 — separate from .jrats-pi-role). */
html .jrats-pi-position-line {
    margin: 0 0 12px !important;
    font-size: 14px !important;
    color: var(--jrats-pi-ink-mute) !important;
    text-align: center !important;
}

/* Company line — name + brand-colored building icon. */
html .jrats-pi-company-line {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 22px !important;
    font-size: 14px !important;
    color: var(--jrats-pi-ink) !important;
    flex-direction: row-reverse !important;
    text-align: center !important;
}
html .jrats-pi-company-icon {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--jrats-pi-brand) !important;
    line-height: 0 !important;
}
html .jrats-pi-company-icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

/* Legacy .jrats-pi-role / .jrats-pi-position / .jrats-pi-company chips —
 * kept in case some admin preview still uses them; redirect to the new look. */
html .jrats-pi-role {
    margin: 0 0 12px !important;
    color: var(--jrats-pi-ink-mute) !important;
    font-size: 14px !important;
    text-align: center !important;
}
html .jrats-pi-position {
    color: var(--jrats-pi-ink) !important;
    font-weight: 500 !important;
}
html .jrats-pi-role-sep {
    margin: 0 6px !important;
    color: var(--jrats-pi-ink-mute) !important;
}
html .jrats-pi-company {
    color: var(--jrats-pi-ink) !important;
}

/* Socials — circular brand buttons. */
html .jrats-pi-socials {
    list-style: none !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
}
html .jrats-pi-socials li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
html .jrats-pi-social {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--jrats-pi-brand) !important;
    color: #fff !important;
    text-decoration: none !important;
    border: 0 !important;
    font-size: 0 !important;
    font-weight: 600 !important;
    transition: opacity .15s ease, transform .12s ease !important;
}
html .jrats-pi-social:hover,
html .jrats-pi-social:focus-visible {
    transform: translateY(-1px) !important;
    background: var(--jrats-pi-brand) !important;
    color: #fff !important;
    border-color: transparent !important;
    opacity: .9 !important;
    outline: none !important;
}
html .jrats-pi-social-icon {
    pointer-events: none !important;
    display: inline-flex !important;
    line-height: 0 !important;
}
html .jrats-pi-social-icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #fff !important;
}
html .jrats-pi-wrap .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =============================================================================
 * 3. Action bar — INSIDE the hero flow, two equal buttons side-by-side.
 *    Overrides the legacy position:fixed pattern.
 * =========================================================================== */

html .jrats-pi-actionbar {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    z-index: auto !important;
}

/* =============================================================================
 * 4. Buttons — rounded-square (10px), NOT pill.
 * =========================================================================== */

html .jrats-pi-btn {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 13px 14px !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}
html .jrats-pi-btn:focus-visible {
    outline: 2px solid var(--jrats-pi-brand) !important;
    outline-offset: 2px !important;
}
html .jrats-pi-btn:active {
    transform: translateY(1px) !important;
}
html .jrats-pi-btn svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

html .jrats-pi-btn-primary {
    background: var(--jrats-pi-brand) !important;
    color: #fff !important;
    border-color: var(--jrats-pi-brand) !important;
    box-shadow: none !important;
}
html .jrats-pi-btn-primary:hover {
    background: var(--jrats-pi-brand) !important;
    border-color: var(--jrats-pi-brand) !important;
    color: #fff !important;
    opacity: .92 !important;
}

html .jrats-pi-btn-secondary {
    background: #fff !important;
    color: var(--jrats-pi-brand) !important;
    border-color: var(--jrats-pi-border) !important;
}
html .jrats-pi-btn-secondary:hover {
    border-color: var(--jrats-pi-border) !important;
    color: var(--jrats-pi-brand) !important;
    background: #f8fafc !important;
}

html .jrats-pi-btn-ghost {
    background: transparent !important;
    color: var(--jrats-pi-brand) !important;
    border-color: var(--jrats-pi-brand-100) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
}
html .jrats-pi-btn-ghost:hover {
    background: var(--jrats-pi-brand-50) !important;
}

html .jrats-pi-btn.is-flashing {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}

/* Share wrap (from inline share dropdown) — fill the flex slot. */
html .jrats-pi-actionbar .jrats-pi-share-wrap {
    flex: 1 1 0 !important;
    display: block !important;
    position: relative !important;
}
html .jrats-pi-actionbar .jrats-pi-share-btn {
    width: 100% !important;
    justify-content: center !important;
}

/* =============================================================================
 * 5. Section cards — flat white, no shadow.
 * =========================================================================== */

html .jrats-pi-card {
    background: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 18px !important;
    margin: 0 0 14px !important;
    text-align: right !important;
}
html .jrats-pi-section-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--jrats-pi-brand) !important;
    letter-spacing: 0 !important;
    flex-direction: row-reverse !important;
}
html .jrats-pi-section-icon {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--jrats-pi-brand) !important;
    line-height: 0 !important;
}
html .jrats-pi-section-icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
}
html .jrats-pi-summary {
    margin: 0 !important;
    color: #3a3a3a !important;
    font-size: 13.5px !important;
    line-height: 1.95 !important;
}

/* =============================================================================
 * 6. Location card.
 * =========================================================================== */

html .jrats-pi-location {
    background: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 16px 18px !important;
    margin: 0 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-direction: row-reverse !important;
    text-align: right !important;
}
html .jrats-pi-location-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-direction: row-reverse !important;
    min-width: 0 !important;
}
html .jrats-pi-location-pin {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #eaf2ff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--jrats-pi-brand) !important;
    flex-shrink: 0 !important;
}
html .jrats-pi-location-pin svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
}
html .jrats-pi-location-text {
    text-align: right !important;
    min-width: 0 !important;
}
html .jrats-pi-location-text p {
    margin: 0 !important;
}
html .jrats-pi-location-name {
    margin: 0 0 2px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--jrats-pi-ink) !important;
}
html .jrats-pi-location-hint {
    font-size: 11.5px !important;
    color: var(--jrats-pi-ink-mute) !important;
}
html .jrats-pi-location-share {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--jrats-pi-brand) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    flex-direction: row-reverse !important;
    flex-shrink: 0 !important;
}
html .jrats-pi-location-share svg {
    display: block !important;
}

/* =============================================================================
 * 7. Chips (skills, languages).
 * =========================================================================== */

html .jrats-pi-chips {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
html .jrats-pi-chips li {
    margin: 0 !important;
    list-style: none !important;
}
html .jrats-pi-chip {
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: var(--jrats-pi-brand-50) !important;
    color: var(--jrats-pi-brand) !important;
    border: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}
html .jrats-pi-chip-soft {
    background: #f1f5f9 !important;
    color: var(--jrats-pi-ink-soft) !important;
    border: 0 !important;
}

/* =============================================================================
 * 8. Timeline (experience).
 * =========================================================================== */

html .jrats-pi-timeline {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 18px 0 0 !important;
    position: relative !important;
}
html .jrats-pi-timeline::before {
    content: none !important;
}
html .jrats-pi-timeline-item {
    position: relative !important;
    padding: 0 18px 14px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border-right: 2px solid #e2e8f0 !important;
}
html .jrats-pi-timeline-item:last-child {
    padding-bottom: 0 !important;
}
html .jrats-pi-timeline-marker {
    position: absolute !important;
    right: -7px !important;
    left: auto !important;
    top: 6px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: var(--jrats-pi-brand) !important;
    box-shadow: 0 0 0 2px #fff !important;
}
html .jrats-pi-timeline-title {
    margin: 0 0 2px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--jrats-pi-ink) !important;
}
html .jrats-pi-timeline-company {
    margin: 0 0 2px !important;
    font-size: 13px !important;
    color: var(--jrats-pi-ink-soft) !important;
    font-weight: 500 !important;
}
html .jrats-pi-timeline-dates {
    margin: 0 0 4px !important;
    font-size: 12px !important;
    color: var(--jrats-pi-ink-mute) !important;
    letter-spacing: 0 !important;
}
html .jrats-pi-timeline-desc {
    margin: 0 !important;
    color: #3a3a3a !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

/* =============================================================================
 * 9. Certifications.
 * =========================================================================== */

html .jrats-pi-cert-grid {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}
html .jrats-pi-cert-grid li {
    margin: 0 !important;
    list-style: none !important;
}
html .jrats-pi-cert {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
}
html .jrats-pi-cert-name {
    margin: 0 0 2px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--jrats-pi-ink) !important;
}
html .jrats-pi-cert-name a {
    color: var(--jrats-pi-brand) !important;
    text-decoration: none !important;
}
html .jrats-pi-cert-name a:hover {
    text-decoration: underline !important;
}
html .jrats-pi-cert-issuer {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--jrats-pi-ink-mute) !important;
}
html .jrats-pi-cert-date {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--jrats-pi-ink-mute) !important;
}

/* =============================================================================
 * 10. Follow button — small outline pill above socials.
 * =========================================================================== */

html .jrats-pi-follow-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 4px 0 14px !important;
    padding: 6px 14px !important;
    background: transparent !important;
    border: 1px solid var(--jrats-pi-border) !important;
    border-radius: 999px !important;
    color: var(--jrats-pi-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease !important;
    font-family: inherit !important;
}
html .jrats-pi-follow-btn:hover {
    background: #f8fafc !important;
}
html .jrats-pi-follow-btn:active {
    transform: scale(0.97) !important;
}
html .jrats-pi-follow-btn:focus-visible {
    outline: 2px solid var(--jrats-pi-brand) !important;
    outline-offset: 2px !important;
}
html .jrats-pi-follow-btn .jrats-pi-follow-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}
html .jrats-pi-follow-btn .jrats-pi-follow-icon svg {
    transition: fill .15s ease, transform .15s ease !important;
}
html .jrats-pi-follow-btn.is-following {
    background: var(--jrats-pi-brand) !important;
    color: #fff !important;
    border-color: var(--jrats-pi-brand) !important;
}
html .jrats-pi-follow-btn.is-following:hover {
    background: #45669f !important;
    border-color: #45669f !important;
}
html .jrats-pi-follow-btn.is-following .jrats-pi-follow-icon svg {
    fill: #fff !important;
    stroke: #fff !important;
    transform: scale(1.08) !important;
}
html .jrats-pi-follow-btn.is-busy {
    opacity: 0.6 !important;
    cursor: progress !important;
}
html .jrats-pi-follow-btn.has-error {
    animation: jratsPiShake 0.3s ease !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}
html .jrats-pi-follow-btn.has-error .jrats-pi-follow-icon svg {
    stroke: #dc2626 !important;
}
@keyframes jratsPiShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* =============================================================================
 * 11. Phase 10A — Watermark overlay.
 * =========================================================================== */

html .jrats-pi-watermark {
    position: fixed !important;
    bottom: 8px !important;
    right: 8px !important;
    z-index: 49 !important;
    padding: 4px 10px !important;
    background: rgba(15, 23, 42, .6) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
    border-radius: 4px !important;
    pointer-events: none !important;
    opacity: 0.85 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    max-width: 280px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* =============================================================================
 * 12. Legacy classes (no longer rendered by the shortcode but kept in case
 *     an admin preview or third-party integration still references them).
 *     Quietly hidden so they don't leak into the public page.
 * =========================================================================== */

html .jrats-pi-wrap .jrats-pi-stats-grid,
html .jrats-pi-wrap .jrats-pi-qr-card {
    display: none !important;
}

/* =============================================================================
 * 13. Responsive.
 * =========================================================================== */

@media (max-width: 480px) {
    html .jrats-pi-wrap {
        padding: 18px 12px 28px !important;
    }
    html .jrats-pi-avatar {
        width: 108px !important;
        height: 108px !important;
        font-size: 38px !important;
    }
    html .jrats-pi-name {
        font-size: 20px !important;
    }
    html .jrats-pi-card,
    html .jrats-pi-location {
        padding: 16px !important;
    }
}

@media (max-width: 380px) {
    html .jrats-pi-avatar {
        width: 100px !important;
        height: 100px !important;
    }
    html .jrats-pi-name {
        font-size: 19px !important;
    }
    html .jrats-pi-socials {
        gap: 10px !important;
    }
    html .jrats-pi-social {
        width: 38px !important;
        height: 38px !important;
    }
    html .jrats-pi-social-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
    html .jrats-pi-btn {
        padding: 11px 12px !important;
        font-size: 13px !important;
    }
}

/* =============================================================================
 * 14. Print.
 * =========================================================================== */

@media print {
    html .jrats-pi-actionbar,
    html .jrats-pi-location-share,
    html .jrats-pi-watermark {
        display: none !important;
    }
    html .jrats-pi-wrap {
        max-width: none !important;
        padding: 0 !important;
        background: #fff !important;
    }
    html .jrats-pi-card,
    html .jrats-pi-location {
        box-shadow: none !important;
        border: 1px solid #d1d5db !important;
        page-break-inside: avoid;
    }
}