/* Shared styles for the Sobarriba AR site. */

/* Cinzel — the brand's inscriptional face, the same Roman capital lettering as
   the "LA SOBARRIBA" wordmark. Self-hosted (Google Fonts serves the other two,
   but this one ships with the site so the header never renders in a fallback).
   Single variable file covering 400-900, subset to latin + latin-ext and
   converted to woff2 by scripts/build-fonts.sh — 37 kB for the whole range.
   Exposed to Tailwind as `font-title` in each page's inline config. */
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel-Variable.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Material Symbols — the site's icon font. This used to be duplicated in a
   <style> block on all seven pages at `wght 400`, which made the font icons
   read about twice as heavy as the client's hand-drawn PNGs (agricola,
   escultura, icono-virgen): those are hairline art, roughly 3% of the icon
   box, against ~8% for Material at 400. Dropping to 200 puts both families at
   the same visual density, which is the whole point of having one icon system.

   `font-optical-sizing: auto` replaces the old hardcoded `'opsz' 24`. The site
   paints icons anywhere from 16px (the buttons in talla.html) to 72px (the
   church on pueblos.html); with the axis pinned at 24 the stroke scaled up
   with the drawing and the big icons came out solid. Letting the browser drive
   `opsz` off the used font-size thins the stroke as the icon grows, which is
   exactly what the axis is for. Note this only works because every page now
   requests the font WITH the opsz axis
   (`Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,...`) — six of the
   seven pages used to request a wght/FILL-only file, where the old `'opsz' 24`
   was silently doing nothing. Keep the axis in the URL if you touch it. */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0;
  font-optical-sizing: auto;
}

/* Gold filter for PNG icons that need to be shown in the "primary" gold
   (derived from #D4AF37 via the classic invert/sepia/hue-rotate trick). The
   inline `filter: brightness(0) saturate(100%) invert(76%) sepia(38%) ...`
   used to live in a <style> block on every page; moving it here means one
   place to change if the brand gold shifts. */
.icon-primary-filter {
  filter: brightness(0) saturate(100%) invert(76%) sepia(38%) saturate(569%)
          hue-rotate(5deg) brightness(95%) contrast(86%);
}

/* Tailwind CDN's `.drop-shadow-md` also writes to the `filter` property, so
   when both classes coexist the Tailwind rule (injected later) wipes out our
   gold tint. This combined selector has higher specificity (0,0,2,0) and
   bakes the shadow into the same single `filter` declaration. */
.icon-primary-filter.drop-shadow-md {
  filter: brightness(0) saturate(100%) invert(76%) sepia(38%) saturate(569%)
          hue-rotate(5deg) brightness(95%) contrast(86%)
          drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

/* Brand wordmark ("LA SOBARRIBA" + flourishes) in the shared header. The art
   is dark green + silver, fine on the light theme but invisible over the dark
   forest background — so on dark mode the same brightness(0)-first chain as
   `.icon-primary-filter` flattens it to brand gold. */
.dark .brand-logo {
  filter: brightness(0) saturate(100%) invert(76%) sepia(38%) saturate(569%)
          hue-rotate(5deg) brightness(95%) contrast(86%);
}

/* Nav PNG icon — used only by the menu entries built in js/nav.js (Tallas in
   the desktop header, Inicio + Tallas in the mobile bottom-nav). The default
   look matches Tailwind's `filter invert` (white-ish). On hover/focus of the
   parent <a> the filter swaps to the same gold chain as `.icon-primary-filter`,
   so the PNG goes gold in lock-step with the text — mirroring the behaviour
   that Material Symbols already get for free via `currentColor` inheritance.
   The transition keeps the swap smooth instead of snapping. */
.nav-png-icon {
  filter: invert(100%);
  transition: filter 0.25s ease;
}
a:hover > .nav-png-icon,
a:focus-visible > .nav-png-icon {
  filter: brightness(0) saturate(100%) invert(76%) sepia(38%) saturate(569%)
          hue-rotate(5deg) brightness(95%) contrast(86%);
}

/* Shared loader. Gold ring + iconoVirgen centred. Small and elegant — the
   previous loaders (engranaje Material, spinner CSS simple) were replaced by
   this consistent one across every page. */
#sobarriba-loader {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(26, 36, 30, 0.95); /* matches background-dark/95 */
  transition: opacity 0.45s ease;
  padding: 1.5rem;
  text-align: center;
}

#sobarriba-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.sobarriba-loader-ring {
  position: relative;
  width: 88px;
  height: 88px;
}

.sobarriba-loader-ring svg {
  width: 100%;
  height: 100%;
  animation: sobarriba-ring-spin 1.4s linear infinite;
}

.sobarriba-loader-ring .track {
  stroke: rgba(212, 175, 55, 0.18);
}

.sobarriba-loader-ring .arc {
  stroke: #D4AF37;
  stroke-linecap: round;
}

.sobarriba-loader-ring .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sobarriba-loader-message {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: rgba(253, 251, 247, 0.8); /* text-text-dark/80 */
  max-width: 18rem;
  line-height: 1.4;
  text-align: center; /* needed by #loader (talla.html) which is flex-only */
}

/* Progress percentage line under the spinner. Shown by the shared loader when
   `SobarribaLoader.setProgress(pct)` is called, and inline inside talla.html
   by its dedicated `#loaderPct` span. Monospace so the digits don't jitter. */
.sobarriba-loader-progress {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #D4AF37;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@keyframes sobarriba-ring-spin {
  to { transform: rotate(360deg); }
}

/* Playing state for the Audio button on talla.html. Class-based so it wins
   against Tailwind's `hover:bg-white/10` regardless of CDN class order and
   stays gold even while the cursor is hovering the button. */
.audio-btn-playing {
  background-color: #D4AF37 !important;
  color: #1A241E !important;
  font-weight: 700 !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
}
.audio-btn-playing:hover {
  background-color: #D4AF37 !important;
}
.audio-btn-playing .material-symbols-outlined {
  color: #1A241E !important;
}

/* Utility used by preload/fade transitions in the legacy markup. */
.is-hidden,
.hide {
  opacity: 0 !important;
  pointer-events: none !important;
}