/* common.css — shared styles for the whole site */
body {
    margin: 0;
    font-family: 'Times New Roman', Times, serif, sans-serif;
    min-height: 100vh;
    background-color: #0b1220;
    background-image:
        radial-gradient(900px 500px at 15% -10%, rgba(106,167,255,0.12), transparent 60%),
        radial-gradient(800px 500px at 90% 10%, rgba(124,108,255,0.1), transparent 60%),
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.32) 0 1.2px, transparent 1.2px),
        radial-gradient(circle at 68% 12%, rgba(106,167,255,0.34) 0 1.8px, transparent 1.8px),
        radial-gradient(circle at 32% 72%, rgba(124,108,255,0.3) 0 1.4px, transparent 1.4px),
        radial-gradient(circle at 82% 78%, rgba(255,255,255,0.22) 0 1px, transparent 1px),
        radial-gradient(circle at 48% 40%, rgba(148,163,184,0.25) 0 2px, transparent 2px),
        radial-gradient(circle at 5% 65%, rgba(186,230,253,0.22) 0 1.1px, transparent 1.1px);
    background-size:
        auto,
        auto,
        220px 260px,
        300px 240px,
        340px 360px,
        260px 220px,
        420px 380px,
        280px 320px;
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat;
    background-position:
        center,
        center,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0;
    animation: bubbleDrift 32s linear infinite;
}

@keyframes bubbleDrift {
    0% {
        background-position:
            center,
            center,
            0 0,
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }
    100% {
        background-position:
            center,
            center,
            220px 260px,
            -300px 240px,
            340px -360px,
            -260px -220px,
            420px 380px,
            -280px 320px;
    }
}

/* Brand color variables — used to integrate nav with logo bar */
:root{
    --brand-start: #6aa7ff;
    --brand-end: #7c6cff;
    --brand-gradient: linear-gradient(135deg,var(--brand-start),var(--brand-end));
    --nav-surface: linear-gradient(180deg, rgba(15,23,42,0.86), rgba(15,23,42,0.72));
}

/* header: basic layout — page-specific sizing should go in page CSS */
header {
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 4vw, 6rem);
    padding: 0 20px;
    width:100%;
    max-width: 100%;
    box-sizing:border-box;
    margin:0;
}

nav ul{
    list-style-type: none;
    margin:0;
    padding: 0;
    gap:20px;
    background: transparent;
    padding:8px 12px;
    border-radius: 6px;
    align-items: center;
    overflow: visible;
    display: flex;
    margin-top:0;
}

nav li {
    display: flex;
    align-items: center;
}

nav li a{
    display:block;
    color:#cbd5e1;
    text-align:center;
    text-decoration: none;
    padding:6px 10px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* shared hover (keeps contrast consistent) */
nav li a:hover{
    color: #ffffff;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
}

/* nav placeholder styles (nav sits at top of page in normal flow) */
/* nav sits at top of page in normal flow and is responsive */
#nav-placeholder > nav {
    position: static; /* keep nav in normal document flow */
    width: 100%;
    max-width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 12px 18px;
    background-color: transparent;
}

#nav-placeholder > nav ul {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 1.02rem;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* brand */
.nav-brand {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: #00a2ff;
    font-weight: 600;
}
.brand-logo {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    flex: 0 0 36px; /* prevent flex grow/shrink */
    background: var(--brand-gradient);
    color: #062a3a;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px; /* fixed font to avoid scaling */
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.brand-text { font-size: 1rem; letter-spacing: 0.4px; }

/* nav visual surface (glass + subtle shadow) */
#nav-placeholder > nav {
    background: var(--nav-surface);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 10px 28px rgba(2,10,20,0.5);
}

/* link underline animation */
#nav-placeholder > nav li a {
    position: relative;
    transition: color 180ms ease, transform 160ms ease;
}
#nav-placeholder > nav li a::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -6px;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1);
    border-radius: 2px;
    background: var(--brand-gradient);
}
#nav-placeholder > nav li a:hover::after,
#nav-placeholder > nav li a:focus::after {
    transform: scaleX(1);
}

#nav-placeholder > nav li a {
    display: flex;
    align-items: center;
    line-height: 1;
}

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

/* hamburger toggle (hidden on desktop) */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.nav-toggle:hover {
    color: #ffffff;
}
/* mobile: show toggle and make nav list vertical */
@media (max-width: 760px) {
    #nav-placeholder > nav {
        padding: 8px 12px;
    }
    .nav-toggle { 
        display: block;
        padding: 10px 12px;
        background: transparent;
    }
    #nav-placeholder > nav ul { order: 1; flex: 1 1 auto; }
    .nav-toggle { order: 2; margin-left: 12px; }
    /* when hidden (menu open) forcefully hide the toggle */
    .nav-toggle.hidden { display: none !important; }
    /* collapsed/animated menu container */
    #nav-placeholder > nav ul {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin-top: 8px;
        padding: 0;
        background: var(--nav-surface);
        border-radius: 6px;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 300ms ease, opacity 220ms ease, padding 200ms ease;
    }
    #nav-placeholder > nav ul.open {
        max-height: 640px;
        opacity: 1;
        padding: 8px 10px;
    }

    /* each item fills the row and shows a subtle divider */
    #nav-placeholder > nav li {
        width: 100%;
        margin: 0;
    }
    #nav-placeholder > nav li a {
        display: block;
        padding: 12px 14px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    /* remove divider from last item for a clean finish */
    #nav-placeholder > nav li:last-child a {
        border-bottom: none;
    }
}

/* Contact section styles */
.contact-section {
    max-width: 820px;
    margin: 1.6rem auto;
    padding: 12px 18px;
    color: rgba(255,255,255,0.9);
}
.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
}
.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-start);
    min-width: 20px;
}
.contact-icon svg { display: block; width: 20px; height: 20px; }
.contact-text a { color: #00a2ff; text-decoration: none; }
.contact-text a:hover { color: #ffffff; text-decoration: underline; }

/* Contact form inputs */
#contact-form { margin-top: 12px; max-width: 740px; }
#contact-form label { font-size: 0.95rem; color: rgba(255,255,255,0.9); }
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form .small-input,
#contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    margin: 6px 0 12px 0;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.95);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
}
#contact-form button {
    background: var(--brand-start);
    color: #04202b;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
}
#contact-form button:hover { filter: brightness(0.95); }

/* focus styles for accessibility/visibility */
#contact-form input:focus,
#contact-form textarea:focus,
#contact-form .small-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0,162,255,0.08), 0 4px 16px rgba(0,0,0,0.35);
    border-color: var(--brand-start);
}

/* ensure section headings contrast on darker backgrounds */
.about.contact-section h2,
.about.contact-section h3,
.about.contact-section .h3-topic {
    color: var(--brand-start);
}


/* Footer */
.site-footer{
    margin-top: 2.4rem;
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(2,8,15,0.85), rgba(2,8,15,0.8));
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    position: relative;
    z-index: 2;
}
.site-footer .site-footer-inner{
    max-width: 1000px;
    margin: 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 6px 0;
}
.site-footer a{ color: #00a2ff; text-decoration:none; }
.site-footer a:hover{ color:#ffffff; text-decoration:underline; }

.hidden{ display: none !important; }
/* Footer (vertical, line-by-line list) */
.footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; }
.footer-item{ display:flex; align-items:center; gap:10px; }
.footer-icon{ display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; color:var(--brand-start); }
.footer-copy{ opacity:0.9; font-size:0.95rem; }
.footer-sep{ opacity:0.6; margin: 0 6px; }