/* ============================================
   PRACBILL BRAND LAYER FOR ELEMENTOR PAGES

   ~18 pages on this site are built in Elementor and their content
   lives in the database, not in this repo. This file pulls those
   pages onto the design system without editing page content, by
   redefining the global custom properties Elementor emits from its
   kit. Any widget bound to a "Global" colour or font follows along.

   Widgets with a hand-picked colour typed into the Elementor panel
   are NOT reachable from here — those need the kit/page records
   updated in the database.
   ============================================ */

:root {
    /* Elementor global colour slots */
    --e-global-color-primary: var(--pb-blue-600);
    --e-global-color-secondary: var(--pb-grey-600);
    --e-global-color-text: var(--pb-grey-600);
    --e-global-color-accent: var(--pb-blue-600); /* Elementor's default button/interactive colour */

    /* Elementor global typography slots */
    --e-global-typography-primary-font-family: "Space Grotesk";
    --e-global-typography-primary-font-weight: 700;
    --e-global-typography-secondary-font-family: "Space Grotesk";
    --e-global-typography-secondary-font-weight: 600;
    --e-global-typography-text-font-family: "Inter";
    --e-global-typography-text-font-weight: 400;
    --e-global-typography-accent-font-family: "Inter";
    --e-global-typography-accent-font-weight: 600;
}

/* Base type on Elementor-built pages */
.elementor-page .elementor-widget-text-editor,
.elementor-page .elementor-widget-theme-post-content {
    font-family: var(--font-sans);
    color: var(--pb-grey-600);
    line-height: var(--lh-body);
}

.elementor-page .elementor-heading-title {
    font-family: var(--font-display);
    color: var(--pb-grey-900);
    letter-spacing: var(--ls-tight);
}

/* Buttons — 8px radius, flat, colour-only transition.
   Elementor ships its own button rules at high specificity, so these
   selectors are deliberately as specific as the ones they replace. */
.elementor-page .elementor-button,
.elementor-page .elementor-button-link {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-md);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

/* Primary actions are blue. Elementor's "success" (green) and "info" variants
   are re-pointed here because in this system green means paid, not "click me".
   The page data no longer sets button_type: success, but this keeps any button
   re-added through the editor on-brand. */
.elementor-page .elementor-button,
.elementor-page .elementor-button.elementor-button-success,
.elementor-page .elementor-button.elementor-button-info {
    background-color: var(--color-primary);
    color: #fff;
}

.elementor-page .elementor-button:hover,
.elementor-page .elementor-button.elementor-button-success:hover,
.elementor-page .elementor-button.elementor-button-info:hover {
    background-color: var(--color-primary-hover);
    color: #fff;
}

/* Warning and danger keep their meaning, mapped to the billing state palette */
.elementor-page .elementor-button.elementor-button-warning {
    background-color: var(--pb-pending);
    color: #fff;
}

.elementor-page .elementor-button.elementor-button-danger {
    background-color: var(--pb-overdue);
    color: #fff;
}

/* Links */
.elementor-page .elementor-widget-text-editor a {
    color: var(--color-link);
}

.elementor-page .elementor-widget-text-editor a:hover {
    color: var(--color-link-hover);
}

/* Form controls follow the same input rules as the rest of the site */
.elementor-page .elementor-field-group .elementor-field,
.elementor-page .wpforms-field input[type="text"],
.elementor-page .wpforms-field input[type="email"],
.elementor-page .wpforms-field input[type="tel"],
.elementor-page .wpforms-field textarea,
.elementor-page .wpforms-field select {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--pb-grey-900);
    border: 1px solid var(--pb-grey-300);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.elementor-page .elementor-field-group .elementor-field:hover,
.elementor-page .wpforms-field input:hover,
.elementor-page .wpforms-field textarea:hover,
.elementor-page .wpforms-field select:hover {
    border-color: var(--pb-grey-400);
}

.elementor-page .elementor-field-group .elementor-field:focus,
.elementor-page .wpforms-field input:focus,
.elementor-page .wpforms-field textarea:focus,
.elementor-page .wpforms-field select:focus {
    outline: none;
    border-color: var(--pb-blue-600);
    box-shadow: 0 0 0 3px var(--pb-blue-100);
}

.elementor-page .wpforms-submit {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    transition: background-color var(--transition), border-color var(--transition);
}

.elementor-page .wpforms-submit:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Dividers and icon boxes pick up the brand greys */
.elementor-page .elementor-divider-separator {
    border-color: var(--pb-grey-200);
}

.elementor-page .elementor-icon {
    color: var(--color-primary);
}