/* =========================================================================
   texture_site.css - shared styles for the LML Texture Toolbox site.

   Every page already linked to this file, but it had never been created, so
   each page carried its own near-identical copy of these rules in an inline
   <style> block. The rules now live here once.

   Pages pick a palette with a body class:
     <body class="theme-dark">   Yale blue background, light text (home, guide)
     <body class="theme-light">  Light background, dark text (tool pages)
   ========================================================================= */

:root {
  --yale-blue: #00356B;
  --yale-blue-deep: #002348;
  --yale-blue-bright: #0E4D92;
  --yale-yellow: #FED000;

  --page-gray: #eef0f3;
  --surface: #ffffff;

  --ink: #16202b;
  --ink-secondary: #4a5664;
  --ink-muted: #6b7684;

  --on-dark: #ffffff;
  --on-dark-secondary: #c6d4e4;

  --line: #dbe0e6;
  --line-dark: rgba(255, 255, 255, 0.18);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06), 0 2px 8px rgba(10, 22, 40, 0.06);
  --shadow-lg: 0 4px 10px rgba(10, 22, 40, 0.10), 0 18px 40px rgba(10, 22, 40, 0.16);
}

/* ----------------------------------------------------------------- base */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Pushes the footer to the bottom of short pages. */
.site-main {
  flex: 1 0 auto;
}

/* The serif used for titles and body copy throughout the site. */
.p1 {
  font-family: var(--serif);
}

h1, h2, h3, h4, h5 {
  line-height: 1.22;
  letter-spacing: -0.012em;
}

/* Bootstrap's display-* sizes were built for full-bleed marketing pages and
   overwhelm these layouts; these are a step down and fluid. */
.display-2 {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);
  font-weight: 600;
}

.display-4 {
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem);
  font-weight: 600;
}

/* --------------------------------------------------------------- palettes */

body.theme-dark {
  background: var(--yale-blue);
  color: var(--on-dark);
}

body.theme-light {
  background: var(--page-gray);
  color: var(--ink);
}

body.theme-dark a {
  color: var(--yale-yellow);
}

body.theme-light a {
  color: var(--yale-blue-bright);
}

a {
  background-color: transparent;
  text-decoration: none;
  text-underline-offset: 0.2em;
}

a:hover,
a:focus {
  text-decoration: underline;
}

body.theme-dark a:hover,
body.theme-dark a:focus {
  color: #ffe169;
}

body.theme-light a:hover,
body.theme-light a:focus {
  color: var(--yale-blue);
}

/* Keyboard users need to be able to see where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--yale-yellow);
  outline-offset: 2px;
  border-radius: 3px;
}

body.theme-light a:focus-visible,
body.theme-light button:focus-visible,
body.theme-light input:focus-visible {
  outline-color: var(--yale-blue-bright);
}

hr {
  margin: 1.75rem 0;
  border: 0;
  border-top: 1px solid var(--line-dark);
}

body.theme-light hr {
  border-top-color: var(--line);
}

/* ------------------------------------------------------------------- nav */

.site-nav {
  background-color: var(--yale-blue);
  padding: 0.35rem clamp(0.75rem, 3vw, 1.75rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* The home page inverts the nav: light bar, dark text. */
.site-nav--invert {
  background-color: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.site-nav .navbar-nav {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
}

.site-nav .nav-link {
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav--invert .nav-link {
  color: var(--ink-secondary);
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.site-nav--invert .nav-link:hover,
.site-nav--invert .nav-link:focus {
  color: var(--yale-blue);
  background: rgba(0, 53, 107, 0.07);
}

/* Marks the page you are currently on. */
.site-nav .nav-link.active {
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.16);
  font-weight: 600;
}

.site-nav--invert .nav-link.active {
  color: var(--yale-blue);
  background: rgba(0, 53, 107, 0.09);
}

.site-nav .nav-link--login {
  font-style: normal;
  opacity: 0.85;
}

/* Route back out to the wider LML project pages. Separated from the site's
   own sections by a rule, so "up and out" reads differently from "across". */
.site-nav .nav-item--up {
  display: flex;
  align-items: center;
  margin-right: 0.35rem;
  padding-right: 0.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.site-nav--invert .nav-item--up {
  border-right-color: rgba(0, 53, 107, 0.18);
}

.site-nav .nav-link--up {
  font-weight: 600;
  white-space: nowrap;
}

.site-nav .nav-link--up .up-arrow {
  margin-right: 0.3rem;
}

/* On narrow screens the full label pushes the section links onto a third
   row, so it shortens to just the arrow plus "LML". */
.site-nav .nav-link--up .up-long {
  display: inline;
}

.site-nav .nav-link--up .up-short {
  display: none;
}

@media (max-width: 575px) {
  .site-nav .nav-link--up .up-long {
    display: none;
  }
  .site-nav .nav-link--up .up-short {
    display: inline;
  }
}

/* Hover-only dropdowns are unreachable by keyboard and on touch screens, so
   the guide sub-menu opens on focus-within as well as on hover. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: var(--surface);
  min-width: 210px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 1030;
  padding: 0.3rem;
}

/* Scoped under .site-nav so these beat `body.theme-dark a`, which sets the
   yellow link color. That rule is more specific than a bare
   `.nav-dropdown__menu a`, so the guide sub-menu was drawing yellow text on
   its white panel. The menu keeps a light surface on every page, so its ink
   is set here rather than inherited from the page theme. */
.site-nav .nav-dropdown__menu a {
  color: var(--ink-secondary);
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.92rem;
}

.site-nav .nav-dropdown__menu a:hover,
.site-nav .nav-dropdown__menu a:focus {
  background-color: rgba(0, 53, 107, 0.08);
  color: var(--yale-blue);
  text-decoration: none;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  display: block;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  padding: 1.75rem clamp(1rem, 4vw, 2rem);
  font-family: var(--sans);
  font-size: 0.88rem;
  text-align: right;
  border-top: 1px solid var(--line-dark);
}

body.theme-dark .site-footer {
  color: var(--on-dark-secondary);
}

body.theme-light .site-footer {
  color: var(--ink-muted);
  border-top-color: var(--line);
}

.site-footer__note {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  opacity: 0.9;
}

/* --------------------------------------------------------------- content */

.hero {
  background: linear-gradient(180deg, var(--surface) 0%, #f6f8fa 100%);
  color: var(--ink);
  padding: clamp(2.5rem, 7vw, 4.5rem) 1.25rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Cards used for the picture navigation on the home and guide pages. These
   replace four unlabeled copies of the Yale logo, which gave no indication
   of where any of them led. */
.nav-card {
  background-color: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  border: 1px solid transparent;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-sm);
}

/* Body-scoped for the same reason as the dropdown: a bare `a.nav-card` is
   less specific than `body.theme-dark a`, so the card would inherit the
   yellow link color on the dark pages even though it sits on a white
   surface. Its heading and text set their own colors, so nothing visible was
   yellow, but any bare text added to a card would have been. */
body.theme-dark a.nav-card,
body.theme-dark a.nav-card:hover,
body.theme-dark a.nav-card:focus,
body.theme-light a.nav-card,
body.theme-light a.nav-card:hover,
body.theme-light a.nav-card:focus {
  color: var(--ink);
  text-decoration: none;
}

.nav-card:hover,
.nav-card:focus {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--yale-blue-bright);
}

.nav-card__img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  padding: 1.1rem;
  background-color: #f4f6f9;
  border-bottom: 1px solid var(--line);
}

.nav-card__body {
  padding: 1.1rem 1.2rem 1.3rem;
  flex: 1 0 auto;
}

.nav-card__title {
  font-family: var(--serif);
  font-size: 1.22rem;
  margin-bottom: 0.4rem;
  color: var(--yale-blue);
}

.nav-card__text {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 0;
  color: var(--ink-secondary);
}

/* Guide screenshots. */
.guide-figure {
  margin: 0 0 3rem;
}

.guide-figure img {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  max-width: 100%;
  height: auto;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

body.theme-light .guide-figure img {
  border-color: var(--line);
}

.guide-figure figcaption {
  font-family: var(--sans);
  padding-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.65;
  max-width: 60ch;
  margin-inline: auto;
}

body.theme-dark .guide-figure figcaption {
  color: var(--on-dark-secondary);
}

/* Hover-to-zoom used on the results page. Disabled for anyone who has asked
   their system to reduce motion. */
.zoom-on-hover {
  transition: transform 0.4s ease-in-out;
  margin: 0 auto;
  max-width: 100%;
}

.zoom-on-hover:hover {
  transform: scale(1.4);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .zoom-on-hover,
  .nav-card {
    transition: none;
  }
  .zoom-on-hover:hover {
    transform: none;
  }
  .nav-card:hover,
  .nav-card:focus {
    transform: none;
  }
}

/* A scrolling column of thumbnails; replaces Bootstrap 4's .pre-scrollable,
   whose fixed 340px max-height fought the inline max-height overrides. */
.scroll-column {
  max-height: 55vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius-sm);
}

.status-line {
  font-family: var(--sans);
  font-size: 0.92rem;
  min-height: 1.5rem;
}

.status-line--error {
  color: #b3261e;
  font-weight: 600;
}

.status-line--ok {
  color: #11643a;
  font-weight: 600;
}

body.theme-dark .status-line--error {
  color: #ff9d94;
}

body.theme-dark .status-line--ok {
  color: #8fe3b4;
}

/* -------------------------------------------------------------- controls */

.btn {
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 550;
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background-color: var(--yale-blue-bright);
  border-color: var(--yale-blue-bright);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--yale-blue);
  border-color: var(--yale-blue);
}

.btn-light {
  background-color: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

.btn-light:hover,
.btn-light:focus {
  background-color: #f1f4f7;
  border-color: #c3ccd6;
}

.form-control,
.form-control-file,
select {
  font-family: var(--sans);
  font-size: 0.94rem;
  border-radius: var(--radius-sm);
  border-color: var(--line);
}

.form-control:focus {
  border-color: var(--yale-blue-bright);
  box-shadow: 0 0 0 3px rgba(14, 77, 146, 0.15);
}

label {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--ink-secondary);
}

/* Cards and alerts inherit the softer radius used across the site. */
.card,
.alert {
  border-radius: var(--radius);
}

/* Alerts keep a light surface on every page, including the Yale-blue pages,
   so their text colors are set explicitly here rather than inherited. On a
   .theme-dark page the inherited ink is near-white, which on Bootstrap's pale
   alert backgrounds came out at 1.36:1 and was unreadable. */
.alert {
  font-family: var(--sans);
  font-size: 0.95rem;
  border: 1px solid transparent;
  color: var(--ink);
}

.alert-warning,
body.theme-dark .alert-warning,
body.theme-light .alert-warning {
  background-color: #fff4d4;
  border-color: #eccf86;
  color: #5a4304;
}

.alert-danger,
body.theme-dark .alert-danger,
body.theme-light .alert-danger {
  background-color: #fdecec;
  border-color: #f2b6b6;
  color: #7a1c17;
}

.alert-info,
body.theme-dark .alert-info,
body.theme-light .alert-info {
  background-color: #e7f1fb;
  border-color: #b6d4f2;
  color: #0d3c66;
}

/* Headings, strong text and the .p1/.readable helpers inside an alert must
   not pick the page theme's ink back up. */
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert strong,
.alert .p1, .alert .readable,
body.theme-dark .alert h2, body.theme-dark .alert h5,
body.theme-dark .alert strong,
body.theme-dark .alert .p1, body.theme-dark .alert .readable {
  color: inherit;
}

/* Links inside an alert are always the dark-on-light pairing; the dark
   theme's yellow link color would sit on a pale background. */
.alert a,
body.theme-dark .alert a,
body.theme-light .alert a {
  color: var(--yale-blue-bright);
  text-decoration: underline;
}

.alert a:hover,
.alert a:focus,
body.theme-dark .alert a:hover,
body.theme-dark .alert a:focus {
  color: var(--yale-blue);
}

/* Stop the long description columns from running edge to edge on wide screens. */
.readable {
  max-width: 66ch;
  margin-left: auto;
  margin-right: auto;
}

/* Excludes alerts, which carry their own light surface and set their own ink
   in the alert block above. */
body.theme-dark .readable:not(.alert) {
  color: var(--on-dark-secondary);
}

/* Step numbers on the Toolbox page. */
.text-muted {
  color: var(--ink-muted) !important;
}