/* WordPress-only adjustments on top of the static design CSS. */

/* Keep the sticky header below the admin toolbar when logged in. */
.admin-bar .topbar { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .topbar { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar .topbar { top: 0; }
}

/* WordPress adds width/height attributes to images (good: no layout jump while
   loading). The design CSS was written for images without them, so let the
   height follow the width again. :where() keeps this at zero specificity —
   any design rule that sets a height still wins. */
:where(img[width][height]) { height: auto; }

/* Until the icon font arrives, an icon is its name as (invisible) text —
   "keyboard_arrow_down" is ~15 characters wide, which wrapped the header and
   pushed the page down, then snapped back (layout shift). Reserve exactly one
   icon's width. Zero specificity, so design rules that size icons still win. */
:where(.material-symbols-outlined) { width: 1em; overflow: hidden; flex-shrink: 0; } /* overflow:hidden would let flex rows squeeze the icon; the design's icons never shrink */
/* …except the only two icons the design pads: with border-box sizing the
   padding would be squeezed into that 1em (office phone boxes, read-more). */
.oc-addr-card .oc-lines li .material-symbols-outlined,
.read-more .material-symbols-outlined { width: auto; overflow: visible; }

/* The dot maps are drawn as one <path> (inc/world-map.php) instead of
   thousands of <circle>s — same colours as the design's circle rules. */
.gp-map .map-dots path { fill: #c3c6ec; }
.lt-map svg path { fill: #d7d9ee; }
@media (max-width: 767px) {
  .gp-map .map-dots path { fill: #cbcdef; }
}

/* Phones: single-line section headings (white-space:nowrap in the design)
   ran off both sides of the screen, e.g. "Trusted By Over 300+ Retailers". */
@media (max-width: 575.98px) {
  .testimonials .section-title h2,
  .vowel-features .section-title h2 { white-space: normal; text-align: center; }
}

/* Success story reviews slider (2+ reviews): equal-height cards so the
   section never changes height while rotating, and dots in the story colour. */
.ssd-quote-slider { padding-bottom: 34px; }
.ssd-quote-slider .swiper-wrapper { align-items: stretch; }
.ssd-quote-slider .swiper-slide { height: auto; }
.ssd-quote-slider .ssd-quote { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.ssd-quote-slider .ssd-quote-pagination { bottom: 0; }
.ssd-quote-slider .swiper-pagination-bullet { width: 9px; height: 9px; background: var(--ssd-accent, #6c2bd9); opacity: .25; transition: opacity .2s, width .2s; }
.ssd-quote-slider .swiper-pagination-bullet-active { opacity: 1; width: 24px; border-radius: 6px; }

/* Quick enquiry form (contact pages): message after sending. */
.form-panel .clx-form-status { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; font-weight: 500; background: #e9f8ef; color: #146c3c; }
.form-panel .clx-form-status.error { background: #fdeee9; color: #b8360c; }

/* Tablet: the Contact Us column ends right on top of the footer logo row
   (0px gap in the original design) — give the logo row some breathing room. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .footer-top .row + .row { margin-top: 24px; }
}

/* DI Feature pages: industry names and related-solution titles are links in
   WordPress (plain text in the static design) — keep the design's look. */
.di-ind-list b a, .ms-related h4 a { color: inherit; text-decoration: none; }
.di-ind-list b a:hover, .ms-related h4 a:hover { color: #1668e3; }

/* Product reviews: clickable rating stars + approved reviews list. */
.review-form .rf-rating .material-symbols-outlined{cursor:pointer}
.rf-rating .material-symbols-outlined.is-on{color:#f5a623;font-variation-settings:'FILL' 1}
.pd-review{padding:14px 0;border-bottom:1px solid #e9edf6}
.pd-review p{margin:6px 0}
.pd-review small{color:#5b6577}

/* Careers: message when the job search finds nothing. */
.cr-jempty{margin:22px 0 0;padding:16px 20px;border-radius:12px;background:#f3f6fc;color:#41506b;text-align:center}

/* Subscribe forms: reply under the form. */
.clx-sub-msg{margin:10px 0 0;font-weight:600;font-size:14px}
.clx-sub-msg:empty{display:none}
.clx-sub-msg.is-ok{color:#146c3c}
.clx-sub-msg.is-error{color:#b8360c}

/* Blog articles: elements the imported/new posts use that the static design didn't style. */
.bd-content h3{margin:26px 0 10px;font-size:19px;font-weight:800;color:var(--bd-ink,#06245b);line-height:1.35}
.bd-content h4{margin:22px 0 8px;font-size:17px;font-weight:700;color:var(--bd-ink,#06245b)}
.bd-content ul,.bd-content ol{margin:0 0 18px;padding-left:22px;font-size:15.5px;line-height:1.8;color:var(--bd-body)}
.bd-content li{margin-bottom:6px}
.bd-content a{color:#1D308E;text-decoration:underline;text-underline-offset:2px}
.bd-content a:hover{color:#E84110}
.bd-content img{max-width:100%;height:auto;border-radius:12px}
.bd-content figure,.bd-content .wp-caption{max-width:100%;margin:22px 0}
.bd-content figcaption,.bd-content .wp-caption-text{margin-top:8px;font-size:13px;color:#5b6577;text-align:center}
.bd-content .aligncenter{display:block;margin-left:auto;margin-right:auto}
.bd-content .alignleft{float:left;margin:6px 22px 12px 0}
.bd-content .alignright{float:right;margin:6px 0 12px 22px}
.bd-content::after{content:"";display:table;clear:both}
.bd-content blockquote{margin:26px 0;padding:18px 22px;border-left:4px solid #E84110;background:#f6f8fc;border-radius:0 12px 12px 0}
.bd-content blockquote p:last-child{margin-bottom:0}
.bd-content iframe{max-width:100%}
.bd-content table{width:100%;margin:0 0 18px;border-collapse:collapse;font-size:14.5px}
.bd-content th,.bd-content td{padding:8px 10px;border:1px solid #e3e8f2}
@media(max-width:575px){.bd-content .alignleft,.bd-content .alignright{float:none;margin:16px 0}}
/* Category pages: the pills are links. */
a.blg-pill{text-decoration:none}