/*
Theme Name:   Mejselfix Child
Theme URI:    https://blogg.mejselfix.se
Description:  Child theme för Mejselfix Bloggen
Author:       Mejselfix Karlstad
Author URI:   https://mejselfix.se
Template:     non-profit-fse
Version:      1.1.0
Text Domain:  mejselfix-child
*/

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,600;0,700;0,900;1,400&display=swap');

:root {
  --gul:   #F5C800;
  --svart: #080808;
  --grå:   #141414;
  --grå2:  #1E1E1E;
  --grå3:  #303030;
  --text:  #F0F0F0;
  --dim:   #C0C0C0;
  --px:    3px;
  --font:  'Fira Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--svart) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  margin: 0;
}

a { color: var(--gul); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ─── RUBRIKER — Fira Sans 900, gul på svart ─── */
.entry-title,
h1.entry-title,
h2.entry-title,
.mf-post-title {
  font-family: var(--font) !important;
  font-weight: 900 !important;
  color: var(--gul) !important;
  background: var(--svart) !important;
  display: block !important;
  padding: 12px 16px 14px 20px !important;
  border-left: 6px solid var(--gul) !important;
  line-height: 1.1 !important;
  margin: 0 0 22px !important;
  font-size: clamp(22px, 3.5vw, 46px) !important;
}
h2.entry-title {
  font-size: clamp(18px, 2.5vw, 26px) !important;
  border-left-width: 4px !important;
}

.entry-content h2,
.entry-content h3 {
  font-family: var(--font) !important;
  font-weight: 900 !important;
  color: var(--gul) !important;
  background: var(--svart) !important;
  padding: 8px 14px 10px 18px !important;
  border-left: 5px solid var(--gul) !important;
  margin: 28px 0 14px !important;
}

/* ─── BRÖDTEXT ─── */
.entry-content,
.entry-content p {
  font-family: var(--font) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: var(--text) !important;
}
.entry-content p { margin-bottom: 16px; }
.entry-content strong { color: var(--gul); font-weight: 700; }

/* ─── KNAPPAR I INLÄGG (Läs originalet / Threads / Facebook / Discord) ─── */
/* Ge alla länkar i entry-content som är dela/käll-knappar rätt utseende och luft */
.entry-content a[href*="facebook.com/sharer"],
.entry-content a[href*="threads.net/intent"],
.entry-content a[href*="discord.gg"],
.entry-content a[href*="wa.me"] {
  display: inline-block !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  margin: 6px 8px 6px 0 !important;
  border: 2px solid var(--grå3) !important;
  color: var(--dim) !important;
  background: transparent !important;
  transition: border-color 0.15s, color 0.15s !important;
}
.entry-content a[href*="facebook.com/sharer"]:hover,
.entry-content a[href*="threads.net/intent"]:hover,
.entry-content a[href*="discord.gg"]:hover,
.entry-content a[href*="wa.me"]:hover {
  border-color: var(--gul) !important;
  color: var(--gul) !important;
  text-decoration: none !important;
}

/* "Läs originalet" — primærknapp, gul */
.entry-content a[href*="sweclockers.com"],
.entry-content a[href*="arstechnica.com"],
.entry-content a[href*="theverge.com"],
.entry-content a[href*="techcrunch.com"],
.entry-content a[href*="dn.se"],
.entry-content a[href*="di.se"],
.entry-content a[href*="idg.se"],
.entry-content a[href*="computersweden.se"] {
  display: inline-block !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 8px 18px !important;
  margin: 6px 8px 6px 0 !important;
  background: var(--gul) !important;
  color: var(--svart) !important;
  border: 2px solid var(--gul) !important;
  box-shadow: 3px 3px 0 0 #000 !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
}
.entry-content a[href*="sweclockers.com"]:hover { transform: translate(-1px,-1px) !important; box-shadow: 5px 5px 0 0 #000 !important; text-decoration: none !important; }

/* Ge knapp-stycket luft — p-taggen som innehåller knapparna */
.entry-content p:has(a[href*="facebook.com/sharer"]),
.entry-content p:has(a[href*="threads.net"]) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  margin: 28px 0 8px !important;
  padding: 16px 0 !important;
  border-top: 1px solid var(--grå2) !important;
  border-bottom: 1px solid var(--grå2) !important;
}

/* ─── "MEJSELFIX AI-REDAKTION" — gör om till subtil signatur ─── */
/* Sista p-taggen i inlägg innehåller ofta denna text */
.entry-content > p:last-of-type {
  font-family: var(--font) !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  color: var(--grå3) !important;
  text-transform: uppercase !important;
  margin-top: 28px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--grå2) !important;
  text-align: right !important;
}

/* ─── BILDER ─── */
.post-thumbnail img,
.wp-post-image {
  width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
  border: var(--px) solid var(--grå3) !important;
  box-shadow: 6px 6px 0 0 #000 !important;
  margin-bottom: 24px !important;
}

/* ─── TAGGAR ─── */
.post-tags a,
.tags-links a {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 5px 12px !important;
  background: var(--grå2) !important;
  color: var(--text) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 1px solid var(--grå3) !important;
  display: inline-block !important;
  margin: 4px 4px 4px 0 !important;
}
.post-tags a:hover,
.tags-links a:hover {
  background: var(--gul) !important;
  color: var(--svart) !important;
  border-color: var(--gul) !important;
  text-decoration: none !important;
}

/* ─── TOP BAR ─── */
.mf-top-bar {
  background: var(--gul);
  padding: 8px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mf-top-bar-left { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.mf-top-bar a, .mf-top-bar span {
  font-family: var(--font); font-weight: 600; font-size: 12px;
  color: var(--svart); text-decoration: none;
}
.mf-top-bar a:hover { text-decoration: underline; }
.mf-top-bar-sep { color: rgba(0,0,0,0.3); }

/* ─── BANNER ─── */
.mf-banner-wrap { width: 100%; position: relative; border-bottom: var(--px) solid var(--gul); }
.mf-banner-wrap img { width: 100%; height: 220px; object-fit: cover; display: block; }
.mf-banner-badge {
  position: absolute; bottom: 0; left: 40px;
  background: var(--gul); padding: 10px 20px;
  font-family: var(--font); font-weight: 900; font-size: 14px;
  letter-spacing: 3px; color: var(--svart); text-transform: uppercase;
  border-top: var(--px) solid #000; border-left: var(--px) solid #000; border-right: var(--px) solid #000;
}

/* ─── NAV ─── */
.mf-nav {
  background: var(--grå); border-bottom: var(--px) solid var(--grå3);
  padding: 0 40px; display: flex; align-items: stretch; overflow-x: auto;
}
.mf-nav a {
  font-family: var(--font); font-weight: 600; font-size: 13px; color: var(--text);
  text-decoration: none; padding: 14px 18px; border-right: 1px solid var(--grå3);
  transition: color 0.1s, background 0.1s; white-space: nowrap; display: block;
}
.mf-nav a:first-child { border-left: 1px solid var(--grå3); }
.mf-nav a:hover, .mf-nav .current-menu-item > a { color: var(--gul); background: var(--grå2); text-decoration: none; }
.mf-nav .current-menu-item > a { border-bottom: var(--px) solid var(--gul); }

/* ─── LAYOUT ─── */
.mf-layout { display: grid; grid-template-columns: 1fr 300px; max-width: 1200px; margin: 0 auto; }
.mf-content { border-right: var(--px) solid var(--grå2); min-width: 0; }

/* ─── FEATURED ─── */
.mf-card-featured { padding: 40px; border-bottom: var(--px) solid var(--grå2); position: relative; }
.mf-card-featured::before {
  content: ''; position: absolute; top: 40px; left: 0;
  width: var(--px); height: 140px; background: var(--gul);
  transform: skewY(-18deg); transform-origin: top left;
}

/* ─── ARTIKELKORT ─── */
.mf-post-card {
  padding: 28px 40px; border-bottom: var(--px) solid var(--grå2);
  display: grid; grid-template-columns: 180px 1fr; gap: 22px;
  align-items: start; position: relative; transition: background 0.12s;
}
.mf-post-card:hover { background: var(--grå); }
.mf-post-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--px); background: var(--gul); transform: scaleY(0);
  transition: transform 0.15s; transform-origin: bottom;
}
.mf-post-card:hover::before { transform: scaleY(1); }

.mf-card-thumb {
  position: relative; width: 180px; height: 120px;
  background: var(--grå2); border: var(--px) solid var(--grå3);
  box-shadow: 4px 4px 0 0 #000; overflow: hidden;
}
.mf-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-card-thumb .px-tl { position: absolute; top: -2px; left: -2px; width: 8px; height: 8px; background: var(--gul); z-index: 5; }
.mf-card-thumb .px-br { position: absolute; bottom: -2px; right: -2px; width: 8px; height: 8px; background: var(--gul); z-index: 5; }

.mf-card-body p { font-family: var(--font); font-size: 13px; color: var(--text); line-height: 1.75; margin-top: 8px; }

.mf-post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.mf-recap-tag { font-family: var(--font); font-weight: 700; font-size: 10px; letter-spacing: 3px; color: var(--gul); border: 1px solid var(--gul); padding: 3px 10px; text-transform: uppercase; display: inline-block; }
.mf-cat-tag { font-family: var(--font); font-weight: 600; font-size: 10px; letter-spacing: 2px; color: var(--text); border: 1px solid var(--grå3); padding: 3px 10px; text-transform: uppercase; display: inline-block; }
.mf-post-date { font-family: var(--font); font-size: 12px; color: var(--dim); }
.mf-post-excerpt { font-size: 14px; line-height: 1.85; color: var(--text); margin-bottom: 22px; max-width: 540px; }
.mf-post-title-sm { font-family: var(--font); font-weight: 900; font-size: 18px; color: var(--gul); background: var(--svart); display: block; padding: 6px 10px 8px 12px; border-left: 4px solid var(--gul); }
.mf-btn { font-family: var(--font); font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--svart); background: var(--gul); padding: 10px 22px; text-decoration: none; text-transform: uppercase; display: inline-block; border: var(--px) solid #000; box-shadow: 3px 3px 0 0 #000; transition: transform 0.1s, box-shadow 0.1s; }
.mf-btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 0 #000; color: var(--svart); text-decoration: none; }

/* ─── SIDEBAR ─── */
.mf-sidebar { background: var(--grå); padding: 32px 24px; }
.mf-sidebar-section { margin-bottom: 28px; }
.mf-widget-title { font-family: var(--font); font-weight: 700; font-size: 13px; letter-spacing: 3px; color: var(--gul); padding-bottom: 10px; border-bottom: var(--px) solid var(--grå3); margin-bottom: 14px; text-transform: uppercase; }
.mf-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mf-stat-cell { background: var(--svart); padding: 10px 12px; border: 1px solid var(--grå3); }
.mf-stat-label { font-family: var(--font); font-weight: 600; font-size: 10px; color: var(--dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.mf-stat-val { font-family: var(--font); font-weight: 900; font-size: 18px; line-height: 1; }
.mf-green { color: #4DFF78; }
.mf-yellow { color: var(--gul); }
.mf-cat-list { list-style: none; padding: 0; }
.mf-cat-list li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--grå3); font-family: var(--font); font-size: 13px; color: var(--text); transition: color 0.1s, padding-left 0.1s; }
.mf-cat-list li:hover { color: var(--gul); padding-left: 6px; }
.mf-cat-list li span { font-size: 10px; background: var(--grå2); padding: 2px 7px; border: 1px solid var(--grå3); font-weight: 600; }
.mf-cat-list li:hover span { background: var(--gul); color: var(--svart); border-color: var(--gul); }
.mf-svc-link { display: flex; align-items: center; justify-content: space-between; background: var(--svart); border: 1px solid var(--grå3); padding: 10px 14px; text-decoration: none; font-family: var(--font); font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 6px; transition: border-color 0.1s, color 0.1s; }
.mf-svc-link:hover { border-color: var(--gul); color: var(--gul); text-decoration: none; }

/* ─── SINGLE ─── */
.mf-single { padding: 40px; }
.mf-single-hero { position: relative; margin-bottom: 32px; border: var(--px) solid var(--grå3); box-shadow: 6px 6px 0 0 #000; }
.mf-single-hero img { width: 100%; height: 320px; object-fit: cover; display: block; }

/* ─── FOOTER — enkel, blogg-fokuserad ─── */
.mf-footer { background: var(--svart); border-top: var(--px) solid var(--grå2); font-family: var(--font); }
.mf-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 40px 40px 32px; gap: 40px;
  border-bottom: 1px solid var(--grå2);
}
.mf-footer-col-head { font-family: var(--font); font-weight: 700; font-size: 13px; color: var(--gul); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--grå3); text-transform: uppercase; letter-spacing: 2px; }
.mf-footer ul { list-style: none; padding: 0; }
.mf-footer ul li { margin-bottom: 10px; }
.mf-footer ul li a { font-size: 14px; color: var(--text); text-decoration: none; transition: color 0.1s; }
.mf-footer ul li a:hover { color: var(--gul); }
.mf-footer-contact { font-size: 14px; color: var(--text); margin-bottom: 8px; line-height: 1.5; }
.mf-footer-contact a { color: var(--text); text-decoration: none; transition: color 0.1s; }
.mf-footer-contact a:hover { color: var(--gul); }
.mf-footer-bottom { max-width: 1200px; margin: 0 auto; padding: 18px 40px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mf-footer-bottom span, .mf-footer-bottom a { font-size: 13px; color: var(--dim); text-decoration: none; transition: color 0.1s; }
.mf-footer-bottom a:hover { color: var(--gul); }

/* ─── RESPONSIVE ─── */
@media (max-width: 720px) {
  .mf-layout { grid-template-columns: 1fr; }
  .mf-sidebar { display: none; }
  .mf-top-bar, .mf-nav { padding-left: 20px; padding-right: 20px; }
  .mf-card-featured, .mf-single { padding: 24px 20px; }
  .mf-post-card { grid-template-columns: 1fr; padding: 20px; }
  .mf-card-thumb { width: 100%; height: 160px; }
  .mf-banner-badge { left: 20px; }
  .mf-footer-inner { grid-template-columns: 1fr; padding: 28px 20px 20px; }
  .mf-footer-bottom { padding: 14px 20px; flex-direction: column; text-align: center; }
}