/**
 * Vexstorm My Account Portal Styles
 * Colors are overridden via CSS custom properties set inline by PHP.
 * Copyright 2026 Vexstorm Studios
 */

/* ========================================
   Typography Normalization
   Enforces consistent fonts across all 3 sites
   regardless of which WordPress theme is active
   (Kadence on main, Twenty Twenty-Five on academy,
   Docly on docs). Uses !important to override theme CSS.
   ======================================== */

/* --- Canonical Font Stack --- */
:root {
    --vx-ma-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* --- Page Title Normalization ---
   The "Vexstorm My Account" heading above the portal is rendered by
   the WordPress theme page template, NOT the shortcode. Each theme
   styles it differently. These rules normalize it when body has the
   vx-myaccount-page class (added by the PHP handler). */
.vx-myaccount-page .entry-title,
.vx-myaccount-page .page-title,
.vx-myaccount-page .wp-block-post-title,
.vx-myaccount-page article > header h1,
.vx-myaccount-page .entry-header h1,
.vx-myaccount-page h1.wp-block-post-title,
.vx-myaccount-page .entry-content > h1:first-child,
.vx-myaccount-page .wp-block-group h1 {
    font-family: var(--vx-ma-font) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

/* --- Portal-wide font enforcement ---
   The wildcard selector with !important ensures every element inside
   the portal uses our font stack, overriding any theme rules. */
.vx-ma-portal,
.vx-ma-portal *,
.vx-ma-portal *::before,
.vx-ma-portal *::after {
    font-family: var(--vx-ma-font) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.vx-ma-portal {
    display: flex;
    min-height: 600px;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);
    margin: 20px auto;
    width: 80%;
    max-width: 1400px;
    font-family: var(--vx-ma-font) !important;
}

/* Sidebar */
.vx-ma-sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--vx-ma-sidebar-bg, #1a1a2e);
    color: var(--vx-ma-sidebar-text, #cccccc);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.vx-ma-sidebar-header {
    padding: 28px 20px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.vx-ma-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--vx-ma-accent, #0367a6);
    color: #fff;
    font-size: 24px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.vx-ma-user-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff;
    margin-bottom: 2px;
}

.vx-ma-user-email {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--vx-ma-sidebar-text, #999);
    opacity: 0.7;
}

/* Nav items */
.vx-ma-nav {
    flex: 1;
    padding: 12px 0;
}

.vx-ma-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: var(--vx-ma-sidebar-text, #cccccc);
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.vx-ma-nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

.vx-ma-nav-item.active {
    background: rgba(255,255,255,0.08);
    color: var(--vx-ma-sidebar-active, #4dbfcd);
    border-left-color: var(--vx-ma-sidebar-active, #4dbfcd);
    font-weight: 600 !important;
}

.vx-ma-nav-item .dashicons,
.vx-ma-portal .dashicons,
.vx-ma-portal .dashicons-before::before {
    font-family: dashicons !important;
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 18px;
}

/* Content area */
.vx-ma-content {
    flex: 1;
    background: var(--vx-ma-content-bg, #ffffff);
    color: var(--vx-ma-content-text, #333333);
    padding: 32px 36px;
    min-height: 500px;
}

.vx-ma-content h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
    margin: 0 0 16px 0;
    color: var(--vx-ma-content-text, #333);
}

.vx-ma-content h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
    margin: 0 0 16px 0;
    color: var(--vx-ma-content-text, #333);
}

.vx-ma-content h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    margin: 20px 0 10px 0;
}

.vx-ma-content h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    margin: 16px 0 8px 0;
}

.vx-ma-content h5,
.vx-ma-content h6 {
    font-size: 14px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    margin: 12px 0 6px 0;
}

.vx-ma-content p {
    font-size: 15px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    margin: 8px 0;
}

.vx-ma-content a {
    color: var(--vx-ma-accent, #0367a6);
    font-weight: inherit !important;
    font-size: inherit !important;
}

.vx-ma-content li {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

.vx-ma-content em {
    font-style: italic !important;
    font-weight: inherit !important;
}

.vx-ma-content strong,
.vx-ma-content b {
    font-weight: 700 !important;
}

/* Announcement block */
.vx-ma-announcement {
    background: rgba(0,0,0,0.03);
    border-left: 4px solid var(--vx-ma-accent, #0367a6);
    padding: 16px 20px;
    border-radius: 0 6px 6px 0;
    margin: 16px 0;
}

/* Products list */
.vx-ma-products ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vx-ma-products li {
    background: var(--vx-ma-accent, #0367a6);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Shortcode area — spacing between rendered shortcodes */
.vx-ma-shortcode-area {
    margin-top: 16px;
}

.vx-ma-shortcode-area > div,
.vx-ma-shortcode-area > form,
.vx-ma-shortcode-area > table,
.vx-ma-shortcode-area > .vx-ma-content-block {
    margin-bottom: 28px;
}

/* Fix contrast for shortcodes rendered inside the My Account portal content area */
.vx-ma-content table {
    width: 100%;
    border-collapse: collapse;
}

.vx-ma-content table th {
    color: #ffffff;
    font-weight: 600 !important;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    padding: 8px 10px;
    text-align: left;
    font-size: 13px !important;
}

.vx-ma-content table td {
    color: #e0e0e0;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 13px !important;
    font-weight: 400 !important;
}

.vx-ma-content table tr:hover {
    background: rgba(255,255,255,0.05);
}

.vx-ma-content .vexstorm-ticket-detail,
.vx-ma-content .vexstorm-ticket-description {
    color: #e0e0e0;
    background: rgba(0,0,0,0.2);
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
}

.vx-ma-content label,
.vx-ma-content select,
.vx-ma-content input[type="text"],
.vx-ma-content textarea {
    color: #e0e0e0;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.vx-ma-content label {
    font-weight: 500 !important;
}

/* Login prompt */
.vx-ma-login-prompt {
    max-width: 480px;
    margin: 0 auto;
    font-family: var(--vx-ma-font) !important;
}

.vx-ma-login-prompt h2 {
    font-family: var(--vx-ma-font) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    margin-bottom: 12px;
}

.vx-ma-login-prompt p,
.vx-ma-login-prompt a {
    font-family: var(--vx-ma-font) !important;
    font-size: 15px !important;
}

/* Responsive */
@media (max-width: 768px) {
    .vx-ma-portal {
        flex-direction: column;
    }
    .vx-ma-sidebar {
        width: 100%;
        min-width: unset;
    }
    .vx-ma-nav {
        display: flex;
        overflow-x: auto;
        padding: 0;
    }
    .vx-ma-nav-item {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 10px 16px;
    }
    .vx-ma-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--vx-ma-sidebar-active, #4dbfcd);
    }
    .vx-ma-sidebar-header {
        display: none;
    }
    .vx-ma-content {
        padding: 20px 16px;
    }
}