/* =====================================================================
   OSE · Sticky contact bar (phones and tablets)
   ---------------------------------------------------------------------
   Fixed to the bottom of the screen on a night glass surface: four equal
   items, icon above label — Zalo · Gọi · Messenger · Đăng ký. The sign-up
   item is the primary one (mint marker + mint icon). Pads itself for the
   iPhone home indicator (safe area). Hidden from 64em, where the nav CTA
   takes over. Pages must leave room for it at the bottom below 64em
   (e.g. body padding-block-end of --contact-bar-height + safe area).

   Markup
     <nav class="contact-bar" data-surface="night" aria-label="Liên hệ nhanh">
       <ul class="contact-bar__list" role="list">
         <li><a class="contact-bar__item" href="https://zalo.me/…">
           <span class="contact-bar__icon contact-bar__icon--zalo" aria-hidden="true"></span>
           <span class="contact-bar__label">Zalo</span></a></li>
         … --call (Gọi, tel:…) · --messenger (Messenger, https://m.me/…)
         <li><a class="contact-bar__item contact-bar__item--primary" href="/lien-he/#form">
           <span class="contact-bar__icon contact-bar__icon--signup" aria-hidden="true"></span>
           <span class="contact-bar__label">Đăng ký</span></a></li>
       </ul>
     </nav>

   Variants
     .contact-bar--persistent  also shown from 64em (default: hidden there)
     .contact-bar--inline      in normal flow instead of fixed (content, previews);
                               an inline bar is shown at every width
   States
     visible (default) · [data-state="hidden"]: slid down by
       --contact-bar-enter-offset and faded out (step 3 toggles it when the
       page scrolls past the hero; reduced motion: fade only)
     item :hover :focus-visible :active (icon presses in) [aria-disabled="true"]
   JS        none yet (the show/hide trigger is a step-3 page concern).
   ===================================================================== */

@layer components {
  .contact-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--contact-bar-z);
    display: grid;
    min-block-size: calc(var(--contact-bar-height) + var(--contact-bar-safe-area));
    padding: var(--contact-bar-padding-block) var(--contact-bar-padding-inline);
    padding-block-end: calc(var(--contact-bar-padding-block) + var(--contact-bar-safe-area));
    border-block-start: var(--contact-bar-border-width) solid var(--contact-bar-border);
    background-color: var(--contact-bar-bg);
    color: var(--contact-bar-text);
    box-shadow: var(--contact-bar-shadow);
    -webkit-backdrop-filter: blur(var(--contact-bar-blur));
    backdrop-filter: blur(var(--contact-bar-blur));
    transition:
      transform var(--contact-bar-enter-duration) var(--contact-bar-enter-ease),
      opacity var(--contact-bar-enter-duration) var(--contact-bar-enter-ease),
      visibility var(--contact-bar-enter-duration) var(--contact-bar-enter-ease);
  }

  /* Hidden: visibility stays "visible" until the exit transition ends. */
  .contact-bar[data-state="hidden"] {
    transform: translateY(var(--contact-bar-enter-offset));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-duration: var(--contact-bar-exit-duration);
    transition-timing-function: var(--contact-bar-exit-ease);
  }

  .contact-bar--inline {
    position: relative;
    inset: auto;
    z-index: auto;
  }

  @media (min-width: 64em) {
    .contact-bar:not(.contact-bar--persistent):not(.contact-bar--inline) {
      display: none;
    }
  }

  .contact-bar__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--contact-bar-gap);
    inline-size: 100%;
    max-inline-size: var(--contact-bar-max-width);
    margin-inline: auto;
    padding: 0;
    list-style: none;
  }

  .contact-bar__list > li {
    display: grid;
    min-inline-size: 0;
  }

  .contact-bar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--contact-bar-item-gap);
    min-inline-size: 0;
    min-block-size: var(--contact-bar-item-min-height);
    border-radius: var(--contact-bar-item-radius);
    background-color: var(--contact-bar-item-bg);
    color: var(--contact-bar-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--contact-bar-duration) var(--contact-bar-ease),
      color var(--contact-bar-duration) var(--contact-bar-ease);
  }

  /* Official third-party logos (Zalo, Messenger): unmodified colours,
     sized like the icons, smaller than and below the OSE logo (Meta rules). */
  .contact-bar__logo {
    flex: none;
    inline-size: var(--contact-bar-icon-size);
    block-size: var(--contact-bar-icon-size);
  }

  .contact-bar__item[aria-disabled="true"] .contact-bar__logo {
    opacity: var(--contact-bar-logo-opacity-disabled);
  }

  .contact-bar__icon {
    flex: none;
    inline-size: var(--contact-bar-icon-size);
    block-size: var(--contact-bar-icon-size);
    background-color: currentColor;
    -webkit-mask: var(--_icon) center / contain no-repeat;
    mask: var(--_icon) center / contain no-repeat;
    forced-color-adjust: none;
    transition: transform var(--contact-bar-duration) var(--contact-bar-ease);
  }

  .contact-bar__icon--zalo {
    --_icon: var(--contact-bar-zalo-icon);
  }

  .contact-bar__icon--call {
    --_icon: var(--contact-bar-call-icon);
  }

  .contact-bar__icon--messenger {
    --_icon: var(--contact-bar-messenger-icon);
  }

  .contact-bar__icon--signup {
    --_icon: var(--contact-bar-signup-icon);
  }

  .contact-bar__label {
    max-inline-size: 100%;
    overflow: hidden;
    font-family: var(--contact-bar-label-font-family);
    font-size: var(--contact-bar-label-font-size);
    font-weight: var(--contact-bar-label-font-weight);
    line-height: var(--contact-bar-label-leading);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Primary item (Đăng ký): mint marker on top + mint icon. */
  .contact-bar__item--primary::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: var(--contact-bar-highlight-width);
    block-size: var(--contact-bar-highlight-height);
    border-radius: var(--contact-bar-highlight-radius);
    background-color: var(--contact-bar-highlight);
    transform: translateX(-50%);
    forced-color-adjust: none;
  }

  .contact-bar__item--primary .contact-bar__icon {
    color: var(--contact-bar-highlight);
  }

  @media (hover: hover) {
    .contact-bar__item:hover {
      background-color: var(--contact-bar-item-bg-hover);
    }
  }

  .contact-bar__item:focus-visible {
    box-shadow: var(--contact-bar-focus-ring);
  }

  .contact-bar__item:active {
    background-color: var(--contact-bar-item-bg-active);
  }

  .contact-bar__item:active .contact-bar__icon {
    transform: scale(var(--contact-bar-press-scale));
  }

  /* A channel that is not set up yet: render it without href. */
  .contact-bar__item[aria-disabled="true"] {
    background-color: var(--contact-bar-item-bg);
    color: var(--contact-bar-item-text-disabled);
    cursor: not-allowed;
  }

  .contact-bar__item[aria-disabled="true"] .contact-bar__icon {
    color: inherit;
    transform: none;
  }

  .contact-bar__item--primary[aria-disabled="true"]::before {
    background-color: currentColor;
  }
}