/* 1. Визначення Кольорової Палітри через CSS Змінні */
:root {
    --color-cta-yellow: #FFC107; /* Vivid Yellow (Primary CTA) */
    --color-charcoal: #333333;     /* Primary Text, H1 Colour */
    --color-dark-grey: #4D4D4D;   /* H2 Colour, Medium Grey (Supporting Text) */
    --color-cornsilk: #FEFAEO;    /* Main Background */
    --color-beige: #E9EDC9;       /* Section Background (Breaks) */
    --color-dry-sage: #CCD5AE;    /* Highlight/Accent, Hover State */
    --color-papaya-whip: #FAEDCD; /* Light Accent Background */
    --color-light-bronze: #D4A373;/* UI Elements (Icons, Borders) */
    --color-light-grey-footer: #E0E0E0; /* Footer Background */
    --color-about-bg: #F5F5F5; /* Light Grey з SRS 2.4.6 */

}

html {
    scroll-behavior: smooth;
}
/* 2. Кастомні Класи для застосування кольорів */
.bg-custom-cornsilk {
    background-color: var(--color-cornsilk) !important;
}
.bg-custom-beige {
    background-color: var(--color-beige) !important;
}
.bg-custom-sage {
    background-color: var(--color-dry-sage) !important;
}
.bg-custom-cta {
    background-color: var(--color-cta-yellow) !important;
}
.text-custom-charcoal {
    color: var(--color-charcoal) !important;
}
.text-custom-dark-grey {
    color: var(--color-dark-grey) !important;
}
.text-custom-bronze {
    color: var(--color-light-bronze) !important;
}

/* Стилі для кнопок CTA (Primary Buttons - Vivid Yellow CTA) */
.btn-custom-cta {
    background-color: var(--color-cta-yellow);
    color: var(--color-charcoal);
    font-weight: bold;
    border: none;
    transition: all 0.3s ease; /* Добавим плавности */
}

.btn-custom-cta:hover {
    /* Меняем фон на угольный */
    background-color: var(--color-charcoal) !important;

    /* Текст должен стать контрастным (желтым или белым) */
    color: var(--color-cta-yellow) !important;

    /* Можно добавить небольшую тень для эффекта */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Стилі для Вторинних Кнопок (Secondary Buttons - Light Bronze / Dry Sage) */
.btn-secondary-custom {
    color: var(--color-charcoal);
    border-color: var(--color-charcoal);
    font-weight: 500; /* Weight: Medium */
}
.btn-secondary-custom:hover {
    background-color: rgba(51, 51, 51, 0.08); /* Легке затемнення білого/прозорого фону */
    border-color: var(--color-charcoal);
}


/* 3. Стилі для Тексту та Заголовків (відповідно до 2.3.2.4, 2.3.2.5) */
h1 {
    /* H1 (Main Page Headlines) */
    font-size: 34px; /* В межах 32px-36px */
    font-weight: 600; /* Semi-Bold або Bold */
    color: var(--color-charcoal);
    text-align: center;
}
h2 {
    /* H2 (Section Sub-headings) */
    font-size: 26px; /* В межах 24px-28px */
    font-weight: 500; /* Medium/Semi-Bold */
    color: var(--color-dark-grey);
}
.p-paragraph {
    /* Paragraphs (Body Text) */
    font-size: 16px; /* minimum */
    line-height: 1.6;
    color: var(--color-charcoal);
}
.text-support {
    /* Supporting Text / Secondary Descriptions */
    font-size: 15px; /* В межах 14px-15px */
    color: var(--color-dark-grey);
}

/* 4. Стилі для посилань (Links & Interactive Text) */
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    color: var(--color-dry-sage) !important; /* Active / Hover State: Dry Sage */
}
/* Для вже відвіданих посилань (Visited Links) потрібно використовувати спеціальні селектори,
   але для загального стилю можна встановити базовий колір, як у прикладі для посилань у навігації */
a:visited {
    color: var(--color-dark-grey); /* Схожий на темніший сірий */
}
/* Кастомний стиль для кнопки "Show Results" */
.btn-custom-search {
    background-color: var(--color-dark-grey) !important; /* Використовуємо Dark Grey (#4D4D4D) */
    color: white !important;
    border: none;
    line-height: 1.2;
}
.btn-custom-search:hover {
    background-color: color-mix(in srgb, var(--color-dark-grey) 10%, black) !important;
}
/* Стиль для фону розкритого акордеона (щоб замінити стандартний блакитний Bootstrap) */
.accordion-item .accordion-collapse.show {
    background-color: var(--color-papaya-whip) !important; /* Використовуємо світлий акцентний колір */
    border-top: 1px solid var(--color-dry-sage) !important; /* Додаємо тонку межу, щоб відокремити від полів вище */
}

/* Додатково, для кнопки-заголовка акордеона при натисканні (Active state) */
.accordion-button:not(.collapsed) {
    background-color: var(--color-dry-sage) !important; /* Можна використати Dry Sage для заголовка, коли він відкритий */
    color: var(--color-charcoal) !important;
}
/* 1. Усунення обідка при фокусі (коли користувач клікає або табацює) */
.accordion-button:focus {
    border-color: transparent !important; /* Або краще - колір Dry Sage */
    box-shadow: none !important; /* Прибираємо тінь, яка часто йде з фокусом */
}

/* 2. Стилізація самої кнопки-заголовка, коли вона відкрита (active) */
.accordion-button:not(.collapsed) {
    background-color: var(--color-dry-sage) !important; /* Фон як Dry Sage */
    color: var(--color-charcoal) !important;
    border-color: var(--color-dry-sage) !important; /* Колір рамки як Dry Sage */
    box-shadow: none !important; /* Прибираємо тінь, яка може з'явитись */
}

/* 3. Стилізація тіла, коли воно розкрите (для загальної відповідності) */
.accordion-item .accordion-collapse.show {
    background-color: var(--color-papaya-whip) !important; /* Світлий фон для вмісту */
    border-top: 1px solid var(--color-dry-sage) !important; /* Тонка межа зверху */
}
.property-description {
    min-height: 78px;
}
/* Закругленные края для всех кнопок в этой секции */
.rounded-pill {
    border-radius: 50px !important;
}

/* Настройка тени для "Start Now", чтобы она выделялась */
.btn-custom-cta.rounded-pill {
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-custom-cta.rounded-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}