/* *#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#* carousel-navigation.css *#*#*#*#*#*#*#*#*#*#*#*# (C) 2025 DekTec */
/*                                                                                                          */
/* Carousel navigation controls.                                                                            */
/*                                                                                                          */
/* =+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ */

:root {
  --touch-size:48px;                /* Tap target size. */
  --arrow-width:1rem;               /* Width of the carousel arrow, desktop default. */
  --y-lift:3rem;                    /* Upward lift to place arrows slightly above vertical center. */

  --frame-width:73.125rem;          /* Max width of the centered carousel frame. */
  --edge-inset:0.5rem;              /* Inset when no gutter exists. */

 /* Desktop gutter placement. */
  --gutter-fraction: 5;             /* Arrows sit 1/--gutter-fraction into the side gutter on wide screens. */
}

/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Carousel Dots -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

.carousel-dots {width:100%; display:flex; gap:1em; justify-content:center}

.carousel-dot {width:1.5em; height:1.5em; cursor:pointer}

.carousel-dot .dot-inner {fill:transparent; stroke:currentColor; stroke-width:4;
           transform:scale(1); transition:transform 0.3s ease;
           transform-origin:center; transform-box:fill-box}
.bg-dark .carousel-dot .dot-inner {stroke:var(--color-accent-light)}
.bg-light .carousel-dot .dot-inner {stroke:var(--color-dark-blue)}

.carousel-dot .dot-inner.active {fill:currentColor; stroke:none; transform:scale(1.4)}
.bg-dark .carousel-dot .dot-inner.active {fill:var(--color-dektec-aqua); stroke:var(--color-dark-blue)}
.bg-light .carousel-dot .dot-inner.active {fill:var(--color-dark-blue); stroke:none}

.carousel-dot .outer-ring {fill:none; stroke-width:2; transform-origin:center;
                           animation:dot-ring-pop var(--fade-duration) ease-out}
.bg-dark .carousel-dot .outer-ring {stroke:var(--color-accent-light)}
.bg-light .carousel-dot .outer-ring {stroke:var(--color-dark-blue)}

@keyframes dot-ring-pop {0%   {opacity:0; transform:scale(0.3)}
                         100% {opacity:1; transform:scale(1)}}

@media (min-width:860px)
{
  .carousel-dots {margin-top:2rem}
}

@media (max-width:859.98px)
{
  .carousel-dots {grid-row:2}
  .carousel-dot {width:1.1em; height:1.1em}
}

/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Left/Right Navigation Buttons -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

/* Base button: no background, pointer cursor, color transition, no tap highlight. */
.carousel-button {background:none; block-size:var(--touch-size); border:none; cursor:pointer; 
                  display:grid; inline-size:var(--touch-size); place-items:center; position:absolute;
                  top:50%; transition:color 0.3s ease; -webkit-tap-highlight-color:transparent; z-index:20}

/* Arrow SVG: fixed size, stroke inherits current color, animate transform. */
.carousel-button svg {display:block; height:2.5rem; stroke:currentColor; stroke-width:1.5px;
                      transition:transform 0.12s ease-out; width:var(--arrow-width)}

/* Select a color that fits with the theme. */
.bg-dark .carousel-button {color:var(--color-accent-light)}
.bg-light .carousel-button {color:var(--color-dark-blue)}

/* Press-in effect: shrink arrow on pointer down. */
.carousel-button:active svg {transform:scale(.8)}

/* Visible focus ring for keyboard users. */
.carousel-button:focus-visible {outline:2px solid currentColor}

/* Hover colors only on real hover devices (mouse/stylus); sticky hover on touch would leave the button     */
/* in the wrong color.                                                                                      */
@media (hover:hover) and (pointer:fine)
{
  .bg-dark .carousel-button:hover {color:#66ccff}
  .bg-light .carousel-button:hover {color:#005ea2}
}

/* Default positioning (no outer gutter): hug the carousel edge with a safe inset. */
.carousel-button[data-direction="prev"]  { left: var(--edge-inset) }
.carousel-button[data-direction="next"]  { right: var(--edge-inset) }

/* Counter-shift so the visible arrow stays where expected while hitbox is larger. */
.carousel-button[data-direction="prev"] {
  transform: translate(
    calc(-1 * (var(--touch-size) - var(--arrow-width)) / 2),
    calc(-50% - var(--y-lift))
  );
}
.carousel-button[data-direction="next"] {
  transform: translate(
    calc( (var(--touch-size) - var(--arrow-width)) / 2),
    calc(-50% - var(--y-lift))
  );
}

/* Wide screens: push arrows into the side gutters by a fraction of leftover width.                         */
/* We keep your original sign logic: (frame - viewport) is negative on wide screens.                        */
@media (min-width:859.98px) {
  .carousel-button[data-direction="prev"] {
    left:  calc((var(--frame-width) - 100vw) / var(--gutter-fraction));
  }
  .carousel-button[data-direction="next"] {
    right: calc((var(--frame-width) - 100vw) / var(--gutter-fraction));
  }
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Mobile Portrait -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

@media (max-width:859.98px) and (orientation:portrait)
{
  :root {--arrow-width:0.8rem; --touch-size:44px}
  .carousel-button svg {height:2rem}
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Mobile Landscape -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

@media (max-width:859.98px) and (orientation:landscape)
{
  :root {--arrow-width:0.6rem; --touch-size:44px; --y-lift:0.3rem}
  .carousel-button svg {height:1.6rem}
}