/* Flyout navigation and responsive styles */

/* ===== Mobile-only elements: hidden at wide widths ===== */
.mobile-header,
.mobile-menubar,
.mobile-undergrad {
    display: none;
}

/* ===== Hamburger button (visible at all widths) ===== */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;           /* must match .mobile-nav-close button width */
    height: 44px;          /* must match .mobile-nav-close button height */
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    gap: 5px;              /* spacing between the 3 lines */
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    right: 12px;
    z-index: 1001;         /* above .menuminwidth0 z-index:1000 so it's clickable */
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;           /* line thickness; used in translateY calc below */
    background: #fff;
    transition: transform 0.3s, opacity 0.3s;
}

/* Hamburger -> X animation
   translateY value = gap (5px) + span height (2px) = 7px
   This moves the top/bottom lines to the center so they cross into an X */
body.mobile-nav-open .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.mobile-nav-open .hamburger span:nth-child(2) {
    opacity: 0;
}

body.mobile-nav-open .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===== Nav overlay (backdrop, all widths) ===== */
.mobile-nav-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;         /* must be higher than .menuminwidth0 z-index:1000 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* visibility delay (0.3s) must match opacity duration so it hides
       after the fade-out finishes, not before */
    transition: opacity 0.3s, visibility 0s 0.3s;
}

body.mobile-nav-open .mobile-nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s, visibility 0s 0s; /* no delay when opening */
}

/* ===== Nav panel (slides in from right, all widths) ===== */
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 85vw;
    height: 100%;
    height: 100dvh;
    background: #000;
    transform: translateX(100%);
    transition: transform 0.3s;    /* should match .mobile-nav-overlay opacity duration */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 10px 0;
}

body.mobile-nav-open .mobile-nav {
    transform: translateX(0);
}

/* ===== Close button at top of nav ===== */
.mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}

/* Size must match .hamburger so tap targets overlap */
.mobile-nav-close button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;           /* must match .hamburger width */
    height: 44px;          /* must match .hamburger height */
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    padding: 0;
}

.mobile-nav-close button:active {
    background: #333;
}

/* ===== Top-level details/summary (categories) ===== */
.mobile-nav > details {
    border-bottom: 1px solid #333;
}

.mobile-nav > details > summary {
    display: block;
    padding: 14px 18px;
    color: #fff;
    font-family: "Courier New", Courier, monospace;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
}

.mobile-nav > details > summary::-webkit-details-marker {
    display: none;
}

.mobile-nav > details > summary::marker {
    display: none;
    content: '';
}

.mobile-nav > details > summary::after {
    content: '\25B6';
    float: right;
    font-size: 10px;
    line-height: 21px;
    color: #888;
    transition: transform 0.2s;
}

.mobile-nav > details[open] > summary::after {
    transform: rotate(90deg);
}

/* ===== Links inside categories ===== */
.mobile-nav > details > a,
.mobile-nav > details > a:visited,
.mobile-nav > details > a:hover {
    display: block;
    padding: 12px 18px 12px 32px;
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    min-height: 44px;
    box-sizing: border-box;
}

.mobile-nav > details > a:nth-child(odd) {
    background: #111;
}

.mobile-nav > details > a:nth-child(even) {
    background: #1c1c1c;
}

.mobile-nav > details > a:active {
    background: #0a1a1a;
    color: #AAFFFF;        /* matches desktop .menu hover color in mainmenu.css */
}

/* ===== Nested details (3rd level: Deprecated, subcategories) ===== */
.mobile-nav details details {
    border-bottom: none;
}

.mobile-nav details details > summary {
    display: block;
    padding: 12px 18px 12px 32px;
    color: #aaa;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
    background: #111;
}

.mobile-nav details details > summary::-webkit-details-marker {
    display: none;
}

.mobile-nav details details > summary::marker {
    display: none;
    content: '';
}

.mobile-nav details details > summary::after {
    content: '\25B6';
    float: right;
    font-size: 9px;
    line-height: 19px;
    color: #666;
    transition: transform 0.2s;
}

.mobile-nav details details[open] > summary::after {
    transform: rotate(90deg);
}

.mobile-nav details details > a,
.mobile-nav details details > a:visited,
.mobile-nav details details > a:hover {
    display: block;
    padding: 12px 18px 12px 48px;
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    min-height: 44px;
    box-sizing: border-box;
}

.mobile-nav details details > a:nth-child(odd) {
    background: #181818;
}

.mobile-nav details details > a:nth-child(even) {
    background: #222;
}

.mobile-nav details details > a:active {
    background: #0a1a1a;
    color: #AAFFFF;        /* matches desktop .menu hover color in mainmenu.css */
}

/* ===== Recent pages list (below nav categories) ===== */
.mobile-nav-recent {
    border-top: 1px solid #333;
    padding-top: 6px;
}

.mobile-nav-recent-heading {
    padding: 10px 18px 6px;
    color: #888;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-nav .mobile-nav-recent a,
.mobile-nav .mobile-nav-recent a:visited,
.mobile-nav .mobile-nav-recent a:hover {
    position: relative;
    display: block;
    padding: 8px 18px 8px 18px;
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
}

.mobile-nav .mobile-nav-recent a:active {
    background: #0a1a1a;
    color: #AAFFFF;
}

.mobile-nav-recent-title::before {
    content: '\25A0';
    font-size: 6px;
    position: absolute;
    left: 8px;
    margin-top: 5px;
    color: #666;
}


.mobile-nav-recent-title {
    display: block;
    font-size: 13px;
}

.mobile-nav-recent-date {
    display: block;
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

.mobile-nav-recent-more > summary {
    display: block;
    padding: 8px 18px;
    color: #666;
    font-size: 16px;
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
}

.mobile-nav-recent-more > summary::-webkit-details-marker {
    display: none;
}

.mobile-nav-recent-more > summary::marker {
    display: none;
    content: '';
}

.mobile-nav-recent-more > summary:active {
    color: #AAFFFF;
}

.mobile-nav-recent-more[open] > summary {
    display: none;
}


/*=============================================================================
  Wide layout (> 850px): hamburger overlays the desktop masthead
  NOTE: These are NOT inside a media query. They rely on the narrow-layout
  @media (max-width: 850px) block below to override them. Do not reorder
  these sections.
=============================================================================*/

/* Hamburger top position for the tall desktop masthead */
.hamburger {
    top: 10px;             /* above #sm which starts at top:62px */
}

/* Close button area: must match #masthead height (100px) so the border aligns
   with the menu bar's top border. box-sizing includes padding + border in height.
   padding-top positions the × button to match the hamburger's top:10px. */
.mobile-nav-close {
    height: 100px;        /* must match #masthead height in mainmenu.css */
    box-sizing: border-box;
    align-items: flex-start;
    padding-top: 10px;    /* must match .hamburger top */
}

/* Hide elements that crowd the desktop masthead at narrower widths */
@media (max-width: 950px) {
    .hide-narrow {
        display: none;
    }
}


/*=============================================================================
  Narrow layout (<= 850px): full mobile chrome replaces desktop
=============================================================================*/

@media (max-width: 850px) {
    /* ===== Hide desktop elements ===== */
    .menuminwidth0 {
        display: none !important;
    }

    #undergrad {
        display: none;
    }

    .upvotearrows {
        display: none;
    }

    /* ===== Mobile header bar ===== */
    /* Original image is 591x100. background-size scales it to fit; height must match.
       .mobile-nav-close must also use the same height/padding so the X button aligns
       with the hamburger. If you change height here, update:
         - background-size (maintain 591:100 ratio, e.g. 60px tall -> 355px wide)
         - .mobile-nav-close height */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 60px;                  /* must match background-size height */
        background: #000;
        background-image: url('/images/ossbox_header_background.png');
        background-repeat: no-repeat;
        background-size: 355px 60px;   /* 591:100 ratio scaled; height must match above */
        background-position: left top;
        padding: 0 12px;
        position: relative;
        z-index: 2;
    }

    /* ===== Undergrad gradient below header ===== */
    /* Height must match desktop #undergrad (10px in main.css) and the
       undergrad.png image height (3x10px) */
    .mobile-undergrad {
        display: block;
        height: 10px;          /* must match undergrad.png height and desktop #undergrad */
        background-image: url('/images/undergrad.png');
        background-repeat: repeat-x;
        width: 100%;
        position: relative;
        z-index: 2;
    }

    /* ===== Mobile menu bar (matches desktop .menu in mainmenu.css) ===== */
    /* Height, gradient, borders, and font all mirror the desktop .menu bar.
       If the desktop .menu styling changes in mainmenu.css, update these to match. */
    .mobile-menubar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 30px;          /* matches desktop .menu height in mainmenu.css */
        background: linear-gradient(to bottom, #111 0%, #1a1a1a 30%, #000 50%); /* from mainmenu.css .menu */
        border-top: 1px solid white;   /* from mainmenu.css .menu */
        border-bottom: 1px solid white; /* from mainmenu.css .menu */
        position: relative;
        z-index: 2;
    }

    .mobile-menubar .night-toggle {
        float: none;
        height: 30px;          /* must match .mobile-menubar height */
        line-height: 30px;     /* must match .mobile-menubar height */
        padding: 0 15px;
        font-size: 14px;       /* must match .mobile-menubar button font-size */
        color: #888;           /* must match .night-toggle color in night.css */
    }

    .mobile-menubar button {
        display: block;
        height: 30px;          /* must match .mobile-menubar height */
        line-height: 30px;     /* must match .mobile-menubar height */
        background: none;
        border: none;
        color: white;
        font-family: "Courier New", Courier, monospace; /* from mainmenu.css .menu */
        font-size: 14px;       /* from mainmenu.css .menu; must match .night-toggle font-size */
        cursor: pointer;
        padding: 0 25px;       /* matches desktop .menu ul padding-left in mainmenu.css */
    }

    .mobile-menubar button:active {
        color: #AAFFFF;        /* matches desktop .menu hover color in mainmenu.css */
    }

    /* ===== Hamburger: reposition over the mobile header ===== */
    .hamburger {
        top: 8px;              /* vertically center in 60px header: (60 - 44) / 2 */
    }

    /* ===== Close button: shorter to match mobile header, centered ===== */
    .mobile-nav-close {
        height: 60px;          /* must match .mobile-header height */
        align-items: center;
        padding-top: 0;
    }

    /* ===== Fluid content width ===== */
    #wrap {
        min-width: 0;          /* overrides 900px in main.css */
    }

    #content {
        width: auto;           /* overrides fixed 800px in main.css */
        max-width: 800px;      /* cap at desktop width so content matches when viewport is wide */
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* ===== Footer ===== */
    #footerwrapper {
        min-width: 0;          /* overrides 900px in main.css */
        position: relative;
        margin-top: 0;
        height: auto;
    }

    #footer {
        height: auto;
        padding: 15px 10px;
    }

    /* Kill the inline float:right on the IP/DNT div */
    #footer > div {
        float: none !important;
        margin-bottom: 8px;
    }

    #footer table {
        font-size: 9pt;
        margin-bottom: 4px;
    }

    /* Footer links: wrap gracefully */
    #footer a {
        white-space: nowrap;
    }

    /* ===== Home page ===== */
    /* Negative margins push the 3px borders (set in space-tear.css) just past
       the screen edge so they don't visually crowd the content */
    #homespaceship {
        width: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: -3px !important;  /* must match border-left width in space-tear.css */
        margin-right: -3px !important; /* must match border-right width in space-tear.css */
    }

    /* Home page elements that might overflow */
    .codeskillbox {
        width: auto;
        max-width: 100%;
    }

    .blocksection {
        width: auto;
        max-width: 100%;
    }

    .restable {
        width: auto;
        max-width: 100%;
    }

    /* Prevent horizontal overflow from wide elements */
    img {
        max-width: 100%;
        height: auto;
    }

    pre, code {
        overflow-x: auto;
        max-width: 100%;
    }

    .code {
        overflow-x: auto;
    }

    /* GitHub source boxes responsive */
    .github-source-box a {
        width: auto;
        max-width: 100%;
    }

    /* Contact table responsive */
    .contact-table td:first-child {
        white-space: normal;
    }
}

@media print {
    .hamburger {
        display: none;
    }
}