/* ldu overrides — layered on top of mainstyle.css */

/* custom fonts */

@font-face {
  font-family: 'Typeface';
  src: url('../font/typeface.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Typeface Light';
  src: url('../font/light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ldu color overrides */

:root {
  --ldu-red-dark:      #912d2d;
  --ldu-red:           #ff5050;
  --ldu-red-hover:     #ff6161;
  --ldu-blue:          #4a90e2;
  --ldu-blue-hover:    #5aa0f2;
  --ldu-blue-link:     #1a5fb4;
  --ldu-blue-border:   #2b67a3;
  --ldu-blue-light:    #9ec5ff;
  --ldu-discord:       #5865f2;
  --ldu-discord-hover: #4752c4;
  --ldu-discord-light: #b5baf7;
  --ldu-link:          #e78f99;
  --ldu-nav-bg:        #2c2c2ca3;
  --ldu-nav-text:      #ffffff;
  --ldu-nav-border:    #b1b1b18d;

  /* freeze tint to ldu red so the page card stays red instead of cycling */
  --tint: #ff5050;
}

/* body — keep rainbow page, add ldu background */

body {
  font-family: 'Typeface Light', system-ui, sans-serif;
  background-image: url('/ldu/images/bg.jpg');
  background-blend-mode: multiply;
  background-attachment: fixed;
  background-size: 100%;
}

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

h1, h2, h3, h4, h5 {
  font-family: 'Typeface', 'Typeface Light', system-ui, sans-serif;
  font-weight: 400;
}

h6 {
  font-family: 'Typeface Light', system-ui, sans-serif;
  margin: 2px;
}

p {
  font-weight: 300;
}

/* page */

.page {
  border-radius: var(--radius-lg);
}

@keyframes colorChange {
  0%   { --tint: oklch(45% 0.22 20); }  /* dark red */
  25%  { --tint: oklch(55% 0.26 25); }  /* red */
  50%  { --tint: oklch(60% 0.24 10); }  /* bright red */
  75%  { --tint: oklch(55% 0.26 25); }  /* red */
  100% { --tint: oklch(45% 0.22 20); }  /* dark red */
}


.header {
  background-image: url('/ldu/images/banner.png');
  background-color: var(--ldu-red-dark);
  background-blend-mode: multiply;
  background-size: 100% auto;
  padding: 1em;
  overflow: hidden;
}

.header::before {
  display: none;
}

.header::after {
  display: none;
}

.header h1 {
  font-size: 4em;
  margin: 5px;
}

.header a {
  color: var(--color-white);
  text-decoration: none;
}

.header a:hover {
  color: var(--color-silver);
}

/* nav pill links */

.nav {
  color: var(--ldu-nav-text);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  justify-content: center;
}

.nav a {
  color: var(--ldu-nav-text);
  background-color: var(--ldu-nav-bg);
  border: 1px solid color-mix(in oklch, var(--ldu-nav-border) 100%, transparent);
  padding: 4px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9em;
  letter-spacing: 0.03em;
  backdrop-filter: blur(4px);
  transition: background-color 0.25s,
              border-color 0.25s,
              padding-left 0.25s,
              padding-right 0.25s;
}

.nav a:hover {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: #1a1a1a;
  padding-left: 16px;
  padding-right: 16px;
}

/* project cards */

.project {
  margin-bottom: 0;
}

.project h2 {
  border-bottom: 2px solid var(--color-heading-border);
}

.project a {
  color: var(--color-white);
  text-decoration: none;
}

.project:hover {
  background: color-mix(in oklch, var(--tint) 55%, #202020);
  border: 2px solid color-mix(in oklch, var(--tint) 85%, transparent);
}

/* blue variant */

.blueproject {
  border-color: var(--ldu-blue-border);
  background-color: #2b67a383
}

.project.blueproject:hover {
  border-color: var(--ldu-blue-border);
  background-color: #2b67a383
}

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

/* discord blurple variant */

.discordproject {
  background-color: color-mix(in oklch, var(--ldu-discord) 30%, #202020);
  border: 2px solid color-mix(in oklch, var(--ldu-discord) 60%, transparent);
}

.project.discordproject:hover {
  background-color: color-mix(in oklch, var(--ldu-discord) 50%, #202020);
  border-color: var(--ldu-discord);
}

.discordproject a {
  color: var(--ldu-discord-light);
}

/* outer (nested container) - no hover effect */

.project.outer {
  background-color: #444;
  transition: none;
}

.project.outer:hover {
  background-color: #444;
  padding: 1em;
}

/* sidebar */

.sidebar {
  border-radius: var(--radius-lg);
  margin-bottom: 0.8em;
  text-align: justify;
}

.sidebar h1 {
  border-bottom: 2px solid var(--color-white);
}

/* code / mention */

code {
  background-color: #3132354c;
  font-size: 0.9em;
  font-family: 'Typeface Light', monospace;
  border: 2px solid #464a4a67;
  color: var(--color-white);
  padding: 1px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.mention {
  background-color: #398bbe6e;
  font-size: 0.9em;
  font-family: 'Typeface Light', monospace;
  border: 2px solid #295cc267;
  color: var(--color-white);
  padding: 1px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ldu-specific layout helpers */

.half {
  flex: 1 1;
  max-width: 50%;
}

.permsnote {
  font-size: 0.7em;
  font-family: 'Typeface Light', monospace;
}

/* tables */

table {
  border-collapse: separate;
  border: 2px solid var(--color-white);
  border-radius: 0;
  width: 100%;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

thead, tfoot {
  background-color: var(--ldu-blue-light);
}

th, td {
  padding: 8px 10px;
}

td:last-of-type {
  text-align: center;
}

tbody > tr:nth-of-type(even) {
  background-color: var(--ldu-blue-hover);
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}