/* ================================================================
   TRIKDIS – custom.css
   W3.CSS v5 kompatibilis | 2026
   Elérés: https://static.trikdis.hu/css/custom.css
   ================================================================ */


/* -- W3.CSS v5 override-ok --------------------------------------
   v5 bevezette: .w3-button:hover { color:#000; background:#ccc }
   Navbar linkek: piros hover (okosriaszto.eu stílus)            */
.w3-bar .w3-button:hover,
.w3-bar .w3-bar-item.w3-button:hover  { background-color: var(--red) !important; color: #fff !important; }
.w3-button.w3-black:hover             { background-color: #000 !important; color: #fff !important; }

/* Gombok: sortörés engedélyezve */
.w3-button { white-space: normal !important; }


/* -- CSS változók ----------------------------------------------- */
:root { --red: #ed1e24; --blue: #0d5c98; --green: #10c838; }


/* -- Betűtípus és alap ------------------------------------------ */
body, html, h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; }
body, html { height: 100%; line-height: 1.4; margin: 0; font-weight: 300; text-align: justify; scroll-behavior: smooth; }

@media (min-width: 993px)                        { html { font-size: 17px; } }
@media (min-width: 601px) and (max-width: 992px) { html { font-size: 14px; } }
@media (max-width: 600px)                        { html { font-size: 13px; } }

h1, h2, h3 { font-weight: 500; line-height: 1.2; }
h1 { font-size: 2.5rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.2rem; }

p            { margin: .5rem 0; }
a            { text-decoration: none; color: inherit; }
p a          { color: var(--red); }
b, strong    { font-weight: 600; }
footer li    { list-style: none; }


/* -- Container és rácspadding desktop-on ----------------------- */
.w3-container { padding: 2.5rem .5rem; }
.w3-dark-grey { background-color: #333 !important; }

@media (min-width: 993px) {
	.w3-container   { padding-left: 4rem !important; padding-right: 4rem !important; }
	.w3-row-padding { padding-left: 3rem !important; padding-right: 3rem !important; }
}


/* -- Szövegosztályok ------------------------------------------- */
.text-xxl, .xxlarge { font-size: 2.5rem; font-weight: 500; }
.text-xl,  .xlarge  { font-size: 2rem;   font-weight: 600; }
.text-l              { font-size: 1.5rem; font-weight: 500; }
.text-m              { font-size: 1.3rem; }
.text-s              { font-size: 1rem; }
.text-xs             { font-size: .9rem; }


/* -- Padding / gap segédosztályok ------------------------------ */
.padding-l, .padding-large { padding: .5rem 1.5rem !important; }
.gap-l { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.gap-m { padding-left: 1rem  !important; padding-right: 1rem  !important; }
.gap-s { padding-left: .7rem !important; padding-right: .7rem !important; }


/* -- Navigáció -------------------------------------------------- */
#logo { max-height: 2em; margin-top: .25rem; }

/* Navbar alatti elválasztóvonal + tömörebb gombok */
.w3-bar            { border-bottom: 0.1em #333 solid; }
.w3-bar .w3-button { padding: .5rem; }

/* Hover-underline animáció (bannereken használva) */
.hover-underline-animation { position: relative; }
.hover-underline-animation::after {
	content: ''; position: absolute;
	bottom: 0; left: 0; width: 100%; height: 2px;
	background-color: #fff;
	transform: scaleX(0); transform-origin: bottom right;
	transition: transform .5s ease-out;
}
.hover-underline-animation:hover::after { transform: scaleX(1); transform-origin: bottom left; }


/* -- Hero / fejléc háttérkép ----------------------------------- */
.bgimg        { background-position: center top; background-size: cover; min-height: 100%; }
.home-padding { padding: 3em 5em; }
.text-shadow  { text-shadow: 3px 3px 4px rgba(0,0,0,.5); }

@media (max-width: 600px) {
	.home-padding { padding: 2em 1em; }
	h1            { font-size: 1.8rem; }
}


/* -- Ikonok ----------------------------------------------------- */
.icon       { width: auto; max-width: 100%; padding: .1rem; }
.icon-grade { max-height: 30rem !important; }
.icon-l     { max-height: 6.4rem !important; }
.icon-m     { max-height: 5rem   !important; }
.icon-s     { max-height: 2.5rem !important; margin: .25rem; }
.icon-xs    { max-height: 1.5rem !important; }
.icon-xxs   { max-height: 1.2rem !important; vertical-align: sub; }

.flex { display: flex; flex-wrap: wrap; justify-content: center; }


/* -- Szín segédosztályok --------------------------------------- */
.red      { color: var(--red); }
.bg-red   { background-color: var(--red)   !important; }
.bg-blue  { background-color: var(--blue)  !important; }
.bg-green { background-color: var(--green) !important; }

.border-red, .border-red:hover { border: 0.2em var(--red) solid; }

.hover-red:hover,   .bg-red:hover,
.w3-bar-item:hover                  { background-color: var(--red)   !important; color: #fff !important; }
.hover-blue:hover,  .bg-blue:hover  { background-color: var(--blue)  !important; color: #fff !important; }
.hover-green:hover, .bg-green:hover { background-color: var(--green) !important; color: #fff !important; }


/* -- Alert box -------------------------------------------------- */
.alert-box        { background: #fff8e1; border-left: 4px solid #f59e0b; padding: 1rem 1.25rem; margin: 1rem 0; border-radius: 0 4px 4px 0; }
.alert-box strong { color: #92400e; }


/* -- Kompatibilitás táblázat ----------------------------------- */
.direct-control { color: var(--red); font-weight: 500; }

.data { padding: 0.4rem 0.6rem; border-bottom: 0.1rem solid #ddd; }
.w3-row-padding .data:nth-child(even) { background-color: #fafafa; }


/* -- Összehasonlító táblázat ----------------------------------- */
.compare-table    { width: 100%; border-collapse: collapse; }
.compare-table th { padding: .75rem 1rem; font-weight: 600; font-size: 1rem; }
.compare-table td { padding: .6rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .95rem; vertical-align: top; }
.compare-table tr:last-child td { border-bottom: none; }

.c-yes     { color: #4caf50; font-size: 1.1rem; }
.c-no      { color: #f44336; font-size: 1.1rem; }
.c-partial { color: #ff9800; font-size: 1.1rem; }


/* -- Termék kártyák -------------------------------------------- */
.prod-flex { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.prod-card-wrap {
	flex: 0 1 calc((100% - 3 * 1.25rem) / 4);
	min-width: 180px; max-width: calc((100% - 3 * 1.25rem) / 4);
	display: flex; flex-direction: column;
}
.prod-card-wrap .w3-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.prod-card-img            { padding: 1.4rem 2.1rem 1rem; text-align: center; background: #fafafa; }
.prod-card-img img        { display: block; margin: 0 auto; max-width: 100%; }

.prod-card-content              { padding: 1rem 2.1rem .75rem; flex: 1; display: flex; flex-direction: column; }
.prod-card-content h4           { font-size: 1rem; margin: 0 0 .25rem; }
.prod-card-content .w3-opacity  { font-size: .85rem; margin: 0 0 .4rem; }
.prod-card-content p            { font-size: .88rem; flex: 1; margin: .25rem 0 0; }

.prod-card-btn a          { display: block; }
.prod-card-btn .w3-button { display: block; width: 100%; border-radius: 0; white-space: normal; padding: .65rem 1rem; }

@media (max-width: 900px) { .prod-card-wrap { flex: 1 1 calc((100% - 1.25rem) / 2); max-width: 100%; } }
@media (max-width: 500px) { .prod-card-wrap { flex: 1 1 100%; max-width: 100%; } }