/*
Theme Name:         ASCA (Child Theme)
Template:           asca
Theme URI:          https://roots.io/sage/
Description:        Sage is a WordPress starter theme.
Version:            10.8.2
Author:             Roots
Author URI:         https://roots.io/
Text Domain:        sage
License:            MIT License
License URI:        https://opensource.org/licenses/MIT
Requires PHP:       8.1
Requires at least:  5.9
*/

:root {
  /* Transitions */
  --t-fast: 150ms;
  --t-med: 320ms;
  --t-slow: 420ms;
  --ease-spring: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------
   Theme Overrides
------------------------------------------------------------ */
html {
  margin-top: 0 !important;
}

body.home {
  background:
    linear-gradient(180deg, rgba(232, 169, 89, .65) 0%, rgba(48, 188, 165, .65) 100%),
    #111;
}

body #wpadminbar,
body.home #mobile_menu_btn,
body.home #header_extras,
body.home footer {
  display: none;
}

body.logged-in header {
  top: 0;
}

body.logged-in #mobile_menu_panel {
  margin-top: 0;
}

header {
  background-color: transparent;
  box-shadow: none;
}

header.header--scrolled {
  background-color: rgba(0, 0, 0, .75);
}

header.header--scrolled #mobile_menu_btn {
  color: #212121;
  background: rgba(255, 255, 255, .7);
}

#header-row {
  padding: .75rem;
  align-items: center;
}

#header_extras {
  height: 0;
}

#mobile_menu_btn {
  color: #fff;
  background: rgba(0, 0, 0, .4);
}

/* Floating nav */
#nav_floating {
  ---shadow: 0 4px 6px -1px var(---shadow-color, rgb(0 0 0 / .1)),
    0 2px 4px -2px var(---shadow-color, rgb(0 0 0 / .1));
  box-shadow: var(---inset-shadow), var(---inset-ring-shadow),
    var(---ring-offset-shadow), var(---ring-shadow), var(---shadow);
  background: #fff;
  border-radius: var(--radius-md);
  margin: 0 auto;
  padding-inline: .5rem;
  padding-block: .5rem;
  gap: 1rem;
}

.center-nav a {
  white-space: nowrap;
}

.brand img {
  width: 105px;
  height: auto;
  object-fit: contain;
}

.center-nav ul li:hover,
.center-nav ul li.current-menu-item {
  border-bottom-color: var(--color-primary);
}

.click-to-view-btn {
  padding: .5rem .875rem;
  box-shadow: 0 0 0 2px #fff;
}

.btn-solid-alt {
  background-color: var(--color-alt-rgb);
  border-color: var(--color-alt-rgb);
}

/* ------------------------------------------------------------
   Conference Showcase
------------------------------------------------------------ */
.conference-showcase,
.showcase-tiles,
.showcase-tiles-desktop {
  overflow: clip;
}

.showcase-tiles {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

/* Content sits above overlays */
.showcase-tile img,
.showcase-tile .click-to-view,
.showcase-tile .conference-details {
  position: relative;
  z-index: 2;
}

/* Overlay */
.showcase-tiles-mobile .showcase-tile,
.showcase-tiles-desktop .showcase-tile-inner {
  position: relative;
  overflow: hidden;
}

.showcase-tiles-mobile .showcase-tile::before,
.showcase-tiles-desktop .showcase-tile-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 1);
  opacity: .6;
  transition: opacity var(--t-med) var(--ease-spring);
  will-change: opacity;
}

.showcase-tiles-mobile .showcase-tile.active-tile::before,
.showcase-tiles-desktop .showcase-tile.active-tile .showcase-tile-inner::before {
  opacity: 0;
}

/* Logo */
.showcase-tile .showcase-tile-inner img,
.showcase-tile .conference-logo img {
  height: 100%;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  opacity: .9;
  filter: brightness(.35) contrast(.97);
  transform: scale(.94);
  transition:
    opacity var(--t-med) ease,
    filter var(--t-med) ease,
    transform var(--t-slow) var(--ease-spring);
}

.showcase-tile.active-tile .showcase-tile-inner img,
.showcase-tile.active-tile .conference-logo img {
  opacity: 1;
  filter: none;
  transform: none;
}

/* ------------------------------------------------------------
   Mobile
------------------------------------------------------------ */
.showcase-tiles-mobile {
  display: flex;
  flex-direction: column;
}

.showcase-tiles-desktop {
  display: none;
}

.showcase-tiles-mobile .showcase-tile {
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.showcase-tiles-mobile .showcase-tile button {
  position: relative;
  padding: 2.5rem 1.5rem;
  z-index: 1;
  min-height: 18.5vh;
  height: auto;
}

.showcase-tiles-mobile .showcase-tile:first-of-type button {
  padding-top: 8.75rem;
}

.showcase-tiles-mobile .conference-logo img {
  width: 100%;
  max-width: 14rem;
  max-height: 6rem;
  margin: 0 auto;
}

.showcase-tiles-mobile .click-to-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}

.showcase-tiles-mobile .showcase-tile:not(.active-tile) .click-to-view {
  opacity: .75;
  z-index: 2;
}

.showcase-tiles-mobile .showcase-tile:not(.active-tile) .click-to-view .click-to-view-btn {
  padding: .375rem .5rem;
  font-size: .75rem;
}

.showcase-tiles-mobile .showcase-tile .showcase-tile-inner {
  position: relative;
  z-index: 0;
  padding: 1.5rem;
  color: #fff;
  backdrop-filter: blur(2px);
}

.showcase-tiles-mobile .conference-details .conference-details-lists .btn:hover {
  background-color: #fff;
  color: #000;
}

.showcase-tiles-mobile .conference-details .conference-details-lists .click-to-view-btn,
.showcase-tiles-mobile .conference-details .conference-details-lists .btn-get-ceus {
  ---border-opacity: 1;
  border-color: rgba(255, 255, 255, var(---border-opacity));
}

.showcase-tiles-mobile .showcase-tile.active-tile button {
  user-select: none;
  pointer-events: none;
}

.showcase-tiles-mobile .showcase-tile.active-tile .conference-logo img {
  max-width: 18rem;
  max-height: 9rem;
}

.showcase-tiles-mobile .showcase-tile.active-tile .conference-details {
  opacity: 1;
}

@media (min-width:576px) {
  .showcase-tiles-mobile .showcase-tile button {
    min-height: 22.5vh;
  }

  .showcase-tiles-mobile .showcase-tile .showcase-tile-inner {
    padding: 2.5rem;
  }
}

@media (min-width:768px) {
  .brand img {
    width: 155px;
  }

  #nav_floating {
    height: 76px;
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: 0;
    gap: calc(var(--spacing) * 6);
  }

  #header-row {
    padding-block: calc(var(--spacing) * 2.5);
  }

  header.header--scrolled #header-row {
    padding-block: calc(var(--spacing) * 2.5);
  }

  header.header--scrolled #nav_floating {
    height: 60px;
  }
}

@media (min-width: 1024px) {
  .brand img {
    width: auto;
    height: 65%;
  }

  .showcase-tiles-mobile {
    display: none;
  }

  .showcase-tiles-desktop {
    display: flex;
    gap: 0;
    overflow-x: hidden;
  }

  /* Desktop hover glow */
  .showcase-tiles-desktop .showcase-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    box-sizing: border-box;
    border: 4px solid transparent;
    border-radius: inherit;
    border-image: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc, #ffcc00) 1;
    background: transparent;
    opacity: 0;
    transition: opacity var(--t-fast) ease;
    pointer-events: none;
  }

  .showcase-tiles-desktop .showcase-tile:not(.active-tile):hover::after {
    opacity: 1;
  }

  /* Darker overlay when hovering non-active tiles */
  .showcase-tiles-desktop .showcase-tile:not(.active-tile):hover::before {
    opacity: .9;
  }

  .showcase-tiles-desktop .conference-details {
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
  }

  .showcase-tiles-desktop .showcase-tile {
    flex: var(--grow-inactive-default) 1 0;
    z-index: 0;
    min-width: 0;
    contain: layout paint;
    transition:
      flex-grow var(--t-slow) var(--ease-spring),
      transform var(--t-slow) var(--ease-spring),
      opacity 280ms ease;
    will-change: flex-grow, transform, opacity;

    --grow-active-default: 22;
    --grow-inactive-default: 9;
    --grow-active-when-hover: 41;
    --grow-hover: 24;
    --grow-inactive-when-hover: 15;

    --footerSize: var(--measuredFooter);
    --row-cta: var(--footerSize);
    --row-details: 0px;
  }

  .showcase-tiles-desktop .showcase-tile.active-tile {
    flex-grow: var(--grow-active-default);
    --row-cta: 0px;
    --row-details: var(--footerSize);
  }

  .showcase-tiles-desktop:has(.showcase-tile:not(.active-tile):hover) .showcase-tile,
  .showcase-tiles-desktop:has(.showcase-tile:not(.active-tile):active) .showcase-tile {
    flex-grow: var(--grow-inactive-when-hover);
  }

  .showcase-tiles-desktop:has(.showcase-tile:not(.active-tile):hover) .showcase-tile.active-tile,
  .showcase-tiles-desktop:has(.showcase-tile:not(.active-tile):active) .showcase-tile.active-tile {
    flex-grow: var(--grow-active-when-hover);
  }

  .showcase-tiles-desktop:has(.showcase-tile:not(.active-tile):hover) .showcase-tile:not(.active-tile):hover,
  .showcase-tiles-desktop:has(.showcase-tile:not(.active-tile):active) .showcase-tile:not(.active-tile):active {
    flex-grow: var(--grow-hover);
  }

  .showcase-tiles-desktop .showcase-tile .showcase-tile-inner {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) var(--row-cta, 0px) var(--row-details, 0px);
    justify-items: center;
    align-items: center;
    min-height: 0;
  }

  .showcase-tiles-desktop .showcase-tile .showcase-tile-inner>* {
    min-height: 0;
  }

  .showcase-tiles-desktop .showcase-tile img {
    grid-row: 1;
  }

  .showcase-tiles-desktop .showcase-tile .click-to-view {
    grid-row: 2;
    opacity: 1;
  }

  .showcase-tiles-desktop .showcase-tile.active-tile .showcase-tile-inner .click-to-view {
    display: none;
  }

  /* Sizes */
  .showcase-tiles-desktop .showcase-tile img {
    max-width: min(38.5dvw, 80%);
    max-height: min(100%, 47dvh, 50%);
  }

  .showcase-tiles-desktop .showcase-tile:not(.active-tile) .conference-logo img {
    max-width: min(41dvw, 85%);
    max-height: min(100%, 25dvh, 85%);
  }

  /* Details panel transitions */
  .showcase-tiles-desktop .conference-details {
    grid-row: 3;
    align-self: end;
    justify-self: stretch;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--t-med) ease,
      transform var(--t-slow) var(--ease-spring);
    will-change: opacity, transform;
  }

  .showcase-tiles-desktop .showcase-tile.active-tile .conference-details {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Click-to-view */
  .showcase-tiles-desktop .showcase-tile:not(.active-tile) .click-to-view {
    align-self: start;
  }

  .showcase-tiles-desktop .click-to-view .click-to-view-btn {
    transition: all var(--t-fast) ease-in-out;
  }

  .showcase-tiles-desktop .showcase-tile.active-tile .click-to-view {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
  }

  .showcase-tiles-desktop .showcase-tile:not(.active-tile) .click-to-view .click-to-view-btn {
    opacity: .7;
  }
}

/* Accessibility: Reduce motion */
@media (prefers-reduced-motion:reduce) {

  .showcase-tiles-desktop .showcase-tile,
  .showcase-tiles-desktop .showcase-tile::before,
  .showcase-tiles-desktop .conference-logo img,
  .showcase-tiles-desktop .conference-details,
  .showcase-tiles-desktop .showcase-tile::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   Keyframes
------------------------------------------------------------ */
@keyframes pulseGlow {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .85;
  }
}