/* Tijara Tech prototype-v2 — shell / harness styles
   Neutralizes the design-tool artboard frame and adds responsive show/hide
   for the desktop vs mobile locked comps, plus interactive nav layers. */

:root{
  --tt-blue:#1474BB; --tt-blue-deep:#0E5A94; --tt-red:#E63035; --tt-red-text:#B4181D;
  --tt-charcoal:#242424; --tt-text-secondary:#4D5761; --tt-text-muted:#64707B;
  --tt-surface-dark:#0A2A45; --tt-surface-dark-deep:#071D31; --tt-blue-on-dark:#7FB8DF;
  --tt-blue-tint:#EDF7FD; --tt-red-tint:#FFF0F1; --tt-border:#DDE5EC; --tt-border-input:#808D99;
  --tt-bg-page:#F7F9FB;
}

html,body{margin:0;background:var(--tt-bg-page);}
*{box-sizing:border-box;}

/* The extracted page root carries the artboard's fixed 1440 device frame.
   Strip the card border/shadow and center it so it reads as a live page. */
.pv-page > *{
  border:0 !important;
  box-shadow:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Responsive: desktop comp on wide screens, mobile comp on phones. */
.pv-desktop{display:block;}
.pv-mobile{display:none;}
@media (max-width:900px){
  .pv-desktop{display:none;}
  .pv-mobile{display:block;}
}

/* ---- Interactive mega-menu panel (injected by nav.js) — matches Phase 13B mega-services ---- */
.pv-mega{position:fixed;z-index:9000;background:#fff;border:1px solid var(--tt-border);
  border-radius:10px;box-shadow:0 18px 50px rgba(10,42,69,.18);padding:28px 32px;display:none;
  font-family:'IBM Plex Sans',sans-serif;color:var(--tt-charcoal);}
.pv-mega.open{display:block;}
.pv-mega .pv-mega-grid{display:grid;gap:8px 48px;align-items:start;}
.pv-mega h4{font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tt-text-muted);margin:0 0 16px;}
.pv-mega ul{list-style:none;margin:0;padding:0;}
.pv-mega li{margin:0 0 16px;}
.pv-mega a{display:grid;grid-template-columns:26px 1fr;gap:2px 10px;text-decoration:none;color:var(--tt-charcoal);}
.pv-mega a .num{grid-row:1 / span 2;font:500 12px/1.5 'IBM Plex Mono',monospace;color:var(--tt-red);}
.pv-mega a .ttl{font:600 15px/1.3 'IBM Plex Sans',sans-serif;}
.pv-mega a:hover .ttl{color:var(--tt-blue);}
.pv-mega a .desc{font:400 12px/1.4 'IBM Plex Mono',monospace;color:var(--tt-text-muted);}
.pv-mega .pv-viewall{display:inline-block;margin-top:6px;font:600 13.5px/1 'IBM Plex Sans';color:var(--tt-blue);text-decoration:none;}
.pv-mega .pv-viewall:hover{color:var(--tt-blue-deep);}
.pv-mega .pv-start{background:var(--tt-blue-tint);border-radius:8px;padding:20px;max-width:280px;}
.pv-mega .pv-start .k{font:500 11px/1 'IBM Plex Mono';letter-spacing:.1em;text-transform:uppercase;color:var(--tt-blue-deep);}
.pv-mega .pv-start .t{font:600 16px/1.3 'IBM Plex Sans';margin:10px 0 6px;}
.pv-mega .pv-start .d{font:400 13px/1.5 'IBM Plex Sans';color:var(--tt-text-secondary);margin-bottom:14px;}
.pv-mega .pv-start .b{display:inline-block;background:var(--tt-blue);color:#fff;font:600 14px/1 'IBM Plex Sans';padding:12px 18px;border-radius:6px;text-decoration:none;}
.pv-mega .pv-start .b:hover{background:var(--tt-blue-deep);}

/* clickable affordance on wired header items */
.pv-hot{cursor:pointer;}

/* ---- Mobile sheet (injected) — matches Phase 13B m-nav ---- */
#pv-msheet{position:fixed;inset:0 0 0 auto;width:min(88vw,380px);background:#fff;z-index:8500;
  transform:translateX(100%);transition:transform .25s ease;overflow:auto;display:none;
  font-family:'IBM Plex Sans',sans-serif;box-shadow:-10px 0 50px rgba(7,29,49,.3);}
#pv-msheet .pv-mtop{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--tt-border);}
#pv-msheet .pv-mtop strong{font:700 16px/1 'IBM Plex Sans';}
#pv-msheet .pv-mclose{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--tt-charcoal);}
#pv-msheet .pv-mrow{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--tt-border);
  font:600 16px/1 'IBM Plex Sans';color:var(--tt-charcoal);cursor:pointer;text-decoration:none;}
#pv-msheet .pv-mrow.cur{color:var(--tt-blue);}
#pv-msheet .pv-mrow .r{display:flex;align-items:center;gap:10px;font:500 12px/1 'IBM Plex Mono';color:var(--tt-text-muted);}
#pv-msheet .pv-macc[open] .pv-mrow .chev{transform:rotate(180deg);}
#pv-msheet .pv-macc .pv-msub{padding:2px 20px 14px;}
#pv-msheet .pv-macc .pv-msub a{display:block;padding:9px 0;font:500 15px/1.2 'IBM Plex Sans';color:var(--tt-text-secondary);text-decoration:none;}
#pv-msheet .pv-macc .pv-msub a.va{color:var(--tt-blue);font-weight:600;font-size:14px;}
#pv-msheet .pv-mcta{margin:18px 20px;display:block;text-align:center;background:var(--tt-blue);color:#fff;font:600 15px/1 'IBM Plex Sans';padding:15px;border-radius:6px;text-decoration:none;}
#pv-msheet .pv-mlang{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--tt-border);}
#pv-msheet .pv-mlang .lbl{font:500 11px/1 'IBM Plex Mono';letter-spacing:.1em;color:var(--tt-text-muted);}
#pv-msheet .pv-mlang .seg{display:flex;border:1px solid var(--tt-border);border-radius:6px;overflow:hidden;}
#pv-msheet .pv-mlang .seg button{border:0;background:#fff;font:600 13px/1 'IBM Plex Sans';padding:8px 14px;cursor:pointer;color:var(--tt-charcoal);}
#pv-msheet .pv-mlang .seg button.on{background:var(--tt-blue);color:#fff;}
/* transparent tap target placed over the design's hamburger */
#pv-mhit{position:fixed;top:0;right:0;width:64px;height:64px;z-index:8600;cursor:pointer;background:transparent;border:0;padding:0;-webkit-appearance:none;appearance:none;}

/* ---- Cookie consent (injected) ---- */
#pv-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:9500;max-width:1160px;margin:0 auto;
  background:#fff;border:1px solid var(--tt-border);border-radius:10px;box-shadow:0 10px 40px rgba(10,42,69,.18);
  padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-family:'IBM Plex Sans',sans-serif;}
#pv-cookie p{margin:0;flex:1 1 320px;font:400 14px/1.5 'IBM Plex Sans';color:var(--tt-text-secondary);}
#pv-cookie .btns{display:flex;gap:10px;flex-wrap:wrap;}
#pv-cookie button{font:600 14px/1 'IBM Plex Sans';padding:11px 16px;border-radius:6px;cursor:pointer;border:1px solid var(--tt-border-input);background:#fff;color:var(--tt-charcoal);}
#pv-cookie button.primary{background:var(--tt-blue);border-color:var(--tt-blue);color:#fff;}
#pv-cookie button.primary:hover{background:var(--tt-blue-deep);}

/* mobile menu sheet overlay is provided by the extracted mobile comp; nav.js wires toggles */
.pv-scrim{position:fixed;inset:0;background:rgba(7,29,49,.4);z-index:8000;display:none;}
.pv-scrim.open{display:block;}