/* NextMove Blogg – grundvariabler och font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');

:root {
  --nm-bg: hsl(38 25% 96%);
  --nm-text: hsl(220 15% 10%);
  --nm-muted: hsl(220 10% 40%);
  --nm-primary: hsl(18 90% 52%);
  --nm-dark: hsl(220 15% 8%);
  --nm-surface: hsl(38 20% 92%);
  --nm-card: hsl(0 0% 100%);
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background-color: var(--nm-bg) !important;
  color: var(--nm-text) !important;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--nm-primary);
}

a:hover {
  color: var(--nm-text);
}

/* Header */
.site-header,
.main-navigation {
  background: #fff !important;
}

@media (min-width: 769px) {

  .site-header,
  .site-header.grid-container,
  .site-header .inside-header,
  .inside-header.grid-container {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .site-header .inside-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 18px 24px !important;
    gap: 60px !important; /* ändra detta för avstånd logga–meny */
  }

  .site-logo,
  .site-branding,
  .navigation-branding {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  .site-logo img,
  .navigation-branding img {
    max-height: 34px !important;
    width: auto !important;
    display: block !important;
  }

  .main-navigation {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    background: transparent !important;
    transform: translateY(5px) !important; /* ändra detta för att flytta menyn nedåt/uppåt */
  }

  .main-navigation .inside-navigation {
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .main-navigation .main-nav > ul {
    display: flex !important;
    align-items: center !important;
    gap: 32px !important; /* ändra detta för avstånd mellan menyord */
  }

  .main-navigation .main-nav ul li a {
    padding: 0 !important;
    margin: 0 !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--nm-muted) !important;
    text-transform: none !important;
  }

  .main-navigation .main-nav ul li a:hover,
  .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--nm-text) !important;
    font-weight: 400 !important;
  }
}

/* Innehåll */
.entry-title,
.page-title {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  color: var(--nm-text);
}

.entry-content,
.entry-summary,
.entry-meta,
.site-info {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.entry-meta,
.entry-meta a {
  color: var(--nm-muted) !important;
  font-size: 14px !important;
}

.entry-content h2 {
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  margin-top: 2.4em !important;
  margin-bottom: 0.8em !important;
}

.entry-content h3 {
  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin-top: 2em !important;
  margin-bottom: 0.6em !important;
}

.entry-content p,
.entry-content li {
  font-size: 18px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

.entry-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2.2rem auto;
}

.button,
.wp-block-button__link,
input[type="submit"] {
  background: var(--nm-primary) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.site-footer {
  background: var(--nm-dark) !important;
  color: #fff !important;
}

/* NextMove Blogg – artikelcontainer och läsbarhet */
@media (min-width: 769px) {

  /* Centrera själva artikelkolumnen */
  .site-main,
  .content-area {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Det vita artikelkortet */
  .separate-containers .inside-article,
  .inside-article {
    background: #fff !important;
    padding: 54px 64px 64px 64px !important;
    box-sizing: border-box !important;
  }

  /* Lite mer luft mellan header och innehåll */
  .site-content {
    padding-top: 28px !important;
  }
}

/* NextMove Blogg – redaktionell artikel utan vit box */
@media (min-width: 769px) {

  body.single-post .site-content,
  body.blog .site-content,
  body.archive .site-content {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 48px 32px 0 32px !important;
    box-sizing: border-box !important;
  }

  body.single-post .content-area,
  body.blog .content-area,
  body.archive .content-area {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  body.single-post .inside-article,
  body.blog .inside-article,
  body.archive .inside-article {
    background: transparent !important;
    padding: 0 !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  body.single-post .entry-title {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.single-post .entry-meta {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.single-post .entry-content {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

body.single-post .entry-content img {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  margin: 2.8rem auto 2.4rem auto !important;
  transform: none !important;
}
}