/* Shared site chrome: top navigation, footer layout, area colours.
   Included on every page by tools/build_site.py — edit here, not per page. */

:root {
  --a-svc: #0d9488;  --a-svc-bg: #ccfbf1;   /* IT services */
  --a-sw: #7c3aed;   --a-sw-bg: #ede9fe;    /* Software */
  --a-tool: #d97706; --a-tool-bg: #fef3c7;  /* Free tools */
  --a-co: #6366f1;   --a-co-bg: #e0e7ff;    /* Company */
  --sn-ink: #16132b; --sn-body: #4a4660; --sn-mute: #8885a0;
  --sn-h: 64px;
}

/* ═══ TOP NAV ═══ */
.sn {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(22,19,43,0.07);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
.sn::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--a-svc), var(--a-sw), var(--a-tool)); }
html[data-area="services"] .sn::before { background: var(--a-svc); }
html[data-area="software"] .sn::before { background: var(--a-sw); }
html[data-area="tools"] .sn::before { background: var(--a-tool); }
html[data-area="about"] .sn::before, html[data-area="contact"] .sn::before { background: var(--a-co); }

.sn-bar { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 24px; height: var(--sn-h); display: flex; align-items: center; gap: 10px; }
.sn-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: 18px; flex-shrink: 0; }
.sn-brand img { width: 34px; height: 34px; display: block; }
.sn-brand span { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: var(--sn-ink); letter-spacing: -0.5px; white-space: nowrap; }

.sn-menu { display: flex; align-items: center; gap: 2px; }
.sn-item { position: relative; }
.sn-item[data-area="services"] { position: static; }
.sn-top {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 14.5px 'DM Sans', sans-serif; color: var(--sn-body); text-decoration: none;
  background: none; border: none; cursor: pointer; padding: 9px 13px; border-radius: 9px; transition: color .15s, background .15s;
}
.sn-top svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sn-top:hover, .sn-top[aria-expanded="true"] { color: var(--sn-ink); background: rgba(22,19,43,0.05); }
.sn-top[aria-expanded="true"] svg { transform: rotate(180deg); }
.sn-top:focus-visible, .sn-link:focus-visible, .sn-cta:focus-visible, .sn-burger:focus-visible { outline: 2px solid var(--a-sw); outline-offset: 2px; }
html[data-area="services"] .sn-item[data-area="services"] > .sn-top { color: var(--a-svc); font-weight: 600; }
html[data-area="software"] .sn-item[data-area="software"] > .sn-top { color: var(--a-sw); font-weight: 600; }
html[data-area="tools"] .sn-item[data-area="tools"] > .sn-top { color: var(--a-tool); font-weight: 600; }
html[data-area="about"] .sn-item[data-area="about"] > .sn-top,
html[data-area="contact"] .sn-item[data-area="contact"] > .sn-top { color: var(--a-co); font-weight: 600; }

.sn-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 2;
  min-width: 330px; background: #fff; border: 1px solid rgba(22,19,43,0.08); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(22,19,43,0.14); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.sn-item[data-area="services"] > .sn-panel { left: 24px; right: 24px; }
.sn-panel-md { min-width: 600px; }
.sn-item.open > .sn-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.sn-cols { display: grid; gap: 26px; padding: 24px 26px 18px; }
.sn-cols-4 { grid-template-columns: repeat(4, 1fr); }
.sn-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sn-col h4 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sn-mute); margin: 0 0 10px; }
.sn-link { display: flex; gap: 11px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; transition: background .14s; }
.sn-link:hover { background: rgba(22,19,43,0.04); }
.sn-link b { display: block; font-size: 14px; font-weight: 600; color: var(--sn-ink); line-height: 1.35; }
.sn-link small { display: block; font-size: 12px; color: var(--sn-mute); line-height: 1.45; margin-top: 1px; }
.sn-ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sn-ic svg { width: 16px; height: 16px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.a-svc { background: var(--a-svc-bg); } .a-svc svg { stroke: var(--a-svc); }
.a-sw { background: var(--a-sw-bg); }   .a-sw svg { stroke: var(--a-sw); }
.a-tool { background: var(--a-tool-bg); } .a-tool svg { stroke: var(--a-tool); }
.sn-item[data-area="services"] .sn-link:hover b { color: var(--a-svc); }
.sn-item[data-area="software"] .sn-link:hover b { color: var(--a-sw); }
.sn-item[data-area="tools"] .sn-link:hover b { color: var(--a-tool); }
.sn-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 26px; background: #faf9f7; border-top: 1px solid rgba(22,19,43,0.06); font-size: 13px; color: var(--sn-body); }
.sn-foot a { color: var(--a-sw); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sn-item[data-area="services"] .sn-foot a { color: var(--a-svc); }
.sn-foot a:hover { text-decoration: underline; }

.sn-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sn-phone-link { font-size: 14px; font-weight: 600; color: var(--sn-body); text-decoration: none; padding: 8px 6px; white-space: nowrap; }
.sn-phone-link:hover { color: var(--sn-ink); }
.sn-cta {
  font: 600 14px 'DM Sans', sans-serif; color: #fff; text-decoration: none; white-space: nowrap;
  padding: 10px 18px; border-radius: 10px; background: linear-gradient(135deg, var(--a-svc), #0f766e);
  box-shadow: 0 2px 14px rgba(13,148,136,0.3); transition: transform .2s, box-shadow .2s;
}
.sn-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(13,148,136,0.38); }
.sn-burger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(22,19,43,0.1); background: #fff; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sn-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--sn-ink); transition: transform .2s, opacity .2s; }
.sn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.sn-mobile-extra { display: none; }

@media (max-width: 1180px) {
  .sn-phone-link { display: none; }
  .sn-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .sn-burger { display: flex; }
  .sn-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid rgba(22,19,43,0.08); box-shadow: 0 24px 48px rgba(22,19,43,0.12);
    max-height: calc(100vh - var(--sn-h) - 3px); overflow-y: auto; padding: 8px 16px 20px;
  }
  .sn.menu-open .sn-menu { display: flex; }
  .sn-item, .sn-item[data-area="services"] { position: static; border-bottom: 1px solid rgba(22,19,43,0.06); }
  .sn-top { width: 100%; justify-content: space-between; padding: 15px 4px; font-size: 16px; border-radius: 0; }
  .sn-top:hover, .sn-top[aria-expanded="true"] { background: none; }
  .sn-panel, .sn-panel-md, .sn-item[data-area="services"] > .sn-panel {
    position: static; display: none; min-width: 0; box-shadow: none; border: none; border-radius: 0;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .sn-item.open > .sn-panel { display: block; }
  .sn-cols, .sn-cols-4, .sn-cols-2 { grid-template-columns: 1fr; gap: 14px; padding: 0 0 12px; }
  .sn-foot { padding: 10px 4px 14px; background: none; border: none; flex-direction: column; align-items: flex-start; gap: 4px; }
  .sn-mobile-extra { display: block; padding-top: 16px; }
  .sn-phone { display: block; text-align: center; padding: 13px; border-radius: 12px; border: 1px solid rgba(22,19,43,0.1); color: var(--sn-ink); font-weight: 600; text-decoration: none; }
}
@media (max-width: 560px) {
  .sn-bar { padding: 0 16px; }
  .sn-brand span { font-size: 16px; }
  .sn-cta { padding: 9px 12px; font-size: 13px; }
}
@media (max-width: 400px) { .sn-brand span { display: none; } }

/* The nav carries the logo now */
.mobile-hero-logo { display: none !important; }
a.service-add-btn { text-decoration: none; }

/* ═══ FOOTER (five columns) ═══ */
footer .footer-grid.sf-grid { grid-template-columns: 1.5fr 1.15fr 1.15fr 0.95fr 1.05fr 0.9fr; gap: 32px; }
footer .footer-brand p { max-width: 260px; }
.sf-services h5 { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75); margin: 0 0 4px; }
.sf-services a + h5 { margin-top: 14px; }
.sf-spacer { visibility: hidden; }
.sf-gap-sm { margin-top: 16px; }
@media (max-width: 1024px) {
  footer .footer-grid.sf-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  footer .footer-grid.sf-grid .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  footer .footer-grid.sf-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .sf-spacer { display: none; }
}
@media (max-width: 420px) {
  footer .footer-grid.sf-grid { grid-template-columns: 1fr; }
}

/* ═══ AREA COLOURS ON PAGES ═══ */
/* Software pages get the purple hero (they used to share the teal IT look) */
html[data-area="software"] .about-hero:not(.pro-hero) { background: linear-gradient(315deg, #ddd6fe 0%, #c4b5fd 25%, #a78bfa 50%, #8b5cf6 75%, #6d28d9 100%); }
html[data-area="software"] .about-hero:not(.pro-hero)::before { background: radial-gradient(ellipse at 20% 50%, rgba(109,40,217,0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(99,102,241,0.22) 0%, transparent 45%), radial-gradient(ellipse at 50% 90%, rgba(196,181,253,0.2) 0%, transparent 40%); }

/* Software pages end with a product call-to-action instead of the IT pitch */
.cta-box.cta-sw { background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 40%, #6366f1 100%); }
.cta-it-link { text-align: center; margin-top: 22px; font-size: 15px; color: #4a4660; }
.cta-it-link a { color: var(--a-svc); font-weight: 700; text-decoration: none; }
.cta-it-link a:hover { text-decoration: underline; }