/* IOR Western skin -- red on white, after the reunion glass: "IOR" arched
   over a round badge, and a fletched arrow. Loaded last on every page of
   both the public and admin sites (see SKINNING.md), so plain selectors
   here win without !important. Everything this file references lives
   next to it in the skin directory, because the site's CSP
   (default-src 'self') blocks fonts/images from anywhere else. */

@font-face {
  font-family: Rye;
  src: url("/skin/fonts/Rye-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* Built-in theme.css variables */
  --color-text: #2b1d16;
  --color-muted: #6b5446;
  --color-faint: #8a7262;
  --color-fainter: #a08a7a;
  --color-link: #a4161a;
  --color-border: #e2cfb6;
  --color-border-light: #efe3d2;
  --color-danger: #7a0c10;
  --color-danger-on-dark: #ff8a80;
  --color-success: #2f6b2f;
  --radius: 6px;
  --font-family: georgia, "Iowan Old Style", "Times New Roman", serif;

  /* Skin-only */
  --color-red: #a4161a;
  --color-red-dark: #7f1013;
  --color-bg: #fffdf8;
  --color-paper: #f8f0e3;
  --font-display: "Rye", rockwell, "Roboto Slab", georgia, serif;
}

html,
body {
  background: var(--color-bg);
}

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

/* ---------- Header: badge + name, arrow underneath ---------- */

/* Keeps long titles clear of the fixed "Admin"/version corner labels. */
header {
  padding-right: 4.5rem;
}

h1 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-red);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

h1::before {
  content: "";
  flex: 0 0 auto;
  width: 2.6em;
  height: 2.4em;
  background: url("/skin/ior-badge.svg") no-repeat center / contain;
}

header::after {
  content: "";
  display: block;
  max-width: 26rem;
  height: 1.6rem;
  margin-top: 0.75rem;
  background: url("/skin/arrow.svg") no-repeat left center / contain;
}

header .back-link,
header .download-link {
  font-weight: 600;
}

h2 {
  font-family: var(--font-display);
  font-weight: normal;
  letter-spacing: 0.02em;
}

/* Section headings ("News", "Photo Galleries") get a red underline; news
   post titles inside the feed don't. */
main > section > h2 {
  color: var(--color-red);
  border-bottom: 2px solid var(--color-red);
  padding-bottom: 0.3rem;
  max-width: 40rem;
}

/* ---------- Public home ---------- */

.news-feed > li {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-red);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

.news-feed h2 {
  font-family: var(--font-family);
  font-weight: 700;
  letter-spacing: normal;
  color: var(--color-text);
}

/* Year links as little "wanted poster" tiles. */
.year-index a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 1.5rem;
  color: var(--color-red);
  background: var(--color-paper);
  border: 4px double var(--color-red);
  border-radius: 2px;
  padding: 0.5rem 1.1rem;
  transition: background-color 0.15s, color 0.15s;
}

.year-index a:hover,
.year-index a:focus-visible {
  text-decoration: none;
  background: var(--color-red);
  color: var(--color-bg);
}

/* ---------- Year gallery ---------- */

.year-documents img {
  border: 3px double var(--color-red);
}

.thumb img {
  box-shadow: 0 0 0 1px var(--color-border);
}

/* ---------- Forms & buttons (both sites) ---------- */

input,
select,
textarea {
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 1px;
}

/* Plain buttons: outlined. Wrapped in :where() (zero specificity) so the
   sites' own button classes -- e.g. the red text on admin Delete buttons --
   still win. Anything inside the dark lightbox is left alone. */
:where(button:not(.lightbox button)) {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

:where(button:not(.lightbox button)):hover {
  border-color: var(--color-red);
}

/* Primary (submit) buttons: solid red. */
button[type="submit"] {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
  font-weight: 600;
}

button[type="submit"]:hover {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
}

/* ---------- Admin ---------- */

.admin-nav {
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.admin-nav a {
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid transparent;
}

.admin-nav a:hover {
  border-bottom-color: var(--color-border);
}

.admin-nav a[aria-current="page"] {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}

/* ---------- Password login page ---------- */

.login-page {
  max-width: 26rem;
}

/* No corner links on this page, so no room needs reserving for them. */
.login-page header {
  padding-right: 0;
  margin-bottom: 1.25rem;
}

.login-page h1 {
  font-size: 1.8rem;
}

.login-page label {
  font-weight: 600;
  color: var(--color-text);
}

/* ---------- Small screens ---------- */

@media (width <= 520px) {
  h1 {
    font-size: 1.5rem;
  }

  .year-index a {
    font-size: 1.25rem;
  }

  /* Header links wrap onto their own lines here; drop the left indent. */
  header .download-link {
    margin-left: 0;
  }

  header .back-link {
    margin-right: 1rem;
  }
}