/**
 * Guidee Critical CSS – Above-the-fold + Design System Typography
 * Version: 1.2.14 (2026-05-17 – Updated .wce-pros-cons-sans to font-weight: 400)
 * Last modified: 2026-05-17
 */

/* GLOBAL SCROLL & OVERFLOW FIX */
html, body {
    overflow-x: hidden;
}

/* GLOBAL VISIBILITY SWITCH */
.desktop-header-visible,
.desktop-footer-visible { display: block; }
.mobile-header-visible,
.mobile-footer-visible { display: none; }

@media (max-width: 767px) {
    .desktop-header-visible,
    .desktop-footer-visible { display: none; }
    .mobile-header-visible,
    .mobile-footer-visible { display: flex; }
}

@media (min-width: 768px) && (max-width: 1024px) {
    .desktop-header-visible,
    .desktop-footer-visible { display: none; }
    .mobile-header-visible,
    .mobile-footer-visible { display: flex; }
}

@media (min-width: 1025px) {
    .desktop-header-visible,
    .desktop-footer-visible { display: block; }
    .mobile-header-visible,
    .mobile-footer-visible { display: none; }
}

/* HEADER */
.guidee-header-outer,
.desktop-header-visible,
.mobile-header-visible,
header.elementor-location-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 99999;
    background: var(--color-white);
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

body.admin-bar .guidee-header-outer,
body.admin-bar .desktop-header-visible,
body.admin-bar .mobile-header-visible,
body.admin-bar header.elementor-location-header {
    top: 32px;
}

/* CONTENT SPACING */
.site-main,
.elementor-location-main,
main,
.elementor-page .elementor-location-main,
.elementor-page .site-content {
    padding-top: 64px;
}

@media (min-width: 1025px) {
    .site-main,
    .elementor-location-main,
    main,
    .elementor-page .elementor-location-main,
    .elementor-page .site-content {
        padding-top: 125px;
    }
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1.wce-h1, .wce-h1 {
    font-family: var(--font-heading) !important;
    font-size: var(--fs-h1) !important;
    font-weight: var(--fw-heading) !important;
    line-height: var(--lh-heading) !important;
    letter-spacing: var(--tracking-heading) !important;
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    border: none !important;
}

h2.wce-h2, .wce-h2 {
    font-family: var(--font-heading) !important;
    font-size: var(--fs-h2) !important;
    font-weight: var(--fw-heading) !important;
    line-height: var(--lh-heading) !important;
    letter-spacing: var(--tracking-heading) !important;
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
}

h3.wce-h3, .wce-h3 {
    font-family: var(--font-heading) !important;
    font-size: var(--fs-h3) !important;
    font-weight: var(--fw-heading) !important;
    line-height: var(--lh-heading) !important;
    letter-spacing: var(--tracking-heading) !important;
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    border: none !important;
}

h4.wce-h4, .wce-h4 {
    font-family: var(--font-heading) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-heading) !important;
    line-height: var(--lh-heading) !important;
    letter-spacing: var(--tracking-heading) !important;
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    border: none !important;
}

/* Base Body – Sans-serif by default */
p.wce-body,
.wce-body,
.wce-body-large {
    font-family: var(--font-body);
    font-weight: var(--fw-body-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--tracking-body);
    color: var(--color-text-primary);
}

.wce-body-large {
    font-size: var(--fs-body-large);
}

/* Body Weights */
.wce-body.wce-body-medium   { font-weight: var(--fw-body-medium); }
.wce-body.wce-body-semibold { font-weight: var(--fw-body-accent); }
.wce-body.wce-body-bold     { font-weight: var(--fw-body-bold); }

/* === SERIF SUPPORT === */
.wce-body.wce-body-serif,
.wce-body-large.wce-body-large-serif {
    font-family: var(--font-body-serif) !important;
}

/* === Pros/Cons Sans-serif (Updated to 400 weight) === */
.wce-pros-cons-sans,
.wce-pros-list.wce-pros-cons-sans,
.wce-cons-list.wce-pros-cons-sans {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
}

/* === NEW TYPOGRAPHY CLASSES === */
.wce-body-small {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--fw-body-regular);
    line-height: 1.5;
    color: var(--color-text-primary);
}

.wce-body-bold {
    font-family: var(--font-body);
    font-weight: var(--fw-body-bold);
    line-height: var(--lh-body);
    letter-spacing: var(--tracking-body);
    color: var(--color-text-primary);
}

.wce-caption {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.wce-meta {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.wce-button-text {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
}

/* UI / Navigation */
.wce-ui,
button,
input,
select,
textarea,
.guidee-button,
.mega-menu-link,
.guidee-search-input {
    font-family: var(--font-ui);
}

/* Tracking utilities */
.wce-tracking-heading { letter-spacing: var(--tracking-heading); }
.wce-tracking-body { letter-spacing: var(--tracking-body); }
.wce-tracking-caps { letter-spacing: var(--tracking-caps); text-transform: uppercase; }

.wce-logo-text {
    font-family: var(--font-logo);
}

.wce-field,
.wce-field-content {
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

/* Responsive typography */
@media (max-width: 1024px) {
    h1.wce-h1, .wce-h1 { font-size: var(--fs-h1-tablet); }
    h2.wce-h2, .wce-h2 { font-size: var(--fs-h2-tablet); }
    h3.wce-h3, .wce-h3 { font-size: var(--fs-h3-tablet); }
    h4.wce-h4, .wce-h4 { font-size: var(--fs-h4-tablet); }
    .wce-body-large { font-size: var(--fs-body-large-tablet); }
}

@media (max-width: 767px) {
    h1.wce-h1, .wce-h1 { font-size: var(--fs-h1-mobile); }
    h2.wce-h2, .wce-h2 { font-size: var(--fs-h2-mobile); }
    h3.wce-h3, .wce-h3 { font-size: var(--fs-h3-mobile); }
    h4.wce-h4, .wce-h4 { font-size: var(--fs-h4-mobile); }
    .wce-body-large { font-size: var(--fs-body-large-mobile); }
}