/* Hemtag — layout: container, header, nav, sidvisning (flikar), footer */
.container { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .container { padding: 0 20px; } }

header.site { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); background: rgba(250, 250, 248, 0.88); }
header.site .container { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; padding-bottom: 18px; gap: 24px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand a { font-family: var(--sans); font-size: 26px; font-weight: 600; text-decoration: none; letter-spacing: -0.04em; line-height: 1; display: inline-flex; align-items: baseline; gap: 0; }
.logo-hem { color: #E55A1F; }
.logo-tag { color: #1F8FCC; }
.logo-drop { display: inline-block; margin-left: 2px; transform: translateY(2px); }
.brand .sub { font-size: 10px; color: var(--text-3); letter-spacing: 0.12em; text-transform: uppercase; }
/* Menyn behöver ~1130 px i full storlek (11 punkter): kompakt
   variant ner till 960 px, därunder tar hamburgaren över. */
nav.main { display: flex; align-items: center; gap: 28px; }
nav.main a { color: var(--text-2); text-decoration: none; font-size: 14px; white-space: nowrap; transition: color 0.15s; }
nav.main a:hover, nav.main a.active { color: var(--text); }
nav.main a.en { color: var(--text-3); font-size: 12px; padding-left: 12px; border-left: 1px solid var(--border); }
@media (max-width: 1180px) { nav.main { gap: 16px; } nav.main a { font-size: 13px; } }

/* Mobilmeny — hamburgare som fäller ut navigeringen under headern */
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
header.site.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
header.site.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
header.site.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  nav.main { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 20px 12px; background: rgba(250, 250, 248, 0.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); box-shadow: 0 16px 32px rgba(20, 20, 20, 0.08); }
  header.site.nav-open nav.main { display: flex; }
  nav.main a { padding: 12px 0; font-size: 15px; border-bottom: 1px solid var(--border); }
  nav.main a:last-child { border-bottom: none; }
  nav.main a.en { padding-left: 0; border-left: none; }
}

main { min-height: 70vh; }
.page { display: none; padding: 56px 0 80px; }
.page.active { display: block; }

footer.site { background: var(--surface-2); border-top: 1px solid var(--border); padding: 48px 0 32px; margin-top: 80px; font-size: 13px; color: var(--text-2); }
footer.site .container { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
@media (max-width: 720px) { footer.site .container { grid-template-columns: 1fr; } }
footer.site h4 { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 12px; }
footer.site a { color: var(--text-2); text-decoration: none; display: block; line-height: 2; }
footer.site a:hover { color: var(--text); }
.footer-bottom { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 24px; margin-top: 16px; font-size: 12px; color: var(--text-3); font-style: italic; }

/* Droppen som footerns signatur */
.footer-drop { display: block; margin-bottom: 12px; }