﻿/*********** GLOBAL STYLES **********/
:root {
    --main-color-50: #8C2D71 !important; /* Primary plum-purple brand color */
    --main-color-35: #6B2157 !important; /* Darker plum for hover states */
    --main-color-75: #E8D5E2 !important; /* Light plum variant */
    --main-color-inverted: #8C2D71 !important;
    --main-color-text-light: #8C2D71 !important;
    --main-color-text-dark: #8C2D71 !important;
    --main-hover-color-50: #A8477F !important; /* Magenta accent */
    --main-hover-color-75: #E8D5E2 !important;
    --main-hover-color-inverted: #8C2D71;
    --main-hover-color-light: #D896A6 !important; /* Dusty pink/blush accent */
    --main-hover-color-dark: #6B2157 !important; /* Darker plum */
    --important-green-color-50: #00C438 !important;
    --important-green-color-75: #80ffa4 !important;
    --cta-pink-color: #8C2D71 !important; /* Primary plum for CTA buttons */
    --cta-pink-hover: #6B2157 !important; /* Darker plum on hover */
    --blush-accent-color: #D896A6 !important; /* Dusty pink/blush secondary */
    --cream-background: #FBF8F5 !important; /* Warm off-white/cream */
    --sage-background: #E8EDE6 !important; /* Pale sage/ivory section background */
    --text-grey-color: #444444 !important; /* Dark gray for readability */
    --text-grey-color-10: #2D2D2D !important; /* Very dark gray/black */
    --text-grey-color-15: #333333 !important; /* Dark gray */
    --text-grey-color-35: #666666 !important; /* Medium gray */
    --text-grey-color-90: #E8E8E8 !important; /* Very light gray */
    --text-grey-color-95: #F0F0F0 !important; /* Off-white */
    --text-grey-color-100: #FAFAFA !important; /* Almost white */
    --text-main-grey-color: #2D2D2D !important; /* Main text dark gray/black */
    --vital-parameter-main-color: #FF6600 !important;
    --error-red: #FF3918 !important;
    --button-red: #E31E24 !important;
    --scrollbar-track-color: #F5F5F5 !important;
    --scrollbar-thumb-color: #D0D0D0 !important;
    --scrollbar-thumb-hover-color: #999999 !important;
    --rectangle-background: #FFFFFF;
    --main-first-dashboard-notification: #E8D5E2;
    --main-second-dasboard-notification: #F3E8ED;
    --navigation-arrow-table: url(../images/../images/top-navigation-blue.png);
    --review-stars: url("/Themes/GrandNodeTheme/Content/images/stars.png");
    --main-font-title: 'lexend_deca_bold';
    --main-font-subtitle: 'lexend_deca_semibold';
    --main-font-bodytext: 'lexend_deca_regular';
}

@font-face {
    font-family: 'lexend_deca_bold';
    src: url('../font/lexenddeca/LexendDeca-Bold.ttf');
    src: url('../font/lexenddeca/LexendDeca-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'lexend_deca_semibold';
    src: url('../font/lexenddeca/LexendDeca-SemiBold.ttf');
    src: url('../font/lexenddeca/LexendDeca-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'lexend_deca_regular';
    src: url('../font/lexenddeca/LexendDeca-Regular.ttf');
    src: url('../font/lexenddeca/LexendDeca-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*********** TYPOGRAPHY STYLES **********/
body, 
h1, h2, h3, h4, h5, h6,
p, 
span, 
a,
button,
input,
textarea,
select {
    font-family: var(--main-font-bodytext) !important;
}

h1, h2, h3 {
    font-family: var(--main-font-title) !important;
    color: var(--main-color-50) !important;
    text-transform: uppercase;
    font-weight: bold;
}

h4, h5, h6 {
    font-family: var(--main-font-subtitle) !important;
    color: var(--main-color-50) !important;
}

/*********** BUTTON STYLES **********/
.btn-primary,
.button-primary,
[type="submit"],
button {
    background-color: var(--cta-pink-color) !important;
    color: white !important;
    border: none;
    text-transform: uppercase;
    font-weight: 600;
}

.btn-primary:hover,
.button-primary:hover,
[type="submit"]:hover,
button:hover {
    background-color: var(--cta-pink-hover) !important;
}

/*********** FOOTER STYLES **********/
footer,
.footer {
    background-color: var(--main-color-50) !important;
    color: white !important;
}

footer a,
.footer a {
    color: white !important;
}

/*********** SECTION DIVIDER STYLES **********/
.section-title,
.section-divider {
    text-align: center;
    position: relative;
}

.section-title::before,
.section-title::after,
.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--main-color-50);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--main-color-50);
    text-transform: uppercase;
    font-weight: bold;
}

/*********** HEADER COMPONENT STYLES **********/
.logo-and-button-header {
    display: flex;
    align-items: center;
}

.header .header-container .header-container-logo a img {
    max-height: 240px !important;
}




/*********** FAQ SECTION STYLES **********/
.faq-container .faq-section-answer,
.faq-container .faq-section-answer p,
.faq-container .faq-section-answer span {
    color: #2D2D2D !important; /* Black text for FAQ content */
}

/*********** TITLE CONTAINER STYLES **********/
.title-container,
.title-container a {
    color: #2D2D2D !important; /* Black text for specialty titles */
}
