/* ==========================================================================
   VivreFR Shared Tools Design System & Component Library - Version 1.07.586
   File: vivrefr-tools.css
   Purpose: Shared UI layer across all interactive VivreFR tools & calculators
   ========================================================================== */

/* ----------------------
   0. BUTTON DESIGN TOKENS (Foundation Layer)
---------------------- */
:root {
  --vf-btn-height: 52px;
  --vf-btn-padding-y: 16px;
  --vf-btn-padding-x: 32px;
  --vf-btn-radius: 999px;
  --vf-btn-font-size: 16px;
  --vf-btn-font-weight: 600;
}

/* ----------------------
   1. LAYOUT & CONTAINERS
---------------------- */
.pp-page-wrapper,
.vf-page-wrapper,
.vivrefr-tool {
  background-color: var(--vf-bg, #f6f2ec) !important;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.pp-container,
.vf-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.pp-section,
.vf-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--vf-line);
}

.pp-grid,
.pp-grid-2,
.vf-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .pp-grid,
    .pp-grid-2,
    .vf-grid-2 {
        grid-template-columns: 1fr;
    }
}

.pp-card-grid,
.vf-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}



/* ----------------------
   2. HERO HEADER
---------------------- */
.pp-hero,
.vf-hero {
    text-align: center;
    margin-bottom: 50px;
}

.pp-main-title,
.vf-main-title {
    color: var(--vf-navy);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 500;
    margin: 0 0 15px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.pp-meta,
.vf-meta {
    color: var(--vf-muted);
    font-size: 1rem;
    display: flex;
    justify-content: center;
    gap: 12px;
    align-items: center;
    font-weight: 500;
}

.pp-brand,
.vf-brand {
    color: var(--vf-red-ui);
    font-weight: 700;
}

.pp-divider,
.vf-divider {
    color: var(--vf-line);
    opacity: 0.6;
}

.pp-description,
.pp-intro,
.vf-intro {
    font-size: 1.05rem;
    margin-bottom: 40px;
    color: var(--vf-ink);
    line-height: 1.6;
}


/* ----------------------
   3. CARDS & CONTAINERS
---------------------- */
.pp-card,
.vf-card {
    background: var(--vf-surface);
    border: 1px solid var(--vf-line);
    border-radius: var(--vf-r-lg);
    padding: 50px;
    box-shadow: var(--vf-shadow-card);
    transition: box-shadow 0.3s ease;
}

.pp-card:hover,
.vf-card:hover {
    box-shadow: var(--vf-shadow-hover);
}

.vf-card-primary {
    background: var(--vf-surface);
    border: 1px solid var(--vf-line-strong);
}

.vf-card-secondary {
    background: var(--vf-surface-soft);
    border: 1px solid var(--vf-line);
}

.vf-card-info {
    background: rgba(28, 50, 129, 0.03);
    border-left: 4px solid var(--vf-navy);
}

.vf-card-warning {
    background: rgba(200, 50, 26, 0.03);
    border-left: 4px solid var(--vf-red-ui);
}


/* ----------------------
   4. FORMS & INPUT CONTROLS
---------------------- */
.pp-field,
.vf-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.pp-field:last-child,
.vf-field:last-child {
    margin-bottom: 0;
}

.pp-field label,
.vf-field label,
.vf-label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--vf-ink);
    font-size: 15px;
}


.vf-field select,
.vf-input,
.vf-select {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--vf-line-strong);
    border-radius: var(--vf-r-sm);
    background: var(--vf-surface);
    font-family: inherit;   /* DS 2.0: form elements don't inherit by default */
    font-size: 15px;
    color: var(--vf-ink);
    transition: all 0.25s ease;
}

.vf-field select:focus,
.vf-input:focus,
.vf-select:focus {
    outline: none;
    border-color: var(--vf-navy);
    box-shadow: 0 0 0 3px rgba(28, 50, 129, 0.15);
}

.vf-options,
.vf-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.vf-options label,
.vf-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--vf-line-strong);
    border-radius: var(--vf-r-sm);
    cursor: pointer;
    transition: all 0.25s ease;
    margin: 0;
    font-weight: 500;
    color: var(--vf-muted);
    background: var(--vf-surface);
}

.vf-options label:hover,
.vf-options label:has(input:checked),
.vf-radio-label:hover,
.vf-radio-label:has(input:checked) {
    border-color: var(--vf-navy);
    color: var(--vf-navy);
    background: rgba(28, 50, 129, 0.03);
}

.vf-options input[type="radio"],
.vf-checkbox input[type="checkbox"] {
    accent-color: var(--vf-navy);
    margin: 0;
}


/* ----------------------
   5. BUTTONS & ACTIONS (VivreFR Capsule System — Single Source of Truth)
---------------------- */
.vf-btn,
.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vf-btn-height);
    padding: var(--vf-btn-padding-y) var(--vf-btn-padding-x);
    font-family: inherit;   /* DS 2.0: button elements don't inherit by default */
    font-size: var(--vf-btn-font-size);
    font-weight: var(--vf-btn-font-weight);
    line-height: 1;
    border-radius: var(--vf-btn-radius);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

/* Controlled System Variant: Compact Button (Unused globally, reserved for tight UI spaces) */
.vf-btn--compact {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 14px;
}

.vf-btn--primary,
.vf-btn-primary {
    background-color: var(--vf-primary, #2D3E8B);
    color: #ffffff !important;
    border: none;
}

.vf-btn--primary:hover,
.vf-btn-primary:hover {
    background-color: var(--vf-navy-dark, #14245c);
    transform: translateY(-1px);
    opacity: 0.95;
    box-shadow: 0 6px 20px rgba(28, 50, 129, 0.2);
}

.vf-btn--primary:active,
.vf-btn-primary:active {
    transform: translateY(0);
}

.vf-btn--secondary,
.vf-btn-secondary {
    background-color: var(--vf-surface-soft, #ece6de);
    color: var(--vf-ink, #080f1e) !important;
    border: 1px solid var(--vf-line-strong, rgba(0,0,0,0.12));
}

.vf-btn--secondary:hover,
.vf-btn-secondary:hover {
    background-color: var(--vf-brand-beige, #dcd6cc);
    transform: translateY(-1px);
    opacity: 0.95;
}

.vf-btn--outline,
.vf-btn-outline {
    background: transparent;
    color: var(--vf-navy, #1c3281) !important;
    border: 1.5px solid var(--vf-navy, #1c3281);
    border-radius: 999px;
}

.vf-btn--full,
.vf-btn-full {
    width: 100%;
}

.vf-btn:disabled,
.vf-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}


/* ----------------------
   6. RESULT COMPONENTS & BANNERS
---------------------- */
.vf-info-banner {
    background: var(--vf-surface);
    border: 1px solid var(--vf-line);
    border-radius: var(--vf-r-md);
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: var(--vf-shadow-card);
}

.vf-scorecard-calc,
.vf-summary-card {
    background: linear-gradient(145deg, var(--vf-hero-panel-start) 0%, var(--vf-hero-panel-end) 100%);
    color: #ffffff;
    border-radius: var(--vf-r-lg);
    padding: 40px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: var(--vf-shadow-hover);
}

.vf-scorecard-value,
.vf-metric-value {
    font-family: var(--vf-display);
    font-size: 56px;
    font-weight: 600;
    line-height: 1;
}

.vf-scorecard-label,
.vf-metric-label {
    font-family: var(--vf-body);
    margin-top: 12px;
    font-size: 15px;
    font-weight: 500;
    opacity: 0.85;
}


/* ----------------------
   7. TYPOGRAPHY & BADGES
---------------------- */
.pp-section h2,
.vf-section h2 {
    color: var(--vf-navy-deep);
    font-size: 1.75rem;
    font-weight: 500;
    margin: 0 0 15px;
    letter-spacing: -0.01em;
}

.pp-section h3,
.vf-section h3 {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--vf-ink);
    margin-bottom: 10px;
}

.vf-badge-green { background: rgba(22, 163, 74, 0.08); color: var(--vf-green-ui); }
.vf-badge-red   { background: rgba(200, 50, 26, 0.08); color: var(--vf-red-ui); }
.vf-badge-blue  { background: rgba(28, 50, 129, 0.08); color: var(--vf-navy); }

.vf-pct {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--vf-muted) !important;
    background: rgba(28, 50, 129, 0.06);
    padding: 4px 10px;
    border-radius: 6px;
    text-align: center;
}


/* ----------------------
   8. UTILITIES
---------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ----------------------
   9. ACCESSIBILITY ENHANCEMENTS (Component-Scoped)
---------------------- */
.vf-btn:focus-visible,
.vf-textlink:focus-visible,
.vf-toc-link:focus-visible,
.vf-cost-tab:focus-visible,
.vf-faq summary:focus-visible,
.pp-link:focus-visible,
.vf-input:focus-visible,
.vf-select:focus-visible {
    outline: 2px solid var(--vf-navy);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .vf-btn,
    .vf-textlink,
    .vf-textlink::after,
    .vf-scorecard__fill,
    .vf-n-card,
    .vf-n-card::after,
    .vf-suburb-card,
    .vf-suburb-card::after,
    .vf-work-card,
    .vf-work-card::after,
    .vf-admin-card,
    .vf-transport-card,
    .vf-edu-card,
    .vf-ls-card,
    .vf-cost-tab,
    .vf-alt-card,
    .vf-alt-card__img img,
    .vf-alt-card__link,
    .vf-alt-card__link::after,
    .vf-faq,
    .vf-faq summary,
    .vf-faq summary::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}




/* ==========================================================================
   VivreFR Design System — Hero Title Single Source of Truth (COLC Standard V1.08.248)
   ========================================================================== */

.pp-hero,
.vf-hero,
.vivrefr-tool .pp-hero,
.vivrefr-tool .vf-hero {
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  width: 100% !important;
}

.pp-main-title,
.vf-main-title,
.vivrefr-tool h1.pp-main-title,
.vivrefr-tool h1.vf-main-title,
.vivrefr-tool .pp-main-title,
.vivrefr-tool .vf-main-title {
  color: var(--vf-navy, #1c3281) !important;
  font-family: var(--vf-display, "Plus Jakarta Sans", -apple-system, sans-serif) !important;
  font-size: clamp(2.2rem, 5vw, 3.2rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  max-width: 850px !important;
  margin: 0 auto 12px auto !important;
  text-align: center !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.pp-meta,
.vf-meta,
.vivrefr-tool .pp-meta,
.vivrefr-tool .vf-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: var(--vf-muted, #64748b) !important;
  font-weight: 500 !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.pp-brand,
.vf-brand,
.vivrefr-tool .pp-brand,
.vivrefr-tool .vf-brand {
  font-weight: 700 !important;
  color: var(--vf-navy, #1c3281) !important;
}

.pp-divider,
.vf-divider,
.vivrefr-tool .pp-divider,
.vivrefr-tool .vf-divider {
  color: var(--vf-muted, #64748b) !important;
  opacity: 0.6 !important;
}