/* Archivo Audiovisual — brand layer on top of Bootstrap 5.3.
   Tokens from museo.precolombino.cl (see ../static_homepage/assets/css/style.css).
   Layout comes from Bootstrap classes; this file only sets theme + a few media treatments. */

@font-face { font-family: "Brandon Grotesque"; font-weight: 300; font-display: swap; src: url("../vendor/fonts/BrandonGrotesque-Light.woff") format("woff"); }
@font-face { font-family: "Brandon Grotesque"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/BrandonGrotesque-Regular.woff") format("woff"); }
@font-face { font-family: "Brandon Grotesque"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/BrandonGrotesque-Medium.woff") format("woff"); }
@font-face { font-family: "Brandon Grotesque"; font-weight: 500; font-style: italic; font-display: swap; src: url("../vendor/fonts/BrandonGrotesque-MediumItalic.woff") format("woff"); }
@font-face { font-family: "Brandon Grotesque"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/BrandonGrotesque-Bold.woff") format("woff"); }

:root {
  --brand-orange: #f73700;
  --brand-magenta: #99398e;
  --brand-ink: #1a1a1a;
  --brand-muted: #54595f;
  --brand-sand: #e2dfd5;
  --brand-paper: #f7f7f7;
  /* museum colour-block palette */
  --archivo-1: #e2dfd5;
  --archivo-2: #fffe7b;
  --archivo-3: #5e652e;
  --archivo-4: #a41515;
  --archivo-5: #3d8696;

  --bs-font-sans-serif: "Brandon Grotesque", "Segoe UI", system-ui, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-color: var(--brand-ink);
  --bs-body-color-rgb: 26, 26, 26;
  --bs-secondary-color: var(--brand-muted);
  --bs-tertiary-bg: var(--brand-paper);
  --bs-primary: var(--brand-orange);
  --bs-primary-rgb: 247, 55, 0;
  --bs-link-color: var(--brand-ink);
  --bs-link-color-rgb: 26, 26, 26;
  --bs-link-hover-color: var(--brand-orange);
  --bs-link-hover-color-rgb: 247, 55, 0;
  --bs-focus-ring-color: rgba(247, 55, 0, .25);
  --bs-border-radius: .25rem;
}

body { background: #fff; }
h1, h2, h3, .h1, .h2, .h3 { font-weight: 700; letter-spacing: -.01em; }

/* Bootstrap compiles these with its blue; point them at the brand */
.form-control:focus, .form-select:focus { border-color: var(--brand-orange); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--brand-ink); border-color: var(--brand-ink); }
.form-check-input:focus { border-color: var(--brand-orange); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.page-link { --bs-pagination-color: var(--brand-ink); --bs-pagination-active-bg: var(--brand-ink); --bs-pagination-active-border-color: var(--brand-ink); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand-ink); --bs-nav-link-color: var(--brand-ink); --bs-nav-link-hover-color: var(--brand-orange); }
.accordion { --bs-accordion-active-bg: var(--brand-paper); --bs-accordion-active-color: var(--brand-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.list-group { --bs-list-group-active-bg: var(--brand-ink); --bs-list-group-active-border-color: var(--brand-ink); }
.nav-underline { --bs-nav-underline-link-active-color: var(--brand-ink); --bs-nav-link-color: var(--brand-ink); --bs-nav-link-hover-color: var(--brand-orange); --bs-nav-underline-gap: 1.5rem; }

/* Header */
.site-topbar { position: relative; z-index: 1030; }
.site-topbar a:not(.dropdown-item) { color: var(--brand-orange); }
.site-header .nav-link { font-weight: 500; }
.site-header .nav-link.active { color: var(--brand-orange); }
.brand-logo { height: 42px; }

/* Hero: image with dark scrim */
.hero { background-color: #1a1a1a; background-position: center; background-size: cover; background-repeat: no-repeat; }

/* Colour blocks */
.bg-archivo-1 { background: var(--archivo-1); color: var(--brand-ink); }
.bg-archivo-2 { background: var(--archivo-2); color: var(--brand-ink); }
.bg-archivo-3 { background: var(--archivo-3); color: #fff; }
.bg-archivo-4 { background: var(--archivo-4); color: #fff; }
.bg-archivo-5 { background: var(--archivo-5); color: #fff; }

/* Media tiles */
.tile-img { object-fit: cover; }
.topic-overlay { background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0) 60%); }
@media (min-width: 992px) { .h5-lg { font-size: 1.25rem; } }
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.12) !important; }

/* Section headers and home entries: one neutral background */
.bg-seccion { background: #f8f9fa; }
.nav-tabs-scroll { scrollbar-width: none; }
.nav-tabs-scroll::-webkit-scrollbar { display: none; }

/* Home: links per media type, underlined on hover only */
.tipo-links a { color: var(--brand-ink); text-decoration: none; }
.tipo-links a:hover { text-decoration: underline; }

/* Session (prototype: localStorage, set in <head>) */
html:not(.sesion) .si-sesion, html.sesion .sin-sesion { display: none !important; }

/* Disc track list */
.tracklist .list-group-item { cursor: pointer; }
.tracklist .list-group-item.active .track-num { color: rgba(255,255,255,.7) !important; }
.list-columns { columns: 2; column-gap: 2rem; }
.list-columns li { break-inside: avoid; }