/* https://usgraphics.com/products/berkeley-mono */
@font-face {
    font-family: 'Berkeley Mono';
    src: url('../font/BerkeleyMono-Regular.woff2') format('woff2'),
        url('../font/BerkeleyMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('../font/BerkeleyMono-Bold.woff2') format('woff2'),
        url('../font/BerkeleyMono-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('../font/BerkeleyMono-Italic.woff2') format('woff2'),
        url('../font/BerkeleyMono-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('../font/BerkeleyMono-BoldItalic.woff2') format('woff2'),
        url('../font/BerkeleyMono-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* https://www.dafont.com/cynatar.font */
@font-face {
    font-family: 'Cynatar';
    src: url('../font/Cynatar.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Berkeley Mono', monospace;
    background-color: #000000;
    color: #FFD400;
    margin: 0;
    min-height: 100vh;
    /* Use flex column so footer can be pushed to the bottom when content is short */
    display: flex;
    flex-direction: column;
}

header {
    display: flex;
    align-items: flex-start;
    /* align to left side of the header column */
    justify-content: flex-start;
    flex-direction: column;
    /* stack the three titles */
    gap: 0.75rem;
    /* push header content roughly 1/3 from the left edge of the viewport */
    padding: 2rem 1rem 2rem 33.333vw;
}

/* Ensure the header title keeps the Cynatar pink color whether the
   markup is <h1><a> or <a><h1>. */
header h1,
header h1 a,
header a h1,
header>a h1 {
    /* two-tone misprint: yellow front, pink offset behind */
    color: #FFD400;
    /* front (visible) color */
    font-family: 'Cynatar', sans-serif;
    font-size: 3.5rem;
    line-height: 1;
    /* pink sharp offset first, then pink glows and dark base shadow */
    text-shadow:
        -4px 2px 0 #FF2D95,
        /* pink misprint offset behind */
        0 0 12px rgba(255, 45, 149, 0.95),
        0 0 32px rgba(255, 45, 149, 0.65),
        0 8px 40px rgba(0, 0, 0, 0.85);
    margin: 0;
}

/* (reverted pseudo-element misprint - using text-shadow instead) */

/* Make the header a link visually indistinguishable from plain text
   while preserving accessibility (focus outline for keyboard users).
   Handle both markup orders: <h1><a> and <a><h1>. */

/* When anchor is inside h1 (original approach) */
header h1 a,
/* When anchor wraps h1 (current markup) */
header>a,
header>a h1 {
    text-decoration: none;
    /* remove underline */
}

/* Ensure layout with avatar pseudo-element still works when h1 is child of anchor. */
header>a h1 {
    display: inline-block;
}

/* Visible keyboard focus for accessibility */
header h1 a:focus,
header>a:focus {
    outline: 3px solid rgba(255, 45, 149, 0.25);
    outline-offset: 4px;
    border-radius: 0px;
}

header h1::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 3.25rem;
    /* ~52px */
    height: 3.25rem;
    margin-right: 0.75rem;
    border-radius: 50%;
    background-image: url('../images/avatar.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 45, 149, 0.15);
}

/* Reduce avatar size on small screens to keep header readable */
@media (max-width: 420px) {
    header h1 {
        font-size: 2.25rem;
    }

    header h1::before {
        width: 2.1rem;
        height: 2.1rem;
        margin-right: 0.5rem;
    }
}

/* On small screens, revert to centered header and remove large left padding */
@media (max-width: 720px) {
    header {
        align-items: center;
        justify-content: center;
        padding-left: 1rem;
        /* simpler padding on small screens */
    }
}



footer {
    font-size: small;
    /* Keep footer at the bottom of the viewport when page content is short */
    margin-top: auto;
    padding: 1rem;
    text-align: center;
}

/* Ensure main content can grow and get some padding */
main {
    /* restrict measure to ~85 characters for readable lines, center on large screens */
    max-width: 85ch;
    margin: 0 auto;
    padding: 1rem;
    line-height: 1.6;
    box-sizing: border-box;
}

/* On narrow screens, allow main to use almost full width while keeping small gutters */
@media (max-width: 720px) {
    main {
        max-width: calc(100% - 2rem);
    }
}

/* ASCII-art button styles */
.ascii-btn {
    display: inline-block;
    line-height: 1;
    text-decoration: none;
    color: inherit;
    margin: 1rem 0;
}

.ascii-btn pre {
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-family: 'Berkeley Mono', Consolas, 'Lucida Console', 'DejaVu Sans Mono', 'Segoe UI Symbol', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
    font-size: 1rem;
    color: inherit;
    white-space: pre;
    /* preserve ASCII layout */
}

.ascii-btn:hover pre {
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-1px);
}

/* Screen-reader only helper */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


pre.code-block,
pre code,
code.block-inline {
    font-family: 'Berkeley Mono', Consolas, 'Lucida Console', 'DejaVu Sans Mono', 'Segoe UI Symbol', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
}

/* Block code container */
pre.code-block {
    /* center horizontally and constrain measure while allowing long lines to scroll */
    margin: 1rem auto;
    width: min(65ch, 100%);
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    color: #b61465;
    padding: 1rem;
    border-radius: 0;
    overflow: auto;
    box-shadow: 0 4px 18px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,45,149,0.06);
    line-height: 1.5;
    white-space: pre;
    word-break: normal;
    tab-size: 2;
}

/* Ensure <code> inside <pre> uses same styles and doesn't add extra spacing */
pre.code-block code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: 0.95rem;
}

/* Support narrow screens: reduce padding but keep readability */
@media (max-width: 420px) {
    pre.code-block {
        padding: 0.6rem;
        font-size: 0.9rem;
    }
}

/* Underline styling for small section headings used inline (Spec, Hardware, etc.) */
.section-title {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.25rem;
    /* keep the text color but use a custom underline color */
    text-decoration-color: #FFAA00; /* bright pink to match header accent */
}