@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

:root{

  cursor: url(../../cursor.svg), auto;
  scroll-behavior: smooth;

--header-gap: 1rem;
--border-radius: 1rem;

--fs: 1em;
--header-ff: "IBM Plex Sans Arabic", sans-serif;


--background: hsl(221, 21%, 75%);
--foreground: hsl(240, 19%, 85%);
--button: hsl(221, 13%, 66%);
--surface: hsl(210, 6%, 5%);
--surface-dark: hsl(221, 13%, 66%);
--text-bright: hsl(220, 6%, 10%);
--text-black: hsl(240, 19%, 85%);

@media (prefers-color-scheme: dark){
    --background: hsl(220, 6%, 10%);
    --foreground: hsl(227, 12%, 15%);
    --button: hsl(214, 15%, 18%);
    --surface: hsl(240, 19%, 85%);
    --surface-dark: hsl(214, 15%, 18%);
    --text-bright: hsl(221, 21%, 75%);
    --text-black: hsl(210, 6%, 5%);
}

[data-theme="dark"] {
    --background: hsl(220, 6%, 10%);
    --foreground: hsl(227, 12%, 15%);
    --button: hsl(214, 15%, 18%);
    --surface: hsl(240, 19%, 85%);
    --surface-dark: hsl(214, 15%, 18%);
    --text-bright: hsl(221, 21%, 75%);
    --text-black: hsl(210, 6%, 5%);
}

[data-theme="light"] {
    --background: hsl(221, 21%, 75%);
    --foreground: hsl(240, 19%, 85%);
    --button: hsl(221, 13%, 66%);
    --surface: hsl(210, 6%, 5%);
    --surface-dark: hsl(221, 13%, 66%);
    --text-bright: hsl(220, 6%, 10%);
    --text-black: hsl(240, 19%, 85%);
}

--clr-blue: #88e5e6;
--clr-blue-trans: hsla(181, 65%, 72%, 10%);
--clr-red: #e68892;
--clr-red-trans: hsla(354, 65%, 72%, 10%);
--clr-intersect: #8e505d;
--clr-blue-darker: #4cc5c9;
--clr-red-darker: #da6571;

}

/* Text selection */
::-moz-selection {
    color: var(--background);
    background: var(--clr-red);
    }
    
    ::selection {
    color: var(--background);
    background: var(--clr-red);
    }
    
    
    /* Scroll Bar */
    ::-webkit-scrollbar {
    width: .25rem;
    }
    
    ::-webkit-scrollbar-track {
    background: none;
    }
    
    ::-webkit-scrollbar-thumb {
      background: hsla(181, 65%, 72%, 10%);
      border-radius: 100vw;
      transition: all 250ms ease-in-out;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: hsla(181, 65%, 72%, 100%);
    }
    

    header {
      --track-height: 1.5rem;
      --track-width: calc(var(--track-height)*2);
    
      width: 95%;
      font-family: var(--header-ff) !important;
      position: fixed;
      top: var(--header-gap);
      left: 50%;
      translate: -50% 0;
      z-index: 999;
      border-radius: 100vh;  
  
      /* --- CHANGED SECTION START --- */
      
      /* 1. Initial State: Transparent background, no blur */
      background: hsl(from var(--foreground) h s l / .01); 
      backdrop-filter: blur(0px);
      box-shadow: 0 0 0 transparent;
  
      /* 2. Bind the animation to the scroll position */
      animation: sticky-header-reveal linear both;
      animation-timeline: scroll();
      
      /* 3. Range: Start at 0px scroll, finish at 150px scroll */
      animation-range: 0px 750px;
  
      /* --- CHANGED SECTION END --- */
    
      @media (width > 50em){
        --track-height: 2rem;
        width: 85%;
      }
  }
  
  /* Define the look you want when the user scrolls down */
  @keyframes sticky-header-reveal {
      to {
          background: hsl(from var(--foreground) h s l / .75);
          backdrop-filter: blur(15px);
          /* Optional: Add a subtle shadow for better contrast */
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); 
      }
  }
  
  .header-container{
    padding: calc(var(--header-gap)*.5) calc(var(--header-gap)*1);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 90%;
    margin-inline: auto;
  
    @media (width > 50em){
      grid-template-columns: 11% 1fr 23%;
      padding: calc(var(--header-gap)*.25) calc(var(--header-gap)*1);
    }
  }

  .header-container a:has(svg),
  .header-container svg{
    place-self: center;
  }
  
  .header-container svg{
    width: 4rem;
  
    @media (width > 35em){
      width: 6rem;
    }
  
    @media (height < 35em){
      width: 4rem;
    }
  }
  
  .header-container svg #path1236{
    fill: var(--clr-blue);
  }
  
  .header-container svg #path1241{
    fill: var(--clr-red);
  }
  
  .header-container svg #path1250{
    fill: var(--clr-intersect);
  }
  
  .header-container svg #path1243{
    fill: var(--surface);
  }
  
  .start{
    align-self: center;
    justify-self: start !important;
  }

  .end{
    align-self: center;
    justify-self: end !important;
  }

  .back-btn > a{
    display: grid;
    place-content: center;
    gap: calc(var(--header-gap)*1);
    text-align: center;
    text-decoration: none;
  }
  
  .back-btn > a:hover  .back-arrow{
    opacity: 1;
    animation: none;
  }
  
  .back-arrow{
    --arrow-stroke: 1px;
  
    position: relative;
    height: var(--arrow-stroke);
    aspect-ratio: 15 / 1;
    border-radius: 100vh;
    transform-origin: left;
    background-color: var(--surface);
    margin-inline: auto;
    opacity: .25;
    animation-name: arrow;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: all 250ms ease;
  
    &::before,
    &::after{
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      height: inherit;
      aspect-ratio: 5 / 1;
      background-color: inherit;
      transform-origin: inherit;
      border-radius: 100vh;
    }
  
    &::before{
      rotate: -30deg
    }
  
    &::after{
      rotate: 30deg;
    }
  
    @media (width > 50em){
      --arrow-stroke: 2px;
    }
  }
  
  @keyframes arrow {
    0% {transform: translateX(0);}
    60% {transform: translateX(0);}
    80% {transform: translateX(-100%);}
    100% {transform: translateX(0);}
  }
  
  /* Header Controls Container to hold Login and Theme Toggle */
  .header-controls {
      display: flex;
      align-items: start;
      gap: var(--header-gap);
  }
  
  /* Login Wrapper */
  .login-wrapper {
    display: grid;
    place-items: center;
    gap: calc(var(--header-gap) * 0.125);
    text-align: center;
  }
  
  /* Login Button Styling to match theme */
  #global-login-btn {
    --font: .7em;

    font-size: var(--font) !important;
    line-height: 1;
    margin: calc(var(--header-gap)*.25);
    cursor: pointer;
    padding: calc(var(--track-height) - calc(var(--font)*2.35)) calc(var(--track-height)*.5) !important;

    @media (width > 50em){
        --font: .85em;

        padding: calc(var(--track-height) - calc(var(--font)*2)) calc(var(--track-height)*.85) !important;
    }
  }
  
  /* Message shown when not logged in */
  .login-msg {
    font-size: 0.8rem;
    opacity: 0.6;
    font-style: italic;
    margin-top: 0.5rem;
  }
  
  /*----------------------------------------------
  ------------------------------------------------
  THEME TOGGLE
  ------------------------------------------------
  ----------------------------------------------*/
  
  /* Container for the switch and text */
  .theme-switch-wrapper {
      display: grid;
      place-content: center;
      gap: calc(var(--header-gap)*.5);
  }
  
  .theme-toggle-description,
  .back-btn-description,
  .login-description{
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: .0625em;
    font-size: calc(var(--fs)*.6);
    color: var(--surface) !important;
  }
  
  /* The actual label that becomes the switch track */
  .theme-switch {
    
    --translate: calc(var(--track-height) - calc(var(--track-height)*.1));
  
    position: relative;
    display: inline-block;
    width: var(--track-width); /* Width of the track */
    height: var(--track-height); /* Height of the track */
    justify-self: center;
    background: hsl(from var(--surface) h s l / .062);
    border-radius: 100vh;
  
    @media (height < 35em){
      --track-width: 3rem;
      --track-height: 1.5rem;
    }
  }
  
  /* Hide the default browser checkbox */
  .theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider/track itself */
  .slider {
    --track-padding: .25rem;
  
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: hsl(from var(--surface) h s l / .062) !important;
    border: var(--track-padding) solid transparent;
  
    transition: 0.4s;
    border-radius: 100vh;
  }
  
  /* The circular thumb/handle */
  .slider:before {
    position: absolute;
    content: "";
    height: 100%; /* Size of the thumb */
    aspect-ratio: 1 / 1;
    left: 0; /* Starting position inside the track */
    bottom: 0;
    background-color: var(--text-bright); /* Light color for the thumb */
    transition: 0.4s;
    border-radius: 100vh; /* Makes the thumb circular */
  }
  
  .slider:after{
    position: absolute;
    content: "";
    aspect-ratio: 1 / 1;
    left: 0; /* Starting position inside the track */
    top: 0;
    background-image: url(/assets/img/darktheme.svg);
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: calc(var(--track-height) - calc(var(--track-padding)*2));
    width: 100%;
    aspect-ratio: 1 / 1;
    transition: 0.4s;
  }
  
  /* * Styles when the checkbox is checked (Dark mode is ON)
   * The [data-theme="dark"] selector is used here to match the site's colors
   * when the dark theme is active, regardless of the system setting.
   */
  
  /* Move the slider thumb to the right when checked */
  #theme-toggle:checked + .slider:before {
    transform: translateX(var(--translate)); /* 60px (track width) - 34px (track height) = 26px */
  }
  
  #theme-toggle:checked + .slider:after {
    transform: translateX(var(--translate)); /* 60px (track width) - 34px (track height) = 26px */
    background-image: url(/assets/img/lighttheme.svg);
  }
  
  /* Change the track background color when checked */
  #theme-toggle:checked + .slider {
    background: var(--background); /* A distinct color for "on" */
  }
  
  /* * Additional Styling for Light/System Theme
   * Let's change the color of the text next to the toggle
   */
  body[data-theme="dark"] .theme-text {
    color: var(--text-bright);
  }
  
  /* ------------------------------------------------
   CUSTOM LOGIN MODAL STYLES
------------------------------------------------ */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    inset: 0;
    background: var(--clr-overlay);
    backdrop-filter: blur(15px);
    z-index: 10000;
    place-items: center;
    justify-content: center;
  }
  
  .modal-box {
    background: var(--background);
    padding: calc(var(--header-gap)*2);
    border-radius: calc(var(--border-radius)*2);
    width: min(90%, 24rem);
    box-shadow: 0 15px 20px var(--shadow);
    text-align: center;
  }
  
  .modal-box h3 {
    color: var(--text-bright);
    margin-bottom: calc(var(--header-gap)*.5);
  }
  
  .modal-box p {
    color: var(--surface);
    margin-bottom: 1.5rem;
    font-size: calc(var(--fs)*.9);
  }
  
  .input-group {
    margin-bottom: calc(var(--header-gap)*1);
  }
  
  .input-group input {
    width: 100%;
    padding: calc(var(--header-gap)*.8);
    border-radius: 100vh;
    border: none;
    background: hsl(from var(--foreground)  h s l / .35);
    color: var(--text-bright);
    font-family: var(--ff);
    font-size: calc(var(--fs)*1);
    outline: none;
  }
  
  .input-group input:focus {
    background: hsl(from var(--foreground)  h s l / 1);
  }
  
  .modal-buttons {
    display: flex;
    gap: calc(var(--header-gap)*2);
    margin-top: calc(var(--header-gap)*2);
    justify-content: center;
  }
  
  .btn-cancel {
    font-size: calc(var(--fs)*.85);
  
    &:hover{
      background: hsl(from var(--clr-red) h s l / .35);
    }
  }
  
  .btn-submit {
    font-size: calc(var(--fs)*.85);
  
    &:hover{
      background: hsl(from var(--clr-blue) h s l / .35);
    }
  }
  
  #global-login-btn{
    outline: none;
    border: none;
    position: relative;
    background: hsl(from var(--surface) h s l /.125);
    cursor: pointer;
    border-radius: 100vh;
    padding: calc(var(--header-gap) * .6) calc(var(--header-gap) * 1.125);
    color: var(--text-bright);
    font-family: var(--ff);
    font-size: calc(var(--fs) * 1.2);
    
  
    &::before{
      position: absolute;
      content: '';
      inset: .25rem;
      background: hsl(from var(--surface) h s l / 0);
      border-radius: 100vh;
      transition: all 350ms cubic-bezier(0.56, -0.43, 1, 1.55);
    }
  }
  
  #global-login-btn:hover{
    background: hsl(from var(--surface) h s l /.125);
  
    &::before{
      background: hsl(from var(--surface) h s l /.125);
    }
  }

  /* ------------------------------------------------
   USER DROPDOWN MENU STYLES
  ------------------------------------------------ */
  .user-dropdown-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .user-menu-btn {
    padding: calc(var(--header-gap)*.5) calc(var(--header-gap)*1);
    border-radius: 100vh;
    cursor: pointer;
    color: var(--text-bright);
    font-family: var(--ff);
    font-size: calc(var(--fs)*.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--header-gap)*.5);
    transition: all 250ms ease;
  
    @media (width > 50em){
      aspect-ratio: 3.75 / 1;
    }
  }
  
  .dropdown-arrow {
    font-size: calc(var(--header-gap)*.7);
  }
  
  /* The Menu Box */
  .dropdown-content {
    display: none; /* Hidden by default */
    position: absolute;
    left: 0;
    top: 120%;
    background: hsl(from var(--surface) h s l / .95);
    min-width: 200px;
    border-radius: calc(var(--border-radius)*1.5);
    z-index: 1000;
    overflow: hidden;
    padding: calc(var(--header-gap)*.25) 0;
  }
  
  /* Show class to toggle visibility */
  .dropdown-content.show {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
  }
  
  .dropdown-item {
    color: var(--button);
    padding: calc(var(--header-gap)*.8) calc(var(--header-gap)*1);
    text-decoration: none;
    display: grid;
    place-content: center;
    font-size: calc(var(--fs)*.9);
    transition: all 0.2s;
  }
  
  .dropdown-item:hover {
    color: var(--text-black);
    background: hsl(from var(--surface) h s l / .35);
  }
  
  .dropdown-divider {
    height: 1px;
    background: var(--surface-dark);
    margin: calc(var(--header-gap)*.25) calc(var(--header-gap)*1.5);
  }
  
  .logout-item {
    color: var(--clr-intersect);
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .socialmedia{
    --icon-width: 1.5rem;
    --ul-padding: calc(var(--gap)*.5);
  
    background: hsl(from var(--surface) h s l / .125);
    padding: var(--ul-padding);
    height: calc(var(--icon-width) + calc(var(--ul-padding)*2));
    border-radius: 100vh;
  }
  
  .socialmedia ul{
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: space-between !important;
    list-style: none;
  }
  
  .socialmedia ul img{
    display: inline-block;
    opacity: .5;
    width:var(--icon-width);
    filter: brightness(0) invert(0);
    transition: all 250ms ease-in;
  
    @media (prefers-color-scheme: dark){
      filter: brightness(0) invert(1);
    }
  
    &:hover{
      opacity: 1;
    }
  }
  
  [data-theme="light"]{
    .socialmedia ul img{
      filter: brightness(0) invert(0);
    }
  }
  
  [data-theme="dark"]{
    .socialmedia ul img{
      filter: brightness(0) invert(1);
    }
  }
  
  .socialmedia ul img:hover{
    filter: brightness(1) invert(0);
  }