/* ==========================================================================
   ikszplusz Kft. – ikszplusz.hu
   Közös stíluslap. Minden oldal ezt tölti be.
   A látványterv szerinti arculat: betűk, színek, térközök.
   ========================================================================== */

:root{
  /* Arculati színek */
  --navy:#092557;
  --navy-dark:#061A3D;
  --gold:#BAAF78;
  --gold-deep:#7A6B33;
  --gold-muted:#A2935A;
  --ivory:#F6F4EC;
  --line:#E4E0D2;
  --text:#333333;
  --text-soft:#4A5160;

  /* Oldalsó margó – töréspontonként változik, az inline stílusok ezt használják */
  --gut:120px;

  /* Fejléc magassága (a horgonyokhoz tartozó görgetési eltolás) */
  --header-h:136px;
}

@media (max-width:1240px){ :root{ --gut:64px; } }
@media (max-width:900px){  :root{ --gut:32px; --header-h:70px; } }
@media (max-width:600px){  :root{ --gut:20px; } }

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:#FFFFFF;
  color:var(--text);
  overflow-x:hidden;
}

img{ max-width:100%; }
img:not([style*="object-fit"]){ height:auto; }
svg{ flex-shrink:0; }

a{ color:var(--gold-deep); text-decoration:none; }
a:hover{ color:#4F4520; text-decoration:underline; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold-muted);
  outline-offset:2px;
}

/* A látványtervi táblát helyettesítő oldalkeret */
.page{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  background:#FFFFFF;
  color:var(--text);
  display:flex;
  flex-direction:column;
}

/* Ugrás a tartalomra – billentyűzetes navigációhoz */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px; font-weight:700;
}
.skip-link:focus{ left:0; text-decoration:none; }

/* ==========================================================================
   Felső adatsáv
   ========================================================================== */
.topbar{
  background:var(--navy);
  color:#D8DEE9;
  padding:0 var(--gut);
  min-height:46px;
  display:flex; align-items:center; gap:10px 28px;
  font-size:14px; flex-wrap:wrap;
}
.topbar a{ color:#D8DEE9; }
.topbar a:hover{ color:#fff; }
.topbar .sep{ color:#4A6087; }
.topbar .spacer{ flex-grow:1; }
@media (max-width:900px){
  .topbar{ padding-top:8px; padding-bottom:8px; font-size:13px; gap:4px 16px; }
  .topbar .sep{ display:none; }
  .topbar .spacer{ display:none; }
  .topbar > *{ flex:0 0 100%; }
}

/* ==========================================================================
   Fejléc és navigáció
   ========================================================================== */
.site-header{
  background:#FFFFFF;
  border-bottom:1px solid var(--line);
  padding:0 var(--gut);
  min-height:90px;
  display:flex; align-items:center; gap:24px;
  position:sticky; top:0; z-index:100;
}
.site-header .brand{ display:flex; flex-direction:column; flex-shrink:0; }
.site-header .brand:hover{ text-decoration:none; }
.site-header .brand-name{
  white-space:nowrap; font-family:"Roboto Slab",Georgia,serif;
  font-size:28px; font-weight:700; color:var(--navy); letter-spacing:-.4px;
}
.site-header .brand-name span{ color:var(--gold-muted); }
.site-header .brand-claim{
  white-space:nowrap; font-size:11px; letter-spacing:2.4px;
  text-transform:uppercase; color:#6E7686;
}
.main-nav{
  display:flex; gap:25px; font-size:15.5px; font-weight:500;
  color:var(--navy); white-space:nowrap; flex-wrap:wrap;
}
.main-nav a{ color:var(--navy); }
.main-nav a:hover{ color:var(--gold-deep); }
.main-nav a[aria-current="page"]{ color:var(--gold-deep); font-weight:700; }
.header-spacer{ flex-grow:1; }
.header-phone{ font-size:15.5px; font-weight:700; color:var(--navy); white-space:nowrap; }
.header-phone:hover{ color:var(--gold-deep); }
.header-cta{
  background:var(--gold); color:var(--navy);
  padding:12px 22px; border-radius:4px;
  font-size:15.5px; font-weight:700; white-space:nowrap; flex-shrink:0;
}
.header-cta:hover{ background:var(--gold-muted); color:var(--navy); text-decoration:none; }

/* Hamburger */
.nav-toggle{
  display:none;
  margin-left:auto;
  width:46px; height:46px;
  border:1px solid var(--line); border-radius:4px;
  background:#fff; cursor:pointer;
  align-items:center; justify-content:center; flex-shrink:0;
}
.nav-toggle .bars{ position:relative; width:22px; height:2px; background:var(--navy); display:block; }
.nav-toggle .bars::before,.nav-toggle .bars::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--navy);
  transition:transform .2s ease, top .2s ease;
}
.nav-toggle .bars::before{ top:-7px; }
.nav-toggle .bars::after{ top:7px; }
.nav-toggle[aria-expanded="true"] .bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .bars::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after{ top:0; transform:rotate(-45deg); }

/* Mobil menü panel */
.mobile-nav{
  display:none;
  position:fixed; inset:var(--header-h) 0 0 0;
  background:#fff; z-index:99;
  overflow-y:auto;
  padding:24px var(--gut) 48px var(--gut);
  border-top:1px solid var(--line);
}
.mobile-nav.open{ display:block; }
.mobile-nav ul{ list-style:none; margin:0; padding:0; }
.mobile-nav > ul > li{ border-bottom:1px solid var(--line); }
.mobile-nav a{
  display:block; padding:15px 0; font-size:17px; font-weight:500; color:var(--navy);
}
.mobile-nav a:hover{ text-decoration:none; color:var(--gold-deep); }
.mobile-nav .group-title{
  display:block; padding:18px 0 6px 0; font-size:12.5px; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--gold-deep); font-weight:700;
}
.mobile-nav .sub a{ padding:11px 0 11px 14px; font-size:15.5px; color:var(--text-soft); }
.mobile-nav .mobile-actions{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.mobile-nav .mobile-actions a{
  text-align:center; border-radius:4px; padding:15px 20px; font-weight:700; font-size:16px;
}
.mobile-nav .m-cta{ background:var(--gold); color:var(--navy); }
.mobile-nav .m-tel{ border:1.5px solid var(--navy); color:var(--navy); }
body.nav-open{ overflow:hidden; }

@media (max-width:1100px){
  .main-nav{ gap:18px; font-size:15px; }
  .header-phone{ display:none; }
}
@media (max-width:980px){
  .site-header{ min-height:70px; gap:12px; }
  .site-header .brand-name{ font-size:24px; }
  .site-header .brand-claim{ font-size:10px; letter-spacing:1.8px; }
  .main-nav{ display:none; }
  .header-cta{ display:none; }
  .header-spacer{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ==========================================================================
   Általános tördelési szabályok a látványtervi inline stílusok mellé
   ========================================================================== */

/* Vízszintes elrendezések mobilon egymás alá kerülnek */
@media (max-width:820px){
  .page [style*="display: flex"]:not(.keep-row):not(.topbar):not(.site-header){ row-gap:18px; }
}

/* Táblázatok: kis kijelzőn vízszintesen görgethetők, keret jelzi */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0;
}
.table-scroll > *{ min-width:640px; }

/* Lábléc */
.site-footer{ margin-top:auto; }
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }

/* ==========================================================================
   Űrlapok
   ========================================================================== */
.form-field{ display:flex; flex-direction:column; gap:7px; }
.form-field label{ font-size:14.5px; font-weight:700; color:var(--navy); }
.form-field .hint{ font-size:13px; color:#6E6444; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea{
  font-family:inherit; font-size:16px; color:var(--text);
  padding:13px 14px; border:1px solid #CFC9B5; border-radius:4px;
  background:#fff; width:100%; min-height:48px;
}
.form-field textarea{ min-height:130px; resize:vertical; }
.form-field input::placeholder,.form-field textarea::placeholder{ color:#8C8878; }
.form-field.invalid input,.form-field.invalid select,.form-field.invalid textarea{
  border-color:#A33A2A; background:#FDF7F6;
}
.form-error{ font-size:13.5px; color:#A33A2A; font-weight:700; display:none; }
.form-field.invalid .form-error{ display:block; }

.form-check{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.55; }
.form-check input[type="checkbox"]{ width:19px; height:19px; margin:2px 0 0 0; flex-shrink:0; accent-color:var(--gold-deep); }
.form-check.invalid .form-error{ display:block; flex-basis:100%; }
.form-check.invalid input[type="checkbox"]{ outline:2px solid #A33A2A; outline-offset:2px; }

.btn{
  display:inline-block; border:0; cursor:pointer; font-family:inherit;
  font-size:16px; font-weight:700; padding:15px 30px; border-radius:4px;
  text-align:center; line-height:1.3;
}
.btn-primary{ background:var(--gold); color:var(--navy); }
.btn-primary:hover{ background:var(--gold-muted); color:var(--navy); text-decoration:none; }
.btn-outline{ background:transparent; border:1.5px solid var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; text-decoration:none; }
.btn[disabled]{ opacity:.55; cursor:progress; }

/* Kaptár mező – emberi szemnek láthatatlan, robotoknak látszik */
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.form-status{
  display:none; margin-top:16px; padding:15px 18px; border-radius:4px;
  font-size:15.5px; line-height:1.6;
}
.form-status.ok{ display:block; background:#EEF4EC; border:1px solid #BBD2B4; color:#25471D; }
.form-status.err{ display:block; background:#FDF1EF; border:1px solid #E3BBB4; color:#7A2418; }

/* ==========================================================================
   Tartalomjegyzék (jogi oldalak)
   ========================================================================== */
.toc a[aria-current="true"]{ color:var(--navy); font-weight:700; }
.legal-section{ scroll-margin-top:calc(var(--header-h) + 16px); }

/* ==========================================================================
   Sütibeállítások panel
   ========================================================================== */
.cookie-panel{
  position:fixed; inset:0; z-index:300;
  background:rgba(9,37,87,.55);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.cookie-panel.open{ display:flex; }
.cookie-panel__box{
  background:#fff; border-radius:6px; max-width:620px; width:100%;
  max-height:86vh; overflow-y:auto; padding:30px 32px;
  box-shadow:0 18px 48px rgba(6,26,61,.3);
}
.cookie-panel h2{
  margin:0 0 12px 0; font-family:"Roboto Slab",Georgia,serif;
  font-size:24px; color:var(--navy); font-weight:600;
}
.cookie-panel p{ margin:0 0 14px 0; font-size:15px; line-height:1.65; color:var(--text-soft); }
.cookie-row{
  border:1px solid var(--line); border-radius:4px; padding:15px 17px; margin-bottom:12px;
  display:flex; gap:14px; align-items:flex-start;
}
.cookie-row h3{ margin:0 0 4px 0; font-size:16px; color:var(--navy); }
.cookie-row p{ margin:0; font-size:14px; }
.cookie-row .state{
  margin-left:auto; flex-shrink:0; font-size:13px; font-weight:700;
  color:var(--gold-deep); white-space:nowrap; padding-top:2px;
}
.cookie-panel__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
@media (max-width:600px){
  .cookie-panel__box{ padding:24px 20px; }
  .cookie-panel__actions .btn{ width:100%; }
}

/* ==========================================================================
   Tudástár szűrő
   ========================================================================== */
.topic-filter[aria-pressed="true"]{
  background:var(--navy) !important; color:#fff !important; border-color:var(--navy) !important;
}
.article-card[hidden]{ display:none !important; }

/* ==========================================================================
   Nyomtatás
   ========================================================================== */
@media print{
  .topbar,.site-header,.mobile-nav,.nav-toggle,.cookie-panel,.skip-link{ display:none !important; }
  .page{ max-width:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; }
}


/* ==========================================================================
   Rólunk írták - ügyfélreferenciák
   ========================================================================== */
.testimonial-section{background:#F6F4EC;padding:66px var(--gut) 72px;}
.testimonial-head{max-width:820px;margin:0 0 30px;display:flex;flex-direction:column;gap:11px;}
.testimonial-eyebrow{font-size:13px;letter-spacing:2.6px;text-transform:uppercase;color:#7A6B33;font-weight:700;}
.testimonial-head h2{margin:0;font-family:"Roboto Slab",Georgia,serif;font-size:clamp(22px,2.5vw,36px);line-height:1.2;font-weight:600;color:#092557;}
.testimonial-head p{margin:0;font-size:16.5px;line-height:1.65;color:#4A5160;}
.testimonial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch;}
.testimonial-card{background:#fff;border:1px solid #E4E0D2;border-top:3px solid #BAAF78;border-radius:4px;padding:28px 28px 26px;display:flex;flex-direction:column;gap:17px;min-width:0;}
.testimonial-card:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 11px);justify-self:center;width:100%;}
.testimonial-logo-wrap{min-height:96px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #EEEADF;padding-bottom:16px;}
.testimonial-logo{display:block;max-width:250px;max-height:82px;width:auto;height:auto;object-fit:contain;}
.testimonial-quote{margin:0;font-size:16.2px;line-height:1.68;color:#333;}
.testimonial-signer{margin-top:auto;padding-top:4px;display:flex;flex-direction:column;gap:3px;}
.testimonial-signer strong{font-size:15.8px;color:#092557;}
.testimonial-signer span{font-size:14.2px;color:#6A7280;}
.officeprotector-qr{margin-top:5px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.officeprotector-qr a{display:block;background:#fff;border-radius:4px;padding:8px;line-height:0;}
.officeprotector-qr img{display:block;width:150px;height:150px;}
.officeprotector-qr span{font-size:14px;line-height:1.45;color:#C3CBD9;max-width:150px;}
@media(max-width:820px){.testimonial-grid{grid-template-columns:1fr}.testimonial-card:last-child:nth-child(odd){grid-column:auto;max-width:none}}

/* Széchenyi 2020 infoblokk – fix a jobb alsó sarokban, mint a korábbi oldalon (main.js teszi ki) */
.szechenyi-sarok{position:fixed;right:0;bottom:0;z-index:2;width:320px;max-width:100vw;line-height:0;}
.szechenyi-sarok img{display:block;width:100%;height:auto;}
.szechenyi-sarok a:focus-visible{outline:3px solid #BAAF78;outline-offset:-3px;}
@media(max-width:767px){.has-szechenyi-sarok .site-footer{padding-bottom:260px !important;}}
@media print{.szechenyi-sarok{display:none;}}

/* Sötét hátterű űrlap (főoldal, „Írjon nekünk”): olvasható hibaszín */
#urlap-kapcsolat-rovid .form-error{ color:#FFB3A6; }
#urlap-kapcsolat-rovid .form-field.invalid input,
#urlap-kapcsolat-rovid .form-field.invalid textarea{ border-color:#FF8F7D !important; }
#urlap-kapcsolat-rovid .form-check.invalid input[type="checkbox"]{ outline-color:#FF8F7D; }