/*
 * mobile.css — phone layout and contrast fixes (2026-11-10).
 *
 * Loaded last from header.php so it wins over the stacked rules in
 * style.css / theme.css; selectors start with "html body.pi-site" for the
 * same reason. Desktop layout is unchanged apart from the contrast rules.
 */

/* dist/styles.css keeps the theme rules in "@layer components", and
 * !important rules inside a layer beat unlayered ones, so these rules sit in
 * that same layer; later order and higher specificity then win. */
@layer components {

/* ---------- Contrast (all screen sizes) ---------- */
/* Small section labels were near-white on white. */
html body.pi-site .pi-services-section .pi-kicker,
html body.pi-site .pi-contact .pi-kicker,
html body.pi-site .pi-approach .pi-kicker { color: #805900 !important; }
/* Gold words in headings on light backgrounds were too faint. */
html body.pi-site .pi-contact h2 span,
html body.pi-site .pi-approach h2 span,
html body.pi-site .pi-section-heading h2 span { color: #8a6200 !important; }

/* The menu button only exists on phones. */
html body.pi-site .pi-menu-toggle { display: none !important; }

@media (max-width: 700px) {
  /* ---------- Header: logo + menu button ---------- */
  html body.pi-site .pi-header { position: sticky !important; top: 0 !important; z-index: 50 !important; }
  html body.pi-site .pi-header-inner {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: space-between !important;
    gap: 12px !important; min-height: 64px !important; padding: 8px 0 !important;
  }
  html body.pi-site .pi-brand { max-width: calc(100% - 60px) !important; }
  html body.pi-site .pi-logo { width: 150px !important; max-height: 42px !important; }

  html body.pi-site .pi-menu-toggle {
    display: inline-flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 5px !important;
    width: 46px !important; height: 46px !important; padding: 0 !important; flex-shrink: 0 !important; cursor: pointer !important;
    background: transparent !important; border: 1px solid rgba(212, 175, 55, .55) !important; border-radius: 10px !important;
  }
  html body.pi-site .pi-menu-toggle span {
    display: block !important; width: 22px !important; height: 2px !important; border-radius: 2px !important; background: #F3C969 !important;
    transition: transform .2s, opacity .2s !important;
  }
  html body.pi-site .pi-nav-open .pi-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  html body.pi-site .pi-nav-open .pi-menu-toggle span:nth-child(2) { opacity: 0 !important; }
  html body.pi-site .pi-nav-open .pi-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  /* Menu panel, hidden until the button is pressed. */
  html body.pi-site .pi-nav {
    display: none !important;
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    width: auto !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    margin: 0 !important; padding: 8px 16px 20px !important;
    background: #0F2A44 !important; border-bottom: 2px solid #D4AF37 !important; box-shadow: 0 18px 30px rgba(3, 18, 33, .45) !important;
  }
  html body.pi-site .pi-nav-open .pi-nav { display: flex !important; }
  html body.pi-site .pi-nav .pi-menu {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    gap: 0 !important; padding: 0 !important; margin: 0 0 14px !important; width: 100% !important;
  }
  html body.pi-site .pi-nav .pi-menu li { border-bottom: 1px solid rgba(255, 255, 255, .1) !important; }
  html body.pi-site .pi-nav .pi-menu a {
    display: flex !important; align-items: center !important; min-height: 50px !important;
    font-size: 17px !important; line-height: 1.3 !important; font-weight: 600 !important;
  }
  html body.pi-site .pi-nav .pi-menu li:first-child a:after { display: none !important; }
  html body.pi-site .pi-nav-cta {
    position: static !important; width: 100% !important; min-height: 50px !important;
    justify-content: center !important; font-size: 16px !important; padding: 13px 16px !important; border-radius: 10px !important;
  }

  /* ---------- Hero picture: a tidy 2x3 grid instead of a shrunk diagram ---------- */
  html body.pi-site .pi-hero-visual.pi-globe-scene {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important;
    height: auto !important; margin: 18px 0 6px !important; overflow: visible !important; transform: none !important;
  }
  html body.pi-site .pi-hero-visual.pi-globe-scene .pi-globe,
  html body.pi-site .pi-hero-visual.pi-globe-scene .pi-globe-halo,
  html body.pi-site .pi-hero-visual.pi-globe-scene .pi-globe-orbit,
  html body.pi-site .pi-hero-visual.pi-globe-scene .pi-network-lines,
  html body.pi-site .pi-hero-visual.pi-globe-scene .pi-tech-ai { display: none !important; }
  html body.pi-site .pi-hero-visual.pi-globe-scene .pi-tech-card {
    position: static !important; inset: auto !important; transform: none !important; animation: none !important;
    min-width: 0 !important; max-width: none !important; min-height: 56px !important;
    padding: 10px 12px !important; gap: 10px !important; font-size: 13px !important; line-height: 1.25 !important;
  }
  html body.pi-site .pi-hero-visual.pi-globe-scene .pi-tech-icon { min-width: 20px !important; font-size: 19px !important; }

  /* ---------- Readable text sizes ---------- */
  html body.pi-site .pi-capability-strip { font-size: 13px !important; }
  html body.pi-site .pi-strip-label { font-size: 11px !important; }
  html body.pi-site .pi-kicker { font-size: 11px !important; }
  html body.pi-site .pi-card-top { font-size: 11px !important; }
  html body.pi-site .pi-card p { font-size: 15px !important; }
  html body.pi-site .pi-card > a, html body.pi-site .pi-text-link { font-size: 14px !important; }
  html body.pi-site .pi-step strong { font-size: 16px !important; }
  html body.pi-site .pi-step small { font-size: 14px !important; }
  html body.pi-site .pi-button { font-size: 15px !important; min-height: 50px !important; }
  html body.pi-site .pi-footer-bottom { font-size: 13px !important; }
}
}