/* Same raised button and btn-16 hover treatment used in the user's CECON
   project. The text and shadow colors follow Tales Caetano's wine palette. */
:root {
  --button-surface: #e8e1d1;
  --button-text: #591522;
  --button-shadow: rgba(89, 21, 34, .18);
  --button-radius: 5px;
}

:is(.button, .button.gold, .filters button, .menu-toggle, .text-link, .dialog-close) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(89, 21, 34, .12);
  border-radius: var(--button-radius);
  background: linear-gradient(145deg, #f0ebe1, var(--button-surface));
  color: var(--button-text);
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .6),
    7px 7px 20px var(--button-shadow),
    4px 4px 5px rgba(89, 21, 34, .09);
  transition: box-shadow .3s ease, background .3s ease, transform .3s ease, color .3s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:is(.button, .filters button, .menu-toggle, .text-link, .dialog-close)::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background: rgba(89, 21, 34, .09);
  box-shadow: -7px -7px 20px rgba(255, 255, 255, .6),
    -4px -4px 5px rgba(255, 255, 255, .6),
    7px 7px 20px rgba(89, 21, 34, .13),
    4px 4px 5px rgba(89, 21, 34, .07);
  transition: width .3s ease;
}

:is(.button, .button.gold, .filters button, .menu-toggle, .text-link, .dialog-close):is(:hover, :focus-visible) {
  background: linear-gradient(145deg, #f0ebe1, var(--button-surface));
  color: var(--button-text);
  transform: none;
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .65),
    5px 5px 13px var(--button-shadow),
    3px 3px 5px rgba(89, 21, 34, .1);
}

:is(.button, .filters button, .menu-toggle, .text-link, .dialog-close):is(:hover, :focus-visible)::after {
  left: auto;
  right: 0;
  width: 100%;
}

:is(.button, .button.gold, .filters button, .menu-toggle, .text-link, .dialog-close):active {
  transform: translateY(2px);
  box-shadow: inset 3px 3px 6px rgba(89, 21, 34, .2),
    inset -3px -3px 6px rgba(255, 255, 255, .7);
}

:is(.button, .filters button, .menu-toggle, .text-link, .dialog-close):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}

.filters button.active,
.filters button.active:is(:hover, :focus-visible) {
  color: #fff;
  background: linear-gradient(145deg, #742337, #591522);
  border-color: #591522;
  box-shadow: inset 2px 2px 4px rgba(42, 7, 16, .3),
    inset -1px -1px 2px rgba(255, 255, 255, .15),
    3px 3px 8px rgba(89, 21, 34, .16);
}

.filters button.active::after { background: rgba(255, 255, 255, .06); }
.text-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; padding: 12px 18px; text-decoration: none; }
.text-link:hover { text-decoration: none; }
.menu-toggle { min-height: 44px; min-width: 44px; }
.dialog-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  :is(.button, .filters button, .menu-toggle, .text-link, .dialog-close),
  :is(.button, .filters button, .menu-toggle, .text-link, .dialog-close)::after {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  :is(.button, .filters button, .menu-toggle, .text-link, .dialog-close) {
    border: 1px solid ButtonText;
    box-shadow: none;
  }
  .filters button.active { border: 2px solid Highlight; }
}

/* Timeline actions use the same raised buttons as the rest of the site. */
.timeline a.button{display:inline-flex;align-items:center;justify-content:center;max-width:100%;margin-top:16px;padding:13px 18px;color:var(--button-text);font:700 11px/1.4 var(--sans);letter-spacing:.04em;text-decoration:none}
.timeline a.button:hover{text-decoration:none}