/* =============================================================================
   01-typography.css
   Viseca – Roboto Webfont Implementation (Spec v3)
   -----------------------------------------------------------------------
   Font faces are declared in 00-global.css:
     Roboto, font-weight: 300  = Lauftext, H1, H2, Navigation
     Roboto, font-weight: 400  = Labels, Buttons
     Roboto, font-weight: 700  = H3, H4, Bold
   -----------------------------------------------------------------------
   Strategy:
     body / body *        – no !important  → Elementor per-element rules
                            (higher specificity) win naturally.
     H1–H6               – !important     → must override Elementor global kit.
     .typo-custom         – escape hatch to fully opt out of this file.
   Font Awesome icons are explicitly protected so our font-family rules
   never reach icon pseudo-elements or wrapper spans.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   BASE – body & generic copy
   ----------------------------------------------------------------------------- */

body,
body * {
    /* Font-family only – no font-size/weight here on body * because
       that would still be a direct rule and beat Elementor inheritance. */
    font-family: Roboto, sans-serif;
}

body {
    /* Font-size/weight ON body → cascades via inheritance.
       Elementor sets its per-element overrides on the wrapper DIV, so the
       DIV is the nearest ancestor of the <p> and wins the inherited race.
       Any <p> without an Elementor parent override falls back to these. */
    font-size: 16px;
    font-weight: 300;
    line-height: 1.375;
}

/* Lauftext / paragraph
   Roboto 300 / 1.375 — must be a direct rule here (not just inherited from body)
   because Elementor widget wrapper divs sit between body and the p/li in the DOM,
   breaking pure inheritance whenever they carry no explicit font-weight rule. */
p,
li,
td,
th,
blockquote,
figcaption {
    font-family: Roboto, sans-serif;
    font-weight: 300;
    line-height: 1.375;
}

/* Inline bold / strong → stay Roboto but switch to weight 700 */
strong,
b {
    font-family: Roboto, sans-serif;
    font-weight: 700;
}


/* -----------------------------------------------------------------------------
   FONT AWESOME – protect icon fonts from being overridden
   Covers FA 4, FA 5 (Free + Pro + Brands) and FA 6.
   Both the wrapper element and the ::before / ::after pseudo-elements
   must keep their original font-family, so we explicitly restore it.
   ----------------------------------------------------------------------------- */

.fa,
.fab,
.fad,
.fal,
.fao,
.far,
.fas,
.fat,
.fass,
.fasr,
.fasl,
.fadk,
[class^="fa-"],
[class*=" fa-"],
.elementor-icon i,
.elementor-icon svg {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands",
                 "Font Awesome 5 Pro",  "Font Awesome 6 Free",
                 "Font Awesome 6 Brands", "Font Awesome 6 Pro",
                 "FontAwesome" !important;
    font-weight: 900; /* FA solid default; individual icon classes override this */
    speak: never;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

/* Pseudo-elements that render the actual glyph */
.fa::before,    .fa::after,
.fab::before,   .fab::after,
.fad::before,   .fad::after,
.fal::before,   .fal::after,
.far::before,   .far::after,
.fas::before,   .fas::after,
.fat::before,   .fat::after,
.fass::before,  .fass::after,
.fasr::before,  .fasr::after,
[class^="fa-"]::before,
[class*=" fa-"]::before,
[class^="fa-"]::after,
[class*=" fa-"]::after {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands",
                 "Font Awesome 5 Pro",  "Font Awesome 6 Free",
                 "Font Awesome 6 Brands", "Font Awesome 6 Pro",
                 "FontAwesome" !important;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Elementor Icon widget also wraps the <i> in a link – reset that link too */
.elementor-widget-icon .elementor-icon {
    font-family: inherit;
}


/* -----------------------------------------------------------------------------
   INLINE STYLE ESCAPE HATCH
   Add class  .typo-custom  to any Elementor widget (Advanced → CSS Classes).
   Every !important typographic override in this file is neutralised for that
   element and all its descendants, so custom inline styles can take effect.
   ----------------------------------------------------------------------------- */

/* Unset font-family so inline style="font-family:..." wins again */
.typo-custom,
.typo-custom *,
.typo-custom p,
.typo-custom li,
.typo-custom td,
.typo-custom th,
.typo-custom h1,
.typo-custom h2,
.typo-custom h3,
.typo-custom h4,
.typo-custom h5,
.typo-custom h6,
.typo-custom strong,
.typo-custom b,
.typo-custom label {
    font-family: unset !important;
    font-size: unset !important;
    font-weight: unset !important;
    line-height: unset !important;
    letter-spacing: unset !important;
}


/* -----------------------------------------------------------------------------
   HEADINGS – H1 & H2  (Roboto weight 300)
   ----------------------------------------------------------------------------- */

h1,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-"] ~ h1,
.elementor-heading-title.elementor-size-xl,
.elementor-heading-title.elementor-size-xxl {
    font-family: Roboto, sans-serif !important;
    font-weight: 300 !important;
    line-height: 1.25 !important;
    /* font-size desktop → see responsive block below */
}

h2,
.elementor-heading-title.elementor-size-large {
    font-family: Roboto, sans-serif !important;
    font-weight: 300 !important;
    line-height: 1.25 !important;
}

/* H3 & H4 – Bold */
h3,
.elementor-heading-title.elementor-size-medium {
    font-family: Roboto, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.375 !important;
    margin-block-start: 2.5em !important;
    margin-block-end: 0.5em !important;
}

h4,
.elementor-heading-title.elementor-size-small {
    font-family: Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.375 !important;
    margin-block-start: 2em !important;
    margin-block-end: 0.4em !important;
}

/* H5 & H6 – keep same style as H4 unless spec says otherwise */
h5,
h6 {
    font-family: Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.375 !important;
    margin-block-start: 1.75em !important;
    margin-block-end: 0.35em !important;
}


/* -----------------------------------------------------------------------------
   DESKTOP sizes  (≥ 1025px)
   ----------------------------------------------------------------------------- */

@media screen and (min-width: 1025px) {

    h1,
    .elementor-heading-title.elementor-size-xl,
    .elementor-heading-title.elementor-size-xxl {
        font-size: 40px !important;
    }

    h2,
    .elementor-heading-title.elementor-size-large {
        font-size: 32px !important;
    }
}


/* -----------------------------------------------------------------------------
   TABLET sizes  (769px – 1024px)
   ----------------------------------------------------------------------------- */

@media screen and (min-width: 769px) and (max-width: 1024px) {

    h1,
    .elementor-heading-title.elementor-size-xl,
    .elementor-heading-title.elementor-size-xxl {
        font-size: 36px !important;
    }

    h2,
    .elementor-heading-title.elementor-size-large {
        font-size: 30px !important;
    }
}


/* -----------------------------------------------------------------------------
   MOBILE sizes  (≤ 768px)
   ----------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {

    h1,
    .elementor-heading-title.elementor-size-xl,
    .elementor-heading-title.elementor-size-xxl {
        font-size: 32px !important;
    }

    h2,
    .elementor-heading-title.elementor-size-large {
        font-size: 26px !important;
    }
}


/* -----------------------------------------------------------------------------
   LEADTEXT  – 20 px / 300 / 1.375
   Usage: add class  .leadtext  to an Elementor text widget
   ----------------------------------------------------------------------------- */

.leadtext,
.leadtext *,
.elementor-widget-text-editor.leadtext *,
p.leadtext {
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.375;
}


/* -----------------------------------------------------------------------------
   TEXT KLEIN  – 14 px / 300 / 1.375
   Usage: add class  .text-klein  or  .text-small  to the widget
   ----------------------------------------------------------------------------- */

.text-klein,
.text-klein *,
.text-small,
.text-small *,
small,
.elementor-widget-text-editor.text-klein * {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.375;
}


/* -----------------------------------------------------------------------------
   FORM LABELS  – 18 px / 400 / 1.375
   ----------------------------------------------------------------------------- */

label,
.gfield label,
.gfield > label,
.gform_wrapper label,
.elementor-field-label,
.elementor-form .elementor-field-group label {
    font-family: Roboto, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.375 !important;
}


/* -----------------------------------------------------------------------------
   NAVIGATION  – Roboto weight 300, let Elementor control sizes
   ----------------------------------------------------------------------------- */

nav,
.elementor-nav-menu,
.elementor-nav-menu a,
.elementor-nav-menu .menu-item a,
.main-navigation,
.main-navigation a {
    font-family: Roboto, sans-serif !important;
    font-weight: 300 !important;
}


/* -----------------------------------------------------------------------------
   BUTTONS  – Roboto 400 (Regular)
   ----------------------------------------------------------------------------- */

.elementor-button,
.elementor-button-wrapper a,
button,
[type="submit"],
[type="button"],
.wp-block-button__link {
    font-family: Roboto, sans-serif !important;
    font-weight: 300 !important;
}


/* -----------------------------------------------------------------------------
   CONTENT LINKS  – brand blue (#739EC6)
   Applies to all links inside Elementor content, excluding header, footer,
   nav, WPML language switcher, and "back to top" icon links.
   Uses :not() with ancestor selectors (supported in modern browsers via
   the relative selector list) to leave nav/footer/wpml links untouched.
   ----------------------------------------------------------------------------- */

.elementor a:not(
    header a,
    footer a,
    nav a,
    [data-elementor-type="header"] a,
    [data-elementor-type="footer"] a,
    .wpml-ls-link,
    .elementor-icon,
    [name]
) {
    color: #739EC6;
    transition: color .2s ease;
}

.elementor a:not(
    header a,
    footer a,
    nav a,
    [data-elementor-type="header"] a,
    [data-elementor-type="footer"] a,
    .wpml-ls-link,
    .elementor-icon,
    [name]
):hover {
    color: #4780B6;
}

/* Hard reset: ensure header/footer/nav/wpml links always inherit their
   own colour and are never pulled into the rule above. */
header a,
footer a,
nav a,
[data-elementor-type="header"] a,
[data-elementor-type="footer"] a,
a.wpml-ls-link,
.wpml-ls a,
a.elementor-icon {
    color: inherit;
}