/* ==========================================================================
   UI Polish — based on .github/ui-improvements/instructions.md
   ========================================================================== */

/* ---------- #8  Font Smoothing ---------- */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- #10  Text Wrapping ---------- */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* ---------- #9  Tabular Numbers ---------- */
.numbers .info {
    font-variant-numeric: tabular-nums;
}

/* ---------- #11  Image Outlines ---------- */
img {
    outline: 1px solid rgba(0, 0, 0, 0.06);
    outline-offset: -1px;
}

/* ---------- #3  Shadows Over Borders (navbar) ---------- */
.navbar {
    border: none;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);
}

.navbar-collapse {
    border-top: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ---------- #12  Scale on Press ---------- */
.btn,
.contactbtn,
.navbar-toggle,
#footer_backtotop a {
    transition-property: transform, opacity;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    will-change: transform;
}

.btn:active,
.contactbtn:active,
.navbar-toggle:active,
#footer_backtotop a:active {
    transform: scale(0.96);
}

/* ---------- #4  Interruptible Nav Hover Transitions ---------- */
.navbar-nav > li > a {
    transition-property: color, background-color;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

#navbarBtn .arrow {
    transition-property: border-color;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- #16  Minimum 40×40 Hit Areas ---------- */
.navbar-nav > li > a {
    min-height: 40px;
    display: flex;
    align-items: center;
}

#footer_copyright a {
    position: relative;
    display: inline-block;
    min-height: 40px;
    line-height: 40px;
}

#footer_icons .fa {
    position: relative;
    min-width: 40px;
    min-height: 40px;
}

/* ---------- #5  Staggered Enter Animations ---------- */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.numbers .number {
    opacity: 0;
    animation: fadeSlideIn 0.4s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.numbers .number:nth-child(1) { animation-delay: 0ms; }
.numbers .number:nth-child(2) { animation-delay: 100ms; }
.numbers .number:nth-child(3) { animation-delay: 200ms; }
.numbers .number:nth-child(4) { animation-delay: 300ms; }

/* ---------- #6  Subtle Exit (for 404 rewrite fade) ---------- */
#content {
    transition-property: opacity;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- #14  Fix overly broad transition on header ---------- */
/* Override the "header, header *" rule from site.css that uses
   transition: left .2s — keep it only on header itself. */
header * {
    transition: none;
}

header {
    transition-property: left;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}/* ==========================================================================
   UI Polish — based on .github/ui-improvements/instructions.md
   ========================================================================== */

/* ---------- #8  Font Smoothing ---------- */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- #10  Text Wrapping ---------- */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* ---------- #9  Tabular Numbers ---------- */
.numbers .info {
    font-variant-numeric: tabular-nums;
}

/* ---------- #11  Image Outlines ---------- */
img {
    outline: 1px solid rgba(0, 0, 0, 0.06);
    outline-offset: -1px;
}

/* ---------- #3  Shadows Over Borders (navbar) ---------- */
.navbar {
    border: none;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);
}

.navbar-collapse {
    border-top: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ---------- #12  Scale on Press ---------- */
.btn,
.contactbtn,
.navbar-toggle,
#footer_backtotop a {
    transition-property: transform, opacity;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    will-change: transform;
}

.btn:active,
.contactbtn:active,
.navbar-toggle:active,
#footer_backtotop a:active {
    transform: scale(0.96);
}

/* ---------- #4  Interruptible Nav Hover Transitions ---------- */
.navbar-nav > li > a {
    transition-property: color, background-color;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

#navbarBtn .arrow {
    transition-property: border-color;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- #16  Minimum 40×40 Hit Areas ---------- */
.navbar-nav > li > a {
    min-height: 40px;
    display: flex;
    align-items: center;
}

#footer_copyright a {
    position: relative;
    display: inline-block;
    min-height: 40px;
    line-height: 40px;
}

#footer_icons .fa {
    position: relative;
    min-width: 40px;
    min-height: 40px;
}

/* ---------- #5  Staggered Enter Animations ---------- */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.numbers .number {
    opacity: 0;
    animation: fadeSlideIn 0.4s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.numbers .number:nth-child(1) { animation-delay: 0ms; }
.numbers .number:nth-child(2) { animation-delay: 100ms; }
.numbers .number:nth-child(3) { animation-delay: 200ms; }
.numbers .number:nth-child(4) { animation-delay: 300ms; }

/* ---------- #6  Subtle Exit (for 404 rewrite fade) ---------- */
#content {
    transition-property: opacity;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- #14  Fix overly broad transition on header ---------- */
/* Override the "header, header *" rule from site.css that uses
   transition: left .2s — keep it only on header itself. */
header * {
    transition: none;
}

header {
    transition-property: left;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}