/**
 * Garage Door Masters — global typography
 *
 * This is the single frontend source for font families and shared title tiers.
 * Change the custom properties below instead of editing individual pages.
 */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/wp-content/uploads/elementor/google-fonts/fonts/plusjakartasans-ldioaomqnqcsa88c7o9yz4kmcoog4ko20yw.woff2") format("woff2");
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/wp-content/uploads/elementor/google-fonts/fonts/dmsans-rp2yp2ywxg089urii5-g4vlh9vod8cmcqbu0-k4.woff2") format("woff2");
}

:root {
    --gdm-font-heading: "Plus Jakarta Sans", Arial, sans-serif;
    --gdm-font-body: "DM Sans", Arial, sans-serif;

    /* Shared Elementor section-title tier (desktop only). */
    --gdm-title-section-desktop: 40px;

    /* Consistent breathing room for every multiline heading on phones. */
    --gdm-heading-line-height-mobile: 1.2;

    /* Only for exceptionally long page titles that still exceed three lines. */
    --gdm-title-long-mobile: 30px;
}

html body,
html body input,
html body textarea,
html body select {
    font-family: var(--gdm-font-body);
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .elementor-heading-title {
    font-family: var(--gdm-font-heading) !important;
}

@media (max-width: 767px) {
    html body h1,
    html body h2,
    html body h3,
    html body h4,
    html body h5,
    html body h6,
    html body .elementor-heading-title {
        line-height: var(--gdm-heading-line-height-mobile) !important;
    }

    html body .elementor-widget-heading.gdm-mobile-title-compact .elementor-heading-title {
        font-size: var(--gdm-title-long-mobile) !important;
    }
}

/*
 * Let page-level headings use the full width already available inside their
 * parent container on phones and tablets. This replaces narrow per-widget
 * pixel widths without changing section margins or desktop layouts.
 */
@media (max-width: 1024px) {
    html body .elementor-widget.gdm-responsive-title-wide {
        --container-widget-width: 100% !important;
        --container-widget-flex-grow: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
    }

    html body .elementor-widget.gdm-responsive-title-wide > .elementor-widget-container,
    html body .elementor-widget.gdm-responsive-title-wide .section-title-wrapper,
    html body .elementor-widget.gdm-responsive-title-wide .title-wrap,
    html body .elementor-widget.gdm-responsive-title-wide .elementor-heading-title,
    html body .elementor-widget.gdm-responsive-title-wide .section-title {
        width: 100% !important;
        max-width: none !important;
    }
}

/*
 * Widgets formerly carrying a repeated 44px page-level value receive this
 * class. Tablet and mobile sizes remain controlled by their existing
 * responsive Elementor settings.
 */
@media (min-width: 1025px) {
    html body .elementor-widget-heading.gdm-title-section .elementor-heading-title {
        font-size: var(--gdm-title-section-desktop) !important;
    }
}