/* #ProjectDenis: Toolkit Styles */

html {
  scroll-behavior: smooth;
}

body, .header-main {
  width: min(calc(100% - 2.4em), 120rem);
}

/* Header styles */

.header-main {
  position: fixed;
  top: 0;
  padding: 0 0.5rem 0.65rem;
  background-color: var(--primary-color);
  border: 1px dashed var(--secondary-color-a);
  border-top: none;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  z-index: 3;
}

@supports (color: color-mix(in srgb, black, black)) {
  .header-main  {
    border-color: color-mix(in srgb, var(--secondary-color-a) 80%, black);
  }
}

.header-link {
  font-size: var(--font-large);
}

/* Sections styles */

#dm-search,
#dm-explore,
#dm-discover {
  min-height: 100svh;
}

#dm-search,
#dm-explore,
#dm-discover,
.dm-launch, 
.dm-parser,
.dm-splitter {
  padding-top: 1.5rem;
  margin-bottom: 1rem;
}

.dm-section-header,
.dm-section-anchor {
  padding-top: 7rem;
  padding-bottom: 2.5rem;
}

.dm-toolkit-header {
  padding-top: 3.5rem;
}

.dm-section-anchor span {
  transition: opacity 0.35s ease-in-out;
}

.dm-section-anchor:is(:hover, :focus, :focus-visible) span {
  opacity: 1;
}

.dm-highlight-link {
  text-decoration: underline;
  text-decoration-thickness: 0.16rem;
}

.dm-highlight-link:is(:focus-visible) {
  outline: 0.2rem solid var(--focus-color-inverted);
  outline-offset: 0.25rem;
  border-radius: 0.25rem;
}

.dm-highlight-link,
#top {
  color: var(--secondary-color-a);
}

#top:is(:hover, :focus, :focus-visible) {
  outline: none;
  text-decoration-color: var(--secondary-color-a);
}

.dm-section-anchor:is(:hover, :focus, :focus-visible) {
  outline: none;
  text-decoration: underline;
  text-decoration-color: var(--accent-color-a);
}

.dm-launch-container {
  padding-top: 2.5rem;
}

.dm-footer {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-bottom: 2rem;
}

.dm-footer,
.dm-footer a {
  color: var(--neutral-color-inactive);
  font-size: var(--font-small);
  text-align: center;
}

.dm-footer-text a {
  text-decoration: underline dotted;
  text-underline-offset: 0.12rem;
}

.dm-footer-text a:is(:hover, :focus, :focus-visible) {
  text-decoration: underline;
  color: var(--focus-color);
  border-radius: 0.25rem;
}

.dm-footer-text a:is(:focus-visible) {
  outline: 2px solid var(--focus-color-inverted);
}

.dm-footer .link-btn {
  display: inline;
  width: 2rem;
  height: 2rem;
}

/* Button styles */

#dm-btn-start-exploring {
  width: 21rem;
  height: 5rem;
  flex-grow: 0;
  font-size: var(--font-mid);
}

#dm-btn-start-exploring .action-icon-container {
  width: var(--font-button);
  height: var(--font-button);
}

#dm-btn-start-exploring .btn-text,
#dm-btn-generate-collections .btn-text {
  gap: 0.2em;
}

.dm-generate-btn-container {
  gap: 0.25em;
}

.table-btn {
  width: 2.2rem; 
  height: 2.2rem;
}

.button-container > .btn {
  width: 100%;
}

.theme-toggle-btn {
  position: relative;
}

.section-nav-btn {
  bottom: 5%;
  right: 1.1rem;
  outline-offset: 2rem;
  z-index: 3;
}

.section-nav-btn:focus-visible circle {
  display: none;
}

.main-nav-btn-circle-s {
  display: none;
}

/* Container styles */

.dm-launch-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-container {
  width: 100%;
}

.generator-container,
.splitter-container,
.button-container {
  gap: 0.75rem;
}

.button-container {
  margin-bottom: 1.5rem;
}

.button-container, .generator-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.splitter-container {
  display: flex;
  flex-wrap: wrap;
}

.text-output {
  font-size: var(--font-button);
  color: var(--neutral-color);
  border: 0.3125rem solid var(--secondary-color-c);
  border-radius: 0.5rem;
  padding: 0.5em;
  min-height: 16rem;
  height: 100%;
  max-height: 630px;
  overflow-y: scroll;
  overflow-x: hidden;
  overflow-wrap: break-word;
  scrollbar-color: var(--neutral-color) var(--primary-color);
}

.text-output:is(:focus, :focus-visible) {
  outline: 0.2rem solid var(--focus-color);
  outline-offset: 0.07rem;
  border-radius: 0.4rem;
}

.text-counter {
  font-size: var(--font-mid);
  color: var(--neutral-color);
  padding: 0.5em 0.8125em 0.5em ;
}

.text-counter:hover {
  cursor: pointer;
}

.text-counter:is(:focus, :focus-visible) {
  outline: 0.3125rem solid var(--focus-color-inverted);
  outline-offset: -0.1rem;
  border-radius: 0.4rem;
}

.generator-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
}

.reference-container .btn {
  max-width: calc(100% / 3 - 1.5rem / 3);
}

.splitter-group {
  display: flex;
  flex-flow: column;
  min-width: calc(100% / 3 - 1.5rem / 3);
}

.splitter-container {
  flex-flow: row;
}

/* Media queries */

/* @media screen and (max-width: 1200px) { */
@media screen and (max-width: 75em) {

  .btn {
    padding: 0.75em;
  }
}

/* @media screen and (max-width: 960px) { */
@media screen and (max-width: 60em) {
  
  .splitter-container {
    flex-flow: column;
  }

  .generator-container > .btn {
    width: 100%;
  }

  .reference-container .btn {
    max-width: none;
  }
}

/* @media screen and (max-width: 668px) { */
@media screen and (max-width: 41.75em) {
  
  .header-main {
    left: 0;
    width: 100%;
    border-left: none;
    border-right: none;
  }
}

/* @media screen and (max-width: 360px) { */
@media screen and (max-width: 22.5em) {

  html {
    font-size: 90%;
  }

  .main-nav-btn-circle-m {
    display: none;
  }

  .main-nav-btn-circle-s {
    display: block;
  }
}

/* @media screen and (max-width: 320px) { */
@media screen and (max-width: 20em) {
  
  .main-container, .header-container {
    container-type: inline-size;
  }

  body {
    --font-xlarge: 12cqi;
    --font-large: 10cqi;
    --font-subhead: 8cqi;
    --font-mid: 7cqi;
    --font-button: 6.5cqi;
    --font-base: 6.5cqi;
    --font-small: 6cqi;
  }

  h1 {
    margin: 1.5rem 0.75rem;
  }

  .btn {
    padding: 0.5em;
  }
     
  .button-container {
    display: flex;
    flex-flow: column;
  }

  .link-btn,
  .theme-btn {
    width: 11cqi; 
    height: 11cqi;
  }

  .input-field {
    min-height: 0;
    padding: 1em 0.5em;
  }

  .input-field, .button-container {
    margin-bottom: 1rem;
  }
  
  .dm-parser, .dm-splitter {
    margin-bottom: 0.5rem;
  }
}