/* ---------------------------------- index.php ---------------------------------- */

:root {
    --primary-color: #0f1f33; /* Sötétkék */
    --accent-color: #d6004f;  /* Ciklámenesebb piros kiemelés */
    --bg-light: #f8f9fa;
    --text-dark: #333;
    --bg-light: #f8f9fa;

    --sidebar-width: 300px;
    --header-height: 80px;
}

body {font-size: 12px; }
a,  a:visited { color:  #0269ae; font-weight: bold; text-decoration: none; }
a:hover       { color:  #008dea; font-weight: bold; text-decoration: none;  }
h2            { padding-bottom: 10px; margin-top: 0;  font-size: 1.6rem; }  /* CÍM */ 
h3            { font-size: 1.3rem;  margin-top:0; }                                     /* ALCÍM */     /* 1.3 rem =  a Html gyökér méret 1.3-szorosa (Reszponzív méret, jól skálázódik telefonon is) */
p             { margin-bottom: 15px;  font-family: 'Roboto', sans-serif;  font-size:  1.0rem; }

h2, h3, strong   {    color: #555; } 
strong  { font-weight:500;   } 
body, p  { font-weight:300; color:black;   } 

/* Reset & Base */
* { box-sizing: border-box; }
body { 
    margin: 0; padding: 0; 
    font-family: 'Roboto', sans-serif; 
    background-color: var(--bg-light); 
    color: var(--text-dark); 
    line-height: 1.4; 
    display: flex;  flex-direction: column;  min-height: 100vh; }

/* Képek és Táblázatok reszponzivitása (Legacy tartalom javítása) */
table { width: 100% !important; max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
td, th { padding: 8px; text-align: left; var(--text-dark);}

/* Layout */
header {  background-color: var(--primary-color); background-image: url('../img/banner.jpg'); background-size: cover; background-position: left; color: #fff; height: var(--header-height);
          padding: 0 20px; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.2);  }

header h1 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }  /*  TAMKER logo */
header h1 a, header h1 a:visited { color: white; text-decoration: none; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }  /*  TAMKER logo */



/*  -----------------  KÉP MÉRETEK  -----------------    */
img         {width:  !important; }   /* ez csak azért kell, hogy más style ne méretezze át a képeket */
.kep        {width:150px; height: auto; border: 0;   }
.katalogus_kep {width:140px !important; height: auto; border: 2px solid #CCC; }
a .katalogus_kep:hover  {border: 2px solid #2a2a2a; }
.kozepeskep {width:100% !important;  max-width:300px !important; }
.nagykep    {width:100% !important;  max-width:500px !important; }



/* ------------------------------------------------- Menu ------------------------------------------------- */

.main-container {   display: flex; flex: 1;  max-width: 1400px; margin: calc(var(--header-height) + 20px) auto 20px; width: 95%; gap: 30px; position: relative; }

/* Sidebar / Menu */
aside { 
    flex: 0 0 var(--sidebar-width); 
    background: #fff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    align-self: flex-start; 
}

aside h3 {  margin-top: 0;     border-bottom: 2px solid var(--primary-color);     padding-bottom: 15px;  font-size: 1.2rem;     color: var(--primary-color);    text-transform: uppercase;}

/* menü Content */
main { 
    flex: 1; 
    background: #fff; 
    padding: 40px; 
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    min-width: 0; /* Prevents flex item from overflowing */
}


/* ------------------------------------------------- Footer ------------------------------------------------- */
footer { 
    background: var(--primary-color); 
    color: #fff; 
    background: #e9ecef; 
    color: var(--text-dark); 
    text-align: center; 
    padding: 20px; 
    margin-top: auto; 
    font-size: 0.9rem; 
    border-top: 4px solid #01426d;
}
footer a { color:  #333; }
footer a:hover { color:  #333; }

/* Search Form */
.search-form { display: flex; gap: 0; }
.search-form input[type="text"] { 
    padding: 8px 15px; 
    border: none; 
    border-radius: 20px 0 0 20px; 
    outline: none;
    font-family: inherit;
}
.search-form input[type="submit"] { 
    padding: 8px 20px; 
    background: var(--accent-color); 
    color: white; 
    border: none; 
    border-radius: 0 20px 20px 0; 
    cursor: pointer; 
    font-weight: bold; 
    transition: background 0.2s;
}
.search-form input[type="submit"]:hover { background: #a3003c; }

/* Responsive Menu Tree */
ul.tree { list-style: none; padding-left: 0; margin: 0; font-size: 1.0rem; }
ul.tree li { margin: 2px 0; }
ul.tree ul { list-style: none; padding-left: 15px; margin-top: 5px; border-left: 1px solid #eee; }

ul.tree details > summary { cursor: pointer; list-style: none; font-weight: 500; padding: 10px; background: #f4f6f8; border-radius: 4px; margin-bottom: 2px; transition: background 0.2s; display: flex; align-items: center;}
ul.tree details > summary::-webkit-details-marker { display: none; }
ul.tree details > summary:hover { background: #e9ecef; color: var(--primary-color); }

ul.tree details > summary::before { content: '+'; display: inline-flex;  justify-content: center; align-items: center; width: 20px; height: 20px; background: #ddd; 
                                    color: #555; border-radius: 50%;  font-size: 14px;  margin-right: 10px; transition: transform 0.2s; }

ul.tree details[open] > summary::before { transform: rotate(90deg); }

ul.tree a.menu-link { font-weight: normal; display: block; padding: 8px 10px; border-radius: 4px; color: #555; }
ul.tree a.menu-link:hover { background: #eef2f5; color: var(--primary-color);  }
ul.tree .menu-text { padding: 8px 10px; display: block; color: #777; }

/* Active Menu Item */
ul.tree a.menu-link.active, ul.tree details > summary.active { background: #cccccc; color: #333; }

/* Mobile Menu Toggle */
.menu-toggle { display: none; background: transparent; border: none; color: #fff; padding: 10px; cursor: pointer;  font-size: 1.5rem;  }


/* ------------------------------------------ Responsive Design ------------------------------------------ */

@media (max-width: 900px) {


    .main-container { flex-direction: column; margin-top: var(--header-height); }
    
    aside { position: fixed; top: var(--header-height); left: -100%; width: 80%; max-width: 300px; height: calc(100vh - var(--header-height)); z-index: 999; transition: left 0.3s ease; border-radius: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
    
    aside.open { left: 0; }
    
    /* Mobilon a menü betűmérete egyezzen meg az oldal szövegével */
    ul.tree { font-size: 1.0rem; }
    
    .menu-toggle { display: block; }
    
    .overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 998; }
    .overlay.active { display: block; }
    
    .search-box { display: none; } /* Opcionális: mobilon elrejthetjük vagy áthelyezhetjük */
    
    main { padding: 20px; }  /* menü Content */
    footer { background: none; color: var(--text-dark); }
    footer a { color: var(--primary-color); }
}



/* Search Results Styling - Jobb megjelenés mobilon */
li.ker { margin-bottom: 12px; list-style-type: none; border-bottom: 1px solid #eee; padding-bottom: 8px; font-size: 1.0rem; }
li.ker a { font-weight: 500; display: block; padding: 5px 0; color: var(--primary-color); font-size: 1.0rem; }
li.ker:last-child { border-bottom: none; }





 /*  -----------------  A terméklisták kétoszlopos elrendezése   -----------------    */
.divTable   {width:100% }
.divSor     {display:flex; margin-bottom:15px;}   
.divOszlop  {flex:0 0 200px} /* A táblázat baloldala 200px, a jobboldala meg amennyi hely marad */


 /* Rács elrendezés (Grid) div táblázat  */
 .div-racs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); /* 3 egyenlő oszlop */ gap: 5px; /* 5px távolság a cellák közt */ }
 .div-cella { border: 1px solid #ddd; padding: 15px; text-align: left; display: flex; align-items: center; justify-content: flex-start;  }
 .div-cella .kep { margin-right: 10px; }   

 /* -------------------------------------------------  Telefonon ------------------------------------------------- */
@media (max-width: 600px) {
     /* A terméklisták kétoszlopos elrendezésének módosítása mobilon: egymás alá kerülnek az elemek. */
    .divSor, main div[style*="display:flex"][style*="margin-bottom"] {  flex-direction: column; align-items: center; }
    /* A bal oldali (kép) oszlop ne legyen fix szélességű, és kapjon egy kis távolságot alul. */
    .divOszlop, main div[style*="flex:0 0"] {  flex-basis: auto !important; /* Felülírja a fix szélességet */  width: auto !important;  margin-bottom: 15px;  }
    /* A képek ne legyenek túl kicsik, és igazodjanak a képernyőhöz. */
    .kep, .katalogus_kep,  main div[style*="flex:0 0"] img {  width: 150px !important; max-width: 100%;   height: auto !important; }
    /* A második (szöveges) oszlop tartalma maradjon balra igazított és töltse ki a rendelkezésre álló helyet. */
    .divOszlop + div, main div[style*="flex:0 0"] + div {  text-align: left;   width: 100%; }
    
    .div-racs { grid-template-columns: 1fr; }   /* Reszponzivitás: Mobilon (600px alatt) 1 oszlopos */
}