/* =============================================================
   EB Mechanical — Modular widget styles.
   Fully self-contained and namespaced under .ebm-* so a widget
   can be dropped into ANY Elementor section/container/column
   without depending on (or affecting) the rest of the site.
   No global element selectors (section, h1, p, .row, .container).
   ============================================================= */

/* ---------- Shared: container + buttons ---------- */
.ebm-section-wrapper {
    width: 100%;
    font-family: "Helvetica", "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
}
.ebm-section-wrapper *,
.ebm-section-wrapper *::before,
.ebm-section-wrapper *::after {
    box-sizing: border-box;
}

.ebm-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.ebm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    padding: 12px 25px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.ebm-btn svg { flex-shrink: 0; }
.ebm-btn-lg { padding: 16px 30px; }
.ebm-btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 12px 30px -10px rgba(37, 99, 235, 0.55);
}
.ebm-btn-primary:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 22px 50px -12px rgba(29, 78, 216, 0.7);
}

/* =============================================================
   HERO
   ============================================================= */
.ebm-hero-wrapper {
    position: relative;
    width: 100%;
    padding: 120px 0 90px;
    color: #fff;
    background-color: #0a2540;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
/* gradient wash */
.ebm-hero-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(60% 50% at 80% 10%, rgba(56, 189, 248, 0.35), transparent 70%),
        radial-gradient(60% 60% at 10% 100%, rgba(37, 99, 235, 0.55), transparent 70%),
        linear-gradient(180deg, rgba(10, 12, 15, 0.6) 0%, rgba(10, 12, 15, 0.85) 60%, rgba(10, 12, 15, 0.98) 100%);
}
/* faint grid */
.ebm-hero-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
    mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
}

.ebm-hero-inner {
    position: relative;
    z-index: 1;
}
.ebm-hero-copy {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.ebm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 22px;
}
.ebm-dot {
    width: 8px;
    height: 8px;
    background: #3ddc84;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.25);
    animation: ebm-pulse 1.8s ease-in-out infinite;
}
@keyframes ebm-pulse {
    50% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); }
}
.ebm-hero-title {
    font-weight: 500;
    font-size: clamp(38px, 6vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 0 0 22px;
    color: #fff;
}
.ebm-grad {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ebm-hero-sub {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto 36px;
}
.ebm-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.ebm-hero-features {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}
.ebm-feature-card {
    height: 100%;
    padding: 38px 34px;
    border-radius: 24px;
    background: #f9f9f9;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 24px 60px rgba(21, 24, 29, 0.14), 0 8px 16px rgba(21, 24, 29, 0.06);
}
.ebm-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    box-shadow: 0 10px 22px -8px rgba(29, 78, 216, 0.4);
}
.ebm-fc-title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: #060a14;
    margin: 0 0 12px;
}
.ebm-fc-text {
    font-size: 16px;
    line-height: 1.6;
    color: #5b6470;
    margin: 0;
}

@media (max-width: 991.98px) {
    .ebm-hero-features { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .ebm-hero-wrapper { padding: 90px 0 70px; }
    .ebm-hero-features { margin-top: 36px; }
    .ebm-hero-title { font-size: clamp(34px, 8vw, 50px); }
}

/* =============================================================
   WORKSHOP GALLERY SLIDER (widget: eb_gallery)
   Same horizontal scroll-snap slider as the Services section
   (.services-slider) — the cards keep the existing .service-card
   design, only the grid is replaced by a scrolling track.
   ============================================================= */
.gallery-slider-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}
.gallery-slider {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 14px;
    margin: 0 -4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gallery-slider::-webkit-scrollbar {
    display: none;
}
.gallery-slider > .service-card {
    flex: 0 0 auto;
    width: calc((100% - 72px) / 4);
    scroll-snap-align: start;
}

@media (max-width: 1024px) {
    .gallery-slider > .service-card { width: calc((100% - 24px) / 2); }
}
@media (max-width: 767.98px) {
    .gallery-slider { gap: 16px; }
    .gallery-slider > .service-card { width: 85%; }
}

/* =============================================================
   WHY CHOOSE (widget: eb_why_choose)
   Self-contained defaults for the .eb-why-choose-* markup. Every
   value mirrors the theme's .section / .main-heading / .highlight-card
   design so the widget inherits the homepage look out of the box.
   All of it is overridable from the widget's Style tab.
   ============================================================= */
.eb-why-choose {
    position: relative;
    padding: 110px 0;
    background-color: var(--white-color, #ffffff);
    font-family: var(--content-font, "Helvetica", "Helvetica Neue", Arial, sans-serif);
}
.eb-why-choose *,
.eb-why-choose *::before,
.eb-why-choose *::after {
    box-sizing: border-box;
}

.eb-why-choose-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 15px;
}

.eb-why-choose-head {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}
.eb-why-choose-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ternary-color, #03a9f4);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(29, 78, 216, 0.12));
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.eb-why-choose-title {
    font-weight: 500;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--dark-color, #060a14);
    margin: 0 0 14px;
}
.eb-why-choose-desc {
    font-size: 17px;
    line-height: 1.65;
    color: var(--muted-color, #5b6470);
    margin: 0;
}

.eb-why-choose-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
}

.eb-why-choose-card {
    height: 100%;
    padding: 34px 30px;
    background: var(--white-color, #ffffff);
    border: 1px solid var(--border-new-color, #e7e4e1);
    border-radius: var(--radius-lg, 24px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(21, 24, 29, 0.06));
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        background-color 0.4s ease;
}

.eb-why-choose-icon {
    display: inline-grid;
    place-items: center;
    min-width: 56px;
    min-height: 56px;
    padding: 15px;
    margin-bottom: 22px;
    border-radius: 16px;
    color: var(--white-color, #ffffff);
    background: linear-gradient(135deg, var(--ternary-color, #03a9f4) 0%, var(--secondary-color, #1d4ed8) 100%);
    box-shadow: 0 12px 26px -10px rgba(29, 78, 216, 0.45);
}
.eb-why-choose-icon > i {
    font-size: 26px;
    line-height: 1;
    color: currentColor;
}
.eb-why-choose-icon > svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
    display: block;
}

.eb-why-choose-item-title {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--dark-color, #060a14);
    margin: 0 0 10px;
}
.eb-why-choose-item-desc {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--muted-color, #5b6470);
    margin: 0;
}

/* Hover effects (chosen in the Style tab → Feature Card → Hover Effect) */
.eb-why-choose-hover-lift .eb-why-choose-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg, 0 24px 60px rgba(21, 24, 29, 0.14));
}
.eb-why-choose-hover-shadow .eb-why-choose-card:hover {
    box-shadow: var(--shadow-lg, 0 24px 60px rgba(21, 24, 29, 0.14));
}
.eb-why-choose-hover-zoom .eb-why-choose-card:hover {
    transform: scale(1.03);
}

/* Fallback breakpoints for widgets saved before the responsive column
   controls were touched (Elementor's own media queries win when set). */
@media (max-width: 1024px) {
    .eb-why-choose { padding: 80px 0; }
    .eb-why-choose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .eb-why-choose { padding: 60px 0; }
    .eb-why-choose-grid { grid-template-columns: 1fr; column-gap: 20px; row-gap: 20px; }
    .eb-why-choose-head { margin-bottom: 34px; }
    .eb-why-choose-card { padding: 28px 24px; }
}

/* =============================================================
   ELEMENTOR INTEGRATION
   Each EB widget (eb_hero, eb_stats, eb_welcome, …) outputs a
   top-level <section>/<header> that, in the original static HTML,
   was a full-width direct child of <body>. Elementor nests it inside
   column + widget wrappers that add width limits, padding and
   inter-widget spacing — which breaks the original layout.
   These rules make the EB sections render exactly like the original.
   (html/body already have overflow-x:hidden, so 100vw is safe.)
   ============================================================= */

/* 1) Remove Elementor's inter-widget spacing + container padding */
[class*="elementor-widget-eb_"] { margin: 0 !important; }
[class*="elementor-widget-eb_"] > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* 2) Remove padding/gap from the column & widget-wrap that hold an EB widget */
.elementor-widget-wrap:has(> .elementor-element[class*="elementor-widget-eb_"]),
.elementor-column-wrap:has(> .elementor-widget-wrap > .elementor-element[class*="elementor-widget-eb_"]) {
    padding: 0 !important;
    gap: 0 !important;
}

/* 3) Break each EB section out to the full viewport width */
[class*="elementor-widget-eb_"] > .elementor-widget-container > section,
[class*="elementor-widget-eb_"] > .elementor-widget-container > header,
[class*="elementor-widget-eb_"] > .elementor-widget-container > footer {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* 4) Header overlays the page top exactly like the original absolute header.
   The EB Header widget is lifted out of flow and pinned to the top so the
   transparent glass nav sits over the hero (not as a solid bar above it).
   Place the EB Header widget in its OWN section directly above the Hero. */
.elementor-widget-eb_header {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    z-index: 50;
}
.elementor-widget-eb_header > .elementor-widget-container { position: static; }
.elementor-widget-eb_header > .elementor-widget-container > .site-header {
    position: static;
    width: 100%;
    display: block;
}
/* Force the two header rows to stack full-width (never side-by-side) */
.elementor-widget-eb_header .site-header > .top-bar,
.elementor-widget-eb_header .site-header > .nav-wrap { width: 100%; }

/* 5) Services slider arrows + nav toggle: re-assert the original button
   design so Elementor/theme default button styles cannot override it. */
[class*="elementor-widget-eb_"] .services-arrow {
    background: linear-gradient(135deg, var(--ternary-color, #2563eb) 0%, var(--secondary-color, #1d4ed8) 100%);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 0;
}
[class*="elementor-widget-eb_"] .nav-toggle { padding: 0; }

/* 6) ICON NORMALISATION
   When a card/stat/tab/service icon is changed via the Elementor Icons
   control it renders as a Font Awesome <i> or an Elementor <svg.e-font-icon-svg>.
   Force it to the SAME size, colour and alignment as the original inline
   SVGs so the design never breaks on icon change. (We only target <i> and
   Elementor's own .e-font-icon-svg — the original inline <svg> is untouched,
   so its stroke-based outline look is preserved.) */
.hfc-icon > i, .ebm-feature-icon > i,
.stat-icon > i, .services-card-icon > i,
.wd-tab-icon > i, .payment-chip > i,
.ci-icon > i, .welcome-feature-icon > i,
.hfc-icon > svg.e-font-icon-svg, .ebm-feature-icon > svg.e-font-icon-svg,
.stat-icon > svg.e-font-icon-svg, .services-card-icon > svg.e-font-icon-svg,
.wd-tab-icon > svg.e-font-icon-svg, .payment-chip > svg.e-font-icon-svg,
.ci-icon > svg.e-font-icon-svg, .welcome-feature-icon > svg.e-font-icon-svg {
    color: currentColor;
    fill: currentColor;
    display: inline-flex;
    vertical-align: middle;
    line-height: 1;
}
/* per-wrapper icon sizes matching the original inline SVGs */
.hfc-icon > i, .ebm-feature-icon > i { font-size: 26px; }
.hfc-icon > svg.e-font-icon-svg, .ebm-feature-icon > svg.e-font-icon-svg { width: 26px; height: 26px; }
.stat-icon > i { font-size: 24px; }
.stat-icon > svg.e-font-icon-svg { width: 24px; height: 24px; }
.services-card-icon > i { font-size: 42px; }
.services-card-icon > svg.e-font-icon-svg { width: 42px; height: 42px; }
.wd-tab-icon > i { font-size: 22px; }
.wd-tab-icon > svg.e-font-icon-svg { width: 22px; height: 22px; }
.payment-chip > i { font-size: 16px; }
.payment-chip > svg.e-font-icon-svg { width: 16px; height: 16px; }
.ci-icon > i, .welcome-feature-icon > i { font-size: 20px; }
.ci-icon > svg.e-font-icon-svg { width: 18px; height: 18px; }
.welcome-feature-icon > svg.e-font-icon-svg { width: 22px; height: 22px; }

/* 7) WHAT WE DO — a faithful, widget-scoped copy of the original .wd-*
   design so Elementor's button/typography defaults cannot override ANY of
   it. Every value below is taken verbatim from the original style.css. */
[class*="elementor-widget-eb_"] .wd-tabs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}
[class*="elementor-widget-eb_"] .wd-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    text-align: left;
    padding: 18px 22px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e7e4e1);
    background: var(--white-color, #ffffff);
    color: var(--primary-color, #0a2540);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(21, 24, 29, 0.06));
}
[class*="elementor-widget-eb_"] .wd-tab-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ternary-color, #2563eb);
    background: rgba(37, 99, 235, 0.1);
}
[class*="elementor-widget-eb_"] .wd-tab-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
[class*="elementor-widget-eb_"] .wd-tab .wd-tab-text strong {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    color: inherit;
    margin: 0;
}
[class*="elementor-widget-eb_"] .wd-tab .wd-tab-text small {
    font-size: 13px;
    color: var(--muted-color, #5b6470);
    margin: 0;
}
[class*="elementor-widget-eb_"] .wd-tab-arrow {
    flex-shrink: 0;
    margin: 0;
    opacity: 0;
    transform: translateX(-6px);
    color: inherit;
}
[class*="elementor-widget-eb_"] .wd-tab:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(21, 24, 29, 0.08));
}
[class*="elementor-widget-eb_"] .wd-tab.active {
    background: linear-gradient(135deg, var(--ternary-color, #2563eb) 0%, var(--secondary-color, #1d4ed8) 100%);
    border-color: transparent;
    color: var(--white-color, #ffffff);
    box-shadow: 0 16px 34px -12px rgba(37, 99, 235, 0.6);
}
[class*="elementor-widget-eb_"] .wd-tab.active .wd-tab-icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white-color, #ffffff);
}
[class*="elementor-widget-eb_"] .wd-tab.active .wd-tab-text small {
    color: rgba(255, 255, 255, 0.85);
}
[class*="elementor-widget-eb_"] .wd-tab.active .wd-tab-arrow {
    opacity: 1;
    transform: translateX(0);
}
/* Right-side split image collage (two images per tab) */
[class*="elementor-widget-eb_"] .wd-split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px;
    align-items: stretch;
}
[class*="elementor-widget-eb_"] .wd-split-side { margin-top: 40px; }
@media (max-width: 575.98px) {
    [class*="elementor-widget-eb_"] .wd-tab { padding: 14px 18px; gap: 12px; }
    [class*="elementor-widget-eb_"] .wd-tab .wd-tab-text strong { font-size: 15px; }
    [class*="elementor-widget-eb_"] .wd-split { gap: 12px; }
}

/* 8) FAQ accordion — re-assert the Bootstrap accordion-button layout so
   Elementor's button/typography defaults don't centre the text, recolour
   the question, or break the row (question left · chevron right). */
[class*="elementor-widget-eb_"] .accordion-button {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color, #0a2540);
    background: var(--white-color, #fff);
}
[class*="elementor-widget-eb_"] .accordion-button:not(.collapsed) {
    color: var(--primary-color, #0a2540);
    background: var(--white-color, #fff);
    box-shadow: none;
}
[class*="elementor-widget-eb_"] .accordion-button::after {
    margin-left: auto;
    flex-shrink: 0;
}
[class*="elementor-widget-eb_"] .accordion-header {
    margin: 0;
}
[class*="elementor-widget-eb_"] .accordion-body,
[class*="elementor-widget-eb_"] .accordion-body p {
    text-align: left;
}

/* 9) Contact Form 7 output — make the plugin's form inherit the section's
   field styling so a selected CF7 form matches the built-in form design. */
/* CF7 wraps each input in <span class="wpcf7-form-control-wrap"> — stop the
   theme's ".contact-form span" label styling from leaking onto that wrapper
   and the validation tips (only the actual <label><span> stays a field label). */
.contact-form-cf7 .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 0;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}
.contact-form-cf7 .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: #dc2626;
}
.contact-form-cf7 .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: var(--radius-md, 16px);
    font-size: 14px;
}
.contact-form-cf7 p { margin: 0 0 16px; }
.contact-form-cf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-form-cf7 select,
.contact-form-cf7 textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--border-color, #e7e4e1);
    border-radius: var(--radius-md, 12px);
    background: var(--white-color, #fff);
    font: inherit;
    color: var(--primary-color, #0a2540);
}
.contact-form-cf7 input:focus,
.contact-form-cf7 select:focus,
.contact-form-cf7 textarea:focus {
    outline: none;
    border-color: var(--ternary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.contact-form-cf7 .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    border: 0;
    border-radius: 999px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--ternary-color, #2563eb) 0%, var(--secondary-color, #1d4ed8) 100%);
    box-shadow: 0 12px 30px -10px rgba(37, 99, 235, 0.55);
    transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.contact-form-cf7 .wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 50px -12px rgba(29, 78, 216, 0.7);
}

/* =============================================================
   BLOG + SIDEBAR (theme templates: home / archive / single)
   Uses the existing .other-banner, .blog-card, .detail-body and
   .sidebar-card designs; only the sidebar lists, search, pagination,
   post tags/nav need styling here.
   ============================================================= */
.blog-sidebar { position: sticky; top: 110px; }
@media (max-width: 991.98px) { .blog-sidebar { position: static; } }

.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { margin: 0 0 10px; line-height: 1.4; }
.sidebar-list li:last-child { margin-bottom: 0; }
.sidebar-list a { color: var(--primary-color, #0a2540); text-decoration: none; transition: color 0.25s ease; }
.sidebar-list a:hover { color: var(--ternary-color, #2563eb); }
.sidebar-list .children { list-style: none; margin: 8px 0 0 14px; padding: 0; }

.sidebar-card .search-form,
.sidebar-card form[role="search"] { display: flex; gap: 8px; }
.sidebar-card .search-field,
.sidebar-card input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--border-color, #e7e4e1);
    border-radius: var(--radius-md, 16px);
    background: var(--white-color, #fff);
    font: inherit;
    color: var(--primary-color, #0a2540);
}
.sidebar-card .search-field:focus,
.sidebar-card input[type="search"]:focus {
    outline: none;
    border-color: var(--ternary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.sidebar-card .search-submit,
.sidebar-card button[type="submit"] {
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-md, 16px);
    padding: 11px 16px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--ternary-color, #2563eb) 0%, var(--secondary-color, #1d4ed8) 100%);
}

/* Pagination */
.eb-pagination { margin-top: 16px; }
.eb-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    margin: 0 4px 4px 0;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e7e4e1);
    color: var(--primary-color, #0a2540);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.25s ease;
}
.eb-pagination .page-numbers:hover { border-color: var(--ternary-color, #2563eb); color: var(--ternary-color, #2563eb); }
.eb-pagination .page-numbers.current {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--ternary-color, #2563eb) 0%, var(--secondary-color, #1d4ed8) 100%);
}
.eb-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Single-post tags + prev/next nav */
.post-tags { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--light-color, #f6f5f2);
    border: 1px solid var(--border-color, #e7e4e1);
    color: var(--muted-color, #5b6470);
    font-size: 13px;
    text-decoration: none;
}
.post-tags a:hover { color: var(--ternary-color, #2563eb); border-color: var(--ternary-color, #2563eb); }
.post-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color, #e7e4e1);
}
.post-nav a { color: var(--primary-color, #0a2540); font-weight: 500; text-decoration: none; }
.post-nav a:hover { color: var(--ternary-color, #03a9f4); }

/* Related / recent posts list in the single-post sidebar */
.rp-list { display: flex; flex-direction: column; gap: 6px; }
.rp-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: var(--radius-md, 16px);
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease;
}
.rp-item:hover { background: var(--light-color, #f6f5f2); transform: translateX(2px); }
.rp-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--light-color, #f6f5f2);
}
.rp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rp-title {
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--primary-color, #0a2540);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}
.rp-item:hover .rp-title { color: var(--ternary-color, #03a9f4); }
.rp-date {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-color, #5b6470);
}