/*
Theme Name: Kubiak Creative
Author: Kubiak Creative
Author URI: https://kubiakcreative.com
Description: Custom Theme by Kubiak Creative - Requires The7 theme to be installed for base structure. 09-24
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/
:root {
    --dark:  #001932;
    --pink:  #ffc8d2;
    --teal:  #32cccc;
    --pale:  #f4f4f4;
  
  }

.dark  {  color: var(--plum) }
.pink  {  color: var(--pink) }
.teal  {  color: var(--teal) }
.pale  {  color: var(--pale) }

.bg-dark  { background-color: var(--dark) }
.bg-pink  { background-color: var(--pink) }
.bg-teal  { background-color: var(--teal) }
.bg-pale  { background-color: var(--pale) }

::selection {
    color: var(--pale);
    background: var(--dark);
}

.hide { display: none !important }

body {
    /* font-family: Arial, Helvetica, sans-serif; */
    font-optical-sizing: auto;
    /* font-weight: 400; */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
}

/* FIX .vc_column-inner  padding issue */
.vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container > .vc_column-inner {padding-top: 0}
.vc_row-has-fill > .vc_column_container > .vc_column-inner {padding-top: 0}

/* ----------------------------------- TYPOGRAPHY ----------------------------------- */

/* h1 { letter-spacing: -1px;} */
h2 { margin-bottom: 30px; }
h3 { margin-bottom: 30px; }
h2, h3, h4, h5, h6 { color: var(--plum);}
h5, h6 { font-family: "video", sans-serif !important; text-transform: uppercase; color: var(--pink); }

strong, b { font-weight: 400;}

a { text-decoration: none; transition: all 0.5s ease;}
a:hover { color: var(--teal);}

.dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg h5, .dark-bg p, .dark-bg a { color: white;}
.white p, .white a, .white, .white h1, .white h2, .white h3, .white h4, .white h5, .white h6 { color: white;}

.text-center { text-align: center;}
@media (min-width: 992px) { .text-center { text-align: inherit;} }
@media (min-width: 992px) { .text-right-desktop { text-align: right;} }


/* Paragraph Styles */
p.large-x1 { font-size: 1.5rem; line-height: 1.8rem; margin-bottom: 30px; font-weight: 100;}
p.large-x2 { font-size: 2rem; line-height: 2.4rem; margin-bottom: 30px; font-weight: 100;}

@media (min-width: 992px) { }

/* Link styles */

.link-underline a {
    position: relative;
    display: block;
    text-decoration: 0;
        transition: 0.2s ease;
}

.link-underline a::before {
    position: absolute;
    content:'';
    left: 0;
    bottom: -10px;
    height: 1px;
    width: 100%;
    background: #999999;
}

.link-underline a::after {
    position: absolute;
    content:'';
    left: 0;
    bottom: -12px;
    height: 5px;
    width: 10%;
    background: var(--pink);
    transition: all 1s ease;
}

.link-underline a:hover::after {
    width: 100%;
}


/* ----------------------------------- GENERAL ----------------------------------- */


.center-mobile, .center-mobile .wpb_content_element { text-align: center;}
@media (min-width: 768px) {.center-mobile, .center-mobile .wpb_content_element { text-align: inherit;}}
.center-tablet, .center-tablet .wpb_content_element { text-align: center;}
@media (min-width: 992px) {.center-tablet, .center-tablet .wpb_content_element  { text-align: inherit;}}
.center-desktop, .center-desktop .wpb_content_element { text-align: center;}
@media (min-width: 1200px) {.center-laptop, .center-desktop .wpb_content_element { text-align: inherit;}}

.reverse-tablet { display: flex; flex-direction: row; }
@media (min-width: 768px) {.reverse-tablet { display: flex; flex-direction: row-reverse; }}
.reverse-desktop { display: flex; flex-direction: row; }
@media (min-width: 992px) {.reverse-desktop { display: flex; flex-direction: row-reverse; }}

.sidetitle br { display: none; }
@media (min-width: 992px) { .sidetitle br { display: inline; }}


/* ----------------------------------- ROW / BOX SIZING ----------------------------------- */

.min-height-800 { min-height: 800px;}
.min-height-600 { min-height: 600px;}
.min-height-500 { min-height: 500px;}
.min-height-400 { min-height: 400px;}
.max-width-300 { max-width: 300px;}
.max-width-250 { max-width: 250px;}

.min-height-banner { min-height: 300px;}
@media (min-width: 768px) { .min-height-banner { min-height: 600px;}}

.row-padding { padding-top: 60px; padding-bottom: 60px;}
@media (min-width: 992px) { .row-padding { padding-top: 120px; padding-bottom: 120px;}}

.row-margin-top { margin-top: 60px; }
.row-margin-bottom { margin-bottom: 0px; }
@media (min-width: 992px) { .row-margin-bottom { margin-bottom: 60px; } }

@media (min-width: 992px) {.row-margin-top { margin-top: 140px;}.row-margin-bottom { margin-bottom: 70px; }}

.box-padding .vc_column-inner { padding: 35px; }
@media (min-width: 992px) { .box-padding .vc_column-inner { padding: 75px;} }


/* ----------------------------------- SMALL ELEMENTS ----------------------------------- */


.more-work {
    display: flex;
    flex-direction: column-reverse;
}
.more-work h3.anchor-link a {
    font-weight: 400 !important;
    display: block;
    margin-bottom: 10px;
}

.mobile-main-nav > li > a {
  padding: 8px 0
}

.light-preset-color.masthead:not(#phantom):not(.sticky-on):not(.sticky-mobile-on) .menu-line::after, 
.light-preset-color.masthead:not(#phantom):not(.sticky-on):not(.sticky-mobile-on) .menu-line::before {
  background: var(--dark) !important;
}

/* ============================================================
   THE7 MOBILE MENU
   TRUE CENTRED MENU
   ============================================================ */

@media screen and (max-width: 778px) {

    /* Keep the working top-down animation */
    #page .dt-mobile-header {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: auto !important;

        transform: translate3d(0, -100%, 0) !important;

        transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    #page.show-mobile-header .dt-mobile-header {
        transform: translate3d(0, 0, 0) !important;
    }


    /* Full-screen menu area */
    #page .dt-mobile-header .mobile-header-scrollbar-wrap {
        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;
        max-height: 100vh !important;

        position: relative !important;
        box-sizing: border-box !important;
    }


    /* THE ACTUAL MENU - CENTRE IT */
    #page .dt-mobile-header #mobile-menu {
        position: absolute !important;

        top: 50% !important;
        left: 0 !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: translateY(-50%) !important;

        text-align: center !important;
    }


    /* Individual menu items */
    #page .dt-mobile-header #mobile-menu > li {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }


    /* Links */
    #page .dt-mobile-header #mobile-menu > li > a {
        display: flex !important;

        width: 100% !important;

        justify-content: center !important;
        align-items: center !important;

        text-align: center !important;
    }


    /* Make sure the text itself is centred */
    #page .dt-mobile-header #mobile-menu .menu-item-text {
        text-align: center !important;
    }

}

/* Centre the mobile menu close X */
@media screen and (max-width: 778px) {

    #page .dt-mobile-header .dt-close-mobile-menu-icon {
        position: absolute !important;

        top: 25px !important;
        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;

        margin: 0 !important;
    }
}
/* ----------------------------------- ANIMATIONS ----------------------------------- */

.delay { animation-delay: 0.25s }
.delay2 { animation-delay: 0.5s }
.wpb_animate_when_almost_visible.wpb_fadeInUp.fadeInUp.wpb_start_animation.animated {
  animation-name: fadeInUpSlow !important;
  animation-duration: 1.4s !important;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation-fill-mode: both !important;
}

@keyframes fadeInUpSlow {
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ----------------------------------- FOOTER  ----------------------------------- */

#footer p, #footer .footer-menu ul a {
    color: var(--pale);
    font-weight: 400; 
}

.footer a:hover {
  color: var(--teal) !important;
}

.footer-logo {
    max-width: 200px;
} 

.footer-menu .widget  {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0
}



/* ----------------------------------- PORTFOLIO PAGE ----------------------------------- */

.preheader h3,
.preheader,
.project-title  h1 {
  font: var(--the7-h4-font);
  font-weight: 100;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.intro,
.project-intro {
  color: var(--dark);
}

.project-categories ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 35px;
}


.project-categories ul li {
  line-height: 1em;
  display: block;
  margin-bottom:5px;
 
}

.project-categories ul li:before {
  content: '-';
  padding-right:5px;
}

@media (min-width: 992px) { 
  .project-categories ul li { 
    display: inline-block;
  border-left: solid 1px var(--dark);
    padding-left: 8px;
    padding-right: 8px;
  }

  .project-categories ul li:before {
    content: '';
    padding-right:0
  }
}

.project-categories ul li:first-of-type {
  border-left: 0;
  padding-left: 0
} 

.project-website a {
  padding-left: 30px;
  font-weight: 500;
  position: relative;
}

.project-website a:before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  font: var(--fa-font-solid);
  content: '\f178';
  color: var(--teal);
  transition: all 0.25s ease;
}

.project-website a:hover:before {
  left: 5px;
}

.meta-nav {
  display: none;
}

.nav-next {
  padding-right: 40px;
}

.nav-previous {
  padding-left: 40px;
}

.post-navigation .nav-links {
  border-width: 1px 0 0;
}

.post-navigation .nav-links a span {
  transition: all 0.5s ease;
}

.post-navigation .nav-links svg {
  fill: rgba(50, 204, 204, 0.8);
}

.post-navigation .nav-linksHover svg {
  fill: rgba(50, 204, 204, 1);
}


@media (max-width: 992px) { 
  .post-navigation .nav-links .post-title.h4-size { font-size:1em }
  }

.project-cards-row { 
  margin-bottom:0px;
} 


.project-cards-row.background { 
  margin-bottom:50px;
} 


@media (min-width: 992px) { 
  .project-cards-row {  margin-bottom: 50px }
  .project-cards-row.background {  margin-bottom: 100px } /*ALLOWS FOR INNER COLUMN NOT HAVING 50px DEFAULT PADDING */
}



@media (max-width: 992px) { 
  .project-cards-row .vc_empty_space {
    height: 400px !important;
  }
}

/* ----------------------------------- PORTFOLIO CARDS ----------------------------------- */


.project-card {
  position: relative;
  display: block;
}

.project-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--pale);; /* fallback while media loads */
}

.project-media img,
.project-media iframe,
.project-media video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none; /* lets clicks pass through to the <a> link */
}


.project-pretitle {
  display: block;
  font-size: 1em;
  font-weight: 100;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.project-title {
  color: var(--dark);
  font-weight: 300;
  margin: 0;
}

/* Standard: full-image overlay that fades in on hover */

.project-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: rgba(0, 25, 50, 0.7);
  opacity: 0;
  transition: opacity 0.5s ease;
  padding: 24px;
}

.project-card:hover .project-overlay,
.project-card:focus .project-overlay {
  opacity: 1;
}

.project-overlay .project-pretitle {
  max-width: 85%;
}

.project-overlay .project-title {
  color: var(--pale);
  font-size: 2em;
}

/* Alternative: small CTA on the image, title/pretitle shown below */

.project-card--alternative .project-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 25, 50, 0.75);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.project-card--alternative .project-media:hover::after,
.project-card--alternative .project-media:focus::after {
  opacity: 1;
}

.project-hover-cta {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9em;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.project-card--alternative .project-media:hover .project-hover-cta,
.project-card--alternative .project-media:focus .project-hover-cta {
  opacity: 1;
}

.project-info {
  padding-top: 20px;
  position: relative;
}

.project-card .project-media:before,
.project-card--alternative .project-media:before {
  position: absolute;
  content: '';
  bottom: 0;
  width: 0px;
  height: 5px;
  background-color:  var(--pink);
  transition: all 0.5s ease;
  z-index: 3;
}

#project-listing.list-view .project-card--alternative .project-media:before {
  display: none;
}

.project-card:hover .project-media:before,
.project-card--alternative .project-media:hover:before { 
  width: 100%;
}


/* ----------------------------------- PORTFOLIO CARDS LIST VIEW ----------------------------------- */


#project-listing {
  transition: opacity 0.2s ease;
}

#project-listing.view-transitioning {
  opacity: 0;
  visibility: hidden;
}

/* Force transitions to stop loading when layout switches */
#project-listing.view-transitioning .project-hover-cta,
#project-listing.view-transitioning .project-media::after,
#project-listing.view-transitioning .project-info,
#project-listing.view-transitioning .project-media {
  transition: none !important;
}


/* Force columns to stack full-width in list mode */
#project-listing.list-view .wpb_column {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Turn each card into a horizontal row: text left, CTA right */
#project-listing.list-view .project-card--alternative {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 24px 0;
  border-bottom: solid 1px var(--teal);
}

/* STOP CTA FLASHING DURING TRANSITION */
#project-listing.view-transitioning .project-hover-cta,
#project-listing.view-transitioning .project-media::after {
  transition: none !important;
}

/* Info block: drop its own border/spacing, sits first */
#project-listing.list-view .project-info {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  order: 1;
}

/* Media becomes just a wrapper for the CTA text, sits second */
#project-listing.list-view .project-media {
  position: static;
  display: inline-flex;
  align-items: center;
  aspect-ratio: unset;
  width: auto;
  height: auto;
  overflow: visible;
  background: none;
  order: 2;
}

/* Hide the actual image/video and tint overlay */
#project-listing.list-view .project-media img,
#project-listing.list-view .project-media video,
#project-listing.list-view .project-media iframe,
#project-listing.list-view .project-media::after,
#project-listing.list-view .project-info:before {
  display: none;
}

#project-listing.list-view .project-card:before {
  position: absolute;
  content: '';
  bottom: 0;
  width:2%;
  height: 2px;
  background-color:  var(--teal);
  transition: all 1s ease;
}

#project-listing.list-view .project-card:hover:before {
  width: 100%;
}

/* Make the CTA permanently visible and inline, instead of hover-only */
#project-listing.list-view .project-hover-cta {
  position: static;
  opacity: 1;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85em;
  white-space: nowrap;
}

/* ----------------------------------- PORTFOLIO TOGGLE BUTTONS ----------------------------------- */


.portfolio-view-toggle {
  display: flex;
  align-items: center;
  gap: 32px;
  justify-content: flex-end;
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-primary, inherit);
  font-size: 20px;
  font-weight: 400;
  color: var(--dark);
  opacity: 1;
  transition: opacity 0.5s ease;
}

.view-toggle-btn:hover {
  opacity: 0.8;
}

.view-toggle-btn.active {
  opacity: 1;
}

.view-toggle-btn .icon {
  color: var(--teal);
  font-size: 24px;
}


/* ----------------------------------- TEAM ----------------------------------- */

.team-author {
    font: var(--the7-h4-font);
    font-weight: 100;
}
.team-author-name {
    font-weight: 400;
}

.soc-font-icon::before {
    font-family: "Geologica", Helvetica, Arial, Verdana, sans-serif;
    font-weight: 300;
}

a.linkedin, a.mail {
    display: block;
    position: relative;
}

a.linkedin .soc-font-icon::before {
    content: 'Linkedin' !important;
}
a.mail .soc-font-icon::before {
    content: 'Email' !important;
}



/* ----------------------------------- CSS LOADER ----------------------------------- */

.loader {
 width: 50px;
 height: 50px;
 position: relative;
 transform: translateX(-25px);
 /* Compensating for the left of 50px in the keyframe. */
}

.loader::before,
.loader::after {
 content: '';
 position: absolute;
 width: inherit;
 height: inherit;
 border-radius: 50%;
 mix-blend-mode: multiply;
 animation: rotate9 1s infinite cubic-bezier(0.77, 0, 0.175, 1);
}

.loader::before {
 background-color: var(--pink);
}

.loader::after {
 background-color: var(--teal);
 animation-delay: .5s;
}

@keyframes rotate9 {
 0%,100% {
  left: 50px;
 }

 25% {
  transform: scale(.3);
 }

 50% {
  left: 0;
 }

 75% {
  transform: scale(1);
 }
}


/* ----------------------------------- VIMEO SHORTCODE ----------------------------------- */


.vimeo-bg-wrap {
  position: relative;
  overflow: hidden;
}

.vimeo-bg-widescreen {
  aspect-ratio: 16 / 9;
}

.vimeo-bg-square {
  aspect-ratio: 1 / 1;
}

.vimeo-bg-standard {
  aspect-ratio: 4 / 3;
}

.vimeo-bg-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none; /* prevents clicks reaching the player at all */
}

/* ----------------------------------- CONTACT FORM ----------------------------------- */


/* Two-column layout */
.wpcf7-form .cf7-row {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

.wpcf7-form .cf7-col {
  flex: 1 1 0;
  min-width: 0;
}

.wpcf7-form .cf7-col.cf7-full {
  flex: 1 1 100%;
}

/* Make fields fill their column */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0 !important
}

.wpcf7-form textarea {
  resize: vertical;
}

/* Remove CF7's default extra spacing */
.wpcf7-form .wpcf7-form-control-wrap {
  display: block;
}

/* Stack on mobile */
@media (max-width: 600px) {
  .wpcf7-form .cf7-row {
    flex-direction: column;
    gap: 20px;
  }
}

/* Placeholder font size */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  font-size: 14px;
}

/* Older browser prefixes (optional) */
.wpcf7-form input::-webkit-input-placeholder,
.wpcf7-form textarea::-webkit-input-placeholder {
  font-size: 14px;
}

.wpcf7-form input::-moz-placeholder,
.wpcf7-form textarea::-moz-placeholder {
  font-size: 14px;
}