/* Common styles for both light and dark modes */
:root {
  --md-text-font: "Roboto", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --md-code-font: "Roboto Mono", SFMono-Regular, Consolas, Menlo, monospace;
  --md-parallax-perspective: 2.5rem
}

/* Light mode colors */
[data-md-color-scheme="default"] {
  /* Primary Colors */
  --md-primary-fg-color:        #F9F3ED; /* Soft Ivory */
  --md-primary-fg-color--light: #333333; /* Off-White */
  --md-primary-fg-color--dark:  #333333; /* Light Beige for Depth */

  /* Accent Colors */
  --md-accent-fg-color:         #F4A261; /* Vibrant Orange */
  --md-secondary-accent:        #E76F51; /* Medium Rich Coral */

  /* Link Colors */
  --md-typeset-a-color:         #2A9D8F; /* Teal for Links */

  /* Text and Background Colors */
  --md-typeset-color:           #333333; /* Dark Gray Text */
  --md-title-color:           #333333; /* Dark Gray Text */
  --md-typeset-color--inverse:  #FEFDFD; /* Off-White */
  --md-default-bg-color:        #FFFFFF; /* White Background */

  /* Hue */
  --md-hue: 15;
}

/* Dark mode colors */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #242322; /* Warm taupe */
  --md-primary-fg-color--light: #7E665A; /* Lighter taupe */
  --md-primary-fg-color--dark:  #ceae9c; /* Dark taupe for depth */
  --md-accent-fg-color:         #D4A373; /* Sandy gold accents */
  --md-typeset-a-color:         #C69C6D; /* Muted gold for links */
  --md-typeset-color:           #dcd8d5; /* Off-white text */
  --md-title-color:             #ceae9c; /* Off-white text */
  --md-typeset-color--inverse:  #000000; /* Charcoal background */
  --md-default-bg-color:        #2C2C2C; /* Charcoal background */
  --md-hue: 30;
}

/* Increase base font size */
:root {
  --md-typeset-font-size: 0.8rem;
}

/* Adjust other text sizes */
.md-typeset {
  font-size: var(--md-typeset-font-size);
}

.md-typeset h1 {
  font-size: 1.8rem;
}

.md-typeset h2 {
  font-size: 1.4rem;
}

.md-typeset h3 {
  font-size: 1.1rem;
}

.md-typeset h4 {
  font-size: 0.9rem;
}

.md-typeset h5 {
  font-size: 0.7rem;
}

.md-typeset h6 {
  font-size: 0.5rem;
}

/* Header styles */
.md-header {
  color: var(--md-title-color);
  background-color: var(--md-primary-fg-color);
}

.md-nav__title {
  color: var(--md-typeset-color);
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2rem;
  width: auto;
}

/* Tab styles */
.md-tabs {
  background-color: var(--md-primary-fg-color--dark);
}


.md-tabs__item {
  color: var(--md-typeset-color--inverse) !important;
}

.md-tabs__link {
  color: var(--md-typeset-color--inverse) !important;
  opacity: 0.7;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--md-typeset-color);
  opacity: 1;
}

/* Footer styles for light mode */
.md-footer {
  background-color: var(--md-primary-fg-color--light);
  color: var(--md-typeset-color);
}


/* Set Amiri as the default font for Arabic text */
[lang="ar"] {
  font-family: 'Amiri', serif;
}

/* Apply Jomhuria font ONLY to Arabic page title */
[lang="ar"] .md-header__title {
  font-family: 'Jomhuria';
  font-size: 2.0rem;
  font-weight: 600;
}

/* Adjust header for larger Arabic title */
[lang="ar"] .md-header {
  font-family: 'Jomhuria';
}

/* Remove Jomhuria from other Arabic headings */
[lang="ar"] .md-typeset h1,
[lang="ar"] .md-typeset h2,
[lang="ar"] .md-typeset h3,
[lang="ar"] .md-typeset h4,
[lang="ar"] .md-typeset h5,
[lang="ar"] .md-typeset h6 {
  font-family: 'Amiri', serif;
  font-weight: bold;
}

[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] code{
  text-align: left;
}

@media screen and (max-width: 1024px) {
  .md-nav--primary .md-nav__title[for=__drawer] {
    font-weight: 600;
    color: var(--md-title-color);
  };
  .md-nav--primary .md-nav__title[for=__drawer] {
    font-size: 1.2rem;
  };
  .md-header__inner {
    padding: 1rem .2rem;
  }
  [dir=ltr] .md-header__title {
    font-size: 0.8rem;
  }
  [dir="rtl"] .md-header__title {
    font-size: 1.2rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Landing page container */

.mdx-hero .md-button {
  margin-top: 0.625rem;
  margin-right: 0.625rem;
  color: var(--md-primary-bg-color);
  background-color: transparent;
  border-color: transparent;
}

.mdx-hero .md-button:is(:focus, :hover) {
  color: var(--md-accent-bg-color);
  background-color: transparent;
  border-color: transparent;
}

.mdx-hero .md-button--primary {
  color: hsla(280, 37%, 48%, 1);
  background-color: transparent;
  border-color: transparent;
}

.mdx-parallax {
  height: 100%;
  /* margin-top: -2.4rem; */
  overflow: hidden auto;
  overscroll-behavior-y: none;
  perspective: var(--md-parallax-perspective);
  scroll-behavior: smooth;
  position: fixed;
  width: 100vw
}

.mdx-parallax__group {
  background-color: var(--md-default-bg-color);
  color: var(--md-typeset-color);
  display: block;
  position: relative;
  transform-style: preserve-3d
}

.mdx-parallax__group:first-child {
  background-color: initial;
  contain: strict;
  height: 100vh
}

.safari .mdx-parallax__group:first-child {
  contain: none
}

.mdx-parallax__group:last-child {
  background-color: var(--md-default-bg-color)
}

.mdx-parallax__layer {
  height: max(100vh,100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateZ(calc(var(--md-parallax-perspective)*var(--md-parallax-depth)*-1)) scale(calc(var(--md-parallax-depth) + 1));
  transform-origin: 50vw 50vh;
  width: 100vw;

}

.mdx-parallax__image {
  position: relative;
  /* overflow: hidden; */
  width: 120%;
  height: 120%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('../images/desert.jpg');
  /* Initialize CSS variables */
  --bg-pos-x: 100%;
  --bg-pos-y: 100%;
  background-position: var(--bg-pos-x) var(--bg-pos-y);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%
}

.mdx-parallax__layer .overlay {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('../images/contours.webp');
  --bg-pos-x: 100%;
  --bg-pos-y: 100%;
  background-position: var(--bg-pos-x) var(--bg-pos-y);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}


.mdx-hero {
  display: block;
  height: inherit;
}

.mdx-hero__scrollwrap {
  height: 100vh;
  margin-bottom: -100vh;
  position: sticky;
  top: 0;
  z-index: 9
}

.mdx-hero__inner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  position: absolute;
  /* background-color: #faebd780; */
  border-radius: 16px;
}

.mdx-hero__teaser {
  /* -webkit-backface-visibility: hidden; */
  backface-visibility: hidden;
  color: var(--md-primary-bg-color);
  margin: 0 .8rem;
  max-width: 32rem;
  display: grid;
  row-gap: 1rem;
  justify-items: center;
}

.mdx-hero__teaser h1 {
  font-family: 'Bebas Neue', 'Jomhuria', monospace;
  color: inherit;
  font-weight: 800;
  margin-bottom: 0;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  padding: 0.25em 0.5em;
  padding-right: 0.125em;
  position: relative;
}

/* .mdx-hero__teaser h1::after {
  color: inherit;
  content: '|';
  animation: blink-caret 750ms infinite normal;
}
.mdx-hero__teaser h1::before {
  color: inherit;
  content: '|';
  animation: blink-caret 750ms infinite normal;
} */

@media screen and (max-width: 1024px) {
  .mdx-hero__inner {
    text-anchor: middle;
    top: auto;
    left: 45%;
    bottom: 15%;
    transform: none;
    /* right: 10%; */
    /* border-radius: 4px; */
    /* max-width: 90vw; */
  }
  /* .mdx-hero__teaser {
    max-width: 46rem;
  } */
  .mdx-hero__teaser h1 {
    font-size: 0.9rem;
  }
}

.mdx-hero__teaser a {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  /* border: 3px solid; */
  padding: 0.25em 0.5em;
  /* box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px; */
  /* box-shadow: 2px 2px 2px 2px, 2px 2px 2px 2px, 2px 2px 2px 2px, 2px 2px 2px 2px; */
  position: relative;
  /* user-select: none; */
  /* -webkit-user-select: none; */
  touch-action: manipulation;
}

/* .mdx-hero__teaser a:hover {
    box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
} */

.mdx-hero__teaser a:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}

/* The typewriter cursor effect */
/* @keyframes blink-caret {
  from, to { color: transparent }
  50% { color: rgb(255, 255, 255) }
} */