/* quasi-global styles */

:root {
    /* colour palette (kept similar to previous theme) */
    --bg-col: #010012;
    --bg-pale-blue: #7bc2f7;
    --text-col: #fceae3;
    --border-col: #00adff;
    --light-text-col: #ff7b00;
    --alt-text-col: #0085f7;
    --hover-col: #ff4b00;
    --code-bg-col: #111111;

    --radius: 8px;
    --gap: 1rem;
    --max-width: 1100px;

    /* font system */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Special Elite', 'Courier New', monospace;
}

* { box-sizing: border-box; font-size: 100%; }

body {
    margin: 0;
    background: linear-gradient(180deg, var(--bg-col) 0%, #050018 70%);
    color: var(--text-col);
    font-family: var(--font-sans);
}


body {
    background-color: var(--bg-pale-blue);
    padding: 0;
}

body#food {
    font-size: 150%;
}

.grid {
    min-height: 100vh;
    color: var(--text-col);
    font-family: var(--font-sans);
    display: grid;
    grid-gap: var(--gap);
    padding: 2rem;
    max-width: var(--max-width);
    margin: 0 auto;
    align-content: start;
}

.navbar, .nav {
    position: relative;
    text-align: top;        
}

main {
    position: relative;
    padding-inline: 1vw;
}

.info {
font-family: var(--font-sans);
        font-size: 1.0vw;
        padding-left: 1vw;
        padding-right: 1vw;
        position: relative;
        overflow: hidden;
}

footer {
        font-size: 1.6vw;
}

header, main, .info, footer {
    margin-left: 1vw;
    margin-right: 1vw;
}
/*=========================================
for mobile: */
@media only screen and (max-width: 767px) {
.grid {
            -ms-grid-columns: 1fr;
                grid-template-columns: 1fr;
            -ms-grid-rows: 10vh 40vh 40vh 10vh;
                grid-template-rows: 50px 1fr 1fr 50px;
            grid-auto-rows: auto;
    }

    .navbar {
            grid-column: 1/-1;
            -ms-grid-row: 1;
            -ms-grid-row-span: 1;
            grid-row: 1/2;
    }

    main {
            grid-column: 1/-1;
            -ms-grid-row: 2;
            -ms-grid-row-span: 1;
            grid-row: 2/3;
    }

    .info {
            grid-column: 1/-1;
            -ms-grid-row: 3;
            -ms-grid-row-span: 1;
            grid-row: 3/4;
    }

    footer {
            grid-column: 1/-1;
            -ms-grid-row: 4;
            -ms-grid-row-span: 1;
            grid-row: 4/5;
    }
}
/*=========================================
for desktop:                                 */
@media only screen and (min-width: 768px) {
    .grid {
            -ms-grid-columns: 1fr 1fr 1fr;
                grid-template-columns: 1fr 1fr 1fr;
            -ms-grid-rows: auto 1fr auto;
                grid-template-rows: 10vh 1fr 8vh;
            grid-auto-rows: auto;
    }

    .navbar {
            grid-column: 1/-1;
            -ms-grid-row: 1;
            -ms-grid-row-span: 1;
            grid-row: 1/2;
    }

    main {
            -ms-grid-column: 1;
            -ms-grid-column-span: 2;
            grid-column: 1  /span 2;
            -ms-grid-row: 2;
            -ms-grid-row-span: 1;
            grid-row: 2/3;
    }

    .info {
            grid-column: 3/-1;
            -ms-grid-row: 2;
            -ms-grid-row-span: 1;
            grid-row: 2/3;
    }

    footer {
            grid-column: 1/-1;
            -ms-grid-row: 3;
            -ms-grid-row-span: 1;
            grid-row: 3/4;
    }
}


.main-nav {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    align-items: center;
}

.main-nav li{ margin: 0; }

.main-nav li a, main a {
    display: inline-block;
    color: var(--light-text-col);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s, transform 0.15s;
}

.main-nav li a:hover, main a:hover {
    color: var(--alt-text-col);
    transform: translateY(-2px);
    background: rgba(255,255,255,0.03);
}

.nav {
    font-size: 1vw;
}


.blog-article  h1, .info h1 {
        font-family: var(--font-mono);        
        font-size: clamp(1.6rem,3.2vw,2.2rem);
        font-weight:700;
        text-align: center;
        color: var(--alt-text-col);
} 

.blog-article h2, .info h2 {
        font-family: var(--font-mono);        
        font-size: 1.7vw;
        font-weight:600;
        text-align: center;
        color: var(--alt-text-col); 
}

.blog-title a {
        font-size: 2vw;
        color: var(--light-text-col);
}

.blog-article p {
    font-family: var(--font-sans);
    font-size: 1.0vw;
    text-align: left;
    padding-left: 2vw;
    padding-right: 2vw;
}

/* Recipe page consistent styling */
.recipe {
    max-width: 820px;
    margin: 1.5rem auto;
    padding: 1.5rem;
    background: rgba(255,255,255,0.01);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    line-height: 1.65;
}
.recipe h1 { font-family: var(--font-mono); font-size: clamp(1.6rem,3.2vw,2.2rem); color: var(--alt-text-col); margin-bottom: 0.25rem; }
.recipe h2, .recipe h3, .recipe h4 { font-family: var(--font-mono); color: var(--alt-text-col); margin-top: 1.25rem; }
.recipe h3 { font-size: 1.1rem; }
.recipe p, .recipe ul, .recipe li { font-size: 16px; line-height: 1.6; }
.recipe ul { padding-left: 1.2rem; }
.side-img-wrapper img { max-width: 360px; border-radius: 8px; display:block; margin: 0 auto; }
.blog-article, .shader, .info {
    overflow: visible;
}

.blog-article {
    background: rgba(255,255,255,0.02);
    padding: 2rem;
    border-radius: var(--radius);
    margin: 2rem 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.info {
    background: rgba(255,255,255,0.01);
    padding: 1.25rem;
    border-radius: var(--radius);
}

.blog-narrow {
    padding-left: 10vw;
    padding-right: 10vw;
    text-align: left;
}

/*  misc....                                                          */
.grid > *:not(.navbar) {
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: var(--radius);
    padding: 0.5rem;
    background: rgba(255,255,255,0.01);
}

.site-name {
    color: var(--alt-text-col);
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
    font-weight: 700;
}
.site-name a { color: inherit; text-decoration: none; }
.site-name:hover { color: var(--hover-col); transform: translateY(-2px); }


.navbar {
        padding-left: 2vw;
        padding-right: 2vw;
        margin-top: 0px;
        padding-top: 0;
        align-self: center;
        justify-items: center;   
}

.email {
        color: var(--light-text-col);
}

a {
        color: var(--light-text-col);
}

a:hover {
        color: var(--hover-col);
}

/* Per-page override: music page links should use heading blue */
body#music .blog-article a {
        color: var(--alt-text-col);
}

/* Layout helper: swap the main and aside columns so the image is on the left */
@media only screen and (min-width: 768px) {
    /* make the aside span the left two columns (same visual width as gallery images) */
    .grid.swap-sides .info {
            -ms-grid-column: 1;
            -ms-grid-column-span: 2;
            grid-column: 1  /span 2;
    }

    /* keep the main content in the right column */
    .grid.swap-sides main {
            -ms-grid-column: 3;
            grid-column: 3;
    }
} 

pre code {
        font-family: 'Source Code Pro', monospace;
        color: var(--alt-text-col); 
        display: block;
        padding: 1vmax;
        font-size: 1.3vw;
}
p code {
        font-family: 'Source Code Pro', monospace;
        color: var(--alt-text-col);
}

code.code-boxed {
        border: 0.1vmax solid var(--light-text-col);
        width: fit-content;
}

code.code-unboxed {
        padding: 0;
        font-size: 1.3vw;
}

code:hover {
    -webkit-filter: invert(100%);
            filter: invert(100%);        
}

.note {
        color: var(--light-text-col);
}

#side-image, #main-image {
        border: 0.1vmax solid white;
        -o-object-fit: cover;
           object-fit: cover;
        height: auto;
        width: 100%;
        max-width: 100%;
        display: inline-block;
        margin: auto;
        margin-top: 2vh;
}

#sug {
    text-decoration: underline;
}

.ifrm-left {
    float: left;
    margin: 1vw;
}

.ifrm-right {
    float: right;
    margin: 1vw;
}

.ifrm-centre {
    display: block;
    margin: auto;
}
.book-title {
    font-size: 1.3vw;
    color: var(--alt-text-col);
}

.float-right {
    float: right;
}
.big-link {
    font-family: var(--font-sans);
    font-size: 2.8vw;
}

.gallery {
    position: relative;
}

.gallery img {
    position: absolute;
    display: block;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width:100%;
    height: auto;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Font Awesome styling for social icons */
.social-icon { color: var(--text-col); }
ul.social-icons { margin-top: 0.5rem; padding: 0; list-style: none; }
.social-icons li { display: inline-block; margin-right: 0.5rem; }
.social-icons a { color: var(--text-col); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: rgba(255,255,255,0.02); transition: transform 0.12s, background 0.18s; font-size: 0.9rem; }
.social-icons a:hover { transform: translateY(-2px); background: rgba(255,255,255,0.04); }

/* Hide Shadertoy links (keeps markup simple but removes the icon from UI) */
a[href*="shadertoy.com"] { display: none !important; }
.social-icons a:hover { transform: translateY(-2px); background: rgba(255,255,255,0.04); }
.social-icons a:hover { transform: translateY(-3px); background: rgba(255,255,255,0.04); }
.icon-st img { height: 20px; width: auto; display: block; }
.icon-st img {
    height: 2vw;
    max-width: 100%;    
}

/* Additions August 2019 */

strong {
    color: var(--alt-text-col);
}

.line-under {
    padding-bottom: 1vw;
    border-bottom: 2px outset var(--alt-text-col); 
    border-radius: none;
}

.side-img-wrapper {
    text-align: center;
    overflow: hidden;
}

/* Shader placeholder styling (replaces embedded iframes) */
.shader-placeholder {
    display: inline-block;
    margin: 1vw;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.03);
    text-align: center;
}
.shader-placeholder img { width: 100%; height: auto; display: block; }
.shader-placeholder p { margin: 0.5rem 0; color: var(--light-text-col); font-weight: 600; }

/* Homepage / hero diagonal links */
.home-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.diagonal-links { list-style: none; padding: 0; margin: 0; position: absolute; top: 12vh; left: 4vw; }
.diagonal-links li { margin: clamp(0.5rem,3vh,1.5rem) 0; margin-left: calc(var(--i) * 18vw); font-size: clamp(1.8rem,4.5vw,4rem); transform: rotate(-6deg); }
.diagonal-links a { color: var(--alt-text-col); text-decoration: none; font-weight: 700; letter-spacing: 0.02em; font-family: var(--font-mono); font-size: clamp(1.8rem,4.5vw,4rem); }

.intro-fade {
     max-width: min(70ch, var(--max-width));
     margin: auto;
     text-align: left;
     opacity: 0;
     animation: fadeIn 4s ease-in-out 2s forwards;
     color: var(--light-text-col);
     font-family: var(--font-sans);
     font-size: clamp(0.95rem,1.2vw,1.1rem);
     padding: 1rem;
     background: rgba(255,255,255,0.02);
     border-radius: var(--radius);
     border: 1px solid rgba(255,255,255,0.03);
     position: absolute;
     top: 14vh;
     right: 6vw;
     width: clamp(220px, 35vw, 440px);
 }

/* Collapsible Technical Info styling */
.technical-info { max-width: 40ch;
     background: rgba(255,255,255,0.02); padding: 0.8rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.03); }
.technical-info summary { list-style: none; cursor: pointer; font-family: var(--font-mono); color: var(--alt-text-col); font-weight: 600; }
.technical-info summary::-webkit-details-marker { display:none; }
.technical-info .technical-body { margin-top: 0.6rem; font-size: 0.95rem; color: var(--text-col); }

/* Inline Technical Info expansion for homepage */
.info .more-link { color: var(--alt-text-col); font-weight: 600; text-decoration: none; }
.info .full-info { margin-top: 0.6rem; font-size: 0.95rem; color: var(--text-col); background: rgba(255,255,255,0.01); padding: 0.8rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.02); }
.info .full-info p { margin: 0.4rem 0; }
.info .full-info ul { margin-left: 1.2rem; }

/* Compact link styling for pages where recipe/list links should be smaller */
.blog-article.compact-links h2 a { font-size: 1rem; font-family: var(--font-mono); font-weight: 600; color: var(--alt-text-col); text-decoration: none; }

@keyframes fadeIn { to { opacity: 1; transform: none; } }

/* responsive adjustments for home hero */
@media (max-width: 768px) {
  .diagonal-links { position: static; display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1rem; top: auto; left: auto; }
  .diagonal-links li { margin-left: 0; transform: rotate(0); font-size: 1.6rem; }
  .intro-fade { margin-top: 1rem; }
}

/* Modernize header/navigation */
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 2rem; background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent); }
.main-nav li { display: inline-block; margin-left: 1rem; }
.main-nav a { color: var(--text-col); padding: 0.25rem 0.5rem; border-radius: 6px; transition: background-color 0.2s, transform 0.15s; }
.main-nav a:hover { background: rgba(255,255,255,0.03); color: var(--alt-text-col); transform: translateY(-2px); }

footer.footer { padding: 1.25rem 2rem; background: rgba(0,0,0,0.05); }

/* small tweaks to site name */
.site-name { font-family: var(--font-sans); font-size: 1.6rem; color: var(--alt-text-col); font-weight: 700; }