/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://elementor.com/hello-theme/
 Description:  Hello Elementor Child Theme for Team Glam
 Author:       Team Glam
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* ================================================================
   GLOBAL TYPOGRAPHY SYSTEM
   ================================================================ */
:root {
    /* Font Families */
    --tg-font-heading: 'beaufort-pro', Garamond, 'Times New Roman', serif;
    --tg-font-body: 'brandon-grotesque', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tg-font-link: 'brandon-grotesque', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tg-font-nav: 'brandon-grotesque', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tg-font-button: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Base / Desktop Typography Scale */
    --tg-h1-size-desktop: 108.16px;
    --tg-h1-size-rem: 6.76rem;
    --tg-h1-line-height: 0.88;
    --tg-h1-letter-spacing: -0.01em; /* -1.08px / -1% */
    --tg-h1-font-weight: 400;

    --tg-h2-size-desktop: 52.86px;
    --tg-h2-size-rem: 3.3rem;
    --tg-h2-line-height: 1.01;
    --tg-h2-letter-spacing: -0.01em; /* -0.53px / -1% */
    --tg-h2-font-weight: 400;

    --tg-h3-size-desktop: 34.43px;
    --tg-h3-size-rem: 2.15rem;
    --tg-h3-line-height: 1.06;
    --tg-h3-letter-spacing: -0.01em; /* -0.34px / -1% */
    --tg-h3-font-weight: 400;

    --tg-h4-size-desktop: 19.69px;
    --tg-h4-size-rem: 1.23rem;
    --tg-h4-line-height: 1.09;
    --tg-h4-letter-spacing: -0.01em; /* -0.2px / -1% */
    --tg-h4-font-weight: 400;

    --tg-p-size: 18px;
    --tg-p-size-rem: 1.125rem;
    --tg-p-line-height: 1.3; /* 130% / 20.8px */
    --tg-p-letter-spacing: -0.023em; /* -0.37px / -2.3% */
    --tg-p-font-weight: 400;

    --tg-a-size: 16px;
    --tg-a-size-rem: 1rem;
    --tg-a-line-height: normal;
    --tg-a-letter-spacing: -0.03em; /* -0.31px / -3% */
    --tg-a-font-weight: 400;

    --tg-btn-size: 16px;
    --tg-btn-size-rem: 1rem;
    --tg-btn-line-height: normal;
    --tg-btn-letter-spacing: normal;
    --tg-btn-font-weight: 400;

    /* Fluid Responsive Heading Scales (Mobile -> Desktop max) */
    --tg-heading-1-size: clamp(2.5rem, 6.5vw, var(--tg-h1-size-rem));
    --tg-heading-2-size: clamp(1.85rem, 4vw, var(--tg-h2-size-rem));
    --tg-heading-3-size: clamp(1.35rem, 2.8vw, var(--tg-h3-size-rem));
    --tg-heading-4-size: clamp(1.1rem, 1.8vw, var(--tg-h4-size-rem));

    /* Backwards-compatibility aliases for existing widgets */
    --heading-1-size: var(--tg-h1-size-rem);
    --heading-2-size: var(--tg-h2-size-rem);
    --heading-3-size: var(--tg-h3-size-rem);
    --heading-4-size: var(--tg-h4-size-rem);
    --tg-body-font-size: var(--tg-p-size);
}

/* ================================================================
   GLOBAL HTML & BODY STYLING
   ================================================================ */
html, body {
    font-family: var(--tg-font-body);
    font-size: var(--tg-p-size);
    font-weight: var(--tg-p-font-weight);
    line-height: var(--tg-p-line-height);
    letter-spacing: var(--tg-p-letter-spacing);
    color: #000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================================================
   GLOBAL HEADINGS (Standard & Elementor Widgets)
   ================================================================ */
h1,
.elementor-heading-title:is(h1),
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading.elementor-size-default h1.elementor-heading-title {
    font-family: var(--tg-font-heading);
    font-size: var(--tg-heading-1-size);
    font-weight: var(--tg-h1-font-weight);
    line-height: var(--tg-h1-line-height);
    letter-spacing: var(--tg-h1-letter-spacing);
}

h2,
.elementor-heading-title:is(h2),
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading.elementor-size-default h2.elementor-heading-title {
    font-family: var(--tg-font-heading);
    font-size: var(--tg-heading-2-size);
    font-weight: var(--tg-h2-font-weight);
    line-height: var(--tg-h2-line-height);
    letter-spacing: var(--tg-h2-letter-spacing);
    color: #000000;
}

h3,
.elementor-heading-title:is(h3),
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading.elementor-size-default h3.elementor-heading-title {
    font-family: var(--tg-font-heading);
    font-size: var(--tg-heading-3-size);
    font-weight: var(--tg-h3-font-weight);
    line-height: var(--tg-h3-line-height);
    letter-spacing: var(--tg-h3-letter-spacing);
    color: #000000;
}

h4,
.elementor-heading-title:is(h4),
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading.elementor-size-default h4.elementor-heading-title {
    font-family: var(--tg-font-heading);
    font-size: var(--tg-heading-4-size);
    font-weight: var(--tg-h4-font-weight);
    line-height: var(--tg-h4-line-height);
    letter-spacing: var(--tg-h4-letter-spacing);
    color: #000000;
}

/* ================================================================
   GLOBAL PARAGRAPHS & BODY TEXT
   ================================================================ */
p,
.elementor-widget-text-editor p,
.elementor-text-editor p,
.elementor-widget-theme-post-content p {
    font-family: var(--tg-font-body);
    font-size: var(--tg-p-size);
    font-weight: var(--tg-p-font-weight);
    line-height: var(--tg-p-line-height);
    letter-spacing: var(--tg-p-letter-spacing);
    color: #000000;
}

/* ================================================================
   GLOBAL LINKS
   ================================================================ */
a,
.elementor-widget-text-editor a,
.elementor-text-editor a {
    font-family: var(--tg-font-link);
    font-size: var(--tg-a-size);
    font-weight: var(--tg-a-font-weight);
    letter-spacing: var(--tg-a-letter-spacing);
}

/* Heading anchor links must always inherit heading typography and font size */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.elementor-kit-6 h1 a,
.elementor-kit-6 h2 a,
.elementor-kit-6 h3 a,
.elementor-kit-6 h4 a,
.tg-journal-feed-title a,
.tg-journal-title a,
.tg-journal-heading a {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    font-style: inherit !important;
    color: inherit !important;
}

/* ================================================================
   GLOBAL BUTTONS
   ================================================================ */
button,
.elementor-button,
input[type="button"],
input[type="submit"],
.elementor-widget-button a.elementor-button,
.tg-btn {
    font-family: var(--tg-font-button);
    font-size: var(--tg-btn-size);
    font-weight: var(--tg-btn-font-weight);
    line-height: var(--tg-btn-line-height);
    letter-spacing: var(--tg-btn-letter-spacing);
}

/* ================================================================
   GLOBAL VIEWPORT & MOBILE OVERFLOW RESET
   ================================================================ */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

*, *:before, *:after {
    box-sizing: inherit;
}

@media (max-width: 767px) {
    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Force Elementor columns & containers to collapse to 100% width on mobile */
    .elementor-section,
    .elementor-section-wrap,
    .elementor-container,
    .elementor-column,
    .elementor-widget-wrap,
    .elementor-widget {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .elementor-section .elementor-container {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Ensure custom widgets fit within mobile screen bounds without horizontal overflow */
    .tg-eh-wrap,
    .tg-sac-wrap,
    .tg-testi-wrap,
    .tg-cta-wrap,
    .tg-footer-wrap,
    .tg-dv-wrap,
    .tg-vg-wrap,
    .tg-mg-wrap,
    .tg-ssc-wrap,
    .tg-dcb-wrap,
    .tg-ec-wrap,
    .tg-cs-wrap,
    .tg-csf-wrap,
    .tg-esh-wrap,
    .tg-faq-wrap,
    .tg-cf-wrap,
    .tg-ecw-wrap,
    .tg-single-post-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Accordion title text wrapping safeguards */
    .tg-sac-header,
    .tg-acc-trigger {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
    }

    .tg-sac-title,
    .tg-acc-item-title {
        font-size: var(--tg-accordion-title-size-mobile, 20px) !important;
        line-height: 1.35 !important;
        flex: 1 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
}