/* =================================
  Theme Variables
==================================== */

/* Define color scheme for light/dark modes using CSS custom properties */
:root {
  --bg-color: #ffffff; /* Page background */
  --text-color: #0a0a0a; /* Main text color */
  --link-color: #2196f3; /* Link and accent color */
  --border-color: #dddddd; /* Borders and dividers */
}

/* Dark Mode Colors
   Automatically switch colors when system prefers dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1b1e; /* Dark background */
    --text-color: #e1e1e1; /* Light text for contrast */
    --link-color: #64b5f6; /* Lighter blue for dark mode */
    --border-color: #333333; /* Darker borders for dark mode */
  }
}

/* =================================
  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 */

h1 {
  font-size: 32px;
  margin-top: 1em;
}

h2 {
  font-size: 26px;
  /* margin-top: 1.75em; */
  margin-top: 1em;
}

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

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

/* Core typography and spacing for markdown content */
body {
  /* font-family: system-ui, -apple-system, sans-serif; */
  /* System font stack */
  font-family: "mergedFont", "Arial", sans-serif, "faruma";

  line-height: 1.6; /* Comfortable reading line height */
  max-width: 800px; /* Limit width for readability */
  margin: 0 auto; /* Center content */
  padding: 20px; /* Space around content */
  background-color: var(--bg-color);
  color: var(--text-color);

  /* Global text wrapping */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Links and table cells might need specific handling for overflow */
a,
td,
th {
  overflow-wrap: break-word;
  white-space: normal;
}

/*  */

/* Link Styling
   Interactive link effects with hover animation */
a {
  color: var(--link-color);
  text-decoration: none; /* Remove default underline */
  position: relative; /* For animated underline */
}

/* Link Hover Effect
   Animated underline that appears on hover */
a::after {
  background-color: var(--link-color);
  content: "";
  position: absolute;
  width: 100%;
  height: 2px; /* Underline thickness */
  left: 0;
  bottom: -2px; /* Space between text and line */
  transform: scaleX(0); /* Start with no width */
  transform-origin: bottom right; /* Animation starting point */
  transition: transform 0.3s ease-out;
}

/* Link Hover Animation
   Expand underline from left to right */
a:hover::after {
  transform: scaleX(1); /* Expand to full width */
  transform-origin: bottom left;
  z-index: 5; /* Keep above other content */
}

/* Link Style Exceptions
   Disable underline animation for certain links */
a.noLine::after {
  display: none;
}

/* Loading Skeleton Animation
   Creates shimmering effect while content loads */
@keyframes shimmer {
  0% {
    background-position: -1000px 0; /* Start position */
  }
  100% {
    background-position: 1000px 0; /* End position */
  }
}

/* =================================
  Skeleton Base Style
==================================== */

/* Common styles for all skeleton elements */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-color) 0px,
    /* Fade in */ rgb(99 99 99 / 20%) 50%,
    /* Shimmer effect */ var(--bg-color) 100% /* Fade out */
  );
  background-size: 1000px 100%; /* Gradient size */
  animation: shimmer 2s infinite linear; /* Continuous animation */
}

/* Skeleton Text Line
   Placeholder for single lines of text */
.skeleton-text {
  height: 1em; /* Match text height */
  margin: 0.5em 0; /* Vertical spacing */
  border-radius: 4px; /* Rounded corners */
}

/* Skeleton Title
   Placeholder for headers */
.skeleton-title {
  height: 2em; /* Taller than regular text */
  margin: 1em 0; /* More spacing for headers */
  width: 50%; /* Partial width for visual effect */
}

/* Skeleton Paragraph
   Placeholder for blocks of text */
.skeleton-paragraph {
  height: 100px; /* Multi-line height */
  margin: 1em 0; /* Consistent spacing */
}

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

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

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

.rightAligned {
  text-align: right;
}

.leftAligned {
  text-align: left;
}

.ltrText {
  direction: ltr;
}

.rtlText {
  direction: rtl;
}

/* =================================
  Table Styles
==================================== */

/* Base table styling */
table {
  width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  /* Handle long content in tables */
  table-layout: fixed;
}

/* Table header cells */
th {
  /* background-color: var(--bg-color);--bg-color */
  background-color: var(--border-color);
  border: 1px solid var(--border-color);
  padding: 0.75em;
  font-weight: bold;
}

/* Table data cells */
td {
  border: 1px solid var(--border-color);
  padding: 0.75em;
  /* Break long content */
  overflow-wrap: break-word;
  /* Hyphenate long words if needed */
  hyphens: auto;
}

/* Zebra striping for rows */
/* tr:nth-child(even) {
  background-color: rgb(128 128 128 / 5%);
} */

/* Hover effect */
/* tr:hover {
  background-color: rgb(128 128 128 / 10%);
} */

/* First column (#) styling */
/* td:first-child,
th:first-child {
  width: 3em;
  text-align: center;
} */

/* Empty cells */
/* td:empty {
  background: linear-gradient(
    45deg,
    transparent 49%,
    var(--border-color) 49% 51%,
    transparent 51%
  );
} */

/* Responsive tables */
@media (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}