.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-6200 .elementor-element.elementor-element-5d4864{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.8;--padding-top:145px;--padding-bottom:145px;--padding-left:40px;--padding-right:40px;}.elementor-6200 .elementor-element.elementor-element-5d4864:not(.elementor-motion-effects-element-type-background), .elementor-6200 .elementor-element.elementor-element-5d4864 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://gpuservercase.com/wp-content/uploads/2024/09/blog3.avif");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6200 .elementor-element.elementor-element-5d4864::before, .elementor-6200 .elementor-element.elementor-element-5d4864 > .elementor-background-video-container::before, .elementor-6200 .elementor-element.elementor-element-5d4864 > .e-con-inner > .elementor-background-video-container::before, .elementor-6200 .elementor-element.elementor-element-5d4864 > .elementor-background-slideshow::before, .elementor-6200 .elementor-element.elementor-element-5d4864 > .e-con-inner > .elementor-background-slideshow::before, .elementor-6200 .elementor-element.elementor-element-5d4864 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-astglobalcolor2 );--background-overlay:'';}.elementor-widget-heading .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-6200 .elementor-element.elementor-element-25f8f498 > .elementor-widget-container{margin:0px 0px 20px 0px;}.elementor-6200 .elementor-element.elementor-element-25f8f498{text-align:center;}.elementor-6200 .elementor-element.elementor-element-25f8f498 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:33px;font-weight:700;text-transform:capitalize;line-height:40px;color:#FFFFFF;}.elementor-widget-post-info .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-post-info .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-post-info .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-post-info .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-post-info .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-post-info .elementor-icon-list-text, .elementor-widget-post-info .elementor-icon-list-text a{color:var( --e-global-color-secondary );}.elementor-widget-post-info .elementor-icon-list-item{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-6200 .elementor-element.elementor-element-34008c0a .elementor-icon-list-icon i{color:#FFFFFF;font-size:14px;}.elementor-6200 .elementor-element.elementor-element-34008c0a .elementor-icon-list-icon svg{fill:#FFFFFF;--e-icon-list-icon-size:14px;}.elementor-6200 .elementor-element.elementor-element-34008c0a .elementor-icon-list-icon{width:14px;}.elementor-6200 .elementor-element.elementor-element-34008c0a .elementor-icon-list-text, .elementor-6200 .elementor-element.elementor-element-34008c0a .elementor-icon-list-text a{color:#FFFFFF;}.elementor-widget-section .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-section .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-6200 .elementor-element.elementor-element-2c604e94 > .elementor-container{max-width:1097px;}.elementor-6200 .elementor-element.elementor-element-2c604e94{margin-top:0px;margin-bottom:0px;padding:10px 20px 60px 20px;}.elementor-6200 .elementor-element.elementor-element-1f98d309 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-6200 .elementor-element.elementor-element-65939eb6{margin-top:0px;margin-bottom:0px;padding:30px 111px 40px 151px;}.elementor-6200 .elementor-element.elementor-element-82f1e41 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-6200 .elementor-element.elementor-element-82f1e41 > .elementor-element-populated{border-style:none;padding:33px 27px 33px 33px;}.elementor-6200 .elementor-element.elementor-element-82f1e41 > .elementor-element-populated, .elementor-6200 .elementor-element.elementor-element-82f1e41 > .elementor-element-populated > .elementor-background-overlay, .elementor-6200 .elementor-element.elementor-element-82f1e41 > .elementor-background-slideshow{border-radius:0px 0px 0px 0px;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-shortcode .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-shortcode .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-6200 .elementor-element.elementor-element-583bc85d{--divider-border-style:solid;--divider-color:#D3D3D3;--divider-border-width:1px;}.elementor-6200 .elementor-element.elementor-element-583bc85d .elementor-divider-separator{width:100%;}.elementor-6200 .elementor-element.elementor-element-583bc85d .elementor-divider{padding-block-start:29px;padding-block-end:29px;}.elementor-widget-tl-post-fatured-image .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-tl-post-fatured-image .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-6200 .elementor-element.elementor-element-5d869c5 > .elementor-widget-container{margin:0px 0px 30px 0px;}.elementor-widget-theme-post-content .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-theme-post-content .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-eael-info-box .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-eael-info-box .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-6200 .elementor-element.elementor-element-a62e15b > .elementor-widget-container{margin:30px 0px 50px 0px;}.elementor-6200 .elementor-element.elementor-element-a62e15b .eael-infobox .infobox-icon{align-self:baseline;}.elementor-6200 .elementor-element.elementor-element-a62e15b .eael-infobox .infobox-icon img{width:435px;}.elementor-6200 .elementor-element.elementor-element-a62e15b .eael-infobox.icon-on-left .infobox-icon{width:435px;}.elementor-6200 .elementor-element.elementor-element-a62e15b .eael-infobox.icon-on-right .infobox-icon{width:435px;}.elementor-6200 .elementor-element.elementor-element-a62e15b .eael-infobox .infobox-content .title{color:#4d4d4d;font-size:22px;}.elementor-6200 .elementor-element.elementor-element-a62e15b .eael-infobox .infobox-content p{color:#4d4d4d;}.elementor-6200 .elementor-element.elementor-element-a62e15b .eael-infobox:hover .infobox-content h4{transition:100ms;}.elementor-6200 .elementor-element.elementor-element-a62e15b .eael-infobox:hover .infobox-content p{transition:100ms;}.elementor-6200 .elementor-element.elementor-element-6f0d1c77 > .elementor-widget-container{padding:0px 0px 10px 0px;}.elementor-6200 .elementor-element.elementor-element-6f0d1c77 .elementor-heading-title{font-weight:700;color:var( --e-global-color-astglobalcolor2 );}.elementor-widget-share-buttons .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-share-buttons .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-6200 .elementor-element.elementor-element-6a044d90{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}.elementor-widget-eael-fluentform .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-eael-fluentform .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-eael-fluentform .eael-fluentform-description{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-eael-fluentform .ff-el-progress-status{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-eael-fluentform .ff-el-progress-bar span{color:var( --e-global-color-primary );}.elementor-widget-eael-fluentform .step-nav button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-6200 .elementor-element.elementor-element-371bf79a > .elementor-widget-container{margin:30px 0px 0px 0px;}.elementor-6200 .elementor-element.elementor-element-371bf79a .eael-fluentform-title{font-weight:700;}.elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper .ff-el-group a{color:#0E172D;}.elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper .ff-el-group textarea, .elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper .ff-el-group select{color:#0E172D;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0E172D;border-radius:0px 0px 0px 0px;text-indent:6px;font-family:"Source Sans Pro", Sans-serif;font-size:1rem;font-weight:normal;line-height:1.5em;}.elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper .ff-el-group select{height:50px;}.elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper .ff-el-group textarea{height:148px;}.elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper .ff-el-group{margin-bottom:12px;}.elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper .ff-el-group input::-webkit-input-placeholder, .elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper .ff-el-group textarea::-webkit-input-placeholder{color:#7A7A7A;}.elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper .ff-el-group .ff-btn-submit{background-color:#FFFFFF !important;color:#0E172D !important;border-style:solid;border-width:0px 0px 1px 0px;border-color:#0E172D;border-radius:0px 0px 0px 0px;padding:0px 0px 5px 0px;margin-top:35px;font-family:"Source Sans Pro", Sans-serif;font-size:1rem;font-weight:500;line-height:1.5em;}.elementor-6200 .elementor-element.elementor-element-371bf79a .eael-contact-form.eael-fluent-form-wrapper .ff-el-group .ff-btn-submit:hover{border-color:#FFD200;}.elementor-6200 .elementor-element.elementor-element-79621f02 > .elementor-widget-container{margin:30px 0px 40px 0px;padding:0px 0px 0px 0px;}.elementor-6200 .elementor-element.elementor-element-79621f02.elementor-element{--flex-grow:0;--flex-shrink:0;}.eael-reading-progress-wrap .eael-reading-progress{height:5px !important;}.eael-reading-progress-wrap .eael-reading-progress .eael-reading-progress-fill{height:5px !important;background-color:#1fd18e;transition:width 50ms ease;}@media(max-width:1024px) and (min-width:768px){.elementor-6200 .elementor-element.elementor-element-82f1e41{width:100%;}}@media(max-width:1024px){.elementor-6200 .elementor-element.elementor-element-5d4864{--padding-top:150px;--padding-bottom:80px;--padding-left:32px;--padding-right:32px;}.elementor-6200 .elementor-element.elementor-element-25f8f498 .elementor-heading-title{font-size:42px;line-height:52px;}.elementor-6200 .elementor-element.elementor-element-2c604e94{padding:60px 60px 60px 60px;}.elementor-6200 .elementor-element.elementor-element-65939eb6{padding:0px 0px 24px 0px;}.elementor-6200 .elementor-element.elementor-element-82f1e41 > .elementor-element-populated{padding:0px 10px 0px 0px;} .elementor-6200 .elementor-element.elementor-element-6a044d90{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}}@media(max-width:767px){.elementor-6200 .elementor-element.elementor-element-5d4864{--padding-top:120px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-6200 .elementor-element.elementor-element-25f8f498 .elementor-heading-title{font-size:28px;line-height:38px;}.elementor-6200 .elementor-element.elementor-element-2c604e94{padding:11px 55px 11px 33px;}.elementor-6200 .elementor-element.elementor-element-82f1e41 > .elementor-element-populated{padding:0px 0px 40px 0px;}.elementor-6200 .elementor-element.elementor-element-1f7cf310 > .elementor-widget-container{padding:0px 0px 0px 7px;}.elementor-6200 .elementor-element.elementor-element-a62e15b .eael-infobox .infobox-icon img{width:500px;}.elementor-6200 .elementor-element.elementor-element-a62e15b .eael-infobox.icon-on-left .infobox-icon{width:500px;}.elementor-6200 .elementor-element.elementor-element-a62e15b .eael-infobox.icon-on-right .infobox-icon{width:500px;} .elementor-6200 .elementor-element.elementor-element-6a044d90{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}.elementor-6200 .elementor-element.elementor-element-371bf79a > .elementor-widget-container{margin:29px 0px 0px 0px;}.elementor-6200 .elementor-element.elementor-element-79621f02{width:var( --container-widget-width, 243.8px );max-width:243.8px;--container-widget-width:243.8px;--container-widget-flex-grow:0;}}@media(min-width:1025px){.elementor-6200 .elementor-element.elementor-element-5d4864:not(.elementor-motion-effects-element-type-background), .elementor-6200 .elementor-element.elementor-element-5d4864 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}/* Start custom CSS for theme-post-content, class: .elementor-element-1f7cf310 *//* ============================================================ SINGLE POST STYLES — Strong-Coverage Production Version Fonts: Inter (primary) + Roboto (fallback) Responsive tables: horizontal scroll only, applied across ALL table sources (Gutenberg, Classic Editor, plugins, raw HTML) ============================================================ */ /* ------------------------------------------------------------ 1. FONT IMPORT ------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;700&display=swap'); /* ------------------------------------------------------------ 2. CSS CUSTOM PROPERTIES ------------------------------------------------------------ */ .single-post { /* Font stack */ --sp-font: 'Inter', 'Roboto', sans-serif; /* Text colors */ --sp-title: #202679; --sp-heading: #0A122B; --sp-heading-dark: #000000; --sp-text: #000000; /* Table border */ --sp-border-strong: #BFC7D1; /* Surface */ --sp-surface: transparent; /* Spacing scale */ --sp-gap-sm: 8px; --sp-gap-md: 16px; --sp-gap-lg: 24px; /* Radius */ --sp-radius: 10px; } /* ------------------------------------------------------------ 3. BASE POST STYLES ------------------------------------------------------------ */ .single-post { font-family: var(--sp-font); font-size: 18px; line-height: 1.6; color: var(--sp-text); } /* Paragraph only */ .single-post p { font-size: 16px; color: #000000; } /* ------------------------------------------------------------ 4. HEADINGS ------------------------------------------------------------ */ .single-post .entry-title, .single-post h2, .single-post h3, .single-post h4 { font-family: var(--sp-font); line-height: 1.3; } /* Post title */ .single-post .entry-title { font-size: 43px; font-weight: 700; color: var(--sp-title); margin-bottom: var(--sp-gap-md); } /* H2 */ .single-post h2 { font-size: 26px; font-weight: 700; color: var(--sp-heading); margin: 20px 0 10px; } /* H3 */ .single-post h3 { font-size: 22px; font-weight: 600; color: var(--sp-heading-dark); margin: 15px 0 var(--sp-gap-sm); } /* H4 */ .single-post h4 { font-size: 20px; font-weight: 500; color: var(--sp-heading-dark); margin: 15px 0 var(--sp-gap-sm); } /* ============================================================ 5. TABLES — STRONG-COVERAGE RESPONSIVE LOGIC ------------------------------------------------------------ This section targets EVERY table source that can appear inside a single post. Each rule block is labeled with the source it covers so you know exactly what it handles. ============================================================ */ /* ------------------------------------------------------------ 5a. SCROLL WRAPPERS — the outer container that scrolls ------------------------------------------------------------ Covered sources: - Gutenberg / Block Editor: .wp-block-table, figure.wp-block-table - Classic Editor figures: figure.wp-block-table (legacy blocks) - Plugin table wrappers: .tablepress-scroll-wrapper, .tablepress-wrapper, .table-responsive (Bootstrap-style plugins), .wp-block-flexible-table-block-table - Generic helper: .sp-table-scroll (add manually if needed) These wrappers become true horizontal scroll containers. When the inner table is wider than the wrapper, the wrapper scrolls sideways instead of squeezing columns. ------------------------------------------------------------ */ .single-post .wp-block-table, .single-post figure.wp-block-table, .single-post .wp-block-flexible-table-block-table, .single-post .tablepress-scroll-wrapper, .single-post .tablepress-wrapper, .single-post .table-responsive, .single-post .sp-table-scroll, #post-content .wp-block-table, #post-content figure.wp-block-table, #post-content .wp-block-flexible-table-block-table, #post-content .tablepress-scroll-wrapper, #post-content .tablepress-wrapper, #post-content .table-responsive, #post-content .sp-table-scroll { position: relative; display: block; width: 100%; max-width: 100%; margin: var(--sp-gap-lg) 0; border-radius: 0; border: none; box-shadow: none; background: transparent; /* Core responsive behavior: horizontal scroll only. !important overrides theme/plugin overflow rules. */ overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; /* Firefox: slim scrollbar */ } /* ------------------------------------------------------------ 5b. SLIM SCROLLBAR (WebKit) — applies to every wrapper above ------------------------------------------------------------ */ .single-post .wp-block-table::-webkit-scrollbar, .single-post figure.wp-block-table::-webkit-scrollbar, .single-post .wp-block-flexible-table-block-table::-webkit-scrollbar, .single-post .tablepress-scroll-wrapper::-webkit-scrollbar, .single-post .tablepress-wrapper::-webkit-scrollbar, .single-post .table-responsive::-webkit-scrollbar, .single-post .sp-table-scroll::-webkit-scrollbar, #post-content .wp-block-table::-webkit-scrollbar, #post-content figure.wp-block-table::-webkit-scrollbar, #post-content .wp-block-flexible-table-block-table::-webkit-scrollbar, #post-content .tablepress-scroll-wrapper::-webkit-scrollbar, #post-content .tablepress-wrapper::-webkit-scrollbar, #post-content .table-responsive::-webkit-scrollbar, #post-content .sp-table-scroll::-webkit-scrollbar { height: 8px; } .single-post .wp-block-table::-webkit-scrollbar-thumb, .single-post figure.wp-block-table::-webkit-scrollbar-thumb, .single-post .wp-block-flexible-table-block-table::-webkit-scrollbar-thumb, .single-post .tablepress-scroll-wrapper::-webkit-scrollbar-thumb, .single-post .tablepress-wrapper::-webkit-scrollbar-thumb, .single-post .table-responsive::-webkit-scrollbar-thumb, .single-post .sp-table-scroll::-webkit-scrollbar-thumb, #post-content .wp-block-table::-webkit-scrollbar-thumb, #post-content figure.wp-block-table::-webkit-scrollbar-thumb, #post-content .wp-block-flexible-table-block-table::-webkit-scrollbar-thumb, #post-content .tablepress-scroll-wrapper::-webkit-scrollbar-thumb, #post-content .tablepress-wrapper::-webkit-scrollbar-thumb, #post-content .table-responsive::-webkit-scrollbar-thumb, #post-content .sp-table-scroll::-webkit-scrollbar-thumb { background-color: var(--sp-border-strong); border-radius: 4px; } /* ------------------------------------------------------------ 5c. WRAPPED TABLES — tables that DO sit inside a wrapper ------------------------------------------------------------ Covered sources: - Gutenberg tables inside figure.wp-block-table - Flexible Table Block tables - TablePress tables inside their scroll wrappers Let each table grow to its natural width so columns keep their size. The wrapper (5a) handles the sideways scroll. ------------------------------------------------------------ */ .single-post .wp-block-table table, .single-post figure.wp-block-table table, .single-post .wp-block-flexible-table-block-table table, .single-post .tablepress-scroll-wrapper table, .single-post .tablepress-wrapper table, .single-post .table-responsive table, .single-post .sp-table-scroll table, #post-content .wp-block-table table, #post-content figure.wp-block-table table, #post-content .wp-block-flexible-table-block-table table, #post-content .tablepress-scroll-wrapper table, #post-content .tablepress-wrapper table, #post-content .table-responsive table, #post-content .sp-table-scroll table { display: table; width: max-content !important; min-width: 100% !important; margin: 0; border: none; border-radius: 0; box-shadow: none; background: transparent; } /* ------------------------------------------------------------ 5d. UNIVERSAL FALLBACK — bare tables with NO wrapper ------------------------------------------------------------ Covered sources: - Classic Editor plain pasted into content - Plugin tables output without a scroll wrapper - Any raw HTML
inside .single-post / #post-content `display: block` turns the table element itself into the scroll container, so wide tables scroll sideways even when there is no parent wrapper to rely on. This is the key safety net that guarantees responsiveness everywhere. ------------------------------------------------------------ */ .single-post > table, .single-post p > table, .single-post div > table, .single-post table:not(.wp-block-table table):not(figure.wp-block-table table), #post-content > table, #post-content p > table, #post-content div > table { display: block; width: 100%; max-width: 100%; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* Slim scrollbar for bare (unwrapped) tables */ .single-post > table::-webkit-scrollbar, .single-post p > table::-webkit-scrollbar, .single-post div > table::-webkit-scrollbar, #post-content > table::-webkit-scrollbar, #post-content p > table::-webkit-scrollbar, #post-content div > table::-webkit-scrollbar { height: 8px; } .single-post > table::-webkit-scrollbar-thumb, .single-post p > table::-webkit-scrollbar-thumb, .single-post div > table::-webkit-scrollbar-thumb, #post-content > table::-webkit-scrollbar-thumb, #post-content p > table::-webkit-scrollbar-thumb, #post-content div > table::-webkit-scrollbar-thumb { background-color: var(--sp-border-strong); border-radius: 4px; } /* ------------------------------------------------------------ 5e. BASE TABLE LOOK — visual styling for ALL tables ------------------------------------------------------------ Covered sources: every table inside .single-post / #post-content regardless of origin. Keeps the clean, border-focused design. ------------------------------------------------------------ */ .single-post table, #post-content table { border-collapse: collapse; border-spacing: 0; margin: var(--sp-gap-lg) 0; font-family: var(--sp-font); font-size: 15px; line-height: 1.55; color: var(--sp-text); background: transparent; border: 2px solid var(--sp-border-strong); border-radius: 0; box-shadow: none; } /* Cell base behavior */ .single-post table th, .single-post table td, #post-content table th, #post-content table td { white-space: normal; height: auto; } /* Table head */ .single-post table thead, #post-content table thead { background-color: transparent; } .single-post table th, #post-content table th { padding: 10px 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sp-heading-dark); background-color: transparent; text-align: left; vertical-align: middle; border: 1.5px solid var(--sp-border-strong); white-space: nowrap; /* keep headers on one line while scrolling */ } /* Table body cells */ .single-post table td, #post-content table td { padding: 9px 14px; border: 1.5px solid var(--sp-border-strong); vertical-align: top; background: transparent; } /* First column */ .single-post table tbody td:first-child, #post-content table tbody td:first-child { font-weight: 600; color: var(--sp-heading); } /* Keep final row border consistent */ .single-post table tbody tr:last-child td, #post-content table tbody tr:last-child td { border-bottom: 1.5px solid var(--sp-border-strong); } /* Remove zebra striping (overrides theme/plugin striping) */ .single-post table tbody tr:nth-child(even), #post-content table tbody tr:nth-child(even) { background-color: transparent !important; } /* Remove hover effect (overrides theme/plugin hover) */ .single-post table tbody tr, #post-content table tbody tr { transition: none; } .single-post table tbody tr:hover, #post-content table tbody tr:hover { background-color: transparent !important; } /* Caption */ .single-post table caption, #post-content table caption { caption-side: top; text-align: left; font-weight: 600; font-size: 15px; color: var(--sp-title); margin-bottom: 10px; } /* ------------------------------------------------------------ 6. RESPONSIVE BREAKPOINT (≤ 768px) Smaller fonts and tighter padding for phones and tablets. Wide tables still scroll horizontally via the wrappers and the universal fallback above. ------------------------------------------------------------ */ @media (max-width: 768px) { .single-post { font-size: 16px; } .single-post p { font-size: 15px; } .single-post .entry-title { font-size: 32px; } .single-post h2 { font-size: 22px; } .single-post h3 { font-size: 19px; } .single-post h4 { font-size: 18px; } /* Keep horizontal scroll as the mobile default for every wrapper source so table structure stays intact. */ .single-post .wp-block-table, .single-post figure.wp-block-table, .single-post .wp-block-flexible-table-block-table, .single-post .tablepress-scroll-wrapper, .single-post .tablepress-wrapper, .single-post .table-responsive, .single-post .sp-table-scroll, #post-content .wp-block-table, #post-content figure.wp-block-table, #post-content .wp-block-flexible-table-block-table, #post-content .tablepress-scroll-wrapper, #post-content .tablepress-wrapper, #post-content .table-responsive, #post-content .sp-table-scroll { margin: var(--sp-gap-md) 0; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .single-post table, #post-content table { font-size: 13.5px; line-height: 1.5; margin: var(--sp-gap-md) 0; } .single-post table th, #post-content table th { padding: 8px 10px; font-size: 11.5px; } .single-post table td, #post-content table td { padding: 7px 10px; } .single-post table caption, #post-content table caption { font-size: 14px; } } /* ------------------------------------------------------------ 7. POST CONTENT TEXT COLOR FIX Only normalize body text inside #post-content Do not affect tables ------------------------------------------------------------ */ #post-content p, #post-content li, #post-content ul, #post-content ol, #post-content blockquote, #post-content figcaption { color: #000000; } /* Ensure inline text keeps consistent color */ #post-content p strong, #post-content p em, #post-content p span, #post-content li strong, #post-content li em, #post-content li span, #post-content blockquote strong, #post-content blockquote em, #post-content blockquote span { color: inherit; }/* End custom CSS */