/* General Styles */
body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    scroll-behavior: smooth;
    transition: background-color 0.3s, color 0.3s;
}

:root {
    --bg: #fff8e6;
    --text: #222222;
    --accent: rgb(186, 159, 125);
    --general-text: #493e32;
    --neon: #00e5ff;
    /* cyan neon accent for lines */
    --neon-glow: rgba(0, 229, 255, 0.18);
    --line-thickness: 2px;
    /* Card colors used by panels/cards across the site */
    --card-bg: rgb(255, 250, 240);
    /* slightly warmer/beige than the page background */
    --card-text: var(--text);
}

/*≡==--==≡≡≡≡==--=≡≡*\
||      HEADER      ||
\*≡==---==≡≡==---==≡*/

/* Header-specific sizing (targets only the header navigation) */
header nav {
    padding: 0.5em 1.25em;
    /* larger header height, only for header */
}

/* Center the navigation links while keeping the logo on the left */
header nav { position: relative; }
header nav ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

header nav ul {
    gap: 2rem;
    /* more spacing between header items */
}

header nav a {
    display: inline-block;
    transition: transform 120ms ease;
    transform-origin: center;
    font-weight: 600;
    font-size: 1.3rem;
    /* larger link text only in header */
}

header nav a:hover {
    transform: scale(1.08);
}

header .logo svg {
    width: 36px;
    height: 36px;
}

header nav .logo:hover svg {
    transform: scale(1.08);
}

header #theme-toggle {
    font-size: 1.8em;
}

#theme-toggle {
    background: transparent;
    border: none;
    font-size: 1.8em;
    cursor: pointer;
}

/*≡==--==≡≡≡==--=≡≡*\
||       NAV       ||
\*≡==---==≡==---==≡*/

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6em 1.25em;
    background: var(--accent);
    color: white;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 1.5em;
    margin: 0;
    padding: 0;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}

/* Theme toggle SVG sizing and color */
#theme-toggle svg {
    width: 1.4em;
    height: 1.4em;
    display: block;
    color: inherit;
    fill: currentColor;
    color: white;
}

/* Logo in the nav (replaces textual site title) */
.logo {
    display: inline-flex;
    align-items: center;
    color: white;
    /* inherits nav text color */
    text-decoration: none;
}

/* Responsive: stack on smaller screens */
@media (max-width: 700px) {
    .hero-box {
        grid-template-columns: 1fr;
    }

    .description {
        order: 2;
    }

    .left {
        order: 1;
        align-items: center;
        /* keep centered on small screens too */
    }

    .avatar svg {
        width: 140px;
        height: 140px;
    }

    .avatar img,
    .avatar-img {
        width: 140px;
        height: 140px;
    }

    /* ensure cv-avatar crops nicely on small screens */
    .cv-avatar {
        height: 120px;
        object-position: center 18%;
        transform: scale(1.04);
    }

    /* On small screens keep nav flow normal */
    header nav ul { position: static; transform: none; }
}

footer {
    text-align: center;
    padding: 1em;
    background: var(--accent);
    color: white;
}

/*========================
  CV Layout and Sections
  Minimal, responsive two-column CV layout
========================*/
.two-column {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    padding: 0.6rem 1rem;
    align-items: start;
}

.left-column {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Remove large padding on the top home anchor which was set by news/news.css .section */
#home {
    padding: 0 !important;
    margin: 0 !important;
}

.cv-content {
    min-width: 0;
}

.cv-container.small {
    grid-template-columns: 1fr;
}

.cv-sidebar {
    background: var(--card-bg);
    color: var(--card-text);
    padding: 1rem;
    border-radius: 8px;
}

/* Ensure avatar scaling is clipped inside the sidebar */
.cv-sidebar { overflow: hidden; }

/* Sidebar scrolls normally (not sticky) */
.cv-sidebar {
    position: static;
}

.cv-avatar {
    width: 100%;
    display: block;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    /* Crop to torso+head: fixed height with cover fit and slight upward offset */
    height: 250px;
    object-fit: cover;
    object-position: center 18%;
    /* subtle zoom to focus torso+head */
    transform: scale(1.02);
    transform-origin: center 18%;
    transition: transform 220ms ease;
}

.cv-name { margin: 0; font-size: 1.25rem; }
.cv-role { margin: 0.2rem 0 0.6rem; color: var(--general-text); }
.name-row { display: flex; align-items: center; gap: 0.5rem; }
.cv-contact { display: inline-flex; gap: 0.5rem; align-items: center; }
.cv-contact a { color: inherit; text-decoration: none; font-weight:600; background: transparent; padding: 0; border-radius: 0; }
.cv-contact a:hover, .cv-contact a:focus { background: transparent; transform: translateY(-3px); box-shadow: none; }
.cv-contact a .icon { width: 1.05em; height: 1.05em; display: block; }

/* Small inline icons for sidebar links */
.cv-contact a .icon { width: 26px; height: 26px; vertical-align: middle; margin-right: 0.45rem; fill: currentColor; transition: transform 180ms ease, filter 180ms ease; }
.cv-contact a span { vertical-align: middle; }

/* Center the contact icons and hide the text labels visually but keep them for screen readers */
.cv-contact {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.45rem;
}

.cv-contact a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    border-radius: 6px;
}

/* Hover / focus pop-out effect */
.cv-contact a {
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.cv-contact a:hover,
.cv-contact a:focus {
    transform: translateY(-3px);
    background: rgba(0,0,0,0.04);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.cv-contact a:hover .icon,
.cv-contact a:focus .icon {
    transform: scale(1.14);
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.12));
}

.cv-contact a:focus-visible {
    outline: 3px solid rgba(186,159,125,0.18);
    outline-offset: 2px;
}

.cv-contact a span {
    /* visually hide but keep accessible text */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Override: remove any background/banners around inline contact icons and shrink them */
.name-row .cv-contact a {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.name-row .cv-contact a:hover,
.name-row .cv-contact a:focus {
    background: transparent !important;
    transform: translateY(-2px);
    box-shadow: none !important;
}
.name-row .cv-contact a .icon {
    width: 18px !important;
    height: 18px !important;
    margin-right: 0.45rem !important;
    vertical-align: middle !important;
}

/* ensure the icon row sits slightly higher next to the name */
.name-row .cv-contact {
    margin-top: 0rem !important;
}

/* Extra-high-specificity overrides to remove any leftover banner/backgrounds */
.cv-sidebar .name-row .cv-contact,
.cv-sidebar .name-row .cv-contact a,
.cv-sidebar .name-row .cv-contact a svg {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.cv-sidebar .name-row .cv-contact a {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.cv-sidebar .name-row .cv-contact a svg { display: inline-block; vertical-align: middle; }

/* Make inline contact icons use the site's accent color */
.name-row .cv-contact a {
    color: #7c6242 !important;
}
.name-row .cv-contact a svg,
.name-row .cv-contact a .icon {
    fill: currentColor !important;
    color: inherit !important;
}

/* Make news inside the sidebar match sidebar width and use a single-column layout */
.cv-sidebar .sidebar-news { margin-top: 1rem; }
.cv-sidebar .sidebar-news .news-title-scroller { padding: 0.25rem 0; }
.cv-sidebar .sidebar-news .news-list { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-top: 0.6rem; }
.cv-sidebar .sidebar-news .news-item { padding: 0.6rem; border-radius: 8px; }
.cv-sidebar .sidebar-news .news-item::before { width: 36px; height: 4px; }

/* Styling for news placed outside of the avatar box but still in the left column */
.left-column .outside-news { margin-top: 0.25rem; background: transparent; padding: 0; }
.left-column .outside-news .news-list { grid-template-columns: 1fr; gap: 0.6rem; }
.left-column .outside-news .news-item { background: var(--card-bg); padding: 0.12rem 0.32rem; border-radius: 8px; }

/* Ensure scroller fills sidebar/left-column width */
.left-column .news-title-scroller,
.cv-sidebar .news-title-scroller { width: 100%; }

.cv-main h2 { font-size: 1.25rem; margin-top: 0; }
.cv-main p, .cv-main ul { margin: 0.5rem 0 0; }

@media (max-width: 800px) {
    .two-column { grid-template-columns: 1fr; padding: 0.6rem; }
    .cv-sidebar { order: 2 }
    .cv-main { order: 1 }
}

/* Reduce default section padding for CV content to remove large whitespace */
.cv-content .section {
    padding: 0.6rem 0;
    text-align: left;
}

/* Projects list styled to match CV components (left border, spacing, clear titles) */
.projects-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
}
.projects-list li {
    margin: 0.6rem 0;
    padding-left: 0.9rem;
    border-left: var(--line-thickness) solid rgba(0,0,0,0.06);
}
.projects-list a {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--general-text);
    text-decoration: none;
}
.projects-list a:hover,
.projects-list a:focus {
    text-decoration: underline;
}
.projects-list p {
    margin-top: 0.18rem;
    font-size: 0.95rem;
    color: var(--text);
}

/* Print-friendly tweaks for CV */
@media print {
    nav, header, #theme-toggle, .news-title-scroller { display: none !important; }
    body { background: white; color: #000; }
    .cv-container { max-width: 720px; grid-template-columns: 1fr; }
}