/*
Theme Name: Metaform Avskalad
Theme URI: https://www.metaform.se
Author: Metaform
Author URI: https://www.metaform.se
Description: Ett enkelt, lätt och konverteringsoptimerat WordPress-tema för Metaform. Byggt utan page builder-beroende, med fokus på snabb laddning, tydliga call-to-actions och en filtrerbar portfolio.
Version: 1.7.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: metaform-avskalad
*/

/* -------------------------------------------------- */
/* 1. Grundinställningar / design tokens                */
/* -------------------------------------------------- */

:root {
  --mf-bg: #ffffff;
  --mf-bg-alt: #f5f5f3;
  --mf-text: #1a1a1a;
  --mf-text-muted: #5c5c5c;
  --mf-accent: #d64545; /* byt till Metaforms egen accentfärg */
  --mf-accent-dark: #b8331f;
  --mf-border: #e2e2e0;
  --mf-max-width: 1160px;
  --mf-radius: 6px;
  --mf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mf-font-heading: var(--mf-font); /* byts via Anpassa > Metaform > Typsnitt */
  --mf-font-weight-heading: 700; /* byts via Anpassa > Metaform > Typsnitt */
  --mf-font-weight-body: 400; /* byts via Anpassa > Metaform > Typsnitt */
  --mf-font-scale-heading: 1; /* byts via Anpassa > Metaform > Typsnitt */
  --mf-font-size-body: 17px; /* byts via Anpassa > Metaform > Typsnitt */
  --mf-space-1: 0.5rem;
  --mf-space-2: 1rem;
  --mf-space-3: 1.5rem;
  --mf-space-4: 2.5rem;
  --mf-space-5: 4rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--mf-font);
  font-weight: var(--mf-font-weight-body);
  color: var(--mf-text);
  background: var(--mf-bg);
  line-height: 1.55;
  font-size: var(--mf-font-size-body);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mf-accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--mf-space-2); font-weight: var(--mf-font-weight-heading); font-family: var(--mf-font-heading); }
/* calc(...) med --mf-font-scale-heading skalar rubrikerna upp/ner via
   Anpassa > Metaform > Typsnitt, men de förblir responsiva (krymper
   fortfarande på mobil med clamp()) precis som innan. */
h1 { font-size: calc(clamp(2rem, 4vw, 3rem) * var(--mf-font-scale-heading)); }
h2 { font-size: calc(clamp(1.5rem, 2.6vw, 2.1rem) * var(--mf-font-scale-heading)); }
h3 { font-size: calc(1.25rem * var(--mf-font-scale-heading)); }
h4 { font-size: calc(1rem * var(--mf-font-scale-heading)); }
p { margin: 0 0 var(--mf-space-2); }

.mf-container {
  max-width: var(--mf-max-width);
  margin: 0 auto;
  padding: 0 var(--mf-space-3);
}

.mf-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Hoppa till innehåll - tillgänglighet */
.mf-skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--mf-accent);
  color: #fff;
  padding: 0.75em 1.25em;
  z-index: 1000;
}
.mf-skip-link:focus {
  left: var(--mf-space-2);
  top: var(--mf-space-2);
}

/* -------------------------------------------------- */
/* 2. Header / navigation                              */
/* -------------------------------------------------- */

.mf-site-header {
  border-bottom: 1px solid var(--mf-border);
  position: sticky;
  top: 0;
  background: var(--mf-bg);
  z-index: 100;
}

.mf-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mf-space-3);
  /* OBS: padding-top/bottom (inte kortformen "padding: X 0") så att
     .mf-container:s sidopadding inte skrivs över - annars tappar
     headern sina marginaler i sidled, särskilt märkbart på mobil. */
  padding-top: var(--mf-space-2);
  padding-bottom: var(--mf-space-2);
}

.mf-logo {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--mf-text);
}
.mf-logo img {
  /* height (inte max-height) + width:auto tvingar fram proportionerlig
     skalning oavsett bildens HTML-attribut (width/height), annars kan
     bredden fastna på originalbildens pixelbredd och loggan bli
     hoptryckt/utdragen i sidled. */
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
}

.mf-primary-nav ul {
  list-style: none;
  display: flex;
  gap: var(--mf-space-3);
  margin: 0;
  padding: 0;
}
.mf-primary-nav a {
  color: var(--mf-text);
  font-weight: 500;
}
.mf-primary-nav a:hover { color: var(--mf-accent); }

.mf-header-actions {
  display: flex;
  align-items: center;
  gap: var(--mf-space-2);
}

.mf-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  padding: 0.5em 0.75em;
  font-size: 1rem;
  cursor: pointer;
}

/* -------------------------------------------------- */
/* 3. Knappar / CTA                                     */
/* -------------------------------------------------- */

.mf-btn {
  display: inline-block;
  padding: 0.7em 1.4em;
  border-radius: var(--mf-radius);
  font-weight: 600;
  border: 2px solid var(--mf-accent);
  transition: background 0.15s ease, color 0.15s ease;
}
.mf-btn-primary {
  background: var(--mf-accent);
  color: #fff;
}
.mf-btn-primary:hover, .mf-btn-primary:focus {
  background: var(--mf-accent-dark);
  border-color: var(--mf-accent-dark);
  color: #fff;
  text-decoration: none;
}
.mf-btn-secondary {
  background: transparent;
  color: var(--mf-accent);
}
.mf-btn-secondary:hover, .mf-btn-secondary:focus {
  background: var(--mf-accent);
  color: #fff;
  text-decoration: none;
}

/* -------------------------------------------------- */
/* 4. Hero / sektioner                                  */
/* -------------------------------------------------- */

.mf-section {
  /* padding-top/bottom istället för kortformen "padding: X 0", av
     samma anledning som .mf-header-inner ovan - denna klass kombineras
     med .mf-container på flera sidor och fick tidigare bort sidopaddingen. */
  padding-top: var(--mf-space-5);
  padding-bottom: var(--mf-space-5);
}
.mf-section-alt {
  background: var(--mf-bg-alt);
}
.mf-section-header {
  max-width: 640px;
  margin: 0 0 var(--mf-space-4);
}
.mf-section-header p {
  color: var(--mf-text-muted);
}

.mf-hero {
  /* Se kommentar vid .mf-section - samma padding-fix krävs här. */
  padding-top: var(--mf-space-5);
  padding-bottom: var(--mf-space-5);
  text-align: left;
}
.mf-hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mf-accent);
  margin-bottom: var(--mf-space-1);
}
.mf-hero p.mf-lead {
  font-size: 1.2rem;
  color: var(--mf-text-muted);
  max-width: 640px;
}
.mf-hero-actions {
  display: flex;
  gap: var(--mf-space-2);
  margin-top: var(--mf-space-3);
  flex-wrap: wrap;
}

/* -------------------------------------------------- */
/* 5. Kundlogotyper                                    */
/* -------------------------------------------------- */

.mf-logo-marquee {
  overflow: hidden;
  width: 100%;
  /* Tona ut kanterna så att loggorna glider mjukt in/ut vid sidorna
     istället för att klippas av tvärt mot behållarens kant. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.mf-logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--mf-space-4);
  /* --mf-logo-marquee-duration sätts via Anpassa > Kundlogotyper >
     "Rullningstakt" (mf_dynamic_assets() i functions.php). */
  animation: mf-logo-scroll var(--mf-logo-marquee-duration, 30s) linear infinite;
}
.mf-logo-marquee:hover .mf-logo-track,
.mf-logo-marquee:focus-within .mf-logo-track {
  /* Pausa bandet vid hover/tangentbordsfokus så besökare hinner klicka
     på en logotyp innan den glider iväg. */
  animation-play-state: paused;
}
@keyframes mf-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mf-logo-item {
  /* Fast bredd/höjd + object-fit:contain på bilden nedan så att loggor
     med olika proportioner (liggande/stående/kvadratiska) aldrig blir
     hoptryckta/utdragna eller sticker ut ur sin plats i bandet. */
  flex: 0 0 auto;
  width: 130px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mf-logo-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.mf-logo-track img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.mf-logo-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  /* Respektera "minska rörelse"-inställningen i OS/webbläsare: stäng av
     den automatiska rullningen och låt besökaren scrolla bandet manuellt
     istället. */
  .mf-logo-track {
    animation: none;
  }
  .mf-logo-marquee {
    overflow-x: auto;
  }
}

/* -------------------------------------------------- */
/* 6. Kort / grid (tjänster, case, nyheter)              */
/* -------------------------------------------------- */

.mf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--mf-space-3);
}
/* Smalare min-bredd bara för startsidans "Aktuella projekt" - så att
   4 kort ryms i rad på skrivbordsbredd istället för att bara 3 fick
   plats (260px var för brett för att 4 skulle rymmas i containerns
   1112px inre bredd). Krymper till färre kolumner på smalare skärmar
   precis som .mf-grid, tack vare auto-fill. */
.mf-grid-cases {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.mf-card {
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--mf-bg);
}
.mf-card-media {
  aspect-ratio: 4 / 3;
  background: var(--mf-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mf-card-media img { width: 100%; height: 100%; object-fit: cover; }
.mf-card-body {
  padding: var(--mf-space-3);
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  flex: 1;
}
.mf-card-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mf-text-muted);
}
.mf-card-title { font-size: 1.1rem; margin: 0; }
.mf-card-body p { color: var(--mf-text-muted); font-size: 0.95rem; margin: 0; }
.mf-card-link { margin-top: auto; font-weight: 600; }

/* -------------------------------------------------- */
/* 7. Portfolio-filter                                  */
/* -------------------------------------------------- */

.mf-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: var(--mf-space-3);
}
.mf-filter-btn {
  border: 1px solid var(--mf-border);
  background: var(--mf-bg);
  border-radius: 999px;
  padding: 0.45em 1.1em;
  font-size: 0.9rem;
  cursor: pointer;
}
.mf-filter-btn[aria-pressed="true"] {
  background: var(--mf-text);
  color: #fff;
  border-color: var(--mf-text);
}
.mf-case-item[hidden] { display: none; }

/* -------------------------------------------------- */
/* 8. Citat / testimonial                               */
/* -------------------------------------------------- */

.mf-quote {
  border-left: 4px solid var(--mf-accent);
  padding: 0.2em 0 0.2em var(--mf-space-3);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--mf-text);
  margin: var(--mf-space-3) 0;
}
.mf-quote cite {
  display: block;
  margin-top: var(--mf-space-1);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--mf-text-muted);
}

/* -------------------------------------------------- */
/* 9. Formulär (kontakt)                                */
/* -------------------------------------------------- */

.mf-form { max-width: 560px; }
.mf-field { margin-bottom: var(--mf-space-2); }
.mf-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35em;
}
.mf-field input,
.mf-field textarea {
  width: 100%;
  padding: 0.65em 0.8em;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  font: inherit;
}
.mf-field input:focus,
.mf-field textarea:focus {
  outline: 2px solid var(--mf-accent);
  outline-offset: 1px;
}
/* Honeypot-fält mot enkel spam - göms visuellt, kvar för skärmläsare undviks medvetet */
.mf-hp { position: absolute; left: -9999px; top: -9999px; }

.mf-form-message {
  padding: var(--mf-space-2);
  border-radius: var(--mf-radius);
  margin-bottom: var(--mf-space-2);
}
.mf-form-message-success { background: #e5f3e5; color: #205020; }
.mf-form-message-error { background: #fbe6e6; color: #7a2020; }

/* -------------------------------------------------- */
/* 10. Kunder-lista                                     */
/* -------------------------------------------------- */

.mf-client-groups {
  display: grid;
  gap: var(--mf-space-4);
}
.mf-client-group h3 {
  border-bottom: 1px solid var(--mf-border);
  padding-bottom: 0.4em;
}
.mf-client-list {
  columns: 3 220px;
  gap: var(--mf-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mf-client-list li { break-inside: avoid; padding: 0.2em 0; }

/* -------------------------------------------------- */
/* 11. Footer                                           */
/* -------------------------------------------------- */

.mf-footer-mark {
  /* Bredd + height:auto (inte max-height) så bilden skalas
     proportionerligt oavsett dess HTML width/height-attribut. */
  display: block;
  width: 200px;
  height: auto;
  margin: 0 0 var(--mf-space-4);
}

.mf-site-footer {
  background: var(--mf-text);
  color: #f1f1f1;
  padding: var(--mf-space-5) 0 var(--mf-space-3);
  margin-top: var(--mf-space-5);
}
.mf-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--mf-space-3);
  margin-bottom: var(--mf-space-4);
}
.mf-site-footer a { color: #f1f1f1; }
.mf-site-footer h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b8b8b8;
  margin-bottom: var(--mf-space-2);
}
.mf-footer-bottom {
  border-top: 1px solid #3a3a3a;
  padding-top: var(--mf-space-2);
  font-size: 0.85rem;
  color: #b8b8b8;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* -------------------------------------------------- */
/* 12. Blogg / Aktuellt                                  */
/* -------------------------------------------------- */

.mf-post-meta {
  color: var(--mf-text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--mf-space-2);
}
.mf-pagination {
  display: flex;
  gap: var(--mf-space-2);
  margin-top: var(--mf-space-4);
}

/* -------------------------------------------------- */
/* 13. Responsivt: mobilmeny                             */
/* -------------------------------------------------- */

@media (max-width: 780px) {
  .mf-nav-toggle { display: inline-flex; align-items: center; gap: 0.4em; }
  .mf-primary-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .mf-primary-nav.is-open { display: block; }
  .mf-primary-nav ul {
    flex-direction: column;
    gap: 0;
    padding: var(--mf-space-2) 0;
  }
  .mf-primary-nav a {
    display: block;
    padding: 0.8em 0;
    border-bottom: 1px solid var(--mf-border);
  }
  .mf-header-inner { flex-wrap: wrap; }
  .mf-client-list { columns: 2 160px; }
}

@media (max-width: 480px) {
  .mf-hero-actions .mf-btn { width: 100%; text-align: center; }
  .mf-client-list { columns: 1; }
}