/*
Theme Name: Portfólió beta
Theme URI: 
Author: Monori Ferenc
Author URI: https://monoriferenc.webtelek.hu/
Description: Ez a sablon Monori Ferenc webdesigner portfólió weboldalához készült.
Version: 1.2
Text Domain: monoriferenc
*/

:root {
    --background: #023047;
    --background-brand: #264653;
    --text-color: #DD9917;
    --uri-color: #00caa6;
    --bolder-color: #a6007f;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
body {
    background-color: var(--background);
    color: var(--text-color);
}

.background{
    background: var(--background-brand) !important;
}


p {
    font-size: clamp(0.9rem, 1vw + 0.3rem, 1.1rem);
}

h1 {
    font-size: clamp(2rem, 4vw + 1rem, 3rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw + 0.8rem, 2.2rem);
}

h3 {
    font-size: clamp(1.2rem, 2vw + 0.6rem, 1.8rem);
}

h4,
h5,
h6 {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.3rem);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: var(--text-color);
}



p {
    font-family: "Alfa Slab One", serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Anton";
}

nav {
    height: 85px;
}

.navbar {
    height: 100px !important;
}

.navbar-brand{
    font-size: 16px;
}

main,
aside,
footer {
    text-shadow: 5px 5px 5px #000 !important;
}

a {
    color: var(--uri-color);
    text-decoration: none !important;
}

aside ul li {
    list-style: none !important;
}

aside ul {
    margin: 25px 0;
    padding: 0px;
}

aside ul li a {
    color: var(--uri-color);
    font-weight: 600;
    text-decoration: none;
    padding: 0px;
}

article {
    background-color: var(--background-brand);
    padding: 25px;
}

article a {
    text-decoration: none;
}

article .text-muted {
    color: var(--text-color) !important;
}

article .btn{
    font-weight: 900;
    text-shadow: none;
}

img {
    max-width: 100% !important;
    height: 100%;
}


.c-item {
    max-height: 75vh;
}

.carousel-caption {
    background-color: rgb(0, 0, 0, 0.5);
    text-shadow: 3px 5px 5px black;
    font-family: "Anton", sans-serif;
}

.carousel-indicators {
    top: 20px;
    margin-top: 10px;
    height: 15%;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-color: #000;
    padding: 20px;
    border-radius: 5px;
}


.col {
    background-color: var(--background-brand);
    margin: 25px;
}

input {
    border-radius: 10px;
}



#bodyContent {
    background-color: var(--background);
}

/* ===== NAVBAR ===== */
.navbar {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    z-index: 1000;
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

.navbar-nav .nav-link {
    font-weight: 500;
    color: #333;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
    color: #0d6efd;
}

/* ===== DROPDOWN ===== */
.dropdown-menu {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
    transition: all 0.3s ease;
    left: auto;
    right: 0;
    /* ➜ balra nyíló dropdown */
}

/* Almenü elemek */
.dropdown-item {
    padding: 0.6rem 1.2rem;
    color: #333;
    font-weight: 400;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #0d6efd;
    color: #fff;
}


.pagination {
    margin: auto;
    font-size: 18px;
}
.page-numbers{
    background-color: var(--background-brand);
    color: var(--uri-color);
    padding: 25px;
    margin: auto;
    text-decoration: none !important;
}

.current{
    color: var(--text-color);
}


textarea{
    resize: none !important;
    min-height: 200px;
    max-height: 200px;
}

.no-text-shadow {
    text-shadow: none !important;
    box-shadow: none;
}

/* ===== MOBIL MENÜ ===== */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #fff;
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #eee;
    }

    .navbar-nav .dropdown-menu {
        display: none;
        position: static;
        float: none;
        box-shadow: none;
        border: none;
        margin-top: 0;
        padding-left: 1rem;
        background-color: transparent;
        right: auto;
        /* Mobilon normál lenyílás */
    }

    .navbar-nav .dropdown.show>.dropdown-menu {
        display: block;
        animation: dropdownFade 0.25s ease forwards;
    }

    @keyframes dropdownFade {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .navbar-nav .dropdown-item {
        padding: 0.5rem 0.75rem;
    }

    .navbar-toggler {
        border: none;
        outline: none;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%280,0,0,0.7%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
}

/* ===== DROPDOWN FADE-DESKTOP ===== */
@media (min-width: 992px) {

    .dropdown:hover>.dropdown-menu {
        display: block;
        margin-top: 0;
        animation: dropdownFadeLeft 0.25s ease forwards;
    }

    /* Balra irányuló megjelenés */
    @keyframes dropdownFadeLeft {
        from {
            opacity: 0;
            transform: translateX(10px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

@media (max-width: 321px) {

    header h1,
    header h2,
    header h3,
    header h4,
    header h5,
    header h6,
    header p {
        font-size: 0.55rem;
    }

}