/* PILLAW — brand layer on top of Bootstrap 5. Bootstrap (loaded from CDN
   in views/partials/head.ejs) handles the grid, components, and utility
   classes; this file only supplies what Bootstrap doesn't ship out of the
   box: the UEW blue/red palette, the Coda/Roboto type pairing, and a
   handful of one-off pieces (hero, thumbnails, navbar brand mark) that
   don't map onto a stock Bootstrap component. */

:root {
  --pillaw-blue: #2C2B7C;
  --pillaw-blue-deep: #22215E;
  --pillaw-navy: #14133A;
  --pillaw-red: #ED1C24;
  --pillaw-red-hover: #C7161D;
  --pillaw-ink: #1B1B2E;
}

.pillaw-body { font-family: 'Roboto', Helvetica, Arial, sans-serif; color: var(--pillaw-ink); }
.pillaw-display, h1, h2, h3 { font-family: 'Coda', Helvetica, sans-serif; font-weight: 800; }

/* Brand buttons — Bootstrap's own `.btn-primary` is themed off Sass
   variables baked into the CDN build, so it's simpler and more reliable
   to add our two brand button variants directly than to fight Bootstrap's
   color system with CSS variable overrides alone. */
.btn-pillaw-red { background: var(--pillaw-red); border-color: var(--pillaw-red); color: #fff; }
.btn-pillaw-red:hover, .btn-pillaw-red:focus { background: var(--pillaw-red-hover); border-color: var(--pillaw-red-hover); color: #fff; }
.btn-pillaw-blue { background: var(--pillaw-blue); border-color: var(--pillaw-blue); color: #fff; }
.btn-pillaw-blue:hover, .btn-pillaw-blue:focus { background: var(--pillaw-blue-deep); border-color: var(--pillaw-blue-deep); color: #fff; }
.pillaw-text-blue { color: var(--pillaw-blue) !important; }

/* Navbar */
.pillaw-navbar { background: var(--pillaw-blue) !important; min-height: 64px; }
.pillaw-navbar-spacer { height: 64px; }
.pillaw-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 2px solid #fff; border-radius: 6px;
  font-family: 'Coda', Helvetica, sans-serif; font-weight: 800; font-size: 13px; color: #fff;
}
.pillaw-mark-lg { width: 38px; height: 38px; font-size: 15px; }
.pillaw-mark-xl { width: 74px; height: 74px; font-size: 26px; border-width: 3px; border-radius: 14px; }
.pillaw-wordmark { font-family: 'Coda', Helvetica, sans-serif; letter-spacing: .07em; }
.pillaw-tagline { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.pillaw-search-input { width: 180px; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); color: #fff; }
.pillaw-search-input::placeholder { color: rgba(255,255,255,.65); }
.pillaw-search-input:focus { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; box-shadow: none; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,.86); }
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link.active { color: #fff; }

/* Footer */
.pillaw-footer { background: var(--pillaw-blue-deep); }

/* Hero */
.pillaw-hero {
  position: relative; min-height: 520px; overflow: hidden;
  background: var(--pillaw-navy) url('/img/hero.jpg') center / cover no-repeat;
}
.pillaw-hero-overlay { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(20,19,58,.55) 0%, rgba(20,19,58,.88) 100%); }
.pillaw-hero-sub { letter-spacing: .13em; color: rgba(255,255,255,.82); }
.pillaw-hero-lede { max-width: 620px; font-weight: 300; color: rgba(255,255,255,.8); }

/* Section furniture */
.pillaw-rule { width: 52px; height: 4px; background: var(--pillaw-red); }
.pillaw-rule-blue { background: var(--pillaw-blue); }
.pillaw-more-link { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--pillaw-blue); border-bottom: 2px solid var(--pillaw-blue); padding-bottom: 4px; text-decoration: none; }
.pillaw-more-link:hover { color: var(--pillaw-red); border-color: var(--pillaw-red); }
.pillaw-band { background: #F3F3F9; border-top: 1px solid #E4E4EE; border-bottom: 1px solid #E4E4EE; }
.pillaw-narrow { max-width: 620px; }

/* Links used outside navbar (dashboard/admin actions) */
.pillaw-link { font-size: 13px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--pillaw-blue); text-decoration: none; }
.pillaw-link:hover { color: var(--pillaw-red); }
.pillaw-link-danger { color: #B32D2E !important; }
.pillaw-link-danger:hover { color: #7A1E1E !important; }

/* Cards */
.pillaw-card-thumb {
  aspect-ratio: 4 / 3; background-color: #EDEDF3; background-size: cover; background-position: center;
  border-radius: .375rem; position: relative; display: flex; align-items: flex-end; justify-content: flex-start; padding: 10px;
}
.pillaw-card-thumb-framed { border: 1px solid #E4E4EE; }
.pillaw-kind-badge { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.pillaw-card-title a { color: var(--pillaw-ink); }
.pillaw-card-title a:hover { color: var(--pillaw-red); }

/* Single artwork page */
.pillaw-single-hero { width: 100%; aspect-ratio: 16 / 9; background-color: #EDEDF3; background-size: cover; background-position: center; margin-top: 64px; }
.pillaw-preline { white-space: pre-line; line-height: 1.75; }
.pillaw-gallery-img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.pillaw-thumb-preview { max-width: 140px; }

/* Admin */
.pillaw-admin-thumb { width: 76px; height: 76px; border-radius: .375rem; background-color: #EDEDF3; background-size: cover; background-position: center; }
.pillaw-admin-thumb-sm { width: 48px; height: 48px; }
.pillaw-admin-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8A8A99; border-bottom-width: 1px; }