/*
 * Giờ Kinh canvas. Loaded only on the "Giờ Kinh Web App (Độc Lập)" template.
 * Rules below are the Acutis liturgy shell. The block at the top keeps
 * Flatsome's header, footer, and offsets out if a style still prints.
 */

body.giokinh-app {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

body.giokinh-app #wrapper,
body.giokinh-app .page-wrapper,
body.giokinh-app .header-wrapper,
body.giokinh-app #header,
body.giokinh-app #masthead,
body.giokinh-app .header-main,
body.giokinh-app .header-top,
body.giokinh-app .header-bottom,
body.giokinh-app .nav-wrapper,
body.giokinh-app #top-bar,
body.giokinh-app #wide-nav,
body.giokinh-app #footer,
body.giokinh-app .footer-wrapper,
body.giokinh-app .absolute-footer,
body.giokinh-app .back-to-top,
body.giokinh-app .off-canvas,
body.giokinh-app .off-canvas-left,
body.giokinh-app .off-canvas-right,
body.giokinh-app #masthead-mobile,
body.giokinh-app .mobile-nav,
body.giokinh-app .mfp-hide,
body.giokinh-app #main-menu,
body.giokinh-app .mobile-sidebar,
body.giokinh-app #search-lightbox,
body.giokinh-app .search-lightbox,
body.giokinh-app #login-form-popup,
body.giokinh-app #cart-popup,
body.giokinh-app .cart-popup,
body.giokinh-app .ux-body-overlay {
    display: none !important;
}

html {
    box-sizing: border-box;
    font-size: 16px;
    scroll-behavior: smooth;
    /* Header đỏ + cùng offset với .prayer-menu-container + hàng GIỜ HIỆN TẠI / dropdown + hở */
    scroll-padding-top: calc(82px + 15px + 60px + 18px);
}

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

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

body {
    position: relative;
    isolation: isolate;
    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;
}

/*
 * Họa tiết Công giáo chìm (WebP) — cố định khi cuộn.
 * isolation trên body giữ lớp này nằm trên màu nền nhưng dưới chữ viết.
 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../../images/catholic_pattern.webp");
    background-repeat: repeat;
    background-position: center;
    opacity: 0.15;
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 40%, black 90%);
    mask-image: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 40%, black 90%);
    z-index: -1;
    pointer-events: none;
}

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

@media (max-width: 768px) {
    html {
        /* Mobile: header + vùng nút/dropdown (có thể xuống 2 dòng) + hở; !important chống ghi đè plugin */
        scroll-padding-top: 230px !important;
        scroll-margin-top: 230px !important;
    }

    /* scrollIntoView('.x-box') — bù trực tiếp phần tử được cuộn tới (Safari/WebKit thường cần) */
    .x-box {
        scroll-margin-top: 80px !important;
    }
}

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 {
    position: relative;
    isolation: isolate;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.site-main,
.site-footer {
    position: relative;
    z-index: 1;
}

@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);
    }

    /*
     * Cột nội dung desktop có nền kem đục, che body::before.
     * Lớp này vẽ lại họa tiết trong khung 1240px, cố định theo viewport.
     */
    .site-shell::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: url("../../images/catholic_pattern.webp");
        background-repeat: repeat;
        background-position: center;
        background-attachment: fixed;
        opacity: 0.04;
        z-index: 0;
        pointer-events: none;
    }

    .site-shell > * {
        position: relative;
        z-index: 1;
    }

    /*
     * 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 {
    position: relative;
    isolation: isolate;
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: transparent !important;
}

/*
 * Đả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;
}

body.theme-white .xito-main-wrapper::before,
body.theme-paper .xito-main-wrapper::before,
body.theme-dark .xito-main-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../../images/catholic_pattern.webp");
    background-repeat: repeat;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.04;
    z-index: 0;
    pointer-events: none;
}

@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; nền #696e71 (xám đậm).
 * 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: #696e71 !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;
}

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

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

/* ── 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;
    }
}