/* ════════════════════════════════════════════════════════════════════════
   SZAKORVOS.HU — COMMON COMPONENTS v1
   Verzió: 2026-05-26
   
   Közös komponensek minden oldalhoz: Header / Nav + Footer.
   Vizuálisan SEMMI nem változik — pontosan ugyanazok a stílusok mint
   amik most az inline <style>-okban vannak, csak egy helyen.
   
   Beillesztés a HTML <head>-jébe:
     <link rel="stylesheet" href="/css/design-system.css">
     <link rel="stylesheet" href="/css/components.css">
   
   FONTOS: a meglévő inline <style>-okat egyelőre NE töröld ki — a 
   következő fázisban (FÁZIS 2 part 2) tudjuk biztonságosan eltávolítani
   az egyes oldalakról, miután ellenőriztük hogy a közös CSS minden szükséges
   stílust tartalmaz.
   ════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. HEADER / NAVIGÁCIÓ
   ───────────────────────────────────────────────────────────────────────── */

.nav-row-top{display:flex;align-items:center;min-height:58px;padding:8px 3.5%;gap:1.5rem;max-width:1600px;margin:0 auto}

.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}

.nav-logo img{height:36px;width:auto;object-fit:contain}

.nav-links{display:flex;list-style:none;gap:6px;align-items:center;margin:0 0 0 1rem;padding:0}

.nav-links li{position:relative}

.nav-links li>a{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--text);padding:8px 14px;border-radius:10px;transition:background .25s cubic-bezier(.4,0,.2,1),color .25s ease;letter-spacing:-0.005em}

.nav-links li>a:hover{background:rgba(17,50,147,.05);color:var(--brand)}

.nav-links li>a svg{opacity:.6}

.nav-link-highlight{color:var(--text) !important}

.nav-link-highlight:hover{background:rgba(17,50,147,.05) !important}

.dropdown{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid var(--border);border-radius:14px;padding:.5rem;min-width:200px;box-shadow:0 12px 32px rgba(17,50,147,.1),0 4px 12px rgba(17,50,147,.05);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s;z-index:300}

.nav-links li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown a{display:block;padding:9px 14px;font-size:13.5px;font-weight:500;color:var(--text);border-radius:8px;transition:background .15s}

.dropdown a:hover{background:var(--brand-light)}

.nav-actions{margin-left:auto;display:flex;gap:10px;align-items:center}

.btn-nav-outline{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--brand);background:linear-gradient(180deg,rgba(255,255,255,.8) 0%,rgba(252,253,255,.65) 100%);backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);border:1px solid rgba(17,50,147,.18);padding:10px 20px;border-radius:10px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(17,50,147,.04),0 4px 12px rgba(17,50,147,.05);transition:transform .3s cubic-bezier(.34,1.4,.64,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s ease,background .3s ease;text-decoration:none}

.btn-nav-outline:hover{transform:translateY(-1px);border-color:rgba(17,50,147,.4);background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(238,242,255,.85) 100%);box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 2px 4px rgba(17,50,147,.06),0 8px 20px rgba(17,50,147,.1)}

.btn-nav-cta{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:#fff;background:var(--grad-orange);border:none;padding:10px 22px;border-radius:9px;box-shadow:0 4px 14px rgba(255,138,0,.3);transition:all .15s;text-decoration:none;letter-spacing:-0.005em}

.btn-nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,138,0,.4)}

.nav-mobile-toggle{display:none;background:transparent;border:none;padding:7px;border-radius:8px;cursor:pointer;margin-left:auto}

.nav-mobile-toggle:hover{background:#f4f6fb}

@media(max-width:900px){
  
  .nav-links{display:none}
  
  .nav-actions{display:none}
  
  .nav-mobile-toggle{display:flex}
}

/* ─────────────────────────────────────────────────────────────────────────
   2. FOOTER
   ───────────────────────────────────────────────────────────────────────── */

.footer-inner{max-width:1400px;margin:0 auto;padding:0 3.5%;box-sizing:border-box}

.footer-top{display:grid;grid-template-columns:1.2fr 3fr;gap:3.5rem;margin-bottom:3rem}

.footer-brand{min-width:0}

.footer-logo{font-family:'Inter',sans-serif;font-size:22px;font-weight:600;color:#fff;letter-spacing:-0.02em;margin-bottom:.4rem}

.footer-logo span{color:var(--orange-2)}

.footer-tagline{font-size:13.5px;line-height:1.6;margin-bottom:1.25rem;color:rgba(255,255,255,.6)}

.footer-social{display:flex;gap:8px}

.footer-social-btn{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;transition:all .15s;text-decoration:none;border:1px solid rgba(255,255,255,.1)}

.footer-social-btn:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-1px)}

.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem}

.footer-col{display:flex;flex-direction:column;gap:9px}

.footer-col-title{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}

.footer-col a{font-size:13.5px;color:rgba(255,255,255,.65);font-weight:500;transition:color .15s;text-decoration:none}

.footer-col a:hover{color:#fff}

.footer-bottom{padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}

.footer-copy{font-size:12.5px;color:rgba(255,255,255,.5);font-weight:500}

.footer-badge{font-size:12.5px;color:rgba(255,255,255,.6);background:rgba(255,255,255,.06);padding:5px 12px;border-radius:100px;font-weight:500;border:1px solid rgba(255,255,255,.1)}

@media(max-width:900px){
  
  .footer-links{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  
  .footer-links{grid-template-columns:1fr 1fr}
  
  .footer-bottom{flex-direction:column;text-align:center}
}
