/* Copyright (c) 2025 Ken Lambrecht */

:root {
  --link:         #999;
  --link-visited: #999;
  --link-hover:   #eee;
  --link-active:  #888;
}

html, body { background: #111; height: 100%; margin: 0; }

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); }
a:active {  color: var(--link-active); }
/* Optional: clear, accessible focus ring */
/* a:focus-visible { outline: 2px solid hsl(220 80% 100%); outline-offset: 2px; } */

/* SRT - Font Awesome icons via CSS properties (.icon::before - required to make icons render reliably.) */
.icon::before { display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; }

/* Nav icons and wall title */
.nav-icon { position: fixed; top: 0; font-size: 1rem; color: #888; text-decoration: none; z-index: 1000; padding: 8px; }
.nav-prev { left: 40px; }
.nav-next { right: 40px; }
.nav-icon:focus { outline: 2px solid #007cbd; outline-offset: 4px; } /* Accessibility: visible outline when tabbed */
.wall-title { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); font-size: 1rem; font-weight: bold; color: #777; text-align: center; z-index: 1001; }

/* Offcanvas icons */
.kl-oc-i { position: fixed; top: 10px; z-index: 1054; font-size: 18px; line-height: 1; color: #888; text-decoration: none; opacity: 0.9; }
.kl-oc-i:hover, .kl-oc-i:focus { opacity: 1; color: #ccc; }
.kl-oc-il { left: 10px; }
.kl-oc-ir { right: 10px; }

/* Offcanvas */
.offcanvas { background-color: #151515; color: #999; font-size: 16px; z-index: 1055; }
.offcanvas-header { background-color: #000; padding: 8px 0; }
.offcanvas-title { color: #ccc; font-size: 1rem; }
.offcanvas h4 { font-size: 20px; }
.offcanvas a { text-decoration: none; }
.btn-close { font-size: 75%; }
.offcanvas-end .btn-close { margin-right: 3px; }
.offcanvas-start .btn-close { margin-left: 3px; }
.oc-info { text-align: center; }
.info { color: #777; font-size: 14px; }
.kl-div { padding-top: 1rem; border-top: solid 1px #222; }
.kw { border-bottom: solid 1px #222; margin-bottom: 25px; padding-bottom: 10px;}
.kw .photo { float: right; margin-right: 5px; }
.bio { border-radius: 50%; height: 60px; width: 60px; }

.site::after { font: var(--fa-font-regular); content: "\f03e"; margin-left: .3em; } /* fa-image */

/* Walls */
.wall-content { margin-top: 32vh; margin-bottom: 5vh; }
@media (max-width: 992px) { .wall-content { margin-top: 22vh; } }
@media (max-width: 576px) { .wall-content { margin-top: 17vh; } }
.row.vw-gutters { --bs-gutter-x: 3vw; } /* scale the gap between columns with viewport width */
.wall-img { border-top: 1px solid #333; max-width: 100%; height: auto; }
.wall-img-1 { border-right: 1px solid #151515; border-bottom: 1px solid #151515; border-left: 1px solid #252525; box-shadow:  .5vw .5vw .25vw rgba(0,0,0,.5); }
.wall-img-0 { border-right: 1px solid #252525; border-bottom: 1px solid #252525; border-left: 1px solid #151515; box-shadow: -.5vw .5vw .25vw rgba(0, 0, 0, 0.5); }
.photo { position: relative; }
.glass { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

/* Photos in modals */
.modal-dialog { border-radius: 5px; margin-top: 10vh; max-width: 1505px; }
@media (max-width: 1505px) { .modal-dialog { margin-top: 0; } }
.modal-content { background-color: #000; border: solid 1px #444; color: #aaa; }
#modalImage { transition: opacity .15s; }
.btn-modal-close { position: absolute; top: .5rem; right: .5rem; z-index: 2; }
.left-pane { padding: 1px 15px 1px 1px; text-align: center;}
.left-pane img { max-height: 90vh; }
.right-pane { overflow: auto; max-height: 80vh; } /* scrollable */
.links { border-left: solid 1px #333; list-style-type: none; padding: 0 0 0 20px; margin: 20px 0; }
.spotify-link::after { background-image: url('/static/images/icons/spotify.png');
  content: ""; display: inline-block; background-size: contain; width: 18px; height: 18px; margin-left: 10px; vertical-align: middle; }

/* Indicator bar */
.indicator-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 10vh; display: flex; gap: 0.75rem; align-items: center; justify-content: center; z-index: 1030; pointer-events: auto; }
.indicator-bar a { color: #444; text-decoration: none; line-height: 1; }
.indicator-bar i { margin: 0 0.25rem; }
.indicator { font-size: 1.15rem; opacity: 0.55; transition: transform 120ms ease, opacity 120ms ease; }
.indicator:hover, .indicator:focus { color: #666; opacity: 0.85; transform: scale(1.1); outline: none; }
.indicator.active { opacity: 1; transform: scale(1.15); }
/* .indicator-wrap { background: rgba(0,0,0,0.25); backdrop-filter: blur(2px); border-radius: 9999px; padding: 0.4rem 0.6rem; } */