:root {
    /* Primary colors */
    --color-primary: #FFC107;
    --color-primary-hover: #ff9800;
    /* Text in the brand colour: a darker gold in light mode so it meets WCAG AA
       contrast (5.0:1 on white) against the light backgrounds. */
    --color-primary-text: #946700;
    --color-primary-hover-text: #7d5700;
    --color-accent: #2a54f5;
    
    /* Text colors */
    --color-text-primary: #3d3d50;
    --color-text-secondary: #888888;
    --color-text-muted: #969595;
    --color-text-dark: #2b2b3d;
    --color-text-black: #212529;
    --color-heading: #2b2b3d;
    
    /* Background colors */
    --color-bg-body: #f9fafb;
    --color-bg-pattern: #f9fafb;
    --color-bg-white: #ffffff;
    --color-bg-gray: #f6f6f6;
    --color-bg-dark: #313131;
    
    /* Border colors */
    --color-border-primary: #FFC107;
    --color-border-light: #d0d0d0;
    --color-border-gray: #cccccc;
    --color-border-code: #d0d7de;
    
    /* Code block colors */
    --color-code-bg: #f6f8fa;
    --color-code-text: #24292f;
    --color-code-border: #d0d7de;
    
    /* Alert colors */
    --color-success-bg: #d4f4dd;
    --color-success-border: #a3d9a5;
    --color-success-text: #0f5132;
    --color-error-bg: #f8d7da;
    --color-error-border: #f5c6cb;
    --color-error-text: #721c24;
    
    /* Scrollbar colors */
    --color-scrollbar-track: #f1f1f1;
    --color-scrollbar-thumb: #888888;
    --color-scrollbar-thumb-hover: #555555;
    
    /* Misc */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-shadow: rgba(0, 0, 0, 0.1);
    /* Pale amber wash behind the current and hovered navbar links, and a
       fainter one for the full-width rows of the collapsed (mobile) menu */
    --color-hover-tint: rgba(255, 193, 7, 0.14);
    --color-hover-tint-subtle: rgba(255, 193, 7, 0.07);
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Primary colors - keep the amber/yellow theme */
        --color-primary: #FFC107;
        --color-primary-hover: #ffb300;
        --color-primary-text: #FFC107;
        --color-primary-hover-text: #ffb300;
        --color-accent: #5c7cfa;
        
        /* Text colors */
        --color-text-primary: #c6c1ba;
        --color-text-secondary: #9d9588;
        --color-text-muted: #808080;
        --color-text-dark: #c6c1ba;
        --color-text-black: #c6c1ba;
        --color-heading: #c6c1ba;
        
        /* Background colors */
        --color-bg-body: #202222;
        --color-bg-pattern: none;
        --color-bg-white: #1e2021;
        --color-bg-gray: #1e1e1e;
        --color-bg-dark: #0d0d0d;
        
        /* Border colors */
        --color-border-primary: #af8300;
        --color-border-light: #3a3a3a;
        --color-border-gray: #3a3a3a;
        --color-border-code: #3a3a3a;
        
        /* Code block colors - dark theme */
        --color-code-bg: #2d2d2d;
        --color-code-text: #e0e0e0;
        --color-border-code: #3a3a3a;
        
        /* Alert colors - adjusted for dark mode */
        --color-success-bg: #1a3a1a;
        --color-success-border: #2d5a2d;
        --color-success-text: #80d080;
        --color-error-bg: #3a1a1a;
        --color-error-border: #5a2d2d;
        --color-error-text: #ff8080;
        
        /* Scrollbar colors */
        --color-scrollbar-track: #2a2a2a;
        --color-scrollbar-thumb: #555555;
        --color-scrollbar-thumb-hover: #777777;
        
        /* Misc */
        --color-white: #1a1a1a;
        --color-black: #ffffff;
        --color-shadow: rgba(0, 0, 0, 0.3);
        --color-hover-tint: rgba(255, 193, 7, 0.09);
        --color-hover-tint-subtle: rgba(255, 193, 7, 0.045);
    }
}

[data-theme="dark"] {
    /* Primary colors - keep the amber/yellow theme */
    --color-primary: #FFC107;
    --color-primary-hover: #ffb300;
    --color-primary-text: #FFC107;
    --color-primary-hover-text: #ffb300;
    --color-accent: #5c7cfa;
    
    /* Text colors */
    --color-text-primary: #c6c1ba;
    --color-text-secondary: #9d9588;
    --color-text-muted: #808080;
    --color-text-dark: #c6c1ba;
    --color-text-black: #c6c1ba;
    --color-heading: #c6c1ba;
    
    /* Background colors */
    --color-bg-body: #202222;
    --color-bg-pattern: none;
    --color-bg-white: #1e2021;
    --color-bg-gray: #1e1e1e;
    --color-bg-dark: #0d0d0d;
    
    /* Border colors */
    --color-border-primary: #af8300;
    --color-border-light: #3a3a3a;
    --color-border-gray: #3a3a3a;
    --color-border-code: #3a3a3a;
    
    /* Code block colors - dark theme */
    --color-code-bg: #2d2d2d;
    --color-code-text: #e0e0e0;
    --color-code-border: #3a3a3a;
    
    /* Alert colors - adjusted for dark mode */
    --color-success-bg: #1a3a1a;
    --color-success-border: #2d5a2d;
    --color-success-text: #80d080;
    --color-error-bg: #3a1a1a;
    --color-error-border: #5a2d2d;
    --color-error-text: #ff8080;
    
    /* Scrollbar colors */
    --color-scrollbar-track: #2a2a2a;
    --color-scrollbar-thumb: #555555;
    --color-scrollbar-thumb-hover: #777777;
    
    /* Misc */
    --color-white: #1a1a1a;
    --color-black: #ffffff;
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-hover-tint: rgba(255, 193, 7, 0.09);
    --color-hover-tint-subtle: rgba(255, 193, 7, 0.045);
}

body {
    font-family: 'Hind', sans-serif;
    font-size: 15px;
    line-height: 1.8em;
    color: var(--color-text-primary);
    font-weight: 300;
    background-color: var(--color-bg-body);
    background-image: var(--color-bg-pattern);
    background-attachment: fixed;
    user-select: none;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

#main-content {
    flex: 1;
    padding-top: 56px; /* Height of navbar */
    overflow-x: hidden;
}

/* Top of the blog and projects pages: with their first row's .mt-3 (16px),
   less the 4px the navbar overhangs #main-content's padding, content starts
   16px below the navbar, like the home page's box. */
.page-container {
    padding-top: 4px;
}

/* Navbar styling - only for main navbar, not resume/portfolio switcher */
.navbar-expand-lg.navbar.bg-light {
    background-color: var(--color-bg-white) !important;
}

.navbar-expand-lg.navbar-light .navbar-brand,
.navbar-expand-lg.navbar-light .navbar-nav .nav-link {
    color: var(--color-text-black);
}

.navbar-expand-lg.navbar-light .navbar-nav .nav-link:hover {
    color: var(--color-text-black);
}

.navbar-expand-lg.navbar-light .navbar-toggler {
    border-color: var(--color-border-gray);
}

.navbar-expand-lg.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-theme="dark"] .navbar-expand-lg.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .navbar-expand-lg.navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
}

.navbar-expand-lg .navbar-collapse {
    flex-grow: unset !important;
}

.navbar-expand-lg.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 4000;
  margin: 0;
}

.navbar-expand-lg .navbar-nav {
    float: none;
    margin: 0 auto;
    display: block;
    text-align: center;
    border-radius: 0px;
}

.navbar-expand-lg .navbar-nav>li {
    display: inline-block;
    float: none;
}

.navbar-expand-lg .navbar-nav {
  display:flex;
}

/* Active nav link highlighting: the current page's link takes the section
   titles' colour (dark gold in light mode, amber in dark mode). */
.navbar-expand-lg .navbar-nav .nav-item.active .nav-link {
    color: var(--color-primary-hover-text);
}

.navbar-expand-lg .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.5);
    user-select: none;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
    color: var(--color-text-black);
}

/* The current page's link keeps the tint that hovering gives the others. */
.navbar-expand-lg .navbar-nav .nav-item.active .nav-link,
.navbar-expand-lg .navbar-nav .nav-link:hover {
    background-color: var(--color-hover-tint);
}

/* In the collapsed (mobile) menu the links are full-width rows, so the
   same tint would read as a heavy bar: use a fainter one there. */
@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-nav .nav-item.active .nav-link,
    .navbar-expand-lg .navbar-nav .nav-link:hover {
        background-color: var(--color-hover-tint-subtle);
    }
}


/* --------------------------------------
 * Global Typography
 *------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    color: var(--color-heading);
}

h1 {
    font-size: 26px;
    line-height: 1.8em;
    font-weight: 700;
}

h2 {
    font-size: 18px;
    line-height: 1.8em;
    font-weight: 700;
}

h3 {
    font-size: 16px;
    line-height: 1.8em;
    font-weight: 500;
}

h4 {
    font-size: 15px;
    line-height: 1.8em;
    font-weight: 500;
}

h5 {
    font-size: 15px;
    line-height: 1.5em;
    font-weight: 500;
}

h6 {
    font-size: 15px;
    line-height: 1.5em;
}

strong, b {
    font-weight: 700;
}


/* --------------------------------------
 * LINK STYLE
 *------------------------------------------*/

a {
    color: var(--color-primary-text);
    text-decoration: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

a,
a:active,
a:focus,
a:active {
    text-decoration: none;
    outline: none
}

a:hover,
a:focus {
    text-decoration: none;
    color: var(--color-primary-hover-text);
}

p {
    margin-bottom: 20px;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


/*------------------
 * Button Style
 *------------------*/

.btn {
    padding: 14px 30px 11px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    border-radius: 0;
    border: 0;
    text-transform: uppercase;
    user-select: none;
}

.btn-lg {
    font-weight: 700;
    font-size: 24px;
    padding: 15px 30px;
}


/*btn-primary*/

.btn-primary {
    background-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus {
    background: var(--color-primary-hover);
}


/*btn-default*/

.btn-default {
    color: var(--color-border-primary);
    background-color: transparent;
    border: 2px solid var(--color-border-primary);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active:focus {
    background: var(--color-border-primary);
    color: var(--color-white);
    border-color: var(--color-border-primary);
}

button:focus,
.btn:focus,
.btn:active:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* --------------------
 * Column Block
 * -------------------*/

.columns-block {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    /* 21px less the 4px the navbar overhangs #main-content's padding, less
       the box's 1px border line (a box-shadow outside it): a 16px gap
       between the navbar's line and the box's. */
    margin: 21px auto 40px;
    padding: 0;
    box-shadow: 0 0 0 1px var(--color-border-primary);
    max-width: 1200px !important;
    position: relative;
    z-index: 1;
}

.blocks {
    box-sizing: border-box;
}

.left-col-block {
    overflow: hidden;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
    position: relative;
    background: var(--color-bg-white);
    border-right: 1px solid var(--color-border-primary);
}

.right-col-block {
    -webkit-flex: 2 0 0;
    flex: 2 0 0;
    position: relative;
    background: var(--color-bg-white);
}

@media (max-width: 768px) {
    .columns-block {
        display: block;
        margin: 0;
        box-shadow: none;
    }

    .left-col-block {
        width: 100%;
        position: relative;
        border: 0;
    }

    .right-col-block {
        width: 100%;
        position: relative;
        box-shadow: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .columns-block {
        margin-bottom: 30px;
    }
}

/* On desktop (at least 992px wide, where the navbar expands, and 600px
   tall), the home page sits in a fixed frame: the box's border stays put
   with the same 16px gap below the navbar's line and above the bottom of
   the window, and the left column stays inside it, vertically centred, its
   photo shrinking on short windows so it still fits. The page scrolls as
   usual (same scrollbar), but only the right column (Resume/Portfolio)
   moves, inside the frame. Narrower or shorter windows keep the normal
   page, where the box scrolls by.

   Geometry: the box starts at 77px (56px #main-content padding + 21px
   margin), so its border line is at 76px, 16px below the navbar's line at
   59px. The frame's bottom line is 17px above the bottom of the window. */
@media (min-width: 992px) and (min-height: 600px) {
    /* overflow-x: hidden makes an element a scroll container, which a
       sticky child sticks to instead of the window; clip doesn't. */
    body:has(#right-container),
    body:has(#right-container) #main-content {
        overflow-x: clip;
    }

    #right-container {
        /* At the end of the page the box's bottom meets the frame's. */
        margin-bottom: 17px;
    }

    /* The frame: the box's border, fixed to the window. Drawn above the
       right column's content, which scrolls underneath it. */
    #right-container::after {
        content: '';
        position: fixed;
        top: 77px;
        bottom: 17px;
        left: 0;
        right: 0;
        width: min(1200px, 100%);
        margin: 0 auto;
        box-shadow: 0 0 0 1px var(--color-border-primary);
        pointer-events: none;
        z-index: 3;
    }

    /* Page-coloured strips over the gaps above and below the frame, so the
       right column's content disappears at the frame's edges as it scrolls
       (the navbar covers the rest of the top). Above #right-container,
       whose z-index is 1, but not over the frame's lines. */
    #main-wrapper::before,
    #main-wrapper::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        background-color: var(--color-bg-body);
        pointer-events: none;
        z-index: 2;
    }

    #main-wrapper::before {
        top: 0;
        height: 76px;
    }

    #main-wrapper::after {
        bottom: 0;
        height: 16px;
    }

    /* The left column fills the frame and stays in it. */
    #right-container > .left-col-block {
        position: sticky;
        top: 77px;
        height: calc(100vh - 94px);
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        /* Last resort on very short windows, once the photo can't shrink. */
        overflow-y: auto;
    }

    #right-container > .left-col-block > .header {
        display: flex;
        flex-direction: column;
        /* Auto margins centre it vertically, and fall to 0 when it's tall. */
        margin: auto 0;
        min-height: 0;
    }

    #right-container > .left-col-block > .header > * {
        flex-shrink: 0;
    }

    #right-container > .left-col-block > .header > .profile-img {
        flex-shrink: 1;
        /* 20px top padding + a photo at least 80px tall */
        min-height: 100px;
    }

    #right-container > .left-col-block > .header .profile-img img {
        width: auto;
        max-height: 100%;
        margin: 0 auto;
    }
}


/* --------------------
 * Section Background
 * -------------------*/

.gray-bg {
    background-color: var(--color-white);
}


/* --------------------
 *  main Wrapper
 * -------------------*/

/* Contains the box's margins, as overflow: hidden did, without becoming a
   scroll container: the left column's position: sticky would stick to it
   instead of the window. */
#main-wrapper {
    display: flow-root;
}


/*-------------------
 * Section Wrapper
 *-------------------*/

.section-wrapper {
    padding: 50px 50px 0 50px;
    border-bottom: 1px solid var(--color-border-primary);
}

@media (max-width: 480px) {
    .section-wrapper {
        padding: 30px 20px 0 20px;
    }
}


/*---------------------------
* Section Title
*---------------------------*/

.section-title {
    margin-bottom: 15px;
    color: var(--color-primary-hover-text) !important;
}

.section-title h2 {
    margin-bottom: 5px;
    /* A step above the 16px entry titles (bold, all caps) below each heading,
       so sections stand out from their contents. */
    font-size: 22px;
    color: var(--color-primary-hover-text) !important;
}


/*-----------------------------
 * NAVIGATION & HEADER STYLE
 *-----------------------------*/

.header {
    padding: 20px !important;
    margin: 0;
    position: relative;
}

.header .profile-img {
    margin-bottom: 25px;
    padding-top: 20px;
}

.header .profile-img img {
    /* Fill the column explicitly: with srcset, an auto width would come from
       the sizes hint rather than the column, leaving the photo a few px short. */
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.header .content {
    width: 100%;
    margin: 0 auto;
}

.header .content h1 {
    line-height: 1;
    margin: 0 0 5px;
}

.header .content .lead {
    font-size: 18px;
}

.header .content .about-text {
    margin: 10px 0;
}

.header .btn {
    margin-top: 40px;
}

@media (max-width: 768px) {
    .header {
        padding: 0;
        text-align: center;
        border-bottom: 1px solid var(--color-border-light);
    }

    .header img {
        margin: 0 auto;
    }

    .header .content {
        padding: 10px;
    }
}


/* Header Sticky */

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}


/* Contact forms: the Submit button on the left and the Turnstile widget
   (rendered by home/js/scripts.js, 65px tall, as wide as its slot) to its
   right, 20px apart. On phones the widget sits above the button instead,
   across the whole column. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    /* Tops aligned: with Cloudflare's test keys the widget grows a 10px
       "testing only" strip below its usual 65px. */
    align-items: flex-start;
    gap: 20px;
}

.form-actions .turnstile-slot {
    width: 300px;
    /* Hold the widget's place before it renders, so the row doesn't jump. */
    min-height: 65px;
}

@media (min-width: 576px) {
    /* The widget is a fixed 65px tall (Cloudflare's only other size,
       compact, is 140px tall, and it mustn't be scaled), so beside it Submit
       matches it. */
    .form-actions:has(.turnstile-slot) .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 65px;
        padding: 0 32px;
    }
}

@media (max-width: 575.98px) {
    .form-actions .turnstile-slot {
        order: -1;
        width: 100%;
    }
}

/*-------------------
 * Social Icon
 *-------------------*/

.social-icon {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.social-icon li {
    display: inline-block;
    margin: 0 2px;
}

.social-icon li a {
    display: block;
    font-size: 12px;
    color: var(--color-text-primary);
    width: 34px;
    height: 34px;
    line-height: 33px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid var(--color-border-primary);
    user-select: none;
}

.social-icon li a:hover {
    border-color: var(--color-primary-hover);
}

/* Small label above a social button on hover or keyboard focus */
.social-icon li a[data-tooltip] {
    position: relative;
}

.social-icon li a[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translate(-50%, 3px);
    padding: 3px 7px;
    border-radius: 3px;
    background-color: var(--color-text-dark);
    color: var(--color-bg-white);
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.social-icon li a[data-tooltip]:hover::after,
.social-icon li a[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.about-text address {
    line-height: 34px;
}


/*-------------------
 * Expertise
 *-------------------*/

.expertise-item {
    margin-bottom: 20px;
}

.expertise-item h3 {
    margin-bottom: 5px;
    font-weight: 700;
}


/*-------------------
 * Skills Progressbar
 *-------------------*/

.progress-item {
    position: relative;
}

.progress-item .progress-title {
    font-size: 15px;
    font-weight: 400;
    display: inline-block;
    margin-bottom: 5px;
    user-select: none;
}

.progress-item .progress {
    height: 4px;
    box-shadow: none;
    border-radius: 5px;
}

.progress-item .progress-bar {
    background-color: var(--color-primary);
    box-shadow: none;
    text-align: right;
}

.progress-item .progress-percent {
    font-size: 10px;
    background-color: var(--color-bg-dark);
    position: absolute;
    top: 5px;
    padding: 0 8px;
    border-radius: 3px;
    user-select: none;
}

.progress-item .progress-percent::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    border-top: 6px solid var(--color-bg-dark);
    border-right: 8px solid transparent;
}


/*-------------------
 * Portfolio
 *-------------------*/

.portfolio-item {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.portfolio-item .portfolio-thumb img {
    height: auto;
    display: block;
    max-width: 100%;
}

.portfolio-item .portfolio-thumb video {
    height: auto;
    display: block;
    max-width: 100%;
}

.portfolio-item .portfolio-info {
    position: absolute;
    bottom: 0;
    padding: 30px 15px 5px;
    width: 100%;
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}

.portfolio-item .portfolio-info h3 {
    margin: 0;
    line-height: 1;
    color: var(--color-white);
}

.portfolio-item .portfolio-info small {
    color: var(--color-white);
}

.portfolio-item:hover .portfolio-info {
    background: -webkit-linear-gradient(top, transparent 0%, #000 100%);
}


/*-------------------
 * Content Item
 *-------------------*/

.content-item {
    margin-bottom: 40px;
}

.content-item h3 {
    margin: 0 0 10px;
    line-height: 1;
    font-weight: bold;
    text-transform: uppercase;
}

.content-item h4 {
    margin: 0;
    line-height: 1;
}

.content-item small {
    color: var(--color-text-secondary);
}


/*-------------------
 * Contact
 *-------------------*/

.feedback-form {
    margin-top: 50px;
}


/*-------------------
 * Form Style
 *-------------------*/

.form-control {
    height: 50px;
    padding: 0 20px;
    font-size: 13px;
    line-height: 50px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-gray);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.form-control:focus,
.form-control:active {
    box-shadow: none;
}

/* Form validation states */
.form-control.error {
    border-color: var(--color-error-text);
    background-color: var(--color-error-bg);
}

.form-control.error:focus {
    border-color: var(--color-error-text);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.success {
    border-color: var(--color-success-text);
}

.form-control.success:focus {
    border-color: var(--color-success-text);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Form message styles */
.form-message {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 14px;
    animation: slideDown 0.3s ease-out;
    display: none;
}

.form-message.success {
    background-color: var(--color-success-bg) !important;
    border: 1px solid var(--color-success-border) !important;
    color: var(--color-success-text) !important;
}

.form-message.error {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
}

.form-message.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------
 *   Footer
 *---------------------------------------------- */


/* Copyright */

.footer {
    padding: 30px 50px;
}

.footer .copyright-section {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.footer .copyright-section .copytext {
    font-weight: 400;
    display: block;
}

@media (max-width: 480px) {
    .footer {
        padding: 10px 20px;
    }
}


/* ---------------------------------------------- /*
 * Preloader
/* ---------------------------------------------- */

#preloader {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}

/* Always reserve the scrollbar's space so the layout never shifts sideways
   when a page gains or loses a scrollbar (page loads, short pages). */
html {
    scrollbar-gutter: stable;
}

#status,
.status-mes {
    background-image: url("../img/preloader.6a7ca121b74a.svg");
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    top: 50%;
    width: 200px;
}

.status-mes {
    background: none;
    left: 0;
    margin: 0;
    text-align: center;
    top: 65%;
}

/* Dark mode preloader */
[data-theme="dark"] #status {
    background-image: url("../img/preloader-dark.cd8c041a2087.svg");
}

@media (prefers-color-scheme: dark) {
    #status {
        background-image: url("../img/preloader-dark.cd8c041a2087.svg");
    }
}

[data-theme="light"] #status {
    background-image: url("../img/preloader.6a7ca121b74a.svg");
}

.content-item {
    margin-bottom: 20px;
}

.content-item p {
    margin-bottom: 10px;
}

p.res-strengths {
    margin-top: -20px;
}

.section-wrapper.section-ac-experience.gray-bg .content-item {
    margin-bottom: 30px;
}

.navbar {
    margin-top: 8px;
}

.navbar-nav {
    float: none;
    margin: 0 auto;
    display: block;
    text-align: center;
    border-radius: 0px;
}

.navbar-nav>li {
    display: inline-block;
    float: none;
}

.navbar-default .navbar-nav>li>a {
    position: relative;
    color: var(--color-primary-text);
    border-bottom: 1px solid transparent;
    border-top: 2px solid transparent;
    user-select: none;
}

/* Resume/Portfolio underline: grows out from the centre on hover and
   shrinks back to it on leave. The selected tab keeps it at full width, so
   switching tabs shrinks the old one's underline while the new one's stays. */
.navbar-default .navbar-nav>li>a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background-color: var(--color-primary-hover-text);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.navbar-default .navbar-nav>li>a:hover::after,
.navbar-default .navbar-nav>li>a:focus-visible::after,
.navbar-default .navbar-nav>li>a.selected::after {
    transform: scaleX(1);
}

.navbar-default .navbar-nav>li>a:hover {
    color: var(--color-primary-hover-text);
}

.navbar-default {
    background-color: var(--color-bg-white);
    border-radius: 0px;
    border-color: transparent;
}

.navbar-default .navbar-nav>li>a:focus {
    color: var(--color-primary-hover-text);
    background-color: transparent;
}

.selected {
    color: var(--color-primary-hover-text) !important;
    background-color: transparent !important;
}

.github-item {
    border: 1px solid var(--color-border-primary);
    border-radius: 3px;
    padding: 10px;
}

.github-item h3 {
    font-size: 16px;
}

.github-item small {
    font-size: 13px;
}

.col-md-4 {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 12px;
}

.github-item a {
    color: black;
}

.github-item a:hover {
    color: var(--color-primary-hover-text);
}

/* Dark mode GitHub items */
[data-theme="dark"] .github-item {
    background-color: var(--color-bg-white);
}

[data-theme="dark"] .github-item a {
    color: var(--color-text-primary);
}

[data-theme="dark"] .github-item small {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .github-item svg {
    fill: var(--color-text-secondary);
}

@media (prefers-color-scheme: dark) {
    .github-item {
        background-color: var(--color-bg-white);
    }

    .github-item a {
        color: var(--color-text-primary);
    }

    .github-item small {
        color: var(--color-text-secondary);
    }

    .github-item svg {
        fill: var(--color-text-secondary);
    }
}

[data-theme="light"] .github-item a {
    color: black;
}

[data-theme="light"] .github-item small {
    color: #000000;
}

[data-theme="light"] .github-item svg {
    fill: #586069;
}

.v-align-middle {
    vertical-align: middle !important;
}

.see-all {
    margin-top: 15px;
    margin-left: -9px;
}

.repo-language-color {
    border-radius: 50%;
    display: inline-block;
    height: 12px;
    position: relative;
    top: 1px;
    width: 12px;
}

.col-md-12 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid lightgrey;
    margin: 1.5em 0;
    padding: 0;
}

/* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {
    opacity: 0.7;
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /* Center content vertically and horizontally */
    justify-content: center;
    align-items: center;
    padding: 50px 10px 10px;
    box-sizing: border-box;
}

.modal[style*="display: block"] {
    display: flex !important;
}

/* Prevent background scrolling when modal is open */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* The Modal (background) */
#pdfModal {
    display: none;
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 40px 0 0;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

#pdfModal[style*="display: block"] {
    display: flex !important;
}

#pdfModal iframe.modal-content {
    width: 100% !important;
    height: calc(100vh - 40px) !important;
    max-width: 100% !important;
    max-height: calc(100vh - 40px) !important;
    margin: 0;
    padding: 0;
    border: none;
}

/* Modal figure wrapper - keeps image and caption together */
.modal-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    max-width: 95vw;
    max-height: calc(100vh - 70px);
}

/* Modal Content (Image) */
.modal-content {
    display: block;
    width: auto;
    max-width: 95vw;
    max-height: calc(100vh - 100px);
    height: auto;
    object-fit: contain;
    z-index: 5001;
    margin: 0 auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* Caption of Modal Image (Image Text) - directly under image */
#caption {
    display: block;
    text-align: center;
    color: #ccc;
    padding: 6px 10px 0;
    margin: 0;
    font-size: 0.95rem;
    height: auto;
    flex: 0 0 auto;
    line-height: 1.4;
}

/* Add Animation - Zoom in the Modal */
.modal-content,
#caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.close {
    position: fixed;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    user-select: none;
    z-index: 999999;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Mobile: full-width image, larger close button */
@media only screen and (max-width: 768px) {
    .modal {
        padding: 45px 0 5px;
    }
    .modal-figure {
        max-width: 100vw;
    }
    .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: calc(100vh - 100px);
    }
    .close {
        font-size: 55px;
        top: 5px;
        right: 15px;
    }
}

.project-header h2 {
    margin-bottom: 2px;
}

.project-info h2 {
    margin-bottom: 2px;
}

.project-header .col-md-8 {
    margin-bottom: 15px
}

.left-item {
    text-align: right;
}


.web-thumb {
    margin-top: 15px;
}

@media only screen and (max-width: 768px) {
    .web-thumb {
        margin-top: 0px;
    }
}

/* Every Portfolio thumbnail gets the same gold border. */
.portfolio-pdf, .portfolio-img, .portfolio-vid {
    border: 1px solid var(--color-border-primary);
    cursor: pointer;
}

.loading {
    display: none;
}

.software-divider:last-child {
    display: none;
}

/* Dark mode toggle button */
#theme-toggle {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

#theme-toggle:focus,
#theme-toggle:active,
#theme-toggle:hover {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
}

/* Submit button styling - yellow outline like Read More */
.btn-blog-outline {
    color: var(--color-primary-text) !important;
    background-color: transparent !important;
    border: 2px solid var(--color-primary-text) !important;
    border-radius: 6px !important;
    user-select: none;
    outline: none !important;
    box-shadow: none !important;
}

.btn-blog-outline:hover,
.btn-blog-outline:focus,
.btn-blog-outline:active {
    color: #d39e00 !important;
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: #d39e00 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Dark mode styles for yellow outline button */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-blog-outline {
        color: var(--color-primary-text) !important;
        border-color: var(--color-border-primary) !important;
    }
    
    :root:not([data-theme="light"]) .btn-blog-outline:hover,
    :root:not([data-theme="light"]) .btn-blog-outline:focus {
        color: var(--color-bg-white) !important;
        background-color: var(--color-border-primary) !important;
        border-color: var(--color-border-primary) !important;
    }
}

[data-theme="dark"] .btn-blog-outline {
    color: var(--color-primary-text) !important;
    border-color: var(--color-border-primary) !important;
}

[data-theme="dark"] .btn-blog-outline:hover,
[data-theme="dark"] .btn-blog-outline:focus {
    color: var(--color-bg-white) !important;
    background-color: var(--color-border-primary) !important;
    border-color: var(--color-border-primary) !important;
}

/* btn-blog-outline-dark for back to blog style buttons */
.btn-blog-outline-dark {
    color: #343a40 !important;
    background-color: transparent !important;
    border: 2px solid #343a40 !important;
    border-radius: 6px !important;
    user-select: none;
    outline: none !important;
    box-shadow: none !important;
}

.btn-blog-outline-dark:hover,
.btn-blog-outline-dark:focus,
.btn-blog-outline-dark:active {
    color: #1d2124 !important;
    background-color: rgba(52, 58, 64, 0.1) !important;
    border-color: #1d2124 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Dark mode styles for submit button */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-blog-outline-dark {
        color: var(--color-primary-text) !important;
        border-color: var(--color-border-primary) !important;
    }
    
    :root:not([data-theme="light"]) .btn-blog-outline-dark:hover,
    :root:not([data-theme="light"]) .btn-blog-outline-dark:focus {
        color: var(--color-bg-white) !important;
        background-color: var(--color-border-primary) !important;
        border-color: var(--color-border-primary) !important;
    }
}

[data-theme="dark"] .btn-blog-outline-dark {
    color: var(--color-primary-text) !important;
    border-color: var(--color-border-primary) !important;
}

[data-theme="dark"] .btn-blog-outline-dark:hover,
[data-theme="dark"] .btn-blog-outline-dark:focus {
    color: var(--color-bg-white) !important;
    background-color: var(--color-border-primary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Dark mode form controls */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-control {
        background-color: var(--color-bg-white) !important;
        color: var(--color-text-primary) !important;
        border-color: var(--color-border-primary) !important;
    }
    
    :root:not([data-theme="light"]) .form-control:focus {
        background-color: var(--color-bg-white) !important;
        color: var(--color-text-primary) !important;
        border-color: var(--color-border-primary) !important;
    }
    
    :root:not([data-theme="light"]) .form-control.error {
        border-color: var(--color-error-text) !important;
        background-color: var(--color-error-bg) !important;
    }
    
    :root:not([data-theme="light"]) .form-control.success {
        border-color: var(--color-success-text) !important;
    }
}

[data-theme="dark"] .form-control {
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--color-bg-white) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}

[data-theme="dark"] .form-control.error {
    border-color: var(--color-error-text) !important;
    background-color: var(--color-error-bg) !important;
}

[data-theme="dark"] .form-control.success {
    border-color: var(--color-success-text) !important;
}

/* Theme toggle icon: both icons are in the markup and CSS shows the right one
   (moon in light mode, sun in dark mode) using the same rules as the theme
   colours, so it is correct from the first paint with no script needed. */
.theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-light {
    display: none;
}

[data-theme="dark"] .theme-icon-dark {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon-light {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-icon-dark {
        display: inline-block;
    }
}

/* Contact form honeypot: kept off-screen so only bots fill it in. */
.contact-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Uploaded images carry width/height attributes so the browser reserves their
   space before they load (no content jumping down when they arrive). These
   rules keep the attributes from fixing the displayed size: the image keeps
   its proportions and never overflows. :where() gives the rule zero
   specificity, so any class rule (such as a fixed card height) still wins. */
:where(img[width][height]) {
    max-width: 100%;
    height: auto;
}

/* Fade-in for images that weren't loaded yet when htmx swapped a page in
   (see home/js/image-fade.js). */
/* Hidden instantly (no transition) while loading... */
img.img-pending {
    opacity: 0;
}

/* ...then faded in once loaded. */
img.img-fade {
    transition: opacity 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    img.img-fade {
        transition: none;
    }
}

/* Technical Strengths: one unit per skill. Spacing is a margin rather than
   space characters, so a wrapped line never starts with a stray space.
   Multi-word skills may still wrap inside themselves if very long. */
.res-strengths .res-skill {
    display: inline-block;
    margin-right: 0.75em;
}

/* Font Awesome declares its fonts with font-display: block, which hides icons
   (and delays text that waits on them) until the font downloads. Redeclare
   the same fonts with swap; later @font-face rules for the same face win. */
@font-face {
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../../@fortawesome/fontawesome-free/webfonts/fa-solid-900.bd30bbc09dfe.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../@fortawesome/fontawesome-free/webfonts/fa-regular-400.0e488cdc381f.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 7 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../@fortawesome/fontawesome-free/webfonts/fa-brands-400.6ec5376d46cd.woff2") format("woff2");
}