/**
 * Support Center Global Theme
 * Use loadStyle(LWC) to apply across supportCenter components.
 */
:root {
    --font-family-base: "Helvetica", "Arial", sans-serif;
    /* Brand palette */
    --brand-banner-blue: #0088D9; /* Top banner marketing blue */
    --brand-button-blue: #007BC1; /* Primary buttons */
    --brand-outline-blue: #24A3EC; /* Outlines / hover */
    --brand-bg-blue: #F5FBFF; /* Light blue backgrounds */
    --brand-bg-grey: #FAFAFA; /* Light grey page backgrounds (all except home) */

    /* Neutrals */
    --color-neutral-100: #FFFFFF;
    --color-neutral-200: #000000;

    /* Grey Scale */
    --color-grey-100: #F8F9FA;
    --color-grey-200: #F1F3F5;
    --color-grey-300: #DEE2E6;
    --color-grey-400: #CED4DA;
    --color-grey-500: #ADB5BD;
    --color-grey-600: #6C757D;
    --color-grey-700: #495057;
    --color-grey-800: #212529;

    /* Blue Scale */
    --color-blue-100: #F0F8FF;
    --color-blue-200: #E1F5FE;
    --color-blue-300: #B3E5FC;
    --color-blue-400: #81D4FA;
    --color-blue-500: #4FC3F7;
    --color-blue-600: #29B6F6;
    --color-blue-700: #0288D1;
    --color-blue-800: #01579B;

    /* Black Scale */
    --color-black-100: #000000;

    /* Bg Color */
    --bg-grey: #f9f9fa;

    /* Typography */
    --fw-regular: 400;
    --fw-bold: 700;
    --fw-bold-medium: 400;

    --fs-10: 10px; --fs-12: 12px; --fs-13: 13px;
    --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; 
    --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; 
    --fs-40: 40px; --fs-44: 44px; --fs-56: 56px; 
    --fs-68: 68px; --fs-80: 80px;

    --lh-15: 15px; --lh-18: 18px; --lh-20: 20px;
    --lh-22: 22px; --lh-24: 24px; --lh-25: 25px; 
    --lh-30: 30px; --lh-35: 35px; --lh-40: 40px;

    /* Layout */
    --page-max-width: 1200px;
    --page-max-width-tablet: 980px;
    --min-width-category-mobile: 200px; /* added min width for carousel*/
    --space-0: 2px;
    --space-1: 4px; /* added space 1 for 4 px space*/
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-18px: 18px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-9: 38px;
    --space-10: 40px;
    --space-12: 48px;
    --space-15: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --radius-sm: 6px;
    --radius-lg: 12px;
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.06);
}

body {
    font-family: var(--font-family-base);
}

/* Typography utilities */
.text-xs { font-size: var(--fs-12); line-height: var(--lh-15); font-weight: var(--fw-regular); }
.text-sm { font-size: var(--fs-14); line-height: var(--lh-18); font-weight: var(--fw-regular); color: var(--color-black-100);}
.text-base { font-size: var(--fs-16); line-height: var(--lh-20); font-weight: var(--fw-regular); color: var(--color-black-100); } /* added font color black */
.text-lg { font-size: var(--fs-20); line-height: var(--lh-24); font-weight: var(--fw-bold); } /* line hight variable change 25 to 24*/
.display-sm { font-size: var(--fs-32); line-height: var(--lh-25); font-weight: var(--fw-regular); }
.display-extmd { font-size: var(--fs-44); line-height: var(--lh-30); font-weight: var(--fw-bold); }
.display-md { font-size: var(--fs-56); line-height: var(--lh-30); font-weight: var(--fw-bold); }
.display-lg { font-size: var(--fs-80); line-height: var(--lh-40); font-weight: var(--fw-regular); }
.text-main { color: var(--color-black-100); font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-24);} /* change color grey to black*/
.text-subtle { color: var(--color-grey-600); }

/* Surface utilities */
.bg-primary { background-color: var(--color-blue-700); color: var(--color-neutral-100); }
.bg-surface { background-color: var(--color-grey-100); }
.bg-banner { background-color: var(--brand-banner-blue); color: var(--color-neutral-100); }
.bg-page-grey { background-color: var(--brand-bg-grey); }
.bg-page-blue { background-color: var(--brand-bg-blue); }

/* Containers */
.page-shell {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}
.section {
    padding: var(--space-10) 0;
}
.card {
    background: var(--color-neutral-100);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: var(--space-8);
}
/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--fw-bold);
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
/* body.page-contact-us {
    background-color: var(--color-grey-100);
} */
/* body.page-contact-us .section {
    padding-bottom: 0;
}

body.page-contact-us .page-shell {
    padding-bottom: 0;
} */
/* 
body.page-contact-us community-byo-scoped-header-and-footer,
body.page-contact-us community_layout_section,
body.page-contact-us community_layout_section .columns-content {
    background-color: var(--color-grey-100);
} */
/* 
body.page-contact-us
community_layout_section,
body.page-contact-us
community_layout_section .columns-content {
    background-color: var(--brand-bg-grey);
} */

.submit-btn {
    margin-top: var(--space-3);
    width: 100%;
    padding: var(--space-2);
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
    background: var(--color-neutral-100);
    border:var(--space-0) solid #000;
    border-radius: var(--space-2);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}
.btn-primary {
    background: var(--brand-button-blue);
    color: var(--color-neutral-100);
    border-color: var(--brand-button-blue);
}
.btn-primary:hover {
    background: var(--brand-outline-blue);
    border-color: var(--brand-outline-blue);
    box-shadow: var(--shadow-soft);
}
.btn-outline {
    background: transparent;
    color: var(--brand-button-blue);
    border-color: var(--brand-outline-blue);
}
.btn-outline:hover {
    background: var(--color-blue-100);
}
.btn-ghost {
    background: transparent;
    color: var(--brand-button-blue);
    border-color: transparent;
}
.btn:focus-visible {
    outline: 2px solid var(--brand-outline-blue);
    outline-offset: 2px;
}

/* Grids */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

/* Media queries — align with 980px breakpoint */
/* @media only screen and (max-width: 980px) { */
@media (min-width: 547px) and (max-width: 980px) {
    .page-shell {
        max-width: var(--page-max-width-tablet);
        padding: 0 var(--space-8);
    }
    .grid-2{
        grid-template-columns: 1fr;
    }
    .section {
        padding: var(--space-6);
    }
}


/* Cards / tiles */
.tile {
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    background: var(--color-neutral-100);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.tile:hover {
    transform: translateY(-2px);
    border-color: var(--brand-outline-blue);
    box-shadow: var(--shadow-soft);
}

/* added borders for the grid 3 tiles */
.grid-3-tile {
    border: 1px solid var(--color-black-100);
    border-right: 3px solid var(--color-black-100);
    border-bottom: 3px solid var(--color-black-100);
}

/* Badges / pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--color-blue-100);
    color: var(--color-grey-800);
    border: 1px solid var(--brand-outline-blue);
}

/* Utilities */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.text-center { text-align: center; }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-soft { box-shadow: var(--shadow-soft); }

/* Form inputs */
.input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-grey-300);
    border-radius: var(--radius-sm);
    font-size: var(--fs-16);
    line-height: var(--lh-22);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus {
    border-color: var(--brand-outline-blue);
    box-shadow: 0 0 0 3px rgba(36, 163, 236, 0.18);
    outline: none;
}
.input::placeholder {
    color: var(--color-grey-500);
}

/* Global Typography Styles for tags*/
/* Desktop screen */
h1 { font-size: var(--fs-40); font-weight: var(--fw-bold);}
h2 { font-size: var(--fs-24); font-weight: var(--fw-bold);} 
h3 { font-size: var(--fs-20); font-weight: var(--fw-bold);}
h4{ font-size: var(--fs-16);} 

/* Tablet screen */
@media (min-width: 547px) and (max-width: 980px) {
    h1 { font-size: var(--fs-32); font-weight: var(--fw-bold);}
    h2 { font-size: var(--fs-20); font-weight: var(--fw-bold);} 
    h3 { font-size: var(--fs-16);}
    h4{ font-size: var(--fs-16);} 
}
/* Mobile screen */
@media (max-width: 546px) {
    h1 { font-size: var(--fs-24); font-weight: var(--fw-bold);}
    h2 { font-size: var(--fs-20); font-weight: var(--fw-bold);}
    h3 { font-size: var(--fs-16);}
    h4{ font-size: var(--fs-16);}
}