/**
 * Font Protection - Prevent Theme Font Override
 *
 * This file ensures the calculator uses Inter font family consistently
 * across all elements, overriding any WordPress theme font inheritance.
 *
 * @package Utleiekalk_FINN
 * @version 2.0.4
 */

/* =================================================================
   BASE FONT ENFORCEMENT - Apply Inter to entire calculator
   ================================================================= */

/**
 * Main wrapper - Set base font for entire calculator
 * Use high specificity to override theme styles
 */
html body .utleiekalk-finn-wrapper,
html body .utleiekalk-finn-wrapper *,
html body .utleiekalk-finn-form,
html body .utleiekalk-finn-form * {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* =================================================================
   INPUT FIELDS AND FORM CONTROLS
   ================================================================= */

/**
 * Text inputs, number inputs, select dropdowns
 * These are most commonly overridden by themes
 */
html body .utleiekalk-finn-wrapper input[type="text"],
html body .utleiekalk-finn-wrapper input[type="number"],
html body .utleiekalk-finn-wrapper input[type="url"],
html body .utleiekalk-finn-wrapper input[type="email"],
html body .utleiekalk-finn-wrapper select,
html body .utleiekalk-finn-wrapper textarea,
html body .utleiekalk-finn-form input[type="text"],
html body .utleiekalk-finn-form input[type="number"],
html body .utleiekalk-finn-form input[type="url"],
html body .utleiekalk-finn-form input[type="email"],
html body .utleiekalk-finn-form select,
html body .utleiekalk-finn-form textarea {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
}

/**
 * Plugin-specific input classes
 */
html body .utleiekalk-finn-wrapper .uk-input,
html body .utleiekalk-finn-wrapper .uk-number,
html body .utleiekalk-finn-wrapper .uk-url,
html body .utleiekalk-finn-wrapper .uk-select,
html body .utleiekalk-finn-form .uk-input,
html body .utleiekalk-finn-form .uk-number,
html body .utleiekalk-finn-form .uk-url,
html body .utleiekalk-finn-form .uk-select {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* =================================================================
   LABELS AND HELPER TEXT
   ================================================================= */

/**
 * Form field labels
 * Often inherit theme fonts and need explicit override
 */
html body .utleiekalk-finn-wrapper label,
html body .utleiekalk-finn-wrapper .uk-field label,
html body .utleiekalk-finn-form label,
html body .utleiekalk-finn-form .uk-field label {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

/**
 * Helper text below inputs
 */
html body .utleiekalk-finn-wrapper .uk-help,
html body .utleiekalk-finn-form .uk-help {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
}

/* =================================================================
   SECTION HEADINGS AND TITLES
   ================================================================= */

/**
 * Section titles (Grunnlag, Lån, etc.)
 */
html body .utleiekalk-finn-wrapper .uk-step-title,
html body .utleiekalk-finn-form .uk-step-title {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
}

/**
 * Section hints/descriptions
 */
html body .utleiekalk-finn-wrapper .uk-step-hint,
html body .utleiekalk-finn-form .uk-step-hint {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
}

/* =================================================================
   BUTTONS
   ================================================================= */

/**
 * All button text should use Inter
 * Already covered by button-protection.css but reinforced here
 */
html body .utleiekalk-finn-wrapper .uk-btn,
html body .utleiekalk-finn-wrapper button,
html body .utleiekalk-finn-form .uk-btn,
html body .utleiekalk-finn-form button {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* =================================================================
   RESULTS AND METRICS
   ================================================================= */

/**
 * Result section - calculated values display
 */
html body .utleiekalk-finn-wrapper .metric-title,
html body .utleiekalk-finn-wrapper .metric-value,
html body .utleiekalk-finn-form .metric-title,
html body .utleiekalk-finn-form .metric-value {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/**
 * Metric titles
 */
html body .utleiekalk-finn-wrapper .metric-title,
html body .utleiekalk-finn-form .metric-title {
    font-size: 13px !important;
    font-weight: 700 !important;
}

/**
 * Metric values (the calculated numbers)
 */
html body .utleiekalk-finn-wrapper .metric-value,
html body .utleiekalk-finn-form .metric-value {
    font-size: 22px !important;
    font-weight: 800 !important;
}

/* =================================================================
   RANGE SLIDER OUTPUT
   ================================================================= */

/**
 * The percentage display next to range sliders
 */
html body .utleiekalk-finn-wrapper .uk-range-out,
html body .utleiekalk-finn-wrapper .uk-range-out input,
html body .utleiekalk-finn-form .uk-range-out,
html body .utleiekalk-finn-form .uk-range-out input {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
}

/* =================================================================
   SEGMENT SWITCHER (Rental Mode Selector)
   ================================================================= */

/**
 * The three-way selector for rental modes
 */
html body .utleiekalk-finn-wrapper .seg-btn,
html body .utleiekalk-finn-form .seg-btn {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* =================================================================
   DYNAMIC ROWS (Extra Expenses, Renovation, etc.)
   ================================================================= */

/**
 * Inputs and text in dynamically added rows
 */
html body .utleiekalk-finn-wrapper .extra-row input,
html body .utleiekalk-finn-wrapper .opp-row input,
html body .utleiekalk-finn-wrapper .kollektiv-row input,
html body .utleiekalk-finn-form .extra-row input,
html body .utleiekalk-finn-form .opp-row input,
html body .utleiekalk-finn-form .kollektiv-row input {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* =================================================================
   NOTICES AND MESSAGES
   ================================================================= */

/**
 * Success/error/info messages
 */
html body .utleiekalk-finn-wrapper .notice,
html body .utleiekalk-finn-wrapper .uk-message,
html body .utleiekalk-finn-form .notice,
html body .utleiekalk-finn-form .uk-message {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
}

/* =================================================================
   SAVED CASES DROPDOWN
   ================================================================= */

/**
 * Saved calculations dropdown and list
 */
html body .utleiekalk-finn-wrapper #saved-cases,
html body .utleiekalk-finn-wrapper .case-list,
html body .utleiekalk-finn-wrapper .case-item,
html body .utleiekalk-finn-form #saved-cases,
html body .utleiekalk-finn-form .case-list,
html body .utleiekalk-finn-form .case-item {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* =================================================================
   STICKY WIDGET (Bottom-right results popup)
   ================================================================= */

/**
 * The floating results widget
 */
html body .sticky-widget,
html body .sticky-widget *,
html body #sticky-results,
html body #sticky-results * {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

html body .sticky-widget .sticky-label,
html body #sticky-results .sticky-label {
    font-size: 12px !important;
    font-weight: 600 !important;
}

html body .sticky-widget .sticky-value,
html body #sticky-results .sticky-value {
    font-size: 16px !important;
    font-weight: 800 !important;
}

/* =================================================================
   STICKY ACTIONS PANEL (Left side menu)
   ================================================================= */

/**
 * Left sidebar action buttons
 */
html body .sticky-actions-panel,
html body .sticky-actions-panel * {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

html body .sticky-actions-panel .action-button {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* =================================================================
   STICKY TOC (Right side navigation)
   ================================================================= */

/**
 * Right sidebar table of contents
 */
html body .sticky-toc,
html body .sticky-toc * {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

html body .sticky-toc .toc-number {
    font-size: 16px !important;
    font-weight: 700 !important;
}

html body .sticky-toc .toc-label {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* =================================================================
   SIMULATION TABLE
   ================================================================= */

/**
 * Multi-year simulation table
 */
html body .utleiekalk-finn-wrapper .simulation-table,
html body .utleiekalk-finn-wrapper .simulation-table *,
html body .utleiekalk-finn-form .simulation-table,
html body .utleiekalk-finn-form .simulation-table * {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

html body .utleiekalk-finn-wrapper .simulation-table th,
html body .utleiekalk-finn-form .simulation-table th {
    font-size: 12px !important;
    font-weight: 700 !important;
}

html body .utleiekalk-finn-wrapper .simulation-table td,
html body .utleiekalk-finn-form .simulation-table td {
    font-size: 13px !important;
}

html body .utleiekalk-finn-wrapper .simulation-table input,
html body .utleiekalk-finn-form .simulation-table input {
    font-size: 13px !important;
}

/* =================================================================
   MOBILE OPTIMIZATIONS
   ================================================================= */

/**
 * Ensure font sizes remain consistent on mobile
 * while maintaining the 16px minimum for inputs to prevent zoom
 */
@media (max-width: 900px) {
    /**
     * Input fields on mobile need 16px minimum to prevent auto-zoom
     * Already handled in mobile-fix.css, but ensure font-family is applied
     */
    html body .utleiekalk-finn-wrapper input,
    html body .utleiekalk-finn-wrapper select,
    html body .utleiekalk-finn-wrapper textarea,
    html body .utleiekalk-finn-form input,
    html body .utleiekalk-finn-form select,
    html body .utleiekalk-finn-form textarea {
        font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    }
}

/* =================================================================
   FALLBACK FOR ANY MISSED ELEMENTS
   ================================================================= */

/**
 * Catch-all rule for any elements we might have missed
 * Uses universal selector within calculator wrapper
 */
html body div.utleiekalk-finn-wrapper *,
html body div.utleiekalk-finn-form *,
html body form.utleiekalk-finn-form * {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* =================================================================
   THEME-SPECIFIC OVERRIDES
   ================================================================= */

/**
 * Astra theme commonly overrides input fonts
 * Add specific overrides for known problematic themes
 */
.ast-container .utleiekalk-finn-wrapper,
.ast-container .utleiekalk-finn-wrapper * {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/**
 * GeneratePress theme
 */
.site-content .utleiekalk-finn-wrapper,
.site-content .utleiekalk-finn-wrapper * {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/**
 * Divi theme
 */
.et_builder_outer_content .utleiekalk-finn-wrapper,
.et_builder_outer_content .utleiekalk-finn-wrapper * {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/**
 * Elementor
 * Already handled in elementor-compat.css, but reinforce here
 */
.elementor-widget-container .utleiekalk-finn-wrapper,
.elementor-widget-container .utleiekalk-finn-wrapper * {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* =================================================================
   END OF FONT PROTECTION

   Note: Inter font is loaded via Google Fonts in calculator.css,
   flipping.css, and yield.css
   ================================================================= */