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

/* Our default values set as CSS variables */
:root {
  --color-bg: #02214f0c;
  --color-text-main: #000000;
  --color-card-bg: #ffffff;
  --color-footer-bg: #02214f1b;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
  --color-orange: #ff9100;
  --color-red: #c9142c;
  --color-blue: #02214f;
  --border-step-1: 61.80339887%;
}

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

a:link {
  color: var(--color-blue);
}

a:visited {
  color: var(--color-blue);
}

a:hover {
  color: var(--color-red);
}

.divider {
  margin: 0 1rem;
}

.divider-footnote-wrapper {
  display: flex;
  margin: 0.2rem 0;
}

.divider-footnote-wrapper a {
  height: 0;
  line-height: 0.3rem;
}

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

body {
  font-family: sans-serif;
  background-color: var(--color-bg);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

/* Page structure */
.wrapper {
  width: 35rem;
  height: fit-content;
  display: flex;
  flex-direction: column;
  margin: 2rem 0;
  background: var(--color-card-bg);
}

.content {
  padding: 1.5rem;
  padding-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.content-border {
  border-width: 0 10px 0 0; /* Set border width for right side only */
  border-style: solid;
  border-image-source: linear-gradient(
    to bottom,
    var(--color-orange),
    var(--color-orange) var(--border-step-1),
    var(--color-red) var(--border-step-1),
    var(--color-red) 100%
  );
  border-image-slice: 0 1 0 0;
}

.content-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-grow: 1;
}

.content-ps {
  margin-top: auto;
  padding-top: 2.4rem;
}

/* Very light scaling for our illustration */
.title {
  font-style: normal;
  font-weight: bold;
  font-size: 3rem;
  line-height: 110%;
  margin: 1rem 0 2.5rem;
}

.contact-list {
  padding: 0 0 0 1rem;
  list-style: "‐ ";
}

.contact-list hr {
  width: 100px;
  margin: 0.2rem 0.2rem 0.1rem 0;
  border: 0;
  height: 2px;
  background: var(--color-footer-bg);
}

.imprint {
  display: flex;
  flex-grow: 1;
  flex-direction: row-reverse;
}

/*
footnote stuff
*/

.footer {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  font-size: 0.9rem;
  padding: 0.75rem 1.5rem;
  width: 100%;
  flex-wrap: wrap;
  background: var(--color-footer-bg);
}

.footer-border {
  border-width: 0 10px 0 0; /* Set border width for right side only */
  border-style: solid;
  border-color: var(--color-blue);
  border-image-slice: 0 1 0 0;
}

footer ol {
  list-style-position: outside;
}

/**
 * Initialiazing a `footnotes` counter on the wrapper
 */
article {
  counter-reset: footnotes;
}

.title [aria-describedby="footnote-label"]::after {
  font-size: 0.5em;
}

/**
 * Inline footnotes references
 * 1. Increment the counter at each new reference
 * 2. Reset link styles to make it appear like regular text
 */
[aria-describedby="footnote-label"] {
  counter-increment: footnotes; /* 1 */
  text-decoration: none; /* 2 */
  color: inherit; /* 2 */
  cursor: default; /* 2 */
  outline: none; /* 2 */
}

/**
 * Actual numbered references
 * 1. Display the current state of the counter (e.g. `[1]`)
 * 2. Align text as superscript
 * 3. Make the number smaller (since it's superscript)
 * 4. Slightly offset the number from the text
 * 5. Reset link styles on the number to show it's usable
 */
[aria-describedby="footnote-label"]::after {
  content: counter(footnotes); /* 1 */
  vertical-align: super; /* 2 */
  font-size: 0.7em; /* 3 */
  margin-left: 1px; /* 4 */
  color: var(--color-blue); /* 5 */
  text-decoration: underline; /* 5 */
  cursor: pointer; /* 5 */
}

[aria-describedby="footnote-label"]:hover::after {
  color: var(--color-red);
}

/**
 * Resetting the default focused styles on the number
 */
[aria-describedby="footnote-label"]:focus::after {
  color: var(--color-red);
  outline: var(--color-blue) dotted;
  outline-offset: 2px;
}

[aria-label="Back to content"] {
  font-size: 0.8rem;
}

/**
 * Highlight target note
 */
footer :target {
  outline: var(--color-blue) dotted;
}

/**
 * Visually hidden yet accessible content
 */
.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  visibility: hidden;
  opacity: 0;
}


/*
MOBILE STYLING
*/

@media screen and (max-width: 37rem) {
  .wrapper {
    margin: 0;
    min-height: 100vh;
    width: 100%;  
  }
}