/* ==========================================================================
   Components added during the WordPress build that v17's original CSS
   never had to style (cookie banner, popup modal, form status messages,
   tender status badges). Keep this file separate from variables/layout/
   components/home.css so it's obvious what's new vs. what came from v17.
   ========================================================================== */

/* Cookie bar uses v17's own #cookie-bar / .cookie-actions rules in
   layout.css exactly -- nothing needed here. Removed our invented
   .cookie-banner styling that never matched the real design. */

/* Social icons use v17's own .si / .si-filled / .si-instagram rules
   in layout.css — nothing extra needed here. */

/* Help FAB (bottom-right callback/WhatsApp/call) */
#pioneer-help-fab { position: fixed; bottom: 80px; right: 24px; z-index: 8500; }
#pioneer-help-toggle {
	width: 54px; height: 54px; border-radius: 50%;
	background: var(--color-accent, #800020); color: #fff; border: none; cursor: pointer;
	box-shadow: 0 4px 16px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center;
}
#pioneer-help-modal {
	position: fixed; bottom: 146px; right: 24px; z-index: 8499;
	width: 240px; max-width: calc(100vw - 32px);
	background: #fff; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
	border: 1px solid #e0e0e0; overflow: hidden;
}
#pioneer-help-modal[hidden] { display: none; }
.pioneer-help-head { background: var(--color-accent, #800020); padding: 14px 18px; }
.pioneer-help-head p { color: #fff; font-size: 13px; font-weight: 700; margin: 0; }
.pioneer-help-links a {
	display: flex; align-items: center; gap: 12px; padding: 14px 18px;
	border-bottom: 1px solid #f0f0f0; font-size: 13px; font-weight: 600; color: #1a1a1a; text-decoration: none;
}
.pioneer-help-links a:last-child { border-bottom: none; }

/* Header search */
/* Header search -- matches v17's exact rule (layout.css): icon is
   decorative only, submission happens via Enter key in the input.
   Removing our earlier override so nothing here fights that. */

/* Simple dropdown submenus for main nav (WP-native nested menu items) */
.primary-nav ul ul { display: none; position: absolute; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 8px; padding: 8px 0; min-width: 200px; z-index: 100; }
.primary-nav li { position: relative; }
.primary-nav li:hover > ul { display: block; }
.primary-nav ul ul li a { display: block; padding: 10px 18px; white-space: nowrap; }

/* Popup uses v17's own #promo-popup / .popup-overlay / .popup-box /
   .popup-img / .popup-badge / .popup-body rules in layout.css, and its
   toggle logic already lives in main.js -- nothing needed here. */

/* Form submit feedback */
.form-status { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.form-status-success { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfc0; }
.form-status-error { background: #fdecea; color: #b3261e; border: 1px solid #f5c2c0; }

/* FAQ group headings */
.faq-group { margin-bottom: 32px; }
.faq-group-heading { color: var(--color-accent, #800020); font-size: 20px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--grey-100, #f0f0f0); }

/* Generic form field styling (used by template-form.php, template-contact.php,
   and any .form-group not already styled by v17's inline styles) */
.pioneer-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.pioneer-form .form-field,
.pioneer-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: var(--grey-700, #333); }
.pioneer-form input[type="text"],
.pioneer-form input[type="email"],
.pioneer-form input[type="tel"],
.pioneer-form input[type="url"],
.pioneer-form input[type="date"],
.pioneer-form input[type="file"],
.pioneer-form textarea,
.pioneer-form select,
.form-group input,
.form-group select {
	padding: 10px 12px;
	border: 1px solid var(--grey-200, #e0e0e0);
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	width: 100%;
}
.pioneer-form textarea { resize: vertical; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.form-group .req { color: var(--color-primary, #CC0000); }
.tender-status-open { background: #1e7e34; color: #fff; }
.tender-status-closed { background: #6c757d; color: #fff; }

/* At a Glance stat icons -- v17's .glance-icon (components.css/home.css)
   already sizes this correctly (52x52px, auto-centered). Only add what's
   missing: since ours is an <img> (uploadable per stat) instead of v17's
   hardcoded inline <svg>, make sure it fills the same box. */
.glance-icon { object-fit: contain; }

/* Contact form card + branch selector -- v17 relies on .form-card /
   .branch-card / .branch-select-wrap having box styling that lived in
   components.css; adding fallback rules here in case those classes were
   only ever used with additional wrapper divs in the original demo. */
.form-card { background: #fff; border: 1px solid var(--grey-200, #e0e0e0); border-radius: var(--radius-lg, 12px); padding: 32px; box-shadow: 0 4px 20px rgba(0,0,0,.04); }
.form-title { color: var(--red, #CC0000); font-weight: 700; margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.branch-card { background: #fff; border: 1px solid var(--grey-200, #e0e0e0); border-radius: var(--radius-lg, 12px); padding: 24px; margin-top: 16px; max-width: 420px; }

/* Mobile search toggle + overlay -- NOT in the original HTMLs (v17 hid
   search entirely below the nav breakpoint). Only shown on mobile, same
   breakpoint v17 uses to hide .primary-nav/.header-search (see layout.css). */
.mobile-search-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--black, #1a1a1a); }
.mobile-search-toggle svg { width: 22px; height: 22px; }

.mobile-search-overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 14px 0; }
.mobile-search-overlay[hidden] { display: none; }
.mobile-search-overlay form { display: flex; align-items: center; gap: 8px; }
.mobile-search-overlay input[type="search"] {
	flex: 1; padding: 10px 14px; border: 1px solid var(--grey-200, #e0e0e0); border-radius: 20px; font-size: 14px; font-family: inherit;
}
.mobile-search-overlay button[type="submit"] { background: none; border: none; cursor: pointer; padding: 6px; color: var(--color-primary, #CC0000); }
.mobile-search-overlay button[type="submit"] svg { width: 20px; height: 20px; }
#mobile-search-close { background: none; border: none; cursor: pointer; font-size: 18px; padding: 6px; color: #888; }

@media (max-width: 1024px) {
	.mobile-search-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* Search icon: real clickable button, explicit size/position so there's
   no ambiguity about hit-area (previous "all: unset" approach reset too
   much and left the click target unreliable). Visually matches v17's
   original decorative icon exactly -- no background/border of its own. */
.header-search .search-icon-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.header-search input[type="search"] { position: relative; z-index: 1; }
.header-search .search-icon-btn .search-icon { pointer-events: none; width: 100%; height: 100%; }

/* WordPress menus always output <li> items; without a <ul> wrapper
   (items_wrap='%3$s'), browsers apply a default bullet to orphaned <li>
   elements. v17's own utility-bar markup used plain <span> (no bullets by
   nature); this reset achieves the same visual result without needing to
   replace how WordPress renders menu items. */
.utility-bar .contacts li,
.mob-utility-links li {
	list-style: none;
	display: inline-flex;
}

/* Pagination (the_posts_pagination) -- v17 has no real pagination pattern
   of its own (its demo used a static "All Products" button), so this is
   new but designed to match the site's existing button/spacing language. */
.pagination,
.navigation.pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}
.pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--grey-200, #e0e0e0);
	color: var(--color-dark, #1A1A1A);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.pagination .page-numbers.current {
	background: var(--color-primary, #CC0000);
	border-color: var(--color-primary, #CC0000);
	color: #fff;
}
.pagination .page-numbers:not(.current):not(.dots):hover {
	border-color: var(--color-primary, #CC0000);
	color: var(--color-primary, #CC0000);
}
.pagination .page-numbers.dots {
	border: none;
	color: var(--grey-400, #999);
}

/* Search result cards -- classes instead of inline styles deliberately:
   main.js's filter-list component clears each item's INLINE style.display
   on page load (item.style.display=''), which reverted an inline
   "display:block" back to the browser default "inline" for <a> tags,
   breaking the border/padding box entirely. A class isn't touched by that
   and stays block regardless. */
.search-result-card {
	display: block;
	padding: 20px;
	border: 1px solid var(--grey-200, #e0e0e0);
	border-radius: 10px;
	margin-bottom: 12px;
	text-decoration: none;
}
.search-result-inner { display: flex; align-items: flex-start; gap: 12px; }
.search-result-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #fff;
	flex-shrink: 0;
	margin-top: 2px;
}
.search-result-text h4 { font-size: 16px; font-weight: 700; color: var(--color-dark, #1A1A1A); margin-bottom: 6px; }
.search-result-text p { font-size: 13px; color: var(--grey-600, #666); line-height: 1.6; margin: 0; }

/* Downloads dual-filter (type + year) hidden state */
[data-filter-item].is-hidden { display: none; }

/* Search page layout -- this is the one page with a fully custom grid
   (not reusing an existing v17 class), so it's the one that needed its
   own responsive breakpoint. Without this, the fixed 220px sidebar
   column forced the whole page wider than the viewport on mobile,
   causing horizontal overflow/cut-off content. */
.search-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 32px;
	align-items: start;
}
@media (max-width: 768px) {
	.search-layout {
		grid-template-columns: 1fr;
	}
}

/* Lightbox for gallery photos (e.g. CSR gallery) -- click to zoom, arrows
   to move between images. Matches the site's existing dark-overlay/
   rounded-box visual language rather than a third-party library's look. */
#pioneer-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, visibility .25s;
}
#pioneer-lightbox.show { opacity: 1; visibility: visible; }
.pioneer-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.85); }
.pioneer-lightbox-content { position: relative; max-width: 90vw; max-height: 85vh; text-align: center; }
.pioneer-lightbox-content img { max-width: 90vw; max-height: 80vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pioneer-lightbox-counter { color: #fff; font-size: 13px; margin-top: 12px; opacity: .8; }
.pioneer-lightbox-close {
	position: absolute; top: 20px; right: 20px; z-index: 2;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255,255,255,.12); color: #fff; border: none; font-size: 18px; cursor: pointer;
}
.pioneer-lightbox-prev, .pioneer-lightbox-next {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 48px; height: 48px; border-radius: 50%;
	background: rgba(255,255,255,.12); color: #fff; border: none; font-size: 18px; cursor: pointer;
}
.pioneer-lightbox-prev { left: 20px; }
.pioneer-lightbox-next { right: 20px; }
.pioneer-lightbox-prev:hover, .pioneer-lightbox-next:hover, .pioneer-lightbox-close:hover { background: var(--color-primary, #CC0000); }

/* Gallery thumbnails hint they're clickable */
[data-lightbox-item] { cursor: zoom-in; display: block; }

/* Legal pages (Privacy/Terms/Cookie) with the TOC sidebar -- this is the
   same fixed-width-grid-with-no-breakpoint bug already fixed once on the
   search page. Collapses the sidebar above the content on mobile. */
.pioneer-legal-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 40px;
	align-items: start;
}
.pioneer-legal-toc {
	position: sticky;
	top: 24px;
}
@media (max-width: 768px) {
	.pioneer-legal-layout {
		grid-template-columns: 1fr;
	}
	.pioneer-legal-toc {
		position: static !important;
		margin-bottom: 24px;
	}
}

/* Load More: a separate, dedicated class for this specific hiding
   mechanism, kept deliberately distinct from whatever the various filter
   scripts use (inline display:none, or .is-hidden) -- reusing the same
   mechanism for both caused load-more to mistake its own earlier hiding
   for a filter rejection and refuse to ever reveal those items again. */
.load-more-hidden {
	display: none !important;
}

/* Live chat online indicator on the floating Call icon -- reflects
   REAL Tawk.to status (not decorative), driven by the tawk-status-*
   class set on <body> in inc/live-chat.php. A subtle pulse draws the
   eye without being obnoxious, similar to WhatsApp's own online dots. */
#pioneer-help-toggle { position: relative; }
.pioneer-online-dot { display: none; }
body.tawk-status-online .pioneer-online-dot {
	display: block;
	position: absolute;
	top: -2px;
	right: -2px;
	width: 12px;
	height: 12px;
	background: #2ecc71;
	border: 2px solid #fff;
	border-radius: 50%;
}
body.tawk-status-online .pioneer-online-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #2ecc71;
	animation: pioneer-online-pulse 1.8s ease-out infinite;
}
@keyframes pioneer-online-pulse {
	0% { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(2.2); opacity: 0; }
}