:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #1abc9c;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #1abc9c;
  --bs-secondary: #2c3e50;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 24,189,156;
  --bs-secondary-rgb: 44, 62, 80;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 0.125rem;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #1abc9c;
  --bs-link-hover-color: #15967d;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;

  /* My custom variables */
  --bg-primary: #000537;
  --bg-primary-opacity: #02095580;
  --secondary: #121111;
  --accent:#cd31e0;
 
  /* Text variables */
  --text-primary: #ffffff;
  --text-secondary: #ffffffcc;
  --text-accent: var(--accent-color);
  --text-dark: #121111;
}


/* Global box-sizing rule */
*,
*::before, 
*::after {
  box-sizing: border-box;
}


/* Body and page section styles */
body {
    background-color: var(--bg-primary);
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;
}

body .page-section-heading {
    letter-spacing: 0.3em;
    color: var( --text-primary);
}

.page-section {
    background: var(--bg-primary);
    box-shadow: 0 0 20px 10px var(--bg-primary);
}



/* A Dividert kódja */
.hud-container {
    width: 100%;
}

.hud-divider-horizon {
    position: relative;
    height: 20px;
    width: 100%;
    border: 2px solid var(--accent);
    border-radius: 10px;
    /* Fontos: levágja a kilógó fénycsíkot a sarkoknál */
    overflow: hidden; 
    
    /* Háttér rács */
    background-image: 
        linear-gradient(90deg, transparent 50%, rgba(201, 21, 198, 0.3) 50%),
        linear-gradient(0deg, transparent 50%, rgba(25, 0, 47, 0.5) 50%);
    background-size: 10px 10px;
    
    /* Belső és külső izzás */
    box-shadow: 
        inset 0 0 15px #19002F,
        0 0 10px rgba(193, 56, 209, 0.4);
}

.hud-divider-horizon::before {
    content: '';
    position: absolute;
    top: 0;
    width: 150px; /* Kicsit szélesebb fény a lágyabb átmenetért */
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgb(230, 0, 255), 
        transparent);
    filter: blur(4px);
    animation: movingLight 6s infinite linear; /* Próbáld ki az ease-in-out-ot! */
}

@keyframes movingLight {
    0% { left: -60%; }
    100% { left: 110%; }
}



/* Navigation styles */
.navbar {
    background-color: rgba(0, 5, 55, 0.8); 
    backdrop-filter: blur(12px);
    border-bottom: 3px solid #cb31e0c6;
    padding: 0;
}

nav a img {
    width: clamp(20px, 4vw, 70px);
    border-radius: 30%;
    scale: 1;
    transition: all 0.3s ease-in-out;
}

nav a img:hover {
    scale: 1.1;
    box-shadow: var(--accent) 0px 0px 10px 5px;
}

.navbar-toggler {
    background-color: var(--secondary);
    color: var(--text-secondary);
    font-size: clamp(1rem, 2vw, 1.5rem)
}

.navbar-toggler:focus {
    box-shadow: var(--accent) 0px 0px 10px 5px;
}

.navbar-nav a {
    font-size: clamp(1rem, 2vw, 1.5rem);
}

#mainNav .nav-link {
    color: var(--text-secondary);
    scale: 1;
    transition: all 0.3s ease-in-out;
}

#mainNav .nav-link:hover, 
#mainNav .nav-link:focus,
#mainNav .nav-link.active {
    background-color: var(--secondary);
    color: var(--accent);
    font-weight: 600;
    scale: 1.1;
    box-shadow: var(--accent) 0px 0px 10px 5px;
}



/* Header styles */
.header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)),
    url(/dist/assets/img/header.jpg);
    background-size: cover;
    background-position: center;
}

.header h1, p {
    color: var(--text-secondary);
}



/* Portfolio section styles */
.portfolio-img-fix {
    object-fit: cover;
    object-position: left center;
    width: 100%;
    height: 260px;
    border-radius: 0.5rem;
    scale: 1;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* --- Portfolio Hover Effektek --- */

/* 1. A konténer beállítása */
.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* 2. Az overlay stílusa */
.portfolio-item-caption {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--bg-primary-opacity);
    color: var(--text-primary);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
/* 3. A felirat megjelenítése */
.portfolio-item:hover .portfolio-item-caption {
    opacity: 1;
}

/* 4. Kép nagyítása (Zoom) */
.portfolio-item:hover {
    scale: 1.1;
    box-shadow: var(--accent) 0px 0px 10px 5px;
}

/* 5. A szöveg stílusa */
.portfolio-item-caption-content h3 {
    font-weight: 700;
    letter-spacing: 1px;
}



/*About section styles */
#about {
    background-color: var(--secondary);
}

.avatar {
    /* Minimum: 200px, Ideális: 30%, Maximum: 500px */
    width: clamp(200px, 30vw, 500px); 
    border-radius: 50%;
}

.about h2 {
    color: var(--text-secondary);
}

.about-text {
    font-size: clamp(0.8rem, 2.5vw, 1.5rem);
    color: var(--text-secondary);
    line-height: 1.5;
}

.devicon-wordpress-plain {
    color: #027198;
}



/* Contact form styles */
.form-floating> .form-control {
    height: 50px;
}

.form-floating > label {
    font-size: 1.2rem;
    visibility: hidden;
    opacity: 0;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    padding-top: 1.3rem;
    color: var(--bs-black);
    visibility: visible;
    opacity: 0.5; 
    scale: 0.9;
    translate: 0.15rem -0.2rem;
    transition: all 0.3s ease-in-out;
}

#message {
    height: 200px;
    resize: none;
}

.form-btn-container button:hover {
    color: var(--accent);
    box-shadow: var(--accent) 0px 0px 10px 5px;
}

.btn-primary {
    background-color: var(--bs-white);
    border-color: var(--bs-white);
    color: var(--secondary);
    padding: 0.75rem 1.5rem;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    
}

.btn-primary:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--text-secondary);
}



/* --- Űrlap validáció stílusok (:user-invalid megoldás) --- */

/* 1. Piros keret és ikon, ha a felhasználó hibásan töltötte ki (vagy üresen hagyta interakció után) */
.form-control:user-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5zM6 8.2a.3.3 0 000 .6.3.3 0 000-.6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    border-color: var(--bs-danger);
    padding-right: calc(1.5em + 0.75rem);
}

/* 2. Hibaüzenet megjelenítése */
.form-control:user-invalid ~ .invalid-feedback {
    display: block;
    color: var(--bs-danger);
    margin-top: 5px;
    font-size: 1rem;
}

/* 3. Ha épp írunk benne (:focus), akkor ne legyen piros, még ha hibás is */
.form-control:user-invalid:focus {
    background-image: none;
    border-color: var(--bs-info);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Kék ragyogás */
}

.form-control:user-invalid:focus ~ .invalid-feedback {
    display: none;
}

/* Footer styles */
footer {
    background-color: var(--secondary);
}

footer .phone,
footer .email {
    width: fit-content;
    font-size: clamp(1rem, 1.2vw, 3rem);
    color: var(--text-secondary);
    scale: 1;
    cursor: pointer;
    transition: scale 0.3s ease-in-out, color 0.3s ease-in-out;
}

footer .phone:active,
footer .email:active {
    scale: 0.9;
    color: var(--accent);
    transition: scale 0.1s ease-in-out, color 0.1s ease-in-out;
}



.social-icon {
    color: var(--text-secondary);
    font-size: clamp(1.5rem, 3vw, 3rem);
    scale: 1;
    transition: scale 0.3s ease, color 0.3s ease;
}

.social-icon:active {
    scale: 0.9;
    color: var(--accent);
    transition: all 0.1s ease;
}

.copyright {
    background-color: var(--secondary);
    color: var(--text-secondary);
}

/* Media Queries for Responsiveness */
@media (hover: hover) {
    .social-icon:hover {
        scale: 1.3;
        color: var(--accent);
    }

    footer .phone:hover,
    footer .email:hover {
    scale: 1.1;
    color: var(--accent);
    }
}