/*
Theme Name:     Stratus - Child Theme
Theme URI:      https://demo.themovation.com/stratus/intro/
Template:       stratusx
Author:         Themovation
Author URI:     http://themovation.com
Version:        4.0
Text Domain:    stratus
Domain Path:    /languages/
*/


/* = Theme customization starts here
-------------------------------------------------------------- */



/* ============================================================
   FIX 2026-08-21: #scrollUp (stratusx theme back-to-top) overlaps
   the green WhatsApp FAB (#simple-chat-button--container) in the
   bottom-right corner on ALL viewports (both fixed bottom-right).
   Ported from staging (2026-08-11 fix, Wilson-approved 2026-08-21).
   Decision: keep WhatsApp bottom-most (conversion priority),
   stack back-to-top ABOVE it with explicit 15px gap.
   Parent app.css: #scrollUp { bottom:18px; right:18px; }
   WhatsApp: 60px @ bottom:20px right:20px -> occupies 20-80px.
   scrollUp: 50px -> new bottom: 80+15 = 95px.
   ============================================================ */
#scrollUp {
    bottom: 95px !important;
    right: 25px !important;
}


/* ============================================================
   FIX 2026-08-21: Elementor toggle FAQ (v2 - flex + nowrap fix).
   v1 (padding-left) aligned wrapped lines but blog pages inside
   .entry-content were truncated by stratusx app.css `.entry-content
   a { white-space:nowrap }`. v2: white-space:normal overrides that,
   and the tab-title becomes flex (icon + title flex items, float
   removed, icon top-aligned) so every wrapped line aligns at the
   title box edge on ALL pages (also fixes a float line-box offset
   seen on 個案分享 page). Applies to all toggle FAQ widgets.
   ============================================================ */
.elementor-toggle .elementor-tab-title {
    display: flex;
    align-items: flex-start;
}
.elementor-toggle .elementor-tab-title .elementor-toggle-icon {
    float: none;
    flex-shrink: 0;
    margin-right: 10px;
}
.elementor-toggle .elementor-tab-title .elementor-toggle-title {
    display: block;
    white-space: normal;
}


/* ============================================================
   FIX 2026-10-16: 老友新聞 grid cover「超出 size 自動剪裁」(JOEY 2026-10-16).
   Root cause: th-widget-pack blog2.css only sets
   .thmv-grid-img img { width:100% } — no height/aspect constraint.
   Featured images not 16:9 (8739=2560x1707 3:2, 8720=780x557 1.4,
   8724=640x335 1.91) render at native ratio -> cover taller than
   row-mates, titles/了解詳情 stagger, grid rows uneven.
   Fix: lock every thmv grid cover box to 16:9 with object-fit:cover
   (centred auto-crop). Pure display-layer — no DB/media re-upload;
   covers that exceed the box get trimmed, none distort (cover, not fill).
   Browsers without aspect-ratio support fall back to current behaviour.
   ============================================================ */
.thmv-blog-post .thmv-grid-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}