/* ==========================================================================
   1. Global styles
   ==========================================================================

   - Fonts and images has to be uploaded to Sanity Studio first
   */

/*
   Palette:
   Background: #222222;
   darker surfaces: #191919 / #131313
   Text: #f7f1ff;
   muted: #bab6c0
   Accents: #fc618d, #fd9353, #fce566, #5ad4e6, #948ae3
   Neutral surfaces and borders: #37353E, #525053, #69676c
*/

:root {
  --hljs-comment: #69676c;
  --hljs-punctuation: #bab6c0;
  --hljs-tag-name: #fc618d;
  --hljs-keyword: #fc618d;
  --hljs-string: #fce566;
  --hljs-variable: #f7f1ff;
  --hljs-literal: #948ae3;
  --hljs-built_in: #5ad4e6;
  --hljs-meta: #fd9353;
  --hljs-meta-string: #fce566;
}

/* ==========================================================================
   2. Element styles
   ========================================================================== */

body {
  color: #f7f1ff;
  background: #222222;
}

:where(a, a:visited, a:active, a:hover) {
  color: #5ad4e6;
}

:focus-visible {
  outline: 2px solid #5ad4e6;
  outline-offset: 3px;
}

/* --- Button element --- */

button,
input[type='submit'],
a.button {
  padding: 12px 26px;
  border-radius: 4px;
  color: #f7f1ff;
  background: #525053;
  border: 1px solid #37353e;
  transition: background 0.2s ease;
}

button.primary,
input[type='submit'].primary,
a.button.primary,
button.secondary,
input[type='submit'].secondary,
a.button.secondary {
  background: #525053;
  color: #f7f1ff;
  border-color: #37353e;
}

button.primary:hover,
input[type='submit'].primary:hover,
a.button.primary:hover,
button.secondary:hover,
input[type='submit'].secondary:hover,
a.button.secondary:hover,
button:hover,
input[type='submit']:hover,
a.button:hover {
  background: #69676c;
  color: #f7f1ff;
}

:is(button, input[type='submit'], a.button):is(
    :disabled,
    [aria-disabled='true']
  ) {
  color: #bab6c0;
  background: #37353e;
  border-color: #69676c;
  cursor: default;
}

input[type='button'],
input[type='reset'],
[role='button'],
.pagination-link,
.pagination-current,
.pagination-disabled,
.flash,
.pagelist-item {
  border-radius: 4px;
}

/* --- Form element --- */

input:not(:where([type='submit'], [type='button'], [type='reset'])),
textarea,
select,
.search-input {
  border-radius: 4px;
  color: #f7f1ff;
  background: #191919;
  border-color: #69676c;
  accent-color: #fd9353;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #5ad4e6;
  outline: 2px solid #5ad4e6;
  outline-offset: 2px;
}

input:disabled,
textarea:disabled,
select:disabled {
  color: #bab6c0;
  background: #37353e;
}

.field label {
  color: #f7f1ff;
}

.field em.field-error {
  color: #fc618d;
}

/* --- Dialog element --- */

dialog,
.dialog-content {
  border-radius: 4px;
  color: #f7f1ff;
  background: #191919;
  border-color: #69676c;
}

.dialog-close a {
  color: #f7f1ff;
}

/* --- Sidebar element --- */

.sidebar,
.sidebar-mobile-links > ul > li,
.sidebar-mobile-links > ul li ul,
.sidebar-mobile-groups-menu {
  border-radius: 4px;
  color: #f7f1ff;
  background: #191919;
}

.sidebar-mobile-links > ul a,
.sidebar-mobile-links > ul > li a,
.sidebar-mobile-links > ul li ul a {
  color: #f7f1ff;
}

.sidebar-mobile-links > ul li ul li:hover,
.sidebar-mobile-links > ul li ul li:focus-within {
  background: #525053;
}

/* --- Pagination element --- */

.pagination-link {
  color: #5ad4e6;
}

.pagination-current {
  color: #222222;
  background: #fd9353;
}

.pagination-disabled {
  color: #bab6c0;
}

/* --- Form placeholders --- */

input::placeholder,
textarea::placeholder {
  color: #bab6c0;
  opacity: 1;
}

/* --- Burger element --- */

.burger-line {
  background: #f7f1ff;
}

/* --- Layout element --- */

.layout > .footer {
  background: #191919;
}

/* ==========================================================================
   3. Component styles
   ========================================================================== */

/* --- Ingress component --- */

.ingress-logo img,
.ingress-mobile-logo img,
.ingress-overlay-logo img,
.linkrow-logo img,
.pillars-logo img,
.reel-logo img,
.testimonial-logo {
  filter: brightness(0) invert(1);
}

.ingress-nav a,
.ingress-mobile-nav a {
  color: #f7f1ff;
}

.ingress-nav a.active,
.ingress-mobile-nav a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.ingress-mobile-overlay {
  background: #191919;
}

.ingress-nav-toggler.open + .ingress-submenu {
  border-radius: 4px;
  background: #191919;
}

.ingress-language-chevron {
  filter: brightness(0) invert(1);
}

.ingress-language-menu {
  border-radius: 4px;
  background: #191919;
}

.ingress-language-link {
  color: #f7f1ff;
}

.ingress-overlay-close a {
  color: #f7f1ff;
}

.ingress-nav .toggle li:hover {
  background: #525053;
}

.ingress-nav-toggler,
.ingress-language-trigger,
.ingress-search button {
  color: #f7f1ff;
  background: transparent;
  border: 0;
}

.ingress-searchbar-mobile button {
  color: #f7f1ff;
  background: #525053;
  border-color: #69676c;
}

.ingress-language-link:hover,
.ingress-language-link:focus-visible,
.ingress-nav .toggle li:focus-within {
  background: #525053;
}

/* --- Icons --- */

.ingress-nav-toggler img,
.ingress-mobile-toggle img,
.ingress-search img,
.icon-search-mobile,
.faq-question-toggler img,
.sidebar-mobile-links img,
.sidebar-mobile-groups menu img,
.search-icon,
.privacy-icon,
.privacy-blocked > img {
  filter: brightness(0) invert(1);
}

/* --- Announcement component --- */

.announcement {
  color: #f7f1ff;
  background: #37353e;
}

/* --- Credits component --- */

.credits {
  background: #131313;
  color: #f7f1ff;
}

/* --- Pillars component --- */

.pillars {
  padding-top: 48px;
  color: #f7f1ff;
}

.pillars a {
  color: #f7f1ff;
}

.pillar-heading {
  font-size: 1.25rem;
}

/* --- Socialmedia component --- */

.socialmedia-icon {
  filter: brightness(0) invert(1);
}

.socialmedia a > span {
  color: #f7f1ff;
}

/* --- Newsletter component --- */

.newsletter {
  margin: 0;
  background: #37353e;
  padding-bottom: 48px;
}

.newsletter-inner {
  border-radius: 4px;
  max-width: 800px;
  margin-inline: auto;
  background: #191919;
  padding: 48px;
}

.newsletter-pitch {
  color: #bab6c0;
}

/* --- Privacy component --- */

.privacy-notice {
  border-radius: 4px;
  background: #191919;
  color: #f7f1ff;
  border-color: #525053;
}

.privacy-blocked {
  border-radius: 4px;
  color: #f7f1ff;
  background: #191919;
  border-color: #69676c;
}

/* --- Cards component --- */

.card {
  border-radius: 4px;
  color: #f7f1ff;
  background: #37353e;
  border: 1px solid #37353e;
  box-shadow: none;
  transition: background-color 0.2s, border-color 0.2s;
}

.card:hover,
.card:focus-within {
  background: #525053;
  border-color: #948ae3;
  box-shadow: none;
}

.card-tag {
  border-radius: 4px;
  color: #f7f1ff;
  background: #37353e;
  border-color: #69676c;
}

/* --- Comparison component --- */

.comparison-table th,
.comparison-table td {
  color: #bab6c0;
  border-bottom: 1px solid #525053;
  padding: 24px 28px;
  vertical-align: middle;
  font-size: 0.95rem;
  line-height: 1.55;
}

.comparison-table th:first-child {
  width: 24%;
}

.comparison-table tbody th {
  color: #f7f1ff;
}

.comparison-table tr > :last-child {
  color: #f7f1ff;
  background: #191919;
}

.comparison-table tbody tr:last-child > * {
  border-bottom: 0;
}

/* --- Pricing component --- */

.pricing {
  gap: 18px;
  padding: 0;
}

.pricing-plan {
  border-radius: 4px;
  flex-basis: 280px;
  color: #f7f1ff;
  background: #191919;
  border-color: #525053;
  padding: 30px;
}

.pricing-plan:nth-child(2) {
  border-color: #948ae3;
}

.pricing-name {
  color: #f7f1ff;
  font-size: 1.15rem;
  font-weight: 700;
}

.pricing-badge {
  border-radius: 4px;
  color: #fd9353;
  background: #37353e;
  border: 1px solid #948ae3;
  text-transform: none;
  font-weight: 600;
}

.pricing-price {
  color: #f7f1ff;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.15;
}

.pricing-info {
  color: #bab6c0;
  font-weight: 400;
}

.pricing-features li {
  color: #f7f1ff;
  border: 0;
}

.pricing-plan:nth-child(2) .pricing-button a.button {
  background: #fd9353;
  border-color: #fd9353;
  color: #222222;
}

.pricing-plan:nth-child(2) .pricing-button a.button:hover {
  background: #5ad4e6;
}

/* --- Steps component --- */

.steps-item-marker {
  height: 44px;
  border-radius: 50%;
  color: #222222;
  background: #fd9353;
  text-align: center;
  line-height: 44px;
  font-size: 1.5rem;
  font-weight: 700;
}

/* --- Stats component --- */

.stats-data {
  gap: 16px;
}

.stats dl {
  border-radius: 4px;
  flex: 1;
  min-width: 0;
  color: #f7f1ff;
  background: #37353e;
  padding: 24px;
  text-align: left;
}

.stats dt {
  margin-bottom: 24px;
  line-height: 1;
}

/* --- Contact component --- */

.contact {
  border-radius: 4px;
  background: #191919;
}

/* --- Pagelist component --- */

.pagelist-item {
  box-shadow: none;
  border: 1px solid #191919;
  background-color: #37353e;
}

.pagelist-item:hover {
  box-shadow: none;
  border: 1px solid #948ae3;
}

/* --- Content components --- */

.banner,
.infobox,
.factbox,
.search-header,
.gallery-slide,
.gallery-controls {
  border-radius: 4px;
  color: #f7f1ff;
  background: #191919;
}

.video-title,
.product-price,
.testimonial-quote blockquote,
.testimonial-author,
.quote blockquote,
.citation blockquote {
  color: #f7f1ff;
}

.article-meta,
.product-meta,
.video-caption,
.googlemap-list-address,
.testimonial-role,
.quote-author,
.citation-author {
  color: #bab6c0;
}

.quote blockquote,
.citation blockquote {
  border-color: #bab6c0;
}

.quote blockquote::before,
.citation blockquote::before {
  color: #f7f1ff;
}

/* --- Hero component --- */

.hero-container:not(:has(.hero-bg)) {
  color: #f7f1ff;
}

.hero-overlay.dark {
  color: #222222;
}

.hero-overlay.dark a.link,
.hero-container.dark:has(.hero-bg) a.link {
  color: #525053;
  text-decoration: underline;
}

/* --- FAQ component --- */

.faq-question {
  border-radius: 4px;
  color: #f7f1ff;
  background: #37353e;
  border-color: #69676c;
}

.faq-question:hover,
.faq-question:focus-visible,
.faq-item.open .faq-question {
  background: #525053;
}

/* --- Gallery component --- */

.gallery-prev,
.gallery-next {
  border-radius: 4px;
  color: #f7f1ff;
  background: #37353e;
  border-color: #bab6c0;
}

.gallery-prev:hover,
.gallery-next:hover {
  color: #f7f1ff;
  background: #525053;
}

.gallery-dot {
  border-radius: 4px;
  background: #69676c;
  border-color: #bab6c0;
}

.gallery-dot:hover,
.gallery-dot.active {
  background: #fd9353;
}

/* --- Navigation component --- */

.navigation-link {
  color: #5ad4e6;
}

.navigation-link.primary,
.navigation-link.secondary {
  padding: 12px 26px;
  border-radius: 4px;
  color: #f7f1ff;
  background: #525053;
  border-color: #69676c;
}

.navigation-link.primary:hover,
.navigation-link.secondary:hover {
  background: #69676c;
}

/* --- Search component --- */

.search-input:focus,
.ingress-search input:focus,
.ingress-searchbar-mobile input:focus,
.newsletter-input:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #5ad4e6;
  outline: 2px solid #5ad4e6;
  outline-offset: -1px;
  box-shadow: none;
}

.search-button {
  border-radius: 4px;
  color: #f7f1ff;
  background: #525053;
  border-color: #69676c;
}

/* --- Highlight component --- */

pre code[class^='language-'],
pre code[class*=' language-'] {
  border-radius: 4px;
  color: #f7f1ff;
  background: #191919;
}

/* ==========================================================================
   4. Section styles
   ========================================================================== */

.home-features .page-section,
.home-how-it-works .page-section,
.home-components .page-section,
.home-pricing .page-section,
.home-delivery .page-section {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Homepage hero section --- */

.home-hero .hero-container.dark {
  color: #f7f1ff;
}

.home-hero .hero {
  background-color: #131313;
  background-image: url('https://images.unsplash.com/photo-1663517768994-a65e6ab3a40a?auto=format&fit=crop&w=1920&q=85');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.home-hero .hero-headline h1 {
  max-width: 12ch;
  margin-inline: auto;
}

.home-hero .hero-subheadline {
  max-width: 52ch;
  margin-inline: auto;
}

/* --- Homepage how it works section --- */

.home-how-it-works {
  background: #191919;
  padding: 72px 0;
}

/* --- Homepage pricing section --- */

.home-pricing {
  background: #222222;
  padding: 72px 24px;
}

/* --- Homepage delivery section --- */

.home-delivery {
  padding-bottom: 72px;
}

/* --- Homepage comparison section --- */

.home-comparison {
  background: #191919;
  padding: 72px 24px;
}