/* Pannon portál – fejléc, kalkulátor-sáv és lábléc. A portál oldalain és a kalkulátorokban is ez fut,
   ezért minden szabály saját osztálynévvel, a kalkulátorok stílusától függetlenül. */
@font-face{font-family:"Pannon Mulish";src:url("mulish.ttf") format("truetype");font-weight:200 1000;font-style:normal;font-display:swap}

.pph,.pph-sub,.ppf{--h-ink:#13211F;--h-deep:#0D2A27;--h-teal:#0B6E66;--h-mint:#DDEEEA;--h-line:#D6DEDB;--h-muted:#5B6964;--h-paper:#F4F6F5;
  font-family:"Pannon Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.4;color:var(--h-ink);box-sizing:border-box}
.pph *,.pph-sub *,.ppf *{box-sizing:border-box}
.pph a,.pph-sub a,.ppf a{text-decoration:none}

/* fejléc */
.pph{position:relative;z-index:50;background:#fff;border-bottom:1px solid var(--h-line)}
.pph-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:8px 24px;min-height:68px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pph-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--h-ink)!important;flex:none}
.pph-logo{width:32px;height:32px;border-radius:9px;flex:none;background:var(--h-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M4 21c4-5 7-6 11-3s7 2 11-3' fill='none' stroke='%239FD3CB' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4 25c4-4 7-5 11-2.5s7 1.5 11-2.5' fill='none' stroke='%23C8A24A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11 15V6h5a3 3 0 0 1 0 6h-5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/32px 32px no-repeat}
.pph-nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.pph-nav > a,.pph-ddb{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:15px;font-weight:600;color:var(--h-muted)!important;background:none;border:0;border-radius:8px;padding:9px 12px;cursor:pointer;white-space:nowrap;position:relative}
.pph-nav > a:hover,.pph-ddb:hover{color:var(--h-ink)!important;background:var(--h-paper)}
.pph-nav > a[aria-current="page"],.pph-dd.is-cur > .pph-ddb{color:var(--h-teal)!important}
.pph-nav > a[aria-current="page"]::after,.pph-dd.is-cur > .pph-ddb::after{content:"";position:absolute;left:12px;right:12px;bottom:-14px;height:2px;border-radius:2px;background:var(--h-teal)}
.pph-ddb svg{width:16px;height:16px;transition:transform .15s}
.pph-dd{position:relative}
.pph-dd.open > .pph-ddb svg{transform:rotate(180deg)}
.pph-ddm{display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:270px;background:#fff;border:1px solid var(--h-line);border-radius:12px;padding:6px;box-shadow:0 18px 40px -14px rgba(13,42,39,.3)}
.pph-ddm.pph-right{left:auto;right:0;min-width:200px}
.pph-dd.open > .pph-ddm{display:block}
.pph-ddm a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--h-ink)!important;font-weight:600}
.pph-ddm a:hover,.pph-ddm a[aria-current="page"]{background:var(--h-paper)}
.pph-ddm small{display:block;font-weight:500;font-size:12.5px;color:var(--h-muted)}
.pph-mi{width:36px;height:36px;border-radius:9px;background:var(--h-mint);color:var(--h-teal);display:grid;place-items:center;flex:none}
.pph-mi svg{width:19px;height:19px}
.pph-user{margin-left:auto;flex:none}
.pph-me{padding:5px 8px 5px 5px!important;border:1px solid var(--h-line)!important;border-radius:999px!important;color:var(--h-ink)!important}
.pph-av{width:30px;height:30px;border-radius:50%;background:var(--h-teal);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.pph-nm{max-width:140px;overflow:hidden;text-overflow:ellipsis}
.pph-burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--h-line);border-radius:10px;background:#fff;color:var(--h-ink);cursor:pointer;align-items:center;justify-content:center;padding:0}
.pph-burger svg{width:22px;height:22px}
.pph a:focus-visible,.pph button:focus-visible,.pph-sub a:focus-visible,.pph-sub button:focus-visible,.ppf a:focus-visible{outline:2px solid var(--h-teal);outline-offset:2px}

@media (max-width:980px){
  .pph-in{flex-wrap:wrap;min-height:60px}
  .pph-burger{display:inline-flex}
  .pph-user{margin-left:auto}
  .pph-user + .pph-burger{margin-left:0}
  .pph-nm{display:none}
  .pph-nav{display:none;order:5;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;padding:6px 0 14px;border-top:1px solid var(--h-line)}
  .pph.nav-open .pph-nav{display:flex}
  .pph-nav > a,.pph-ddb{width:100%;justify-content:space-between;padding:12px 10px}
  .pph-nav > a[aria-current="page"]::after,.pph-dd.is-cur > .pph-ddb::after{display:none}
  .pph-nav > a[aria-current="page"]{background:var(--h-mint)}
  .pph-nav .pph-ddm{position:static;box-shadow:none;border:0;padding:0 0 0 6px;min-width:0}
}

/* kalkulátor-sáv: útvonal + új számolás */
.pph-sub{background:var(--h-paper);border-bottom:1px solid var(--h-line)}
.pph-sub .pph-in{min-height:48px;justify-content:flex-start;gap:8px 14px}
.pph-sub .pph-reset{margin-left:auto}
.pph-back{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--h-teal)!important;padding:5px 10px 5px 6px;border-radius:999px;border:1px solid transparent;flex:none}
.pph-back:hover{background:#fff;border-color:var(--h-line)}
.pph-back svg{width:17px;height:17px}
.pph-back + .pph-crumb{padding-left:12px;border-left:1px solid var(--h-line)}
@media (max-width:560px){.pph-back + .pph-crumb{display:none}}
.pph-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--h-muted);min-width:0}
.pph-crumb a{color:var(--h-muted)!important}
.pph-crumb a:hover{color:var(--h-teal)!important}
.pph-crumb b{color:var(--h-ink)}
.pph-reset{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;font-weight:700;color:var(--h-teal);background:#fff;border:1px solid var(--h-line);border-radius:999px;padding:7px 14px;cursor:pointer}
.pph-reset:hover{border-color:var(--h-teal)}
.pph-reset svg{width:16px;height:16px}

/* lábléc */
.ppf{background:#fff;border-top:1px solid var(--h-line);margin-top:64px}
.ppf-in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));font-size:14px;color:var(--h-muted)}
.ppf-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.ppf a{color:var(--h-muted)!important}
.ppf a:hover{color:var(--h-teal)!important}
.ppf-hint{flex-basis:100%;font-size:13.5px;line-height:1.5;color:var(--h-ink);background:var(--h-paper);border:1px solid var(--h-line);border-radius:10px;padding:10px 14px}
.pph-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:5px;padding:0 5px;border-radius:9px;background:#E0527A;color:#fff;font-style:normal;font-size:11px;font-weight:800;line-height:1;vertical-align:1px}