:root {
    --font-heading: 'InterVariable', sans-serif;
    --font-body: 'InterVariable', sans-serif;
    --font-code: 'FiraCode', monospace;
    --aside-w: 300px;
    --main-w: 70ch;
    --font-size-xxs: 0.5rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 0.9rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --line-height: 1.6;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
    --breakpoint-sm: 768px;
    --breakpoint-md: 900px;
    --breakpoint-lg: 1200px;
    --color-primary: #2F5D62;
    --color-secondary: #84A98C;
    --color-accent: #B00020;
    --color-accent-dark: #7B0014;
    --color-bg: #FFFFFF;
    --color-bg-alt: #F5F5F5;
    --text-primary: #212121;
    --text-on-bg: #212121;
    --text-on-primary: #FFFFFF;
    --color-link-highlight: #CFE3E0;
    --color-link-highlight-strong: #9CBDB7;
    --stn-shadow: 0 6px 20px color-mix(in srgb, var(--text-primary), transparent 90%);
    --stn-radius: 6px;
}

:root[data-theme="dark"] {
    --color-primary: #84A98C;
    --color-secondary: #CAD2C5;
    --color-accent: #FF6B6B;
    --color-accent-dark: #C92A2A;
    --color-bg: #121212;
    --color-bg-alt: #1E1E1E;
    --text-primary: #F0F0F0;
    --text-on-bg: #F0F0F0;
    --text-on-primary: #121212;
    --color-link-highlight: #3A6A65;
    --color-link-highlight-strong: #5C877F;
}

:root[data-theme="protanopia"] {
    --color-primary: #0072B2;
    --color-secondary: #E69F00;
    --color-accent: #56B4E9;
    --color-accent-dark: #005B99;
    --color-bg: #FFFFFF;
    --color-bg-alt: #F5F5F5;
    --text-on-bg: #212121;
    --text-on-primary: #FFFFFF;
    --color-link-highlight: #CCE0EE;
    --color-link-highlight-strong: #99C4E0;
}

:root[data-theme="deuteranopia"] {
    --color-primary: #009E73;
    --color-secondary: #D55E00;
    --color-accent: #CC79A7;
    --color-accent-dark: #882E72;
    --color-bg: #FFFFFF;
    --color-bg-alt: #F5F5F5;
    --text-on-bg: #212121;
    --text-on-primary: #FFFFFF;
    --color-link-highlight: #B8E6D8;
    --color-link-highlight-strong: #7ECFB3;
}

:root[data-theme="tritanopia"] {
    --color-primary: #D55E00;
    --color-secondary: #009E73;
    --color-accent: #CC79A7;
    --color-accent-dark: #882E72;
    --color-bg: #FFFFFF;
    --color-bg-alt: #F5F5F5;
    --text-on-bg: #212121;
    --text-on-primary: #FFFFFF;
    --color-link-highlight: #F0C9B3;
    --color-link-highlight-strong: #E69E72;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* padding: 0 var(--spacing-lg); */
    max-width: 100%;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--text-on-bg);
    background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: 1.2;
}

p {
    margin-bottom: var(--spacing-md);
}

.inlinetext, ol, li{
    text-align: justify;
}


main {
    max-width: 70ch;
    margin: 0 auto;
    padding: 0 0;
}

.emptxt {
    color: var(--color-primary);
    font-weight: 700;
}

.deslink {
    position: relative;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.deslink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.05em;
    width: 70%;
    /* slightly shorter at rest */
    height: 0.2em;
    background: var(--color-link-highlight);
    z-index: -1;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.deslink:hover::after,
.deslink:focus::after {
    width: 90%;
    /* expands fully */
    background: var(--color-link-highlight-strong);
    color: var(--color-accent);
    /* enriches in tone */
}

.butlink {
    cursor: pointer;
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    position: relative;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.butlink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.05em;
    width: 70%;
    /* slightly shorter at rest */
    height: 0.2em;
    background: var(--color-link-highlight);
    z-index: -1;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.butlink:hover::after,
.butlink:focus::after {
    width: 90%;
    /* expands fully */
    background: var(--color-link-highlight-strong);
    color: var(--color-accent);
    /* enriches in tone */
}

.imge-box,
.imge-box_sec {
    position: relative;
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* display: inline-block; */
    /* border: 1px solid var(--color-secondary); */
    border-radius: var(--stn-radius);
}

.banner {
    width: 70%;
    height: auto;
    margin-bottom: var(--spacing-md);
    display: block;
}

.banner_sec {
    width: 80%;
    height: auto;
    margin-bottom: var(--spacing-xs);
    display: block;
}

.imge-box img,
.imge-box_secimg {
    display: block;
    max-width: 100%;
    height: auto;
    /* border: 1px solid var(--color-primary); */
    border-radius: var(--stn-radius);
    /* box-shadow: var(--stn-shadow); */
}

.imge-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    border-bottom: 2px solid var(--color-accent-dark);
}

.imge-box_sec::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    border-bottom: 2px solid var(--color-accent-dark);
}

.caption-container,
.caption-container_sec {
    display: flex;
    justify-content: space-between;
    margin: var(--spacing-xs) auto 0;
    color: var(--text-on-bg);
}

.caption-container {
    width: 70%;
    font-size: var(--font-size-md);
}

.caption-container_sec {
    width: 80%;
    font-size: var(--font-size-xs);
}

.project-overview {
    margin-bottom: var(--spacing-xl);
}

.project-overview h4 {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.project-overview ul,
.project-overview ol {
    margin: var(--spacing-md) var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.project-overview ul li,
.project-overview ol li {
    margin-bottom: var(--spacing-xs);
}

.project-overview ul li {
    list-style-type: disc;
}

/* hidden text box */
/* ---------- Foldable Container ---------- */
.foldable-container {
    width: 100%;
    border: 2px solid var(--color-secondary);
    border-radius: var(--stn-radius);
    overflow: hidden;
    font-family: var(--font-body);
    background-color: var(--color-bg-alt);
    margin-bottom: var(--spacing-md);
}

/* Hide the checkbox */
.foldable-checkbox {
    display: none;
}

/* Label styling */
.foldable-label {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-secondary);
    color: var(--text-on-primary);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 600;
    user-select: none;
}

/* Arrow styling */
.foldable-arrow {
    display: inline-block;
    margin-right: var(--spacing-sm);
    transition: transform 0.3s ease;
}

/* Foldable content hidden by default */
.foldable-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--spacing-md);
    background-color: var(--color-bg-alt);
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.foldable-content .h3 {
    margin-top: var(--spacing-md);
}

/* Checkbox checked styles */
.foldable-checkbox:checked+.foldable-label {
    background-color: var(--color-accent);
    color: var(--text-on-primary);
}

.foldable-checkbox:checked+.foldable-label .foldable-arrow {
    transform: rotate(90deg);
}

.foldable-checkbox:checked~.foldable-content {
    max-height: none;
    /* adjust if needed */
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Inner menu styling */
.foldable-content .hmenu-hcol {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.foldable-content .hmenu-hcol li {
    margin-bottom: var(--spacing-xs);
}

.foldable-content .hmenu-hcol a {
    display: block;
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--stn-radius);
    background-color: var(--color-secondary);
    color: var(--text-on-primary);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.foldable-content .hmenu-hcol a:hover {
    background-color: var(--color-accent);
    color: var(--text-on-primary);
}

/* Strong label inside foldable menu */
.foldable-content .hmenu-hcol li strong {
    font-weight: 600;
    color: var(--color-accent-dark);
    margin-bottom: var(--spacing-xs);
    display: block;
}

/* hidden text box */
table {
    /* border: 1px solid var(--color-secondary); */
    border-radius: var(--stn-radius);
    overflow: auto;
}

.table-wrapper {
    overflow-x: auto;
    /* Horizontal scroll if table overflows */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on mobile */
}

/* Optional: make table take full width but allow scrolling */
.table-wrapper table {
    width: 100%;
    min-width: 600px;
    /* or any minimum width to prevent squishing */
    border-collapse: collapse;
}

th,
td {
    border: 1px solid var(--color-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: left;
}

th {
    background-color: var(--color-bg-alt);
    font-weight: 600;
}

.project-overview table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-md);
}

.project-overview th,
.project-overview td {
    border: 1px solid var(--color-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: left;
}

.project-overview th {
    background-color: var(--color-bg-alt);
    font-weight: 600;
}

.img-theme-selector {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    padding: 4px 6px;
    font-size: 12px;
    background: var(--color-bg-alt);
    color: var(--text-primary);
    border: 1px solid #ccc;
    border-radius: var(--stn-radius);
}

/* igem videoverse video */
.vdobox {
    width: calc (var(--main-w)- 20ch);
    height: 40ch;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.videoboxcaption {
    font-size: smaller;
    font-weight: 300;
    padding-left: 7ch;
    color: color-mix(in srgb, var(--text-primary) 80%, transparent);
}

.pdf-container {
    max-width: 100%;
    margin: auto;
}

.pdf-label {
    text-align: right;
}

.pdf-frame {
    width: 100%;
    height: 440px;
    border: none;
}

@media (max-width: 768px) {
    .pdf-frame {
        height: 300px;
    }
}

/* formula: */
.equation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.equation-expl {
    align-items: left;
    text-align: left;
}

.fraction {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.fraction .top {
    display: block;
    border-bottom: 1px solid;
    padding: 0 0.4em;
}

.fraction .bottom {
    display: block;
    padding: 0 0.4em;
}

sub {
    font-size: 0.9em;
    vertical-align: sub;
}

.formula-name {
    margin-top: 0.5em;
    font-style: italic;
    font-size: 1rem;
    color: #333;
}

/* ===========================================
   Footer (pfoot) – conflict-free footer block
   =========================================== */
#pfooter {
    width: 100%;
}

#pfooter.pfoot {
    --pfoot-max: 100%;
    --pfoot-gap: var(--spacing-sm);
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-secondary);
    color: var(--text-primary);
}

.pfoot-wrap {
    width: min(100%, var(--pfoot-max));
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

/* Top: logo + brand (centered) */
.pfoot-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pfoot-gap);
    text-align: center;
}

.pfoot-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.pfoot-brand {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    font-weight: 700;
}

/* Middle: links (wrap on small) */
.pfoot-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.4rem, 2vw, 1rem);
}

.pfoot-link {
    font-family: var(--font-heading);
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    text-decoration: none;
    color: var(--text-primary);
    padding: 0.2rem 0.4rem;
    border-radius: var(--stn-radius);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pfoot-link:hover,
.pfoot-link:focus-visible {
    /* background: var(--color-secondary); */
    color: var(--color-accent);
    outline: none;
}

/* Social (text only) */
.pfoot-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(0.9rem, 1.8vw, 1rem);
}

.pfoot-social-link {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.pfoot-social-link:hover,
.pfoot-social-link:focus-visible {
    color: var(--color-accent);
    outline: none;
}

.pfoot-dot {
    opacity: 0.6;
}

/* Separator */
.pfoot-sep {
    width: 60%;
    max-width: var(--pfoot-max);
    margin: 0 auto;
    border: 0;
    border-top: 1px solid var(--color-secondary);
    opacity: 0.6;
}

.pfoot-sep2 {
    width: 40%;
    max-width: var(--pfoot-max);
    margin: 0 auto;
    border: 0;
    border-top: 1px solid var(--color-secondary);
    opacity: 0.6;
}

/* Meta / license text */
.pfoot-meta {
    text-align: center;
    display: grid;
    gap: 0.4rem;
}

.pfoot-copy,
.pfoot-repo {
    margin: 0;
    font-size: clamp(0.8rem, 1.6vw, 0.95rem);
    line-height: 1.5;
}

.pfoot-credits,
.pfoot-repo-link {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.pfoot-credits:hover,
.pfoot-credits:focus-visible,
.pfoot-repo-link:hover,
.pfoot-repo-link:focus-visible {
    color: var(--color-accent);
    outline: none;
}