/* ─────────────────────────────────────────────────────────────────────────────
   Русские гиды Австралии — общий слой оформления.

   До сих пор все стили жили внутри каждой страницы: 183 страницы носили свои
   копии одних и тех же правил, поэтому смена одного цвета стоила ста шестидесяти
   семи правок. Этот файл — то общее, что должно быть в одном месте: палитра,
   типографика, поведение на телефоне. Страницы свои стили сохраняют; здесь только
   то, что безопасно задать для всех сразу.

   Меняем цвет — меняем одну переменную ниже. Меняем файл — поднимаем номер в
   имени (site-v2.css) и в мастер-странице: Bunny CDN держит статику год и на
   ?v= не реагирует, а на новое имя реагирует сразу.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    --blue: #004890;          /* основной, как на английском сайте */
    --blue-light: #2196F3;    /* вторичные ссылки */
    --accent: #FFC107;        /* только линии и подчёркивания, не текст */
    --action: #CC3300;        /* кнопки и призывы — один цвет действия */
    --panel: #F9F9F9;         /* фон карточек */
    --ink: #222222;
    --muted: #666666;
    --line: #DDE3EC;
    --page: 1100px;           /* ширина текстовой части на большом экране */
}

/* ── текст читается на телефоне ─────────────────────────────────────────────
   Шрифт растёт вместе с экраном, но не опускается ниже шестнадцати пикселей:
   меньше этого телефон предлагает «увеличить», а человек уходит. */
body {
    color: var(--ink);
    line-height: 1.55;
}

@media (max-width: 768px) {
    body, body p, body li, body td, body span, body div {
        font-size: clamp(16px, 4.2vw, 18px);
        line-height: 1.55;
    }
    body h1 { font-size: clamp(22px, 6vw, 28px); line-height: 1.25; }
    body h2 { font-size: clamp(19px, 5vw, 24px); line-height: 1.3; }
    body h3 { font-size: clamp(17px, 4.6vw, 20px); line-height: 1.35; }
}

/* ── ничто не шире экрана ───────────────────────────────────────────────────
   Картинка, таблица или блок с жёсткой шириной в пикселях — самая частая причина
   горизонтальной прокрутки на телефоне. */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

table {
    max-width: 100%;
}

/* Широкую таблицу прокручиваем внутри её собственной рамки, а не всей страницей.
   Обёртку расставляет скрипт в мастер-странице — руками по страницам не ходим. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 14px;
}

@media (max-width: 768px) {
    body [style*="width:"][style*="px"] {
        max-width: 100% !important;
    }
}

/* ── содержательная колонка ─────────────────────────────────────────────────
   Строка длиной в пол-экрана не читается: держим ширину и поля. */
.page-wrap {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 14px;
    box-sizing: border-box;
}

/* ── заголовки в манере английского сайта ───────────────────────────────────
   Синий текст и жёлтая линия под ним вместо белого курсива на плашке. */
h2.section-header,
.section-header {
    color: var(--blue);
    background: none;
    font-weight: 600;
    font-style: normal;
    text-align: left;
    font-size: 1.5em;
    margin: 28px 0 18px;
    padding: 0 0 10px;
    border: 0;
    border-bottom: 2px solid var(--accent);
    border-radius: 0;
}

.section-header a { color: var(--blue); }

/* ── карточка и врезка ──────────────────────────────────────────────────────*/
.panel, .link-item-box {
    background: var(--panel);
    border-left: 4px solid var(--blue);
    padding: 15px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

/* ── один цвет действия ─────────────────────────────────────────────────────
   Синий — это «перейти», оранжево-красный — «сделать»: заказать, забронировать,
   написать. Смешивать их на одной странице значит не сказать ничего. */
.btn-action, a.btn-action, input.btn-action, button.btn-action {
    display: inline-block;
    background: var(--action);
    color: #fff !important;
    border: 0;
    border-radius: 8px;
    padding: 13px 22px;
    font-weight: 700;
    font-size: 1.02em;
    text-decoration: none;
    cursor: pointer;
    min-height: 44px;
    line-height: 1.3;
}

.btn-action:hover { background: #A82A00; }

/* ── палец, а не курсор ─────────────────────────────────────────────────────
   Ссылка в меню или кнопка меньше сорока четырёх пикселей по высоте — это
   промах через раз. */
@media (max-width: 768px) {
    nav a, .menu a, .nav a, .navbar a, .btn, button, input[type="submit"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* ── мелочи, которые видно ──────────────────────────────────────────────────*/
a { color: var(--blue); }
a:hover { color: var(--blue-light); }

hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

::selection { background: var(--accent); color: #222; }