/**
 * Body-class-scoped patches to Blocksy's own container/sidebar mechanics — not this
 * theme's design, so kept separate from component/section styles.
 */

/* Blog posts: .article-container already supplies side padding, so the form's own
   inline cap and padding are dropped here to avoid doubling it up. */
body.single-post .home-contact-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.single-post .home-contact-section > div {
    max-width: none !important;
    margin: 0 !important;
}

/* Blog posts, mobile: Blocksy's .ct-container centers via margin, not padding, so it
   can't be reached with a padding override — reset its own --theme-container-width var
   instead for a flat 16px side margin. Sidebar is already hidden at this width. */
@media (max-width: 768px) {
    body.single-post .ct-container {
        --theme-container-width: calc(100% - 2rem);
    }
}

/* About Us page only, mobile: this page's Gutenberg content is sized by --theme-block-width
   instead of .ct-container. Same fix as above, for a consistent 16px band margin. Keyed to
   the post ID directly since it's the only page built from real Gutenberg content on this
   site -- re-point this if the page is ever swapped for another post (see the about-us/
   about-us-old swap done 2026-08-26; this was left stale pointing at the old post ID 781
   until caught here). */
@media (max-width: 768px) {
    body.page-id-1158 {
        --theme-container-width: calc(100% - 2rem);
    }
}

/* .ct-container-full is a cross-axis-stretched item of <main class="page-layout">
   (display:flex; flex-direction:column), sized implicitly (width:auto + align-items:
   normal/stretch) rather than a definite width. That implicit stretch-fit calculation
   only ever gets exercised on a page with real Gutenberg content (again, only About
   Us) and is provably unreliable on a real device: repeated loads measured the same
   element at four different widths (1238/1280/1342/1027px) purely from page-load
   timing jitter -- almost certainly the Lora display font's async swap triggering a
   reflow that the browser doesn't always re-settle back onto the real 393px cross
   size, which also explains why manually scrolling was enough to "fix" it (scrolling
   forces a fresh layout pass). min-width:0 alone didn't help (verified) since the
   underlying bug is stale/unsettled stretch sizing, not a min-content floor. An
   explicit width:100% replaces that implicit stretch calculation with a plain,
   always-freshly-resolved percentage that isn't subject to the same staleness. */
.ct-container-full {
    width: 100%;
    min-width: 0;
}

.home-contact-title {
    font-family: 'Lora', serif;
    font-size: 2.3rem;
    color: #0F2C4C;
    margin: 0 0 0.8rem 0;
}

.home-contact-subtitle {
    font-size: 1.05rem;
    color: #4A6A8A;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .home-contact-section {
        padding: 3rem 1rem !important;
    }
    .home-contact-title {
        font-size: 1.9rem;
    }
    .home-contact-subtitle {
        font-size: 0.98rem;
    }
}

@media (max-width: 480px) {
    .home-contact-section {
        padding: 2.25rem 1rem !important;
    }
    .home-contact-title {
        font-size: 1.55rem;
    }
    .home-contact-subtitle {
        font-size: 0.92rem;
    }
}

/* Professional RBM-Style Contact / Technical Request Form.
   Restyles real Fluent Forms output (rbm-input/-select/-textarea classes set on the
   fields in wp-admin, see vosges_quote_form_shortcode()) — not hand-built markup.
   !important throughout since Fluent Forms' own CSS loads after this file and would
   otherwise win ties on load order alone. */
.rbm-form-container {
    background: #FFFFFF !important;
    border: 1px solid #D1E4F5 !important;
    border-radius: 4px !important;
    padding: 2.5rem !important;
    box-shadow: 0 10px 30px rgba(15, 44, 76, 0.08) !important;
}

.rbm-form-container .ff-el-group,
.rbm-form-container .ff-t-container {
    margin-bottom: 1.5rem !important;
}

.rbm-form-container .ff-el-group:last-child,
.rbm-form-container .ff-t-container:last-child {
    margin-bottom: 0 !important;
}

.rbm-form-container .ff-t-container {
    display: flex;
    gap: 1.5rem;
}

.rbm-form-container .ff-t-cell {
    flex: 1;
}

.rbm-form-container .ff-t-cell .ff-el-group {
    margin-bottom: 0 !important;
}

.rbm-form-container .ff-el-input--label label {
    display: block;
    font-family: var(--vosges-font-body) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0F2C4C !important;
    margin-bottom: 0.4rem;
}

.rbm-form-container .ff-el-form-control {
    width: 100% !important;
    padding: 0.8rem 1rem !important;
    border: 1px solid #D1E4F5 !important;
    border-radius: 4px !important;
    font-family: var(--vosges-font-body) !important;
    font-size: 14.5px !important;
    color: #0F2C4C !important;
    background-color: #F8FAFC !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rbm-form-container .ff-el-form-control:focus {
    outline: none !important;
    border-color: var(--rect-blue-3) !important;
    background-color: #FFFFFF !important;
}

/* Redraws the select arrow, stripped by overriding FF's own appearance above —
   same icon as the header's dropdowns. */
.rbm-form-container select.ff-el-form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%230F63A1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.85rem center !important;
    background-size: 16px !important;
    padding-inline-end: 2.5rem !important;
}

.rbm-form-container .ff_submit_btn_wrapper {
    text-align: start;
}

.rbm-form-container .ff-btn-submit {
    width: 100% !important;
    justify-content: center !important;
    padding: 1rem !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--vosges-font-body) !important;
    background-color: var(--rect-blue-4) !important;
    border: none !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
}

.rbm-form-container .ff-btn-submit:hover {
    background-color: var(--rect-blue-3) !important;
}

@media (max-width: 768px) {
    .rbm-form-container {
        padding: 1.5rem !important;
    }
}

/* Blocksy's real post sidebar (Appearance -> Widgets), restyled to match the
   "Related Technical Reports" card look. Targets its fixed #sidebar .ct-sidebar
   .ct-widget markup only — Customizer position/width controls stay untouched. */
body.single-post #sidebar .ct-sidebar {
    position: sticky;
    top: 86px;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

body.single-post #sidebar .ct-widget {
    background: #FFFFFF;
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    padding: 1.6rem 1.4rem;
    box-shadow: 0 6px 20px rgba(15, 44, 76, 0.03);
}

body.single-post #sidebar .ct-widget .wp-block-heading,
body.single-post #sidebar .ct-widget .widget-title {
    font-family: var(--vosges-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F2C4C;
    margin: 0 0 0.9rem 0;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #2D99EB;
}

body.single-post #sidebar .ct-widget a {
    color: #0F2C4C;
    transition: color 0.2s ease;
}

body.single-post #sidebar .ct-widget a:hover {
    color: #2D99EB;
}

.problem-media-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.problem-media-card {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #D1E4F5;
    box-shadow: 0 4px 14px rgba(15, 44, 76, 0.06);
    background: #F5F9FD;
}

.problem-media-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.problem-media-caption {
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    color: #4A6A8A;
    font-weight: 600;
    border-top: 1px solid #D1E4F5;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.problem-badge-pill {
    background: #FEE2E2;
    color: #DC2626;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
}

/* GreenShift's marquee (activateMarquee block option) duplicates its content into two
   .gspb_marquee_content divs placed side by side and slides the whole strip leftward --
   the second copy is only positioned correctly for a seamless loop when the flex
   container lays children out left-to-right. On an RTL page (html[dir="rtl"]), the
   container's flex-direction:row visually reverses child order, so the duplicate lands
   on the wrong side and the loop visibly resets after one pass instead of scrolling
   seamlessly (confirmed on the AR homepage's logo marquee). Forcing direction:ltr on
   the marquee container only restores GreenShift's expected geometry -- safe since this
   widget's content (logos/images) has no reading-direction semantics of its own. */
html[dir="rtl"] .gspb_container.marquee_enabled {
    direction: ltr;
}