/* DNA.se - Shared header and footer CSS */

/* GLOBAL: prevent horizontal page scroll (use clip to preserve sticky) */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100vw}

/* HEADER */
.site-header{background:rgba(255,255,255,.95);border-bottom:1px solid var(--border);padding:14px 0;position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
.site-header .container{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo a{display:block;line-height:0;text-decoration:none}
.logo img{height:42px;width:auto;display:block}
.main-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.main-nav a{color:var(--text);font-weight:600;font-size:.92rem;transition:color .15s;text-decoration:none}
.main-nav a:hover{color:var(--primary);text-decoration:none}
.header-cta{background:var(--primary);color:#fff!important;padding:9px 20px;border-radius:30px;font-weight:700;font-size:.88rem;transition:all .2s}
.header-cta:hover{background:var(--primary-dark);text-decoration:none;transform:translateY(-1px);color:#fff!important}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:301;position:relative;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.burger span{display:block;width:24px;height:2px;background:var(--dark);border-radius:2px;transition:all .25s;pointer-events:none}

/* Mobile nav drawer */
.mobile-nav-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:299;opacity:0;transition:opacity .25s}
.mobile-nav-backdrop.open{display:block;opacity:1}
.mobile-nav{display:none;position:fixed;top:0;right:0;width:50vw;max-width:320px;min-width:240px;height:100vh;background:#fff;border-left:1px solid var(--border);padding:80px 22px 30px;overflow-y:auto;overscroll-behavior:contain;z-index:300;flex-direction:column;box-shadow:-12px 0 30px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .28s ease}
.mobile-nav.open{display:flex;transform:translateX(0)}
.mobile-nav a{color:var(--text);padding:14px 4px;border-bottom:1px solid var(--border);font-weight:600;font-size:1rem;text-decoration:none}
.mobile-nav a:last-child{border:none;background:var(--primary);color:#fff!important;text-align:center;border-radius:8px;margin-top:14px;padding:14px}
body.menu-open{overflow:hidden;position:fixed;width:100%;left:0;right:0}

/* FOOTER */
.site-footer{background:var(--dark);color:rgba(255,255,255,.7);font-size:.88rem;margin-top:40px}
.footer-top{padding:48px 0 32px}
.footer-top .container{max-width:1100px;margin:0 auto;padding:0 20px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer-col-brand .footer-brand-link{display:inline-block;margin-bottom:14px;text-decoration:none}
.footer-col-brand .footer-brand-link img,.footer-logo-img{height:48px;width:auto;display:block}
.footer-tagline{color:rgba(255,255,255,.7);font-size:.9rem;line-height:1.65;margin-bottom:18px;max-width:330px}
.footer-cta{display:inline-block;background:var(--primary);color:#fff!important;padding:12px 24px;border-radius:30px;font-weight:700;font-size:.88rem;transition:all .2s;text-decoration:none}
.footer-cta:hover{background:var(--primary-dark);transform:translateY(-1px);color:#fff!important}
.footer-heading{font-size:.85rem;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.footer-links-col{display:flex;flex-direction:column;gap:9px}
.footer-links-col a{color:rgba(255,255,255,.7);font-size:.88rem;text-decoration:none;transition:color .15s}
.footer-links-col a:hover{color:#fff;text-decoration:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;text-align:center}
.footer-bottom .container{max-width:1100px;margin:0 auto;padding:0 20px}
.footer-bottom .copyright{color:rgba(255,255,255,.55);font-size:.8rem;margin:0}
.footer-bottom .copyright a{color:var(--primary);font-weight:600;text-decoration:none}
.footer-bottom .copyright a:hover{color:#fff}

/* LOGO BAR (under hero) */
.logo-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem 1.5rem;max-width:820px;margin:0 auto;padding:2.5rem 20px 1rem;align-items:center;justify-items:center}
.logo-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-decoration:none;position:relative}
.logo-bar img{height:36px;width:auto;filter:none;opacity:1;transition:all .25s}
.logo-bar a:hover img{transform:translateY(-3px) scale(1.08);opacity:.85}
.logo-bar a:active img{transform:scale(.95)}
.logo-bar a span.our-pick{display:none}
.logo-bar a[href="/23andme/"] img{height:45px}
.logo-bar a[href="/familytreedna/"] img{height:54px}
.logo-bar a[href="/livingdna/"] img{height:43px}
.logo-bar a[href="/tellmegen/"] img{height:50px}
.logo-bar a[href="/circledna/"] img{height:45px}

/* COMPARE-CARD "Vårt val" badge - bigger */
.compare-badge{position:absolute;top:-14px;right:14px;background:var(--primary);color:#fff;padding:7px 18px;border-radius:24px;font-size:.85rem;font-weight:800;letter-spacing:.03em;box-shadow:0 4px 14px rgba(13,148,136,.35);text-transform:uppercase}
.compare-card.featured{border-color:var(--primary);border-width:2.5px;box-shadow:0 8px 28px rgba(13,148,136,.18)}

/* TABLE SCROLL HINT (mobile) */
.table-scroll-hint{display:none;text-align:center;color:var(--primary);font-size:.85rem;font-weight:700;margin:0 0 10px;padding:8px 12px;background:var(--warm);border-radius:20px;border:1px solid var(--accent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.65}50%{opacity:1}}
.table-scroll-container{position:relative}
.table-scroll-container::after{content:"";position:absolute;top:0;right:0;bottom:0;width:30px;background:linear-gradient(90deg,transparent,rgba(13,148,136,.18));pointer-events:none;display:none;border-radius:0 12px 12px 0}
@media(max-width:768px){
  .table-scroll-hint{display:block}
  .table-scroll-container::after{display:block}
  /* Pris column should not break mid-price */
  .table-scroll-container table td:nth-child(3),
  .table-scroll-container table th:nth-child(3){white-space:nowrap}
}

/* HERO CENTERED (homepage) */
.hero{position:relative}
.hero-content.hero-centered{text-align:center;margin:0 auto;max-width:720px;padding:50px 20px 90px;display:block}
.hero-centered h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1.15;margin:10px 0 28px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-centered h1 .hero-sub{display:block;font-size:.5em;font-weight:600;line-height:1.1;margin-top:0;opacity:.92;letter-spacing:.02em}
.hero-centered .btn-hero{display:inline-block;margin:0 auto}
.hero-centered .trust-bar{position:absolute;left:0;right:0;bottom:12px;display:flex;flex-wrap:nowrap;justify-content:center;gap:10px 28px;margin:0 auto;font-size:.88rem;opacity:.95;max-width:700px;padding:0 40px;color:#fff;z-index:2}
.hero-centered .trust-bar span{white-space:nowrap}
@media(max-width:680px){.hero{min-height:560px}.hero-content.hero-centered{padding:40px 20px 110px}.hero-centered .trust-bar{flex-wrap:wrap;max-width:560px;bottom:12px;padding:0 20px;font-size:.84rem}.hero-centered .trust-bar .trust-break{flex:1 0 100%;text-align:center}}
@media(max-width:560px){.hero{min-height:580px}.hero-content.hero-centered{padding:36px 20px 120px}.hero-centered .trust-bar{gap:6px 16px;font-size:.82rem;bottom:10px}}

/* RESPONSIVE */
@media(max-width:1024px){.main-nav{gap:18px}.main-nav a{font-size:.85rem}}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:840px){.main-nav{display:none}.burger{display:flex}}
@media(max-width:720px){.logo-bar{grid-template-columns:repeat(3,1fr);gap:1.4rem 1rem}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}.footer-col-brand{grid-column:1 / -1}}
@media(max-width:480px){.logo-bar{grid-template-columns:repeat(2,1fr);gap:1.2rem .8rem}}

/* INLINE CTA BUTTONS */
.inline-cta{text-align:center;margin:1.5rem 0;padding:18px 0}
.inline-cta a{display:inline-block;padding:13px 30px;background:var(--primary);color:#fff!important;border-radius:30px;font-weight:700;font-size:.95rem;text-decoration:none;transition:all .2s;box-shadow:0 4px 14px rgba(13,148,136,.25)}
.inline-cta a:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 8px 22px rgba(13,148,136,.35);text-decoration:none}
.inline-cta-soft a{background:#fff;color:var(--primary)!important;border:2px solid var(--primary);box-shadow:none}
.inline-cta-soft a:hover{background:var(--primary);color:#fff!important}