/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/

/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@400;600&family=Noto+Serif:wght@400;600&display=swap");

/* Our default values set as CSS variables */
:root {
  --color-bg: #10141a;
  --color-text-main: #ffffff;
  --color-text-header: #ffffff;
  --color-primary: #ffff00;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
  --sidebar-bg: #000000;
  --fabric-blue: #87ceeb;
  --fabric-orange: #ffb366;
  --fabric-pink: #ffb6c1;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
  margin: 0;
}
[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: "HK Grotesk";
    /* namLhaiFont.otf */

  src: url("namLhai.otf")
    format("opentype");
}

@font-face {
  font-family: "SOV Thai";
  src: url("SOV_sorm2496.ttf")
    format("truetype");
}

@font-face {
  font-family: "Bespoke";
  src: url("bespoke.otf")
    format("opentype");
}
/* Body font commented out - local file not available
@font-face {
  font-family: "Body";
  src: url("Bespoke-B-gT3dwHkv.otf")
    format("opentype");
}
*/

/* Normal font changed from monospace to serif */
/* @font-face {
  font-family: "Bespoke", Georgia, serif;
  src: url("DMMono-Light.ttf")
    format("truetype");
} */

body {
  font-family: "Bespoke", Georgia, serif; /* Changed from monospace to serif */
  background-color: var(--color-bg);
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 19px,
    rgba(200, 200, 200, 0.1) 19px,
    rgba(200, 200, 200, 0.1) 20px
  );
  /*   margin-top: 2rem; */
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: flex;
  /* place-items: center; */
  /*   margin: 0 1rem; */
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sidebarTitleMain {
  color: #82c9ff;
  font-family: "SOV Thai", "Noto Serif", Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  margin: 0;
  /* text-align: left;
  padding: 1rem 0 1rem 0.5rem; */
}

.sidebarTitleMain + .sidebarTitleMain {
  margin-top: -0.5rem;
}

.sidebarTitleMain.subheader {
  font-family: "Bespoke", Georgia, serif;
  /* color: #389fed; */
  color: #82c9ff;
  font-size: 1rem;
  line-height: 1;
  display: block;
  margin-top: 0.5rem;
  /* text-align: left;
  padding: 1rem 0 1rem 0.5rem; */
}



/* Very light scaling for our illustration */
.title {
  color: var(--color-text-header);
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: bold;
  font-size: 100px;
  line-height: 105%;
  margin: 0;
}

/* Very light scaling for our illustration */
.illustration {
  max-width: 100%;
  max-height: var(--image-max-width);
  margin-top: var(--image-margin);
}

/* Instructions */
.instructions {
  margin: 1rem auto 0;
}

/* Button - Add it from the README instructions */
button,
input {
  font-family: inherit;
  background: #2a2a2a;
  border: none;
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  color: #ffffff;

  /*   text-decoration: underline; */

  /*   transition: 500ms; */
}

/* Subheading */
h2 {
  color: #ffffff;
  font-family: "Bespoke", Georgia, serif;
  font-size: 1.2rem;
}

p {
  color: #ffffff;
  font-family: "Bespoke", Georgia, serif;
  font-size: 0.8rem;
  line-height: 1.2rem;
}

small {
  color: #d4d4d4;
  font-family: "Bespoke", Georgia, serif;
  font-size: 0.7rem;
  line-height: 0.5rem;
}

/* Interactive image */
.illustration:active {
  transform: translateY(5px);
}

.textDiv {
  flex-basis: 80%;
  height: 100vh;
  position: sticky;
  top: 0;
  margin: 0 2rem;
}

.textDiv small {
  font-family: "Bespoke", Georgia, serif;
  font-size: 0.7rem;
  display: block;
  margin-bottom: 0.5rem;
  color: #d4d4d4;
}

textarea {
  height: 85vh;
  
  text-transform: lowercase;

/*   position: sticky;
 */
  width: 100%;
  font-family: "HK Grotesk";
  
  font-size: 5rem;
  line-height: 3rem;

  
  font-size: 5.5vw;
  line-height: 3.3vw;
  
  margin-top: 2rem;
  transform: rotate(180deg) scaleX(-1);

  background-color: var(--color-bg);
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 19px,
    rgba(200, 200, 200, 0.1) 19px,
    rgba(200, 200, 200, 0.1) 20px
  );
  /* background: linear-gradient(180deg, #5a8bb7 0%, #4a7ba7 25%, #3a6b97 50%, #2a5d8f 75%, #1a4d7f 100%); */
  border: none;
  font-variant-ligatures: common-ligatures discretionary-ligatures
    historical-ligatures contextual;
  /* Prioritize ligature and contextual alternates */
  font-feature-settings: "liga" on, "dlig" on, "hlig" on, "calt" on, "salt" on;
  /* Additional settings to ensure all ligatures work */
  text-rendering: optimizeLegibility;
  /*   text-align: center; */
  padding: 1rem;
  text-decoration-color: transparent;
  color: #ffffff;
}

img {
  max-width: 100%;
  height: auto;
}

sidebarTitle {
  color: #ffffff;
}

.mainImg {
  padding-top: 1rem;
  padding-bottom: 1rem;
  max-width: 100%; /* Ensure image doesn't overflow */
  height: auto;
}

textarea:focus {
  outline: none;
}

.sideBar {
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 25%;
  top: 0;
  background-color: var(--color-bg);
  flex-shrink: 0;    /* Prevent flexbox from shrinking it */
  overflow-x: hidden; /* Prevent horizontal overflow */
  box-sizing: border-box;
}

.sideBar p {
  color: #ffffff;
  line-height: 1.2rem;
}

.sideBar small {
  color: #e0e0e0;
}

.sideBar .primary-text {
  color: #ffffff;
}

.sideBar .secondary-text {
  color: #e0e0e0;
}

.sideBar .link {
  color: #e0e0e0;
}

.sideBar .current {
  color: #ffffff;
}

.instructions-container {
  width: 100%;
  position: relative;
  display: flex;
  gap: 2rem;
  top: 0;
  z-index: 1;
/*   padding-top: 1rem; */
}

.instructions-content {
  padding: 1rem;
  display: block; /* Will be toggled with JavaScript */
  position: absolute;
  top: 100%;
  left: 0;
  width: 60%;
  height: 20rem;
  z-index: 1000;
  box-shadow: 0 4px 6px (rgba(0, 0, 0, 0.5));
  background: var(--color-bg);
  border: 1px solid #333333;
  margin-top: 0.5rem;
  /*   border-radius: 4px; */
  overflow: scroll;
}

.instructions-content p {
  color: #e0e0e0;
}

.instructions-content small {
  color: #b0b0b0;
}

.instructions-content.hidden {
  display: none;
}

.instruction-grid {
  /*   display: flex; */
  gap: 1rem;
  padding: 1rem;
  background: var(--color-bg);
}

.instruction-grid p {
  color: #e0e0e0;
}

.instruction-grid small {
  color: #b0b0b0;
  line-height: 1.2rem;
}

.instruction-grid .separator {
  display: none;
}

.flex-container {
  display: flex;
  gap: 1rem;
}

.toggle-btn {
  width: 10%;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  align-items: center;
  cursor: pointer;
  background: transparent;
  color: #ffffff;
  border: none;
}

.toggle-btn:hover {
  opacity: 0.8;
}

button:hover {
  /*   background-color: white; */
  cursor: pointer;
  color: #d4d4d4;
}

.gridVert {
  width: 50%;
  gap: 1rem;
}

/* with the arrows and keyboard pic */
.rightGrid {
  width: 70%;
}

.rightGridFull {
  width: 100%;
}

.keyboardImg {
  width: 100%;
}

.arrowLeft {
  font-size: 1rem;
  cursor: pointer;
}

.separator {
  width: 100%;
  margin: 1rem 0;
  height: 2px;
  border: none;
  background-image: repeating-linear-gradient(
    90deg,
    #ba9c7f 0 12px,
    transparent 12px 18px
  );
}

.sideBar .separator {
  height: 2px;
  border: none;
  background-image: repeating-linear-gradient(
    90deg,
    #333333 0 12px,
    transparent 12px 18px
  );
}

.greyText {
  color: #d4d4d4;
}

/*  FOR THE GRID AHHHH */
.row-container {
  display: flex;
  gap: 15px;
  padding: 10px 0;
  margin: auto;
  text-align: center;
  margin-bottom: 2rem;
  flex-wrap: wrap; /* Allow items to wrap */
  justify-content: flex-start;
}

.primary-text {
  font-family: HK Grotesk;
  font-size: 1.8rem;
/*   padding-bottom: 0.5rem; */
}

.text-container {
  text-align: center;
  flex: 0 0 auto; /* Don't grow or shrink, just fit content */
  min-width: 60px; /* Minimum width for content */
}

.current {
  text-decoration: underline;
  color: #ffffff;
}

.link:hover {
  cursor: pointer;
}

.hide {
  display: none;
}

.fabricImg {
  width: 50%;
  max-width: 80px;
  height: auto;
  object-fit: contain;
}

.sidebarFilter {
  display: flex;
  gap: 1rem;
}

.sidebarLower {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden; /* Prevent horizontal overflow */
}

.sidebarUpper {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden; /* Prevent horizontal overflow */
}

.sidebarFooter {
  margin-top: auto;
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.sidebarFooter small {
  color: #b0b0b0;
  font-family: "Bespoke", Georgia, serif;
  font-size: 0.7rem;
}

.arrowLeft {
  font-family: "Bespoke", Georgia, serif;
}

.arrow {
  margin: 0 0.2rem;
}

/* Mobile message styling */
.mobile-message {
  display: none;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .wrapper {
    display: none;
  }

  .mobile-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 0.8rem;
    background-color: var(--color-bg);
    text-align: center;
  }

  .mobile-message small {
    font-size: 0.8rem !important;
    font-family: "Bespoke", Georgia, serif;
    color: #d4d4d4 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
  }

  .mobile-message p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #ffffff;
    font-family: "Bespoke", Georgia, serif;
    max-width: 500px;
  }
}

@media (max-width: 480px) {
  .mobile-message small {
    font-size: 1.2rem;
  }

  .mobile-message p {
    font-size: 1rem;
    padding: 1.5rem;
  }
}