/*
Theme Name: Vertex Forge
Theme URI: https://vertexforge.de
Author: Minh Tran
Author URI: https://mtran.de
Description: Vertex Forge Wordpress theme.
Version: 1.0
Text Domain: vertexforge
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

#hero-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-image: url(assets/images/hero-bg.webp);
  background-size: cover;
  position: relative;
  height: 95vh; 
  overflow: hidden;
  .hero-content {
    pointer-events: none;
    svg {
      color: var(--wp--preset--color--accent-4);
      width: 100%;
      height: auto;
      max-width: 500px;
    }
  }
}

@media (max-width: 768px) {
  #hero-container {
    height: 400px; 
  }
}

#site-header {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 40;
  transition: background 0.2s ease;
}

.hero-nav {
  background: transparent;

  .nav-logo {
    display: none;
  }
}

.header-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}

  /* Navigation link base styles */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 500;
}

/* Hover state */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover{
  color: var(--wp--preset--color--accent-4);
}

/* Current page highlight */
.wp-block-navigation .wp-block-navigation-item.current-menu-item,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor {
  color: var(--wp--preset--color--accent-4);
}

.wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
}

.nav-wrap .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.nav-wrap .wp-block-navigation-item__content:hover::after,
.nav-wrap .wp-block-navigation-item__content.current-menu-item::after {
	transform: scaleX(1);
}

.social-wrap {
  gap: var(--wp--preset--spacing--20)
}
.wp-social-link {
    fill: currentColor;
}
.wp-social-link a:hover {
    transform: scale(1.2);
    color: var(--wp--preset--color--accent-4);
}

.nav-logo {
  display:inline-flex;
  align-items:center;
  width:250px; 
  height: auto;
  color: var(--wp--preset--color--accent-4);
  transition: color 0.2s ease;

  svg {
    width: 240px;
    height: 70px;
  }
}
.nav-logo:hover {
  color: var(--wp--preset--color--contrast);
}

/* New separator rule */
@media (min-width: 600px) {
  .nav-wrap .wp-block-navigation-item:not(:first-child)::before,
  .has-before-divider-desktop::before {
    content: "|";
    display: inline-block;
    margin-inline: 0.75em;
    color: currentColor;
    opacity: 0.6;
  }
}

.has-before-divider::before {
    content: "|";
    display: inline-block;
    margin-inline: 0.75em;
    color: currentColor;
    opacity: 0.6;
  }

.wp-block-navigation__container {
  gap: 0;
}

.dot-divider > *:not(:first-child)::before {
    content: "·";
    display: inline-block;
    margin-inline: 0.5em;
    color: currentColor;
    opacity: 0.6;
  }


/* Utilities */
.bg-base {
  background-color: var(--wp--preset--color--base);
}


.wpforms-form {
    --wpforms-label-color: var(--wp--preset--color--contrast);
    --wpforms-label-sublabel-color:  var(--wp--preset--color--contrast);
    --wpforms-field-background-color: var(--wp--preset--color--base);
    --wpforms-field-border-color: var(--wp--preset--color--contrast);
    --wpforms-button-background-color: var(--wp--preset--color--accent-4);
    --wpforms-button-border-color: var(--wp--preset--color--accent-4);
    --wpforms-button-text-color: var(--wp--preset--color--contrast);
    --wpforms-page-break-color: var(--wp--preset--color--accent-4);
    --wpforms-field-border-color-spare: var(--wp--preset--color--contrast);
    --wpforms-field-text-color: var(--wp--preset--color--contrast);
}

.background-gradient-accent-1 {
    background: linear-gradient(to bottom right, var(--wp--preset--color--base), var(--wp--preset--color--accent-1), var(--wp--preset--color--base));
}

.background-gradient-accent-2 {
    background: linear-gradient(to bottom right, var(--wp--preset--color--base), var(--wp--preset--color--accent-2), var(--wp--preset--color--base));
}