/* Visera shared page helpers — reused by /about, /services and service detail pages.
   All classes are prefixed .vp- to avoid collisions with the theme. */

/* Universal heading layout — prevents widow words ("…runs / on."). Modern browsers
   (Chrome 114+, FF 121+, Safari 17.4+) re-flow lines so they're roughly equal width.
   Older browsers ignore — graceful degradation. */
h1, h2, h3, h4, h5 { text-wrap: balance; }
p.lead, .vp-faq summary { text-wrap: pretty; }

/* Dark hero variant — used on /services/cybersecurity. */
.vp-hero-dark { background: radial-gradient(circle at 20% 30%, rgba(126,87,255,0.55), transparent 60%), radial-gradient(circle at 80% 70%, rgba(45,208,233,0.45), transparent 60%), #1d1e36; }

/* Stat strip — tuned to work on both dark hero AND on light bg-gradient-1 hero
   (cyan→purple). Solid white number (gradient text was invisible on light bg). */
.vp-stat { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.24); border-radius: 14px; padding: 22px 16px; color: #fff; text-align: center; height: 100%; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vp-stat .vp-num { font-size: 2.1rem; font-weight: 700; color: #fff; line-height: 1.1; }
.vp-stat .vp-label { font-size: 0.86rem; opacity: 0.9; margin-top: 6px; display: block; color: #fff; }

/* Light-background stat tile for /about. */
.vp-stat-light { background: #fff; border: 1px solid #e7ebf5; border-radius: 14px; padding: 24px 18px; text-align: center; height: 100%; }
.vp-stat-light .vp-num { font-size: 2.2rem; font-weight: 700; color: #7e57ff; line-height: 1.1; }
.vp-stat-light .vp-label { font-size: 0.88rem; color: #4b5563; margin-top: 6px; display: block; }

/* Numbered step (1..n). */
.vp-step { position: relative; padding-left: 56px; }
.vp-step .vp-step-num { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#7e57ff 0%, #2dd0e9 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Image placeholder — explains to the editor what should go here. */
.vp-img-ph { background: repeating-linear-gradient(45deg, #f1f3f9, #f1f3f9 10px, #e7ebf5 10px, #e7ebf5 20px); border: 2px dashed #b9c1d4; border-radius: 14px; padding: 36px 24px; text-align: center; color: #525c75; min-height: 240px; display: flex; flex-direction: column; justify-content: center; }
.vp-img-ph i { font-size: 44px; opacity: 0.55; }
.vp-img-ph .vp-img-title { font-weight: 600; margin-top: 10px; }
.vp-img-ph .vp-img-desc { font-size: 13px; margin: 6px 0 0; color: #6b7280; }
.vp-img-ph .vp-img-spec { font-size: 12px; margin-top: 8px; color: #8a90a3; }
.vp-img-ph code { background: #fff; padding: 1px 6px; border-radius: 4px; }

/* FAQ <details> with custom toggle icon. */
.vp-faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vp-faq summary::-webkit-details-marker { display: none; }
.vp-faq summary::after { content: '\002B'; font-size: 22px; color: #7e57ff; flex-shrink: 0; }
.vp-faq details[open] summary::after { content: '\2212'; }
.vp-faq details { border-bottom: 1px solid #e7ebf5; }
.vp-faq details p { padding-bottom: 16px; color: #4b5563; margin: 0; }

/* Compliance / framework pills. */
.vp-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.vp-pills span { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #e7ebf5; font-size: 13px; font-weight: 500; color: #1d2330; }
.vp-pills span i { color: #7e57ff; margin-right: 6px; }

/* Logo-style chip used in tech-stack area. */
.vp-tech-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid #e7ebf5; font-size: 14px; color: #1d2330; }
.vp-tech-chip i { font-size: 18px; color: #7e57ff; }

/* Quote / testimonial box. */
.vp-quote { background: #fff; border-left: 4px solid #7e57ff; border-radius: 8px; padding: 24px 28px; font-style: italic; color: #1d2330; }
.vp-quote footer { font-style: normal; margin-top: 10px; color: #6b7280; font-size: 13px; }

/* Larger icon inside circle-box-lg on these pages. */
.vp-icon-lg { font-size: 2.5rem !important; }

/* Blog carousel on /home — keeps owl-carousel from breaking the card hover/shadow. */
.vp-blog-carousel .owl-stage { display: flex; padding: 6px 0 14px; }
.vp-blog-carousel .owl-item { display: flex; }
.vp-blog-carousel .owl-item > .vp-blog-slide { width: 100%; }
.vp-blog-carousel .owl-item > .vp-blog-slide > a { display: block; height: 100%; }
.vp-blog-carousel .owl-nav button { background: #fff !important; border: 1px solid #e7ebf5 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.06); width: 40px; height: 40px; border-radius: 50% !important; color: #7e57ff !important; }
.vp-blog-carousel .owl-nav button:hover { background: linear-gradient(135deg,#7e57ff,#2dd0e9) !important; color: #fff !important; border-color: transparent !important; }
.vp-blog-carousel .owl-dots { margin-top: 18px; }
.vp-blog-carousel .owl-dots .owl-dot span { background: #d8dce6; }
.vp-blog-carousel .owl-dots .owl-dot.active span { background: #7e57ff; }

/* Theme is missing these button variants — defined here so they look right on dark heroes / gradients. */
.button-outline-light { color: #fff; border: 2px solid #fff; background: transparent; }
.button-outline-light:hover, .button-outline-light:focus { color: #1d1e36; background: #fff; }
.button-outline-light i { color: inherit; }

.button-light { color: #1d1e36; background: #fff; border: 2px solid #fff; }
.button-light:hover, .button-light:focus { color: #1d1e36; background: #f1f3f9; border-color: #f1f3f9; }
.button-light i { color: inherit; }