/**
 * Guidee Critical CSS – Above-the-fold + Design System Typography
 * Version: 1.2.32 (2026-07-23 – Mobile/tablet offset −17px → 60px)
 * Last modified: 2026-07-23
 *
 * Desktop header ≈ 142px → offset 160px
 * Mobile/tablet offset 60px
 * Offset on body – independent of .e-flexbox-base
 */

/* 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) and (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 (Header offset)
   body padding – independent of flexbox
   ======================================== */
/* Mobile + Tablet */
body {
    padding-top: 60px;
}

/* Desktop */
@media (min-width: 1025px) {
    body {
        padding-top: 160px;
    }
}

/* ========================================
   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;
}

/* Subheadline / Dek / Standfirst
   Higher specificity to beat Elementor’s .e-paragraph-base { margin: 0 }
   Nested <strong>/<b> inherit the intended weight so editors cannot accidentally bold it */
.elementor .wce-subheadline,
.elementor p.wce-subheadline,
.wce-subheadline.e-paragraph-base {
    font-family: var(--font-body);
    font-size: var(--fs-subheadline);
    font-weight: var(--fw-body-regular);
    line-height: var(--lh-subheadline);
    letter-spacing: var(--tracking-subheadline);
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem;
    padding: 0.75rem 0 0;
}

.elementor .wce-subheadline strong,
.elementor .wce-subheadline b,
.elementor p.wce-subheadline strong,
.elementor p.wce-subheadline b,
.wce-subheadline.e-paragraph-base strong,
.wce-subheadline.e-paragraph-base b {
    font-weight: inherit;
}

/* Affiliate Note – full-width, text centered, soft lines above & below */
.wce-affiliate-note {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--fw-body-regular);
    line-height: 1.55;
    letter-spacing: 0.01em;
    text-transform: none;
    text-align: center;
    color: var(--color-text-muted);
    margin: 1.75rem 0;
    padding: 1.1rem 1.5rem;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 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); }
    .elementor .wce-subheadline,
    .elementor p.wce-subheadline,
    .wce-subheadline.e-paragraph-base { font-size: var(--fs-subheadline-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); }
    .elementor .wce-subheadline,
    .elementor p.wce-subheadline,
    .wce-subheadline.e-paragraph-base { font-size: var(--fs-subheadline-mobile); }
    .wce-body-large { font-size: var(--fs-body-large-mobile); }
}

/* ========================================
   ELEMENTOR FLEXBOX OVERRIDE
   (fully independent of header offset)
   ======================================== */
/* Desktop → remove default 10px padding */
@media (min-width: 1025px) {
    .elementor .e-flexbox-base {
        padding: 0 !important;
    }
}

/* Tablet + Mobile → set padding to 20px */
@media (max-width: 1024px) {
    .elementor .e-flexbox-base {
        padding: 20px !important;
    }
}