/*
 * Global stylesheet for the СНТ «Юность» website.
 *
 * The design focuses on accessibility for an older audience:
 *  - High contrast colours and large type sizes
 *  - Simplified layouts with generous spacing and clear buttons
 *  - Responsive layout for desktop and mobile
 *  - A "large font" toggle implemented via the `.large-font` class on
 *    the root element. When this class is present the base font size
 *    increases, making the text easier to read. See script.js for
 *    implementation details.
 */

/* CSS custom properties for colours and sizing */
:root {
    --color-bg: #F4F5F7;
    --color-bg-alt: #FFFFFF;
    --color-primary: #1F6B3A;
    --color-primary-dark: #15512A;
    --color-accent: #F4A623;
    --color-text: #222222;
    --color-muted: #6B7280;
    --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.06);
    --radius-large: 16px;
    --base-font-size: 18px;

    /* Новогодние акценты (мягкие и читаемые) */
    --ny-red: #B91C1C;
    --ny-gold: #F4A623;
    --ny-ice: #E6F6FF;
}

/* ------------------------------------------------------------
   Новогодний декор (ненавязчивый)
   ------------------------------------------------------------ */

/* Лёгкая «снежная пыль» на фоне (очень бледная, чтобы не мешала читать) */
body.newyear {
    background-image:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,0.55) 0 2px, transparent 3px),
        radial-gradient(circle at 62% 18%, rgba(255,255,255,0.45) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 78% 42%, rgba(255,255,255,0.40) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 30% 70%, rgba(255,255,255,0.45) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 88% 78%, rgba(255,255,255,0.40) 0 1.5px, transparent 2.5px);
    background-size: 420px 420px;
    background-attachment: fixed;
}

/* Гирлянда в шапке */
.newyear header {
    position: sticky;
}

.newyear .header-inner {
    position: relative;
}

.newyear .header-inner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 10px;
    border-radius: 999px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.0) 0 18px,
            rgba(255,255,255,0.0) 18px 26px
        ),
        linear-gradient(90deg, rgba(185,28,28,0.25), rgba(244,166,35,0.25), rgba(31,107,58,0.25));
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* Новогодний баннер-поздравление */
.ny-banner {
    background: linear-gradient(135deg, rgba(230,246,255,0.7), #FFFFFF);
    border: 1px solid rgba(230,246,255,0.9);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
    padding: 14px 14px 12px;
    margin: 0 0 14px;
}

.ny-banner__title {
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 6px;
}

.ny-banner__text {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
}

.ny-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(185,28,28,0.08);
    color: var(--ny-red);
    font-size: 14px;
}

/* Increase font size when the user toggles large-font mode */
.large-font {
    /*
     * When large-font mode is active we significantly increase the root
     * font size to aid readability for older users. A difference of
     * several pixels ensures the change is clearly visible. 24px is
     * sufficiently large for most desktop and mobile displays.
     */
    /* При активации крупного шрифта увеличиваем базовый размер более заметно */
    --base-font-size: 26px;
}

/*
 * Explicitly bump the base font on the body element when large-font
 * mode is enabled. While custom properties generally inherit to
 * descendants, some browsers may not recalculate computed font sizes
 * immediately on var() changes. Defining this rule ensures body text
 * scales up in a predictable way. Adjust this value together with
 * --base-font-size above if you tweak the overall large-font size.
 *
 * We support two mechanisms:
 *  - When the .large-font class is applied to <html> (older implementation)
 *  - When the .large-font class is applied directly to <body> (current)
 */
body.large-font,
.large-font body {
    /* В крупном режиме размер шрифта тела наследуется от html (1rem) */
    font-size: 1rem;

    /* TEMPORARY TEST: change background color to verify large-font toggle
     * This colour helps us visually confirm that the large-font class
     * is applied. It will be removed once verified.
     */
    /* background colour intentionally not changed in large-font mode to
       preserve the overall site design. The previous test override has
       been removed. */
}

/* Reset box-sizing for predictable sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/*
 * Устанавливаем размер шрифта на элементе html через CSS‑переменную. Это
 * обеспечивает масштабирование всех rem‑единиц при переключении режима
 * крупного шрифта, поскольку корневой размер (1rem) наследует --base-font-size.
 */
html {
    font-size: var(--base-font-size);
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    /* Наследуем размер шрифта от html. Это значение будет равно
       var(--base-font-size). */
    font-size: 1rem;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Top bar with location and utilities */
.top-bar {
    background: var(--color-primary);
    color: #FFFFFF;
    padding: 6px 16px;
    font-size: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar__left,
.top-bar__right {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.top-bar__badge {
    background: rgba(0, 0, 0, 0.18);
    padding: 2px 8px;
    border-radius: 999px;
}

.btn-small-outline {
    border: 1px solid #FFFFFF;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    background: transparent;
    color: #FFFFFF;
}

.btn-small-outline:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Header / Navigation */
header {
    background: var(--color-bg-alt);
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 0;
    z-index: 50;
}

.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 16px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    gap: 16px;
}

.logo-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: radial-gradient(circle at 30% 20%, var(--color-accent), var(--color-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1rem;
}

.logo-text-title {
    font-weight: 700;
    font-size: 1.125rem;
}

.logo-text-subtitle {
    font-size: 0.75rem;
    color: var(--color-muted);
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.nav-link {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.nav-link:hover {
    background: rgba(31, 107, 58, 0.08);
}

.nav-link--primary {
    background: var(--color-primary);
    color: #FFFFFF;
    box-shadow: var(--shadow-soft);
}

.nav-link--primary:hover {
    background: var(--color-primary-dark);
    text-decoration: none;
}

/* Hero area */
.hero {
    padding: 32px 0 24px;
    position: relative; /* позволяет позиционировать новогодние игрушки */
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px;
    align-items: center;
}

.hero-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.hero-subtitle {
    font-size: 1rem;
    color: var(--color-muted);
    margin-bottom: 16px;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: #E5F4EA;
    color: var(--color-primary);
    font-size: 0.8rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.btn {
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s;
}

.btn-primary {
    background: var(--color-primary);
    color: #FFFFFF;
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-secondary {
    background: #FFFFFF;
    color: var(--color-primary);
    border: 1px solid #D1D5DB;
}

.hero-note {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.hero-visual {
    background: linear-gradient(135deg, #EAF6EE, #FFFFFF);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
    padding: 16px;
}

.hero-map-placeholder {
    border-radius: 12px;
    border: 1px dashed #C4D4C7;
    padding: 10px;
    font-size: 0.8rem;
    color: var(--color-muted);
    text-align: center;
    margin-bottom: 12px;
}

.hero-list {
    font-size: 0.8rem;
    margin: 0;
    padding-left: 18px;
    color: var(--color-muted);
}

/* Section and card styles */
.section {
    padding: 16px 0 8px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 600;
}

.section-subtitle {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.card {
    background: var(--color-bg-alt);
    border-radius: var(--radius-large);
    padding: 14px 14px 16px;
    box-shadow: var(--shadow-soft);
    min-height: 120px;
}

.card-title {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 1rem;
}

.card-text {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-bottom: 8px;
}

.card-link {
    font-size: 0.8rem;
    font-weight: 500;
}

.two-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.list-simple {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-simple li {
    padding: 6px 0;
    border-bottom: 1px solid #E5E7EB;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.list-simple span {
    color: var(--color-muted);
    font-size: 0.75rem;
}

.forum-preview {
    background: var(--color-bg-alt);
    border-radius: var(--radius-large);
    padding: 14px 14px 10px;
    box-shadow: var(--shadow-soft);
}

.forum-topic {
    padding: 8px 0;
    border-bottom: 1px solid #E5E7EB;
}

.forum-topic:last-child {
    border-bottom: none;
}

.forum-topic-title {
    font-size: 0.9rem;
    font-weight: 500;
}

.forum-topic-meta {
    font-size: 0.7rem;
    color: var(--color-muted);
}

.contacts {
    background: var(--color-bg-alt);
    border-radius: var(--radius-large);
    padding: 14px 14px 12px;
    box-shadow: var(--shadow-soft);
    font-size: 0.9rem;
}

.contacts-row {
    margin-bottom: 6px;
}

.contacts-label {
    font-weight: 500;
}

footer {
    margin-top: 24px;
    padding: 16px 0 24px;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    border-top: 1px solid #E5E7EB;
    padding-top: 12px;
    justify-content: space-between;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-bottom {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .hero-inner,
    .two-columns,
    .card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .hero {
        padding-top: 16px;
    }
    .hero-title {
        font-size: 1.6rem;
    }
    nav {
        justify-content: flex-start;
    }
    header {
        position: static;
    }
}

@media (max-width: 600px) {
    body {
        font-size: calc(var(--base-font-size) - 2px);
    }
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/*
 * ---------------------------------------------------------------------------
 * Новогоднее настроение
 *
 * В этот раздел добавлены стили для праздничного оформления сайта «СНТ Юность».
 *
 *   - Гирлянда из разноцветных лампочек помещается перед блоком героя и
 *     мягко мигает. Лампочки распределяются по ширине и не перехватывают
 *     события мыши, чтобы не мешать навигации.
 *   - Новогодняя шапочка появляется на значке «Ю» в логотипе. Она
 *     добавляется как псевдо‑элемент и использует встроенное изображение
 *     (base64 PNG). Шапочка статична — по желанию владельцев сайта.
 *   - Новогодняя ёлка размещается в правой части героя. Дерево состоит из
 *     нескольких слоёв треугольников, ствола, звезды и игрушек. Слои
 *     слегка покачиваются, а звезда и игрушки мерцают, создавая эффект
 *     живого украшения. Все элементы имеют pointer-events: none, чтобы
 *     не блокировать взаимодействие пользователя с сайтом.
 */

/* Убедимся, что логотип может содержать позиционированный псевдо‑элемент */
.logo-mark {
    position: relative;
}

/* Шапочка Деда Мороза поверх логотипа */
body.newyear .logo-mark::after {
    content: "";
    position: absolute;
    /* Центрируем шапочку над значком "Ю". Используем left:50% + translateX
       для выравнивания по горизонтали. Vertical offset подбираем
       экспериментально, чтобы белая полоса шапки лежала ровно на верхнем
       крае значка. */
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAABnklEQVR4nO3bMVIDMQxGYZmDQAEF3P8wUEABF1kqFSQUsX/Zkjfvq5NZ+aFkk5nQrIjjOI7e57TW2oxZejxkD2A2Fk95XqQSAXeWHlDdouwtTA+4OwKKCCgioCg9oPpZLvuzYHrA3ZUIOLpF2dtnViSgWX+MCvHMCgU0M/t6egt93Aol/opmZp+Pr3++UTx/v1895jLcy89H+vzpA5hdx+uRHTH9JazEi3i+KjVg1OEzI6Zv4O7SAkZvTdYWpgScddiMiMsDzj7k6oi8B4qWBly1HSu3cFnA1S+tVddbEjDrDrniutMDZn9TmH19biKiqQGzt8/NnGNawCrx3Kx5pgSsFs/NmIv3QFF4wKrb56LnCw1YPZ6LnDMs4C7xXNS8IQF3i+ci5uYmIpID7rp9Tp1fCrh7PKecYzjgWeK50fPwHigaCni27XMj5+oOeNZ4rvd8XQHPHs/1nPPmgPcSz916Xm4ion9/Gpb93z+VXf4ylg0UEVBEQBEBRQQUEVBEQBEBRQQUEVBEQBEBRQQUEVBEQAAAAAAAAAAAcA9+AX2yh7f1erlIAAAAAElFTkSuQmCC');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}

/* Гирлянда из лампочек над героем */
.garland {
    position: absolute;
    left: 0;
    right: 0;
    /* Располагаем гирлянду на верхнем крае героя. Отрицательный отступ мешал её обзору. */
    top: 0;
    display: flex;
    justify-content: center;
    gap: 24px;
    pointer-events: none;
    z-index: 3;
}
.garland .bulb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
    animation: bulb-blink 3s infinite ease-in-out;
    animation-delay: var(--delay, 0s);
}
.garland .bulb.red { background-color: var(--ny-red); }
.garland .bulb.yellow { background-color: var(--ny-gold); }
.garland .bulb.green { background-color: var(--color-primary); }
.garland .bulb.blue { background-color: #3B82F6; }

@keyframes bulb-blink {
    0%, 70%, 100% { opacity: 1; }
    35% { opacity: 0.25; }
}

/* Ёлка с игрушками */
.christmas-tree {
    position: absolute;
    pointer-events: none;
}
/* Позиционирование ёлки в герое: правый верх */
.hero .christmas-tree {
    /* Разместим ёлочку немного ниже и ближе к правому краю, чтобы она не перекрывалась шапкой */
    top: 8px;
    right: 0;
}
.christmas-tree .section1,
.christmas-tree .section2,
.christmas-tree .section3 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.christmas-tree .section1 {
    top: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid var(--color-primary);
    animation: tree-sway 6s ease-in-out infinite;
}
.christmas-tree .section2 {
    top: 30px;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 60px solid var(--color-primary-dark);
    animation: tree-sway 7s ease-in-out infinite;
    animation-delay: 0.3s;
}
.christmas-tree .section3 {
    top: 60px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 70px solid var(--color-primary);
    animation: tree-sway 8s ease-in-out infinite;
    animation-delay: 0.6s;
}
.christmas-tree .trunk {
    position: absolute;
    top: 130px;
    left: 50%;
    width: 14px;
    height: 20px;
    transform: translateX(-50%);
    background: #8B5A2B;
    border-radius: 3px;
}
.christmas-tree .star {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 14px solid var(--ny-gold);
    animation: star-glow 2s ease-in-out infinite;
}
.christmas-tree .ornament {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 4px currentColor;
    animation: ornament-blink 4s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
.christmas-tree .ornament.red { background-color: var(--ny-red); }
.christmas-tree .ornament.gold { background-color: var(--ny-gold); }
.christmas-tree .ornament.green { background-color: var(--color-primary); }

@keyframes tree-sway {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    50% { transform: translateX(-50%) rotate(3deg); }
}

@keyframes star-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes ornament-blink {
    0%, 60%, 100% { opacity: 1; }
    30% { opacity: 0.3; }
}

/* ------------------------------------------------------------------
   Mobile preview styles
   ------------------------------------------------------------------

   When visitors click the “Мобильная версия” button in the top bar,
   the body receives the .mobile-version class (see script.js). These
   rules constrain the layout to a narrower column and rearrange the
   navigation items into a vertical list to simulate how the site looks
   on small screens. The goal is not to be pixel‑perfect, but to give
   gardeners an easy way to preview and evaluate the mobile interface.
*/

body.mobile-version .container {
    /* Restrict the content width to approximate a typical phone screen */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

body.mobile-version nav {
    /* Stack navigation links vertically and align them to the left */
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

body.mobile-version nav .nav-link {
    /* Make each link fill the width of the container */
    display: block;
    width: 100%;
}