/**
 * Newio Theme - Custom CSS
 * 
 * @package NewioTheme
 * @version 1.0.0
 */

/* ==========================================================================
   Custom Variables
   ========================================================================== */

:root {
    /* =========================================================================
       newio.ai CI Farben - ZENTRALE DEFINITION
       ========================================================================= */
    
    /* Brand Colors */
    --ci-accent-red: #ff0046;         /* Roter Punkt Akzentfarbe */
    --ci-accent-turquoise: #7bf8dd;   /* Akzent Helltürkis */
    --ci-dark-green: #061611;         /* Dunkelgrün */
    --ci-light-green: #01362d;        /* Hellgrün (Primary) */
    --ci-dark-gray: #80888a;          /* Dunkelgrau */
    --ci-light-gray: #e1e1e1;         /* Hellgrau */
    --ci-white: #ffffff;              /* Weiß */
    
    /* Heading Color */
    --ci-heading-color: var(--ci-primary);

    /* Semantic Aliases */
    --ci-primary: var(--ci-light-green);
    --ci-secondary: var(--ci-dark-green);
    --ci-accent: var(--ci-accent-red);
    --ci-text: var(--ci-dark-green);
    --ci-text-muted: var(--ci-dark-gray);
    --ci-background: var(--ci-white);
    --ci-border: var(--ci-light-gray);
    
    /* Legacy aliases for compatibility */
    --newio-primary: var(--ci-primary);
    --newio-primary-dark: var(--ci-secondary);
    --newio-secondary: var(--ci-dark-gray);
    --newio-dark: var(--ci-dark-green);
    --newio-light: var(--ci-light-gray);
    --newio-white: var(--ci-white);
    
    /* Spacing */
    --newio-spacing-sm: 0.5rem;
    --newio-spacing-md: 1rem;
    --newio-spacing-lg: 2rem;
    --newio-spacing-xl: 4rem;
    
    /* Border Radius */
    --newio-radius: 0.5rem;
    --newio-radius-lg: 1rem;
    
    /* ==========================================================================
       Unified Button Sizing - SINGLE SOURCE OF TRUTH
       ========================================================================== */
    --btn-padding-y: 0.75rem;
    --btn-padding-x: 1.5rem;
    --btn-font-size: 0.9rem;
    --btn-font-weight: 600;
    --btn-radius: 8px;
    --btn-line-height: 1.2;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
    font-size: 1.125rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--newio-dark);
    line-height: 1.6;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--ci-primary, #01362d) !important;
    font-weight: 700;
    line-height: 1.2;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* ==========================================================================
   Unified Button Styles - Global Override
   All buttons use the same sizing for visual consistency.
   ========================================================================== */

.newio-btn,
.newio-nav__cta,
.newio-nav__login,
.newio-nav__cta--mobile,
.newio-nav__login--mobile,
.about-cta__btn,
.newio-pricing__cta,
.pricing-final-cta__btn,
.newio-cta-split--dark .newio-btn--primary,
.elementor-button,
.wp-block-button__link {
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    font-size: var(--btn-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    border-radius: var(--btn-radius) !important;
    line-height: var(--btn-line-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid transparent !important;
}

/* Outline/bordered button variants only change border-color */
.newio-btn--secondary {
    border-color: var(--ci-primary, #01362d) !important;
}

.newio-nav__login,
.newio-nav__login--mobile {
    border-color: var(--ci-primary, #01362d) !important;
}

.newio-pricing__cta--outline {
    border-color: var(--ci-primary, #01362d) !important;
}

/* Exclude functional UI buttons from unified sizing */
button.newio-faq__trigger,
button.newio-nav__toggle,
button.newio-nav__mobile-toggle,
.newio-pricing__toggle-btn,
.newio-pricing__promo-trigger {
    padding: revert !important;
    font-size: revert !important;
    font-weight: revert !important;
    border-radius: revert !important;
}

.newio-btn-primary {
    background-color: var(--newio-primary);
    color: var(--newio-white);
}

.newio-btn-primary:hover {
    background-color: var(--newio-primary-dark);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.newio-card {
    background: var(--newio-white);
    border-radius: var(--newio-radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: var(--newio-spacing-lg);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --newio-spacing-xl: 2rem;
    }
}

/* ==========================================================================
   Global Heading Color - CI Dark Green (#01362d)
   Applies to ALL headings including Elementor widgets
   ========================================================================== */

/* Elementor heading widgets */
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget h1,
.elementor-widget h2,
.elementor-widget h3,
.elementor-widget h4,
.elementor-widget h5,
.elementor-widget h6 {
    color: var(--ci-primary, #01362d) !important;
}

/* WordPress block editor headings */
.wp-block-heading,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--ci-primary, #01362d) !important;
}

/* Elementor container headings */
.e-con h1,
.e-con h2,
.e-con h3,
.e-con h4,
.e-con h5,
.e-con h6 {
    color: var(--ci-primary, #01362d) !important;
}

/* ==========================================================================
   Global Body Text Size - 18px (1.125rem)
   ========================================================================== */

p,
li,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-theme-post-content p,
.entry-content p,
.entry-content li,
.e-con p,
.e-con li {
    font-size: 1.125rem;
    line-height: 1.7;
}