/*
 * Main styles with responsive breakpoints and custom Archia fonts.
 */

@font-face {
  font-family: 'Archia';
  src: url('/assets/font/archia-regular-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archia';
  src: url('/assets/font/archia-bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  box-sizing: border-box;
  font-size: 100%;
  background-color: #000;
  color: #000;
}

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

body {
  font-family: 'Archia', "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 24px;
  font-size: 15px;
  color: #000;
  background-color: #fff;
}

h1{
  font-size: 32px;
  line-height: 48px;
}

h2 {
  font-size: 19px;
  line-height: 36px;
}

a {
  color: #0055ff;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
main {
  padding-bottom: 96px;
}

footer {
  padding: 24px 16px;
  background: #000;
}

form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

input[type="text"],
input[type="search"] {
  flex: 1 1 320px;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #c7c7c7;
  background-color: #ffffff;
  color: #000000;
  height: 48px;
}

button,
.button,
form a {
  padding: 12px 16px;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  background: #f2f2f2;
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

button:hover,
button:focus,
form a:hover,
form a:focus {
  background: #e5e5e5;
}

section {
  margin-bottom: 48px;
}


section p,
section div {
  color: #333333;
  transition: color 0.25s ease;
}


/* Custom styling */
.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid #c7c7c7;
  padding: 32px 16px 24px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.site-header__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #000000;
  text-decoration: none;
}

.site-header__title {
  font-size: 1.4rem;
  font-weight: 700;
}

.site-header__subtitle {
  font-size: 0.95rem;
  color: #333333;
}

.site-header__controls select {
  font-family: inherit;
  font-size: .84rem;
  padding: 8px 12px;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  background-color: #ffffff;
  color: #000000;
  min-width: 160px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.site-header__form {
  margin: 0 auto;
  gap: 8px;
}

.button--ghost {
  background: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

select {
    height: 32px;
    padding: 0 8px;
}

header {
  background-color: #000;
  padding-bottom: 24px;
}

header h1 {
  color: #fff;
}

  .top-section{
    height: 60px;
  }
  
.flex-center {
  display: flex;
  justify-content: center;   /* centers .container horizontally */
  align-items: center;       /* centers vertically */
  width: 100%;
}

.container {
  width: 100%;
  max-width: 1024px;  
  padding: 0 24px;
}

.space-between {
  display: flex;
  justify-content: space-between;   /* pushes .left and .right apart */
  width: 100%;
}


.header-appIcon {
  width: 36px;
  height: auto;
  border-radius: 9px;
}

.title-card {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.title-card li {
  margin: 24px 0;
}

.title-card h2 {
  font-weight: 400;
  font-size: 19px;
  line-height: 36px;
}

.title-card a {
  display: block; /* makes the whole area clickable */
  border: 1px solid #000000;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  font-weight: 400;
  transition: background-color 0.2s, border-color 0.2s;
}

.title-card a:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Position the clear button inside the search field */
.search-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

#support-search-input {
  width: 100%;
  height: 48px;
  padding-right: 48px; /* leaves room for the clear icon */
  box-sizing: border-box;
}

/* Override and position clear button inside the field */
.clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.4142 16.3137L22.364 21.2635L20.9497 22.6777L16 17.7279L11.0503 22.6777L9.63604 21.2635L14.5858 16.3137L9.63604 11.364L11.0503 9.94975L16 14.8995L20.9497 9.94975L22.364 11.364L17.4142 16.3137Z" fill="black"/></svg>') no-repeat center;
  background-size: 32px 32px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  padding: 0;
}

.line-length {
  max-width: 70ch;
}

.search-result {
  margin-bottom: 48px;
}

.search-result h2 {
  font-size: 19px;
  font-weight: 400;
  padding-bottom: 0;
}

.important-note {
  padding: 24px;
  background-color: #E2E3E4;
}

.important-note p, .important-note ul, .tips-and-reminders p, .tips-and-reminders ul {
  padding: 0;
  margin: 0;
}
.important-note li, .tips-and-reminders li {
  margin-left: 12px;
}

.tips-and-reminders {
  padding: 24px;
  background: #feedaf80;
}

/* Mobile-first responsive layout */
@media (max-width: 599px) {

}

/* Tablet/Desktop breakpoints */
@media (min-width: 600px) and (max-width: 1023px) {

}

@media (min-width: 1024px) {

}