/* posway.me — White & Navy corporate theme (Telpo-style reskin)
   Loaded after style.css / mbr-additional.css. Pure CSS overlay — does not
   touch the original theme files, so it's safe to remove by swapping the
   <link> back to glass-dark.css / glass-white.css. */

:root {
  --navy: #0b2545;
  --navy-2: #123a63;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --surface: #f5f8fc;
  --border: #e3e9f2;
  --text: #1f2937;
  --muted: #64748b;
}

html, body { background: #ffffff !important; }
body { color: var(--text); }
section { background-color: transparent !important; }

/* Fonts — Roboto everywhere */
html, body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, button, input, textarea,
.mbr-fonts-style, .mbr-section-title, .mbr-section-subtitle, .mbr-text,
.card-title, .item-title, .item-subtitle, .navbar-caption, .nav-link {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Navbar — Telpo-style: tall, white, generous link spacing, blue CTA pill.
   Scoped by structural classes (not a per-page cid) so it applies uniformly
   across every page, not just the homepage. */
.menu2 { z-index: 1000; }
.menu2 nav.navbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.68)) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 32px rgba(11,37,69,0.08), 0 1px 0 rgba(255,255,255,0.7) inset;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  transition: padding .25s ease, box-shadow .25s ease;
}
.menu2 nav.navbar.navbar-short {
  padding-top: .6rem;
  padding-bottom: .6rem;
  box-shadow: 0 4px 20px rgba(11,37,69,0.10);
}
.menu2 .navbar-caption {
  color: var(--navy) !important;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.menu2 .navbar-nav { align-items: center; }
.menu2 .nav-item { margin: 0 .35rem; }
.menu2 .nav-link {
  color: var(--text) !important;
  font-weight: 600;
  padding: .5rem .75rem !important;
}
.menu2 .nav-link:hover, .menu2 .nav-link:focus { color: var(--blue) !important; }
.menu2 .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(11,37,69,0.12);
  overflow: hidden;
}
.menu2 .dropdown-item {
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
.menu2 .dropdown-item:hover, .menu2 .dropdown-item:focus {
  background: var(--surface) !important;
  color: var(--blue) !important;
}

/* Mega menu — liquid glass, category list (left) / items (right) */
.mega-dropdown { position: static; }
.menu2 .mega-menu {
  display: none;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: min(920px, 92vw);
  margin-top: .6rem;
  padding: 0;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 30px 70px rgba(11,37,69,0.22),
    0 2px 0 rgba(255,255,255,0.8) inset,
    0 0 0 1px rgba(255,255,255,0.4) inset;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.72) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  overflow: hidden;
}
.menu2 .mega-menu::before {
  /* liquid glass specular sheen */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 15% 0%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(80% 50% at 100% 0%, rgba(120,170,255,0.25), transparent 60%);
  pointer-events: none;
}
.menu2 .mega-dropdown.open > .mega-menu,
.menu2 .mega-dropdown.show > .mega-menu {
  display: block;
}
.menu2 .mega-menu-inner {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 360px;
}

/* Left: category list */
.menu2 .mega-cats {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  width: 240px;
  flex-shrink: 0;
  padding: 1.25rem;
  background: rgba(255,255,255,0.35);
  border-right: 1px solid rgba(255,255,255,0.6);
}
.menu2 .mega-cat {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  padding: .7rem .9rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.menu2 .mega-cat:hover {
  background: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.7);
}
.menu2 .mega-cat.active {
  background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(37,99,235,0.06));
  border-color: rgba(37,99,235,0.35);
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(37,99,235,0.15), 0 1px 0 rgba(255,255,255,0.6) inset;
  transform: translateX(2px);
}
.menu2 .mega-cats-cta {
  display: block !important;
  margin: auto 0 0 !important;
  text-align: center;
  width: 100%;
}

/* Right: item grid */
.menu2 .mega-items {
  position: relative;
  flex: 1;
  padding: 1.5rem;
}
.menu2 .mega-items-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
}
.menu2 .mega-items-grid.active { display: grid; animation: megaFade .2s ease; }
@keyframes megaFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.menu2 .mega-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .9rem .6rem;
  border-radius: 16px;
  text-align: center;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.menu2 .mega-item:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(37,99,235,0.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(37,99,235,0.16), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.menu2 .mega-item-img {
  width: 100%;
  aspect-ratio: 1.3 / 1;
  border-radius: 12px;
  background-color: #eaf1fd;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 42%;
}
.menu2 .mega-item-name {
  color: var(--navy);
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.25;
}
@media (max-width: 991px) {
  .menu2 .mega-menu {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    margin-top: .5rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #ffffff;
  }
  .menu2 .mega-menu::before { display: none; }
  .menu2 .mega-menu-inner { flex-direction: column; min-height: 0; }
  .menu2 .mega-cats {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    padding: .75rem 0;
  }
  .menu2 .mega-cat { flex: 1 1 auto; }
  .menu2 .mega-cats-cta { margin-top: .5rem; width: 100%; }
  .menu2 .mega-items { padding: 1rem 0; }
  .menu2 .mega-items-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Nav CTA pill button (Telpo "Inquiry Now" pattern) */
.menu2 .navbar-cta {
  display: inline-block;
  margin-left: 1.25rem;
  padding: .6rem 1.5rem;
  background: var(--blue);
  color: #ffffff !important;
  font-weight: 700;
  font-size: .95rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.menu2 .navbar-cta:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  color: #ffffff !important;
}
@media (max-width: 991px) {
  .menu2 .navbar-cta { margin: .75rem 0 0; text-align: center; }
}

/* Hero: full-bleed image, navy gradient scrim for legible text (image untouched) */
.cid-sAkhXQBltE { background: var(--navy) !important; }
.cid-sAkhXQBltE .item-wrapper { position: relative; }
.cid-sAkhXQBltE .item-wrapper::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,37,69,0.88) 0%, rgba(11,37,69,0.55) 38%, rgba(11,37,69,0.10) 65%);
  z-index: 1;
}
.cid-sAkhXQBltE .carousel-caption { z-index: 2; text-align: left; left: 6%; bottom: 15%; }
.cid-sAkhXQBltE H5 { color: #ffffff !important; font-weight: 700; letter-spacing: -0.01em; }
.cid-sAkhXQBltE P { color: #cdd8ea !important; }
.cid-sAkhXQBltE .carousel-control {
  background-color: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.5) !important;
}
.cid-sAkhXQBltE .carousel-indicators li {
  background-color: rgba(255,255,255,0.4) !important;
  border-color: #fff !important;
}

/* Product catalogue cards */
.cid-sqebH9bHs2 { background: #ffffff !important; }
.cid-sqebH9bHs2 .mbr-section-title { color: var(--navy) !important; font-weight: 700; }
.cid-sqebH9bHs2 .mbr-section-subtitle { color: var(--muted) !important; }
.cid-sqebH9bHs2 .item-wrapper {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(11,37,69,0.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.cid-sqebH9bHs2 .item-img { background: var(--surface); }
.cid-sqebH9bHs2 .item-wrapper:hover {
  transform: translateY(-4px);
  border-color: var(--blue) !important;
  box-shadow: 0 16px 32px rgba(37,99,235,0.16);
}
.cid-sqebH9bHs2 .item-title { color: var(--navy) !important; font-weight: 700; }
.cid-sqebH9bHs2 .mbr-text { color: var(--muted) !important; }

/* Wall / parallax band -> solid navy band, image swapped for a color panel */
.cid-sqvMNDeuht {
  background: linear-gradient(120deg, var(--navy), var(--navy-2)) !important;
}
.cid-sqvMNDeuht .card-title, .cid-sqvMNDeuht .card-box, .cid-sqvMNDeuht .mbr-text, .cid-sqvMNDeuht .link-wrap {
  color: #ffffff !important;
}

/* News / insights cards */
.cid-sqii1s6fyn { background: var(--surface) !important; }
.cid-sqii1s6fyn .mbr-overlay { opacity: 0 !important; }
.cid-sqii1s6fyn .mbr-section-title { color: var(--navy) !important; font-weight: 700; }
.cid-sqii1s6fyn .item-wrapper {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(11,37,69,0.05);
}
.cid-sqii1s6fyn .item-title { color: var(--blue) !important; font-weight: 600; }
.cid-sqii1s6fyn .item-subtitle { color: var(--navy) !important; font-weight: 700; }
.cid-sqii1s6fyn .mbr-text { color: var(--muted) !important; }

/* Stats band */
.cid-sqqkS2lMtt {
  background: linear-gradient(120deg, var(--navy), var(--navy-2)) !important;
}
.cid-sqqkS2lMtt .mbr-overlay { opacity: 0 !important; }
.cid-sqqkS2lMtt .mbr-section-title { color: #ffffff !important; font-weight: 700; }
.cid-sqqkS2lMtt .card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
}
.cid-sqqkS2lMtt .num { color: #ffffff !important; font-weight: 800; }
.cid-sqqkS2lMtt .card-text { color: #b9c6dc !important; }

/* Footer */
.cid-ufjKxM5vBw { background: var(--navy) !important; }
.cid-ufjKxM5vBw, .cid-ufjKxM5vBw .mbr-text, .cid-ufjKxM5vBw .mbr-section-subtitle,
.cid-ufjKxM5vBw .copyright, .cid-ufjKxM5vBw li {
  color: #b9c6dc !important;
}
.cid-ufjKxM5vBw .text-primary, .cid-ufjKxM5vBw a { color: #9db8e8 !important; }
.cid-ufjKxM5vBw a:hover { color: #ffffff !important; }
.cid-ufjKxM5vBw .media-wrap img { opacity: 1; filter: none; }

/* Buttons (if/when used) */
.btn, .mbr-section-btn a {
  background: var(--blue) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
}
.btn:hover, .mbr-section-btn a:hover { background: var(--blue-dark) !important; }

/* Generic page sections on inner pages (product spec pages, About, etc.) —
   scoped to NOT touch headings that rely on .mbr-white for contrast on a
   dark/image hero background. */
h1:not(.mbr-white), h2:not(.mbr-white), h3:not(.mbr-white), h4:not(.mbr-white),
.mbr-section-title:not(.mbr-white), .card-title:not(.mbr-white) { color: var(--navy); }
.mbr-white, .mbr-white.mbr-section-title, .mbr-white.card-title { color: #ffffff !important; }
a.text-primary { color: var(--blue) !important; }

/* Product spec pages: dark hero (header4/header7) built for light text */
.header4.mbr-parallax-background .mbr-overlay,
.header7 .mbr-overlay {
  background: rgba(11,37,69,0.55) !important;
  opacity: 1 !important;
}
.header4 h1:not(.mbr-white), .header7 h1:not(.mbr-white) { color: #ffffff !important; }
.header4 p.mbr-text:not(.mbr-white), .header7 p.mbr-text:not(.mbr-white) { color: #dbe4f3 !important; }