@font-face {
  font-family: "oswald";
  src: url("/fonts/Oswald.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: "inter";
  src: url("/fonts/Inter.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "inter";
  src: url("/fonts/inter-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --color-primary: #243746; /* storage blue */
  --color-secondary: #c44536; /* red */
  --color-bg: #f5ebdd; /* cream */
  --color-surface: #ffffff; /* cards */
  --color-text: #2e2e2e; /* charcoal */
  --color-accent: #d8a657; /* mustard */
  --color-success: #4f7a5b; /* green */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "inter";
}

body {
  background-color: var(--color-bg);
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

a {
  text-decoration: none;
  color: inherit;
}
h1 {
  font-family: "oswald";
  font-weight: 700;
}

h2 {
  font-family: "oswald";
  font-weight: 500;
}

.error {
  margin: 1rem;
}
/* ── Skip Link ── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 8px 16px;
  background-color: #2b2b2b;
  color: #f4e9d8;
  font-family: "bebas";
  font-size: 20px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #d9a441;
  outline-offset: 3px;
}

/* header */

header {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid black;
  position: sticky;
  padding: 10px;
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.small-logo {
  width: 8rem;
}

.main-nav {
  display: flex;
  width: 100%;
  align-items: end;
  margin-left: 40px;
  gap: 40px;
}

.login-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--color-bg);
  border-radius: 5px;
  padding: 10px 16px;
  margin-right: 40px;
  background-color: var(--color-secondary);
}

.login-nav-link {
  text-decoration: none;
  color: var(--color-surface);
  text-transform: uppercase;
}

.login-nav-link:hover {
  outline: 1px solid var(--color-surface);
  outline-offset: 3px;
  border-radius: 3px;
}
.login-username {
  font-family: "oswald";
  text-transform: uppercase;
  font-size: 1.5rem;
}

.logout-button {
  background-color: var(--color-bg);
  padding: 4px 8px;
  border-radius: 5px;
  font-family: "inter";
  font-size: 0.9rem;
  font-weight: 700;
}

.logout-button:hover {
  background-color: var(--color-accent);
  cursor: pointer;
}

.main-links {
  text-decoration: none;
  background-color: var(--color-secondary);
  color: var(--color-surface);
  border: 1px solid var(--color-surface);
  border-radius: 5px;
  padding: 10px 20px;
}

.main-links:hover {
  background-color: var(--color-accent);
}

.main-links:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* main */
main {
  padding: 10px;
}

/* index page */
.index-subtitle {
  margin: 1rem;
}

.body-links {
  margin: 1rem 0 1rem 1.5rem;
}

/* login page, create user page */
.login-label {
  font-size: 1.2rem;
  margin-right: 1rem;
  font-weight: 700;
}
.form-field {
  width: 28%;
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 1rem;
}

.login-field {
  height: 1.7rem;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.9rem;
}

.login-button,
.create-button {
  background-color: var(--color-bg);
  padding: 4px 8px;
  border: 1px solid black;
  border-radius: 5px;
  font-family: "inter";
  font-size: 0.9rem;
  font-weight: 500;
}

.login-button:hover,
.create-button:hover {
  background-color: var(--color-accent);
  cursor: pointer;
}

.create-button {
  margin-top: 1rem;
}

error-create-button-div {
  margin-left: 4rem;
}
/* folders */
.visually-hidden {
  display: none;
}

table {
  margin: 10px 0 20px;
}

th {
  text-align: left;
}

td,
th {
  padding-left: 1rem;
}

td:nth-child(3),
th:nth-child(3) {
  padding-left: 3rem;
}

table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.folder-icon,
.file-icon {
  height: 24px;
  color: goldenrod;
}

#folder-input.hidden {
  display: none;
}

#folder-title.hidden {
  display: none;
}

.folder-input {
  height: 1.5rem;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.9rem;
}

/* one folder */
.folder-info-div {
  display: flex;
  gap: 3rem;
  align-items: center;
  margin-left: 1rem;
}
.file-upload-div {
  display: flex;
  margin: 0 0 0 1.5rem;
}

.file-form input,
.file-form label {
  margin-left: 1.5rem;
}

.file-form span {
  font-weight: 300;
  margin-left: 1.5rem;
}

.choose-file,
.upload-file,
.copy-url {
  background-color: var(--color-bg);
  padding: 4px 8px;
  border: 1px solid black;
  border-radius: 5px;
  font-family: "inter";
  font-size: 0.9rem;
  font-weight: 700;
}

.choose-file:hover,
.upload-file:hover,
.copy-url:hover {
  background-color: var(--color-accent);
  cursor: pointer;
}

.folder-button {
  background-color: var(--color-bg);
  padding: 4px 8px;
  border: 1px solid black;
  border-radius: 5px;
  font-family: "inter";
  font-size: 0.9rem;
  font-weight: 500;
}

#edit-button:hover,
#share-button:hover,
#create-button:hover {
  background-color: var(--color-accent);
  cursor: pointer;
}
#delete-button:hover {
  background-color: var(--color-secondary);
  cursor: pointer;
}

#folder-input {
  height: 2rem;
  padding: 5px;
  border-radius: 5px;
  font-size: 1.25rem;
  margin-right: 1rem;
}

.size-error-div {
  display: flex;
  margin: 1rem 0 0 12rem;
}

.share {
  margin-left: 0.5rem;
}

.copy-input {
  height: 1.7rem;
  text-align: right;
  width: 55ch;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.9rem;
}
/* file details */
dl {
  display: grid;
  grid-template-columns: max-content auto;
  margin: 0.5rem 0 2.5rem 1.5rem;
  line-height: 2rem;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
  margin-left: 1.5rem;
}

.file-button-div {
  display: flex;
  gap: 1rem;
}

.file-button {
  background-color: var(--color-bg);
  padding: 4px 8px;
  border-radius: 5px;
  font-family: "inter";
  font-size: 0.9rem;
  font-weight: 700;
}

.file-button.download-button:hover {
  background-color: var(--color-accent);
  cursor: pointer;
}
.file-button.delete-button:hover {
  background-color: var(--color-secondary);
  cursor: pointer;
}

/* footer */
footer {
  display: flex;
  justify-content: center;
  font-family: "inter";
  font-style: italic;
  font-size: 1.15rem;
  border: 1px solid black;
  padding: 5px;
}