/* ==========================================================================
    Theme Colors
   ========================================================================== */

/* Add CSS Custom Properties for theming */

/* Base variables */

:root {
  /* Light theme */
  --color-bg-primary: #fff;
  --color-bg-secondary: #e7edf6;
  --color-bg-tertiary: #dee3eb;
  --color-bg-quaternary: #ff6467;
  --color-text-primary: #0a0a0a;
  --color-text-secondary: #555;
  --color-border: #c4c6d0;
  --color-link: #0065cc;
  --color-highlight: #82b8fa;
  --color-accent: #286294;
  --color-header: #0f4c75;
  --color-selection: #b3d4fc;
  --color-focus: #235580;
  --color-divider: #415f91;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark theme */
    color-scheme: dark;
    --color-bg-primary: #1a1b1e;
    --color-bg-secondary: #2d2e32;
    --color-bg-tertiary: #3a3b40;
    --color-bg-quaternary: #9f0712;
    --color-text-primary: #e1e1e1;
    --color-text-secondary: #a0a0a0;
    --color-border: #4a4b50;
    --color-link: #66b3ff;
    --color-highlight: #2d5c99;
    --color-accent: hsl(210, 52%, 54%);
    --color-header: #99ccff;
    --color-selection: #364c63;
    --color-focus: #4d8ac7;
    --color-divider: #4d8ac7;
  }
}

/* Editor & Diff Compare shared variables */

:root {
  /* added for text editor */
  --button-bg: #f0f0f0;
  --button-hover: #007bff;
  --button-text: #000000;
  --button-hover-text: #ffffff;
  --tab-active: #007bff;
  --tab-border: #ccc;
  --textarea-bg: #ffffff;
  --textarea-text: #000000;
  --textarea-border: #ccc;
  /* added for diff compare */
  --input-bg: #ffffff;
  --input-border: #ccc;
  --input-text: #000000;
  --popup-bg: #ffffff;
  --popup-text: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ... existing dark theme variables ... */

    /* Editor & Diff Compare dark theme */
    /* added for text editor */
    --button-bg: #2d2e32;
    --button-hover: #4d8ac7;
    --button-text: #e1e1e1;
    --button-hover-text: #ffffff;
    --tab-active: #4d8ac7;
    --tab-border: #4a4b50;
    --textarea-bg: #2d2e32;
    --textarea-text: #e1e1e1;
    --textarea-border: #4a4b50;
    /* added for diff compare */
    --input-bg: #1a1b1e;
    --input-border: #4a4b50;
    --input-text: #e1e1e1;
    --popup-bg: #2d2e32;
    --popup-text: #e1e1e1;
  }
}

/* ... OTHER styles ... */

/* Shared Editor & Diff Compare Styles */
.function-button,
.copy-button,
.copy-button-lit,
.copy-button-other {
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
  min-width: 15px;
  background-color: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--tab-border);
  font-size: 18px;
}

.function-button:hover,
.copy-button:hover,
.copy-button-lit:hover,
.copy-button-other:hover {
  background-color: var(--button-hover);
  color: var(--button-hover-text);
}

.buttons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.buttonInput {
  width: 90px;
  padding: 5px;
  border-radius: 4px;
  font-size: 18px;
  text-align: center;
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
}

/* Mobile Adjustments */
@media (max-width: 599px) {
  .buttons-container {
    gap: 5px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
  }

  .function-button {
    font-size: 14px;
  }
}

/*  */

/* Button Feedback Styles */

button {
  position: relative; /* Required for feedback positioning */
  overflow: visible; /* Ensure feedback isn't clipped */
}

.copy-button-lit,
.copy-button,
.copy-button-other {
  position: relative;
}

.copy-feedback {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.copy-success {
  background-color: #90caf9; /* A moderate blue */
  transition: background-color 0.3s;
}

@media (prefers-color-scheme: dark) {
  .copy-success {
    background-color: #2e7d32; /* A brighter dark green */
  }
  .copy-feedback {
    background: rgba(255, 255, 255, 0.8);
    color: black;
  }
}

/* ==========================================================================
     Base Styles and Layout
     ========================================================================== */

/* Body */

body {
  margin: 0;
  padding: 0;
  /* */
  -webkit-font-smoothing: antialiased;
  line-height: 1.8;
  /* color: #0a0a0a; */
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  /* */
  font-family: "mergedFont", "Arial", sans-serif, "faruma";
  /* text-align: right;
        direction: rtl;
        */
  /*font-size: 120%;
       */
  /* for tharujamaanu */
}

/* making the body background color different like in hassaans, but only on tablet and above, not mobile, otherwise hiding navbar on mobile shows the differently colored body from the wrapper */
/* tablet - desktop */
@media (min-width: 600px) {
  body {
    /* outer color */
    /* material theme builder, source color C0DAF9 */
    /* background-color: #e7edf6; */
    background-color: var(--color-bg-secondary);
    /*  prev f2f2f5 main bg-llight */
    /* styles of hassaan */
  }
}

/* outer wrapper container */

.dtWrapper {
  /* inner color */
  /* material theme builder, source color C0DAF9 
      background-color: #f7f9ff */
  /* background-color: #fff; */
  background-color: var(--color-bg-primary);
  /* prev  f7f9ff */
  /* !!! */
  padding-top: 0.75em; /* instead of a margin, gives it a padding top and colors that */
  /* !!! */
  /*max-width: 1080px;
      */
  /* 800px, Adjust the maximum width as needed */
  margin: 0 auto;
  min-width: 200px;
  max-width: 980px;
}
/* for mobile
    @media (max-width: 599px) {
      .dtWrapper {
        padding-top: 0.75em;
      }
    }  */

.hmvSection {
  padding: 3em 5em;
  padding-bottom: 0;
  text-align: right;
  /* center */
  direction: rtl;
  /* */
  padding-top: 0;
}
@media (max-width: 599px) {
  .hmvSection {
    padding: 1em;
    padding-bottom: 0;
    margin: 0 0 2em;
    margin-bottom: 0;
  }
}

/* page footnotes, styles from hassaan's .post-copyright, and some from .twitter-tweet  */
.pageFootnotes {
  /*padding: 10px;*/ /* padding: 0.2em 2em 0.2em 3em; */
  padding: 0 2em 1em 2em; /* 0 2em 1em 3em .twitter-tweet */
  /* material theme builder, source color C0DAF9 
      background-color: #f0f4f9; */
  /*background-color: #f6f6f6;*/
  /* prev e7edf6, hsla(0, 0%, 71%, 0.1) 136296 */
  /* prev c2c7cf 999 235580 .twitter-tweet */
  background-color: var(--color-bg-secondary);
  /*border: 1px solid #e1e1e1;*/
  /* material theme builder, source color C0DAF9 
      border-right: 4px solid #c2c7cf; */
  border: 1px solid var(--color-border);
  /*border-right: 4px solid #8c9199;*/
  border-right: 4px solid var(--color-divider);
  /*margin-top: 3em;*/
  /* added */
  font-size: 20px;
  margin-bottom: 1em;
  margin-top: 1em;
  /*margin-right: 1em;*/
  /*color: #555;*/
  color: var(--color-text-secondary);
}

.pageFootnotes p {
  margin-top: 0;
  margin-bottom: 0;
}

/* adds line above footnote, In order for the new lines to work properly, you also need to set the white-space property to either pre or pre-wrap. however this isnt selectable or copyable, so added it in the html itself . */
/*.pageFootnotes::before {
      content: "_________\a";
      white-space: pre;
    }*/

/* only for MOBILE size - removes top margin */
@media (max-width: 599px) {
  .rmvTopMarginOnMobile {
    margin-top: 0;
  }
}

/* Basic Elements */

/* add an animated underline on hover to a link */
a {
  /* color: #0065cc; */
  color: var(--color-link);
  text-decoration: none;
  position: relative;
}
a::after {
  /* background-color: #0065cc; */
  background-color: var(--color-link);
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: -2px;
  /* -2px */
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}
a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
  /* this makes sure it is on top of other elements that might come after it */
  z-index: 5;
}
p {
  margin-top: 1em;
  margin-bottom: 1em;
}
/* added remove link hover underline from things like img */
a.noLineA::after {
  background: none;
}

/* horizontal rule */
/* A better looking default hr IS IT NEEDED !!! */
hr {
  display: block;
  height: 1px;
  /*border: 0;
        border-top: 1px solid #ccc;
       */
  /*margin: 1em 0;*/
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding: 0;
  /* added */
  border: none;
  /* material theme builder, source color C0DAF9 */
  /* border-bottom: 2px solid #c2c7cf;  */
  border-bottom: 2px solid var(--color-border);
  /* prev d3d3d3 */
}

/* Customize the background color to match your design */
::-moz-selection {
  /*background: #b3d4fc;
  text-shadow: none;*/
  background: var(--color-selection);
  text-shadow: none;
}
::selection {
  /*background: #b3d4fc;
  text-shadow: none;*/
  background: var(--color-selection);
  text-shadow: none;
}

/* Remove the gap between audio, canvas, iframes, images, videos and the bottom of their containers */
/*audio, canvas, iframe, svg, video*/
img {
  vertical-align: middle;
}
/* fieldset styles, textarea resize */

/* ==========================================================================
     Typography - Font
     ========================================================================== */

/* merged font */
@font-face {
  font-family: "mergedFont";
  src: url(../font/merged-300.woff2) format("woff2"),
    url(../font/merged-300.woff) format("woff");
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display */
  font-display: block;
  /* previously swap */
}

/* https://www.cleancss.com/css-beautify/
  https://github.com/h5bp/html5-boilerplate updated with hassaan's css */
html {
  font-size: 22px;
  /* 1em */
  /*line-height: 1.8;
       */
  /* 1.4 now in body */
  /* added */
  -webkit-text-size-adjust: 100%;
  /* !!! */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior */
  scroll-behavior: smooth;
  /* https://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page */
  overflow-y: scroll;
  /* Allow long words to be able to break and wrap onto the next line. Prevents long url addresses from breaking page content when it doesnt fit the width. use this instead of text-wrap or break-word where it is needed. */
  /* overflow-wrap: anywhere;
        */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap */
  text-wrap: pretty;
  /* pretty balance */
}
/* resets body and centers container */
/* some body code from https://github.com/sindresorhus/github-markdown-css/blob/main/index.html */

/* Headings */

h2 {
  /* margin-top: 1.75em; */
  margin-top: 1em;

  font-size: 28px;
}

h3 {
  font-size: 23px;
  margin-top: 1.65em; /* 1.5, 2 */
  /*margin-top: 1em;
       */
  margin-bottom: 1em;
}

/* ==========================================================================
    Helper Classes
     ========================================================================== */

/* Hide visually and from screen readers */
.hidden,
[hidden] {
  display: none !important;
}
/* Hide visually and from screen readers, but maintain layout */
.invisible {
  visibility: hidden;
}
/* clearfix, media queries, print styles */

.hmvLogo {
  /*width: 200px;
      height: 200px;*/
  width: 150px;
  height: 150px;
  /*transition: transform 0.3s ease-in-out;*/
  transition: transform 0.25s ease-out;
  margin-bottom: 0.8em;
}
.hmvLogo:hover {
  transform: scale(1.15);
}

.basmala {
  /*padding-bottom: 10px !important;*/
  font-size: 25px !important;
}

.warning-box {
  background: #fff3cd;
  /* border-left: 4px solid #ffc107; for LTR */
  border-right: 4px solid #ffc107;
  /* padding: 1rem; */
  padding: 0.1rem 1rem;
  border-radius: 4px;
  /* margin-top: 2rem; */
}

/* Add dark mode support */
@media (prefers-color-scheme: dark) {
  .warning-box {
    background: #332d1a;
    border-left-color: #ffc107;
  }
}

/* HELPER CLASSES */
.justifiedText {
  text-align: justify;
  /*direction: rtl;
       */
}

.centerAlignedText {
  text-align: center;
  /*direction: rtl;
       */
}

.rightAlignedText {
  text-align: right;
}

.leftAlignedText {
  text-align: left;
}

.ltrText {
  direction: ltr;
}

.rtlText {
  direction: rtl;
}

.rtlText {
  direction: rtl;
}

/* use class: dt-nowrap
 https://datatables.net/manual/styling/classes#Cell-classe
 
 instead of below */

/* .noWrapClass {
  white-space: nowrap;
} */

/* https://yootheme.com/support/question/155972 
https://stackoverflow.com/a/68687577 */
/* How to add search input clear button by using CSS.
firefox doesnt support x icon that shows on input type search as does for webkit,
even webkit different browsers style it differently.
alternatively could use type reset which is widely supported, but has to be within a form, eg: https://stackoverflow.com/questions/37846023/input-type-search-doesn-t-show-cancel-button-x-in-firefox/37846330#37846330 */
input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  /*height: 24px;
   width: 24px; */
  height: 20px;
  width: 20px;
  margin-right: 0;
  /* margin-left: 0.4em; */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
  cursor: pointer;
}

/*  responsive media queries code */

/* @mixin for-phone-only {
      @media (max-width: 599px) {
          @content;
     }
  }
  @mixin for-tablet-portrait-up {
      @media (min-width: 600px) {
          @content;
     }
  }
  @mixin for-tablet-landscape-up {
      @media (min-width: 900px) {
          @content;
     }
  }
  @mixin for-desktop-up {
      @media (min-width: 1200px) {
          @content;
     }
  }
  @mixin for-big-desktop-up {
      @media (min-width: 1800px) {
          @content;
     }
  }
  */

/* ==========================================================================
    Button Styles
     ========================================================================== */

.customButtons {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  /*margin-bottom: 0.333em;
       */
  padding: 0.5em 1em;
  cursor: pointer;
  font-size: 0.88em;
  line-height: 1.6em;
  color: inherit;
  user-select: none;
  text-decoration: none;
  outline: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-family: "mergedFont", "Arial", sans-serif, "faruma";
  -webkit-font-smoothing: antialiased;
  text-align: right;
  direction: rtl;
  /* */
  /*padding-right: 25px;
        padding-left: 25px;
       */
  border: none;
  /* material theme builder, source color C0DAF9 */
  /* background: #dee3eb none; */
  background: var(--color-bg-tertiary) none;
  /* prev e0e1e2 */
  color: var(--color-text-primary);
  /* ? */
  border-radius: 0.28571429rem;
  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease,
    box-shadow 0.1s ease, background 0.1s ease;
  /* added */
  margin: 5px;
  transition: transform 0.2s ease-out;
}
.customButtons:hover {
  /* color: white; */
  color: var(--color-bg-primary);
  /* material theme builder, source color C0DAF9 */
  /* background-color: #286294; */
  background-color: var(--color-accent);
  /* prev 1f6cb9 */
  /* transform: scale(1.15); */
}