/* =====================================================================
   site.css — shared overrides for all public pages.
   Loaded AFTER each page's inline <style>, so rules here win.
   ===================================================================== */

:root{
  --font:"Barlow","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Background map — light theme */
  --map-bg:radial-gradient(ellipse at 60% 35%, #FFFFFF 0%, #EEF3F9 70%);
  --map-opacity:.3;
  --map-dot:#2E72C4;       --map-dot-o:.28;
  --map-line-atm:#2E72C4;  --map-line-atm-o:.16;
  --map-line-hub:#2E72C4;  --map-line-hub-o:.35;
  --map-line-dc:#1F5FA8;   --map-line-dc-o:.55;
  --map-packet:#1F5FA8;
  --map-node-fill:#FFFFFF; --map-node-stroke:#2E72C4;
  --map-icon:#1F5FA8;      --map-screen:#5B9BD9;

  /* Translucent surfaces that let the map show through */
  --surface:color-mix(in srgb, var(--paper) 90%, transparent);
  --surface-soft:color-mix(in srgb, var(--mist) 72%, transparent);
  --surface-strong:color-mix(in srgb, var(--paper) 94%, transparent);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --map-bg:radial-gradient(ellipse at 60% 35%, #17335C 0%, #0A1930 55%, #071224 100%);
    --map-opacity:.38;
    --map-dot:#5B9BD9;       --map-dot-o:.5;
    --map-line-atm:#3E6EA5;  --map-line-atm-o:.3;
    --map-line-hub:#5B9BD9;  --map-line-hub-o:.5;
    --map-line-dc:#8FC1EE;   --map-line-dc-o:.7;
    --map-packet:#EAF4FF;
    --map-node-fill:#0A1930; --map-node-stroke:#8FC1EE;
    --map-icon:#DCEBFB;      --map-screen:#5B9BD9;
  }
}
:root[data-theme="dark"]{
  --map-bg:radial-gradient(ellipse at 60% 35%, #17335C 0%, #0A1930 55%, #071224 100%);
  --map-opacity:.38;
  --map-dot:#5B9BD9;       --map-dot-o:.5;
  --map-line-atm:#3E6EA5;  --map-line-atm-o:.3;
  --map-line-hub:#5B9BD9;  --map-line-hub-o:.5;
  --map-line-dc:#8FC1EE;   --map-line-dc-o:.7;
  --map-packet:#EAF4FF;
  --map-node-fill:#0A1930; --map-node-stroke:#8FC1EE;
  --map-icon:#DCEBFB;      --map-screen:#5B9BD9;
}

/* ---------- Typography ---------- */
body, button, input, select, textarea{font-family:var(--font);}
h1,h2,h3,h4,h5{font-family:var(--font);letter-spacing:0;}

/* ---------- Animated Europe map as site-wide background ---------- */
html{background:var(--paper);}
body{background:transparent !important;}
.site-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:var(--map-bg);
}
.site-bg svg{width:100%;height:100%;display:block;opacity:var(--map-opacity);}
.site-bg::after{content:"";position:absolute;inset:0;background:color-mix(in srgb, var(--paper) 25%, transparent);}
.site-bg pattern circle{fill:var(--map-dot);opacity:var(--map-dot-o);}
.site-bg .land-mass{fill:url(#dotPattern);}
.site-bg .net-line{fill:none;stroke-width:.7;}
.site-bg .net-line-atm{stroke:var(--map-line-atm);opacity:var(--map-line-atm-o);}
.site-bg .net-line-hub{stroke:var(--map-line-hub);opacity:var(--map-line-hub-o);}
.site-bg .net-line-dc{stroke:var(--map-line-dc);opacity:var(--map-line-dc-o);stroke-width:1.3;}
.site-bg .packet{fill:var(--map-packet);opacity:.55;}
.site-bg .net-node{fill:var(--map-node-fill);stroke:var(--map-node-stroke);stroke-width:1;}
.site-bg .dc-node{stroke-width:1.3;}
.site-bg .atm-icon rect{fill:none;stroke:var(--map-icon);stroke-width:.9;}
.site-bg .atm-icon .atm-screen{fill:var(--map-screen);stroke:none;opacity:.85;}
.site-bg .atm-icon line{stroke:var(--map-icon);stroke-width:.8;}
.site-bg .hub-icon .hub-ring{fill:none;stroke:var(--map-line-hub);stroke-width:1.1;opacity:.85;}
.site-bg .hub-icon .hub-core{fill:#2E72C4;}
.site-bg .hub-icon line{stroke:var(--map-line-hub);stroke-width:1.1;opacity:.85;}
.site-bg .dc-icon rect{fill:none;stroke:var(--map-icon);stroke-width:1;}
.site-bg .dc-icon .dc-led{fill:#3FBF7F;stroke:none;}
.site-bg .glow{filter:url(#softGlow);}
@media (prefers-reduced-motion: reduce){
  .site-bg animateMotion{display:none;}
}

/* Surfaces become translucent so the map is visible behind them */
header{
  background:var(--surface) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
footer{background:color-mix(in srgb, var(--mist) 90%, transparent) !important;}
.hero{
  background:linear-gradient(100deg, rgba(10,25,48,.92) 0%, rgba(10,25,48,.72) 45%, rgba(10,25,48,.30) 100%) !important;
}
/* in light mode the map under the hero is light, so tint it navy instead of letting grey through */
@media (prefers-color-scheme: light){
  .hero{background:linear-gradient(100deg, rgba(10,25,48,.95) 0%, rgba(10,25,48,.86) 50%, rgba(18,48,88,.88) 100%) !important;}
}
:root[data-theme="light"] .hero{background:linear-gradient(100deg, rgba(10,25,48,.95) 0%, rgba(10,25,48,.86) 50%, rgba(18,48,88,.88) 100%) !important;}

/* Stats: the separator rule also hit the inner number/label divs */
.hero-stats div div{border:0 !important;padding:0 !important;margin:0 !important;}

/* Anchor targets land below the sticky header */
section[id], [id="webportal"]{scroll-margin-top:92px;}
.hero-net{display:none;}          /* the old decorative lines — the real map now sits behind */
.lineup{background:var(--surface-soft) !important;}
.diagram{background:var(--surface-strong) !important;}
.lineup-item,.pcard,.feat,.acc-card,.member{background:var(--surface);}
.pcard:hover{background:var(--surface-strong);}
.spec-table{background:var(--surface);}
[style*="background:var(--paper)"]{background:var(--surface) !important;}

/* ---------- Menu contrast (dropdowns were white with light text in dark mode) ---------- */
nav.primary .nav-item > a{color:var(--ink);opacity:.82;}
nav.primary .nav-item > a:hover{opacity:1;}
nav.primary .dropdown{
  background:var(--paper) !important;
  border:1px solid var(--line-strong) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.28) !important;
}
nav.primary .dropdown a{color:var(--ink) !important;opacity:1;}
nav.primary .dropdown a:hover{background:var(--mist) !important;color:var(--blue-400) !important;}
@media (prefers-color-scheme: light){
  nav.primary .dropdown a:hover{color:var(--blue-600) !important;}
}

/* Ghost buttons with hard-coded blue text were too dark in dark mode */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn-ghost[style*="blue-600"]{color:var(--blue-400) !important;border-color:var(--line-strong) !important;}
  :root:not([data-theme="light"]) .eyebrow[style*="blue-600"]{color:var(--blue-400) !important;}
}
:root[data-theme="dark"] .btn-ghost[style*="blue-600"]{color:var(--blue-400) !important;}
:root[data-theme="dark"] .eyebrow[style*="blue-600"]{color:var(--blue-400) !important;}

/* Product modal had the same white-on-white problem in dark mode */
.pmodal{background:var(--paper) !important;color:var(--ink);}
.pmodal-close{background:var(--paper) !important;}

/* ---------- Clickable feature cards ---------- */
a.feat{display:block;color:inherit;text-decoration:none;transition:background .15s ease;}
a.feat:hover{background:var(--surface-strong);}
a.feat:hover h3{color:var(--blue-500);}
.feat-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:14px;font-weight:600;color:var(--blue-500);
}
.text-link{font-weight:600;color:var(--blue-500);}
.text-link:hover{text-decoration:underline;}

/* ---------- Coverage section ---------- */
.coverage-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px;}
.coverage-grid{display:grid;grid-template-columns:2fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
@media (max-width:800px){ .coverage-grid{grid-template-columns:1fr;} }
.coverage-side{display:flex;flex-direction:column;gap:1px;}
.coverage-region{background:var(--surface-strong);padding:24px 24px;flex:1;}
.coverage-region h3{font-size:16px;font-weight:600;margin-bottom:12px;}
.coverage-region ul{list-style:none;margin:0;padding:0;}
.coverage-region li{font-size:15px;color:var(--muted);padding:3px 0;break-inside:avoid;}
.coverage-region.wide ul{columns:3;column-gap:24px;}
@media (max-width:640px){ .coverage-region.wide ul{columns:2;} }
.coverage-note{font-size:13px;color:var(--muted);margin-top:14px;}

/* ---------- Web portal gallery (small, non-zoomable thumbnails) ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;}
.shot{margin:0;background:var(--surface-strong);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.shot img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line);user-select:none;-webkit-user-drag:none;}
.shot figcaption{padding:10px 12px 12px;}
.shot figcaption strong{display:block;font-size:14.5px;font-weight:600;color:var(--ink);}
.shot figcaption span{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4;}
.portal-contact{
  margin-top:32px;padding:20px 24px;border:1px solid var(--line);border-radius:6px;background:var(--surface-strong);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.portal-contact p{margin:0;color:var(--ink);font-size:16px;}

/* Web portal page spacing */
#gallery{padding-top:28px;}

/* ---------- Tighter vertical rhythm ---------- */
section:not(.hero):not([style*="padding"]){padding:56px 0 !important;}
section[style*="padding:52px 0 12px"]{padding:40px 0 8px !important;}
.hero-inner{padding-top:60px !important;padding-bottom:56px !important;padding-left:32px !important;padding-right:32px !important;}
.section-head{margin-bottom:32px !important;}
.eyebrow{margin-bottom:10px !important;}
footer{padding:44px 0 24px !important;}
.foot-bottom{margin-top:32px !important;}
.cta-band .wrap{padding-top:0;padding-bottom:0;}
@media (max-width:900px){ section:not(.hero):not([style*="padding"]){padding:44px 0 !important;} .hero-inner{padding-top:44px !important;padding-bottom:40px !important;} }
@media (max-width:720px){ .hero-inner{padding-left:20px !important;padding-right:20px !important;} }

/* ---------- "What is TRAC" flow diagram ---------- */
.flow{background:var(--surface-strong);border:1px solid var(--line);border-radius:8px;padding:22px 20px 16px;}
.flow svg{width:100%;height:auto;display:block;overflow:visible;}
.flow .fl-zone{fill:var(--mist);}
.flow .fl-core{fill:var(--navy-950);}
.flow .fl-icon{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.flow .fl-icon-light{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.flow .fl-fill-light{fill:#fff;}
.flow .fl-arrow{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.flow .fl-out{fill:none;stroke:var(--blue-500);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.flow .fl-label{font:600 11.5px var(--font);fill:var(--ink);text-anchor:middle;}
.flow .fl-label-light{font:600 11.5px var(--font);fill:#DCEBFB;text-anchor:middle;}
.flow .fl-pulse{fill:var(--blue-400);}
@media (prefers-reduced-motion: reduce){ .flow animateMotion{display:none;} }
.hero{padding:0 !important;}
/* give the flow diagram more room and larger labels */
#solution .what-grid,#teaser .what-grid{grid-template-columns:0.9fr 1.1fr !important;gap:48px !important;align-items:center;}
@media (max-width:900px){ #solution .what-grid,#teaser .what-grid{grid-template-columns:1fr !important;} }
.flow .fl-label,.flow .fl-label-light{font-size:13px;}
section:not(.hero):not([style*="padding"]){padding:46px 0 !important;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .flow .fl-core{fill:#1B3D68;} }
:root[data-theme="dark"] .flow .fl-core{fill:#1B3D68;}

/* =====================================================================
   Lighter overall look (round 6) — keeps text contrast ≥ 7:1 for body copy
   ===================================================================== */
/* Dark theme: lift the navy a few steps and brighten secondary text */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1B2F4C; --mist:#172A45; --line:#2F4A6E; --line-strong:#3E5B84;
    --ink:#F2F6FB; --muted:#C2CFE0;
    --map-bg:radial-gradient(ellipse at 60% 35%, #2B4D7C 0%, #1D355A 55%, #172A45 100%);
    --map-opacity:.42;
  }
  :root:not([data-theme="light"]) .hero{
    background:linear-gradient(100deg, rgba(27,47,76,.9) 0%, rgba(27,47,76,.66) 50%, rgba(27,47,76,.25) 100%) !important;
  }
  :root:not([data-theme="light"]) .flow .fl-core{fill:#28507F;}
}
:root[data-theme="dark"]{
  --paper:#1B2F4C; --mist:#172A45; --line:#2F4A6E; --line-strong:#3E5B84;
  --ink:#F2F6FB; --muted:#C2CFE0;
  --map-bg:radial-gradient(ellipse at 60% 35%, #2B4D7C 0%, #1D355A 55%, #172A45 100%);
  --map-opacity:.42;
}
:root[data-theme="dark"] .hero{background:linear-gradient(100deg, rgba(27,47,76,.9) 0%, rgba(27,47,76,.66) 50%, rgba(27,47,76,.25) 100%) !important;}
:root[data-theme="dark"] .flow .fl-core{fill:#28507F;}

/* Light theme: the hero becomes a brighter blue instead of near-black navy */
@media (prefers-color-scheme: light){
  .hero{background:linear-gradient(100deg, rgba(22,56,100,.94) 0%, rgba(31,82,142,.86) 50%, rgba(46,114,196,.72) 100%) !important;}
  .flow .fl-core{fill:#1F4777;}
}
:root[data-theme="light"] .hero{background:linear-gradient(100deg, rgba(22,56,100,.94) 0%, rgba(31,82,142,.86) 50%, rgba(46,114,196,.72) 100%) !important;}

/* Partner-login band: lighter blue overlay on the globe photo (both themes) */
.cta-band{
  background-image:linear-gradient(90deg, rgba(22,56,100,.9), rgba(31,82,142,.72)), url('/images/globe-banner.jpg') !important;
}
/* Hero secondary text a touch brighter for legibility on the lighter blue */
.hero p.lede{color:#E1EAF5 !important;}
.hero-stats .label{color:#C9D6E6 !important;}
.hero .eyebrow{color:#A9CBF0 !important;}
/* Primary portal button in the header: blue instead of near-black */
.portal-btn{background:var(--blue-500) !important;border-color:var(--blue-500) !important;}
.portal-btn:hover{background:var(--blue-600) !important;}

/* =====================================================================
   Round 11 — flow diagram additions, team grid, contact columns
   ===================================================================== */
/* flow: ATM–router cable, optional wired WAN */
.flow .fl-cable{fill:none;stroke:var(--blue-500);stroke-width:3;stroke-linecap:round;}
.flow .fl-wan{fill:none;stroke:#B9D4F1;stroke-width:1.6;stroke-dasharray:5 5;stroke-linecap:round;stroke-linejoin:round;opacity:.55;}
.flow .fl-wan-head{stroke-dasharray:none;}
.flow .fl-wan-label{font-size:11px !important;font-weight:500;opacity:.7;}

/* team */
.team-group{margin-top:44px;}
.team-group:first-of-type{margin-top:8px;}
.team-group-title{font-size:22px;font-weight:600;margin:0;color:var(--ink);}
.team-group-lede{color:var(--muted);margin:8px 0 24px;max-width:70ch;}
.team-group-lede a{color:var(--blue-600);font-weight:600;white-space:nowrap;}
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;}
@media (max-width:900px){ .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:640px){ .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;} }
.tm{margin:0;}
.tm-photo{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--mist);}
.tm-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transform:scale(1.001);transition:filter .45s ease, transform .6s ease;}
.tm:hover .tm-photo img,.tm:focus-within .tm-photo img{filter:grayscale(0);transform:scale(1.03);}
@media (hover:none){ .tm-photo img{filter:none;} }
@media (prefers-reduced-motion: reduce){ .tm-photo img{transition:none;} .tm:hover .tm-photo img{transform:none;} }
.tm figcaption{padding-top:12px;}
.tm-name{font-weight:600;font-size:16px;color:var(--ink);}
.tm-role{font-size:13.5px;font-weight:500;color:var(--blue-600);margin-top:2px;}
.tm-contact{display:inline-block;font-size:13.5px;color:var(--muted);margin-top:4px;text-decoration:none;}
.tm-contact:hover{color:var(--blue-600);}

/* contact columns */
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
@media (max-width:720px){ .contact-cols{grid-template-columns:1fr;} }
.contact-col{background:var(--surface-strong);padding:30px 32px;}
.contact-col h3{font-size:22px;font-weight:600;margin:0 0 18px;color:var(--ink);}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.contact-list li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink);}
.contact-list a{color:var(--ink);font-weight:500;}
.contact-list a:hover{color:var(--blue-600);}
.ci{flex:0 0 36px;height:36px;border-radius:8px;background:var(--mist);display:flex;align-items:center;justify-content:center;}
.ci svg{width:18px;height:18px;fill:none;stroke:var(--blue-500);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.contact-vat{margin:18px 0 0;font-size:14px;color:var(--muted);}
.contact-vat strong{color:var(--ink);}

/* dark mode: brighter secondary colours in team + contact */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tm-role,
  :root:not([data-theme="light"]) .team-group-lede a,
  :root:not([data-theme="light"]) .tm-contact:hover,
  :root:not([data-theme="light"]) .contact-list a:hover{color:#8EC0F2;}
  :root:not([data-theme="light"]) .ci{background:#24406A;}
  :root:not([data-theme="light"]) .ci svg{stroke:#8EC0F2;}
}
:root[data-theme="dark"] .tm-role,:root[data-theme="dark"] .team-group-lede a,
:root[data-theme="dark"] .tm-contact:hover,:root[data-theme="dark"] .contact-list a:hover{color:#8EC0F2;}
:root[data-theme="dark"] .ci{background:#24406A;}
:root[data-theme="dark"] .ci svg{stroke:#8EC0F2;}

/* =====================================================================
   Round 12 — orange accent (from the parent company's palette)
   Light theme: burnt orange #B45309 (5.0:1 on white)
   Dark theme:  #F59E56 (6.4:1 on the dark navy)
   Buttons stay blue.
   ===================================================================== */
:root{--accent:#B45309;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--accent:#F59E56;} }
:root[data-theme="dark"]{--accent:#F59E56;}

/* small labels above headings */
.eyebrow{color:var(--accent) !important;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .eyebrow[style*="blue-600"]{color:var(--accent) !important;} }
:root[data-theme="dark"] .eyebrow[style*="blue-600"]{color:var(--accent) !important;}
html .hero .eyebrow{color:#F59E56 !important;}   /* hero is blue in both themes */

/* text links and arrow links */
.text-link,.link-arrow,.feat-more,.team-group-lede a{color:var(--accent) !important;}
.text-link:hover,.link-arrow:hover,.feat-more:hover,.team-group-lede a:hover{text-decoration:underline;}

/* icons */
.feat .icon{color:var(--accent) !important;}
.ci svg{stroke:var(--accent) !important;}

/* team titles */
.tm-role{color:var(--accent) !important;}

/* hover states: menu, dropdown, footer, contact, phone numbers */
nav.primary .nav-item > a:hover{color:var(--accent) !important;opacity:1;}
nav.primary .dropdown a:hover{color:var(--accent) !important;}
@media (prefers-color-scheme: light){ nav.primary .dropdown a:hover{color:var(--accent) !important;} }
.foot-grid a:hover,.contact-list a:hover,.tm-contact:hover{color:var(--accent) !important;}
a.feat:hover h3{color:var(--accent) !important;}