/* RISHPON — базовые стили и утилиты вместо Bootstrap 5.3 с CDN.
   Причина замены (task-02, шаг 7): Lighthouse считал bootstrap.min.css
   рендер-блокирующим на 1089 мс со стороннего origin, при этом
   unused-css-rules = 0 — страница использовала меньше 2 % фреймворка.
   Здесь ровно те классы, что реально встречаются в index.html и thanks.html;
   набор проверяется командой в отчёте. Сетка — grid, не 12 колонок Bootstrap. */

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                 "Noto Sans Hebrew", "Noto Sans Arabic", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text, #333);
}

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; line-height: 1.2; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
p  { margin-top: 0; margin-bottom: 1rem; }
img, svg, iframe { max-width: 100%; }

.lead { font-size: 1.25rem; font-weight: 300; }
/* display-5 — ступень ниже прежнего display-4 (2.5rem против 3.5rem):
   задача 04, заголовки секций стали компактнее. */
.display-5 { font-size: calc(1.425rem + 1.5vw); font-weight: 300; line-height: 1.2; }
@media (min-width: 1200px) { .display-5 { font-size: 2.5rem; } }

.card-text { margin-bottom: 0; }

.blockquote-footer {
    display: block;
    font-size: 0.875em;
}
.blockquote-footer::before { content: "\2014\00A0"; }

/* ---- Раскладка ---- */
.container {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 12px;
}

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.row.g-3 { gap: 1rem; }
.row.justify-content-center { justify-content: center; }

.col-md-6, .col-md-8, .col-lg-4 { grid-column: span 12; }

@media (min-width: 768px) {
    .col-md-6 { grid-column: span 6; }
    .col-md-8 { grid-column: span 8; }
}
@media (min-width: 992px) {
    .col-lg-4 { grid-column: span 4; }
}

/* col-md-8 mx-auto — центрированная колонка текста */
.col-md-8.mx-auto { justify-self: center; }

/* ---- Утилиты ---- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.text-decoration-none { text-decoration: none; }

.mt-4 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.py-2 { padding-block: 0.5rem; }
.py-3 { padding-block: 1rem; }
.px-5 { padding-inline: 3rem; }

.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); }

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.start-50 { inset-inline-start: 50%; }
.end-0 { inset-inline-end: 0; }
.top-50 { top: 50%; }
.translate-middle-x { transform: translateX(-50%); }
.translate-middle-y { transform: translateY(-50%); }
html[dir="rtl"] .translate-middle-x { transform: translateX(50%); }

.d-none { display: none; }
@media (min-width: 992px) { .d-lg-block { display: block; } }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Шапка ---- */
.navbar {
    display: flex;
    align-items: center;
    padding-block: 0.5rem;
}
.navbar .container { display: flex; align-items: center; }
.fixed-top { position: fixed; top: 0; inset-inline: 0; z-index: 1030; }
.navbar-brand { display: inline-block; text-decoration: none; }

/* ---- Формы ---- */
.form-control, .form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    color: var(--text, #333);
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    appearance: none;
}

.form-select {
    width: auto;
    padding-inline-end: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238B5A3C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
html[dir="rtl"] .form-select {
    padding-inline-end: 2.25rem;
    background-position: left 0.75rem center;
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent-brown, #A67B5B);
    outline: 0;
}

textarea.form-control { min-height: calc(1.5em + 0.75rem + 2px); }

/* ---- Кнопки ---- */
.btn {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-lg { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.5rem; }

.btn-primary {
    /* Тот же синий, что давал Bootstrap, — внешний вид кнопок не меняем:
       перевод палитры на коричневую — решение клиента, не гигиены. */
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover, .btn-primary:focus-visible {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    color: #fff;
}