/* ======================================================= */
/* 1. ГЛАВНЫЙ КОНТЕЙНЕР И СБРОС СТИЛЕЙ (РАСПАКОВКА) */
/* ======================================================= */

.pregnancy-calc-wrapper {
    max-width: 100% !important; /* На всю ширину */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Open Sans', sans-serif;
    color: #333;
}

/* Делаем карточки прозрачными и убираем лишние отступы */
.calc-form-card,
.calc-result-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}

/* ======================================================= */
/* 2. ЭЛЕМЕНТЫ ФОРМЫ (ВВОД ДАННЫХ) */
/* ======================================================= */

.calc-title { color: #000080; text-align: center; margin-bottom: 10px; }
.calc-subtitle { text-align: center; color: #666; margin-bottom: 25px; }

/* Сетка: 2 колонки на ПК, 1 на телефоне */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .calc-grid { grid-template-columns: 1fr; } }

.input-group label { display: block; font-weight: 600; margin-bottom: 5px; color: #444; }
.input-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }

/* Кнопка "Рассчитать" */
.calc-btn {
    display: block; width: 100%; margin-top: 25px; padding: 15px;
    background-color: #ffcc00; color: #000080;
    font-size: 18px; font-weight: bold; border: none; border-radius: 50px;
    cursor: pointer; text-transform: uppercase; transition: transform 0.2s;
}
.calc-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 204, 0, 0.4); }

/* ======================================================= */
/* 3. РЕЗУЛЬТАТЫ (ШАПКА И ТАБЛИЦА) */
/* ======================================================= */

/* Синяя шапка с датой родов */
.result-header {
    background: #000080;
    width: 100% !important;
    padding: 25px;
    border-radius: 15px !important;
    margin-bottom: 25px !important;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

.result-row { color: #ffcc00 !important; margin-bottom: 10px; font-weight: bold; }
h3.result-row { font-size: 1.6em; margin-bottom: 15px; font-weight: bold; text-transform: uppercase; }
.result-value { color: #ffffff !important; font-weight: bold; margin-left: 5px; }

/* --- НАСТРОЙКИ ТАБЛИЦЫ (ГЛОБАЛЬНЫЕ) --- */
.pregnancy-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    table-layout: fixed !important; /* ВАЖНО: Фиксация ширины */
}

.table-responsive { overflow-x: auto; }

/* Шапка таблицы */
.pregnancy-table th {
    background: #f4f8ff !important; /* Светло-синий фон */
    padding: 12px;
    text-align: left;
    color: #0d2b6b !important;
    border: none !important;
    font-weight: 700 !important;
}

/* Ячейки таблицы */
.pregnancy-table td {
    padding: 15px 10px !important;
    border-bottom: 1px solid #eef2f6 !important;
    vertical-align: top; /* Текст начинается сверху */
}
.pregnancy-table tr:hover { background-color: #f9f9f9; }

/* Скрываем техническую таблицу-источник */
.pregnancy-source-table { display: none !important; }

/* Кнопка печати */
.print-btn {
    background: #eee; color: #333; border: none; padding: 10px 20px;
    border-radius: 5px; cursor: pointer; margin-top: 20px; font-size: 14px;
}
.print-btn:hover { background: #ddd; }


/* ======================================================= */
/* 4. НАСТРОЙКИ КОЛОНОК (ДЕСКТОП) */
/* ======================================================= */
@media (min-width: 769px) {
    
    /* Столбец 1: ДЕНЬ */
    .pregnancy-table th:nth-child(1),
    .pregnancy-table td:nth-child(1) {
        width: 55px !important;
        text-align: center !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    /* Столбец 2: ДАТА */
    .pregnancy-table th:nth-child(2),
    .pregnancy-table td:nth-child(2) {
        width: 100px !important; 
        text-align: center !important;
        font-size: 15px !important;
        white-space: normal !important; /* Разрешаем перенос, раз ширина маленькая */
    }
    
    /* Столбец 3: ОПИСАНИЕ (ЗАГОЛОВОК) */
    .pregnancy-table th:nth-child(3) {
        width: auto !important; 
        text-align: center !important; /* Заголовок по центру */
        font-size: 15px !important;
    }

    /* Столбец 3: ОПИСАНИЕ (ТЕКСТ) */
    .pregnancy-table td:nth-child(3) {
        width: auto !important; 
        text-align: left !important;   /* Текст статьи слева */
        font-size: 15px !important;
        line-height: 1.7;
    }
}


/* ======================================================= */
/* 5. НАСТРОЙКИ КОЛОНОК (МОБИЛЬНЫЙ) */
/* ======================================================= */
@media (max-width: 768px) {
    
    .result-header h3.result-row { font-size: 18px !important; line-height: 1.3 !important; }
    .result-title-yellow { font-size: 1.2em !important; display: block !important; margin-bottom: 5px !important; }

    .table-responsive {
        display: block !important; width: 100% !important;
        overflow-x: auto !important; -webkit-overflow-scrolling: touch;
        padding-bottom: 5px !important;
    }
    
    /* ДЕНЬ */
    .pregnancy-table th:nth-child(1),
    .pregnancy-table td:nth-child(1) {
        width: 35px !important; min-width: 35px !important;
        padding: 10px 2px !important;
        text-align: center !important; font-weight: bold !important; font-size: 13px !important;
    }
    
    /* ДАТА */
    .pregnancy-table th:nth-child(2),
    .pregnancy-table td:nth-child(2) {
        width: 75px !important; min-width: 75px !important;
        padding: 10px 2px !important;
        white-space: normal !important; 
        word-wrap: break-word !important; 
        font-size: 13px !important; line-height: 1.1 !important;
        text-align: center !important;
    }
    
/* --- ОПИСАНИЕ (РАЗДЕЛЯЕМ ЗАГОЛОВОК И ТЕКСТ) --- */
    
    /* 1. Заголовок столбца "Описание" (по центру) */
    .pregnancy-table th:nth-child(3) {
        min-width: 280px !important;
        padding: 15px 10px !important;
        font-size: 14px !important; 
        text-align: center !important; /* <--- Центруем заголовок */
    }

    /* 2. Текст столбца "Описание" (влево) */
    .pregnancy-table td:nth-child(3) {
        min-width: 280px !important;
        white-space: normal !important;
        padding: 15px 10px !important;
        font-size: 14px !important; 
        line-height: 1.5 !important;
        text-align: left !important;   /* <--- Текст оставляем слева */
        vertical-align: top !important;
    }
}

/* ======================================================= */
/* 6. СТИЛИ ДЛЯ ПЕЧАТИ (ИСПРАВЛЕННАЯ МНОГОСТРАНИЧНОСТЬ) */
/* ======================================================= */
@media print {
    
    /* 1. Явно скрываем блоки темы Astra и лишние элементы */
    #masthead,          /* Шапка сайта */
    #colophon,          /* Подвал */
    #secondary,         /* Сайдбар */
    .ast-breadcrumb,    /* Хлебные крошки */
    .entry-header,      /* Заголовок страницы */
    .comments-area,     /* Комментарии */
    .ast-post-navigation,
    .widget-area,
    .print-btn,         /* Кнопка печати */
    .calc-form-card,    /* Форма ввода */
    .pregnancy-source-table /* Скрытая таблица */
    {
        display: none !important;
    }

    /* 2. Сбрасываем стили контейнеров, чтобы контент был на всю ширину */
    html, body, .site-content, .ast-container, #primary, #main, article, .entry-content {
        background: white !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        float: none !important;
        overflow: visible !important; /* Разрешаем прокрутку для печати */
        height: auto !important;      /* Высота авто - ВАЖНО для многостраничности */
    }

    /* 3. Скрываем вообще всё внутри статьи... */
    .entry-content > * {
        display: none !important;
    }

    /* 4. ...НО возвращаем видимость нашему календарю */
    .entry-content > .pregnancy-calc-wrapper {
        display: block !important;
    }

    /* 5. Настройки календаря */
    .pregnancy-calc-wrapper {
        /* ВАЖНО: static или relative возвращает элемент в поток */
        /* Браузер теперь видит его реальную длину и создаст 2-ю, 3-ю страницы */
        position: relative !important; 
        top: auto !important;
        left: auto !important;
        
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
    }

    /* Делаем видимым всё внутри календаря */
    .pregnancy-calc-wrapper * {
        visibility: visible !important;
        display: block; /* Сброс для гарантии */
    }
    
    /* Восстанавливаем таблицу */
    .pregnancy-table { display: table !important; width: 100% !important; }
    .pregnancy-table thead { display: table-header-group !important; }
    .pregnancy-table tbody { display: table-row-group !important; }
    .pregnancy-table tr { 
        display: table-row !important; 
        page-break-inside: avoid; /* Стараемся не разрывать строку посередине */
        break-inside: avoid;
    }
    .pregnancy-table td, .pregnancy-table th { display: table-cell !important; }

    /* --- ЦВЕТА (Экономный вариант: Синий текст, белый фон) --- */
    .calc-result-card {
        box-shadow: none !important;
        border: none !important;
    }

    .result-header {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
        color: #000080 !important;
    }

    .result-row, .result-value {
        color: #000080 !important;
        font-weight: bold !important;
    }

    /* Заголовки таблицы - оставляем цветной фон для удобства */
    .pregnancy-table th {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        background-color: #f4f8ff !important;
        color: #000080 !important;
    }
}