/*
Theme Name: Jayden Wojcik
Author: Custom
Description: Jayden Wojcik portfolio matched to the supplied Figma home page.
Version: 3.0.0
*/
@font-face {
    font-family: 'DRUK WIDE BOLD';
    src: url('assets/fonts/DrukWideBold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: 'SZTOS';
    src: url('assets/fonts/Sztos-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap
}

@font-face {
    font-family: 'ONEST';
    src: url('assets/fonts/Onest.ttf') format('truetype');
    font-display: swap
}

@font-face {
    font-family: 'VABEDO';
    src: url('assets/fonts/Vabedo.ttf') format('truetype');
    font-display: swap
}

:root {
    --jw-black: #000;
    --jw-white: #fff;
    --jw-muted: rgba(255, 255, 255, .8);
    --jw-display: 'DRUK WIDE BOLD', sans-serif;
    --jw-body: 'SZTOS', sans-serif
}

html,
body {
    background: #000;
    color: #fff;
    margin: 0
}

body,
.wp-site-blocks {
    overflow-x: hidden
}

.wp-site-blocks>* {
    margin-block-start: 0
}

.wp-block-image {
    margin: 0
}

.wp-block-image img {
    display: block
}

.jw-home {
    background: #000;
    color: #fff;
    font-family: var(--jw-body)
}

.jw-home>* {
    margin-block-start: 0
}

.jw-home p,
.jw-home h1,
.jw-home h2,
.jw-home h3 {
    margin-top: 0
}

.jw-home .jw-brand {
    gap: 0
}

.jw-header {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 5
}


.jw-performing-label {
    font-family: var(--jw-display);
    font-size: 20px;
    line-height: 1;
    margin: 8px 0 0
}

.jw-hero {
    box-sizing: border-box;
    height: 100vh;
    min-height: 0 !important;
    overflow: hidden;
    padding: 0;
    position: relative
}

.jw-hero:before,
.jw-hero:after {
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 1
}

.jw-hero:before {
    background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .75) 48%, transparent 100%);
    height: 161px;
    top: 0
}

.jw-hero:after {
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .75) 48%, transparent 100%);
    bottom: 0;
    height: 181px
}

.jw-hero .wp-block-cover__background {
    background: none;
    opacity: 1
}

.jw-hero .wp-block-cover__inner-container {
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    padding: 0 42px 68px;
    position: relative;
    width: 100%;
    z-index: 2
}

.jw-hero-meta {
    align-items: flex-end;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%
}

.jw-hero-meta>* {
    margin: 0
}

.jw-hero-meta .wp-block-button__link,
.jw-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid #fff;
    border-radius: 0;
    color: #fff;
    font-family: var(--jw-display);
    font-size: 32px;
    line-height: 1;
    padding: 14px 20px 11px;
    text-decoration: none
}

.jw-hero-meta .wp-block-button__link:hover,
.jw-outline .wp-block-button__link:hover {
    background: #fff;
    color: #000
}

.jw-hero-caption {
    font-size: 16px;
    line-height: 1.2;
    text-align: center
}

.jw-hero-caption em {
    color: var(--jw-muted);
    font-size: 12px;
    font-style: normal
}

.jw-location {
    align-items: center;
    display: flex;
    font-size: 40px;
    gap: 8px;
    justify-content: flex-end;
    white-space: nowrap
}

.jw-location .wp-block-image {
    flex: 0 0 31px
}

.jw-location img {
    height: 31px;
    width: 31px
}

.jw-about {
    box-sizing: border-box;
    padding: 82px 99px 94px
}

.jw-about>.wp-block-columns {
    align-items: flex-start;
    display: grid;
    gap: 89px;
    grid-template-columns: minmax(0, 1fr) 413px;
    margin: 0
}

.jw-about h2 {
    font-family: var(--jw-display);
    font-size: 48px;
    line-height: 1;
    margin: 0 0 30px
}

.jw-about-copy {
    font-size: 28px;
    line-height: 1.05
}

.jw-about-copy p {
    margin: 0 0 30px
}

.jw-about-photo img {
    border-radius: 48px;
    height: 619px;
    object-fit: cover;
    width: 413px
}

.jw-caption {
    color: var(--jw-muted);
    font-size: 12px;
    line-height: 1;
    margin-top: 8px;
    text-align: center
}

.jw-feature {
    box-sizing: border-box;
    min-height: 906px;
    padding: 0
}

.jw-feature .wp-block-cover__background {
    background: none;
    opacity: 1
}

.jw-feature:before,
.jw-feature:after {
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 1
}

.jw-feature:before {
    background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .75) 48%, transparent 100%);
    height: 161px;
    top: 0
}

.jw-feature:after {
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .85) 48%, transparent 100%);
    bottom: 0;
    height: 181px
}

.jw-feature .wp-block-cover__inner-container {
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 906px;
    padding: 75px 44px 0;
    position: relative;
    text-align: right;
    z-index: 2
}

.jw-feature-title {
    margin-left: auto;
    max-width: 1060px
}

.jw-feature-title p:first-child {
    font-family: var(--jw-display);
    font-size: 42px;
    line-height: 1;
    margin: 0 0 12px
}

.jw-feature-title h2 {
    font-family: var(--jw-body);
    font-size: 148px;
    font-weight: 500;
    letter-spacing: -4px;
    line-height: .92;
    margin: 0
}

.jw-feature .jw-outline {
    margin: 30px 0 0 auto
}

.jw-feature-credit {
    align-self: flex-start;
    color: var(--jw-muted);
    font-size: 12px;
    margin-top: auto
}

.jw-software {
    box-sizing: border-box;
    padding: 94px 91px 110px
}

.jw-software-intro {
    font-size: 28px;
    line-height: 1.05;
    margin: 0 0 31px;
    min-height: 263px
}

.jw-software>.wp-block-columns {
    align-items: flex-start;
    display: grid;
    gap: 55px;
    grid-template-columns: minmax(0, 1fr) 567px;
    margin: 0
}

.jw-software-copy {
    font-size: 28px;
    line-height: 1
}

.jw-software-copy p {
    margin: 0
}

.jw-software-photo img {
    border-radius: 48px;
    height: 516px;
    object-fit: cover;
    width: 567px
}

.jw-footer {
    border-top: 1px solid rgba(255, 255, 255, .25);
    margin: 0 7vw;
    padding: 28px 0 42px
}

.jw-footer p {
    color: var(--jw-muted);
    font-size: 13px;
    margin: 0
}

@media(max-width:782px) {
    .jw-hero,
    .jw-hero .wp-block-cover__inner-container {
        min-height: 720px
    }

    .jw-hero .wp-block-cover__inner-container {
        padding: 0 20px 24px
    }

    .jw-hero-meta {
        gap: 12px;
        grid-template-columns: 1fr 1fr
    }

    .jw-hero-meta .wp-block-button__link,
    .jw-outline .wp-block-button__link {
        font-size: 13px;
        padding: 8px 10px 6px
    }

    .jw-hero-caption {
        font-size: 10px;
        grid-column: 1/-1;
        grid-row: 2
    }

    .jw-hero-caption em {
        font-size: 9px
    }

    .jw-location {
        font-size: 18px
    }

    .jw-location .wp-block-image,
    .jw-location img {
        flex-basis: 16px;
        height: 16px;
        width: 16px
    }

    .jw-about {
        padding: 58px 20px 70px
    }

    .jw-about>.wp-block-columns,
    .jw-software>.wp-block-columns {
        display: flex;
        flex-direction: column;
        gap: 34px
    }

    .jw-about h2 {
        font-size: 32px;
        margin-bottom: 20px
    }

    .jw-about-copy,
    .jw-software-copy {
        font-size: 18px
    }

    .jw-about-copy p,
    .jw-software-copy p {
        margin-bottom: 22px
    }

    .jw-about-photo img,
    .jw-software-photo img {
        height: auto;
        max-height: 520px;
        width: 100%
    }

    .jw-feature,
    .jw-feature .wp-block-cover__inner-container {
        min-height: 560px
    }

    .jw-feature .wp-block-cover__inner-container {
        padding: 0 20px
    }

    .jw-feature-title p:first-child {
        font-size: 18px
    }

    .jw-feature-title h2 {
        font-size: 58px;
        letter-spacing: -1px
    }

    .jw-feature .jw-outline {
        margin-top: 18px
    }

    .jw-software {
        padding: 70px 20px 80px
    }

    .jw-footer {
        margin: 0 20px
    }
}
/* 1. Prevent parent header containers from clipping the negative noise inset */
header,
.wp-block-group,
.wp-block-navigation,
.wp-block-navigation-container,
.wp-block-navigation-item {
    overflow: visible !important;
}

/* 2. Base link element targeting WordPress content class */
.wp-block-navigation .wp-block-navigation-item__content {
    position: relative !important;
    display: inline-flex !important;
    color: #ffffff !important;
    padding: 6px 14px;
    text-decoration: none;
    z-index: 1;
}

/* 3. Crisp underline on hover and active states across all WP class formats */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content,
.wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation-item.is-active > .wp-block-navigation-item__content,
.wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation-item__content:hover {
    border-bottom: 2px solid #ffffff !important;
}

/* 4. Crisp noise aura pseudo-element for hover and active states */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before,
.wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content::before,
.wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::before,
.wp-block-navigation-item.is-active > .wp-block-navigation-item__content::before,
.wp-block-navigation-item__content[aria-current="page"]::before,
.wp-block-navigation-item__content:hover::before, .selected-menu-item {
    content: "" !important;
    position: absolute !important;
    inset: -16px -28px !important;
    
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") !important;
    
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 70%) !important;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 70%) !important;

    opacity: 0.5 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}