/*
 Theme Name:   Riefsdahl
 Description:  Riefsdahl Theme
 Author:       Julian Riefsdahl
 Author URI:   https://riefsdahl.com
 Template:     generatepress
 Version:      0.1
 Text Domain:  riefsdahl
*/

/* Mobile optimizations (EN) */

@media (max-width: 768px) {
    .main-title {
        font-size: 20px;
    }

    .inside-navigation > .wp-block-site-title {
        margin-left: 25px;
    }

    .project-availability {
        margin-bottom: 50px!important;
    }

    #tech-stack {
        margin: auto 1em;
    }

    #tech-stack .gbp-section__tagline {
        margin-top: 25px;
    }

    #cv > .gbp-section__inner img {
        margin-bottom: 25px;
    }

    .fluentform {
        margin-bottom: 25px;
    }
}

/* Mobile optimizations (DE) */

@media (max-width: 768px) {
    .gb-element-f2910e65 {
        margin: auto 1em;
    }
}

html {
scroll-behavior:smooth!important;
}

.footer-built-notice {
color:#273059;
}

.logo-text {
font-size:22px;
font-weight:600;
}

.logo-r {
color:#1E40AF;
font-weight:800;
}

.logo-d {
color:#1E40AF;
font-weight:800;
}

/* Content links */

.content-link {
text-decoration: underline;
transition: all 0.5s ease;
}

.content-link:hover {
color:var(--accent)!important;
}

/* Checkmark lists */

.checkmarks-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.checkmarks-list li {
  padding-left: 2.5em;
  position: relative;
  padding-top: 2px;
  margin-bottom: 12px;
}

.checkmarks-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.125em;
  width: 1.5em;
  height: 1.5em;
  background-color: var(--accent); /* Hier wird die Farbe gesetzt */
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><circle cx="128" cy="128" r="96" opacity="0.2"></circle><polyline points="88 136 112 160 168 104" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><circle cx="128" cy="128" r="96" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><circle cx="128" cy="128" r="96" opacity="0.2"></circle><polyline points="88 136 112 160 168 104" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><circle cx="128" cy="128" r="96" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle></svg>');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

/* Main menu: Language switcher dropdown menu */

.pll-parent-menu-item > ul {
width:150px!important;
}

/* Main menu: Language switcher labels */

.sub-menu .lang-item a {
display:inline-flex;
align-items:center;
gap:8px;
}

.sub-menu .lang-item a::after {
content:attr(hreflang);
font-size:16px;
line-height:1;
text-transform:uppercase;
}

.sub-menu .lang-item-en a::after {
content:"English";
text-transform:none;
}

.sub-menu .lang-item-de a::after {
content:"German";
text-transform:none;
}

/* Floating header */

/* Add website title to floating header */
/*
#sticky-navigation .inside-navigation::before {
    content: "Riefsdahl Digital Marketing";
    font-size: 1.2rem;
    font-weight: 600;
    color: inherit;
    margin-right: auto;
    display: flex;
    align-items: center;
    order: -1;
}

#sticky-navigation .inside-navigation {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    #sticky-navigation .inside-navigation::before {
        display: none;
    }
}

#sticky-navigation .sticky-header .inside-navigation::before {
    font-size: 1.1rem;
}
*/

/* Tech stack slider v1 2026-02-15 */



/* Project availability badge */

.project-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.125rem;
  font-weight: 500;
  color: #166534;
}

.project-availability::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: pulse-ring 1.8s ease-out infinite;
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .project-availability::before { animation: none; }
}

/* Skill badges */

[class*="skill-badge-"] {
    position: relative;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

[class*="skill-badge-"]::after {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0px 8px;
    border-radius: 20px;
    vertical-align: middle;
    white-space: nowrap;
    margin-left: 15px;
    margin-top: -3px;
}

.skill-badge-expert::after {
    content: "Expert";
    color: #ffffff;
    background-color: #1a7f4b;
    box-shadow: 0 0 0 1px #1a7f4b;
}

.skill-badge-advanced::after {
    content: "Advanced";
    color: #ffffff;
    background-color: #1a5fa8;
    box-shadow: 0 0 0 1px #1a5fa8;
}

.skill-badge-proficient::after {
    content: "Proficient";
    color: #ffffff;
    background-color: #7c3aad;
    box-shadow: 0 0 0 1px #7c3aad;
}

.skill-badge-expert-de::after {
    content: "Experte";
    color: #ffffff;
    background-color: #1a7f4b;
    box-shadow: 0 0 0 1px #1a7f4b;
}

.skill-badge-advanced-de::after {
    content: "Fortgeschritten";
    color: #ffffff;
    background-color: #1a5fa8;
    box-shadow: 0 0 0 1px #1a5fa8;
}

.skill-badge-proficient-de::after {
    content: "Erfahren";
    color: #ffffff;
    background-color: #7c3aad;
    box-shadow: 0 0 0 1px #7c3aad;
}

/* Fluentform contact forms */

.fluentform {
    font-weight: 400;
    text-transform: none;
    color: var(--contrast);
    font-family: var(--gp-font--nunito-sans);
    font-size: 1.125rem;
    line-height: 1.5em;
    word-wrap: break-word;
    box-sizing: inherit;
    background-color: var(--base-3);
    border-radius: 2px;
    padding: 2rem;

}

.ff-el-group > .ff-el-input--content > .ff-el-form-control {
    background-color: var(--base-2);
    margin-bottom: 1rem;
    min-height: 3rem;
    border: .5px solid var(--base-2);
    border-radius: 2px;
}

.ff-el-group > .ff-el-input--content > .ff-el-form-control:focus {
    background-color: var(--base-2);
}

.ff-btn {
    align-items: center!important;
    background-color: var(--accent)!important;
    color: var(--base-2)!important;
    column-gap: .5rem!important;
    display: inline-flex!important;
    font-size: .875rem!important;
    font-weight: 700!important;
    justify-content: center!important;
    letter-spacing: 2px!important;
    line-height: 1.5!important;
    text-align: center!important;
    text-transform: uppercase!important;
    transition: all .5s ease 0s!important;
    border-radius: 2px!important;
    padding: .75rem 1.25rem!important;
}

.ff-btn:is(:hover,:focus) {
    background-color: #3b82f6!important;
    box-shadow: 0px 0px 20px 2px rgba(59, 130, 245, 0.5);
    color: var(--base-3)!important;
}