/*** 
TYPOGRAPHY.CSS 
- VERSION: 240101
- COLLECTION: ESSENTIALS
- LOAD ORDER: CSS/A/03
- DESCRIPTION: Sets general configurations for text elements.
© M. Yıldız 2024. All rights reserved.
##########################
***/

/* #region HTML */

/*** 
# HTML SETUP
> Set HTML settings for font configuration.
***/

html {
  /* Color and Background */
  color: var(--color-text);
  /* Typography */
  font-family: var(--font-sans);
  font-size: 12pt;
  font-weight: 400;
  /* Other */
  -webkit-font-smoothing: antialiased;
}

/* #endregion */

/* #region MAIN */

/*** 
# FONT SETUP
> Set FONT settings.
***/

/***
## Line Height. 
***/

html * {
  line-height: 1.5em;
}

/***
## Headings
***/
h1 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 3.000em;
  font-weight: 700;
}

@media (max-width: 540px) {
  h2 {
    font-size: 2.000em;
  }
}

h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 2.000em;
  font-weight: 700;
}

@media (max-width: 540px) {
  h2 {
    font-size: 1.500em;
  }
}

h3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.500em;
}

@media (max-width: 540px) {
  h3 {
    font-size: 1.250em;
  }
}

h4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.250em;
  text-decoration: underline;
}

@media (max-width: 540px) {
  h4 {
    font-size: 1.125em;
  }
}

h5 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.125em;
  text-decoration: underline;
}

@media (max-width: 540px) {
  h5 {
    font-size: 1.000em;
  }
}

h6 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.000em;
  text-decoration: underline;
}

@media (max-width: 540px) {
  h6 {
    font-size: 0.875em;
  }
}

/***
## Paragraphs
***/

p {
  font-size: inherit;
}

/***
## Lists
***/

ol {
  font-size: inherit;
  list-style: decimal inside;
}

ol ol {
  padding-left: 1rem;
  list-style: inherit;
}

ol ol ol {
  padding-left: 2rem;
  list-style: inherit;
}

ul {
  font-size: inherit;
  list-style: disc inside;
}

ul ul {
  padding-left: 1rem;
  list-style: inherit;
}

ul ul ul {
  padding-left: 2rem;
  list-style: inherit;
}

/***
##  Links
***/

p a {
  color: var(--c-accent);
}

a:hover {
  text-decoration: underline;
}

a:has(div) {
  outline: none;
}

/***
## Styles
***/

em {
  font-style: italic;
}

strong {
  font-weight: 700;
}

cite {
  font-style: italic;
}

/***
## Simple Elements
***/

hr {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  border: 1px solid black;
}

/*#endregion */

/* #region UTILITIES */

/***
# READ Settings 
***/

/* > If it is an image... */
.read {
  font-size: 1.25rem;
}

/***
# LOGO Settings 
***/

/* > If it is an image... */
img.logo {
  max-height: 6rem;
  image-rendering: optimizeQuality;
}

/***
# SIDE Settings 
***/
/* > If a link has a divider inside it though, then do not highlight the background. */
a:has(div) ::selection {
  background: none;
}

/***
# OTHER Settings 
***/

/* > Disable text selection to make it more difficult to copy and paste. */
.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/* > Disable element for print purposes. */
@media print {
  .hidden-print {
    display: none !important;
  }
}

/*#endregion */