/* Custom overrides for Marcel Seidel Portfolio (Noir template) */

:root {
    --primary-color: #2E6FEA;
}

/* Only .body has overflow-x:hidden in the base theme; <html> itself doesn't,
   so a few px of Bootstrap negative-margin bleed (nav row, off-canvas menu)
   can still create a page-level horizontal scrollbar on mobile. Belt and
   suspenders. */
html {
    overflow-x: hidden;
}

/* text-based logo (template ships a placeholder image logo) */
.site-logo-text a {
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 22px;
    color: var(--lighter-color);
    letter-spacing: 0.5px;
}
.site-logo-text a span {
    color: var(--primary-color);
}

/* hero brand name: ".Sdl" as blue accent, matching the logo */
.hero-content h2 span {
    color: var(--primary-color);
}

/* Silk WebGL background (experimental) — fixed behind the entire page,
   visible through every section while scrolling, not just the hero. */
.silk-bg-wrap {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Force its own GPU compositing layer so mobile browsers don't repaint/
       flicker it while the address bar shows/hides during scroll. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}
.main-hero-area,
.services-area,
.projects-area,
.about-area,
.contact-area,
.company-design-area,
.main-footer {
    background: transparent !important;
}

/* Template positions the hero image as a decorative element: absolute,
   right:10%, z-index:-9 — meant to peek out behind the heading. With a real
   portrait that hides the person almost entirely, and gets worse on wide
   screens where the 130px heading grows and covers even more of it.
   Make it a normal, always-visible foreground element instead. */
.hero-content img {
    position: static;
    z-index: 1;
    display: block;
    margin: 0 auto 40px;
    width: 180px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* portfolio placeholder badge */
.portfolio-box {
    position: relative;
}
.placeholder-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: var(--primary-color);
    color: #fff;
    font-family: var(--title-font);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
}

/* about highlights (replaces template's numeric stat counters we don't have real data for) */
.about-highlights {
    margin-top: 40px;
}
.about-highlight-item h5 {
    color: var(--lighter-color);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.about-highlight-item p {
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.6em;
}

/* contact content portrait: template renders it large/decorative, keep it modest and rectangular */
.contact-content-part img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 20px;
}

/* Live project preview card: an embedded, real copy of a built site (same
   origin, see assets/showcases/) rendered at a fixed desktop viewport
   (1440x900) and scaled down with CSS to fit the card. Kept at full desktop
   size internally so it always shows the real desktop layout, never the
   embed's own mobile breakpoint. On hover, live-preview.js drives real
   scrolling inside the iframe (contentWindow.scrollTo) so the embedded
   site's own scroll-reveal animations fire correctly - a plain CSS
   transform/translate on the iframe box can't do that for content that's
   gated behind IntersectionObserver. */
.portfolio-box.live-preview-box {
    display: block;
    aspect-ratio: 16 / 10;
    background: #08080c;
}

.live-preview-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.live-preview-viewport iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 900px;
    border: 0;
    background: #08080c;
    /* pointer-events stay off: the card is a preview, not an interactive
       embed - clicks should fall through to the surrounding <a> */
    pointer-events: none;
    transform-origin: top left;
    transform: scale(var(--lp-scale, 0.25));
}

@media (max-width: 991px) {
    .site-logo-text a {
        font-size: 18px;
    }
}

/* All headings: top-light to bottom-shaded white gradient */
h1, h2, h3, h4, h5, h6 {
    background-image: linear-gradient(0deg, #616161 17%, #ffffff 63%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Exception: the numbered "01".."04" service badges are solid blue boxes,
   not gradient text — restore their normal box + black number styling. */
.service-item h5 {
    background-image: none;
    background-color: var(--primary-color);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--black-color);
    color: var(--black-color);
}