/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import "trix";
@import "actiontext"; 

 :root {
  --standard-border-radius: 8px;

  /* Default (light) theme */
  --bg: #171717;
  --text: #a7a7a7;
  --main-bg: #3f3c3a;
  --input-bg: #fff;
  --input-color: var(--bg)
  --accent-bg: #8790b4;
  --hover-bg: #7777772a;
  --text-light: #585858;
  --border: #898EA4;
  --accent: #040455;
  --accent-hover: #1266e2;
  --accent-text: var(--bg);
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
  --header-bg: #020024;
  --header-bg-gradiant: var(--bg);
  --button-bg: #040455;

  --font-size: 14pt;
}

 section {
  padding: 10pt;
  border-radius: 8pt;
  border: 2pt solid var(--border);
  border-style: double;
}

strong{
  /* the font doesn't have a bold */
  text-shadow: -1px -1px;
  letter-spacing: 0.11em;
}

.hidden_toolbar > trix-toolbar {display: none;}
trix-editor{ background: var(--input-bg); color: black; }
trix-editor .scroll_height { overflow-y: scroll; }

details > summary {
  list-style: none;
  background: rgb(46, 49, 61);
  padding: 6pt 6pt;
  border-radius: 8px 8px 0px 0px;
  color: white;
  text-shadow: -1px -1px;
  letter-spacing: 0.11em;
  border-bottom: white solid 2pt;
}

input[type=text], input[type=password], textarea {
  padding: 4pt 8pt;
  font-size: var(--font-size);
  border-radius: 4pt;
  max-width: calc(100% - 16pt);
}


footer{
  border-top: solid 2pt grey;
  margin: 10pt;
  padding: 4pt;
}


.app-card{
  /* defaults to mobile */
  background: rgb(250, 249, 238);
  margin: auto;
  color: black;
  transition: margin 10s ease, height 10s ease; /* Use a reasonable speed */
  height: 100vh;
  overflow: scroll;
  padding: 0;
  h1{margin: 0;}

  /* for tablets */
  @media (min-width: 450px) {
    border-radius: 16px;
    max-height: fit-content;
    max-width: 400pt;
  }

  /* @media (max-width: 992px) and (min-width: 450px) {
    max-width: 800px;
  } */
}

/* Odysseys content - ensure proper text contrast */
main {
  color: #ffffff;
}

main h1, main h2 {
  color: #ffffff;
}

main article {
  color: #ffffff;
}

main article div {
  color: #ffffff;
}