/**
 * Urban Style 2025
 *
 * @package   urban-style-2025
 * @author    Jerry Simmons <jerry@ferventsolutions.com>
 * @copyright 2025 Jerry Simmons
 * @license   GPL-2.0+
 */

:root {
  color-scheme: light dark; /* both supported */
}

@font-face {
    font-family: 'FuturaPT-Bold';
    src: url('https://urban-assets-2025.s3.us-east-005.dream.io/public/urban-style-2025/fonts/FuturaPT-Bold.woff2') format("woff2");
    font-display: swap;
}
@font-face {
    font-family: 'New-Hero-Bold';
    src: url('https://urban-assets-2025.s3.us-east-005.dream.io/public/urban-style-2025/fonts/New-Hero-Bold.woff2') format("woff2");
    font-display: swap;
}
@font-face {
    font-family: 'New-Hero-SemiBold';
    src: url('https://urban-assets-2025.s3.us-east-005.dream.io/public/urban-style-2025/fonts/New-Hero-SemiBold.woff2') format("woff2");
    font-display: swap;
}
@font-face {
    font-family: 'New-Hero-Regular';
    src: url('https://urban-assets-2025.s3.us-east-005.dream.io/public/urban-style-2025/fonts/New-Hero-Regular.woff2') format("woff2");
    font-display: swap;
}

/*** CSS PROPERTIES ***/
:root, *::before, *::after,
.urban2025, body, html {
    --page-width: 1774px;

    /* COLORS */
    --urban-black: light-dark( #1F1F1F, #F1F1F1 );
    --urban-white: light-dark( #F1F1F1, #1F1F1F );
    --urban-offwhite: #E6E6E5;
    --urban-teal: #098670;
    --urban-light-teal: #C0EDE6;
    --urban-gray1: light-dark( #F6F6F6, #292929 );
    --urban-gray2: light-dark( #ADB3B7, #575757 );
    --urban-gray3: light-dark( #70787C, #696969 );
    --urban-gray4: light-dark( #696969, #70787C );
    --urban-gray5: light-dark( #575757, #ADB3B7 );
    --urban-gray6: light-dark( #292929, #F6F6F6 );
    --urban-dark-blue: #2C2E3A;
    --urban-action-red: #C94949;
    --urban-eco-green: #475C27;
    --veneklasen-red: #EA3136;

    --static-urban-black: #1F1F1F;
    --static-urban-white: #F1F1F1;

    --black-text: light-dark( #2F2F2F, #F1F1F1 );
    --white-text: light-dark( #F1F1F1, #1F1F1F );
    --gray-text: #ADB3B7;

    --light-background: light-dark( #f6f6f6, #70787C );
    --white-background: light-dark( #ffffff, #1F1F1F );

    --headline-font-family: 'FuturaPT-Bold';
    --heading-font-family: 'New-Hero-SemiBold';
    --body-font-family: 'New-Hero-Regular';
    --button-border-radius: 6px;
    --border-radius-small: 7px;
    --border-radius-large: 11px;
    --padding: 41px;
    --grid-gap: 41px;
    --grid-gap-small: 21px;
    --inner-grid-gap: 21px;
    --hover-scale: 1.025;
    --transition-time: .35s;
}

* {
    box-sizing: border-box;
    /* transition: all .35s ease; */
}
html, body {
    margin: 0;
    /* background-color: light-dark( #FFFFFF, #000000 ) !important; */
    background-color: var(--urban-gray1) !important;
}

.urban2025, .urban2025 p, .urban2025 h1, .urban2025 h2, .urban2025 h3, .urban2025 h4, .urban2025 h5, .urban2025 h6 {
    color: var(--black-text);
}
.white, .white_text, .urban2025 p.white, .urban2025 h1.white, .urban2025 h2.white, .urban2025 h3.white, .urban2025 h4.white, .urban2025 h5.white, .urban2025 h6.white {
    color: var(--white-text);
}

h1, h2, h3, h4, h5, h6,
.urban2025 h1,.urban2025 h2, .urban2025 h3, .urban2025 h4, .urban2025 h5, .urban2025 h6 {
    font-family: var(--heading-font-family);
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
}

h1.headline, .urban2025 .headline, .headline  {
    font-family: var(--headline-font-family);
    text-align: center;
    font-size: clamp(50px, 5.25vw, 96px);
    font-style: normal;
    font-weight: 700;
    line-height: .8125em;
    letter-spacing: clamp(-4.8px, -.05em, 1px);
    text-transform: uppercase;
}

h1, .urban2025 h1, h2, .urban2025 h2, .h2style {
    font-size: 28px;
    line-height: 27px;
    letter-spacing: 0;
}
h3, .urban2025 h3 {
    font-size: 28px;
    line-height: 27px;
    letter-spacing: 0;
}
h4, .urban2025 h4 {
    font-size: 26px;
    line-height: 25px;
    letter-spacing: 0;
}
h5, .urban2025 h5 {
    font-size: 24px;
    line-height: 23px;
    letter-spacing: 0;
}
h6, .urban2025 h6 {
    font-size: 20px;
    line-height: 19px;
    letter-spacing: 0;
}
body, p, ul, ol, li, a, div {
    font-family: var(--body-font-family);
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: 0;
    font-weight: 400;
    text-transform: none;
}
form, form label, form input, form select, form textarea, form button, form legend {
    font-family: var(--body-font-family) !important;
}

a {
    text-decoration: none;
}


.title-text {
    font-size: 28px;
    font-weight: bold;
}
.subtitle-text {
    font-size: 28px;
}
.body-text {
    font-size: 20px;
}
.link-text, p a, .body-text a {
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: inherit;
}
.footer-header-text {
    font-size: 20px;
}
.footer-subheader-text {
    font-size: 14px;
}


/*** CONTAINERS ***/
div {
    background-size: cover;
    background-position: center center;
}

/*** BUTTONS ***/

largebutton, mediumbutton, smallbutton,
.largebutton, .mediumbutton, .smallbutton {
    display: block;
    margin: 5px 0px;
}
largebutton a, a.largebutton,
mediumbutton a, a.mediumbutton,
smallbutton a, a.smallbutton,
.largebutton span,
.mediumbutton span,
.smallbutton span {
    display: inline-block;
    max-width: 100%;
    border-radius: var(--button-border-radius);
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    padding: 15px 31px;
    font-family: var(--body-font-family);
    line-height: 1em;
    font-weight: 600;
    transition: all .35s ease;
}

largebutton a, a.largebutton,
.largebutton span {
    width: 564px;
    padding: 27px 31px;
    font-size: 24px;
}
mediumbutton a, a.mediumbutton,
.mediumbutton span {
    padding: 15px 31px;
    font-size: 18px;
}
smallbutton a, a.smallbutton,
.smallbutton span {
    padding: 10px 31px;
    font-size: 14px;
}

largebutton a, a.largebutton,
mediumbutton a, a.mediumbutton,
smallbutton a, a.smallbutton,
largebutton.teal_button a, a.largebutton.teal_button,
mediumbutton.teal_button a, a.mediumbutton.teal_button,
smallbutton.teal_button a, a.smallbutton.teal_button,
a.teal_button,
.smallbutton.teal_button span  {
    background-color: var(--urban-teal);
    color: var(--static-urban-white);
}
largebutton.black_button a, a.largebutton.black_button,
mediumbutton.black_button a, a.mediumbutton.black_button,
smallbutton.black_button a, a.smallbutton.black_button,
a.black_button,
.smallbutton.black_button span {
    background-color: light-dark( var(--urban-gray6), var( --urban-gray1) );
    color: var(--static-urban-white);
}
largebutton.white_button a, a.largebutton.white_button,
mediumbutton.white_button a, a.mediumbutton.white_button,
smallbutton.white_button a, a.smallbutton.white_button,
a.white_button,
.smallbutton.white_button span {
    border: solid 1px var(--urban-gray5);
    background-color: var(--static-urban-white);
    color: var(--static-urban-black);
}

largebutton a:hover, a.largebutton:hover,
mediumbutton a:hover, a.mediumbutton:hover,
smallbutton a:hover, a.smallbutton:hover,
.largebutton span:hover,
.mediumbutton span:hover,
.smallbutton span:hover {
    /* box-shadow: 0px 0px 15px 3px rgba(0,0,0,.5); */
    box-shadow: 0px 4px 10.2px 2px rgba(41, 57, 72, 0.45);
}

@media (max-width: 775px) {
    largebutton, mediumbutton, smallbutton,
    .largebutton, .mediumbutton, .smallbutton {
        text-align: center;
    }
}


/*** MENU LAYOUT ***/
#main-header {
    container-name: fener-main-header;
    container-type: inline-size;
    background-color: var(--urban-white) !important;
}
#main-header .container {
    width: 100%;
    max-width: var(--page-width);

    @container (max-width: 1856px) {
        width: calc( calc(100% - var(--grid-gap) ) - var(--grid-gap) );
    }
}
@media( prefers-color-scheme: dark ) {
    #logo {
        filter: invert(.8);
    }
}

#top-menu.nav li > a {
    color: var(--urban-black);
}
#top-menu.nav li.current-menu-item > a {
    color: var(--urban-teal);
    font-weight: 600;
}




/*** PAGE LAYOUT ***/
.fener_page_wrapper {
    position: relative;
    container-name: fener-page-wrapper;
    container-type: inline-size;
    background-color: var(--urban-gray1);
    padding-bottom: calc( var(--grid-gap) * 2 );
}
.fener_page_wrapper > div,
.fener_page_wrapper > .fener_section, fener_section {
    position: relative;
    width: 100%;
    max-width: 1774px;
    margin: 48px auto 0px;
    container-name: fener-section;
    container-type: inline-size;

    @container (max-width: 1856px) {
        width: calc( calc(100% - var(--grid-gap) ) - var(--grid-gap) );
    }
}
.fener_page_wrapper > .fener_fullwidth_section,
.fener_fullwidth_section {
    position: relative;
    width: 100%;
    max-width: 100%;
    container-name: fener-fullwidth-section;
    container-type: inline-size;
}

/** Hero Sections **/
.fener_hero_section {
    margin-top: 0 !important;
    width: 100%;
}
.fener_hero_section img {
    width: 100%;
}

.fener_columns_row {
    display: flex;
}
.fener_columns_row > div {
    width: 100%;
    margin: 10px;
}
@container fener-section (max-width: 1280px) {
}
@container fener-section (max-width: 980px) {
    .fener_columns_row {
        flex-flow: row wrap;
    }
    .fener_columns_row > div {
        width: calc(50% - 20px);
    }
}
@container fener-section (max-width: 780px) {
}
@container fener-section (max-width: 480px) {
    .fener_columns_row {
        flex-flow: column;
    }
    .fener_columns_row > div {
        width: 100%;
        margin: 0px;
    }
}

/*** HEADER SECTIONS ***/
.fener_page_wrapper > .fener_header_section,
.fener_header_section {
    display: flex;
    flex-flow: column;
    justify-content: end;
    max-width: 1774px;
    border-radius: var(--border-radius-large);
    padding: var(--padding);
}
.fener_page_wrapper > .fener_fullwidth_header_section,
.fener_fullwidth_header_section {
    display: flex;
    flex-flow: column;
    justify-content: end;
    width: 100%;
    max-width: 100%;
}
.thin_header {
    min-height: 115px;
}
.small_header {
    min-height: 330px;
}
.small_medium_header {
    min-height: 400px;
}
.medium_header {
    min-height: 550px;
}
.medium_large_header {
    min-height: 710px;
}
.xlarge_header {
    min-height: 975px;
}

/*** GRID LAYOUTS ***/
.urban_grid_5, .urban_grid_4, .urban_grid_3, .urban_grid_2, .urban_grid_1 {
    display: grid;
    gap: var(--grid-gap);
    /* margin-bottom: var(--grid-gap); */
}
.urban_grid_5 > *, .urban_grid_4 > *, .urban_grid_3 > *, .urban_grid_2 > *, .urban_grid_1 > * {
    border-radius: var(--border-radius-large);
    overflow: hidden;
}
.urban_grid_5 {
    grid-template-columns: repeat(5, 1fr);
}
.urban_grid_4 {
    grid-template-columns: repeat(4, 1fr);
}
.urban_grid_3 {
    grid-template-columns: repeat(3, 1fr);
}
.urban_grid_2 {
    grid-template-columns: repeat(2, 1fr);
}
.urban_grid_1 {
    grid-template-columns: 1fr;
}

@container fener-section (max-width: 1280px) {
    .urban_grid_5 {
        grid-template-columns: repeat(4, 1fr);
    }
}
@container fener-section (max-width: 980px) {
    .urban_grid_5, .urban_grid_4 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@container fener-section (max-width: 780px) {
    .urban_grid_5, .urban_grid_4, .urban_grid_3, .urban_grid_2, .urban_grid_1 {
        gap: var(--grid-gap);
    }
    .urban_grid_5, .urban_grid_4, .urban_grid_3 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@container fener-section (max-width: 480px) {
    .urban_grid_5, .urban_grid_4, .urban_grid_3, .urban_grid_2 {
        grid-template-columns: 1fr;
    }
}

.urban_innergrid_5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--inner-grid-gap);
}
.urban_innergrid_5 > div {
    border-radius: var(--border-radius-small);
}
.urban_innergrid_4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--inner-grid-gap);
}
.urban_innergrid_4 > div {
    border-radius: var(--border-radius-small);
}
.urban_innergrid_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--inner-grid-gap);
}
.urban_innergrid_3 > div {
    border-radius: var(--border-radius-small);
}
.urban_innergrid_2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--inner-grid-gap);
}
.urban_innergrid_2 > div {
    border-radius: var(--border-radius-small);
}
.urban_innergrid_1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--inner-grid-gap);
}
.urban_innergrid_1 > div {
    border-radius: var(--border-radius-small);
}

