/* =========================
   FÄRGER
   ========================= */
:root{
  --header-bg: #2A3150;
  --footer-bg: #20263E;
  --brand: #10b981;
  --text: #0f172a;
  --muted: #475569;
  --bg: #ffffff;
  --border: #e2e8f0;
}

/* =========================
   RESET / BAS / LAYOUT
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  min-height:100svh;
  display:flex; flex-direction:column;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text); background:var(--bg); line-height:1.6;
}
main{flex:1}
a{color:inherit; text-decoration:none}
.container{width:100%; max-width:1120px; margin:0 auto; padding:0 20px}
.small{font-size:.95rem;color:#cbd5e1;margin:.25rem 0 0}

/* =========================
   HEADER + NAV
   ========================= */
.site-header{ background:var(--header-bg); color:#fff;}
.header-row{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:16px 20px;}
.brand{ font-weight:700; font-size:1.125rem; letter-spacing:.2px;}
.brand span{ color:var(--brand); }

.btn{
  display:inline-block; padding:10px 14px; border-radius:9999px;
  border:1px solid transparent; font-weight:600; line-height:1; transition:.2s ease;
}
.btn-primary{ background:var(--brand); color:#fff;}
.btn-primary:hover{ filter:brightness(.95); }

/* Hamburger */
/* HEADER + NAV (säkerställer att hamburgaren syns) */
.header-row{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; }
.hamburger{
  display:inline-flex; width:40px; height:40px; padding:8px;
  align-items:center; justify-content:center; gap:5px;
  background:transparent; border:0; cursor:pointer; z-index:60;
}
.hamburger span{
  display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.main-nav{
  display:none; position:absolute; z-index:50; left:0; right:0; top:100%;
  background:var(--header-bg); padding:12px 20px 16px; border-top:1px solid rgba(255,255,255,.12);
  flex-direction:column; gap:12px;
}
body.nav-open .main-nav{ display:flex; }
body.nav-open .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg);}
body.nav-open .hamburger span:nth-child(2){ opacity:0;}
body.nav-open .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg);}

/* Desktop: visa vanlig meny, dölj hamburgaren */
@media (min-width: 900px){
  .hamburger{ display:none; }
  .main-nav{ position:static; display:flex; flex-direction:row; gap:18px; padding:0; border-top:0; background:transparent; }
}


/* =========================
   LÄNKAR
   ========================= */
.textlink {
  color: #3a5c8a;
  text-decoration: underline;
  text-decoration-color: rgba(58, 92, 138, 0.3);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.textlink:hover,
.textlink:focus {
  color: #4e7cc0;
  text-decoration-color: rgba(78, 124, 192, 0.8);
}


/* =========================
   HERO
   ========================= */
.hero{ background:linear-gradient(180deg, rgba(16,185,129,.08), rgba(255,255,255,0)); padding:56px 0 48px;}
.hero h1{ font-size:clamp(28px,3.2vw,44px); line-height:1.15; margin:0;}
.hero h1 span{ color:var(--brand); }
.hero p{ margin:12px 0 0; color:var(--muted); font-size:clamp(16px,2vw,20px);}
.hero .cta-row{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; }

/* =========================
   KORT / GRID
   ========================= */
.cards{ padding:32px 0 8px; }
.grid{ display:grid; gap:16px; grid-template-columns:repeat(12,1fr); }
.card{
  grid-column:span 12; background:#fff; border:1px solid var(--border);
  border-radius:16px; padding:18px; box-shadow:0 1px 2px rgba(2,6,23,.04);
}
.card h3{ margin:0 0 6px 0; font-size:1.125rem;}
.card p{ margin:0 0 10px 0; color:var(--muted); }
.card .link{ color:var(--brand); font-weight:600; }
@media (min-width:740px){ .card{ grid-column:span 4; } }

/* =========================
   TRUSTBAR
   ========================= */
.trustbar{ padding:28px 0 40px; }
.trustbar ul{ list-style:none; margin:0; padding:0; display:flex; gap:18px; flex-wrap:wrap; color:var(--muted);}
.trustbar li{ padding-left:26px; position:relative;}
.trustbar li::before{ content:""; position:absolute; left:0; top:.35em; width:16px; height:16px; border-radius:9999px; background:var(--brand);}

/* =========================
   FOOTER
   ========================= */
.site-footer{ background:var(--footer-bg); color:#e5e7eb; padding:32px 0;}
.site-footer a{ color:#e5e7eb; opacity:.95; }
.site-footer a:hover{ opacity:1; text-decoration:underline; text-underline-offset:2px; }

.footer-grid{ display:grid; gap:24px; }
@media (min-width:760px){
  .footer-grid{ grid-template-columns:1.2fr 1fr 1fr auto; align-items:start; }
}

.uc-col{ justify-self:end; align-self:start; }
.uc-logo{ width:92px; height:auto; display:block; margin:0; }

/* UC-sigill: mobiljustering utan att röra desktop */
/* Footer: mobil-layout med 2 kolumner + meny under */
@media (max-width: 767.98px) {
  .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-menu {
    text-align: left; /* vänsterställ länkar och text */
  }

  .uc-col .uc-logo {
    max-height: 80px; /* gör UC-sigill ungefär lika högt som logga+copyright */
    height: auto;
    width: auto;
  }
}

/* =========================
   FOOTER
   ========================= */
.site-footer{ background:var(--footer-bg); color:#e5e7eb; padding:32px 0;}
.site-footer a{ color:#e5e7eb; opacity:.95; }
.site-footer a:hover{ opacity:1; text-decoration:underline; text-underline-offset:2px; }

.footer-grid{ display:grid; gap:24px; }
@media (min-width:760px){
  .footer-grid{ grid-template-columns:1.2fr 1fr 1fr auto; align-items:start; }
}

/* UC-kolumn */
.uc-col{ justify-self:end; align-self:start; }
.uc-logo{ width:92px; height:auto; display:block; margin:0; }

/* UC-sigill: mobiljustering utan att röra desktop */
@media (max-width: 767.98px) {
  .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-menu { text-align: left; }
  .uc-col .uc-logo { max-height: 80px; height: auto; width: auto; }
}

/* === DESKTOP-FIX: spänn raden och pressa UC till högerkanten === */

/* === Desktop: copyright | NAV | UC på samma rad === */
@media (min-width:1024px){
  .footer-grid{
    grid-template-columns: 1.2fr 1fr 1fr auto;
    align-items: center;
    gap: 24px;
  }

  /* Gör .footer-top:s barn till grid-items i .footer-grid */
  .footer-top{ display: contents; }
  .footer-top > div:first-child{ grid-column: 1; }
  .footer-top .uc-col{
    grid-column: 4;
    justify-self: end;
    align-self: center;
  }

  /* FLYTTA UPP NAV till samma rad (kolumn 2–3) och vänsterställ */
  .footer-menu{
    grid-column: 2 / span 2;
    grid-row: 1;                /* <- samma rad som copyright/UC */
    justify-self: start;        /* vänsterkant av kolumn 2 */
    align-self: center;
    padding-left: 24px;         /* luft bredvid copyright-blocket */
    text-align: left;
    margin: 0;
  }

  /* Visa länkarna på en rad */
  .footer-menu nav{ display:flex; gap:24px; }
  .footer-menu nav br{ display:none; }

  /* Behåll “claims” under – rad 2, full bredd (valfritt) */
  .footer-menu .small{
    display:block;
    grid-column: 1 / -1;
    margin-top: 10px;
  }
}
/* Desktop: layout med copyright | meny col2 | meny col3 | UC */
/* =========================
   FOOTER – DESKTOPLAYOUT
   ========================= */
/* =========================
   FOOTER – DESKTOP (force align)
   ========================= */
@media (min-width:1024px){
  .site-footer .footer-grid{
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr auto !important; /* col1 | col2 | col3 | UC */
    align-items: start !important;   /* top-align på raden */
    gap: 24px !important;
    grid-auto-rows: min-content !important;
  }

  /* Gör .footer-top transparent i gridden och placera dess barn på rad 1 */
  .site-footer .footer-top{ display: contents !important; }

  .site-footer .footer-top > div:first-child{
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-footer .footer-top .uc-col{
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Gör även .footer-menu:s barn till grid-items och lägg dem på rad 1 */
  .site-footer .footer-menu{ display: contents !important; }

  .site-footer .menu-col2{
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .site-footer .menu-col3{
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Vertikala listor med tajtare radavstånd */
  .site-footer .menu-col2 a{
    display: block !important;
    margin: 0 0 8px 0 !important;
    text-decoration: none;
  }
  .site-footer .menu-col2 a:hover{ text-decoration: underline; }

  .site-footer .menu-col3 .small{
    display: block !important;
    margin: 0 0 8px 0 !important;
  }
}

/* Mobilen lämnas som innan – inga ändringar behövs */





/* CTA-knapp i mobil header */
.header-cta-mobile {
  display: inline-block;
  background-color: #059669; /* emerald-600 */
  color: #fff;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
  margin-left: auto;
  margin-right: 0.5rem;
  text-decoration: none;
}

.header-cta-mobile:hover {
  background-color: #047857; /* emerald-700 */
}

@media (min-width: 768px) {
  .header-cta-mobile {
    display: none; /* dölj i desktop */
  }
}