/**
 * VIQ Candidate Shell
 * Shared page wrapper for all candidate-facing pages.
 * Loaded on: /careers, /job-application, /interview-prep, /new-hire-portal
 *
 * Dependencies: viq-design-system.css (tokens must be loaded first)
 * Version: 1.0.0
 */

/* ============================================================================
   SECTION 1: Body-Level Base
   ============================================================================ */

body.viq-candidate-shell {
    font-family: var(--font-sans);
    font-size: 16px; /* matches updated --text-base */
    line-height: var(--leading-normal); /* 1.5 */
    color: var(--text-body-color);
    background: #FFFFFF; /* user decision: pure white, not --brand-bg */
    min-height: 100vh;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ============================================================================
   SECTION 2: Box-Sizing Reset (scoped to shell)
   ============================================================================ */

body.viq-candidate-shell *,
body.viq-candidate-shell *::before,
body.viq-candidate-shell *::after {
    box-sizing: border-box;
}

/* ============================================================================
   SECTION 3: WordPress Theme Suppression
   Justified use of !important -- targeting WP core output that must be hidden
   ============================================================================ */

body.viq-candidate-shell #wpadminbar {
    display: none !important;
}

html.viq-candidate-shell-html {
    margin-top: 0 !important; /* removes WP admin bar top margin */
}

/* Hide theme structural elements (direct children only to avoid catching nested content) */
body.viq-candidate-shell > header:not(.viq-candidate-header) {
    display: none !important;
}

body.viq-candidate-shell > footer:not(.viq-candidate-footer) {
    display: none !important;
}

body.viq-candidate-shell > nav:not(.viq-candidate-nav) {
    display: none !important;
}

body.viq-candidate-shell .wp-site-blocks {
    display: none !important;
}

/* Sidebar suppression -- direct child only to protect plugin-owned sidebars */
body.viq-candidate-shell > aside:not(.viq-candidate-aside) {
    display: none !important;
}

body.viq-candidate-shell > [class*="sidebar"]:not([class*="viq-"]) {
    display: none !important;
}

body.viq-candidate-shell > [id*="sidebar"] {
    display: none !important;
}

body.viq-candidate-shell [class*="widget"]:not([class*="viq-"]) {
    display: none !important;
}

body.viq-candidate-shell #secondary {
    display: none !important;
}

body.viq-candidate-shell .widget-area {
    display: none !important;
}

/* ============================================================================
   SECTION 4: Sticky Branded Header
   ============================================================================ */

.viq-candidate-header {
    background: var(--brand-authority-black);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    padding: 0 var(--space-6);
    height: 64px;
    flex-shrink: 0;
}

.viq-candidate-header-logo {
    height: 40px;
    width: auto;
    display: block;
    border-radius: 50%; /* subtle clip to clean up JPEG compression artifacts at edge */
}

.viq-candidate-header-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
    margin-left: var(--space-3);
    letter-spacing: 0.02em;
}

/* ============================================================================
   SECTION 5: Content Containers
   ============================================================================ */

/* Default container -- optimized for forms */
.viq-candidate-container {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-5) var(--space-16);
}

/* Wide variant -- content-heavy pages */
.viq-candidate-container--wide {
    max-width: 960px;
}

/* Narrow variant -- simple/focused pages */
.viq-candidate-container--narrow {
    max-width: 600px;
}

/* ============================================================================
   SECTION 6: Typography Overrides (scoped to candidate shell)
   ============================================================================ */

body.viq-candidate-shell h1 {
    font-size: var(--text-page-title); /* 36px */
    font-weight: var(--font-bold);
    line-height: 1.2;
    color: var(--text-heading-color);
    margin: 0 0 var(--space-4) 0;
}

body.viq-candidate-shell h2 {
    font-size: var(--text-section-heading); /* 24px */
    font-weight: var(--font-bold);
    line-height: 1.25;
    color: var(--text-heading-color);
    margin: 0 0 var(--space-3) 0;
}

body.viq-candidate-shell h3 {
    font-size: var(--text-subsection); /* 18px */
    font-weight: var(--font-semibold);
    line-height: 1.3;
    color: var(--text-heading-color);
    margin: 0 0 var(--space-2) 0;
}

body.viq-candidate-shell p {
    margin: 0 0 var(--space-4) 0;
}

body.viq-candidate-shell small,
body.viq-candidate-shell .viq-text-small {
    font-size: var(--text-small);
    color: var(--text-secondary-color);
}

body.viq-candidate-shell .viq-text-caption {
    font-size: var(--text-caption);
    color: var(--text-secondary-color);
}

/* ============================================================================
   SECTION 7: Floating Card Variant
   ============================================================================ */

.viq-card-float {
    background: white;
    border: none;
    border-radius: var(--radius-xl); /* 12px -- Stripe-like floating cards */
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
}

/* ============================================================================
   SECTION 8: Link Styling (scoped to candidate shell)
   ============================================================================ */

body.viq-candidate-shell a {
    color: var(--brand-trust-blue);
    text-decoration: none;
}

body.viq-candidate-shell a:hover {
    text-decoration: underline;
}

/* ============================================================================
   SECTION 9: Responsive Breakpoints
   ============================================================================ */

@media (max-width: 768px) {
    .viq-candidate-container {
        padding: var(--space-6) var(--space-4) var(--space-10);
    }

    body.viq-candidate-shell h1 {
        font-size: var(--text-4xl); /* 30px -- still commanding on mobile */
    }

    .viq-card-float {
        padding: var(--space-6);
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 480px) {
    .viq-candidate-header {
        padding: 0 var(--space-4);
        height: 56px;
    }

    .viq-candidate-header-logo {
        height: 32px;
    }

    .viq-candidate-header-title {
        font-size: 1rem;
    }

    .viq-candidate-container {
        padding: var(--space-5) var(--space-3) var(--space-8);
    }
}

/* ============================================================================
   SECTION 10: Optional Footer
   ============================================================================ */

.viq-candidate-footer {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    color: var(--text-secondary-color);
    font-size: var(--text-small);
}