/* 
 * File: hamburgercycler.css
 * Path: /wp-content/themes/LezamizTheme/assets/css/
 * Version: 2025-10-02
 */

:root{
  --btn-h: 38px;
  --btn-w: 84px;
  --btn-bg: #cd001e;
  --btn-fg: #ffffff;
  --btn-bg-hover:#b00019;
  --radius: 15px;

  --line-thickness: 2px;
  --line-gap: 6px;
  --line-length: 20px;

  /* space reserved for the number on the right */
  --count-pad: 28px;
  --count-right: 10px;
}

/* Legacy “hamburger” cycler button (bars + count) */
.hamburg-cycler{
  inline-size: var(--btn-w);
  block-size: var(--btn-h);
  position: relative;                     /* anchor the count */
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;            /* bars start on the left */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  padding-inline: 15px var(--count-pad);  /* reserve space for the number */
  transition: background .15s ease, transform .06s ease;
  font: 600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  box-sizing: border-box;
}
.hamburg-cycler:hover{ background: var(--btn-bg-hover); }
.hamburg-cycler:active{ transform: scale(.98); }
.hamburg-cycler:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Bars grow left?right; number never moves */
.hamburg-cycler .bars{
  block-size: var(--line-length);
  inline-size: 0; /* JS sets width for N bars */
  background:
    linear-gradient(
      to right,
      currentColor 0 var(--line-thickness),
      transparent var(--line-thickness) calc(var(--line-thickness) + var(--line-gap))
    );
  background-size: calc(var(--line-thickness) + var(--line-gap)) 100%;
  background-repeat: repeat-x;
  display: inline-block;
  border-radius: 2px;
  transition: inline-size .18s ease;
  image-rendering: -webkit-optimize-contrast; /* Safari tweak */
}

/* Fixed position from RIGHT edge */
.hamburg-cycler .count{
  position: absolute;
  inset-inline-end: var(--count-right);
  inset-block-start: 50%;
  transform: translateY(-50%);
  min-inline-size: 1ch;
  text-align: center;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Screen-reader helper */
.hamburg-cycler .sr-only{
  position: absolute!important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* Hide the hamburger cycler on phones in portrait only */
@media (max-width: 639px) and (orientation: portrait) {
  #cycleHamburger { display: none !important; }
}