/*!
 * IzNav Frontend Styles
 * Version: 1.0.0
 * License: GPL-2.0-or-later
 */

/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */
.iznav-wrapper {
  --iznav-color:          #6366F1;
  --iznav-bg:             #ffffff;
  --iznav-bg-hover:       #6366F1;
  --iznav-color-hover:    #ffffff;
  --iznav-size:           52px;
  --iznav-radius:         50%;
  --iznav-shadow:         0 4px 24px rgba(99, 102, 241, 0.18), 0 1.5px 6px rgba(0,0,0,0.08);
  --iznav-shadow-hover:   0 8px 32px rgba(99, 102, 241, 0.32), 0 2px 8px rgba(0,0,0,0.12);
  --iznav-transition:     all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --iznav-offset-x:       20px;
  --iznav-offset-y:       0px;
  --iznav-preview-img-size: 40px;
  --iznav-z:              9000;
}

/* ============================================================
   Base – Shared arrow styles
   ============================================================ */
.iznav-wrapper *,
.iznav-wrapper *::before,
.iznav-wrapper *::after {
  box-sizing: border-box;
}

.iznav-arrow-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.iznav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  var(--iznav-size);
  height: var(--iznav-size);
  border-radius: var(--iznav-radius);
  background: var(--iznav-bg);
  color: var(--iznav-color);
  text-decoration: none;
  box-shadow: var(--iznav-shadow);
  transition: var(--iznav-transition);
  cursor: pointer;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Hover – only on pointer devices (fixes stuck hover on mobile touch) */
@media (hover: hover) and (pointer: fine) {
  .iznav-arrow:hover {
    background: var(--iznav-bg-hover, var(--iznav-bg));
    color: var(--iznav-color-hover, var(--iznav-color));
    box-shadow: var(--iznav-shadow-hover);
    transform: scale(1.08);
  }
}

/* Focus always active (keyboard navigation) */
.iznav-arrow:focus-visible {
  background: var(--iznav-bg-hover, var(--iznav-bg));
  color: var(--iznav-color-hover, var(--iznav-color));
  box-shadow: var(--iznav-shadow-hover);
  outline: 3px solid var(--iznav-color);
  outline-offset: 3px;
  transform: scale(1.08);
}

/* Touch press feedback (replaces hover on mobile) */
@media (hover: none) {
  .iznav-arrow:active {
    background: var(--iznav-bg-hover, var(--iznav-bg));
    color: var(--iznav-color-hover, var(--iznav-color));
    transform: scale(0.96);
  }
}

/* Disabled state (no adjacent post) – visibility:hidden keeps flex space intact */
.iznav-arrow--disabled {
  visibility: hidden;
  pointer-events: none;
  cursor: default;
}

/* Icon */
.iznav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.iznav-icon svg.iznav-svg {
  width:  20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  fill: none;
  transition: var(--iznav-transition);
}

/* Labels */
.iznav-label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: inherit;
  transition: var(--iznav-transition);
}

.iznav-arrow--prev .iznav-label { margin-left: 8px; }
.iznav-arrow--next .iznav-label { margin-left: 8px; }

.iznav--has-labels .iznav-arrow {
  width: auto;
  padding: 0 18px;
  border-radius: 100px;
}

/* ============================================================
   Static Mode
   ============================================================ */
.iznav--static {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 16px 0;
}

.iznav--static .iznav-arrow-wrap {
  flex: 0 0 auto;
}

/* ============================================================
   Floating Mode
   ============================================================ */
.iznav--floating {
  position: fixed;
  z-index: var(--iznav-z);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 12px;

  /* Default: sides + middle */
  top: 50%;
  left: var(--iznav-offset-x);
  right: var(--iznav-offset-x);
  transform: translateY(-50%);
  justify-content: space-between;
}

.iznav--floating .iznav-arrow-wrap {
  pointer-events: auto;
}

/* --- Vertical anchors --- */
.iznav--floating.iznav--anchor-v-top {
  top: calc(var(--iznav-offset-y) + var(--iznav-offset-x));
  bottom: auto;
  transform: none;
}

.iznav--floating.iznav--anchor-v-middle {
  top: 50%;
  bottom: auto;
  transform: translateY(calc(-50% + var(--iznav-offset-y)));
}

.iznav--floating.iznav--anchor-v-bottom {
  top: auto;
  bottom: calc(var(--iznav-offset-y) + var(--iznav-offset-x));
  transform: none;
}

/* --- Horizontal anchors --- */
/* "sides" is the default (space-between, both edges) */
.iznav--floating.iznav--anchor-h-sides {
  left:  var(--iznav-offset-x);
  right: var(--iznav-offset-x);
  justify-content: space-between;
}

.iznav--floating.iznav--anchor-h-left {
  left:  var(--iznav-offset-x);
  right: auto;
  justify-content: flex-start;
}

.iznav--floating.iznav--anchor-h-center {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  justify-content: center;
}

.iznav--floating.iznav--anchor-h-center.iznav--anchor-v-middle {
  transform: translate(-50%, calc(-50% + var(--iznav-offset-y)));
}

.iznav--floating.iznav--anchor-h-right {
  left:  auto;
  right: var(--iznav-offset-x);
  justify-content: flex-end;
}



/* ============================================================
   Content Preview Tooltip – Floating Elements (CSS-Driven)
   ============================================================ */
.iznav-wrapper .iznav-hover-preview {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background-color: var(--iznav-preview-bg, transparent);
  border: var(--iznav-preview-border, none);
  box-shadow: var(--iznav-preview-shadow, none);
  border-radius: var(--iznav-preview-radius, 0);
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: calc(var(--iznav-z) + 10) !important;
  white-space: nowrap !important;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease !important;
}

/* Symmetrical padding adjustments if image is present or not */
.iznav-wrapper .iznav-hover-preview:not(:has(.iznav-hover-preview__image-wrap)) {
  padding: var(--iznav-preview-padding-no-image, 0);
}

/* Left arrow preview: slide out to the right, reveal left-to-right */
.iznav-wrapper .iznav-hover-preview--prev {
  left: 100% !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(0px) !important;
  flex-direction: row-reverse !important; /* Order: [Arrow] -> [Text] -> [Image] */
  clip-path: inset(0 100% 0 0) !important;
  padding: var(--iznav-preview-padding-prev, 0);
}

/* Right arrow preview: slide out to the left, reveal right-to-left */
.iznav-wrapper .iznav-hover-preview--next {
  right: 100% !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(0px) !important;
  flex-direction: row !important; /* Order: [Image] -> [Text] -> [Arrow] */
  clip-path: inset(0 0 0 100%) !important;
  padding: var(--iznav-preview-padding-next, 0);
}

/* Hover triggers */
.iznav-wrapper .iznav-arrow-wrap:hover .iznav-hover-preview {
  opacity: 1 !important;
}

.iznav-wrapper .iznav-arrow-wrap:hover .iznav-hover-preview--prev {
  transform: translateY(-50%) translateX(12px) !important;
  clip-path: inset(0 0 0 0) !important;
}

.iznav-wrapper .iznav-arrow-wrap:hover .iznav-hover-preview--next {
  transform: translateY(-50%) translateX(-12px) !important;
  clip-path: inset(0 0 0 0) !important;
}

/* Featured Image Circle */
.iznav-wrapper .iznav-hover-preview__image-wrap {
  width: var(--iznav-preview-img-size, 40px) !important;
  height: var(--iznav-preview-img-size, 40px) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.iznav-wrapper .iznav-hover-preview__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}

/* Preview Title */
.iznav-wrapper .iznav-hover-preview__title {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #ffffff; /* Default: white for best contrast, overrideable */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.95) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  display: inline-block !important;
}

/* ============================================================
   Icon Variants
   ============================================================ */

/* Minimal */
.iznav--icon-minimal .iznav-arrow {
  background: transparent;
  box-shadow: none;
  width:  auto;
  height: auto;
  padding: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .iznav--icon-minimal .iznav-arrow:hover {
    background: rgba(99, 102, 241, 0.08);
    box-shadow: none;
    transform: scale(1.1);
  }
}

/* Circle: slightly larger icon */
.iznav--icon-circle .iznav-icon svg.iznav-svg {
  width:  22px;
  height: 22px;
}

/* No Background (bare icon) – strips button shell, keeps icon only */
.iznav--no-bg .iznav-arrow {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  width:  auto;
  height: auto;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .iznav--no-bg .iznav-arrow:hover {
    background: var(--iznav-bg-hover, rgba(99, 102, 241, 0.1)) !important;
    box-shadow: none !important;
    transform: scale(1.18);
  }
}

@media (hover: none) {
  .iznav--no-bg .iznav-arrow:active {
    background: var(--iznav-bg-hover, rgba(99, 102, 241, 0.1)) !important;
    transform: scale(0.96);
  }
}

/* ============================================================
   Floating Entry Animation
   ============================================================ */
@keyframes iznav-slide-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes iznav-slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.iznav--floating .iznav-arrow-wrap--prev {
  animation: iznav-slide-in-left 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.iznav--floating .iznav-arrow-wrap--next {
  animation: iznav-slide-in-right 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .iznav-arrow,
  .iznav-hover-preview,
  .iznav--floating .iznav-arrow-wrap--prev,
  .iznav--floating .iznav-arrow-wrap--next {
    animation: none;
    transition: none;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 480px) {
  .iznav-wrapper {
    --iznav-size: 44px;
    --iznav-offset-x: 12px;
  }

  .iznav-wrapper:not(.iznav--show-preview-mobile) .iznav-hover-preview {
    display: none !important;
  }

  .iznav-label {
    display: none;
  }

  .iznav--has-labels .iznav-arrow {
    width: var(--iznav-size);
    height: var(--iznav-size);
    padding: 0;
  }
}