@import url('theme.css');
@import url('components.css');

* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  font-size: 100%;
  --content-max-width: 1500px;
  --backoffice-actions-color: #686870;
}

body {
  --body-margin-top: 105px;

  background-color: var(--cgd-light-grey-background, var(--cream-background-color));
  color: var(--cgd-text-color, var(--text-color));
  margin-top: var(--body-margin-top); /* Fix header CLS */
  overflow-x: hidden; /* To hide horizontal scrollbar when changing highlight slide */
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--body-margin-top));
}

body[no-header-margin] {
  margin-top: 0px; /* Fix header CLS */
  height: 100vh;
}

.page__wrapper {
  flex-grow: 1;
}

select {
  border-radius: 0;
}

button,
input,
select {
  font-family: inherit;
  font-size: var(--cgd-text-font-size, 1rem);
}

button {
  cursor: pointer;
  border: none;
  background-color: transparent;
}

a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

ul {
  list-style-type: none;
  padding: 0;
}

[hidden] {
  display: none !important;
}

.no-scroll {
  overflow: hidden !important;
}

/* Element will be visible for screen readers only */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  clip-path: inset(100% 100% 100% 100%) !important;
  overflow: hidden !important;
  transform: translateX(-200vw) !important;
}

/* Applied to layouts which need breathing space (and also can't have Sliders as their first strip-type) */
.article-page-layout,
.articles-index-layout,
.news-page-layout,
.feature-page-layout,
.features-index-layout {
  padding: 3.75rem 0;
}

/* Applied to layouts where the width should be limited for the whole content */
.page__sizing {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* Applied to layouts where the width cant be limited for the whole content (either because the strips must have full width background-color, or there are highlight-slides, etc) */
.page__sizing--full-width .strip:not([strip-type="slider"]) .strip__wrapper,
.page__sizing--full-width .manual-related__wrapper {
  max-width: var(--content-max-width);
}

.page__title {
  font-size: var(--cgd-h1-hero-font-size, 3.75rem);
  font-weight: 600;
  line-height: 1.3em;
  color: var(--cgd-headings-color, var(--headings-highlights-color));
}

.return-link,
.page-navigator-link {
  display: inline-block;
  font-size: var(--cgd-text-font-size, 1rem);
  font-weight: 700;
  text-decoration: underline;
  color: var(--cgd-link-color, var(--primary-accent-color));
  text-transform: uppercase;
}

.return-link {
  margin-bottom: var(--cgd-separator-small-margin, 1.25rem);
}



/* Left arrow */

.return-link::before,
.page-navigator-link.left::before {
  content: "\2190";
  padding-right: 0.5em;
  display: inline-block;
  transition: transform 0.2s linear;
}

.return-link:hover::before,
.page-navigator-link.left:hover::before {
  transform: translateX(2px);
}


/* Right arrow */

.site-header .nav__login-text::after,
.page-navigator-link.right::after,
.basic-info[type="list"] .clickable__link::after,
.card__link::after,
.price-table__feature-row .price-table__feature-name:has(.price-table__feature-link) > *:last-child::after,
.schedule-card .clickable__button:not([disabled])::after {
  content: "\2192";
  padding-left: 0.5em;
  display: inline-block;
  transition: transform 0.2s linear;
}

.site-header .nav__login-text:hover::after,
.page-navigator-link.right:hover::after,
.basic-info[type="list"] .clickable__link:hover::after,
.card__link:hover::after,
.price-table__feature-row:hover .price-table__feature-name:has(.price-table__feature-link):hover > *:last-child::after,
.schedule-card .clickable__button:hover::after {
  transform: translateX(-2px);
}


/* Right arrow - price table */

/* .price-table__feature-row .price-table__feature-name:has(.price-table__feature-link) > *:last-child::after {
  opacity: 0;
  transition: transform 0.3s linear, opacity 0.3s linear;
} */

/* .price-table__feature-row:hover .price-table__feature-name:has(.price-table__feature-link) > *:last-child::after {
  opacity: 1;
  transition: transform 0.2s linear, opacity 0.2s linear;
} */




/*******************************************************************************************
*                                                                                          *
*                                    Media Queries                                         *
*                                                                                          *
********************************************************************************************/

/* <= 480px  */
@media (max-width:30rem) {
  :root {
    font-size: 90%;
  }
}