/* Base */
:root {
    --text: #111;
    --muted: #666;
    --link: #0366d6;
    --bg: #fff;
    --sidebar-width: 260px; /* slightly wider for better spacing */
    --gutter: 24px;
    --max-width: 1100px;    /* slightly wider for better readability */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font: clamp(15px, 1.6vw, 16px)/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
}

/* Layout */
.layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--gutter);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px;
}

/* Keep long words/URLs from causing horizontal scroll */
.content, .sidebar {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.content { min-width: 0; } /* allow text to wrap nicely */

/* Sidebar sticks to the viewport */
.sidebar {
    position: sticky;
    top: 16px;       /* space from top of viewport */
    max-height: calc(100vh - 32px); /* viewport height minus top/bottom padding */
    overflow-y: auto; /* lets TOC scroll independently if too tall */
    padding-right: var(--gutter);
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* Sidebar parts */
.site-title {
    margin: 0 0 8px 0;
    font-size: 22px;
    line-height: 1.2;
}

.toc-title, .links-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    line-height: 1.2;
}

.site-title a { color: inherit; text-decoration: none; }

.site-description {
    margin: 0 0 16px 0;
    color: var(--muted);
    font-size: 14px;
}

.social ul, .toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.social li, .toc li {
    margin: 6px 0;
    font-size: smaller;
}

.social a:hover, .toc a:hover { border-bottom-color: currentColor; }

.social a, .toc a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon {
    width: 1em;          /* match text height */
    height: 1em;         /* match text height */
    flex-shrink: 0;
    fill: currentColor;  /* inherit link color */
    color: #888;         /* grey */
    opacity: 0.5;        /* 50% opacity */
}

.social a:hover .icon,
.social a:focus-visible .icon {
    opacity: 0.75;
}

/* Content typography */
.content h1, .content h2, .content h3 {
    line-height: 1.25;
    margin: 1.2em 0 0.5em;
}
.content p, .content li { color: var(--text); }
.content a { color: var(--link); }

/* Blockquotes: add half a line of extra space */
.content blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 3px solid #eee;
}

/* Fix bullet positioning in blockquotes to keep them inside the box */
.content blockquote ul {
    padding-left: 2em;
    list-style-position: inside;
}

/* Add space between sentences/paragraphs */
.content blockquote br + br {
    margin-top: 1.5em; /* extra space between sentence blocks */
}

/* Lists */

/* Proper marker types for nested ULs */
.content ul {
    list-style: disc outside;
    padding-left: 3em;
}
.content ul ul { list-style: circle outside; }
.content ul ul ul { list-style: square outside; }

.content li { margin: 0.2em 0; }

/* Code */
code { background: #f6f8fa; padding: 0.15em 0.35em; border-radius: 4px; }

pre {
    background: #f6f8fa;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Three-column layout for the Technical Skills list */
.content h2#technical-skills + ul, .content h3#aws-skills + ul {
    columns: 3;              /* number of columns */
    -webkit-columns: 3;
    -moz-columns: 3;
    column-gap: 1.5em;         /* space between columns */
    list-style-position: inside;
}

.content h2#technical-skills + ul li,
.content h3#aws-skills + ul li {
    break-inside: avoid;     /* keep items from splitting between columns */
    padding-left: 0.5em;
}

/* For collapsible sections */
details.fold { border: 1px solid #e5e7eb; border-radius: 10px; margin: 16px 0; }
details.fold > summary { padding: 12px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▶"; transition: transform .2s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > :not(summary) { padding: 12px 14px; border-top: 1px solid #f1f5f9; }
details.fold summary h2 { margin: 0; font-size: 1.1rem; line-height: 1.2; }

/* Slightly larger tap target for sidebar links on touch */
@media (hover: none) {
    .social a, .toc a {
        padding: 6px 0;
    }
}

/* Responsive: stack on small screens */


@media (max-width: 1024px) {
    :root { --gutter: 16px; }
    .layout { padding: 16px; }
    .content h2#technical-skills + ul,
    .content h3#aws-skills + ul {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }
}

@media (max-width: 720px) {
    .layout {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: static;          /* no sticky */
        max-height: none;          /* let it expand naturally */
        overflow: visible;         /* one scroll area only */
        padding-right: 0;
        margin-bottom: 16px;
        border-bottom: 1px solid #eee;
        padding-bottom: 12px;
    }
}

@media (max-width: 640px) {
    :root { --gutter: 12px; }
    .layout { padding: 12px; }
    .icon { width: 0.95em; height: 0.95em; }
    .social a, .toc a { gap: 6px; }
    .content h2#technical-skills + ul,
    .content h3#aws-skills + ul {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
}