/*
 Theme Name:   PMSoft Academy Child
 Theme URI:    https://pmsoft.com
 Description:  PMSoft Academy child theme built on Kadence. All custom code, styles, and page templates live exclusively here — never in the parent theme.
 Author:       PMSoft Consultancy Pvt. Ltd.
 Author URI:   https://pmsoft.com
 Template:     kadence
 Version:      1.0.0
 Text Domain:  pmsoft-academy-child
 License:      Private
*/

html { scroll-behavior: smooth; }

/*
 * ─────────────────────────────────────────────
 *  DESIGN SYSTEM — CSS CUSTOM PROPERTIES
 *  All palette values are defined here as variables.
 *  Never hard-code hex values elsewhere — always reference these vars.
 * ─────────────────────────────────────────────
 */
:root {
    /* Primary palette */
    --pms-blue:        #1B4F8A;   /* Primary blue — buttons, H1 accents, top bar */
    --pms-accent:      #2E6FBF;   /* Accent blue — hover states, secondary elements */
    --pms-hero-bg:     #EEF4FB;   /* Hero section background */
    --pms-section-bg:  #F7F8FC;   /* Alternate section background */

    /* Text */
    --pms-text:        #1A1A2E;   /* Body / heading text */
    --pms-muted:       #6B7C99;   /* Subtext, labels, meta */
    --pms-white:       #FFFFFF;

    /* Gold — logo ring, dividers, tagline */
    --pms-gold:        #B8860B;

    /* Structural */
    --pms-footer-bg:   #1A1A2E;   /* Dark footer */
    --pms-cta-bg:      #1B4F8A;   /* CTA band (same as primary) */
    --pms-border:      #E8EEF6;   /* Subtle borders */
    --pms-border-mid:  #D4E4F7;   /* Card borders */

    /* Typography — Arial system stack, no external dependencies */
    --pms-font:        Arial, Helvetica, sans-serif;

    /* Spacing scale */
    --pms-radius:      6px;
    --pms-radius-lg:   10px;
}

/*
 * ─────────────────────────────────────────────
 *  GLOBAL BASE OVERRIDES
 *  Override Kadence defaults to enforce PMSoft design system.
 * ─────────────────────────────────────────────
 */

/* Force Arial everywhere — no Google Fonts, no external requests */
body,
h1, h2, h3, h4, h5, h6,
p, a, button, input, textarea, select, label {
    font-family: var(--pms-font) !important;
}

/* Base text colour and size */
body {
    color: var(--pms-text);
    background-color: var(--pms-white);
    font-size: 17px;
}

/* Remove default Kadence link colour, enforce brand colour */
a {
    color: var(--pms-blue);
    text-decoration: none;
}
a:hover {
    color: var(--pms-accent);
    text-decoration: none;
}

/*
 * ─────────────────────────────────────────────
 *  HEADER — Full width, logo image only, no site title text
 *  Nav: Learn · Solutions · About Us + Log In button
 * ─────────────────────────────────────────────
 */

/* Full-width header — no max-width constraint */
.site-header,
#masthead,
.kadence-header-wrap {
    width: 100% !important;
    max-width: 100% !important;
}

/* Hide site title text (keep logo image only) */
.site-title,
.site-branding .site-title,
.kadence-site-branding .site-title,
.site-branding span.site-title,
header .site-name,
.header-site-branding-wrap .site-title {
    display: none !important;
}

/* Ensure logo image renders cleanly — bundled SVG from child theme assets */
.site-logo img,
.kadence-site-branding img,
.custom-logo-link img,
.site-header .custom-logo,
.pms-header-logo {
    max-height: 52px;
    width: auto;
    display: block;
}

/* Remove any default link underline on logo */
.pms-logo-link,
.custom-logo-link {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
}

/* Hide site description/tagline in header */
.site-description,
.kadence-site-branding .site-description {
    display: none !important;
}

/*
 * ─────────────────────────────────────────────
 *  TOP BLUE BAR  (Task G6)
 *  4px solid primary-blue bar at very top of every page.
 * ─────────────────────────────────────────────
 */
#pms-top-bar {
    width: 100%;
    height: 4px;
    background-color: var(--pms-blue);
    display: block;
    position: relative;
    z-index: 9999;
}

/*
 * ─────────────────────────────────────────────
 *  HEADER  (Task G7)
 *  1px bottom border on the main site header.
 * ─────────────────────────────────────────────
 */
.site-header,
#masthead {
    border-bottom: 1px solid #E0E0E0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}

/* Force Kadence inner header layout wrappers to full width */
.kadence-header-row-layout-inner,
.site-header-wrap,
.header-nav-wrap,
.kadence-header-row-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/*
 * ─────────────────────────────────────────────
 *  KADENCE PALETTE OVERRIDES  (Task G1)
 *  Force Kadence's global palette to PMSoft colours.
 *  These target Kadence's own CSS variable names.
 * ─────────────────────────────────────────────
 */
:root {
    --global-palette1: #1B4F8A;
    --global-palette2: #2E6FBF;
    --global-palette3: #1A1A2E;
    --global-palette4: #EEF4FB;
    --global-palette5: #6B7C99;
    --global-palette6: #F7F8FC;
    --global-palette7: #FFFFFF;
    --global-palette8: #E8EEF6;
    --global-palette9: #B8860B;
}

/*
 * ─────────────────────────────────────────────
 *  BUTTONS — Global PMSoft style
 * ─────────────────────────────────────────────
 */
.wp-block-button__link,
.kadence-button,
button.pms-btn-primary,
a.pms-btn-primary {
    background-color: var(--pms-blue);
    color: var(--pms-white) !important;
    font-family: var(--pms-font) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: var(--pms-radius);
    border: none;
    cursor: pointer;
    display: inline-block;
    transition: background-color 0.2s ease;
}
.wp-block-button__link:hover,
button.pms-btn-primary:hover,
a.pms-btn-primary:hover {
    background-color: var(--pms-accent);
    color: var(--pms-white) !important;
}

/* Outline/secondary button */
a.pms-btn-secondary,
button.pms-btn-secondary {
    background-color: transparent;
    color: var(--pms-blue) !important;
    border: 2px solid var(--pms-blue);
    font-family: var(--pms-font) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: var(--pms-radius);
    cursor: pointer;
    display: inline-block;
    transition: all 0.2s ease;
}
a.pms-btn-secondary:hover,
button.pms-btn-secondary:hover {
    background-color: var(--pms-blue);
    color: var(--pms-white) !important;
}

/*
 * ─────────────────────────────────────────────
 *  STICKY CONTACT US BUTTON  (Task G5)
 *  Floating bottom-right on all pages.
 *  Output by functions.php via wp_footer hook.
 * ─────────────────────────────────────────────
 */
#pms-sticky-contact {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    background-color: var(--pms-blue);
    color: var(--pms-white) !important;
    font-family: var(--pms-font) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 16px 10px;
    border-radius: 6px 0 0 6px;
    box-shadow: -2px 0 8px rgba(27, 79, 138, 0.25);
    text-decoration: none;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transition: background-color 0.2s ease;
}
#pms-sticky-contact:hover {
    background-color: var(--pms-accent);
    color: var(--pms-white) !important;
}

/* Hide sticky button on the contact page itself — redundant there */
.page-id-contact #pms-sticky-contact,
body.page-template-template-contact #pms-sticky-contact {
    display: none;
}

/* Mobile: shrink to icon only on very small screens */
@media (max-width: 480px) {
    #pms-sticky-contact .pms-contact-label {
        display: none;
    }
    #pms-sticky-contact {
        padding: 14px;
        border-radius: 50%;
    }
}

/*
 * ─────────────────────────────────────────────
 *  SECTION LAYOUT HELPERS
 *  Reusable layout classes used across all page templates.
 * ─────────────────────────────────────────────
 */
.pms-section {
    padding: 60px 0;       /* 0 side padding — sections are truly full-width */
    width: 100%;
    box-sizing: border-box;
}

.pms-section-alt {
    padding: 60px 0;       /* 0 side padding — sections are truly full-width */
    background-color: var(--pms-section-bg);
    width: 100%;
    box-sizing: border-box;
}

.pms-section-hero-bg {
    background-color: var(--pms-hero-bg);
}

/* pms-inner-wrap: centres content at max 1200px.
 * Side padding lives HERE — not on the parent section. */
.pms-inner-wrap {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Eyebrow label above headings */
.pms-eyebrow {
    font-size: 13px;
    font-weight: 700;
    color: var(--pms-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

/* Section label (muted, above sec-title) */
.pms-sec-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pms-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}

.pms-sec-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--pms-text);
    margin-bottom: 8px;
    line-height: 1.3;
}

.pms-sec-sub {
    font-size: 16px;
    color: var(--pms-muted);
    margin-bottom: 28px;
    line-height: 1.7;
}

/* Heading accent — last words turn blue (applied via <em> in content) */
.pms-sec-title em,
.pms-h1 em {
    color: var(--pms-blue);
    font-style: normal;
}

/* Gold underline divider beneath section headings */
.pms-gold-divider {
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--pms-gold);
    margin: 12px 0 28px;
}

/*
 * ─────────────────────────────────────────────
 *  CARD COMPONENTS
 * ─────────────────────────────────────────────
 */
.pms-card {
    background-color: var(--pms-white);
    border: 1px solid var(--pms-border);
    border-top: 3px solid var(--pms-blue);
    border-radius: var(--pms-radius-lg);
    padding: 28px;
    box-sizing: border-box;
}

.pms-card-accent {
    border-top-color: var(--pms-accent);
}

.pms-card-icon {
    font-size: 28px;
    margin-bottom: 12px;
    display: block;
}

.pms-card-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--pms-accent);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

.pms-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--pms-text);
    margin-bottom: 10px;
    line-height: 1.4;
}

.pms-card-body {
    font-size: 15px;
    color: var(--pms-muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

.pms-card-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--pms-blue);
    text-decoration: none;
}
.pms-card-link:hover {
    color: var(--pms-accent);
}

/* Grid helpers */
.pms-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pms-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pms-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/*
 * ─────────────────────────────────────────────
 *  COURSE CARD
 * ─────────────────────────────────────────────
 */
.pms-course-card {
    background-color: var(--pms-white);
    border: 1px solid var(--pms-border);
    border-radius: var(--pms-radius-lg);
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.pms-course-thumb {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, #0F2B5E, #1B4F8A); /* default AI/IT */
}

.pms-course-thumb-pharma  { background: linear-gradient(135deg, #0B3D2E, #1B6B4A); }
.pms-course-thumb-cert    { background: linear-gradient(135deg, #3B1F6B, #6B3FA0); }
.pms-course-thumb-ngo     { background: linear-gradient(135deg, #4A2800, #8B5500); }

.pms-course-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255,255,255,0.18);
    color: var(--pms-white);
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pms-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--pms-blue);
}

.pms-course-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pms-course-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pms-text);
    margin-bottom: 6px;
    line-height: 1.4;
}

.pms-course-meta {
    font-size: 13px;
    color: var(--pms-muted);
    margin-bottom: 14px;
}

/* Enroll / Udemy button on course cards */
.pms-enroll-btn {
    display: inline-block;
    margin-top: auto;
    background-color: var(--pms-blue);
    color: var(--pms-white) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--pms-radius);
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.pms-enroll-btn:hover {
    background-color: var(--pms-accent);
    color: var(--pms-white) !important;
}

/*
 * ─────────────────────────────────────────────
 *  CTA BAND  (dark blue full-width)
 * ─────────────────────────────────────────────
 */
.pms-cta-band {
    background-color: var(--pms-cta-bg);
    padding: 56px 40px;
    text-align: center;
}

.pms-cta-band h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--pms-white);
    margin-bottom: 10px;
}

.pms-cta-band p {
    font-size: 15px;
    color: #B5D4F4;
    margin-bottom: 28px;
}

.pms-cta-btn-white {
    display: inline-block;
    background-color: var(--pms-white);
    color: var(--pms-blue) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 30px;
    border-radius: var(--pms-radius);
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.pms-cta-btn-white:hover {
    background-color: var(--pms-hero-bg);
    color: var(--pms-blue) !important;
}

/*
 * ─────────────────────────────────────────────
 *  FOOTER
 * ─────────────────────────────────────────────
 */
.pms-footer {
    background-color: var(--pms-footer-bg);
    padding: 48px 40px;
}

.pms-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
}

.pms-footer-tagline {
    font-size: 12px;
    color: var(--pms-muted);
    margin-top: 12px;
    line-height: 1.7;
    max-width: 280px;
}

.pms-footer-col h4 {
    font-size: 11px;
    font-weight: 700;
    color: var(--pms-white);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.pms-footer-col a {
    display: block;
    font-size: 14px;
    color: var(--pms-muted);
    margin-bottom: 10px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.pms-footer-col a:hover {
    color: #B5D4F4;
}

.pms-footer-logo {
    max-height: 52px;
    width: auto;
    margin-bottom: 14px;
    display: block;
}

/* Fallback text logo if SVG not yet uploaded */
.pms-footer-logo-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--pms-white);
    letter-spacing: 2px;
    text-decoration: none;
    display: block;
    margin-bottom: 14px;
}

.pms-footer-bottom {
    background-color: #111827;
    padding: 14px 40px;
}

.pms-footer-bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pms-footer-bottom p {
    font-size: 11px;
    color: var(--pms-muted);
    margin: 0;
}

.pms-footer-bottom a {
    color: var(--pms-muted);
    text-decoration: none;
    font-size: 11px;
    transition: color 0.2s ease;
}

.pms-footer-bottom a:hover {
    color: #B5D4F4;
}

/*
 * ─────────────────────────────────────────────
 *  PROCESS STEPS (Engagement Model on Solutions page)
 * ─────────────────────────────────────────────
 */
.pms-process-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pms-process-step {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: var(--pms-white);
    border: 1px solid var(--pms-border-mid);
    border-radius: var(--pms-radius);
    padding: 14px 18px;
}

.pms-process-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--pms-blue);
    color: var(--pms-white);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pms-process-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--pms-accent);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.pms-process-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--pms-text);
}

/*
 * ─────────────────────────────────────────────
 *  UDEMY WIDGET SECTION  (Learn page)
 * ─────────────────────────────────────────────
 */
.pms-udemy-section {
    background-color: var(--pms-section-bg);
    padding: 40px;
    border-top: 1px solid var(--pms-border);
    text-align: center;
}

.pms-udemy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 28px;
    text-align: left;
}

.pms-udemy-card {
    background-color: var(--pms-white);
    border: 1px solid var(--pms-border);
    border-radius: var(--pms-radius-lg);
    overflow: hidden;
}

.pms-udemy-thumb {
    height: 100px;
    background: linear-gradient(135deg, #0F2B5E, #1B4F8A);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pms-udemy-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #FF8F00;
    color: var(--pms-white);
    font-size: 9px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 3px;
}

.pms-udemy-body {
    padding: 14px;
}

.pms-udemy-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--pms-text);
    margin-bottom: 6px;
    line-height: 1.4;
}

.pms-udemy-stars {
    font-size: 11px;
    color: #FF8F00;
    margin-bottom: 10px;
}

/*
 * ─────────────────────────────────────────────
 *  CONTACT FORM  (Contact page)
 * ─────────────────────────────────────────────
 */
.pms-contact-wrap .wpcf7-form label {
    font-size: 12px;
    font-weight: 700;
    color: var(--pms-muted);
    display: block;
    margin-bottom: 5px;
}

.pms-contact-wrap .wpcf7-form input[type="text"],
.pms-contact-wrap .wpcf7-form input[type="email"],
.pms-contact-wrap .wpcf7-form textarea,
.pms-contact-wrap .wpcf7-form select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--pms-border-mid);
    border-radius: var(--pms-radius);
    font-size: 13px;
    font-family: var(--pms-font) !important;
    color: var(--pms-text);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.pms-contact-wrap .wpcf7-form input:focus,
.pms-contact-wrap .wpcf7-form textarea:focus,
.pms-contact-wrap .wpcf7-form select:focus {
    border-color: var(--pms-blue);
    outline: none;
}

.pms-contact-wrap .wpcf7-form textarea {
    height: 110px;
    resize: vertical;
}

.pms-contact-wrap .wpcf7-form input[type="submit"] {
    width: 100%;
    background-color: var(--pms-blue);
    color: var(--pms-white);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--pms-font) !important;
    padding: 13px;
    border: none;
    border-radius: var(--pms-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.pms-contact-wrap .wpcf7-form input[type="submit"]:hover {
    background-color: var(--pms-accent);
}

/*
 * ─────────────────────────────────────────────
 *  LEARNDASH CUSTOM OVERRIDES  (Tasks LD1, LD3)
 * ─────────────────────────────────────────────
 */

/* Force LD colours to match PMSoft palette */
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage,
.learndash-wrapper .ld-button,
#learndash_profile .ld-login-button {
    background-color: var(--pms-blue) !important;
}

/* Hide default LD course grid — we use custom templates */
.learndash-course-grid {
    display: none !important;
}

/* Hide pass/fail result text on quizzes (Task LD5) — JS + CSS double lock */
.wpProQuiz_results .wpProQuiz_resultsList li:first-child,
.wpProQuiz_resultState {
    display: none !important;
}

/* LD login page branding */
.learndash-login-page .site-header-logo {
    display: flex;
    justify-content: center;
    padding: 24px 0 12px;
}

/*
 * ─────────────────────────────────────────────
 *  MY LEARNING PAGE  (Task LD2)
 * ─────────────────────────────────────────────
 */
.pms-my-learning-wrap {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.pms-sidebar {
    background-color: var(--pms-section-bg);
    border: 1px solid var(--pms-border);
    border-radius: var(--pms-radius-lg);
    padding: 20px;
}

.pms-sidebar h3 {
    font-size: 12px;
    font-weight: 700;
    color: var(--pms-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.pms-enrolled-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.pms-enrolled-card {
    background-color: var(--pms-white);
    border: 1px solid var(--pms-border);
    border-radius: var(--pms-radius-lg);
    overflow: hidden;
}

.pms-enrolled-thumb {
    height: 100px;
    background: linear-gradient(135deg, #0F2B5E, #1B4F8A);
}

.pms-enrolled-body {
    padding: 16px;
}

.pms-enrolled-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--pms-text);
    margin-bottom: 10px;
}

/* Progress bar */
.pms-progress-wrap {
    background-color: var(--pms-hero-bg);
    border-radius: 4px;
    height: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.pms-progress-fill {
    height: 8px;
    background-color: var(--pms-blue);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.pms-progress-label {
    font-size: 11px;
    color: var(--pms-muted);
    margin-bottom: 14px;
}

/*
 * ─────────────────────────────────────────────
 *  FOCUSED LEARNING PAGE  (Task LD3)
 * ─────────────────────────────────────────────
 */
.pms-focused-learning {
    min-height: 100vh;
    background-color: var(--pms-white);
    display: grid;
    grid-template-columns: 1fr 300px;
}

.pms-focused-content {
    padding: 40px;
    border-right: 1px solid var(--pms-border);
}

.pms-focused-sidebar {
    padding: 24px;
    background-color: var(--pms-section-bg);
}

/*
 * ─────────────────────────────────────────────
 *  MY PERFORMANCE PAGE  (Task LD4)
 * ─────────────────────────────────────────────
 */
.pms-performance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}

.pms-perf-stat {
    background-color: var(--pms-white);
    border: 1px solid var(--pms-border);
    border-top: 3px solid var(--pms-blue);
    border-radius: var(--pms-radius-lg);
    padding: 24px;
    text-align: center;
}

.pms-perf-num {
    font-size: 36px;
    font-weight: 700;
    color: var(--pms-blue);
    line-height: 1;
    margin-bottom: 8px;
}

.pms-perf-label {
    font-size: 12px;
    color: var(--pms-muted);
}

/*
 * ─────────────────────────────────────────────
 *  NAVIGATION OVERRIDES
 * ─────────────────────────────────────────────
 */
.main-navigation a,
.kadence-navigation a,
.nav-links a {
    font-family: var(--pms-font) !important;
    font-size: 15px !important;
    color: var(--pms-text);
    text-decoration: none;
}

.main-navigation a:hover,
.kadence-navigation a:hover {
    color: var(--pms-blue);
}

/* Active nav item */
.main-navigation .current-menu-item > a,
.kadence-navigation .current-menu-item > a {
    color: var(--pms-blue);
    font-weight: 700;
    border-bottom: 2px solid var(--pms-blue);
    padding-bottom: 2px;
}

/* Header Log In / Enroll button */
.pms-nav-enroll-btn {
    background-color: var(--pms-blue) !important;
    color: var(--pms-white) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    border-radius: var(--pms-radius) !important;
    text-decoration: none !important;
}
.pms-nav-enroll-btn:hover {
    background-color: var(--pms-accent) !important;
    color: var(--pms-white) !important;
}

/*
 * ─────────────────────────────────────────────
 *  CLIENT LOGO WALL
 * ─────────────────────────────────────────────
 */
.pms-logo-wall {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}

.pms-logo-wall img {
    height: 36px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.pms-logo-wall img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/*
 * ─────────────────────────────────────────────
 *  HOMEPAGE — HERO
 * ─────────────────────────────────────────────
 */
.pms-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
    overflow: hidden;
    width: 100%;           /* explicitly full-width — no outer margin or padding */
    margin: 0;
    padding: 0;
}

.pms-hero-left {
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pms-hero-right {
    background-color: var(--pms-hero-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.pms-h1 {
    font-size: 38px;
    font-weight: 700;
    color: var(--pms-text);
    line-height: 1.3;
    margin-bottom: 14px;
}

.pms-hero-sub {
    font-size: 18px;
    color: var(--pms-muted);
    line-height: 1.7;
    margin-bottom: 22px;
}

/* Checkmark bullet list */
.pms-hero-checks {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.pms-hero-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--pms-text);
    margin-bottom: 10px;
    line-height: 1.5;
}

.pms-check-icon {
    color: var(--pms-blue);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1.4;
}

.pms-btn-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Gold divider beneath H1 — colour from --pms-gold token */
.pms-hero-gold-divider {
    display: block;
    width: 56px;
    height: 3px;
    background-color: var(--pms-gold);
    border-radius: 2px;
    margin: 14px 0 18px;
}

/* Hero right — actual photo */
.pms-hero-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--pms-radius-lg);
}

/* Hero right — Phase 1 image placeholder */
.pms-hero-placeholder {
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pms-hero-placeholder-inner {
    background-color: var(--pms-white);
    border-radius: var(--pms-radius-lg);
    padding: 40px 32px;
    border: 2px dashed var(--pms-border-mid);
    text-align: center;
    width: 100%;
}

.pms-placeholder-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 14px;
    opacity: 0.5;
}

.pms-placeholder-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--pms-muted);
    margin-bottom: 6px;
}

.pms-placeholder-hint {
    font-size: 11px;
    color: var(--pms-muted);
    opacity: 0.7;
    margin: 0;
}

/*
 * ─────────────────────────────────────────────
 *  HOMEPAGE — THREE VERTICALS
 * ─────────────────────────────────────────────
 */
.pms-verticals-section {
    border-top: 1px solid var(--pms-border);
    border-bottom: 1px solid var(--pms-border);
}

.pms-verticals-header {
    padding: 32px 40px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.pms-verticals-header .pms-sec-title {
    padding-bottom: 16px;
    border-bottom: none;   /* underline moved to pms-verticals-rule below */
    margin-bottom: 0;
}

/* Full-width 2px blue rule spanning all 3 columns.
 * Sits outside the max-width header div so it reaches edge-to-edge. */
.pms-verticals-rule {
    width: 100%;
    height: 2px;
    background-color: var(--pms-blue);
    display: block;
    margin: 0;
    padding: 0;
}

.pms-verticals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.pms-vertical-card {
    padding: 32px 28px;
    border-right: 1px solid var(--pms-border);
    transition: background-color 0.2s ease;
    background-color: var(--pms-white);
}

.pms-vertical-card:last-child {
    border-right: none;
}

.pms-vertical-card:nth-child(2) {
    background-color: var(--pms-section-bg);
}

.pms-vertical-card:hover {
    background-color: var(--pms-hero-bg);
}

.pms-v-icon {
    display: block;
    font-size: 32px;
    margin-bottom: 14px;
}

.pms-v-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--pms-text);
    margin-bottom: 10px;
    line-height: 1.4;
}

.pms-v-body {
    font-size: 15px;
    color: var(--pms-muted);
    line-height: 1.7;
    margin-bottom: 14px;
}

/*
 * ─────────────────────────────────────────────
 *  HOMEPAGE — WHO WE WORK WITH (2-col split)
 *  Left: logo mosaic  |  Right: 3 vertical cards
 * ─────────────────────────────────────────────
 */
.pms-who-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
}

.pms-who-logos {
    display: flex;
    flex-direction: column;
}

.pms-logo-mosaic {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.pms-logo-box {
    height: 40px;
    background: var(--pms-white);
    border: 1px solid var(--pms-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: var(--pms-text);
    text-align: center;
    padding: 8px 12px;
}

.pms-who-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

/* Override horizontal-grid card styles for vertical-stack context */
.pms-who-cards .pms-vertical-card {
    border-right: none;
    border-bottom: 1px solid var(--pms-border);
    background-color: transparent;
    padding: 8px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pms-who-cards .pms-vertical-card:last-child {
    border-bottom: none;
}

.pms-who-cards .pms-vertical-card:nth-child(2) {
    background-color: transparent;
}

.pms-who-cards .pms-v-icon  { font-size: 22px; display: inline; margin-bottom: 0; }
.pms-who-cards .pms-v-title { font-size: 13px; }
.pms-who-cards .pms-v-body  { font-size: 11px; }

/*
 * ─────────────────────────────────────────────
 *  HOMEPAGE — FEATURED COURSES (tabbed)
 * ─────────────────────────────────────────────
 */
.pms-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--pms-border);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.pms-tab {
    font-size: 13px;
    font-family: var(--pms-font);
    color: var(--pms-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 22px;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.pms-tab:hover {
    color: var(--pms-blue);
}

.pms-tab.active,
.pms-tab[aria-selected="true"] {
    color: var(--pms-blue);
    font-weight: 700;
    border-bottom-color: var(--pms-blue);
    background: none !important;
    border-radius: 0 !important;
}

.pms-tab-panel {
    display: block;
}

.pms-tab-panel[hidden] {
    display: none;
}

.pms-no-courses {
    font-size: 13px;
    color: var(--pms-muted);
    padding: 20px 0;
    grid-column: 1 / -1;
}

/*
 * ─────────────────────────────────────────────
 *  HOMEPAGE — UPCOMING COURSES
 * ─────────────────────────────────────────────
 */
.pms-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 24px;
}

.pms-upcoming-card {
    border-radius: var(--pms-radius-lg);
    overflow: hidden;
    position: relative;
    height: 160px;
    display: flex;
    align-items: flex-end;
}

/* Gradient backgrounds for upcoming cards */
.pms-upcoming-ai     { background: linear-gradient(135deg, #0D1B3E, #1B4F8A); }
.pms-upcoming-pharma { background: linear-gradient(135deg, #0B3D2E, #2E8B57); }
.pms-upcoming-ngo    { background: linear-gradient(135deg, #3B1F6B, #7B4FA0); }
.pms-upcoming-agile  { background: linear-gradient(135deg, #4A2800, #A0622E); }

.pms-upcoming-content {
    padding: 16px;
    width: 100%;
}

.pms-upcoming-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--pms-white);
    margin-bottom: 4px;
    line-height: 1.35;
}

.pms-upcoming-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.70);
    margin: 0;
}

.pms-notify-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.20);
    color: var(--pms-white);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--pms-font);
    padding: 5px 12px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.40);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pms-notify-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    color: var(--pms-white);
}

/*
 * ─────────────────────────────────────────────
 *  RESPONSIVE — Mobile first breakpoints
 * ─────────────────────────────────────────────
 */

/* Tablet — ≤900px */
@media (max-width: 900px) {
    .pms-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .pms-grid-3 { grid-template-columns: repeat(2, 1fr); }

    /* Hero: stack vertically on tablet */
    .pms-hero {
        grid-template-columns: 1fr;
    }
    .pms-hero-right {
        min-height: 200px;
    }
    .pms-hero-left {
        padding: 40px 32px;
    }

    /* Verticals: 1-col on tablet */
    .pms-verticals-grid {
        grid-template-columns: 1fr;
    }
    .pms-vertical-card {
        border-right: none;
        border-bottom: 1px solid var(--pms-border);
    }
    .pms-vertical-card:last-child {
        border-bottom: none;
    }

    /* Who we work with: stack to single column on tablet */
    .pms-who-inner {
        grid-template-columns: 1fr;
    }
    .pms-logo-mosaic {
        grid-template-columns: repeat(2, 1fr);
    }

    .pms-upcoming-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pms-footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .pms-my-learning-wrap {
        grid-template-columns: 1fr;
    }

    .pms-focused-learning {
        grid-template-columns: 1fr;
    }

    .pms-performance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pms-udemy-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pms-section,
    .pms-section-alt {
        padding: 40px 0;   /* keep 0 side padding — inner-wrap handles it */
    }

    .pms-inner-wrap {
        padding: 0 24px;   /* tighter inner padding on tablet */
    }
}

/* Mobile — ≤600px */
@media (max-width: 600px) {
    .pms-grid-2,
    .pms-grid-3,
    .pms-grid-4 {
        grid-template-columns: 1fr;
    }

    .pms-hero-left {
        padding: 32px 20px;
    }
    .pms-h1 {
        font-size: 24px;
    }
    .pms-btn-row {
        flex-direction: column;
    }
    .pms-btn-row a {
        text-align: center;
    }

    .pms-verticals-header {
        padding: 24px 20px 0;
    }

    .pms-upcoming-grid {
        grid-template-columns: 1fr;
    }

    .pms-placeholder-stats {
        grid-template-columns: 1fr 1fr;
    }

    .pms-footer-inner {
        grid-template-columns: 1fr;
    }

    .pms-performance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pms-udemy-grid {
        grid-template-columns: 1fr;
    }

    .pms-section,
    .pms-section-alt {
        padding: 32px 0;   /* keep 0 side padding on mobile too */
    }

    .pms-inner-wrap {
        padding: 0 16px;   /* tightest inner padding on mobile */
    }

    .pms-cta-band {
        padding: 40px 20px;
    }

    .pms-cta-band h2 {
        font-size: 20px;
    }

    .pms-sec-title {
        font-size: 22px;
    }

    .pms-footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* ========================================
   LEARNDASH PAGE STYLES
   Registration · Login · My Learning · Success pages
   ======================================== */

/* ─────────────────────────────────────────
   GLOBAL LEARNDASH ELEMENT OVERRIDES
   Force all LD UI to match PMSoft design system.
   ───────────────────────────────────────── */

/* LD buttons */
.learndash-wrapper button:not(.pms-pw-toggle),
.learndash-wrapper input[type="submit"],
.learndash-wrapper .ld-button,
.learndash-wrapper .btn-blue,
.learndash-wrapper .learndash_login_form input[type="submit"],
#learndash_profile .ld-login-button {
    background-color: var(--pms-blue) !important;
    color: var(--pms-white) !important;
    border-radius: 4px !important;
    border: none !important;
    font-family: var(--pms-font) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}
.learndash-wrapper button:not(.pms-pw-toggle):hover,
.learndash-wrapper input[type="submit"]:hover,
.learndash-wrapper .ld-button:hover {
    background-color: var(--pms-accent) !important;
}

/* LD text inputs */
.learndash-wrapper input[type="text"],
.learndash-wrapper input[type="email"],
.learndash-wrapper input[type="password"],
.learndash-wrapper .learndash_login_form input[type="text"],
.learndash-wrapper .learndash_login_form input[type="password"] {
    border: 1px solid var(--pms-border) !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    font-family: var(--pms-font) !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: var(--pms-text) !important;
    background-color: var(--pms-white) !important;
    transition: border-color 0.2s ease !important;
}
.learndash-wrapper input[type="text"]:focus,
.learndash-wrapper input[type="email"]:focus,
.learndash-wrapper input[type="password"]:focus {
    border-color: var(--pms-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(27, 79, 138, 0.10) !important;
}

/* LD progress bar */
.learndash-wrapper .ld-progress-bar,
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage,
.learndash-wrapper .ld-progress-bar-percentage {
    background-color: var(--pms-blue) !important;
}
.learndash-wrapper .ld-progress-bar {
    border-radius: 4px !important;
    height: 8px !important;
}

/* LD course list item cards — white card + gold top border */
.learndash-wrapper .ld-course-list-items .ld-item-list-item,
.learndash-wrapper .ld-item-list-item {
    background-color: var(--pms-white) !important;
    border: 1px solid var(--pms-border) !important;
    border-top: 2px solid var(--pms-gold) !important;
    border-radius: var(--pms-radius-lg) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Course title in LD cards */
.learndash-wrapper .ld-item-list-item .ld-item-name,
.learndash-wrapper .ld-course-list-items .ld-item-name a,
.learndash-wrapper .ld-item-title {
    color: var(--pms-blue) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: var(--pms-font) !important;
}

/* "Continue Learning" / "Enroll" CTA on LD course cards */
.learndash-wrapper .ld-item-list-item .ld-item-components .ld-button,
.learndash-wrapper .ld-course-status-button,
.learndash-wrapper .btn.btn-blue {
    background-color: var(--pms-blue) !important;
    color: var(--pms-white) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: var(--pms-radius) !important;
}

/* LD links */
.learndash-wrapper a {
    color: var(--pms-blue) !important;
    text-decoration: none !important;
}
.learndash-wrapper a:hover {
    color: var(--pms-accent) !important;
}

/* Hide LD profile avatar and heading (not needed on custom dashboard) */
.learndash-wrapper .ld-user-profile-heading,
.learndash-wrapper .ld-profile-avatar,
.learndash-wrapper .ld-user-status-header,
.learndash-wrapper .ld-user-status-avatar,
.learndash-wrapper .ld-profile-avatar-wrap,
.learndash-wrapper .ld-course-aggregate-progress,
#learndash_profile .ld-profile-avatar {
    display: none !important;
}

/* LD login form labels */
.learndash-wrapper label,
.learndash-wrapper .learndash_login_form label {
    font-family: var(--pms-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--pms-text) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* LD error / success notices */
.learndash-wrapper .learndash-wrapper-error,
.learndash-wrapper .ld-alert-error {
    color: #C0392B !important;
    border: 1px solid #C0392B !important;
    background-color: #FFF5F5 !important;
    border-radius: var(--pms-radius) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
}
.learndash-wrapper .ld-alert-success,
.learndash-wrapper .learndash-wrapper-success {
    color: var(--pms-gold) !important;
    border: 1px solid var(--pms-gold) !important;
    background-color: #FFF8E7 !important;
    border-radius: var(--pms-radius) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
}

/* Hide LD's own "Register" link inside the login form
   — we have our own registration column next to it */
.pms-login-col .learndash-wrapper .ld-login-register,
.pms-login-col .learndash-wrapper .ld-login-links .ld-register-link,
.pms-login-col .learndash-wrapper .register {
    display: none !important;
}

/* ─────────────────────────────────────────
   REGISTRATION PAGE — HERO
   ───────────────────────────────────────── */
.pms-reg-hero {
    background-color: var(--pms-hero-bg);
}

.pms-reg-hero-inner {
    text-align: center;
    padding-top: 52px;
    padding-bottom: 36px;
}

.pms-reg-eyebrow {
    color: var(--pms-gold) !important;
    font-size: 12px;
    letter-spacing: 2px;
}

.pms-reg-h1 {
    font-size: 34px;
    font-weight: 700;
    color: var(--pms-blue);
    margin: 10px 0 12px;
    line-height: 1.25;
}

.pms-reg-hero-sub {
    font-size: 16px;
    color: var(--pms-muted);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ─────────────────────────────────────────
   REGISTRATION PAGE — 50/50 SPLIT LAYOUT
   ───────────────────────────────────────── */
.pms-reg-split-section {
    background-color: var(--pms-hero-bg);
    padding: 0 0 60px;
}

.pms-reg-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* Cards — white background, gold top border */
.pms-reg-card {
    background-color: var(--pms-white);
    border: 1px solid var(--pms-border);
    border-top: 2px solid var(--pms-gold);
    border-radius: var(--pms-radius-lg);
    padding: 30px;
    box-sizing: border-box;
}

.pms-reg-card-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--pms-blue);
    margin: 0 0 8px;
    line-height: 1.3;
}

.pms-reg-card-sub {
    font-size: 15px;
    color: var(--pms-muted);
    margin: 0 0 22px;
    line-height: 1.6;
}

/* LD login form wrapper — remove default margins */
.pms-ld-login-wrap .learndash-wrapper,
.pms-ld-login-wrap form {
    margin: 0 !important;
    padding: 0 !important;
}

/* "Forgot your password?" link below login form */
.pms-forgot-pw {
    margin-top: 16px;
    font-size: 14px;
    text-align: center;
}
.pms-forgot-pw a {
    color: var(--pms-muted);
    text-decoration: underline;
}
.pms-forgot-pw a:hover {
    color: var(--pms-blue);
}

/* ─────────────────────────────────────────
   REGISTRATION FORM FIELDS
   ───────────────────────────────────────── */
.pms-reg-form {
    display: flex;
    flex-direction: column;
}

.pms-field-group {
    margin-bottom: 16px;
}

.pms-reg-form label {
    font-size: 14px;
    font-weight: 700;
    color: var(--pms-text);
    display: block;
    margin-bottom: 6px;
}

.pms-required {
    color: #C0392B;
    margin-left: 2px;
}

.pms-reg-form input[type="text"],
.pms-reg-form input[type="email"],
.pms-reg-form input[type="password"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--pms-border);
    border-radius: 6px;
    font-family: var(--pms-font);
    font-size: 14px;
    color: var(--pms-text);
    background-color: var(--pms-white);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
}

.pms-reg-form input[type="text"]:focus,
.pms-reg-form input[type="email"]:focus,
.pms-reg-form input[type="password"]:focus {
    border-color: var(--pms-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 79, 138, 0.12);
}

/* Two-column field row (first name + last name) */
.pms-field-row.pms-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 0;
}
.pms-field-row.pms-two-col .pms-field-group {
    margin-bottom: 16px;
}

/* Password field with show/hide toggle */
.pms-pw-field {
    position: relative;
    display: flex;
    align-items: center;
}

.pms-pw-field input[type="text"],
.pms-pw-field input[type="password"] {
    padding-right: 42px; /* room for toggle button */
}

.pms-pw-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--pms-muted);
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
    line-height: 1;
}
.pms-pw-toggle:hover {
    color: var(--pms-blue);
}

/* Register / submit button — full width, primary blue */
.pms-reg-submit {
    width: 100%;
    background-color: var(--pms-blue);
    color: var(--pms-white);
    font-family: var(--pms-font);
    font-size: 15px;
    font-weight: 700;
    padding: 12px 0;
    border: none;
    border-radius: var(--pms-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 4px;
    letter-spacing: 0.3px;
}
.pms-reg-submit:hover {
    background-color: var(--pms-accent);
}

/* Terms note below register button */
.pms-terms-note {
    font-size: 12px;
    color: var(--pms-muted);
    text-align: center;
    margin-top: 14px;
    line-height: 1.6;
}
.pms-terms-note a {
    color: var(--pms-blue);
    text-decoration: underline;
}

/* Form error / success notices */
.pms-form-notice {
    padding: 12px 16px;
    border-radius: var(--pms-radius);
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.5;
}
.pms-notice-error {
    background-color: #FFF5F5;
    border: 1px solid #C0392B;
    color: #C0392B;
}
.pms-notice-success {
    background-color: #FFF8E7;
    border: 1px solid var(--pms-gold);
    color: var(--pms-gold);
}

/* ─────────────────────────────────────────
   SUCCESS PAGES (Registration + Password Reset)
   ───────────────────────────────────────── */
.pms-success-section {
    background-color: var(--pms-hero-bg);
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    padding: 60px 20px;
    box-sizing: border-box;
}

.pms-success-outer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pms-success-card {
    background-color: var(--pms-white);
    border: 1px solid var(--pms-border);
    border-top: 2px solid var(--pms-gold);
    border-radius: var(--pms-radius-lg);
    padding: 48px 40px;
    max-width: 600px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.pms-success-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.pms-success-h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--pms-blue);
    margin: 0 0 20px;
    line-height: 1.3;
}

.pms-success-text {
    font-size: 16px;
    color: var(--pms-muted);
    line-height: 1.7;
    margin: 0 0 16px;
}
.pms-success-text a {
    color: var(--pms-blue);
    text-decoration: underline;
}

.pms-success-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

.pms-success-btn-primary {
    display: inline-block;
    background-color: var(--pms-blue);
    color: var(--pms-white) !important;
    font-family: var(--pms-font);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: var(--pms-radius);
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}
.pms-success-btn-primary:hover {
    background-color: var(--pms-accent);
}

.pms-success-btn-secondary {
    display: inline-block;
    background-color: var(--pms-white);
    color: var(--pms-blue) !important;
    font-family: var(--pms-font);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: var(--pms-radius);
    border: 2px solid var(--pms-blue);
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.pms-success-btn-secondary:hover {
    background-color: var(--pms-blue);
    color: var(--pms-white) !important;
}

/* ─────────────────────────────────────────
   MY LEARNING DASHBOARD
   ───────────────────────────────────────── */

/* A. Top blue welcome bar */
.pms-ml-topbar {
    background-color: var(--pms-blue);
    padding: 0;
}

.pms-ml-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-sizing: border-box;
}

.pms-ml-dashboard-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--pms-white);
    margin: 0;
    line-height: 1.2;
}

.pms-ml-topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.pms-ml-greeting {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.pms-ml-logout-link {
    font-size: 14px;
    color: var(--pms-white) !important;
    text-decoration: underline !important;
    font-weight: 600;
    transition: opacity 0.2s ease;
}
.pms-ml-logout-link:hover {
    opacity: 0.75;
}

/* B. Stats band */
.pms-ml-stats-band {
    background-color: var(--pms-section-bg);
    border-bottom: 1px solid var(--pms-border);
    padding: 24px 0;
}

.pms-ml-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pms-ml-stat-card {
    background-color: var(--pms-white);
    border: 1px solid var(--pms-border);
    border-radius: var(--pms-radius-lg);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pms-ml-stat-num {
    font-size: 32px;
    font-weight: 700;
    color: var(--pms-blue);
    line-height: 1;
    margin-bottom: 6px;
    display: block;
}

.pms-ml-stat-label {
    font-size: 12px;
    color: var(--pms-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    display: block;
}

/* C. Section heading */
.pms-ml-section-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--pms-blue);
    margin: 0 0 6px;
}

/* LD course list wrapper — override default LD grid styles */
.pms-ml-ld-grid-wrap {
    margin-top: 4px;
}

/* Override LD default course grid width */
.pms-ml-ld-grid-wrap .learndash-wrapper {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pms-ml-ld-grid-wrap .ld-course-list-items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* LD fallback card (when shortcode is unavailable) */
.pms-ml-ld-fallback {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pms-ml-fallback-card {
    background-color: var(--pms-white);
    border: 1px solid var(--pms-border);
    border-top: 2px solid var(--pms-gold);
    border-radius: var(--pms-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pms-ml-fallback-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pms-blue);
}

.pms-ml-continue-btn {
    display: inline-block;
    background-color: var(--pms-blue);
    color: var(--pms-white) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--pms-radius);
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    align-self: flex-start;
}
.pms-ml-continue-btn:hover {
    background-color: var(--pms-accent);
}

/* D. Empty state */
.pms-ml-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 52px 20px;
    gap: 16px;
}

.pms-ml-empty-icon {
    display: block;
    margin-bottom: 4px;
}

.pms-ml-empty-text {
    font-size: 17px;
    color: var(--pms-muted);
    margin: 0;
}

/* E. Bottom log out */
.pms-ml-bottom-logout {
    padding: 28px 20px;
    text-align: center;
    border-top: 1px solid var(--pms-border);
}

.pms-ml-bottom-logout-link {
    font-size: 14px;
    color: var(--pms-muted) !important;
    text-decoration: underline !important;
    transition: color 0.2s ease;
}
.pms-ml-bottom-logout-link:hover {
    color: var(--pms-blue) !important;
}

/* ─────────────────────────────────────────
   RESPONSIVE — LEARNDASH PAGES
   ───────────────────────────────────────── */

/* Tablet ≤ 900px */
@media (max-width: 900px) {
    .pms-reg-split {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Swap order: Register on top, Login below on mobile */
    .pms-login-col    { order: 2; }
    .pms-register-col { order: 1; }

    .pms-reg-h1 { font-size: 26px; }

    .pms-ml-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .pms-ml-ld-grid-wrap .ld-course-list-items {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .pms-ml-ld-fallback {
        grid-template-columns: repeat(2, 1fr);
    }

    .pms-ml-topbar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 20px 24px;
    }
    .pms-ml-dashboard-title { font-size: 22px; }
}

/* Mobile ≤ 600px */
@media (max-width: 600px) {
    .pms-reg-card { padding: 24px 20px; }

    .pms-field-row.pms-two-col {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pms-reg-h1 { font-size: 22px; }

    .pms-success-card { padding: 36px 24px; }
    .pms-success-h1   { font-size: 22px; }
    .pms-success-buttons { flex-direction: column; align-items: stretch; }
    .pms-success-btn-primary,
    .pms-success-btn-secondary { text-align: center; }

    .pms-ml-stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .pms-ml-ld-grid-wrap .ld-course-list-items {
        grid-template-columns: 1fr !important;
    }
    .pms-ml-ld-fallback {
        grid-template-columns: 1fr;
    }

    .pms-ml-topbar-inner { padding: 16px 20px; }
}