/* Sampu theme — main stylesheet
   Palette: deep industrial blue + cyan accent, matching a smart-city /
   manufacturing brand. Adjust CSS variables below to re-brand quickly. */

:root {
	--color-primary: #0b3d63;
	--color-accent: #0091d5;
	--color-dark: #101820;
	--color-light: #f5f8fa;
	--color-text: #2b2f33;
	--color-muted: #6b7580;
	--color-header-bg: #ffffff;
	--color-header-text: #2b2f33;
	--color-topbar-bg: #0b3d63;
	--radius: 6px;
	--container: 1200px;
	--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: var(--font-base);
	--font-body: var(--font-base);
}

* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	line-height: 1.6;
	background: #fff;
}

/* Accessibility: visually-hidden text (skip link, screen-reader-only headings).
   Uses WordPress core's own battle-tested technique (same CSS as the
   default _s/Twenty* themes) — more robust than a single clip-rect rule,
   since it layers multiple fallbacks (clip, clip-path, 1px box, negative
   margin) so no single quirky browser/plugin combination can leave it
   visibly taking up space at the top of the page. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
	background: var(--color-primary); color: #fff;
	clip: auto !important; clip-path: none;
	display: block; height: auto; width: auto;
	position: fixed !important; top: 10px; left: 10px;
	overflow: visible; margin: 0;
	padding: 12px 20px; border-radius: var(--radius); font-weight: 700;
	z-index: 100000; text-decoration: none;
}
h1, h2, h3, h4, h5, h6,
.hero__title, .section-title, .page-title, .site-title,
.solution-card__title, .news-card h3, .project-card h3 {
	font-family: var(--font-heading);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* Buttons */
.btn { display: inline-block; padding: 12px 28px; border-radius: var(--radius); font-weight: 600; transition: all .2s; white-space: nowrap; flex-shrink: 0; }
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-primary); }
.btn--outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.btn--outline:hover { background: var(--color-accent); color: #fff; }
.btn--contact { background: var(--color-primary); color: #fff; padding: 8px 20px; }

/* Header */
/* Header topbar — slim utility bar above the main header (hotline, email, language switcher) */
.site-topbar { background: var(--color-topbar-bg); color: rgba(255,255,255,.92); font-size: 12px; }
.site-topbar__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding: 6px 20px; flex-wrap: nowrap;
}
.site-topbar__contact { display: flex; align-items: center; gap: 20px; overflow: hidden; flex-wrap: wrap; }
.site-topbar__item {
	display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.92);
	white-space: nowrap; transition: color .2s ease;
}
.site-topbar__item:hover { color: #fff; }
.site-topbar__item svg { flex-shrink: 0; opacity: .85; }
.site-topbar__lang { flex-shrink: 0; }

/* Topbar's own language-switcher variant: text stays light on the dark topbar background */
.site-topbar .lang-switcher a { color: rgba(255,255,255,.75); }
.site-topbar .lang-switcher a:hover,
.site-topbar .lang-switcher li.lang-item-current a,
.site-topbar .lang-switcher a.pll-current-lang { color: #fff; background: rgba(255,255,255,.15); }

/* Narrow screens: wrap the topbar onto two lines instead of dropping the
   email entirely — phone/lang stay on the first line, email wraps below it
   only if there truly isn't room, so no contact info is ever hidden. */
/* Narrow screens: mobile topbar keeps only a compact tap-to-call icon —
   the phone NUMBER text and the email link move out (they're already on
   the Contact page and in the footer), so there's no risk of the language
   dropdown getting squeezed or wrapping badly on small screens. */
@media (max-width: 700px) {
	.site-topbar__inner { flex-wrap: nowrap; }
	.site-topbar__item--email { display: none; }
	.site-topbar__item--phone .site-topbar__item-label { display: none; }
	.site-topbar__item--phone {
		width: 30px; height: 30px; justify-content: center;
		border-radius: 50%; background: rgba(255,255,255,.12);
	}
}
@media (max-width: 460px) {
	.site-topbar__inner { padding: 6px 16px; gap: 10px; }
}

.site-header { background: var(--color-header-bg); box-shadow: 0 1px 4px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 100; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.site-title { font-size: 22px; font-weight: 800; color: var(--color-primary); }
.site-title--with-mark { display: flex; align-items: center; gap: 10px; }
.site-title__mark { flex-shrink: 0; width: 36px; height: 34px; object-fit: contain; }
.footer-brand .site-title--with-mark { color: #fff; font-size: 17px; }
.footer-brand .site-title--with-mark img { width: 28px; height: 26px; }
.main-nav__list { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.main-nav__list li { position: relative; }
.main-nav__list a { color: var(--color-header-text); font-weight: 500; white-space: nowrap; }
.main-nav__list a:hover { color: var(--color-accent); }
.main-nav__list .menu-item-has-children > a { display: flex; align-items: center; gap: 5px; }
.main-nav__list .menu-item-has-children > a::before {
	content: ""; width: 7px; height: 7px; margin-top: -3px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .2s ease; opacity: .6;
}
.main-nav__list li:hover > a::before,
.main-nav__list li.submenu-open > a::before { transform: rotate(225deg); }

/* ===================== Multi-level dropdown (desktop) ===================== */
.main-nav__list .sub-menu {
	display: none; list-style: none; margin: 0; padding: 8px 0;
	position: absolute; top: 100%; left: 0; z-index: 200; min-width: 240px;
	background: #fff; border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.main-nav__list li:hover > .sub-menu,
.main-nav__list li:focus-within > .sub-menu { display: block; }
.main-nav__list .sub-menu li { position: relative; }
.main-nav__list .sub-menu a {
	display: flex; padding: 10px 20px; color: var(--color-text); font-weight: 500; font-size: 14px;
}
.main-nav__list .sub-menu a:hover { background: var(--color-light); color: var(--color-accent); }
.main-nav__list .sub-menu a::after { content: none; }
.main-nav__list .sub-menu .menu-item-has-children > a::before {
	margin-left: auto; margin-top: 2px; transform: rotate(-45deg);
}
/* Level 3 flies out to the right of its level-2 parent */
.main-nav__list .sub-menu .sub-menu { top: -8px; left: 100%; }
.site-header__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }

/* Header search toggle + expandable panel */
.search-toggle {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e2e6e9;
	background: none; color: var(--color-header-text); cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.header-search {
	max-height: 0; overflow: hidden; background: var(--color-light);
	transition: max-height .3s ease;
}
.header-search.is-open { max-height: 90px; }
.header-search__form { display: flex; gap: 10px; align-items: center; padding: 16px 20px; }
.header-search__input {
	flex: 1; padding: 10px 16px; border: 1px solid #e2e6e9; border-radius: var(--radius);
	font-size: 15px; background: #fff;
}
.header-search__input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.header-search__submit {
	padding: 10px 22px; border: none; border-radius: var(--radius);
	background: var(--color-accent); color: #fff; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.header-search__submit:hover { background: var(--color-primary); }
.header-search__close {
	flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none;
	background: none; color: var(--color-muted); font-size: 22px; cursor: pointer; line-height: 1;
}
.header-search__close:hover { color: var(--color-text); }
@media (max-width: 600px) {
	.header-search__form { flex-wrap: wrap; }
	.header-search__submit { flex: 1; }
}

/* Polylang language switcher — compact, never wraps or crowds the Contact button.
   Style (text / flags / flags+text / dropdown) is chosen at Customize -> Design -> Language Switcher Style.
   !important below is a deliberate safety net: this exact element has broken (showed as a
   plain bulleted vertical list) twice on the live site due to stale cached CSS being served —
   forcing these core layout rules means even a half-stale cache can't visually break it. */
.lang-switcher, .lang-switcher * { box-sizing: border-box; }
.lang-switcher { flex-shrink: 0; }
.lang-switcher ul, .lang-switcher .polylang {
	display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
	align-items: center; gap: 8px; list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.lang-switcher li { white-space: nowrap; list-style: none !important; margin: 0 !important; }
.lang-switcher a {
	display: flex; align-items: center; gap: 4px;
	padding: 4px 6px; border-radius: 4px; font-size: 12px; font-weight: 700;
	color: var(--color-header-text); opacity: .6;
	transition: opacity .2s ease, background .2s ease;
}
.lang-switcher a:hover { opacity: 1; background: var(--color-light); }
.lang-switcher li.lang-item-current a,
.lang-switcher a.pll-current-lang { opacity: 1; background: var(--color-light); }
.lang-switcher img { width: 18px; height: 12px; object-fit: cover; border-radius: 2px; }

/* Flags-only style: bigger tap target, hide the (empty) text node Polylang still outputs */
.lang-switcher--flags a { padding: 4px; }
.lang-switcher--flags img { width: 22px; height: 15px; }

/* Responsive split: horizontal list on desktop, native <select> dropdown on
   mobile (a dropdown is a much better fit than a shrinking row of flags/
   text once the header gets narrow). Both markups always render — only
   visibility is toggled by breakpoint, so there's no dependency on JS
   re-rendering anything when the viewport crosses the breakpoint. */
.lang-switcher__dropdown { display: none; }
.lang-switcher__dropdown select {
	padding: 6px 10px; border: 1px solid #e2e6e9; border-radius: var(--radius);
	font-size: 13px; font-weight: 600; color: var(--color-header-text);
	background: var(--color-header-bg); cursor: pointer;
}
.site-topbar .lang-switcher__dropdown select { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
/* The OPENED dropdown popup is rendered natively by the browser/OS and
   often ignores the <select>'s own background/color — it silently falls
   back to a plain white popup while still inheriting white text color
   from the rule above, making every option invisible. Force each
   <option> to explicit dark-on-light regardless of what the closed
   select looks like, since that's the one thing most browsers do
   reliably respect for option rows. */
.lang-switcher__dropdown select option {
	color: var(--color-text) !important;
	background: #fff !important;
}

/* Desktop: force horizontal row at the WRAPPER level, independent of the
   inline styles injected onto Polylang's own <ul>/<li> markup — this is a
   second, fully independent guarantee in case Polylang's exact tag
   structure ever differs from what the inline-style regex expects. */
.lang-switcher__list,
.lang-switcher__list ul {
	display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
	align-items: center; gap: 8px; list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.lang-switcher__list li { display: flex !important; list-style: none !important; }

@media (max-width: 900px) {
	.lang-switcher__list { display: none !important; }
	.lang-switcher__dropdown { display: block !important; }
}

.mobile-nav-toggle { display: none; background: none; border: 0; }
@media (max-width: 900px) { .main-nav__list { background: var(--color-header-bg); } }

/* Hero */
.hero { background: linear-gradient(135deg, var(--color-primary), var(--color-dark)); color: #fff; padding: 100px 0; text-align: center; }
.hero__title { font-size: clamp(26px, 5vw, 42px); font-weight: 800; max-width: 780px; margin: 0 auto 20px; line-height: 1.25; }
.hero__subtitle { max-width: 620px; margin: 0 auto 30px; opacity: .9; }

/* Stats */
.stats { background: var(--color-light); padding: 50px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat__number { display: block; font-size: 34px; font-weight: 800; color: var(--color-primary); }
.stat__label { color: var(--color-muted); font-size: 14px; }

/* Facilities — light tint so it doesn't repeat the plain white that
   Solutions ends on right above it (see the alternating rhythm note in
   .solutions below). */
.facilities { padding: 60px 0; background: var(--color-light); }
.facility { flex: 0 0 340px; width: 340px; }
.facility img { aspect-ratio: 860 / 600; width: 100%; height: auto; object-fit: cover; }
.facility figcaption { text-align: center; margin-top: 10px; color: var(--color-primary); font-size: 14px; font-weight: 700; }
@media (max-width: 600px) {
	.facility { flex-basis: 260px; width: 260px; }
}

/* ===================== Generic horizontal scroller w/ arrows =====================
   Used by: Facilities, Clients — a shared, always-interactive (mobile
   included) horizontal scroll-snap track with prev/next arrow buttons.
   Unlike the News carousel (which hides arrows on touch devices and relies
   on swipe), this variant keeps arrows visible on every screen size. */
.scroller { position: relative; padding: 0 44px; }
.scroller__track {
	display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 4px 0 8px;
}
.scroller__track::-webkit-scrollbar { display: none; }
.scroller__track > * { scroll-snap-align: start; }
.scroller__track--projects > .project-card { flex: 0 0 300px; width: 300px; }
.scroller__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e2e6e9;
	background: #fff; color: var(--color-primary); font-size: 14px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 10px rgba(0,0,0,.08); transition: background .2s ease, color .2s ease;
}
.scroller__arrow:hover { background: var(--color-accent); color: #fff; }
.scroller__arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }
.scroller__arrow--prev { left: 0; }
.scroller__arrow--next { right: 0; }
@media (max-width: 480px) {
	.scroller { padding: 0 38px; }
	.scroller__arrow { width: 34px; height: 34px; }
}

/* Section titles */
.section-title { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; text-align: center; margin-bottom: 36px; color: var(--color-primary); }

/* Pagination — archive-style listings (Solutions, Projects, News, Search) */
.archive-pagination { margin-top: 30px; }
.archive-pagination .nav-links { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.archive-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius);
	border: 1px solid #e2e6e9; color: var(--color-text); font-weight: 600; font-size: 14px;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.archive-pagination .page-numbers:hover { background: var(--color-light); border-color: var(--color-accent); }
.archive-pagination .page-numbers.current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.archive-pagination .page-numbers.dots { border: none; }
.archive-pagination .prev.page-numbers,
.archive-pagination .next.page-numbers { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; }
.archive-pagination .prev.page-numbers:hover,
.archive-pagination .next.page-numbers:hover { background: var(--color-accent); border-color: var(--color-accent); }
@media (max-width: 480px) {
	.archive-pagination .nav-links { justify-content: center; }
}

/* Solutions grid — plain white (not --color-light) so it doesn't repeat
   the tint that Stats just used above it; the homepage alternates
   white/light-gray band by band (Stats light -> Solutions white ->
   Facilities light -> ... ) instead of two same-toned sections in a row. */
.solutions { padding: 70px 0; }
.solutions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.solution-card { background: #fff; border-radius: var(--radius); box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: transform .2s; overflow: hidden; }
.solution-card:hover { transform: translateY(-4px); }
.solution-card__image { display: block; aspect-ratio: 3/2; overflow: hidden; background: var(--color-light); }
.solution-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.solution-card:hover .solution-card__image img { transform: scale(1.06); }
.solution-card__body { padding: 24px; }
.solution-card__icon { font-size: 28px; color: var(--color-accent); }
.solution-card__title { margin: 10px 0 8px; font-size: 17px; }
.solution-card__excerpt { color: var(--color-muted); font-size: 14px; }
.solution-card__link { font-weight: 600; }

/* Clients */
.clients { padding: 60px 0; }
.clients__grid { display: flex; gap: 24px; align-items: center; }
.client-logo {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 10px 18px; border: 1px solid #eee; border-radius: var(--radius);
	color: var(--color-muted); font-weight: 600; flex: 0 0 auto; white-space: nowrap;
	height: 130px; box-sizing: border-box;
}
.client-logo img { max-height: 90px; width: auto; max-width: 200px; object-fit: contain; }

/* News */
.news { padding: 70px 0; background: var(--color-light); text-align: center; }
.news__grid { display: grid; grid-template-columns: repeat(var(--news-columns, 3), 1fr); gap: 24px; text-align: left; margin-bottom: 32px; }

/* Homepage News & Insights carousel — horizontal drag/swipe/scroll with
   native browser scroll-snap (no heavy JS, works great on touch out of the box). */
.news-carousel { position: relative; margin-bottom: 32px; }
.news-carousel__track {
	display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; padding: 4px 4px 12px; margin: 0 -4px;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.news-carousel__track::-webkit-scrollbar { display: none; }
.news-carousel__track .news-card { flex: 0 0 300px; scroll-snap-align: start; text-align: left; }
.news-carousel__arrow {
	position: absolute; top: 38%; transform: translateY(-50%);
	width: 42px; height: 42px; border-radius: 50%; border: none;
	background: #fff; color: var(--color-primary); box-shadow: 0 6px 16px rgba(0,0,0,.15);
	cursor: pointer; font-size: 22px; line-height: 1; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.news-carousel__arrow:hover { background: var(--color-accent); color: #fff; }
.news-carousel__arrow--prev { left: -14px; }
.news-carousel__arrow--next { right: -14px; }
.news-carousel__arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }

@media (max-width: 900px) {
	.news-carousel__arrow { display: none; } /* touch swipe handles it on tablets/phones */
	.news-carousel__track { margin: 0; padding: 4px 0 12px; }
}
.news-card, .project-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.project-card__thumb img { aspect-ratio: 600 / 400; width: 100%; height: auto; object-fit: cover; }
.project-card { display: block; color: inherit; }
.project-card:hover { color: inherit; }
.project-card__cta { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--color-accent); font-size: 14px; }
.project-card:hover .project-card__cta { text-decoration: underline; }
.news-card { padding-bottom: 20px; }
.news-card img { aspect-ratio: 400 / 260; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); }
.news-card__date { display: block; padding: 16px 16px 0; color: var(--color-muted); font-size: 13px; }
.news-card h3 { padding: 0 16px; margin: 8px 0; }
.news-card p { padding: 0 16px; color: var(--color-muted); font-size: 14px; }
.project-card__body { padding: 16px; }
.project-card__meta { color: var(--color-muted); font-size: 14px; }
.project-card__stat { color: var(--color-accent); font-weight: 700; }
.project-meta { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--color-muted); font-size: 14px; }

/* Single Client detail page */
.single-client__photo { margin-bottom: 24px; border-radius: var(--radius); overflow: hidden; }
.single-client__photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.single-client__website { margin-bottom: 20px; }
.single-client__website a { font-weight: 700; color: var(--color-accent); }
.single-client__website a:hover { text-decoration: underline; }
.project-meta strong { color: var(--color-primary); }
.project-stat-line { color: var(--color-accent); font-weight: 700; font-size: 17px; margin-bottom: 20px; }

/* Related content block at the bottom of Solution/Project detail pages */
.related-block { padding: 50px 0; }
.related-block--alt { background: var(--color-light); }
.clients__grid--static { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* Contact */
.contact-cta { padding: 70px 0; }
.contact-cta__grid, .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact-list { list-style: none; padding: 0; }
.contact-list li { margin-bottom: 10px; }
.contact-form { display: flex; flex-direction: column; gap: 12px; background: var(--color-light); padding: 28px; border-radius: var(--radius); }
.contact-form .g-recaptcha, .sidebar-newsletter__form .g-recaptcha { margin: 4px 0; transform: scale(0.95); transform-origin: left; }
.contact-form input, .contact-form textarea { padding: 10px 12px; border: 1px solid #ddd; border-radius: var(--radius); font-family: inherit; }
.form-captcha { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px dashed #ddd; border-radius: var(--radius); padding: 12px 14px; }
.form-captcha label { font-size: 14px; font-weight: 600; color: var(--color-text); }
.form-captcha input[type="text"] { max-width: 100px; }
.hp-field { position: absolute; left: -9999px; }
.form-notice--success { color: #147a3f; }
.form-notice--error { color: #b3261e; }

/* Footer */
.site-footer {
	background: var(--color-dark); color: #cfd6dc; padding: 50px 0 20px;
	position: relative; background-size: cover; background-position: center;
}
.site-footer--has-image::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(rgba(16,24,32,.88), rgba(16,24,32,.92));
}
.site-footer--has-image > .container { position: relative; z-index: 1; }
/* Flexbox instead of a fixed-column grid: when a column is empty (e.g. no
   footer widgets, no QR codes set), the remaining columns grow to fill the
   row automatically instead of leaving a blank gap where it used to sit. */
.footer-grid { display: flex; flex-wrap: wrap; gap: 32px 24px; }
.footer-grid > * { flex: 1 1 180px; min-width: 0; }
.footer-brand { flex: 1.8 1 240px; }
.footer-brand p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; } /* browser's default <p> margin (~1em top+bottom) was stacking on top of the column gap, making this transition look wider than the others */
.footer-grid h4 { margin: 0 0 16px; font-size: 15px; }
.footer-contact { flex: 1.2 1 200px; }
.footer-qr__grid { display: flex; gap: 16px; }
.footer-qr__grid figure { margin: 0; text-align: center; }
.footer-qr__grid img { border-radius: 4px; background: #fff; padding: 4px; }
.footer-qr__grid figcaption { font-size: 12px; margin-top: 6px; color: #8b94a0; }
.footer-grid a { color: #cfd6dc; }
.footer-links__list { list-style: none; padding: 0; margin: 0; }
.footer-links__list li { margin-bottom: 10px; white-space: nowrap; }
.footer-links__list a { font-size: 14px; }

/* Footer contact list: icon in a highlighted circle instead of plain emoji */
.footer-contact ul { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 14px; }
.footer-contact__icon {
	flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--color-accent); color: #fff;
}
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 30px; padding-top: 16px; font-size: 13px; color: #8b94a0; text-align: center; }

/* Pages / misc */
.page-content, .page-about, .page-contact, .sampu-single-solution, .sampu-single-project, .sampu-single-client, .single-news, .archive-news, .archive-projects, .error-404 { padding: 50px 20px; }
/* .archive-solutions is NOT in the list above on purpose — it wraps BOTH
   the full-bleed Smart Parking Hub (which must reach the browser edge)
   and the simple New Energy/Intelligent Manufacturing grid (which needs
   normal contained padding). Giving it padding unconditionally used to
   choke the hub's full-bleed sections in by 20px on each side. Only the
   simple-grid branch gets its own spacing now, scoped to itself: */
.archive-solutions__simple { padding-top: 50px; padding-bottom: 50px; }

/* 404 page */
.error-404__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.error-404__code { font-size: 90px; font-weight: 800; color: var(--color-accent); line-height: 1; margin: 0; opacity: .5; }
.error-404__text { color: var(--color-muted); margin: 10px 0 30px; line-height: 1.7; }
.error-404__search { display: flex; gap: 10px; margin-bottom: 36px; }
.error-404__search .header-search__input { flex: 1; padding: 12px 18px; border: 1px solid #e2e6e9; border-radius: var(--radius); font-size: 15px; }
.error-404__links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.error-404__link {
	display: flex; align-items: center; gap: 10px; justify-content: center;
	padding: 14px; border: 1px solid #e2e6e9; border-radius: var(--radius);
	color: var(--color-primary); font-weight: 600; transition: background .2s ease, border-color .2s ease;
}
.error-404__link:hover { background: var(--color-light); border-color: var(--color-accent); }
@media (max-width: 480px) {
	.error-404__links { grid-template-columns: 1fr; }
	.error-404__search { flex-direction: column; }
}

/* ===================== Smart Parking business-line hub page ===================== */
.hub-section { padding: 60px 0; }
.hub-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.hub-teaser-cta { text-align: center; padding: 40px 20px 60px; background: var(--color-light); }

/* ===================== Shortcode: CTA banner ===================== */
.cta-banner { padding: 60px 20px; text-align: center; }
.cta-banner--dark { background: linear-gradient(135deg, var(--color-primary), var(--color-dark)); color: #fff; }
.cta-banner--light { background: var(--color-light); color: var(--color-text); }
.cta-banner__inner { max-width: 640px; margin: 0 auto; }
.cta-banner__inner h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 0 0 12px; }
.cta-banner__inner p { margin: 0 0 24px; opacity: .9; }
.cta-banner--light .cta-banner__inner p { color: var(--color-muted); }
.hub-section--alt { background: var(--color-light); }
.hub-section__eyebrow {
	display: block; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .12em;
	text-transform: uppercase; color: var(--color-accent); margin-bottom: 6px;
}
.hub-section .section-title { margin-bottom: 4px; }
.hub-section__lead { text-align: center; color: var(--color-muted); margin: 0 0 36px; }

/* Transport System cards */
.transport-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 800px; margin: 0 auto; }
.transport-card {
	display: block; background: #fff; border-radius: var(--radius); overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: transform .3s ease, box-shadow .3s ease;
}
.transport-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,.1); }
.transport-card img { aspect-ratio: 3/2; object-fit: cover; }
.transport-card h3 { padding: 16px; margin: 0; font-size: 16px; color: var(--color-primary); text-align: center; }

/* Garage System — hover-to-expand accordion (desktop); stacks as a normal
   grid on touch/narrow screens where hover doesn't make sense. */
.garage-accordion { display: flex; gap: 8px; height: 420px; }
.garage-panel {
	position: relative; flex: 1; min-width: 0; border-radius: var(--radius); overflow: hidden;
	background-size: cover; background-position: center; background-color: var(--color-dark);
	transition: flex-grow .5s cubic-bezier(.2,.7,.2,1);
	display: block; color: #fff;
}
.garage-panel__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(11,61,99,.92) 0%, rgba(16,24,32,.35) 60%, rgba(16,24,32,.55) 100%);
}
.garage-panel__collapsed {
	position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center;
	justify-content: flex-end; padding-bottom: 24px; gap: 6px; opacity: 1; transition: opacity .3s ease;
}
.garage-panel__code { font-size: 22px; font-weight: 800; letter-spacing: .05em; }
.garage-panel__name {
	writing-mode: vertical-rl; text-orientation: mixed; font-size: 13px; font-weight: 600;
	max-height: 140px; opacity: .9;
}
.garage-panel__expanded {
	position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
	padding: 28px; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease;
}
.garage-panel__expanded h3 { font-size: 20px; margin: 0 0 10px; }
.garage-panel__expanded p { font-size: 13px; line-height: 1.6; opacity: .9; margin: 0 0 14px; }
.garage-panel__cta { font-weight: 700; font-size: 14px; }

.garage-panel:hover,
.garage-panel:focus-visible { flex-grow: 3.2; }
.garage-panel:hover .garage-panel__collapsed,
.garage-panel:focus-visible .garage-panel__collapsed { opacity: 0; }
.garage-panel:hover .garage-panel__expanded,
.garage-panel:focus-visible .garage-panel__expanded { opacity: 1; transform: none; }
.garage-panel:hover .garage-panel__name,
.garage-panel:focus-visible .garage-panel__name { display: none; }

/* Hardware terminal icon grid */
.hardware-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.hardware-card {
	background: #fff; border: 1px solid #e6ebee; border-radius: var(--radius); padding: 24px 12px;
	text-align: center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hardware-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.08); border-color: var(--color-accent); }
.hardware-card__icon { display: block; font-size: 30px; color: var(--color-accent); margin-bottom: 10px; }
.hardware-card__label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); }

@media (max-width: 900px) {
	.hardware-grid { grid-template-columns: repeat(3, 1fr); }
	.garage-accordion { flex-direction: column; height: auto; }
	.garage-panel { height: 90px; flex: none; }
	.garage-panel__collapsed { flex-direction: row; justify-content: space-between; padding: 0 20px; }
	.garage-panel__name { writing-mode: horizontal-tb; max-height: none; }
	/* On touch, tap toggles via the .is-open class added by JS instead of relying on :hover */
	.garage-panel.is-open { flex: none; height: 260px; }
	.garage-panel.is-open .garage-panel__collapsed { opacity: 0; }
	.garage-panel.is-open .garage-panel__expanded { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
	.transport-grid { grid-template-columns: 1fr; }
	.hardware-grid { grid-template-columns: repeat(2, 1fr); }
}
.page-title { font-size: clamp(24px, 3.6vw, 32px); font-weight: 800; color: var(--color-primary); margin-bottom: 20px; }
.breadcrumb { color: var(--color-muted); font-size: 14px; margin-bottom: 20px; }

/* ===================== Page Header Banner (About/Contact/Careers/News/Solutions/Search/etc.) ===================== */
.page-header-banner {
	position: relative; background-color: var(--color-dark);
	background-size: cover; background-position: center;
	display: flex; align-items: center;
	margin-bottom: 40px;
}
.page-header-banner::before {
	content: ""; position: absolute; inset: 0;
}
.page-header-banner--overlay-dark::before { background: linear-gradient(120deg, rgba(11,61,99,.85), rgba(16,24,32,.7)); }
.page-header-banner--overlay-light::before { background: rgba(255,255,255,.82); }
.page-header-banner--overlay-none::before { background: none; }

.page-header-banner--short { min-height: 160px; }
.page-header-banner--medium { min-height: 260px; }
.page-header-banner--tall { min-height: 400px; }

/* No image set: fall back to the theme's dark gradient, same as the old plain header */
.page-header-banner--plain { background: linear-gradient(135deg, var(--color-primary), var(--color-dark)); }
.page-header-banner--plain::before { background: none; }

.page-header-banner__inner { position: relative; z-index: 1; text-align: center; width: 100%; }
.page-header-banner__title {
	font-size: clamp(26px, 4vw, 40px); font-weight: 800; color: #fff; margin: 0 0 10px;
}
.page-header-banner--overlay-light .page-header-banner__title { color: var(--color-primary); }
.page-header-banner .breadcrumb { color: rgba(255,255,255,.75); margin-bottom: 0; }
.page-header-banner .breadcrumb a { color: rgba(255,255,255,.9); }
.page-header-banner--overlay-light .breadcrumb,
.page-header-banner--overlay-light .breadcrumb a { color: var(--color-muted); }

@media (max-width: 600px) {
	.page-header-banner--medium { min-height: 200px; }
	.page-header-banner--tall { min-height: 280px; }
}
.placeholder-notice { background: #fff8e5; border: 1px dashed #e0c46c; padding: 14px 18px; border-radius: var(--radius); color: #7a5c00; }
/* ===================== About page — History Timeline ===================== */
.timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 760px; position: relative; }
.timeline::before {
	content: ""; position: absolute; left: 29px; top: 8px; bottom: 8px; width: 2px;
	background: linear-gradient(180deg, var(--color-accent), var(--color-light));
}
.timeline li {
	display: flex; gap: 24px; align-items: flex-start; position: relative;
	margin-bottom: 32px; padding-left: 0;
}
.timeline li:last-child { margin-bottom: 0; }
.timeline__year {
	flex-shrink: 0; position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
	color: #fff; font-weight: 800; font-size: 13px; text-align: center; line-height: 1.15;
	box-shadow: 0 0 0 6px #fff, 0 4px 14px rgba(11,61,99,.25);
}
.timeline__text {
	background: var(--color-light); border-radius: var(--radius); padding: 16px 20px;
	font-size: 14px; line-height: 1.7; color: var(--color-text); flex: 1;
	position: relative; margin-top: 6px;
}
.timeline__text::before {
	content: ""; position: absolute; left: -8px; top: 18px;
	border: 8px solid transparent; border-right-color: var(--color-light);
}

/* Stagger each timeline entry in as it scrolls into view */
.timeline.reveal-group > li {
	opacity: 0; transform: translateX(-24px);
	transition: opacity .6s ease, transform .6s ease;
}
.timeline.reveal-group.is-visible > li { opacity: 1; transform: none; }
.timeline.reveal-group.is-visible > li:nth-child(1) { transition-delay: .05s; }
.timeline.reveal-group.is-visible > li:nth-child(2) { transition-delay: .2s; }
.timeline.reveal-group.is-visible > li:nth-child(3) { transition-delay: .35s; }
.timeline.reveal-group.is-visible > li:nth-child(4) { transition-delay: .5s; }
.timeline.reveal-group.is-visible > li:nth-child(5) { transition-delay: .65s; }

@media (max-width: 600px) {
	.timeline::before { left: 23px; }
	.timeline__year { width: 48px; height: 48px; font-size: 11px; }
	.timeline li { gap: 16px; }
}

/* Honors grid: give each badge its own subtle pop-in stagger too */
.honors-grid.reveal-group > li {
	opacity: 0; transform: translateY(16px) scale(.96);
	transition: opacity .5s ease, transform .5s ease;
}
.honors-grid.reveal-group.is-visible > li { opacity: 1; transform: none; }
.honors-grid li {
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.honors-grid li:hover {
	transform: translateY(-4px); background: var(--color-primary); color: #fff;
	box-shadow: 0 10px 22px rgba(11,61,99,.2);
}

.honors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; padding: 0; }
.honors-grid li { background: var(--color-light); padding: 14px; border-radius: var(--radius); text-align: center; }

/* ===================== Floating Contact Button ===================== */
.floating-contact {
	position: fixed; bottom: 26px; z-index: 999;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.floating-contact--right { right: 24px; }
.floating-contact--left { left: 24px; }

.floating-contact__items {
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	margin-bottom: 4px;
}
.floating-contact__item {
	display: flex; align-items: center;
	width: 48px; height: 48px; border-radius: 24px; /* fixed px (not %) so it stays a true circle/pill at every width during the transition — 50% would stretch into an oval whenever width != height */
	padding-left: 12px;
	background: #fff; color: var(--color-primary);
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
	overflow: hidden; white-space: nowrap;
	opacity: 0; transform: translateY(16px) scale(.6);
	transition: opacity .25s ease, transform .25s ease, width .3s cubic-bezier(.4,0,.2,1), background .2s ease, color .2s ease, box-shadow .2s ease;
	pointer-events: none;
	will-change: width;
}
.floating-contact.is-open .floating-contact__item {
	opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.floating-contact.is-open .floating-contact__items .floating-contact__item:nth-child(1) { transition-delay: .05s; }
.floating-contact.is-open .floating-contact__items .floating-contact__item:nth-child(2) { transition-delay: .12s; }
.floating-contact.is-open .floating-contact__items .floating-contact__item:nth-child(3) { transition-delay: .19s; }

.floating-contact__item--zalo:hover { background: #0091d5; color: #fff; }
.floating-contact__item--wechat { position: relative; cursor: default; }
.floating-contact__item--wechat:hover,
.floating-contact__item--wechat:focus-within { background: #07c160; color: #fff; }

/* WeChat has no reliable "click to open chat" URL like Zalo/tel/mailto —
   scanning a QR code with the WeChat app is the standard contact pattern,
   so hovering (or focusing, for keyboard users) reveals it instead of
   navigating anywhere. */
.floating-contact__qr-popup {
	position: absolute; top: 50%; transform: translateY(-50%) scale(.92);
	right: calc(100% + 14px);
	background: #fff; border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0,0,0,.18);
	padding: 12px; width: 164px; text-align: center;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 20;
}
.floating-contact--left .floating-contact__qr-popup { right: auto; left: calc(100% + 14px); }
.floating-contact__item--wechat:hover .floating-contact__qr-popup,
.floating-contact__item--wechat:focus-within .floating-contact__qr-popup {
	opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); pointer-events: auto;
}
.floating-contact__qr-popup img { width: 100%; height: auto; border-radius: 4px; }
.floating-contact__qr-caption { display: block; margin-top: 8px; font-size: 11px; color: var(--color-muted); line-height: 1.4; white-space: normal; }
@media (max-width: 380px) {
	.floating-contact__qr-popup { width: 130px; right: calc(100% + 8px); }
	.floating-contact--left .floating-contact__qr-popup { left: calc(100% + 8px); }
}

.floating-contact__item--call:hover { background: #17a34a; color: #fff; }
.floating-contact__item--email:hover { background: var(--color-primary); color: #fff; }

.floating-contact__icon { flex: 0 0 auto; display: flex; }
.floating-contact__label {
	flex: 0 0 auto; margin-left: 8px; font-size: 13px; font-weight: 700;
	opacity: 0; transition: opacity .15s ease;
}
.floating-contact__item:hover {
	width: 148px; /* fixed target width, not "auto" — lets the browser interpolate the transition smoothly frame by frame */
}
.floating-contact__item:hover .floating-contact__label { opacity: 1; transition-delay: .08s; }

.floating-contact__toggle {
	position: relative; width: 58px; height: 58px; border-radius: 50%; border: none;
	background: var(--color-accent); color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 22px rgba(0,145,213,.4);
	transition: transform .3s ease, background .3s ease;
}
.floating-contact__toggle:hover { background: var(--color-primary); }
.floating-contact__toggle-icon { display: flex; transition: transform .3s ease; }
.floating-contact.is-open .floating-contact__toggle-icon { transform: rotate(135deg); }

.floating-contact__pulse {
	position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid var(--color-accent);
	animation: sampu-pulse 2.2s cubic-bezier(.2,.7,.2,1) infinite;
}
.floating-contact.is-open .floating-contact__pulse { animation: none; opacity: 0; }
@keyframes sampu-pulse {
	0% { transform: scale(1); opacity: .7; }
	100% { transform: scale(1.9); opacity: 0; }
}

@media (max-width: 600px) {
	.floating-contact { bottom: 18px; }
	.floating-contact--right { right: 16px; }
	.floating-contact--left { left: 16px; }
	.floating-contact__toggle { width: 52px; height: 52px; }
	/* Touch devices don't really "hover" — keep the buttons as plain circles so nothing gets stuck mid-expand. */
	.floating-contact__item:hover { width: 48px; }
	.floating-contact__item:hover .floating-contact__label { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.floating-contact__pulse { animation: none; }
}

/* ===================== Content + Sidebar Layout ===================== */
.content-layout {
	display: grid; grid-template-columns: 1fr 340px; gap: 48px;
	align-items: start; padding: 50px 20px;
}
.content-layout > main { padding: 0; min-width: 0; }
.content-layout .sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; }

.news-card__category {
	display: inline-block; background: var(--color-light); color: var(--color-accent);
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
	padding: 4px 10px; border-radius: 20px; margin-bottom: 8px;
}

/* ============================================================
   SIDEBAR WIDGETS — generic wrapper applied to every widget in the
   "News & Page Sidebar" via register_sidebar()'s before_widget/after_widget.
   Most widgets (Search, Categories, Recent Posts, Quick Solutions, and any
   core Text/Image widget an admin drops in) get the plain light-gray boxed
   look below. A few widgets already ship their own distinct full-bleed
   design (Hotline, Newsletter, Promo CTA, Featured Project) and opt out of
   the generic box so they don't end up "double-boxed".
   ============================================================ */
.sidebar-widget-wrap:not(.widget_sampu_hotline):not(.widget_sampu_newsletter):not(.widget_sampu_promo_cta):not(.widget_sampu_featured_project) {
	background: var(--color-light); border-radius: var(--radius); padding: 20px;
}
.sidebar-widget-title, .sidebar-widget-wrap .widget-title { margin: 0 0 14px; font-size: 16px; color: var(--color-primary); }

.news-card__category {
	display: inline-block; background: var(--color-light); color: var(--color-accent);
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
	padding: 4px 10px; border-radius: 20px; margin-bottom: 8px;
}

/* Hotline CTA box — highest-intent conversion element, styled to stand out */
.sidebar-hotline {
	background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
	color: #fff; padding: 26px 22px; border-radius: var(--radius); text-align: center;
}
.sidebar-hotline__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.15);
	margin-bottom: 12px; animation: sampu-pulse-soft 2.4s ease infinite;
}
@keyframes sampu-pulse-soft {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.25); }
	50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}
.sidebar-hotline__label { font-size: 14px; opacity: .9; margin: 0 0 6px; }
.sidebar-hotline__number { display: block; font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.sidebar-hotline__number:hover { color: var(--color-accent); }
.sidebar-hotline__hours { font-size: 12px; opacity: .75; }

/* Core "Search" widget */
.widget_search form { display: flex; }
.widget_search label { flex: 1; margin: 0; }
.widget_search input[type="search"], .widget_search input[type="text"] {
	width: 100%; padding: 10px 12px; border: 1px solid #e2e6e9; border-radius: var(--radius) 0 0 var(--radius);
	font-family: inherit; box-sizing: border-box;
}
.widget_search input[type="submit"] {
	padding: 0 16px; border: none; background: var(--color-accent); color: #fff;
	border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; font-weight: 600;
}

/* Core "Categories" widget */
.widget_categories ul { list-style: none; margin: 0; padding: 0; }
.widget_categories li {
	display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e6ebee; font-size: 14px;
}
.widget_categories li:last-child { border-bottom: none; }
.widget_categories .count { color: var(--color-muted); font-size: 12px; }

/* Core "Recent Posts" widget */
.widget_recent-posts ul, .widget_recent_entries ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.widget_recent-posts li, .widget_recent_entries li { font-size: 13px; }
.widget_recent-posts a, .widget_recent_entries a { font-weight: 600; color: var(--color-text); }
.widget_recent-posts a:hover, .widget_recent_entries a:hover { color: var(--color-accent); }
.widget_recent-posts .post-date, .widget_recent_entries .post-date { display: block; font-size: 11px; color: var(--color-muted); }

/* Quick Solutions cross-sell links */
.sidebar-quicklinks-list { list-style: none; margin: 0; padding: 0; }
.sidebar-quicklinks-list li { border-bottom: 1px solid #e6ebee; }
.sidebar-quicklinks-list li:last-child { border-bottom: none; }
.sidebar-quicklinks-list a {
	display: flex; align-items: center; gap: 8px; padding: 11px 0;
	font-size: 14px; font-weight: 600; color: var(--color-text);
	transition: color .2s ease, gap .2s ease;
}
.sidebar-quicklinks-list a:hover { color: var(--color-accent); gap: 12px; }
.sidebar-quicklinks__arrow { color: var(--color-accent); font-weight: 800; }

/* Solution Categories widget (classic "Categories"-widget style) */
.sidebar-category-list { list-style: none; margin: 0; padding: 0; }
.sidebar-category-list li { border-bottom: 1px solid #e6ebee; }
.sidebar-category-list li:last-child { border-bottom: none; }
.sidebar-category-list a {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 11px 0; font-size: 14px; font-weight: 600; color: var(--color-text);
	transition: color .2s ease;
}
.sidebar-category-list a:hover { color: var(--color-accent); }
.sidebar-category-list__count {
	font-size: 12px; font-weight: 700; color: var(--color-muted);
	background: var(--color-light); border-radius: 999px; padding: 2px 9px;
}
.sidebar-category-dropdown {
	width: 100%; padding: 10px 12px; border: 1px solid #e2e6e9; border-radius: var(--radius);
	font-size: 14px; background: #fff; cursor: pointer;
}

/* Featured Project spotlight (social proof) */
.sidebar-spotlight { background: #fff; border: 1px solid #e6ebee; border-radius: var(--radius); padding: 0; overflow: hidden; }
.sidebar-spotlight__eyebrow {
	display: block; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em; padding: 6px 14px;
}
.sidebar-spotlight img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.sidebar-spotlight h4 { margin: 14px 14px 4px; font-size: 15px; }
.sidebar-spotlight h4 a { color: var(--color-primary); }
.sidebar-spotlight__stat { margin: 0 14px 2px; color: var(--color-accent); font-weight: 700; font-size: 13px; }
.sidebar-spotlight__client { margin: 0 14px 14px; color: var(--color-muted); font-size: 12px; }

/* Secondary promo CTA box */
.sidebar-cta { background: #fff; border: 1px solid #e6ebee; border-radius: var(--radius); overflow: hidden; padding: 0; text-align: center; }
.sidebar-cta img { width: 100%; }
.sidebar-cta h4 { margin: 18px 20px 8px; font-size: 16px; color: var(--color-primary); }
.sidebar-cta p { margin: 0 20px 16px; font-size: 13px; color: var(--color-muted); }
.sidebar-cta .btn { margin: 0 20px 20px; }

/* Trust Badges widget */
.sidebar-trust-badges { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid #e6ebee; border-radius: var(--radius); padding: 20px; }
.sidebar-trust-badges__item { display: flex; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; }
.sidebar-trust-badges__item:last-child { padding-bottom: 0; border-bottom: none; }
.sidebar-trust-badges__number { font-size: 22px; font-weight: 800; color: var(--color-primary); flex-shrink: 0; min-width: 64px; }
.sidebar-trust-badges__label { font-size: 13px; color: var(--color-muted); line-height: 1.4; }

/* Image Highlight widget — reuses .sidebar-cta box styling, hover-lift for extra polish */
.sidebar-image-highlight { transition: transform .25s ease, box-shadow .25s ease; }
.sidebar-image-highlight:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.1); }
.sidebar-image-highlight img { aspect-ratio: 4/3; object-fit: cover; }

/* Newsletter / lead capture */
.sidebar-newsletter { background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); color: #fff; }
.sidebar-newsletter .sidebar-widget-title, .widget_sampu_newsletter .widget-title { color: #fff; }
.sidebar-newsletter p, .sidebar-newsletter-inner p { font-size: 13px; opacity: .9; margin: 0 0 14px; }
.sidebar-newsletter__form { display: flex; flex-direction: column; gap: 10px; }
.sidebar-newsletter__form input[type="email"] {
	padding: 10px 12px; border: none; border-radius: var(--radius); font-family: inherit;
}
.sidebar-newsletter__form .btn--primary { background: #fff; color: var(--color-primary); }
.sidebar-newsletter__form .btn--primary:hover { background: var(--color-dark); color: #fff; }
.sidebar-newsletter .form-notice--success, .sidebar-newsletter-inner .form-notice--success,
.sidebar-newsletter .form-notice--error, .sidebar-newsletter-inner .form-notice--error { color: #fff; font-weight: 600; font-size: 14px; }

/* Social share row */
.social-share { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
.social-share__label { font-size: 13px; color: var(--color-muted); font-weight: 600; }
.social-share__btn {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%; background: var(--color-light);
	color: var(--color-muted); border: none; cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.social-share__btn:hover { transform: translateY(-2px); }
.social-share__btn--fb:hover { background: #1877f2; color: #fff; }
.social-share__btn--zalo:hover { background: #0091d5; color: #fff; }
.social-share__btn--x:hover { background: #101820; color: #fff; }
.social-share__btn--copy:hover { background: var(--color-primary); color: #fff; }

.related-posts { margin-top: 50px; padding-top: 40px; border-top: 1px solid #e6ebee; }

/* Responsive video embed (About page) */
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; margin-top: 28px; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
	.content-layout { grid-template-columns: 1fr; gap: 32px; }
	.content-layout .sidebar { position: static; }
}

/* ===================== Header Banner Slider ===================== */
.banner-slider {
	position: relative;
	height: clamp(400px, 60vw, 640px);
	overflow: hidden;
	background: var(--color-dark);
}
.banner-slider__track { position: relative; width: 100%; height: 100%; }
.banner-slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; visibility: hidden;
	transition: opacity 1s ease;
	display: flex; align-items: center;
}
.banner-slide.is-active { opacity: 1; visibility: visible; }
.banner-slide__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(120deg, rgba(11,61,99,.82), rgba(16,24,32,.55));
}
.banner-slide__content { position: relative; z-index: 2; color: #fff; text-align: center; }
.banner-slide.align-left .banner-slide__content { text-align: left; }
.banner-slide .hero__title, .banner-slide .hero__subtitle { opacity: 1; transform: none; animation: none; }
.banner-slide.is-active .hero__title { animation: sampu-fade-up .7s ease .1s both; }
.banner-slide.is-active .hero__subtitle { animation: sampu-fade-up .7s ease .25s both; }
.banner-slide.is-active .btn { animation: sampu-fade-up .7s ease .4s both; }
.banner-slide__content .btn { margin-bottom: 30px; } /* keeps the button clear of the centered dots below it */

.banner-slider__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%; border: none;
	background: rgba(255,255,255,.15); color: #fff; font-size: 24px; line-height: 1;
	cursor: pointer; z-index: 3; transition: background .2s ease;
}
.banner-slider__arrow:hover { background: rgba(255,255,255,.32); }
.banner-slider__arrow--prev { left: 24px; }
.banner-slider__arrow--next { right: 24px; }

.banner-slider__dots { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.banner-slider__dot {
	width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: transparent;
	cursor: pointer; padding: 0; transition: background .2s ease, transform .2s ease;
}
.banner-slider__dot.is-active { background: #fff; transform: scale(1.15); }

@media (max-width: 600px) {
	.banner-slider__arrow { display: none; }
}

/* ===================== Service Scenarios ===================== */


/* ===================== Effects & animation ===================== */

/* Scroll-reveal: elements fade + slide up into view (see main.js) */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
	will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Stagger children inside a grid automatically */
.solutions__grid.reveal-group > *,
.news__grid.reveal-group > *,
.news-carousel__track.reveal-group > *,
.clients__grid.reveal-group > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}
.reveal-group.is-visible > * { opacity: 1; transform: none; }
.reveal-group.is-visible > *:nth-child(1) { transition-delay: .05s; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: .19s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: .26s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: .33s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: .40s; }

/* Header: shrink + shadow after scrolling */
.site-header { transition: box-shadow .25s ease, padding .25s ease; }
.site-header.is-scrolled { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.site-header.is-scrolled .site-header__inner { padding-top: 8px; padding-bottom: 8px; }

/* Hero: subtle entrance + animated gradient */
.hero {
	background-size: 200% 200%;
	animation: sampu-gradient-shift 12s ease infinite;
}
@keyframes sampu-gradient-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.hero__title, .hero__subtitle, .hero .btn {
	opacity: 0; transform: translateY(18px);
	animation: sampu-fade-up .8s ease forwards;
}
.hero__title { animation-delay: .1s; }
.hero__subtitle { animation-delay: .3s; }
.hero .btn { animation-delay: .5s; }
@keyframes sampu-fade-up {
	to { opacity: 1; transform: none; }
}

/* Stat numbers count up via JS (see main.js); this just smooths the digits */
.stat__number { transition: color .3s ease; font-variant-numeric: tabular-nums; }
.stat { transition: transform .25s ease; }
.stat:hover { transform: translateY(-4px); }

/* Card hover polish */
.solution-card { transition: transform .3s ease, box-shadow .3s ease; }
.solution-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(11,61,99,.15); }
.solution-card__icon { transition: transform .3s ease; }
.solution-card:hover .solution-card__icon { transform: scale(1.15) rotate(-4deg); }
.solution-card__link { position: relative; }
.solution-card__link::after {
	content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--color-accent);
	transition: width .25s ease;
}
.solution-card__link:hover::after { width: 100%; }

.news-card, .project-card { transition: transform .3s ease, box-shadow .3s ease; }
.news-card:hover, .project-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,.1); }
.news-card a img, .project-card__thumb img { transition: transform .5s ease; }
.news-card:hover img, .project-card:hover .project-card__thumb img { transform: scale(1.06); }
.news-card__date, .project-card__body { overflow: hidden; }

.client-logo { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.client-logo:hover { transform: translateY(-3px); border-color: var(--color-accent); box-shadow: 0 6px 16px rgba(0,0,0,.08); }

.facility { overflow: hidden; border-radius: var(--radius); }
.facility img { transition: transform .5s ease; }
.facility:hover img { transform: scale(1.05); }

/* Buttons: ripple-free, smooth lift */
.btn { transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.15); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* Nav link underline sweep */
.main-nav__list a { position: relative; }
.main-nav__list a::after {
	content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--color-accent);
	transition: width .25s ease;
}
.main-nav__list a:hover::after { width: 100%; }

/* Mobile-only CTA appended as the last menu item (see header.php items_wrap) —
   hidden by default; only shown inside the mobile slide-down panel below. */
.main-nav__mobile-cta-item { display: none; }
.main-nav__mobile-cta-item .main-nav__mobile-cta::after { display: none; } /* no underline-sweep on a button */

/* Mobile nav slide-down */
@media (max-width: 900px) {
	.main-nav__list {
		display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; max-height: 0; overflow: hidden; overflow-y: auto; box-shadow: 0 8px 16px rgba(0,0,0,.1);
		transition: max-height .35s ease;
	}
	.main-nav__list.is-open { max-height: 80vh; }
	.main-nav__list a { display: block; padding: 14px 20px; border-bottom: 1px solid #f0f0f0; }
	.main-nav__mobile-cta-item { display: block; padding: 12px 20px 16px; border-bottom: none; }
	.main-nav__list a.main-nav__mobile-cta,
	.main-nav__list button.main-nav__mobile-cta {
		display: block; width: 100%; text-align: center; justify-content: center;
		padding: 12px 20px; border: none; border-radius: var(--radius); font: inherit; cursor: pointer;
	}
	.site-header__actions { display: none; } /* replaced on mobile by .main-nav__mobile-cta inside the dropdown */

	/* Multi-level accordion (mobile): submenus collapse by default, a
	   dedicated toggle button (injected by JS) expands them — the parent
	   link itself still navigates normally when tapped directly. */
	.main-nav__list .menu-item-has-children { position: relative; display: flex; flex-wrap: wrap; }
	.main-nav__list .menu-item-has-children > a { flex: 1; border-bottom: none; }
	.main-nav__list .menu-item-has-children::after { content: ""; flex-basis: 100%; border-bottom: 1px solid #f0f0f0; }
	.main-nav__list .menu-item-has-children > a::before { display: none; }
	.submenu-toggle {
		flex-shrink: 0; width: 48px; background: none; border: 0; cursor: pointer;
		display: flex; align-items: center; justify-content: center;
	}
	.submenu-toggle span {
		width: 9px; height: 9px; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted);
		transform: rotate(45deg); transition: transform .25s ease;
	}
	.submenu-toggle.is-open span { transform: rotate(-135deg); }
	.main-nav__list .menu-item-has-children { width: 100%; }
	.main-nav__list .sub-menu {
		display: none; list-style: none; margin: 0; padding: 0;
		flex-basis: 100%; width: 100%;
		background: var(--color-submenu-mobile-bg, var(--color-light));
	}
	.main-nav__list .sub-menu.is-open { display: block; width: 100%; }
	.main-nav__list .sub-menu li { width: 100%; }
	.main-nav__list .sub-menu a {
		padding-left: 36px; font-size: 14px; width: 100%;
		color: var(--color-submenu-mobile-text, var(--color-text));
	}
	.main-nav__list .sub-menu .sub-menu a { padding-left: 52px; }

	.mobile-nav-toggle span {
		display: block; width: 22px; height: 2px; background: var(--color-primary); margin: 5px 0; transition: transform .25s ease, opacity .25s ease;
	}
	.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Smooth scrolling for in-page anchors (About page sections etc.) */
html { scroll-behavior: smooth; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal, .reveal-group > *, .hero__title, .hero__subtitle, .hero .btn, .hero {
		animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
	}
}

/* Responsive */
@media (max-width: 900px) {
	.stats__grid, .solutions__grid, .news__grid, .contact-cta__grid, .contact-grid, .honors-grid { grid-template-columns: 1fr 1fr; }
	.mobile-nav-toggle { display: block; }
}
@media (max-width: 600px) {
	.stats__grid, .solutions__grid, .news__grid, .contact-cta__grid, .contact-grid, .honors-grid { grid-template-columns: 1fr; }
	.footer-grid { flex-direction: column; text-align: center; gap: 22px; }
	.footer-contact li { justify-content: center; margin-bottom: 10px; }
	.footer-links__list li { margin-bottom: 6px; }
	.footer-links__list li { white-space: normal; }
	.footer-qr__grid { justify-content: center; }
	.site-header__actions .btn--contact { padding: 7px 14px; font-size: 13px; }
	.hero, .banner-slide__content { padding-left: 16px; padding-right: 16px; }
}

/* Extra-small phones */
@media (max-width: 380px) {
	.site-title { font-size: 18px; }
	.btn { padding: 10px 20px; font-size: 14px; }
}

/* ==========================================================================
   Partner registration: header button + popup modal
   ========================================================================== */
.btn--partner {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--color-primary); color: #fff;
	padding: 10px 22px; border: none; border-radius: 999px;
	font-weight: 600; font-size: 14.5px; cursor: pointer; white-space: nowrap;
}
.btn--partner svg { flex-shrink: 0; }
.btn--partner:hover { background: var(--color-accent); }

.sampu-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sampu-modal[hidden] { display: none; }
.sampu-modal__overlay { position: absolute; inset: 0; background: rgba(16, 24, 32, .6); animation: sampu-modal-fade .18s ease; }
.sampu-modal__panel {
	position: relative; background: #fff; border-radius: 10px; width: 100%; max-width: 520px;
	max-height: 90vh; overflow-y: auto; padding: 32px 28px 28px;
	box-shadow: 0 20px 50px rgba(0,0,0,.25); animation: sampu-modal-pop .2s ease;
}
.sampu-modal__close {
	position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
	border: none; background: var(--color-light); color: var(--color-text);
	font-size: 20px; line-height: 1; cursor: pointer;
}
.sampu-modal__close:hover { background: var(--color-accent); color: #fff; }
.sampu-modal__title { margin: 0 0 6px; font-size: 22px; color: var(--color-primary); padding-right: 30px; }
.sampu-modal__subtitle { margin: 0 0 20px; color: var(--color-muted); font-size: 14.5px; }

.partner-form { display: flex; flex-direction: column; gap: 12px; }
.partner-form label { font-weight: 600; font-size: 14px; color: var(--color-text); }
.partner-form input, .partner-form textarea {
	padding: 10px 12px; border: 1px solid #ddd; border-radius: var(--radius); font-family: inherit; font-size: 14.5px;
}
.partner-form input:focus, .partner-form textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.partner-form__submit { margin-top: 4px; border: none; cursor: pointer; }
.partner-form__submit[disabled] { opacity: .6; cursor: default; }
.partner-form__notice { display: none; padding: 10px 12px; border-radius: var(--radius); font-size: 14px; }
.partner-form__notice.is-visible { display: block; }
.partner-form__notice.is-success { display: block; background: #e7f7ee; color: #147a3f; }
.partner-form__notice.is-error { display: block; background: #fdecea; color: #b3261e; }

@keyframes sampu-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sampu-modal-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 600px) {
	.btn--partner { padding: 8px 16px; font-size: 13px; }
	.sampu-modal__panel { padding: 26px 18px 20px; }
}

/* Partner registration CTA banner (front-page.php) — the one deliberately
   bold section on the homepage (dark navy gradient via .cta-banner--dark),
   breaking up the white/light-gray rhythm of the sections around it so
   this call-to-action reads as the strongest visual moment on the page. */
.partner-registration .btn--partner-cta {
	display: inline-block; background: #fff; color: var(--color-primary);
	padding: 14px 32px; border-radius: 999px; font-weight: 700; font-size: 16px;
}
.partner-registration .btn--partner-cta:hover { background: var(--color-light); }

/* Fix: text pasted from Microsoft Word into a Solution/Project/News post
   sometimes carries an inline color:white (or #fff / #ffffff /
   rgb(255,255,255)) style — invisible against our white content
   background. This forces any element inside post content that has one
   of those inline colors back to the normal text color, without
   touching any other intentionally-colored text elsewhere on the site. */
.entry-content [style*="color:#fff"],
.entry-content [style*="color: #fff"],
.entry-content [style*="color:#FFFFFF"],
.entry-content [style*="color: #FFFFFF"],
.entry-content [style*="color:#ffffff"],
.entry-content [style*="color: #ffffff"],
.entry-content [style*="color:white"],
.entry-content [style*="color: white"],
.entry-content [style*="color:rgb(255,255,255)"],
.entry-content [style*="color: rgb(255, 255, 255)"] {
	color: inherit !important;
}