/* ==============================================================
   Global reset & typography
   ============================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
}
body {
    background: #fafafa;
    color: #222;
}

/* ==============================================================
   Layout containers
   ============================================================== */
.site-header,
.site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
}
.site-header h1 {
    margin-bottom: 0.3rem;
    font-weight: 600;
}
.tagline {
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 0.8rem;
}
.site-nav a {
    color: #fff;
    margin: 0 0.8rem;
    text-decoration: none;
    font-weight: 500;
}
.site-nav a:hover { text-decoration: underline; }

.site-main {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1rem;
}
.section {
    margin-bottom: 3rem;
}
.section h2 {
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.3rem;
    margin-bottom: 1rem;
}

/* ==============================================================
   Job cards (work history)
   ============================================================== */
.job {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.job h3 { margin-top: 0; margin-bottom: 0.6rem; }
.job h4 {
    margin-top: 0.8rem;
    margin-bottom: 0.4rem;
    color: #555;
}

/* ==============================================================
   Lists & columns
   ============================================================== */
ul {
    margin-left: 1.2rem;
    margin-bottom: 0.8rem;
}
.list-columns {
    column-count: 2;
    column-gap: 2rem;
}
@media (max-width: 600px) {
    .list-columns { column-count: 1; }
}

/* ==============================================================
   Links & buttons
   ============================================================== */
a {
    color: #0066cc;
    text-decoration: none;
}
a:hover { text-decoration: underline; }
.download-link {
    display: inline-block;
    margin-top: 0.4rem;
    font-weight: 500;
}

/* ==============================================================
   Footer
   ============================================================== */
.site-footer p {
    font-size: 0.9rem;
}

/* ==============================================================
   Small responsive tweaks
   ============================================================== */
@media (max-width: 768px) {
    .site-nav a { display: block; margin: 0.4rem 0; }
}

/* -------------------------------------------------------------
    Basic page layout & typography
    ------------------------------------------------------------- */
body{
    font-family:'Inter',system-ui,sans-serif;
    line-height:1.6;
    margin:0;
    background:#fafafa;
    color:#222;
}
.wrapper{
    max-width:900px;
    margin:2rem auto;
    padding:0 1rem;
}
h1{font-size:2rem;margin-bottom:.5rem;}
h2{border-bottom:2px solid #ddd;padding-bottom:.3rem;margin-top:2rem;}
h3{margin-top:1.2rem;}

p{margin-top: 1em; margin-bottom: 1em;}

/* -------------------------------------------------------------
    Collapsible sections
    ------------------------------------------------------------- */
details{
    background:#fff;
    border:1px solid #e0e0e0;
    border-radius:6px;
    margin-bottom:1rem;
    padding:.8rem 1rem;
    box-shadow:0 2px 4px rgba(0,0,0,.03);
}
summary{
    font-weight:600;
    cursor:pointer;
    outline:none;
}
/* hide default triangle & replace with a nicer one */
summary::-webkit-details-marker{display:none;}
summary::before{
    display:inline-block;
    margin-right:.5rem;
    margin-top: .5rem;
    transition:transform .2s;
}
details[open] summary::before{
    transform:rotate(90deg);
}

/* -------------------------------------------------------------
    Lists & links
    ------------------------------------------------------------- */
ul{margin-left:1.5rem;margin-bottom:.8rem;}
a{
    color:#0066cc;
    text-decoration:none;
}
a:hover{ text-decoration:underline; }

/* -------------------------------------------------------------
   METADATA CARD for posts)
   ------------------------------------------------------------- */
.meta-card {
    background:    #f8f9fa;            /* light gray background */
    border:        1px solid #e0e0e0;  /* subtle outline */
    border-radius: 6px;
    padding:       1rem 1.2rem;
    max-width:     720px;             /* keep it narrower than the article */
    margin:        0 auto 2rem;       /* centre + space below */
    font-size:     0.94rem;
    line-height:   1.45;
    color:         #333;
}

/* Title above the card */
.meta-card .meta-title {
    font-size:   1rem;
    font-weight: 600;
    color:       #0055b8;            /* same hue as links */
    margin:      0 0 0.6rem;
}

/* Definition list styling */
.meta-card dl {
    display: grid;
    grid-template-columns: minmax(120px, 150px) 1fr;
    gap: 0.4rem 1rem;
}

/* Term (key) */
.meta-card dt {
    font-weight: 600;
    color:       #0055b8;            /* accent colour */
}

/* Definition (value) */
.meta-card dd {
    margin: 0;                       /* remove default indent */
}

/* Inline lists for tags / categories */
.meta-card .tag-list,
.meta-card .cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Individual tag / category pills */
.meta-card .tag-list li,
.meta-card .cat-list li {
    background:    #e6f0ff;          /* light blue pill background */
    color:         #004099;
    padding:       0.2rem 0.5rem;
    border-radius: 12px;
    font-size:     0.85rem;
}

/* Hover effect for pills (optional) */
.meta-card .tag-list li:hover,
.meta-card .cat-list li:hover {
    background: #cce0ff;
}

/* Responsive tweak – stack the definition list on very narrow screens */
@media (max-width: 460px) {
    .meta-card dl {
        grid-template-columns: 1fr;
    }
    .meta-card dt {
        margin-bottom: 0.2rem;
    }
}


/* ==============================================================
   Blog‑post specific styles
   ============================================================== */

/* -----------------------------------------------------------------
   Container for the article 
   ----------------------------------------------------------------- */
.article {
    max-width: 800px;          /* a little narrower than the site wrapper */
    margin: 2rem auto;
    padding: 0 1rem;
}

/* -----------------------------------------------------------------
   Title & front‑matter (the <pre> block)
   ----------------------------------------------------------------- */
.article > h1 {
    font-size: 2.2rem;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}
.article > pre {
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 0.94rem;
    margin-bottom: 2rem;
}

/* -----------------------------------------------------------------
   Body copy – headings, paragraphs, blockquotes, lists
   ----------------------------------------------------------------- */
.article p {
    margin-top: 1em;
    margin-bottom: 1em;
}
.article h2 {
    font-size: 1.75rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: .3rem;
    margin-top: 2rem;
    margin-bottom: .8rem;
}
.article h3 {
    font-size: 1.45rem;
    margin-top: 1.6rem;
    margin-bottom: .5rem;
}
.article blockquote {
    border-left: .4rem solid #0066cc;
    background: #f9fbff;
    padding: .8rem 1.2rem;
    margin: 1.2rem 0;
    font-style: italic;
    color: #444;
}
.article ul,
.article ol {
    margin-left: 1.8rem;
    margin-bottom: .8rem;
}
.article li {
    margin-top: .4rem;
}

/* -----------------------------------------------------------------
   Ordered list inside the blockquote (the instruction list)
   ----------------------------------------------------------------- */
.article blockquote ol {
    margin-left: 1.2rem;
}
.article blockquote li {
    margin-top: .6rem;
}

/* -----------------------------------------------------------------
   Links – keep the same colour as the global a rule, just add a bit
   of spacing for readability inside paragraphs.
   ----------------------------------------------------------------- */
.article a {
    word-break: break-word;      /* prevents long URLs from breaking layout */
}

/* -----------------------------------------------------------------
   Responsive tweaks – make sure the article scales nicely on small
   screens 
   ----------------------------------------------------------------- */
@media (max-width: 600px) {
    .article {
        padding: 0 .5rem;
    }
    .article > h1 {
        font-size: 1.8rem;
    }
    .article h2 {
        font-size: 1.55rem;
    }
}


@media(max-width:600px){
    .wrapper{padding:0 .5rem;}
}