/*
 * Ported from nsg/sophos-firewall/registration/ecom/en-us/index.html
 * Global typography + nav utilities (registration-only blocks omitted).
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--type-fontFamily);
  font-size: var(--type-fontSizeBase);
  font-weight: var(--type-fontWeightNormal);
  color: var(--color-textBody);
  background: var(--color-white);
  line-height: var(--type-lineHeightBody);
  /* letter-spacing: var(--type-trackingBody); */
}

h1 {
  font-family: var(--type-fontFamilyDisplay);
  font-weight: var(--type-fontWeightNormal);
  font-size: var(--type-fontSize4xl);
  line-height: var(--type-lineHeightH1);
  /* letter-spacing: var(--type-trackingH1); */
}

h2 {
  font-family: var(--type-fontFamilyHeading);
  font-weight: var(--type-fontWeightNormal);
  line-height: var(--type-lineHeightH2);
  /* letter-spacing: var(--type-trackingH2); */
}

h3 {
  font-family: var(--type-fontFamily);
  font-weight: var(--type-fontWeightNormal);
  font-size: var(--type-fontSizeXl);
  line-height: var(--type-lineHeightH3);
  /* letter-spacing: var(--type-trackingH3); */
}

h3 strong, h3.h3-strong {
  font-weight: var(--type-fontWeightSemibold);
  letter-spacing: var(--type-trackingH3Strong);
}

h4, h5, h6 {
  font-family: var(--type-fontFamily);
  font-weight: var(--type-fontWeightSemibold);
  line-height: var(--type-lineHeightH3);
  /* letter-spacing: var(--type-trackingH3); */
}

p {
  font-family: var(--type-fontFamily);
  font-size: var(--type-fontSizeBase);
  line-height: var(--type-lineHeightBody);
  /* letter-spacing: var(--type-trackingBody); */
}

p + p {
  margin-top: var(--type-paragraphSpacing);
}

.text-inset, .inset {
  font-family: var(--type-fontFamily);
  font-size: var(--type-fontSizeXs);
  line-height: var(--type-lineHeightInset);
  /* letter-spacing: var(--type-trackingInset); */
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.inline-code {
  background: var(--color-bgAlt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.375rem;
  font-size: var(--type-fontSizeSm);
  font-family: var(--type-fontFamilyMono);
  color: var(--color-primary);
  word-break: break-all;
}

@media (max-width: 639px) {
  body {
    font-size: 1rem;
    line-height: 1.5;
  }
}

.shadow-card { box-shadow: var(--shadow-card); }
.shadow-navbar { box-shadow: var(--shadow-navbar); }
.shadow-theme-lg { box-shadow: var(--shadow-lg); }
.border-theme { border: 1px solid var(--color-border); }
.border-theme-light { border: 1px solid var(--color-borderLight); }
.nav-height { height: var(--layout-navbarHeight); }

@media print {
  .no-print { display: none !important; }
}

/* Main offset below fixed navbar */
.main-below-nav {
  padding-top: calc(var(--layout-navbarHeight) + 1.5rem);
  padding-bottom: 3rem;
}