/* Shared by the three pages (index.html, photography.html, paragliding.html): the
   light and dark colors, the header with the name and the three tabs, the place of
   the light/dark button, and the fade between pages. Change it here and all three
   pages follow. */

:root {
    --gutter: clamp(16px, 3vw, 36px);  /* space at the left and right page edges */
    --header-pad: clamp(18px, 3vw, 36px);        /* space above and below the header's name and tabs */
    --brand-size: clamp(1.25rem, 2.2vw, 1.7rem); /* the name at the top left */
    --page-fade: 1.21s;                 /* how long one page fades into the next when a tab is clicked */

    /* Colors in light mode (dark mode below). */
    --bg: #ffffff;
    --text: #222222;                         /* body text */
    --text-soft: #595959;                    /* tabs, buttons, secondary text */
    --text-faint: #8a8a8a;                   /* small labels, footer */
    --heading: #111111;                      /* the name, titles, the current tab */
    --hover: #000000;                        /* links and buttons when pointed at */
    --rule: #e6e6e6;                         /* thin lines */
    --tile: #eeeeee;                         /* a photo that hasn't loaded yet */
    --underline: rgba(0, 0, 0, 0.28);        /* under links in text */
    --tint: rgba(0, 0, 0, 0.05);             /* circle behind an arrow when pointed at */
    --glass: rgba(255, 255, 255, 0.45);      /* arrow circles over a photo (phones) */
    --glass-hover: rgba(255, 255, 255, 0.7);
    --glass-text: #222222;
}
/* Dark mode: when the device is set to dark (unless the button switched to light),
   or when the button switched to dark. The same colors as the main page's dark mode. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #12131a;
        --text: #dadbdf;
        --text-soft: #b4b6bd;
        --text-faint: #8a8c94;
        --heading: #ffffff;
        --hover: #ffffff;
        --rule: #2b2d36;
        --tile: #1e1f27;
        --underline: rgba(255, 255, 255, 0.35);
        --tint: rgba(255, 255, 255, 0.08);
        --glass: rgba(18, 19, 26, 0.45);
        --glass-hover: rgba(18, 19, 26, 0.7);
        --glass-text: #ffffff;
    }
}
:root[data-theme="dark"] {
    --bg: #12131a;
    --text: #dadbdf;
    --text-soft: #b4b6bd;
    --text-faint: #8a8c94;
    --heading: #ffffff;
    --hover: #ffffff;
    --rule: #2b2d36;
    --tile: #1e1f27;
    --underline: rgba(255, 255, 255, 0.35);
    --tint: rgba(255, 255, 255, 0.08);
    --glass: rgba(18, 19, 26, 0.45);
    --glass-hover: rgba(18, 19, 26, 0.7);
    --glass-text: #ffffff;
}

/* Clicking a tab fades the page into the next one, in browsers that can (others just
   switch). Skipped for visitors who have turned animations off. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
        types: page;
    }
}
html:active-view-transition-type(page)::view-transition-group(root) {
    animation-duration: var(--page-fade);
    animation-timing-function: ease;
}
/* When the browser can't fade between pages, the page fades in on its own instead
   (assets/js/page-fade.js). */
html.page-fade-in body {
    animation: page-fade-in var(--page-fade) ease both;
}
@keyframes page-fade-in {
    from {
        opacity: 0;
    }
}

/* Header: the name on the left, the tabs on the right. When they don't fit side by
   side (phones), the tabs move under the name. */
.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 16px;
    padding: var(--header-pad) var(--gutter);
    font-family: "Crimson Pro", Georgia, serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.site-header .brand {
    margin: 0;
    color: var(--heading);
    font-size: var(--brand-size);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.site-header .brand a {
    color: inherit;
    text-decoration: none;
}
.site-header .tabs {
    display: flex;
    gap: clamp(18px, 2.5vw, 32px);
}
.site-header .tabs a {
    color: var(--text-soft);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.site-header .tabs a:hover {
    color: var(--hover);
}
.site-header .tabs a[aria-current] {  /* the page you are on, or the one it belongs to (the bio pages: Professional) */
    color: var(--heading);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.45em;
}

/* The light/dark button (theme-toggle.css) is just its icon, black, with no box around
   it. It sits at the right end of the header, level with the name and tabs, and scrolls
   away with them. The tabs leave room for it: the icon (18px at most) and one gap
   between tabs. */
#theme-toggle-btn {
    position: absolute;
    top: calc(var(--header-pad) + (1.5 * var(--brand-size) - 42px) / 2 + 2px);  /* + 2px: level with the tab names, which sit a little below the middle of the line */
    right: calc(var(--gutter) - 12px);  /* the icon at the header's right edge, in the middle of the 42px button */
    transition: opacity 0.2s ease;
}
#theme-toggle-btn,
#theme-toggle-btn:hover,
html[data-theme] #theme-toggle-btn,
html[data-theme] #theme-toggle-btn:hover,
html:not([data-theme="light"]) #theme-toggle-btn,
html:not([data-theme="light"]) #theme-toggle-btn:hover {
    border: 0;
    background: none;
    color: var(--heading);
}
#theme-toggle-btn:hover {
    opacity: 0.6;
}
#theme-toggle-btn:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: -6px;
}
.site-header .tabs {
    margin-right: calc(18px + clamp(18px, 2.5vw, 32px));
}