/* base.css — element defaults and site-wide behaviours (body, links,
   selection, keyboard focus, card reveal, image lightbox). */

body {
	background: #000 url('../img/nature.jpg') no-repeat center center fixed;
	background-size: cover;
	color: #fff;
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 10pt;
}

/* Stop any stray wide element from forcing horizontal scroll. */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

table {
    color: #000;
}

/* Default link colour is a light grey (components override where they need an
   accent). Visited renders the same as unvisited — no separate :visited rule —
   so component link colours (nav, breadcrumb, tiles, headers) hold. */
a {
	color: #c9cfd8;
}
a:hover {
	color: #ffffff;
}

::selection { background: var(--accent-deep); color: #fff; }

/* Keyboard focus that matches the accent (nav pills, buttons, links). */
a:focus-visible, .title:focus-visible, .glossy-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =====================  SERVER-RENDERED PANES  ===================== */
/* All tab content is in the initial HTML now (render.php). Angular manages
   .ng-hide once it boots; this rule covers the pre-bootstrap moment (and
   crawlers without JS) so only the active tab's pane shows. */
.ng-hide { display: none !important; }

/* Staggered card reveal, replacing the old JS $timeout stagger. It replays
   whenever a pane is shown again, because display:none -> visible restarts
   CSS animations. --i is set per card by render.php. */
@keyframes reveal-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.reveal {
    animation: reveal-up 0.45s ease both;
    animation-delay: calc(var(--i, 0) * 90ms);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; }
}

/* =====================  IMAGE LIGHTBOX (bio / landing figures)  ===================== */
/* A lightweight modal overlay. Created once in script.js and reused; clicking
   any .bio-figure image opens it here at a larger size. */
#img-lightbox {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
}
#img-lightbox.open { display: flex; }
#img-lightbox figure {
    margin: 0;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#img-lightbox img {
    max-width: 92vw;
    max-height: 86vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--panel-edge);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
}
#img-lightbox figcaption {
    margin-top: 12px;
    font-family: var(--font-body);
    font-size: 11pt;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}
#img-lightbox .lightbox-close {
    position: absolute;
    top: 14px;
    right: 22px;
    font-size: 34px;
    line-height: 1;
    color: #fff;
    opacity: 0.8;
    cursor: pointer;
    user-select: none;
}
#img-lightbox .lightbox-close:hover { opacity: 1; }

@media (max-width: 600px) {
    #img-lightbox .lightbox-close { top: 8px; right: 14px; font-size: 30px; }
}