/**
 * Swift Blocks — Frontend Styles
 * Sourced from the RE Component Library page (Elementor Custom Code → Combined Blog Styles).
 * These styles power the .re-* classes used by every Swift Block.
 */

:root { --re-dark-blue: #154B75; --re-light-blue: #4698CB; --re-cyan: #0FFCBE; --re-gray-light: #E0E3E2; --re-teal-soft: #C1E0EA; --re-text: #363A42; --re-text-muted: #6B7280; --re-white: #ffffff; --re-border: #D1D5DB; --re-shadow: 0 4px 20px rgba(21, 75, 117, 0.08); --re-radius: 4px; --re-font: 'Roboto', Arial, sans-serif; --single-container-width: 60%; --single-content-width: 60%; --single-sidebar-width: 0; --single-bg: #FFFFFF; --single-section-bg: #F8FAFC; --single-text-dark: #154B75; --single-text-body: #333333; --single-text-meta: #848685; --single-text-muted: #A7AE9E; --single-border: #E0E3E2; --single-border-focus: #4698CB; }

.re-pull-quote { text-align: center; border-right: none !important; border-left: none !important; border-image: initial !important; background: none !important; padding: 2rem 0px !important; border-top: 3px solid var(--re-cyan) !important; border-bottom: 3px solid var(--re-cyan) !important; margin: 2.5rem 0px !important; font-size: 22px !important; font-weight: 300 !important; color: var(--re-dark-blue) !important; line-height: 1.5 !important; font-style: italic !important; }
.re-table-wrap { overflow-x: auto; margin: 2rem 0px; border-radius: var(--re-radius); }
.re-table-wrap table { margin: 0px; min-width: 500px; }
.re-callout { padding: 1.5rem 1.75rem; border-radius: var(--re-radius); margin: 2rem 0px; border-left: 5px solid; font-size: 15px; line-height: 1.7; }
.re-callout p:last-child { margin-bottom: 0px; }

.re-callout-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; display: block; }
.re-callout--info { background-color: rgb(235, 245, 255); border-left-color: var(--re-light-blue); color: var(--re-text); }
.re-callout--info .re-callout-title { color: var(--re-dark-blue); }
.re-callout--tip { background-color: rgb(230, 253, 248); border-left-color: var(--re-cyan); color: var(--re-text); }
.re-callout--tip .re-callout-title { color: rgb(10, 124, 96); }
.re-callout--note { background-color: rgb(255, 251, 235); border-left-color: rgb(245, 158, 11); color: var(--re-text); }
.re-callout--note .re-callout-title { color: rgb(146, 64, 14); }

.re-callout--definition { background-color: var(--re-dark-blue); border-left-color: var(--re-cyan); color: var(--re-white); position: relative; overflow: hidden; }
.re-callout--definition .re-callout-title { color: var(--re-cyan); }
.re-callout--definition p { color: rgb(200, 223, 240); margin-bottom: 0px; }
.re-callout--stat { background-color: var(--re-gray-light); border-left-color: var(--re-dark-blue); text-align: left; }
.re-callout--stat .re-stat-number { font-size: 42px; font-weight: 700; color: var(--re-dark-blue); line-height: 1; display: block; margin-bottom: 0.25rem; }
.re-callout--stat .re-stat-label { font-size: 14px; color: var(--re-text-muted); font-weight: 600; }

.re-toc { background-color: var(--re-gray-light); border-top: 4px solid var(--re-dark-blue); padding: 1.5rem 2rem; margin: 2rem 0px; border-radius: var(--re-radius); }
.re-toc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--re-text-muted); margin-bottom: 1rem; display: block; }
.re-toc ol { counter-reset: toc-list 0; margin-bottom: 0px; }
.re-toc ol li { counter-increment: toc-list 1; padding-left: 1.75rem; margin-bottom: 0.4rem; font-size: 15px; }

.re-toc ol li::before { content: counter(toc-list); background-color: var(--re-light-blue); width: 1.25rem; height: 1.25rem; font-size: 10px; }
.re-toc ol li a { color: var(--re-dark-blue); font-weight: 600; text-decoration: none; }
.re-toc ol li a:hover { color: var(--re-light-blue); text-decoration: underline; }
.re-steps { list-style: none; padding: 0px; margin: 2rem 0px; counter-reset: re-steps 0; }
.re-steps li { display: flex; gap: 1.25rem; margin-bottom: 2rem; align-items: flex-start; padding-left: 0px !important; }
.re-steps li::before { display: none !important; }
.re-step-number { flex-shrink: 0; width: 40px; height: 40px; background-color: var(--re-dark-blue); color: var(--re-white); border-radius: 50%; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }

.re-step-content h4 { margin-top: 0px; margin-bottom: 0.25rem; color: var(--re-dark-blue); }
.re-step-content p { margin-bottom: 0px; color: var(--re-text-muted); font-size: 15px; }
.re-checklist { list-style: none; padding: 0px; margin: 1.5rem 0px; }
.re-checklist li { margin-bottom: 0.5rem; position: relative; padding-left: 2rem !important; }
.re-checklist li::before { position: absolute; left: 0px; top: 0px; color: var(--re-cyan); font-weight: 700; font-size: 16px; content: "✓" !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0px !important; }

.re-btn { display: inline-block; padding: 12px 28px; border-radius: var(--re-radius); font-family: var(--re-font); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: 0.2s; letter-spacing: 0.02em; line-height: 1.4; }
.re-btn--primary { background-color: var(--re-dark-blue); border-color: var(--re-dark-blue); color: var(--re-white) !important; }
.re-btn--primary:hover { background-color: rgb(13, 52, 86); border-color: rgb(13, 52, 86); text-decoration: none; color: var(--re-white) !important; }
.re-btn--secondary { background-color: var(--re-light-blue); border-color: var(--re-light-blue); color: var(--re-white) !important; }

.re-btn--secondary:hover { background-color: rgb(47, 120, 171); border-color: rgb(47, 120, 171); text-decoration: none; color: var(--re-white) !important; }
.re-btn--accent { background-color: var(--re-cyan); border-color: var(--re-cyan); color: var(--re-dark-blue) !important; }
.re-btn--accent:hover { background-color: rgb(0, 212, 160); border-color: rgb(0, 212, 160); text-decoration: none; }
.re-btn--outline { background-color: transparent; border-color: var(--re-dark-blue); color: var(--re-dark-blue) !important; }
.re-btn--outline:hover { background-color: var(--re-dark-blue); text-decoration: none; color: var(--re-white) !important; }
.re-btn--lg { padding: 16px 40px; font-size: 17px; }
.re-btn--full { width: 100%; text-align: center; display: block; }
.re-btn--download::before { content: "↓ "; font-weight: 900; }

.re-badge { display: inline-block; padding: 3px 10px; border-radius: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 6px; margin-bottom: 6px; }
.re-badge--blue { background-color: var(--re-dark-blue); color: var(--re-white); }
.re-badge--light-blue { background-color: var(--re-teal-soft); color: var(--re-dark-blue); }
.re-badge--cyan { background-color: var(--re-cyan); color: var(--re-dark-blue); }
.re-badge--gray { background-color: var(--re-gray-light); color: var(--re-text); }
.re-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 13px; color: var(--re-text-muted); margin: 0.75rem 0px 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--re-border); }
.re-post-meta-item { display: flex; align-items: center; gap: 0.35rem; }

.re-post-meta-item strong { color: var(--re-text); font-weight: 600; }
.re-post-meta-divider { color: var(--re-border); }
.re-author-box { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.75rem; background-color: rgb(247, 251, 254); border-top: 4px solid var(--re-light-blue); border-radius: var(--re-radius); margin: 3rem 0px; }
.re-author-avatar { flex-shrink: 0; width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--re-teal-soft); }

.re-author-name { font-size: 16px; font-weight: 700; color: var(--re-dark-blue); margin-bottom: 0.25rem; }
.re-author-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--re-text-muted); font-weight: 600; margin-bottom: 0.5rem; }
.re-author-bio { font-size: 14px; color: var(--re-text-muted); line-height: 1.6; margin: 0px; }
.re-news-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--re-dark-blue); background-color: var(--re-teal-soft); padding: 5px 12px; border-radius: 2px; margin-bottom: 0.75rem; }

.re-news-for-release { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--re-text-muted); border-top: 1px solid var(--re-border); border-bottom: 1px solid var(--re-border); padding: 8px 0px; margin: 1.5rem 0px; }
.re-news-contact { background-color: var(--re-gray-light); padding: 1.25rem 1.5rem; font-size: 14px; margin-top: 2.5rem; border-radius: var(--re-radius); }
.re-news-contact-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--re-text-muted); margin-bottom: 0.5rem; display: block; }
.re-download-card { background: linear-gradient(135deg, var(--re-dark-blue), #1e6299); color: var(--re-white); padding: 2.5rem; border-radius: var(--re-radius); margin: 2.5rem 0px; position: relative; overflow: hidden; }

.re-download-card::after { content: ""; position: absolute; bottom: -30px; right: -30px; width: 120px; height: 120px; background-color: rgba(15, 252, 190, 0.12); border-radius: 50%; }
.re-download-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--re-cyan); margin-bottom: 0.5rem; display: block; }
.re-download-card h3 { color: var(--re-white); margin: 0px 0px 0.75rem; font-size: 22px; }
.re-download-card p { color: rgb(200, 223, 240); font-size: 15px; margin-bottom: 1.5rem; }
.re-download-card .re-btn--accent { position: relative; z-index: 1; }

.re-doc-preview { display: flex; gap: 1.5rem; align-items: center; padding: 1.25rem; border: 1px solid var(--re-border); border-radius: var(--re-radius); background-color: rgb(247, 251, 254); margin: 1.5rem 0px; transition: box-shadow 0.2s; text-decoration: none !important; color: var(--re-text) !important; }
.re-doc-preview:hover { box-shadow: var(--re-shadow); }
.re-doc-icon { flex-shrink: 0; width: 48px; height: 48px; background-color: var(--re-dark-blue); border-radius: var(--re-radius); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--re-white); letter-spacing: 0.05em; text-transform: uppercase; }
.re-doc-info-title { font-weight: 700; color: var(--re-dark-blue); font-size: 15px; display: block; margin-bottom: 0.2rem; }

.re-doc-info-meta { font-size: 12px; color: var(--re-text-muted); }
.re-webinar-header { background: linear-gradient(135deg, var(--re-dark-blue), #1a6aaa); color: var(--re-white); padding: 2.5rem; border-radius: var(--re-radius); margin-bottom: 2rem; }
.re-webinar-header-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--re-cyan); margin-bottom: 0.5rem; display: block; }
.re-webinar-header h2 { margin-top: 0px; font-size: 26px; color: var(--re-white) !important; border-bottom-color: rgba(15, 252, 190, 0.4) !important; }
.re-webinar-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.5rem 0px 2rem; }

.re-webinar-detail-item { text-align: center; padding: 1rem; background-color: rgba(255, 255, 255, 0.1); border-radius: var(--re-radius); }
.re-webinar-detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--re-cyan); display: block; margin-bottom: 0.3rem; font-weight: 700; }
.re-webinar-detail-value { font-size: 16px; font-weight: 700; color: var(--re-white); }

.re-webinar-register { border-top: 5px solid var(--re-dark-blue); padding: 2rem; border-radius: var(--re-radius); background-color: rgb(247, 251, 254); text-align: center; margin: 2.5rem 0px; }
.re-webinar-register h3 { margin-top: 0px; color: var(--re-dark-blue); }
.re-webinar-register p { color: var(--re-text-muted); font-size: 15px; margin-bottom: 1.5rem; }

.re-speaker-card { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.25rem; background-color: rgb(247, 251, 254); border: 1px solid var(--re-border); border-radius: var(--re-radius); margin-bottom: 1rem; }
.re-speaker-avatar { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--re-teal-soft); }
.re-speaker-name { font-weight: 700; color: var(--re-dark-blue); font-size: 16px; margin-bottom: 0.15rem; display: block; }
.re-speaker-title { font-size: 13px; color: var(--re-text-muted); font-weight: 600; margin-bottom: 0.4rem; display: block; }
.re-speaker-bio { font-size: 14px; color: var(--re-text); margin: 0px; line-height: 1.5; }

.re-video-embed { position: relative; padding-bottom: 56.25%; height: 0px; overflow: hidden; border-radius: var(--re-radius); background-color: rgb(0, 0, 0); margin: 1.5rem 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 30px; }
.re-video-embed iframe, .re-video-embed video { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none; }
.re-video-caption { font-size: 13px; color: var(--re-text-muted); text-align: center; margin-top: -0.75rem; margin-bottom: 1.5rem; font-style: italic; }
.re-transcript-note { background-color: var(--re-gray-light); padding: 1rem 1.5rem; border-radius: var(--re-radius); font-size: 14px; color: var(--re-text-muted); margin-top: 0.5rem; }
.re-transcript-note a { color: var(--re-dark-blue); font-weight: 600; }

.re-event-header { background: linear-gradient(135deg, var(--re-dark-blue), #1e6299); color: var(--re-white); padding: 2.5rem; border-radius: var(--re-radius); margin-bottom: 2rem; }
.re-event-header-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--re-cyan); margin-bottom: 0.5rem; display: block; }
.re-event-header h2 { margin-top: 0px; font-size: 26px; color: var(--re-white) !important; border-bottom-color: rgba(15, 252, 190, 0.4) !important; }
.re-event-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background-color: var(--re-border); border: 1px solid var(--re-border); border-radius: var(--re-radius); overflow: hidden; margin: 1.5rem 0px; }
.re-event-detail-item { background-color: var(--re-white); padding: 1.25rem 1.5rem; }

.re-event-detail-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--re-text-muted); display: block; margin-bottom: 0.3rem; }
.re-event-detail-value { font-size: 15px; font-weight: 700; color: var(--re-dark-blue); }
.re-event-register { background: linear-gradient(135deg, var(--re-dark-blue), #1a6aaa); padding: 2.5rem; border-radius: var(--re-radius); text-align: center; margin: 2.5rem 0px; color: var(--re-white); }
.re-event-register h3 { color: var(--re-white); margin-top: 0px; }
.re-event-register p { color: rgb(200, 223, 240); margin-bottom: 1.5rem; }
.re-agenda { list-style: none; padding: 0px; margin: 1.5rem 0px; border-left: 3px solid var(--re-light-blue); }

.re-agenda li { position: relative; border-bottom: 1px solid var(--re-border); padding: 0.75rem 1rem 0.75rem 1.5rem !important; margin-bottom: 0px !important; }
.re-agenda li:last-child { border-bottom: none; }
.re-agenda li::before { display: none !important; }
.re-agenda-time { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--re-light-blue); display: block; margin-bottom: 0.15rem; }
.re-agenda-title { font-size: 15px; font-weight: 600; color: var(--re-dark-blue); display: block; }
.re-agenda-desc { font-size: 13px; color: var(--re-text-muted); margin: 0px; line-height: 1.5; }
.re-faq { margin: 2rem 0px; }
.re-faq-item { border-bottom: 1px solid var(--re-border); padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.re-faq-item:last-child { border-bottom: none; margin-bottom: 0px; }

.re-faq-question { font-size: 17px; font-weight: 700; color: var(--re-dark-blue); margin-bottom: 0.5rem; line-height: 1.4; }
.re-faq-answer { font-size: 15px; color: var(--re-text-muted); line-height: 1.7; margin: 0px; }
.re-cta-box { text-align: center; padding: 3rem 2rem; border-top: 1px solid var(--re-border); margin-top: 3rem; }
.re-cta-box h3 { font-size: 26px; color: var(--re-dark-blue); margin-top: 0px; margin-bottom: 0.75rem; }
.re-cta-box p { color: var(--re-text-muted); max-width: 560px; margin: 0px auto 1.75rem; font-size: 16px; }
.re-cta-box--dark { background-color: var(--re-dark-blue); border-radius: var(--re-radius); border-top: none; margin-top: 3rem; }
.re-cta-box--dark h3 { color: var(--re-white); }
.re-cta-box--dark p { color: rgb(200, 223, 240); }

/* Higher specificity + !important so we beat WP core's .wp-block-columns-is-layout-flex
   inside the editor iframe (where core CSS loads after ours). */
.wp-block-columns.re-grid-2,
.re-grid-2 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem; margin: 1.5rem 0; }
.wp-block-columns.re-grid-3,
.re-grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.25rem; margin: 1.5rem 0; }
/* Cancel the per-column flex-basis the core layout adds (which forces wraps in the editor). */
.wp-block-columns.re-grid-2 > .wp-block-column,
.wp-block-columns.re-grid-3 > .wp-block-column { flex-basis: auto !important; }
.re-card { background-color: rgb(247, 251, 254); border-top: 3px solid var(--re-light-blue); padding: 1.5rem; border-radius: var(--re-radius); }
.re-card h4 { color: var(--re-dark-blue); margin-top: 0px; margin-bottom: 0.5rem; }
.re-card p { font-size: 14px; color: var(--re-text-muted); margin-bottom: 0px; }

.re-divider { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 2px solid var(--re-gray-light); margin: 3rem 0px; }
.re-divider--cyan { border-top-color: var(--re-cyan); }

@media (max-width: 768px) {
  .re-author-box { flex-direction: column; align-items: center; text-align: center; }
  .re-download-card, .re-webinar-header, .re-event-header { padding: 1.75rem; }
  .re-webinar-details, .re-event-details { grid-template-columns: 1fr 1fr; }
  .re-pull-quote { font-size: 18px !important; }
  .re-cta-box { padding: 2rem 1.25rem; }
  .re-grid-2, .re-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .re-webinar-details, .re-event-details { grid-template-columns: 1fr; }
  .re-speaker-card { flex-direction: column; align-items: center; text-align: center; }
}