/* ===================================================== Majalla — Heading Widget · Style 1 "Modern Editorial Banner" ===================================================== */ /* Force full width on Elementor's wrapper too */ .elementor-widget-react-heading, .elementor-widget-react-heading > .elementor-widget-container { width: 100%; } /* Doubled class + body.rtl variant + !important on the structural properties so theme.css and rtl.css cannot break the layout. */ /* Same specificity (30) as Elementor's wrapper selector. The Elementor inline styles load AFTER this file in , so user customizations that target the same property win via source order. */ .react-heading.style1.style1 { /* Structural — these are never user-customizable, so !important is fine */ display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; position: relative !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; margin: 0 !important; /* Padding needs !important so the rtl.css legacy rule (specificity 31) cannot reset it. User Elementor control also outputs !important, so source order makes user win. */ padding-block: 10px !important; padding-inline-start: 18px !important; padding-inline-end: 10px !important; /* Defaults — user controls override via source order (no !important) */ gap: 14px; background: var(--color-primary, #1e3a8a); color: #fff; border-radius: 0; line-height: 1.2; } /* Specific override for the rtl.css side-bar (`border-right: 4px solid`) that the new design doesn't want. Higher specificity beats rtl.css without using !important. */ body.rtl .react-heading.style1.style1 { border-right: 0; border-left: 0; } .react-heading.style1.style1 { border: 0; } /* Subtle top inner-highlight for depth */ .react-heading.style1.style1::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.22); pointer-events: none; } /* Bottom gold accent strip — fades on the edges */ .react-heading.style1.style1::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, transparent 0%, #fbbf24 20%, #f59e0b 50%, #fbbf24 80%, transparent 100% ); pointer-events: none; } /* ─── Title (now an link to category) ────────── */ .react-heading.style1.style1 .rt-heading-text, .react-heading.style1.style1 a.rt-heading-text { position: relative; display: inline-flex; align-items: center; color: #fff !important; font-weight: 800; font-size: 17px; letter-spacing: -0.2px; padding-inline-start: 14px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; text-decoration: none !important; transition: opacity .2s ease; } .react-heading.style1.style1 a.rt-heading-text:hover { color: #fff !important; opacity: 0.9; text-decoration: none !important; } /* Vertical gold accent bar before the title */ .react-heading.style1.style1 .rt-heading-text::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 4px; inset-block-end: 4px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #fbbf24, #f59e0b); } /* ─── CTA — angular outlined button ──────────────── */ .react-heading.style1.style1 .rt-heading-cta { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto !important; padding: 5px 14px !important; color: #fff !important; background: transparent; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 0 !important; text-decoration: none !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.2px; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .react-heading.style1.style1 .rt-heading-cta:hover { background: #ffffff !important; color: var(--color-primary, #1e3a8a) !important; border-color: #ffffff !important; transform: translateY(-1px); } .react-heading.style1.style1 .rt-heading-cta:active { transform: translateY(0); } .react-heading.style1.style1 .rt-heading-cta-icon { font-size: 14px; line-height: 1; transition: transform .25s ease; } /* RTL: flip chevron + slide on hover */ body.rtl .react-heading.style1.style1 .rt-heading-cta-icon { transform: scaleX(-1); } body.rtl .react-heading.style1.style1 .rt-heading-cta:hover .rt-heading-cta-icon { transform: scaleX(-1) translateX(-3px); } /* LTR: slide chevron right on hover */ body:not(.rtl) .react-heading.style1.style1 .rt-heading-cta:hover .rt-heading-cta-icon { transform: translateX(3px); } /* ─── Mobile ─────────────────────────────────────── */ @media (max-width: 600px) { .react-heading.style1.style1, body.rtl .react-heading.style1.style1 { padding-block: 8px !important; padding-inline-start: 14px !important; padding-inline-end: 8px !important; gap: 10px !important; } .react-heading.style1.style1 .rt-heading-text, .react-heading.style1.style1 a.rt-heading-text { font-size: 14px; padding-inline-start: 10px; } .react-heading.style1.style1 .rt-heading-text::before { width: 2px; inset-block-start: 3px; inset-block-end: 3px; } .react-heading.style1.style1 .rt-heading-cta { padding: 4px 10px !important; font-size: 11px !important; gap: 5px !important; } .react-heading.style1.style1 .rt-heading-cta-text { display: none; } }