/* ==========================================================================
   NEXUS INFORMATIKA
   Fájl.............: components.css
   Modul............: Components
   Verzió...........: 1.0.0

   Feladata:
   Újra felhasználható komponensek stílusainak kezelése.

========================================================================== */


/* ==========================================================
   LOGÓ
========================================================== */

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    display:block;

    height:60px;

    width:auto;

}

/* ==========================================================
   NAVIGÁCIÓ
========================================================== */

.main-navigation{

    flex:1;

    display:flex;

    justify-content:center;

}

.main-navigation ul{

    display:flex;

    align-items:center;

    gap:40px;

}

.main-navigation a{

    position:relative;

    color:var(--text-primary);

    font-size:1rem;

    font-weight:500;

    transition:color var(--transition-fast);

}

.main-navigation a:hover{

    color:var(--color-primary);

}

/* ==========================================================
   GOMBOK - ALAP
========================================================== */

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:216px;

    height:56px;

    padding:0 28px;

    border-radius:16px;

    font-size:var(--font-md);

    font-weight:600;

    cursor:pointer;

    transition:all var(--transition-normal);

}


/* ==========================================================
   ELSŐDLEGES GOMB
========================================================== */

.button-primary{

    background:var(--color-primary);

    color:#ffffff;

    border:none;

}

.button-primary:hover{

    background:var(--color-primary-dark);

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);

}


/* ==========================================================
   MÁSODLAGOS GOMB
========================================================== */

.button-secondary{

    background:transparent;

    color:var(--text-primary);

    border:1px solid var(--border-color);

}

.button-secondary:hover{

    background:rgba(255,255,255,.05);

    border-color:var(--color-primary);

}


/* ==========================================================
   IKON GOMB
========================================================== */

.button-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    border-radius:16px;

    background:var(--color-primary);

    cursor:pointer;

    transition:all var(--transition-normal);

}

.button-icon:hover{

    background:var(--color-primary-dark);

    transform:translateY(-2px);

}

/* ==========================================================
   ICON BOX
========================================================== */

.icon-box{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    margin-bottom:24px;

    border-radius:20px;

    background:rgba(0,140,255,.08);

    color:var(--color-primary);

    font-size:2rem;

}

/* ==========================================================
   SZOLGÁLTATÁS IKONOK
========================================================== */

.service-icon{

    width:72px;

    height:72px;

    object-fit:contain;

}


/* ==========================================================
   KÁRTYÁK
========================================================== */

.card{

    position:relative;

    display:flex;

    flex-direction:column;

    padding:32px;

    background:var(--bg-surface);

    border:1px solid var(--border-color);

    border-radius:24px;

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);

    overflow:hidden;

}

.card:hover{

    transform:translateY(-6px);

    border-color:rgba(0,140,255,.35);

    box-shadow:var(--shadow-lg);

}

/* ==========================================================
   CARD HEADER
========================================================== */

.card-header{

    margin-bottom:24px;

}

.card-title{

    margin-bottom:16px;

}

.card-text{

    line-height:1.8;

}



/* ==========================================================
   KÉPEK
========================================================== */

img{

    max-width:100%;

    display:block;

}
/* ==========================================================================
   SECTION TITLE
========================================================================== */

.section-title{

    max-width:700px;

    margin:0 auto 60px;

}

.section-title.left{

    margin:0 0 60px;

    text-align:left;

}

.section-title.center{

    text-align:center;

}

.section-title h2{

    margin-bottom:16px;

    font-size:2.4rem;

    font-weight:700;

    color:var(--color-heading);

}

.section-title p{

    font-size:1.1rem;

    line-height:1.8;

    color:var(--color-text);

}
/* ==========================================================
   GRID
========================================================== */

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

@media(max-width:992px){

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

}