/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* colors */
  --color-white: #fff;
  --color-black: #000;

  /* todo fix gray ordering */
  --color-off-white: #f5f5f5;
  --color-gray-100: #edecee;
  --color-gray-200: #dbd9dd;
  --color-gray-300: #a5a5a5;
  --color-gray-400: #595959;
  --color-gray-500: #524f56;
  --color-gray-500-tranparent: #524f561a;
  --color-gray-600: #4a4b4a;
  --color-gray-700: #262626;
  --color-red: #e90029;
  --color-dark-red: #740014;
  --background-color: var(--color-off-white);
  --text-color: var(--color-gray-400);

  /* fonts */
  --heading-font-family: 'Inter', 'Helvetica Neue', arial, sans-serif;
  --body-font-family: var(--heading-font-family);

  /* body sizes */
  --body-font-size-l: 22px; /* Directly set to 22px */
  --body-font-size-m: 18px; /* Adjusted accordingly */
  --body-font-size-s: 15px; /* Adjusted accordingly */

  /* heading sizes */
  --heading-font-size-xl: 54px; /* Adjusted accordingly */
  --heading-font-size-l: 36px; /* Adjusted accordingly */
  --heading-font-size-m: 26px; /* Adjusted accordingly */
  --heading-font-size-s: 22px; /* Adjusted accordingly */
  --heading-font-size-xs: 20px; /* Adjusted accordingly */
  --heading-font-size-xxs: 14px; /* Adjusted accordingly */

  /* misc */
  --nav-height: 5rem;
  --section-max-width: 1200px;
}

@media (min-width: 600px) {
  :root {
    --nav-height: 12rem;
  }
}

@font-face {
  font-family: inter;
  font-feature-settings: 'liga' 1, 'calt' 1;
  src: local(arial);
  size-adjust: 108.6%;
  descent-override: 10%;
}

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

body {
  background-color: var(--background-color);
  display: none;
  font-family: var(--body-font-family);
  color: var(--text-color);
  font-size: var(--body-font-size-m); /* Default font size */
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  overflow-x: hidden;
}

body.appear {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-weight: 500;
  line-height: 1.1;
  font-family: var(--heading-font-family);
}

.default-content-wrapper > :is(h1, h2, h3, h4, h5, h6, .heading) {
  color: var(--color-gray-700);
}

h1,
.heading-h1 {
  font-size: var(--heading-font-size-xl);
} /* 54px */
h2,
.heading-h2 {
  font-size: var(--heading-font-size-m);
} /* Adjusted accordingly */
h3,
.heading-h3 {
  font-size: var(--heading-font-size-s);
} /* Adjusted accordingly */
h4,
.heading-h4 {
  font-size: var(--heading-font-size-xs);
} /* Adjusted accordingly */
h5,
.heading-h5 {
  font-size: var(--body-font-size-m);
} /* Adjusted accordingly */
h6,
.heading-h6 {
  font-size: var(--body-font-size-s);
} /* Adjusted accordingly */

p {
  font-size: 22px; /* 22px as per requirement */
}

.card-author {
  font-size: 15px; /* 15px as per requirement */
}

.card-description-text {
  font-size: 18px; /* 18px as per requirement */
}

header {
  min-height: var(--nav-height);
  font-size: initial; /* Reset font-size for header */
}

footer {
  font-size: initial; /* Reset font-size for footer */
}

footer .footer:not(.appear) header .header:not(.appear) {
  visibility: hidden;
}

/* progressive section appearance */
main .section[data-section-status="loading"],
main .section[data-section-status="initialized"] {
  display: none;
}

main .section > div {
  max-width: var(--section-max-width);
  margin: 2rem auto;
  padding: 0 2rem;
}

main {
  padding-bottom: 4rem;
}

pre {
  overflow: auto;
}

/* links and buttons */
a {
  color: var(--color-red);
  text-decoration: none;
  text-underline-offset: 0.3rem;
}

a:is(:hover, :focus) {
  color: var(--color-dark-red);
  text-decoration: underline;
}

a.button:any-link,
button:not(.keysight-header button) {
  border: none;
  background: var(--color-red);
  color: var(--color-white);
  padding: 1.3rem 2rem;
  min-height: 52px;
  text-decoration: none;
  outline: none;
  font-size: inherit;
  font-family: inherit;
}

a.button:is(:hover, :focus),
button:not(.keysight-header button):is(:hover, :focus) {
  background-color: var(--color-dark-red);
  cursor: pointer;
}

a.button.secondary,
button.secondary {
  background: var(--color-gray-400);
}

a.button.secondary:is(:hover, :focus),
button.secondary:is(:hover, :focus) {
  background-color: var(--color-gray-500);
}

.icon {
  --icon-width: 10px;

  display: inline-block;
  width: var(--icon-width);
  padding-inline: 0.5rem;
}

.icon :is(svg, img) {
  width: var(--icon-width);
  height: auto;
}

.icon svg {
  fill: currentcolor;
}

/* Keysight header */
.keysight-header #toputil {
  display: flex !important;
}

.keysight-header #header a {
  color: var(--color-gray-700);
}

.explore-desc-container p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.keysight-header
  #header
  .dark
  .generic-tile-content-wrapper
  .generic-tile-cta
  .cta-wrapper
  .cta-button
  .dtx-link {
  color: var(--color-white);
}

@media only screen and (min-width:1024px){
  nav#header {
    position: static;
  }
}