/* Wan Power Tech — dark / blue theme
 * Palette tokens for the whole site. site.css and main.css reference these
 * through var(--wpt-*), so a colour change here applies everywhere.
 * Blues are sampled from the company badge (sky disc, navy ring, royal W).
 */
:root {
   --wpt-band: #030405;        --wpt-band-rgb: 3, 4, 5;          /* deepest bands, footer */
   --wpt-bg: #07090C;          --wpt-bg-rgb: 7, 9, 12;           /* page */
   --wpt-surface: #0B0E13;     --wpt-surface-rgb: 11, 14, 19;    /* alternate sections */
   --wpt-card: #11161D;        --wpt-card-rgb: 17, 22, 29;       /* cards, panels */
   --wpt-ink: #F2F5F9;         --wpt-ink-rgb: 242, 245, 249;     /* text */
   --wpt-line: #FFFFFF;        --wpt-line-rgb: 255, 255, 255;    /* hairlines, faint tints (used with alpha) */
   --wpt-sky: #449AFF;         --wpt-sky-rgb: 68, 154, 255;      /* accent */
   --wpt-on-accent: #04070C;   --wpt-on-accent-rgb: 4, 7, 12;    /* text on sky */
   --wpt-royal: #0B2EBC;       --wpt-royal-rgb: 11, 46, 188;
   --wpt-navy: #01046D;        --wpt-navy-rgb: 1, 4, 109;
   --wpt-red: #E8291E;

   --bs-body-bg: var(--wpt-bg);
   --bs-body-color: rgba(var(--wpt-ink-rgb), .78);
}

html,
body {
   background: var(--wpt-bg);
   color: rgba(var(--wpt-ink-rgb), .78);
   color-scheme: dark;
}

::selection { background: var(--wpt-sky); color: var(--wpt-on-accent); }

/* ------------------------------------------------------------------
   Feature surfaces
   Sky blue is the accent; it is too loud as a large fill and white text
   on it fails contrast. Anything that used to be a lime *surface* becomes
   the badge's royal-to-navy instead, with white text.
   ------------------------------------------------------------------ */
:root {
   --wpt-feature:
      radial-gradient(90% 80% at 100% 100%, rgba(var(--wpt-sky-rgb), .28), transparent 60%),
      linear-gradient(180deg, #0B2EBC 0%, #07208F 50%, var(--wpt-navy) 100%);
}

/* closing CTA card: painted via data-bg-color (a background-color), so the
   gradient needs !important to replace it */
.tp-fi-cta-bg { background: var(--wpt-feature) !important; }

.wpt-svc--lime,
.wpt-sector--lime,
.wpt-num-card--lime,
.wpt-cred-main,
.wpt-about-dark .wpt-cred-main--lime {
   background: var(--wpt-feature);
   border-color: rgba(var(--wpt-sky-rgb), .35);
   color: #fff;
}
.wpt-link--lime { background: #0B2EBC; }
.wpt-link--lime .wpt-link-node i,
.wpt-num-card--lime::before { background: #fff; }
.wpt-svc--lime .wpt-btn--lime { background: #fff; color: var(--wpt-navy); }

/* the highlighted "2007" card keeps its emphasis with a blue edge */
.wpt-num-card--dark { border-color: rgba(var(--wpt-sky-rgb), .55); }

/* ------------------------------------------------------------------
   Buttons: template "event" buttons were charcoal on light pages;
   on black they become the sky primary.
   ------------------------------------------------------------------ */
.tp-btn-event { background-color: var(--wpt-sky); color: var(--wpt-on-accent); }
.tp-btn-event:hover,
.tp-btn-event:focus { color: var(--wpt-on-accent); }
.tp-btn-event .button-dot { background-color: var(--wpt-on-accent); }
.tp-btn-event .button-image { filter: brightness(0); }
.tp-btn-event.tp-btn-border { background-color: transparent; color: var(--wpt-ink); }
.tp-btn-event.tp-btn-border .button-dot { background-color: var(--wpt-sky); }
.tp-btn-event.tp-btn-border .button-image { filter: none; }
.tp-header-action .tp-btn-event { white-space: nowrap; }

/* ------------------------------------------------------------------
   Header contact bar: navy-to-royal strip instead of a flat accent.
   The template paints data-bg-color inline, hence !important.
   ------------------------------------------------------------------ */
.tp-header-bottom {
   background: linear-gradient(90deg, var(--wpt-navy) 0%, #0B2EBC 70%, #1647D8 100%) !important;
   color: #fff;
}
.tp-header-bottom a,
.tp-header-bottom span,
.tp-header-bottom p { color: rgba(255, 255, 255, .92); }
.tp-header-bottom svg [stroke]:not([stroke="none"]) { stroke: #fff; }
.tp-header-bottom svg [fill]:not([fill="none"]) { fill: #fff; }

/* ------------------------------------------------------------------
   VR cabin QR codes must stay dark-on-white to scan.
   ------------------------------------------------------------------ */
.wpt-vr-qr { background: #fff; }
.wpt-vr-qr b { color: rgba(4, 7, 12, .6); }

/* buttons sitting on a feature surface go white so they don't fight the blue */
section[style*="--wpt-feature"] .wpt-btn,
.wpt-svc--lime .wpt-btn {
   background: #fff !important;
   color: var(--wpt-navy) !important;
}

/* ==================================================================
   Who-we-are gallery: every tile links to its service, plus a wide
   cabin-AC tile underneath so the collage balances the text column.
   ================================================================== */
.wpt-ag-item--wide { grid-column: 1 / -1; }
.wpt-about-gallery .wpt-ag-item--wide { min-height: 0; height: 210px; }
.wpt-ag-item--wide img { object-position: center 35%; }

.wpt-ag-hit {
   position: absolute;
   inset: 0;
   z-index: 3;
   border-radius: inherit;
}
.wpt-ag-hit:focus-visible { outline: 3px solid var(--wpt-sky); outline-offset: -3px; }
.wpt-ag-item:has(.wpt-ag-hit:focus-visible) img { transform: scale(1.10); }

.wpt-ag-item figcaption { align-items: center; }
.wpt-ag-go {
   margin-left: auto;
   width: 32px; height: 32px;
   border-radius: 50%;
   display: inline-grid;
   place-items: center;
   background: var(--wpt-sky);
   color: var(--wpt-on-accent);
   opacity: 0;
   transform: translate(-6px, 6px);
   transition: opacity .3s ease, transform .3s ease;
}
.wpt-ag-item:hover .wpt-ag-go,
.wpt-ag-item:has(.wpt-ag-hit:focus-visible) .wpt-ag-go { opacity: 1; transform: none; }
/* touch screens have no hover: keep the arrow visible as the affordance */
@media (hover: none) { .wpt-ag-go { opacity: 1; transform: none; } }

@media (max-width: 991px) {
   .wpt-about-gallery .wpt-ag-item--wide { height: 170px; }
}
@media (max-width: 575px) {
   .wpt-about-gallery .wpt-ag-item--wide { height: 150px; }
   .wpt-ag-go { width: 26px; height: 26px; }
}

/* ==================================================================
   Certificates — white "paper" plates on the dark page, the top of each
   certificate (crest + title) visible; full copy opens in the lightbox.
   ================================================================== */
.wpt-certs { padding: 110px 0 100px; }
.wpt-certs-head { margin-bottom: 46px; }
.wpt-certs-body { margin: 0; font-size: 16px; line-height: 1.75; color: rgba(var(--wpt-ink-rgb), .72); }

.wpt-certs-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 22px;
}
.wpt-cert {
   display: flex;
   flex-direction: column;
   gap: 6px;
   text-decoration: none;
   color: var(--wpt-ink);
}
.wpt-cert-plate {
   position: relative;
   display: block;
   aspect-ratio: 3 / 4;
   margin-bottom: 12px;
   padding: 10px 10px 0;
   border-radius: 12px;
   overflow: hidden;
   background: #fff;
   box-shadow:
      0 0 0 1px rgba(var(--wpt-sky-rgb), .0),
      0 24px 48px -28px rgba(0, 0, 0, .9);
   transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.wpt-cert-plate img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
}
/* fade the cropped bottom edge into the plate so the crop looks deliberate */
.wpt-cert-plate::after {
   content: "";
   position: absolute;
   left: 0; right: 0; bottom: 0;
   height: 34%;
   background: linear-gradient(180deg, rgba(255,255,255,0), #fff 88%);
   pointer-events: none;
}
.wpt-cert-zoom {
   position: absolute;
   left: 50%; bottom: 14px;
   z-index: 2;
   transform: translate(-50%, 6px);
   padding: 7px 14px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
   background: var(--wpt-navy);
   color: #fff;
   opacity: 0;
   transition: opacity .3s ease, transform .3s ease;
}
.wpt-cert:hover .wpt-cert-plate,
.wpt-cert:focus-visible .wpt-cert-plate {
   transform: translateY(-6px);
   box-shadow:
      0 0 0 2px rgba(var(--wpt-sky-rgb), .9),
      0 30px 60px -26px rgba(var(--wpt-sky-rgb), .45);
}
.wpt-cert:hover .wpt-cert-zoom,
.wpt-cert:focus-visible .wpt-cert-zoom { opacity: 1; transform: translate(-50%, 0); }
.wpt-cert:focus-visible { outline: none; }

.wpt-cert-issuer {
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--wpt-sky);
}
.wpt-cert-title { font-size: 16px; font-weight: 600; line-height: 1.35; }
.wpt-cert-meta { font-size: 13.5px; line-height: 1.5; color: rgba(var(--wpt-ink-rgb), .6); }
.wpt-certs-note {
   margin: 34px 0 0;
   font-size: 13px;
   color: rgba(var(--wpt-ink-rgb), .45);
}

@media (hover: none) { .wpt-cert-zoom { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 1199px) {
   .wpt-certs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
}
@media (max-width: 991px) {
   .wpt-certs { padding: 80px 0 70px; }
   .wpt-certs-body { margin-top: 18px; }
}
/* phones: a swipeable row instead of a tall stack */
@media (max-width: 575px) {
   .wpt-certs-grid {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      margin: 0 -12px;
      padding: 0 12px 10px;
      scrollbar-width: none;
   }
   .wpt-certs-grid::-webkit-scrollbar { display: none; }
   .wpt-cert { flex: 0 0 72%; scroll-snap-align: start; }
}

/* lightbox: dark, with the caption readable under the certificate */
.mfp-bg.wpt-mfp { background: #02030a; opacity: .94 !important; }
.wpt-mfp .mfp-title { color: rgba(255,255,255,.85); font-size: 14px; }
.wpt-mfp .mfp-counter { color: rgba(255,255,255,.55); }

/* ==================================================================
   Site photos (proof of work): tall / wide / square tiles, each opens
   in its own lightbox gallery.
   ================================================================== */
.wpt-pics-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-auto-rows: 230px;
   grid-auto-flow: dense;
   gap: 16px;
}
.wpt-pf {
   position: relative;
   display: block;
   overflow: hidden;
   border-radius: 14px;
   background: var(--wpt-card);
   box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .8);
}
.wpt-pf--tall { grid-row: span 2; }
.wpt-pf--wide { grid-column: span 2; }
.wpt-pf img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: scale(1.02);
   transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.wpt-pf::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(var(--wpt-band-rgb), .78) 100%);
   pointer-events: none;
}
.wpt-pf-cap {
   position: absolute;
   left: 16px; right: 16px; bottom: 14px;
   z-index: 1;
   font-size: 14px;
   font-weight: 600;
   line-height: 1.35;
   color: #fff;
}
.wpt-pf:hover img,
.wpt-pf:focus-visible img { transform: scale(1.08); }
.wpt-pf:focus-visible { outline: 3px solid var(--wpt-sky); outline-offset: 3px; }

.wpt-pics-more {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 26px;
   font-size: 15px;
   font-weight: 600;
   color: var(--wpt-sky);
   text-decoration: none;
}
.wpt-pics-more:hover { color: #fff; }
.wpt-pics-more svg { transition: transform .25s ease; }
.wpt-pics-more:hover svg { transform: translate(2px, -2px); }

.wpt-pics-sub {
   display: flex;
   align-items: baseline;
   gap: 22px;
   flex-wrap: wrap;
   margin: 64px 0 22px;
   padding-top: 30px;
   border-top: 1px solid rgba(var(--wpt-line-rgb), .1);
   scroll-margin-top: 120px;
}
.wpt-pics-kicker {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--wpt-sky);
}
.wpt-pics-sub p { margin: 0; font-size: 15px; color: rgba(var(--wpt-ink-rgb), .65); }

@media (max-width: 991px) {
   .wpt-pics-grid { grid-auto-rows: 180px; gap: 12px; }
}
@media (max-width: 767px) {
   .wpt-pics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; gap: 10px; }
   .wpt-pf-cap { font-size: 12.5px; left: 12px; right: 12px; bottom: 10px; }
}

/* Projects: the original four-photo grid left a hole beside the last wide
   tile on desktop; let it run the full row instead. */
@media (min-width: 1200px) {
   .wpt-kit-grid > .wpt-kit-item--wide:last-child { grid-column: 1 / -1; }
   .wpt-kit-grid > .wpt-kit-item--wide:last-child img { height: 380px; object-position: center 48%; }
}

/* ==================================================================
   Contact: office map. The Google embed is tinted dark (invert + 180deg
   hue turn keeps the red pin red) and an address card sits over it.
   ================================================================== */
.wpt-map { padding: 20px 0 100px; scroll-margin-top: 110px; }
.wpt-map-wrap {
   position: relative;
   min-height: 600px;
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid rgba(var(--wpt-line-rgb), .1);
   background: var(--wpt-card);
   box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.wpt-map-frame {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
   filter: invert(.9) hue-rotate(180deg) saturate(.75) brightness(.92) contrast(.92);
}
.wpt-map-card {
   position: absolute;
   top: 28px; left: 28px;
   width: 410px;
   max-height: calc(100% - 56px);
   overflow: auto;
   display: flex;
   flex-direction: column;
   padding: 30px 30px 26px;
   border-radius: 14px;
   background: rgba(var(--wpt-band-rgb), .9);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(var(--wpt-sky-rgb), .22);
}
.wpt-map-kicker {
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--wpt-sky);
}
.wpt-map-title { margin: 10px 0 12px; font-size: 24px; line-height: 1.25; color: #fff; }
.wpt-map-addr { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(var(--wpt-ink-rgb), .78); }
.wpt-map-hours { margin: 14px 0 0; font-size: 14px; color: rgba(var(--wpt-ink-rgb), .55); }
.wpt-map-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.wpt-map-tel { color: #fff; font-weight: 600; text-decoration: none; }
.wpt-map-tel:hover { color: var(--wpt-sky); }
.wpt-map-branch {
   margin-top: 24px;
   padding-top: 20px;
   border-top: 1px solid rgba(var(--wpt-line-rgb), .1);
}
.wpt-map-branch .wpt-map-addr { margin-top: 8px; font-size: 14px; }

@media (max-width: 991px) {
   .wpt-map { padding-bottom: 70px; }
   .wpt-map-wrap { display: flex; flex-direction: column; min-height: 0; }
   .wpt-map-frame { position: relative; height: 340px; }
   .wpt-map-card { position: static; width: auto; border-radius: 0; border: 0; backdrop-filter: none; }
   .wpt-map-branch { margin-top: 26px; }
}
.wpt-ft-branch { opacity: .7; }

/* ==================================================================
   Contrast fixes found in the real-browser audit
   ================================================================== */
/* sky marquee strip on the homepage: dark text, not white (2.6:1 -> 7.6:1) */
.tp-fi-text-slider-item p { color: var(--wpt-on-accent); }
.tp-fi-text-slider-item svg path { stroke: var(--wpt-on-accent); }
/* "WAN POWER TECH" hub between the partner cards: royal badge, white text */
.wpt-hub-core {
   background: radial-gradient(circle at 30% 25%, #1E4FE0, var(--wpt-royal) 55%, var(--wpt-navy));
   box-shadow: 0 0 0 10px rgba(var(--wpt-sky-rgb), .12), 0 18px 44px -18px rgba(var(--wpt-sky-rgb), .55);
}
.wpt-hub-core span { color: #fff; }
/* third service block's eyebrow pill matches the other dark blocks */
.wpt-svc--cream .wpt-svc-eyebrow {
   background: rgba(var(--wpt-sky-rgb), .14);
   color: var(--wpt-sky);
   border: 1px solid rgba(var(--wpt-sky-rgb), .34);
}
.wpt-certs-note { color: rgba(var(--wpt-ink-rgb), .58); }
/* QR modules are always dark, whatever the SVG attribute says */
.wpt-vr-qr svg path { fill: #04070C !important; }
/* About: commitment ticks were painted the same colour as their disc */
.wpt-about-dark .tp-fi-value-list ul li > span > svg { color: var(--wpt-on-accent); }
/* footer address: address / branch / hours stack as lines on every screen size */
.tp-footer-contact-location a { display: block !important; }
.tp-footer-contact-location .wpt-ft-branch { display: block; margin: 6px 0; font-size: 14px; }

/* wpt:polish */
/* Homepage: the numbers band already ends in 96px of padding; the extra
   mt-130 on the who-we-are section made a ~330px black hole. */
.wpt-about.mt-130 { margin-top: 0; }

/* Phones: the certificate carousel sat flush against the screen edge;
   align it with the container like every other block. */
@media (max-width: 575px) {
   .wpt-certs-grid { margin: 0; padding: 0 0 10px; }
}
/* /wpt:polish */