/*
  Computers And Networks Corp - website styles, dark blue look.
  The colors come from the keyboard video on the home page.
  One file for every page. Sections, in order:
    1. Colors, fonts and sizes (change the look here)
    2. Basics
    3. Buttons and the small "key" labels
    4. Top bar, header and menu
    5. Home page hero (video)
    6. Page headings, sections, cards, bands
    7. Rows, check lists, steps
    8. Certifications
    9. Gallery and photo viewer
   10. Contact page and form
   11. Footer
   12. Icons (the drawings beside headings; the files come from the icons folder)
   13. Day and night switch (the day colors themselves are in day.css)
*/

/* ---------- 1. Colors, fonts and sizes ---------- */
:root {
  --night: #0f1230;        /* page background */
  --night-deep: #0a0c22;   /* top bar, footer, form fields */
  --panel: #161a45;        /* cards and bands */
  --panel-bright: #1b2054; /* key labels, glowing band */
  --line: #2a3070;         /* quiet borders */
  --line-bright: #3a428a;  /* borders that need to be seen */
  --text: #c5cbee;         /* body text */
  --text-quiet: #9aa2d0;   /* small print */
  --head: #f3f5ff;         /* headings */
  --glow: #7c97ff;         /* buttons, links, key outlines */
  --glow-bright: #9bb0ff;
  --on-glow: #0b0d24;      /* text on a glowing button */
  --mint: #7fe0d4;         /* focus ring */

  --font-body: "Mulish", "Segoe UI", Arial, sans-serif;
  --font-title: "Quicksand", "Trebuchet MS", "Segoe UI", Arial, sans-serif;

  --page-width: 1160px;
  --gutter: 20px;
  --section-space: 36px;

  color-scheme: dark;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section-space: 48px;
  }
}

/* ---------- 2. Basics ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

img,
video,
iframe {
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  color: var(--head);
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 20;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--glow);
  color: var(--on-glow);
  font-weight: 700;
}

.skip-link:focus {
  top: 8px;
}

.phone {
  color: var(--head);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.phone:hover {
  text-decoration: underline;
}

.text-link {
  color: var(--glow-bright);
  font-weight: 700;
  text-underline-offset: 4px;
}

.text-link:hover {
  color: var(--head);
}

/* ---------- 3. Buttons and the small "key" labels ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 46px;
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--glow);
  box-shadow: 0 0 22px rgba(124, 151, 255, 0.45);
  color: var(--on-glow);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.btn:hover {
  background: var(--glow-bright);
}

.btn--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--line-bright);
  color: var(--head);
}

.btn--ghost:hover {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--glow);
}

.btn--small {
  min-height: 38px;
  padding: 6px 16px;
  font-size: 14px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* Key labels: shaped and lit like the keys in the home page video. */
.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.keys li {
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--panel-bright);
  box-shadow: inset 0 0 0 1.5px #5d7cff, 0 0 10px rgba(93, 124, 255, 0.35);
  color: #e1e6ff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.keys--large li {
  padding: 8px 14px;
  font-size: 15px;
}

/* ---------- 4. Top bar, header and menu ---------- */
.top-bar {
  background: var(--night-deep);
  color: var(--text-quiet);
  font-size: 13px;
}

.top-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 24px;
  padding-block: 7px;
  text-align: center;
}

.top-bar-contact {
  display: none;
}

.top-bar a {
  margin-left: 10px;
  color: var(--head);
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 860px) {
  .top-bar-inner {
    justify-content: space-between;
  }

  .top-bar-contact {
    display: inline;
  }
}

.site-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: var(--night);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-block: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--head);
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}

.brand img {
  flex: none;
  width: 40px;
  height: auto;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: block;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
}

.nav-list a:hover {
  color: var(--head);
}

.nav-list a[aria-current="page"] {
  border-bottom-color: var(--glow);
  color: var(--head);
  font-weight: 700;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--panel);
  color: var(--head);
  cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

/* Below this width the menu folds behind a button (when scripts are on).
   The Instant Support button stays in view at every width. */
@media (max-width: 1139px) {
  .js .header-support,
  .js .color-switch {
    order: 2;
  }

  .js .nav {
    order: 3;
  }

  .js .nav-toggle {
    display: inline-flex;
  }

  .js .nav-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 16px;
    border-bottom: 1px solid var(--line);
    background: var(--night);
  }

  .js .nav.is-open .nav-list {
    display: flex;
  }

  .js .nav-list a {
    padding-block: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
}

@media (max-width: 479px) {
  .brand-name {
    display: none;
  }
}

/* ---------- 5. Home page hero (video) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--night-deep);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the left side so the words stay readable over the video. */
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 18, 48, 0) 70%, var(--night) 100%),
    linear-gradient(90deg, rgba(10, 12, 34, 0.94) 0%, rgba(10, 12, 34, 0.8) 45%, rgba(10, 12, 34, 0.3) 100%);
}

.hero-inner {
  position: relative;
  padding-block: 48px 64px;
}

.hero-logo {
  display: block;
  width: auto;
  height: 110px;
  margin-bottom: 20px;
}

.hero-tagline {
  max-width: 17em;
  margin: 0 0 12px;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.15;
}

.hero-call {
  margin: 0;
  font-size: 18px;
}

.hero-call a {
  color: var(--head);
  font-weight: 700;
  text-decoration: none;
}

.hero-call a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .hero-inner {
    padding-block: 72px 96px;
  }

  .hero-logo {
    height: 160px;
    margin-bottom: 28px;
  }
}

/* ---------- 6. Page headings, sections, cards, bands ---------- */
.page-head {
  padding-block: 40px 36px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--night-deep), var(--night));
}

.page-head h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 4.5vw, 44px);
}

.page-head .keys {
  margin-top: 20px;
}

.page-head--center {
  text-align: center;
}

.page-head--center .lead {
  margin-inline: auto;
}

.lead {
  max-width: 64ch;
  margin: 0;
  font-size: 18px;
}

.page-head--center .lead + p {
  margin: 24px 0 0;
}

.section {
  padding-block: var(--section-space) 0;
}

main > .section:last-child {
  padding-bottom: var(--section-space);
}

.section-title {
  margin: 0 0 24px;
  font-size: 26px;
}

.block-title {
  margin: 0 0 12px;
  font-size: 23px;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 30px;
  }
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 720px) {
  .grid--three,
  .grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1020px) {
  .grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 24px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}

.card p {
  margin: 0;
}

.card-title {
  margin: 0;
  font-size: 22px;
}

.card-title a {
  text-decoration: none;
}

.card--link:hover {
  box-shadow: inset 0 0 0 1px var(--line-bright);
}

.card-more {
  margin-top: auto;
  padding-top: 4px;
}

.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 24px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}

.band-text {
  flex: 1 1 320px;
  min-width: 0;
}

.band-text p {
  max-width: 62ch;
  margin: 0;
}

.band-title {
  margin: 0 0 6px;
  font-size: 22px;
}

.band--glow {
  background: var(--panel-bright);
  box-shadow: inset 0 0 0 1px var(--glow), 0 0 28px rgba(124, 151, 255, 0.18);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.split-text p {
  margin: 0 0 14px;
}

.split-media iframe,
.split-media .video-stand-in {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  background: var(--panel);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

/* ---------- 7. Rows, check lists, steps ---------- */
.rows {
  border-top: 1px solid var(--line);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-block: 26px;
  border-bottom: 1px solid var(--line);
}

.row-title {
  margin: 0;
  font-size: 21px;
}

.row-body {
  min-width: 0;
}

.row-body p {
  max-width: 70ch;
  margin: 0 0 14px;
}

.row-body > :last-child {
  margin-bottom: 0;
}

@media (min-width: 860px) {
  .row {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px;
  }
}

.checks {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 26px;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--panel-bright);
  box-shadow: inset 0 0 0 1.5px var(--glow), 0 0 8px rgba(124, 151, 255, 0.5);
}

.checks--wide {
  max-width: 72ch;
  margin-bottom: 0;
  font-size: 17px;
}

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  min-width: 0;
  padding: 20px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--panel-bright);
  box-shadow: inset 0 0 0 1.5px #5d7cff, 0 0 10px rgba(93, 124, 255, 0.35);
  color: var(--head);
  font-family: var(--font-title);
  font-weight: 700;
}

.steps h3 {
  margin: 12px 0 6px;
  font-size: 18px;
}

.steps p {
  margin: 0;
  font-size: 15px;
}

@media (min-width: 620px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1020px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 8. Certifications ---------- */
.cert {
  min-width: 0;
  text-align: center;
}

.cert-frame {
  padding: 8px;
  border-radius: 12px;
  background: #ffffff;
}

.cert-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.cert-caption {
  margin: 16px 0 12px;
  font-size: 18px;
  font-weight: 500;
}

/* ---------- 9. Gallery and photo viewer ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 720px) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1020px) {
  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.gallery-item {
  min-width: 0;
  margin: 0;
}

.gallery-item a {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}

.gallery-item a:hover {
  box-shadow: 0 0 0 2px var(--glow);
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item figcaption {
  margin-top: 6px;
  color: var(--text-quiet);
  font-size: 14px;
  line-height: 1.35;
}

.lightbox {
  width: min(96vw, 1100px);
  max-height: 96vh;
  padding: 16px;
  border: 0;
  border-radius: 14px;
  background: var(--night-deep);
  box-shadow: 0 0 0 1px var(--line-bright);
  color: var(--text);
}

.lightbox::backdrop {
  background: rgba(5, 6, 18, 0.86);
}

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: 8px;
}

.lightbox-caption {
  min-height: 24px;
  margin: 12px 0;
  text-align: center;
}

.lightbox-close {
  display: block;
  margin: 0 0 12px auto;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--panel);
  color: var(--head);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
}

.lightbox-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ---------- 10. Contact page and form ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

@media (min-width: 860px) {
  .contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

.contact-info p {
  margin: 0 0 4px;
}

.contact-info .block-title + p + .contact-phone {
  margin-top: 12px;
}

.contact-info p + .block-title {
  margin-top: 28px;
}

.contact-phone a {
  color: var(--head);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.contact-phone a:hover {
  text-decoration: underline;
}

.contact-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* Without scripts the form sits under the address block and needs the gap. */
.contact-info + .contact-form {
  margin-top: 32px;
}

.js .contact-info + .contact-form {
  margin-top: 0;
}

.field {
  position: relative;
  margin-bottom: 16px;
}

.field label {
  position: absolute;
  left: 15px;
  top: 7px;
  color: var(--text-quiet);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 25px 14px 8px;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  background: var(--night-deep);
  color: var(--head);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--glow);
  outline: 2px solid var(--glow);
  outline-offset: 0;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field--trap {
  position: absolute;
  left: -9999px;
}

.form-status {
  min-height: 26px;
  margin: 0;
  color: var(--head);
}

.contact-form .actions {
  margin-top: 12px;
}

/* ---------- 11. Footer ---------- */
.site-footer {
  margin-top: var(--section-space);
  padding-block: 36px 24px;
  border-top: 1px solid var(--line);
  background: var(--night-deep);
  color: var(--text-quiet);
  font-size: 14px;
}

.site-footer p {
  margin: 0 0 4px;
}

.site-footer a {
  color: var(--text);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--head);
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.footer-name {
  color: var(--head);
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

@media (min-width: 800px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1.2fr 1fr;
    gap: 40px;
  }
}

/* ---------- 12. Icons ---------- */
/* Every icon is decoration beside a heading that already says what it is,
   so the pages read the same with the icons taken out. */
.card-icon,
.row-icon,
.step-icon,
.icon-title img,
.reasons img,
.page-head-icon {
  flex: none;
  display: block;
}

.card-icon {
  width: 72px;
  height: 72px;
  margin-bottom: -2px;
}

.page-head-inner {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 14px;
}

.page-head-text {
  min-width: 0;
}

.page-head-icon {
  width: 84px;
  height: 84px;
}

@media (min-width: 720px) {
  .page-head-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .page-head-icon {
    width: 136px;
    height: 136px;
  }
}

.row-head,
.icon-title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.row-head {
  align-self: start;
}

.row-icon,
.icon-title img {
  width: 56px;
  height: 56px;
}

.icon-title {
  margin-bottom: 12px;
}

.icon-title > h2 {
  margin: 0;
}

.card .icon-title {
  margin-bottom: 0;
}

.steps li {
  position: relative;
}

.step-icon {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 48px;
  height: 48px;
}

.reasons {
  display: grid;
  gap: 18px;
  max-width: 72ch;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
}

.reasons li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.reasons img {
  width: 48px;
  height: 48px;
}

/* ---------- 13. Day and night switch ---------- */
/* The round button in the header. It shows a sun at night (press for day colors)
   and a moon by day (press for night colors). Hidden when scripts are off. */
.color-switch {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--line-bright);
  color: var(--head);
  cursor: pointer;
}

.color-switch:hover {
  box-shadow: inset 0 0 0 2px var(--glow);
}

.color-switch[data-colors="day"] .color-switch-sun,
.color-switch:not([data-colors="day"]) .color-switch-moon {
  display: none;
}