/* =========================================================================
   CYVEHX — self-built theme assets (no external images, no human photos)
   - Page background drawn entirely in CSS (replaces the old .bg images)
   - .cv-graphic: a reusable abstract teal graphic panel that replaces photos
   ========================================================================= */

:root {
  --cv-teal: #215968;
  --cv-teal-bright: #2f9fb8;
}

/* ---- Site background (replaces home-bg / bg / contact-bg / product_bg) ----
   !important so it wins over page-specific CSS (services.css/about.css/etc.)
   that loads after this file and used to sit on top of the old .bg image. */
body {
  background-color: #0e2a30 !important;
  background-image:
    radial-gradient(1200px 620px at 78% -12%, rgba(47, 159, 184, 0.30), transparent 60%),
    radial-gradient(900px 520px at -5% 105%, rgba(33, 89, 104, 0.42), transparent 55%),
    linear-gradient(180deg, #123439 0%, #0e2a30 100%) !important;
  background-attachment: fixed !important;
}

/* ---- Sticky header: always a solid dark themed bar (no content bleed-through) ---- */
#header.header,
#header.header.scrolled {
  background-color: rgba(9, 18, 23, 0.92) !important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(47, 159, 184, 0.18) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* faint technical grid over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(47, 159, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 159, 184, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black, transparent 82%);
          mask-image: radial-gradient(ellipse at 50% 0%, black, transparent 82%);
}

/* ---- Reusable abstract graphic panel (replaces section/product photos) ---- */
.cv-graphic {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  border: 1px solid rgba(47, 159, 184, 0.28);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 26% 20%, rgba(47, 159, 184, 0.32), transparent 55%),
    radial-gradient(circle at 84% 82%, rgba(33, 89, 104, 0.42), transparent 52%),
    linear-gradient(135deg, #0e2229, #16343d);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
}

/* circuit-ish grid + node motif, drawn in CSS */
.cv-graphic::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(47, 159, 184, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 159, 184, 0.16) 1px, transparent 1px),
    radial-gradient(rgba(47, 159, 184, 0.6) 2px, transparent 2.6px);
  background-size: 32px 32px, 32px 32px, 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black, transparent 80%);
  opacity: 0.55;
}

/* soft glowing ring behind the icon */
.cv-graphic::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 159, 184, 0.28), transparent 70%);
  filter: blur(6px);
}

.cv-graphic > i {
  position: relative;
  z-index: 1;
  font-size: clamp(46px, 8vw, 84px);
  color: var(--cv-teal-bright);
  filter: drop-shadow(0 0 22px rgba(47, 159, 184, 0.55));
}

/* compact variant for the products carousel column */
.cv-graphic.cv-graphic--sm {
  aspect-ratio: 4 / 3;
  max-width: 340px;
  margin: 0 auto;
}

/* ---- Partner cards (About) ---- */
.partner-card {
  background: rgba(10, 18, 25, 0.6);
  border: 1px solid rgba(47, 159, 184, 0.18);
  border-radius: 14px;
  padding: 28px 24px;
  height: 100%;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease;
}
.partner-card:hover { border-color: rgba(47, 159, 184, 0.5); transform: translateY(-4px); }
.partner-logo {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  margin: 0 auto 18px;
}
.partner-logo img { max-height: 74px; max-width: 90%; width: auto; object-fit: contain; }
.partner-card h3 { color: #fff; font-size: 20px; margin-bottom: 8px; }
.partner-card p { color: #b7bdc5; font-size: 15px; }
.partner-card a { color: var(--cv-teal-bright); font-weight: 600; text-decoration: none; }
.partner-card a:hover { text-decoration: underline; }

/* ---- "Products" navigation dropdown (desktop hover + mobile toggle) ---- */
.navmenu .dropdown { position: relative; }
.navmenu .dropdown > a .toggle-dropdown { font-size: 12px; margin-left: 5px; }

@media (min-width: 1200px) {
  .navmenu .dropdown > ul {
    display: block;          /* override template's .navmenu ul { display:flex } so items stack vertically */
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 226px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: rgba(12, 22, 28, 0.97);
    border: 1px solid rgba(47, 159, 184, 0.22);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 9999;
  }
  .navmenu .dropdown:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
  .navmenu .dropdown > ul li { display: block; }
  .navmenu .dropdown > ul a {
    display: block;
    padding: 9px 18px;
    font-size: 15px;
    font-weight: 500;
    color: #cfd6dd;
    white-space: nowrap;
    transition: color .2s, background .2s;
  }
  .navmenu .dropdown > ul a:hover { color: #2f9fb8; background: rgba(47, 159, 184, 0.10); }
}

@media (max-width: 1199px) {
  .navmenu .dropdown > ul {
    display: none;
    position: static;
    margin: 4px 0 8px 14px;
    padding: 0;
    list-style: none;
    background: transparent;
    box-shadow: none;
    border: none;
    inset: auto;
  }
  .navmenu .dropdown > ul.dropdown-active { display: block; }
}

/* =========================================================================
   Accessibility fixes (from the site audit) — visual appearance unchanged
   ========================================================================= */

/* The mobile nav toggle is now a real <button> (was a bare <i>). Strip the
   native button chrome so it looks identical to before; color/font-size/margin
   still come from main.css's class-based .mobile-nav-toggle rule. */
button.mobile-nav-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  -webkit-appearance: none;
          appearance: none;
}

/* Keyboard support for the Products dropdown on desktop: open it when the
   trigger link (or any item) receives keyboard focus, mirroring :hover. */
@media (min-width: 1200px) {
  .navmenu .dropdown:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* About value cards: titles became <h3> (was <h4>) to fix a heading-level
   skip; lock the size so they look exactly as before. */
.about .icon-box .title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 14px;
  margin-bottom: 6px;
}
.about .icon-box .title,
.about .icon-box .title a { color: #fff; text-decoration: none; }

/* ---- Contact map: night view + semi-transparent so the teal shows through ----
   The Google embed iframe has no dark theme, so we approximate one with a CSS
   filter (invert + hue-rotate keeps water blue-ish). Tune darkness via invert(),
   transparency via opacity. Hover restores full clarity. */
.cv-map {
  border-radius: 12px;
  border: 1px solid rgba(47, 159, 184, 0.18);
  filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.95);
  opacity: 0.85;
  transition: opacity .25s ease, filter .25s ease;
}
.cv-map:hover {
  opacity: 1;            /* full clarity when the visitor interacts with the map */
}