/* ==========================================================================
   responsive_ux.css - responsive / touch / clean-up layer for the public site (loaded LAST in front/layout/layout.php)
   Frontend only: no markup, script or business logic depends on it. Colours come from the existing :root variables
   (--main-bg dark red, --sub-bg orange).  Remove the <link> to switch everything off again.
   ========================================================================== */
:root {
    --ux-radius: 10px;
    --ux-radius-sm: 6px;
    --ux-shadow: 0 2px 10px rgba(0, 0, 0, .10);
    --ux-shadow-lg: 0 6px 24px rgba(0, 0, 0, .16);
    --ux-line: #e3d7cf;
    --ux-tap: 44px;
}

/* ---- 1. base ------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; line-height: 1.5; -webkit-tap-highlight-color: rgba(164, 21, 3, .15); }
img, video, svg, canvas { max-width: 100%; }
img { height: auto; }
iframe, embed, object { max-width: 100%; }
.container, .container-fluid { max-width: 100%; }
a, button, .btn, input, select, textarea, label { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--sub-bg, #ef9e1f); outline-offset: 2px; }
/* text can be selected inside forms and tables (the site disables selection elsewhere) */
input, textarea, select, table, td, th { -webkit-user-select: text; user-select: text; }
/* long words / numbers / e-mail addresses never push the page wider */
p, li, h1, h2, h3, h4, h5, h6, .col-xs-12, [class*="col-"] { overflow-wrap: break-word; word-break: normal; }
td, th { overflow-wrap: normal; word-break: normal; } /* table cells keep whole words; a wide table scrolls (see 4) */
h1, h2, h3 { line-height: 1.25; }

/* ---- 2. buttons & links ------------------------------------------------- */
.btn { border-radius: var(--ux-radius-sm); transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info { box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.btn[disabled], .btn.disabled, button[disabled] { opacity: .6; cursor: not-allowed; }

/* ---- 3. forms ----------------------------------------------------------- */
.form-control { border-radius: var(--ux-radius-sm); border-color: #cbbcb2; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
.form-control:focus { border-color: var(--main-bg, #a41503); box-shadow: 0 0 0 3px rgba(164, 21, 3, .15); }
label { font-weight: 600; }
.form-group { margin-bottom: 14px; }
textarea.form-control { min-height: 90px; }
input[type="file"].form-control { height: auto; padding: 8px; }

/* ---- 4. tables ---------------------------------------------------------- */
/* ux.js wraps every table in .ux-table-scroll so a wide table scrolls sideways inside its own box instead of widening the page */
.ux-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 15px;
    background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 30px 100% no-repeat local,
                linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 30px 100% no-repeat local,
                radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) left center / 10px 100% no-repeat scroll,
                radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) right center / 10px 100% no-repeat scroll; }
.ux-table-scroll > table { margin-bottom: 0; }
.table > thead > tr > th, table.dataTable thead th { white-space: nowrap; }
.table > tbody > tr > td, .table > thead > tr > th { vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fbf6f2; }

/* ---- 5. header, logo, top bar ------------------------------------------- */
.logo_icon img { max-width: 100%; object-fit: contain; }
.top_media { font-size: 12px; }
#ux-clock { color: var(--dark, #fff); font-size: 12px; letter-spacing: .2px; }
.nav_box a, .my_nav a { transition: background-color .15s ease, color .15s ease; }
/* header audio player: compact, never wider than its column */
.auto_audio_new audio, .mobileview_audio_box audio { max-width: 100%; }
.auto_audio_new audio { height: 36px; }

/* ---- 6. cards / panels / images ---------------------------------------- */
.panel, .well, .thumbnail { border-radius: var(--ux-radius); }
.thumbnail, .panel { box-shadow: var(--ux-shadow); border-color: var(--ux-line); }
/* below-the-fold blocks are drawn only when they scroll near the screen (faster first paint) */
.footer, .container-fluid.footer { content-visibility: auto; contain-intrinsic-size: 1px 700px; }

/* ---- 7. tablet ---------------------------------------------------------- */
@media (max-width: 991px) {
    .container { width: 100%; padding-left: 15px; padding-right: 15px; }
    .logo_icon img { height: auto; max-height: 70px; }
    .sub_nav { max-width: 92vw; }
}

/* ---- 8. phone ----------------------------------------------------------- */
@media (max-width: 767px) {
    body { font-size: 16px; padding-bottom: 76px; } /* room for the floating chat / WhatsApp button, footer links stay tappable */
    h1 { font-size: 26px; } h2 { font-size: 22px; } h3 { font-size: 19px; } h4 { font-size: 17px; }
    .btn { min-height: var(--ux-tap); padding: 10px 16px; font-size: 16px; }
    .btn-xs, .btn-sm { min-height: 38px; }
    .form-control { min-height: var(--ux-tap); font-size: 16px; /* 16px stops iOS from zooming into the field */ }
    select.form-control { padding-right: 28px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin-top: 3px; }
    .checkbox label, .radio label { padding-left: 26px; min-height: 28px; }
    .form-inline .form-control, .form-inline .btn { width: 100%; margin-bottom: 8px; }
    .input-group-addon, .input-group-btn .btn { min-height: var(--ux-tap); }
    table { font-size: 14px; }
    .table > thead > tr > th, .table > tbody > tr > td { padding: 8px; }
    .modal-dialog { margin: 10px; }
    .modal-body { max-height: calc(100vh - 150px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal-footer .btn { width: 100%; margin: 4px 0; }
    .nav_off .row, #nav_off .row { margin-left: 0; margin-right: 0; }
    .logo_icon { padding: 8px 10px; justify-content: center; flex-wrap: wrap; text-align: center; }
    .logo_content { margin-left: 0; }
    .logo_content h3 { font-size: 20px; margin-bottom: 4px; }
    .logo_content p { font-size: 13px; }
    /* footer / list links: bigger touch targets */
    .footer a { display: inline-block; padding: 6px 0; }
    /* the floating chat / WhatsApp button must not cover content in the corner */
    #df-btn-cont .df-btn { bottom: 12px !important; right: 12px !important; }
}

/* ---- 9. small phones ---------------------------------------------------- */
@media (max-width: 400px) {
    body { font-size: 15.5px; }
    h1 { font-size: 23px; } h2 { font-size: 20px; }
}

/* ---- 10. big screens: keep lines readable ------------------------------- */
@media (min-width: 1500px) {
    .container { max-width: 1400px; }
}

/* ---- 11. motion --------------------------------------------------------- */
@media (max-width: 767px) { .wow, .animated { animation-duration: .4s !important; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- 12. print ---------------------------------------------------------- */
@media print { #df-btn-cont, .top_media, .nav_box, .footer, audio { display: none !important; } body { padding-bottom: 0; } }

/* ---- 13. header + mobile menu bar (phones) ------------------------------- */
@media (max-width: 767px) {
    html body .logo_icon { flex-direction: column; gap: 2px; padding: 6px 8px 2px; }
    html body .logo_icon img { width: auto; max-width: 92%; height: auto; max-height: 52px; }
    html body .logo_content h3 { font-size: 19px; margin: 2px 0; }
    html body .logo_content p { font-size: 12.5px; }
    html body .auto_audio_new { padding: 2px 8px 8px; justify-content: center; }
    html body .auto_audio_new audio { width: 100%; height: 34px; }
    /* menu bar: brand red instead of dark grey, big white button with a label */
    html body .nav_btn, html body .nav-adj { background-color: var(--main-bg, #a41503); }
    html body #nav_off { padding-left: 0; padding-right: 0; }
    html body #nav_btn, html body .nav_btn button.visible-xs { color: #fff !important; background: transparent; border: 0; min-width: 48px; min-height: 48px; font-size: 24px; padding: 6px 12px; line-height: 1; }
    html body #nav_btn .glyphicon { color: #fff !important; top: 0; }
    html body #nav_1 li a { display: block; padding: 12px 16px; font-size: 16px; min-height: 44px; }
}

/* ---- 14. cards with a fixed height + absolute button (home page services) - let them grow with the text ---- */
@media (max-width: 991px) {
    html body .devotee_service_info { height: auto !important; min-height: 300px; padding-bottom: 84px; }
    html body .devotee_services .row > [class*="col-"], html body [class*="col-"]:has(> .devotee_service_info) { height: auto !important; margin-bottom: 14px; }
    html body .devotee_service_info p { text-align: left; }
}
@media (max-width: 767px) {
    /* justified text makes big gaps in narrow columns */
    html body p, html body .devotee_service_info p, html body .col-xs-12 p, html body td { text-align: left !important; }
}
/* ---- 15. touch-size call-to-action buttons + chat button ------------------ */
@media (max-width: 767px) {
    html body .dservice_btn, html body .desk_button .btn { font-size: 16px; padding: 10px 30px; min-height: 44px; }
    html body #df-btn-cont .df-btn-text { display: none !important; } /* keep only the round chat icon; the text pill covered the page */
}

/* ---- 16. tablet / small laptop menu: one wrapping row instead of a 570px tall vertical list ---- */
@media (min-width: 768px) and (max-width: 1199px) {
    html body .nav_box .all_menu { display: flex !important; flex-wrap: wrap; width: 100%; padding-left: 0; margin: 0; }
    html body .nav_box .all_menu > li { display: block; float: none; width: auto; }
    html body .nav_box .my_nav li a { padding: 12px 11px; font-size: 14px; }
    html body .nav_box .my_nav li a img { width: 11px; }
    html body .nav_box .nav_content { align-items: center; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    html body .website .my_nav.all_menu { display: flex !important; flex-wrap: wrap; width: 100%; padding: 0; margin: 0; }
    html body .website .my_nav.all_menu > li { display: block; float: none; width: auto; }
    html body .website .my_nav.all_menu > li > a { display: block; padding: 12px 11px; font-size: 14px; }
}

/* ---- 17. small clean-ups from the audit ------------------------------------ */
html body .logo_content { min-width: 0; max-width: 100%; padding: 0 8px; }
/* unavailable calendar days: white on light grey was hard to read */
html body a[onclick*="no_date"] { color: #6b6b6b !important; }

/* ---- 18. form buttons (phones): the site sets 11-12px text on them -------------- */
@media (max-width: 767px) {
    html body form .btn, html body form input[type="submit"], html body form input[type="button"], html body form button[type="submit"] { font-size: 16px !important; min-height: 44px; padding: 10px 24px; margin: 4px 6px 4px 0; }
    html body .btn-lg { padding: 12px 28px; }
}
@media (max-width: 767px) {
    html body .btn:not(.btn-xs):not(.btn-sm) { font-size: 16px !important; min-height: 44px; padding: 10px 20px; }
    html body .btn-xs, html body .btn-sm { font-size: 14px !important; min-height: 38px; padding: 6px 12px; }
}

/* ---- 19. footer columns stacked on phones: air between the groups ------------ */
@media (max-width: 767px) {
    html body .footer h2, html body .footer h3, html body .footer h4 { margin-top: 26px; margin-bottom: 12px; }
    html body .footer li { margin-bottom: 2px; }
}
@media (max-width: 767px) { html body .logo_content { margin-left: 0; width: 100%; } }

/* ---- 20. phones: 4+ column data tables as cards (ux.js adds .ux-stack and the data-label texts) ------------ */
@media (max-width: 600px) {
    html body .ux-table-scroll { overflow-x: visible; background: none; }
    html body table.ux-stack, html body table.ux-stack tbody, html body table.ux-stack tr, html body table.ux-stack td { display: block; width: 100% !important; }
    html body table.ux-stack thead { display: none; }
    html body table.ux-stack { border: 0; background: transparent; }
    html body table.ux-stack tr { margin: 0 0 12px; padding: 6px 12px; background: #fff; border: 1px solid var(--ux-line, #e3d7cf); border-radius: 10px; box-shadow: 0 1px 6px rgba(0, 0, 0, .08); }
    html body table.ux-stack td { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; column-gap: 12px; border: 0 !important; padding: 7px 0 !important; text-align: right !important; min-height: 36px; overflow-wrap: anywhere; white-space: normal !important; }
    html body table.ux-stack td > * { grid-column: 2; justify-self: end; max-width: 100%; }
    html body table.ux-stack td + td { border-top: 1px solid #f0e8e2 !important; }
    html body table.ux-stack td::before { content: attr(data-label); grid-column: 1; grid-row: 1; text-align: left; font-weight: 700; color: #6b5d55; font-size: 13px; }
    html body table.ux-stack td:empty { display: none; }
    html body table.ux-stack td > select, html body table.ux-stack td > input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
}
@media (max-width: 600px) { html body .dataTables_wrapper:has(table.ux-stack) .dataTables_scrollHead { display: none; } html body .dataTables_wrapper:has(table.ux-stack) .dataTables_scrollBody { overflow: visible !important; height: auto !important; max-height: none !important; } }

@media (max-width: 600px) { html body table.ux-stack .ux-head-row { display: none !important; } html body table.ux-stack td, html body table.ux-stack tr { height: auto !important; line-height: 1.35; } }