/* Portfolio styling for Dylano van Beek
   -------------------------------------------------
   Clean, modern, spacious. Works in light + dark mode.
*/

:root {
    /* Accent: blue/purple */
    --portfolio-accent: #6d5efc;
    --portfolio-accent-2: #22d3ee;

    --portfolio-ink: var(--bs-body-color);

    /* Subtle surfaces */
    --portfolio-surface: color-mix(in srgb, var(--bs-body-bg) 92%, #000 8%);
    --portfolio-surface-2: color-mix(in srgb, var(--bs-body-bg) 96%, #000 4%);

    /* Glass vibe */
    --portfolio-glass-bg: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
    --portfolio-glass-border: color-mix(in srgb, var(--bs-body-color) 10%, transparent);

    /* Page gradients */
    --portfolio-page-bg:
        radial-gradient(900px 420px at 12% 12%, color-mix(in srgb, var(--portfolio-accent) 35%, transparent) 0%, transparent 60%),
        radial-gradient(760px 420px at 88% 18%, color-mix(in srgb, var(--portfolio-accent-2) 24%, transparent) 0%, transparent 60%),
        radial-gradient(950px 520px at 50% 90%, color-mix(in srgb, var(--bs-primary) 14%, transparent) 0%, transparent 60%);

    --portfolio-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    --portfolio-shadow-hover: 0 18px 55px rgba(0, 0, 0, 0.12);
}

[data-bs-theme="dark"] {
    --portfolio-surface: color-mix(in srgb, var(--bs-body-bg) 88%, #fff 12%);
    --portfolio-surface-2: color-mix(in srgb, var(--bs-body-bg) 92%, #fff 8%);
    --portfolio-glass-bg: color-mix(in srgb, #0b1220 62%, transparent);
    --portfolio-glass-border: rgba(255, 255, 255, 0.12);

    --portfolio-shadow: 0 16px 60px rgba(0, 0, 0, 0.35);
    --portfolio-shadow-hover: 0 20px 70px rgba(0, 0, 0, 0.45);
}

/* Global page background */
body {
    background-image: var(--portfolio-page-bg);
    background-attachment: fixed;
}

/* Layout overrides for portfolio landing */
.portfolio-main {
    max-width: 1080px;
}

/* Better rhythm */
.portfolio-section {
    padding: 5.25rem 0;
}

@media (max-width: 767px) {
    .portfolio-section {
        padding: 3.5rem 0;
    }
}

/* Hero */
.portfolio-hero {
    padding-top: 1.5rem;
}

.portfolio-accent-bar {
    background: linear-gradient(90deg, color-mix(in srgb, var(--portfolio-accent) 92%, #000 8%) 0%, var(--portfolio-accent-2) 100%);
    color: #0b0d0f;
    border: none;
}

.portfolio-brand {
    font-weight: 850;
    letter-spacing: -0.03em;
}

.handwritten {
    font-family: "Bradley Hand", "Comic Sans MS", "Marker Felt", cursive;
    letter-spacing: 0.01em;
}

.hero-card {
    background: var(--portfolio-glass-bg);
    border: 1px solid var(--portfolio-glass-border);
    border-radius: 1.35rem;
    box-shadow: var(--portfolio-shadow);
    backdrop-filter: blur(10px);
}

.hero-avatar {
    width: 240px;
    max-width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 1.35rem;
    object-fit: cover;
    border: none;
    background: var(--portfolio-surface);
}

.badges-row .badge {
    border: none;
    background: color-mix(in srgb, var(--portfolio-surface) 75%, transparent);
    color: var(--portfolio-ink);
}

/* Buttons */
.btn {
    border-radius: 999px;
    font-weight: 750;
    letter-spacing: 0.005em;
}

/* Use a softer radius for long-label buttons */
.btn-soft-pill {
    border-radius: 16px !important;
}

.btn-lg {
    padding: 0.8rem 1.25rem;
}

.btn-sm {
    padding: 0.45rem 0.8rem;
}

.btn-accent {
    /* premium gradient + readable text */
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--portfolio-accent) 92%, #000 8%) 0%,
        color-mix(in srgb, var(--portfolio-accent-2) 92%, #000 8%) 100%
    );
    border: none;
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    box-shadow:
        0 14px 34px color-mix(in srgb, var(--portfolio-accent) 22%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

.btn-accent:hover {
    color: #fff !important;
    filter: saturate(1.05) brightness(1.02);
    transform: translateY(-1px);
    box-shadow:
        0 18px 42px color-mix(in srgb, var(--portfolio-accent) 26%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-accent:active {
    color: #fff !important;
    transform: translateY(0);
    filter: brightness(0.98);
}

.btn-accent:focus,
.btn-accent:visited {
    color: #fff !important;
}

.btn-accent:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 0.25rem color-mix(in srgb, var(--portfolio-accent) 35%, transparent),
        0 14px 34px color-mix(in srgb, var(--portfolio-accent) 22%, transparent);
}

/* Header uses the same accent button, but keep it compact */
.modern-header .btn.btn-accent {
    padding: 0.55rem 1rem;
}

/* Secondary CTA: clean glass button */
.btn-cta-secondary {
    background: color-mix(in srgb, var(--portfolio-glass-bg) 78%, transparent);
    color: var(--bs-body-color);
    border: 1px solid var(--portfolio-glass-border);
    font-weight: 750;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

.btn-cta-secondary:hover {
    background: color-mix(in srgb, var(--portfolio-surface) 55%, transparent);
    border-color: color-mix(in srgb, var(--portfolio-accent) 22%, var(--portfolio-glass-border));
    color: var(--bs-body-color);
}

/* Override Bootstrap outlines to match the theme */
.btn-outline-secondary,
.btn-outline-primary {
    background: color-mix(in srgb, var(--portfolio-glass-bg) 70%, transparent);
    border: 1px solid var(--portfolio-glass-border);
    color: var(--bs-body-color);
    font-weight: 750;
    backdrop-filter: blur(10px);
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover {
    background: color-mix(in srgb, var(--portfolio-surface) 55%, transparent);
    border-color: color-mix(in srgb, var(--portfolio-accent) 22%, var(--portfolio-glass-border));
    color: var(--bs-body-color);
    transform: translateY(-1px);
}

.btn-outline-secondary:active,
.btn-outline-primary:active {
    transform: translateY(0);
}

/* ensure accent stays readable in dark mode too */
[data-bs-theme="dark"] .btn-accent {
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Cards (clean: almost no borders) */
.portfolio-card {
    background: var(--portfolio-glass-bg);
    border: 1px solid var(--portfolio-glass-border);
    border-radius: 1.35rem;
    box-shadow: var(--portfolio-shadow);
    backdrop-filter: blur(10px);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.portfolio-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--portfolio-shadow-hover);
    border-color: color-mix(in srgb, var(--portfolio-accent) 25%, var(--portfolio-glass-border));
}

/* Chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    border: none;
    background: color-mix(in srgb, var(--portfolio-surface) 70%, transparent);
    font-size: 0.85rem;
}

/* Navigation (unique, clean) */
.modern-header {
    background: color-mix(in srgb, var(--bs-body-bg) 72%, transparent);
    border-bottom: 1px solid var(--portfolio-glass-border);
    box-shadow: none;
    backdrop-filter: blur(12px);
}

.modern-header .nav-link {
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.navbar .nav-link.portfolio-link {
    opacity: 0.9;
}

.navbar .nav-link.portfolio-link:hover {
    background: color-mix(in srgb, var(--portfolio-surface) 60%, transparent);
    transform: none;
}

.navbar .nav-link.portfolio-link.active {
    background: color-mix(in srgb, var(--portfolio-accent) 18%, transparent);
    border: none;
    opacity: 1;
}

/* Active state for page routes as well */
body.route-projects .navbar .nav-link.portfolio-link[href$="/projects"],
body.route-about .navbar .nav-link.portfolio-link[href$="/about"] {
    background: color-mix(in srgb, var(--portfolio-accent) 18%, transparent);
    opacity: 1;
}

/* Footer */
footer.portfolio-footer {
    width: 100%;
    position: relative;
    /* extra ruimte zodat footer niet abrupt tegen content aan zit */
    margin-top: 3.5rem;
}

/* subtiele overgang van pagina naar footer (geen hard blok) */
footer.portfolio-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -48px;
    height: 48px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--bs-body-bg) 10%, transparent) 45%,
        color-mix(in srgb, var(--bs-body-bg) 18%, transparent) 100%
    );
}

footer.portfolio-footer > .container {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
}

.portfolio-footer {
    border-top: 1px solid var(--portfolio-glass-border);
    /* laat de body-gradient doorlopen; geen aparte footer 'slab' */
    background: transparent;
    backdrop-filter: none;
}

/* Footer version pill */
.footer-version {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--portfolio-glass-border);
    background: color-mix(in srgb, var(--portfolio-surface) 60%, transparent);
    font-size: 0.85rem;
    color: var(--bs-body-color);
}

.footer-version .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--portfolio-accent) 0%, var(--portfolio-accent-2) 100%);
}

/* Live pill used in hero bar */
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--portfolio-glass-border);
    background: color-mix(in srgb, var(--portfolio-surface) 60%, transparent);
    font-size: 0.8rem;
    color: var(--bs-body-color);
}

.live-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--portfolio-accent) 0%, var(--portfolio-accent-2) 100%);
}

/* Soft panel (replace inline backgrounds for small callouts) */
.portfolio-panel {
    background: color-mix(in srgb, var(--portfolio-glass-bg) 88%, transparent);
    border: 1px solid var(--portfolio-glass-border);
    border-radius: 1.35rem;
    box-shadow: var(--portfolio-shadow);
    backdrop-filter: blur(10px);
}

/* Better spacing util (Bootstrap has mt-5, maar niet mt-6) */
.mt-6 { margin-top: 4.25rem !important; }

/* Accessibility: anchor offset for fixed header */
.portfolio-section[id] {
    scroll-margin-top: 110px;
}

/* Footer nav active */
.footer-nav .nav-link {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    opacity: 0.86;
    transition: opacity 150ms ease, color 150ms ease;
}

.footer-nav .nav-link:hover {
    opacity: 1;
}

.footer-nav .nav-link.is-route-active,
.footer-nav .nav-link.is-active {
    opacity: 1;
    font-weight: 800;
    color: var(--bs-body-color) !important;
}

.footer-nav .nav-link.is-route-active::before,
.footer-nav .nav-link.is-active::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--portfolio-accent) 0%, var(--portfolio-accent-2) 100%);
}

/* Small utility for compact pills inside hero bar */
.portfolio-accent-bar .footer-version {
    font-size: 0.8rem;
    border-radius: 999px;
}