/*
Theme Name: Acutis Blank Theme
Theme URI: https://gkpvxito.net
Author: Acutis Tân
Description: Ultra-lightweight fallback theme for KTV Online PWA pages.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: acutis-blank-theme
*/

html {
    box-sizing: border-box;
    font-size: 16px;
}

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

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.65;
    color: #1f2933;
    background-color: #fcf9f2; /* mobile: nền kem cùng màu nội dung */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 769px) {
    body {
        background-color: #e8e8e8; /* desktop: nền xám làm canvas ngoài */
    }
}

a {
    color: #7a110d;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

.site-main {
    width: 100%;
}

/*
 * Mobile: shell chiếm full width, plugin tự quản lý toàn bộ layout.
 * Desktop: shell thu về 1240px, căn giữa, nền kem nổi bật trên nền xám của body.
 *
 * Tại sao 1240px?
 *   Plugin đặt .xito-header-inner { max-width: 1200px; padding: 0 5% }.
 *   → Các icon ngoài cùng (icon Đọc sách / Download) nằm tại ~60px tính từ
 *     mép của khung 1200px đó.
 *   → Site-shell 1240px rộng hơn header-inner 40px (20px/bên), nên 2 mép nền
 *     kem luôn nhô ra ngoài vị trí icon khoảng 80px mỗi bên — đúng ý muốn.
 *
 * Lưu ý: plugin đã tự đặt body { background: #b6b6b6 !important } trên desktop,
 * nên nền xám canvas được đảm bảo ngay cả khi theme-level override bị ghi đè.
 */
.site-shell {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

@media (min-width: 769px) {
    .site-shell {
        max-width: 1240px;
        margin: 0 auto;
        background-color: #fcf9f2;
        box-shadow: 0 2px 24px rgba(0, 0, 0, 0.13);
    }

    /*
     * Tựa đề ngày phụng vụ (CHÚA NHẬT / THỨ HAI...) do plugin render ở đầu .x-box
     * có inline margin:0 nên bị sát cụm nội dung kế bên dưới.
     * Dùng !important để thắng inline style và tạo khoảng thở rõ ràng trên desktop.
     */
    .x-box > h1 {
        margin-top: 0 !important;
        margin-bottom: 1.8rem !important;
        padding-top: 1.8rem !important;
    }
}

/*
 * The plugin's fixed header is ~82px tall on desktop (liturgy title + reading +
 * clock + 8px top/bottom padding). The plugin's own .xito-main-wrapper only
 * applies margin-top: 20px, which leaves ~62px of the prayer menu hidden behind
 * the header. We override here to clear it properly.
 * Mobile header is ~52px (icon row only, no multi-line clock).
 */
.xito-main-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: #fcf9f2;
}

/*
 * Đảm bảo màu nền phần nội dung chạm sát ngay dưới đường kẻ ngang (border-bottom
 * của .prayer-menu-container), đóng vai trò ranh giới rõ giữa vùng nút và vùng
 * đọc kinh theo từng chế độ nền.
 */
body.theme-white .xito-main-wrapper {
    background-color: #ffffff !important;
}

body.theme-paper .xito-main-wrapper {
    background-color: #f4e8d0 !important;
}

body.theme-dark .xito-main-wrapper {
    background-color: #3a3a3a !important;
}

@media (max-width: 768px) {
    .xito-main-wrapper {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/*
 * Khu vực nút "Hôm nay" + Dropdown giờ kinh: tăng padding và đổi nền sang
 * #fcf9f2 để khớp với nền .site-shell, tạo cảm giác liền mạch từ header đỏ
 * xuống vùng nội dung đọc kinh (plugin mặc định dùng #f8f8f8).
 */
.prayer-menu-container {
    padding-top: calc(82px + 15px) !important;
    padding-bottom: 15px !important;
    margin-top: 0 !important;
    background-color: #a37e7e !important;
    width: 100%;
}

@media (max-width: 768px) {
    .prayer-menu-container {
        padding-top: calc(54px + 15px) !important;
        margin-top: 0 !important;
    }
}

.site-article {
    margin: 0;
}

.entry-content {
    width: 100%;
}

.entry-content > * {
    margin-top: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content table {
    margin-bottom: 1rem;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin: 0 0 0.8rem;
    line-height: 1.25;
    color: #101820;
}

img,
iframe,
embed,
object,
video {
    max-width: 100%;
    height: auto;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin: 0.35rem 1rem 0.75rem 0;
}

.alignright {
    float: right;
    margin: 0.35rem 0 0.75rem 1rem;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    margin-top: 0.4rem;
    font-size: 0.92rem;
    color: #4a5568;
}

@media (max-width: 768px) {
    /* ── Nền body: kem liền mạch, không có viền xám 2 bên ── */
    body {
        font-size: 0.98rem;
        background-color: #fcf9f2;
    }

    /* ── Shell và wrappers: tràn full width, không padding ngang ── */
    .site-shell {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .site-main,
    .site-article,
    .entry-content {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    /*
     * Tiêu đề ngày lễ — plugin sinh ra thẻ <h1> bên trong .x-box với inline
     * style color:#009ee2. Trình duyệt mặc định h1 = 2rem (~32px); thu về
     * 1.3rem để gọn hơn và không chiếm quá nhiều không gian trên màn nhỏ.
     */
    .x-box h1 {
        font-size: 1.3rem !important;
        line-height: 1.4;
        padding: 10px 12px !important;
    }

    /* ── Tiêu đề phần trong nội dung giờ kinh (.x-body) ── */
    .x-body h1,
    .x-body h2,
    .x-body h3 {
        font-size: 1.1rem;
        line-height: 1.35;
    }
}

/* ── Flatsome shortcode compatibility ── */

.acutis-video-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.acutis-video-wrap iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    border: 0;
}

.acutis-image-wrap {
    margin-bottom: 1.5rem;
}

.acutis-image-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Site footer ── */

.site-footer {
    background-color: #510000;
    color: #c98600;
    text-align: center;
    padding: 1.75rem 1rem;
    margin-top: 2rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

.footer-widgets {
    max-width: 1180px;
    margin: 0 auto 1.25rem;
}

.site-copyright p {
    margin: 0;
    color: #c98600;
}

.site-copyright a,
.site-copyright a:hover,
.site-copyright a:focus {
    color: #ceb79d;
}

.widget-title {
    color: #e5d5bf;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

/* ── Menu Lễ Ngoại Lịch: tinh chỉnh giao diện ── */
.ngoai-lich-menu-title {
    text-transform: uppercase;
}

.ngoai-lich-menu {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ngoai-lich-menu-item a {
    padding-left: 18px !important;
    padding-right: 12px !important;
}

@media (max-width: 768px) {
    .ngoai-lich-menu-title {
        text-transform: uppercase;
        padding-left: 12px;
        padding-right: 12px;
    }

    .ngoai-lich-menu-item a {
        padding-left: 20px !important;
        padding-right: 12px !important;
    }
}