/*
Theme Name: Familjereceptet v12
Theme URI: https://www.familjereceptet.se/
Author: Jalin Film AB
Description: Ett lätt, modernt och bilddrivet tema byggt specifikt för Familjereceptet. Behåller befintliga WordPress-inlägg, kategorier, bilder och URL:er utan page builder.
Version: 12
Text Domain: familjereceptet
Requires at least: 6.2
Requires PHP: 7.4
*/

:root {
  --fr-bg: #f7f5f0;
  --fr-surface: #ffffff;
  --fr-text: #20211e;
  --fr-muted: #6f7069;
  --fr-line: #e7e3da;
  --fr-accent: #42634f;
  --fr-accent-soft: #e8eee9;
  --fr-warm: #a65b3a;
  --fr-max: 1240px;
  --fr-reading: 760px;
  --fr-radius: 18px;
  --fr-shadow: 0 12px 38px rgba(29, 31, 27, .07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--fr-text);
  background: var(--fr-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: rgba(66,99,79,.42); text-underline-offset: 3px; }
a:hover { color: var(--fr-accent); }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; }
.screen-reader-text { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.fr-shell { width: min(calc(100% - 40px), var(--fr-max)); margin-inline: auto; }

/* Header */
.fr-site-header { position: sticky; top: 0; z-index: 50; background: #ffffff; border-bottom: 1px solid rgba(231,227,218,.85); }
.fr-header-inner { min-height: 78px; display:flex; align-items:center; gap:28px; }
.fr-brand { display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto; }
.fr-brand-mark { width:35px; height:35px; border-radius:50% 50% 47% 53%; background:var(--fr-accent); position:relative; transform:rotate(-9deg); }
.fr-brand-mark:after { content:""; width:10px; height:16px; border-radius:100% 0 100% 0; background:#8aa58f; position:absolute; right:0; top:-7px; transform:rotate(28deg); }
.fr-brand-text { font-family: Georgia, "Times New Roman", serif; font-size: 27px; letter-spacing:-.8px; font-weight:700; }
.fr-nav { margin-left:auto; display:flex; align-items:center; gap:4px; }
.fr-nav ul { display:flex; list-style:none; margin:0; padding:0; align-items:center; gap:3px; }
.fr-nav a { display:block; padding:10px 11px; font-size:14px; font-weight:650; text-decoration:none; border-radius:999px; }
.fr-nav a:hover { background:var(--fr-surface); }
.fr-header-search { width:38px; height:38px; border-radius:50%; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; }
.fr-header-search:hover { background:var(--fr-surface); }
.fr-menu-toggle { display:none; margin-left:auto; width:42px; height:42px; border:0; border-radius:50%; background:var(--fr-surface); cursor:pointer; }

/* Homepage */
.fr-home { padding: 40px 0 76px; }
.fr-home-intro { padding: 34px 0 40px; text-align:center; max-width:820px; margin:auto; }
.fr-eyebrow { font-size:12px; line-height:1; letter-spacing:.15em; text-transform:uppercase; font-weight:800; color:var(--fr-accent); margin-bottom:18px; }
.fr-home-intro h1 { font-family:Georgia, "Times New Roman", serif; font-size:clamp(43px,6vw,77px); line-height:.98; letter-spacing:-2.6px; margin:0 0 22px; font-weight:700; }
.fr-home-intro p { margin:0 auto 28px; max-width:640px; color:var(--fr-muted); font-size:19px; }
.fr-big-search { position:relative; max-width:650px; margin:auto; }
.fr-big-search input { width:100%; border:1px solid var(--fr-line); background:var(--fr-surface); border-radius:999px; height:60px; padding:0 64px 0 24px; outline:none; box-shadow:0 9px 30px rgba(29,31,27,.05); }
.fr-big-search input:focus { border-color:var(--fr-accent); box-shadow:0 0 0 3px rgba(66,99,79,.1); }
.fr-big-search button { position:absolute; right:7px; top:7px; width:46px; height:46px; border:0; background:var(--fr-accent); color:white; border-radius:50%; cursor:pointer; }
.fr-chips { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin:28px 0 0; }
.fr-chip { display:inline-flex; align-items:center; min-height:39px; padding:0 16px; border:1px solid var(--fr-line); border-radius:999px; background:rgba(255,255,255,.58); text-decoration:none; font-size:14px; font-weight:650; }
.fr-chip:hover { background:var(--fr-surface); border-color:#d8d3c8; }

.fr-hero { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr); min-height:570px; border-radius:28px; overflow:hidden; background:var(--fr-surface); box-shadow:var(--fr-shadow); margin-bottom:76px; }
.fr-hero-image { min-height:500px; position:relative; overflow:hidden; background:#ddd8cf; }
.fr-hero-image img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .6s ease; }
.fr-hero:hover .fr-hero-image img { transform:scale(1.015); }
.fr-hero-copy { padding:clamp(38px,5vw,68px); display:flex; flex-direction:column; justify-content:center; }
.fr-hero-copy h2 { font-family:Georgia, "Times New Roman", serif; font-size:clamp(35px,4vw,54px); line-height:1.02; letter-spacing:-1.6px; margin:0 0 20px; }
.fr-hero-copy p { color:var(--fr-muted); margin:0 0 27px; }
.fr-button { display:inline-flex; width:max-content; align-items:center; gap:9px; padding:12px 19px; border-radius:999px; background:var(--fr-text); color:white; text-decoration:none; font-weight:700; font-size:14px; }
.fr-button:hover { color:white; background:var(--fr-accent); }

.fr-section { margin: 0 0 76px; }
.fr-section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:25px; }
.fr-section-head h2 { font-family:Georgia, "Times New Roman", serif; font-size:clamp(31px,4vw,46px); line-height:1; letter-spacing:-1.2px; margin:0; }
.fr-section-head a { font-size:14px; font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; }
.fr-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 22px; }
.fr-card { min-width:0; }
.fr-card a { text-decoration:none; }
.fr-card-image { border-radius:var(--fr-radius); overflow:hidden; aspect-ratio: 4 / 3; background:#e4e0d8; margin-bottom:14px; }
.fr-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.fr-card:hover .fr-card-image img { transform:scale(1.025); }
.fr-card-meta { color:var(--fr-accent); font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; margin-bottom:6px; }
.fr-card h3 { font-family:Georgia, "Times New Roman", serif; font-size:23px; line-height:1.13; letter-spacing:-.45px; margin:0 0 7px; }
.fr-card p { color:var(--fr-muted); font-size:14px; line-height:1.5; margin:0; }

.fr-category-band { background:var(--fr-accent); color:white; border-radius:28px; padding:48px; margin-bottom:76px; overflow:hidden; position:relative; }
.fr-category-band:after { content:""; position:absolute; width:300px; height:300px; border-radius:50%; border:70px solid rgba(255,255,255,.06); right:-90px; top:-120px; }
.fr-category-band h2 { font-family:Georgia, serif; font-size:42px; letter-spacing:-1px; margin:0 0 12px; position:relative; z-index:1; }
.fr-category-band p { max-width:620px; color:rgba(255,255,255,.82); margin:0 0 26px; position:relative; z-index:1; }
.fr-category-band .fr-chips { justify-content:flex-start; position:relative; z-index:1; margin:0; }
.fr-category-band .fr-chip { border-color:rgba(255,255,255,.22); color:white; background:rgba(255,255,255,.08); }
.fr-category-band .fr-chip:hover { background:white; color:var(--fr-text); }

/* Article */
.fr-main { padding:48px 0 82px; }
.fr-article-shell { width:min(calc(100% - 40px), 1120px); margin:auto; }
.fr-article-header { width:min(100%, 900px); margin:0 auto 34px; text-align:center; }
.fr-breadcrumbs { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--fr-muted); font-weight:700; margin-bottom:18px; }
.fr-breadcrumbs a { text-decoration:none; }
.fr-article-header h1 { font-family:Georgia, "Times New Roman", serif; font-size:clamp(42px,6vw,72px); line-height:1; letter-spacing:-2.4px; margin:0 0 22px; }
.fr-deck { font-size:20px; line-height:1.55; color:var(--fr-muted); max-width:760px; margin:0 auto; }
.fr-featured { width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:28px; background:#e2ddd4; margin:0 0 46px; }
.fr-featured img { width:100%; height:100%; object-fit:cover; }
.fr-reading { width:min(100%, var(--fr-reading)); margin-inline:auto; }
.fr-prose { font-family:Georgia, "Times New Roman", serif; font-size:18px; line-height:1.8; }
.fr-prose > :first-child { margin-top:0; }
.fr-prose h2, .fr-prose h3 { color:var(--fr-text); line-height:1.18; letter-spacing:-.55px; margin-top:2em; margin-bottom:.65em; }
.fr-prose h2 { font-size:32px; }
.fr-prose h3 { font-size:25px; }
.fr-prose a { color:var(--fr-accent); }
.fr-prose img { border-radius:14px; margin:26px auto; }
.fr-prose blockquote { margin:32px 0; padding:20px 24px; background:var(--fr-surface); border-left:4px solid var(--fr-accent); border-radius:0 14px 14px 0; }
.fr-prose script, .fr-prose .adsbygoogle { display:none!important; }

/* Recipe box */
.fr-recipe { width:min(100%, 920px); margin:46px auto; background:var(--fr-surface); border-radius:24px; box-shadow:var(--fr-shadow); overflow:hidden; }
.fr-recipe-top { padding:34px 38px 28px; border-bottom:1px solid var(--fr-line); }
.fr-recipe-kicker { color:var(--fr-accent); font-size:11px; text-transform:uppercase; letter-spacing:.13em; font-weight:850; margin-bottom:8px; }
.fr-recipe-top h2 { font-family:Georgia, serif; font-size:36px; line-height:1.08; letter-spacing:-.8px; margin:0 0 11px; }
.fr-recipe-summary { color:var(--fr-muted); margin:0; }
.fr-recipe-facts { display:flex; flex-wrap:wrap; gap:0; margin-top:24px; border:1px solid var(--fr-line); border-radius:14px; overflow:hidden; }
.fr-fact { flex:1 1 130px; min-width:0; padding:13px 16px; border-right:1px solid var(--fr-line); }
.fr-fact:last-child { border-right:0; }
.fr-fact small { display:block; color:var(--fr-muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; }
.fr-fact strong { display:block; margin-top:2px; font-size:14px; }
.fr-recipe-body { display:grid; grid-template-columns:.82fr 1.35fr; }
.fr-ingredients, .fr-method { padding:36px 38px 42px; }
.fr-ingredients { background:#fbfaf7; border-right:1px solid var(--fr-line); }
.fr-recipe h3 { font-family:Georgia,serif; font-size:26px; letter-spacing:-.5px; margin:0 0 22px; }
.fr-ingredient-list { list-style:none; padding:0; margin:0; }
.fr-ingredient-list li { padding:9px 0; border-bottom:1px solid var(--fr-line); line-height:1.42; }
.fr-ingredient-list li:last-child { border-bottom:0; }
.fr-ingredient-list .fr-amount { font-weight:800; }
.fr-ingredient-list .fr-section-label { border:0; padding:20px 0 4px; font-weight:850; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--fr-accent); }
.fr-method-list { list-style:none; counter-reset:steps; padding:0; margin:0; }
.fr-method-list li { counter-increment:steps; display:grid; grid-template-columns:34px 1fr; gap:12px; padding:0 0 19px; margin-bottom:19px; border-bottom:1px solid var(--fr-line); line-height:1.58; }
.fr-method-list li:before { content:counter(steps); width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--fr-accent-soft); color:var(--fr-accent); font-size:12px; font-weight:850; }
.fr-method-list li:last-child { border-bottom:0; margin-bottom:0; }
.fr-recipe-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:26px; }
.fr-recipe-action { border:1px solid var(--fr-line); background:white; border-radius:999px; padding:9px 14px; cursor:pointer; font-weight:700; font-size:13px; }
.fr-recipe-action:hover { border-color:var(--fr-accent); }

/* Archives/search */
.fr-list-header { padding:35px 0 32px; max-width:760px; }
.fr-list-header h1 { font-family:Georgia,serif; font-size:clamp(40px,6vw,64px); line-height:1; letter-spacing:-2px; margin:0 0 12px; }
.fr-list-header p { color:var(--fr-muted); margin:0; }
.fr-pagination { margin-top:48px; display:flex; justify-content:center; }
.fr-pagination .page-numbers { display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 10px; margin:3px; border-radius:999px; background:var(--fr-surface); text-decoration:none; }
.fr-pagination .current { background:var(--fr-accent); color:white; }

/* Ad placeholders are deliberately dormant in v1 */
.fr-ad-slot { min-height:0; display:none; }

/* Footer */
.fr-site-footer { border-top:1px solid var(--fr-line); padding:48px 0 55px; background:var(--fr-surface); }
.fr-footer-inner { display:grid; grid-template-columns:1fr auto; align-items:start; gap:40px; }
.fr-footer-title { font-family:Georgia,serif; font-size:27px; font-weight:700; margin-bottom:8px; }
.fr-footer-copy { color:var(--fr-muted); max-width:560px; font-size:14px; }
.fr-footer-menu ul { list-style:none; padding:0; margin:0; display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end; }
.fr-footer-menu a { font-size:13px; font-weight:700; text-decoration:none; }
.fr-copyright { margin-top:28px; font-size:12px; color:#97988f; }

/* No image fallback */
.fr-no-image { width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(135deg,#ece8df,#dfe5df); color:var(--fr-accent); font-family:Georgia,serif; font-size:26px; }

@media (max-width: 900px) {
  .fr-nav { display:none; position:absolute; left:20px; right:20px; top:68px; padding:10px; background:var(--fr-surface); border:1px solid var(--fr-line); border-radius:16px; box-shadow:var(--fr-shadow); }
  .fr-nav.is-open { display:block; }
  .fr-nav ul { display:block; }
  .fr-nav a { padding:12px 13px; }
  .fr-header-search { display:none; }
  .fr-menu-toggle { display:grid; place-items:center; }
  .fr-hero { grid-template-columns:1fr; }
  .fr-hero-image { min-height:auto; aspect-ratio:16/10; }
  .fr-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fr-recipe-body { grid-template-columns:1fr; }
  .fr-ingredients { border-right:0; border-bottom:1px solid var(--fr-line); }
}
@media (max-width: 620px) {
  body { font-size:16px; }
  .fr-shell, .fr-article-shell { width:min(calc(100% - 26px), var(--fr-max)); }
  .fr-header-inner { min-height:66px; }
  .fr-brand-text { font-size:23px; }
  .fr-brand-mark { width:31px; height:31px; }
  .fr-home { padding-top:18px; }
  .fr-home-intro { padding:25px 0 34px; }
  .fr-home-intro h1 { letter-spacing:-1.6px; }
  .fr-home-intro p { font-size:17px; }
  .fr-hero { border-radius:20px; margin-bottom:54px; }
  .fr-hero-copy { padding:30px 24px 34px; }
  .fr-grid { grid-template-columns:1fr; gap:28px; }
  .fr-card-image { aspect-ratio:16/10; }
  .fr-section { margin-bottom:54px; }
  .fr-category-band { padding:32px 24px; border-radius:20px; margin-bottom:54px; }
  .fr-category-band h2 { font-size:34px; }
  .fr-main { padding-top:28px; }
  .fr-article-header { text-align:left; }
  .fr-article-header h1 { font-size:clamp(39px,13vw,56px); letter-spacing:-1.6px; }
  .fr-deck { font-size:18px; }
  .fr-featured { width:calc(100% + 26px); margin-left:-13px; border-radius:0; aspect-ratio:4/3; }
  .fr-prose { font-size:17px; line-height:1.76; }
  .fr-recipe { width:calc(100% + 12px); margin-left:-6px; border-radius:17px; }
  .fr-recipe-top, .fr-ingredients, .fr-method { padding:28px 22px; }
  .fr-recipe-top h2 { font-size:31px; }
  .fr-fact { flex:1 1 50%; border-bottom:1px solid var(--fr-line); }
  .fr-fact:nth-child(even) { border-right:0; }
  .fr-footer-inner { grid-template-columns:1fr; }
  .fr-footer-menu ul { justify-content:flex-start; }
}
@media print {
  .fr-site-header,.fr-site-footer,.fr-recipe-actions,.fr-prose,.fr-breadcrumbs { display:none!important; }
  body { background:white; font-size:12pt; }
  .fr-main { padding:0; }
  .fr-featured { display:none; }
  .fr-article-header { text-align:left; margin-bottom:16px; }
  .fr-article-header h1 { font-size:28pt; }
  .fr-recipe { box-shadow:none; border:1px solid #ccc; margin:0; width:100%; }
}

/* =========================================================
   v2 – mobil först, kuraterad navigation och enhetliga recept
   ========================================================= */

/* Desktop header: bara huvudkategorier, aldrig gamla Newspaper-undermenyer. */
.fr-nav-desktop { margin-left:auto; }
.fr-primary-list { display:flex; list-style:none; margin:0; padding:0; align-items:center; gap:2px; }
.fr-primary-list > li { margin:0; padding:0; }
.fr-primary-list a { display:block; padding:10px 10px; font-size:14px; font-weight:700; text-decoration:none; border-radius:999px; white-space:nowrap; }
.fr-primary-list a:hover { background:var(--fr-surface); color:var(--fr-accent); }

/* Hamburger-ikon */
.fr-menu-toggle { padding:0; align-content:center; justify-items:center; gap:4px; }
.fr-menu-toggle span { display:block; width:17px; height:2px; border-radius:2px; background:currentColor; }

/* Mobilmeny: separat panel i stället för den gamla WP-menyn. */
.fr-mobile-nav { display:none; }
.fr-menu-backdrop { display:none; }

/* Lite kortare recept-hero på större skärmar. */
.fr-featured { aspect-ratio:auto; height:clamp(420px,47vw,560px); }

/* Alla recept får nu samma tydliga platta. */
.fr-recipe {
  position:relative;
  border-left:5px solid var(--fr-accent);
  box-shadow:0 12px 38px rgba(29,31,27,.055);
}
.fr-recipe-top { padding-left:42px; }
.fr-recipe-body { font-family:Georgia, "Times New Roman", serif; }
.fr-ingredient-list li { font-size:17px; }
.fr-method-list li { font-size:17px; }
.fr-method-list li p { margin:0; }
.fr-recipe-actions { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif; }

/* När ett manuellt gammalt recept lyfts ut försvinner överflödiga tomma stycken. */
.fr-prose p:empty { display:none; }

@media (max-width: 1020px) {
  .fr-nav-desktop { display:none; }
  .fr-header-search { display:none; }
  .fr-menu-toggle { display:grid; }

  .fr-mobile-nav {
    display:block;
    position:fixed;
    z-index:100;
    top:0;
    right:0;
    width:min(88vw,390px);
    height:100dvh;
    background:var(--fr-bg);
    padding:20px 22px 34px;
    box-shadow:-18px 0 60px rgba(25,27,24,.13);
    transform:translateX(105%);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
    overflow:auto;
  }
  .fr-mobile-nav.is-open { transform:translateX(0); }
  .fr-menu-backdrop {
    display:block;
    position:fixed;
    inset:0;
    z-index:90;
    background:rgba(23,25,22,.28);
    opacity:0;
    transition:opacity .25s ease;
  }
  .fr-menu-backdrop.is-open { opacity:1; }
  body.fr-menu-open { overflow:hidden; }
  .fr-mobile-menu-head { display:flex; align-items:center; justify-content:space-between; font-family:Georgia,serif; font-size:28px; font-weight:700; padding:4px 2px 20px; border-bottom:1px solid var(--fr-line); }
  .fr-menu-close { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--fr-surface); font-size:30px; font-weight:300; line-height:1; cursor:pointer; }
  .fr-mobile-nav .fr-primary-list { display:block; padding:18px 0 12px; }
  .fr-mobile-nav .fr-primary-list a { padding:11px 2px; border-radius:0; font-family:Georgia,serif; font-size:26px; line-height:1.15; letter-spacing:-.35px; }
  .fr-mobile-nav .fr-primary-list a:hover { background:transparent; }
  .fr-mobile-menu-extra { border-top:1px solid var(--fr-line); padding-top:14px; display:grid; gap:2px; }
  .fr-mobile-menu-extra a { padding:10px 2px; text-decoration:none; color:var(--fr-muted); font-weight:650; font-size:14px; }
}

@media (max-width: 620px) {
  .fr-header-inner { min-height:72px; }
  .fr-brand { gap:10px; }
  .fr-brand-text { font-size:clamp(22px,7vw,30px); letter-spacing:-1px; }
  .fr-brand-mark { width:34px; height:34px; }
  .fr-menu-toggle { width:46px; height:46px; }

  /* Bilden får fortfarande vara viktig på mobil men receptet nås snabbare. */
  .fr-featured { width:calc(100% + 26px); margin-left:-13px; height:auto; aspect-ratio:4/3; border-radius:0; }

  .fr-recipe {
    width:calc(100% + 12px);
    margin-left:-6px;
    border-radius:17px;
    border-left-width:4px;
  }
  .fr-recipe-top, .fr-ingredients, .fr-method { padding:27px 22px 29px; }
  .fr-recipe-top { padding-left:24px; }
  .fr-recipe-top h2 { font-size:34px; line-height:1.05; }
  .fr-recipe-kicker { margin-bottom:10px; }
  .fr-recipe-body { display:block; }
  .fr-ingredients { border-right:0; border-bottom:1px solid var(--fr-line); }
  .fr-recipe h3 { font-size:27px; }
  .fr-ingredient-list li, .fr-method-list li { font-size:17px; }
  .fr-method-list li { grid-template-columns:31px 1fr; gap:10px; }
  .fr-method-list li:before { width:28px; height:28px; }
}


/* =========================================================
   v3 – robust vanlig-text-parser + säkra långa mobilrubriker
   ========================================================= */
.fr-hero-copy { min-width:0; }
.fr-hero-copy h2,
.fr-article-header h1,
.fr-card h3 { max-width:100%; overflow-wrap:anywhere; hyphens:auto; }
.fr-hero-copy h2.fr-title-long { font-size:clamp(31px,3.45vw,46px); }
.fr-hero-copy h2.fr-title-very-long { font-size:clamp(28px,3vw,40px); }

.fr-recipe-flexible-body {
  padding:34px 42px 42px;
  font-family:Georgia, "Times New Roman", serif;
  font-size:17px;
  line-height:1.7;
  border-top:1px solid var(--fr-line);
}
.fr-recipe-flexible-body > :first-child { margin-top:0; }
.fr-recipe-flexible-body > :last-child { margin-bottom:0; }
.fr-recipe-flexible-body h2,
.fr-recipe-flexible-body h3,
.fr-recipe-flexible-body h4 {
  font-family:Georgia, "Times New Roman", serif;
  letter-spacing:-.6px;
  margin:1.45em 0 .65em;
}
.fr-recipe-flexible-body h2 { font-size:30px; }
.fr-recipe-flexible-body h3 { font-size:24px; }
.fr-recipe-flexible-body h4 { font-size:20px; }
.fr-recipe-flexible-body ul,
.fr-recipe-flexible-body ol { padding-left:1.35em; }
.fr-recipe-flexible-body li { margin:.42em 0; }

.fr-after-recipe { margin-top:42px; }

@media (max-width: 620px) {
  .fr-hero-copy { min-width:0; }
  .fr-hero-copy h2 { font-size:clamp(32px,10.2vw,43px); line-height:1.02; letter-spacing:-1.35px; }
  .fr-hero-copy h2.fr-title-long { font-size:clamp(29px,9vw,38px); }
  .fr-hero-copy h2.fr-title-very-long { font-size:clamp(26px,8vw,34px); }
  .fr-recipe-flexible-body { padding:27px 22px 32px; font-size:17px; }
  .fr-recipe-flexible-body h2 { font-size:28px; }
  .fr-recipe-flexible-body h3 { font-size:23px; }
  .fr-after-recipe { margin-top:32px; }
}


/* v4: kontrollerade manuella annonszoner. De renderas bara när de är aktiverade i admin. */
.fr-ad-wrap { width:min(100%, 920px); margin-inline:auto; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.fr-ad-wrap .adsbygoogle { width:100%; }
.fr-ad-compact { min-height:50px; margin-top:18px; margin-bottom:34px; }
.fr-ad-before-recipe { min-height:90px; margin-top:34px; margin-bottom:34px; }
.fr-ad-after-recipe { min-height:250px; margin-top:42px; margin-bottom:18px; }
.fr-ad-label { display:none; }

@media (max-width: 700px) {
  .fr-ad-wrap { width:100%; }
  .fr-ad-compact { min-height:50px; margin-top:12px; margin-bottom:28px; }
  .fr-ad-before-recipe { min-height:90px; margin-top:28px; margin-bottom:28px; }
  .fr-ad-after-recipe { min-height:280px; margin-top:36px; margin-bottom:12px; }
}


/* =========================================================
   v5 – kompakt startsida + robust touch/pointer-fix i mobil
   ========================================================= */

/* Hemintro: söket ska vara det första stora arbetsverktyget. */
.fr-home-intro {
  padding-top: 18px;
}
.fr-home-intro .fr-eyebrow {
  margin-bottom: 20px;
}

/* Safari/iOS: osynlig backdrop får aldrig fånga tryck när menyn är stängd. */
@media (max-width: 1020px) {
  .fr-menu-backdrop {
    pointer-events: none;
    visibility: hidden;
  }
  .fr-menu-backdrop.is-open {
    pointer-events: auto;
    visibility: visible;
  }
  .fr-mobile-nav {
    pointer-events: none;
    visibility: hidden;
  }
  .fr-mobile-nav.is-open {
    pointer-events: auto;
    visibility: visible;
  }
  .fr-menu-toggle,
  .fr-menu-close {
    color: var(--fr-text);
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
  }
}

@media (max-width: 620px) {
  .fr-home { padding-top: 8px; }
  .fr-home-intro { padding: 18px 0 30px; }
  .fr-home-intro .fr-eyebrow {
    font-size: 11px;
    margin-bottom: 18px;
  }
  .fr-big-search input { height: 58px; padding-left:20px; font-size:16px; }
  .fr-big-search button { width:44px; height:44px; top:7px; right:7px; }
  .fr-chips { margin-top:22px; }
}


/* =========================================================
   v6 – mobilputs: solid header, lugnare titlar och visningar
   ========================================================= */
.fr-site-header {
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 1px 0 rgba(231,227,218,.9);
}
.fr-post-views {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:2px auto 17px;
  color:var(--fr-muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}
.fr-post-views svg { width:15px; height:15px; opacity:.72; }
.fr-article-header h1.fr-title-long { font-size:clamp(39px,5.25vw,64px); }
.fr-article-header h1.fr-title-very-long { font-size:clamp(36px,4.7vw,57px); }

@media (max-width:620px) {
  .fr-header-inner { min-height:68px; }
  .fr-brand-text { font-size:clamp(21px,6.7vw,28px); }
  .fr-brand-mark { width:32px; height:32px; }
  .fr-menu-toggle { width:44px; height:44px; }
  .fr-main { padding-top:34px; }
  .fr-article-header { margin-bottom:24px; }
  .fr-breadcrumbs { font-size:10px; letter-spacing:.1em; margin-bottom:13px; }
  .fr-article-header h1 {
    font-size:clamp(38px,11.7vw,46px);
    line-height:.98;
    letter-spacing:-1.7px;
    margin-bottom:14px;
  }
  .fr-article-header h1.fr-title-long {
    font-size:clamp(35px,10.5vw,42px);
  }
  .fr-article-header h1.fr-title-very-long {
    font-size:clamp(32px,9.5vw,38px);
  }
  .fr-post-views { margin-bottom:11px; font-size:11px; }
  .fr-prose { font-size:17px; line-height:1.72; }
  .fr-featured { margin-bottom:34px; }
}


/* =========================================================
   v7 – relaterade recept under posten
   ========================================================= */
.fr-related {
  width:min(100%, 1120px);
  margin:64px auto 8px;
  padding-top:42px;
  border-top:1px solid var(--fr-line);
}
.fr-related-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}
.fr-related-head h2 {
  margin:0;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(30px,3.6vw,44px);
  line-height:1.02;
  letter-spacing:-1px;
}
.fr-related-head span {
  color:var(--fr-muted);
  font-size:13px;
  font-weight:700;
}
.fr-related-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}

@media (max-width:620px) {
  .fr-related {
    width:100%;
    margin-top:46px;
    padding-top:32px;
  }
  .fr-related-head { margin-bottom:18px; align-items:center; }
  .fr-related-head h2 { font-size:31px; }
  .fr-related-head span { display:none; }
  .fr-related-grid {
    display:flex;
    gap:16px;
    overflow-x:auto;
    margin-left:-20px;
    margin-right:-20px;
    padding:0 20px 14px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .fr-related-grid::-webkit-scrollbar { display:none; }
  .fr-related-grid .fr-card {
    flex:0 0 78%;
    scroll-snap-align:start;
  }
  .fr-related-grid .fr-card-image { aspect-ratio:4/3; }
  .fr-related-grid .fr-card h3 { font-size:22px; }
}


/* =========================================================
   v8 – stabil mobilbredd + rätt startläge för relaterade kort
   ========================================================= */

/* Annonskreativ får aldrig göra själva sidan bredare än viewporten. */
html,
body {
  max-width:100%;
  overflow-x:hidden;
}

.fr-ad-wrap {
  width:100%;
  max-width:920px;
  min-width:0;
  overflow:hidden;
  contain:layout paint;
}
.fr-ad-wrap .adsbygoogle,
.fr-ad-wrap .adsbygoogle iframe {
  max-width:100% !important;
  min-width:0 !important;
}

@media (max-width:700px) {
  .fr-ad-wrap {
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Mobil: första relaterade kortet börjar exakt i innehållskanten,
   medan nästa kort fortfarande skymtar till höger som swipe-signal. */
@media (max-width:620px) {
  .fr-related-grid {
    margin-left:0;
    margin-right:-20px;
    padding:0 20px 14px 0;
    scroll-padding-left:0;
    overscroll-behavior-x:contain;
  }
  .fr-related-grid .fr-card {
    flex-basis:82%;
  }
}

/* =========================================================
   v9 – riktigt äpple, centrerad mobil-logo och cacheoberoende startsiderotation
   ========================================================= */
.fr-brand-logo {
  width:35px;
  height:40px;
  object-fit:contain;
  flex:0 0 auto;
}
.fr-brand-mark { display:none !important; }
.fr-big-search button {
  display:grid;
  place-items:center;
}
.fr-big-search button svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
}
.fr-home-hero-pool > [hidden],
.fr-random-card[hidden],
.fr-random-category[hidden] { display:none !important; }
.fr-random-card { min-width:0; }

@media (max-width:620px) {
  .fr-header-inner {
    position:relative;
    justify-content:flex-end;
  }
  .fr-brand {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    margin:0;
    max-width:calc(100% - 88px);
    white-space:nowrap;
  }
  .fr-brand-logo { width:30px; height:35px; }
  .fr-brand-text { font-size:clamp(20px,6.2vw,27px); }
  .fr-menu-toggle { margin-left:auto; position:relative; z-index:2; }
  .fr-big-search button svg { width:28px; height:28px; stroke-width:2.5; }
}


/* =========================================================
   v10 – annonsbalans mobil, riktig viewport-centrerad logo
   ========================================================= */

/* Desktop: tre ordinarie annonsplatser. Den extra platsen efter relaterade recept är mobil-only. */
.fr-ad-after-related { display:none; }

@media (max-width:700px) {
  /* På mobil flyttas After image-enheten till sidans slut i stället för att ligga direkt under bilden. */
  .fr-ad-compact { display:none !important; }
  .fr-ad-after-related {
    display:flex;
    min-height:250px;
    margin-top:28px;
    margin-bottom:8px;
  }
}

@media (max-width:620px) {
  /* Centrera hela logopaketet mot själva viewporten – hamburgaren påverkar inte positionen. */
  .fr-brand {
    left:50vw;
    transform:translateX(-50%);
    max-width:calc(100vw - 108px);
  }
  .fr-brand-logo { flex:0 0 auto; }
  .fr-brand-text {
    overflow:hidden;
    text-overflow:clip;
  }
}

/* =========================================================
   v11 – print utan annonser + återställd sticky header + exakt centrerad mobillogo
   ========================================================= */

/* overflow-x:hidden på html/body kan i iOS Safari göra position:sticky opålitlig.
   clip stoppar sidledsgung utan att skapa en scroll-container. */
html,
body {
  max-width:100%;
  overflow-x:clip;
}

.fr-site-header {
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:100;
  background:#fff;
}

@media (max-width:620px) {
  /* fr-header-inner är centrerad i viewporten. 50% här är därför exakt skärmcentrum. */
  .fr-brand {
    left:50%;
    transform:translateX(-50%);
    max-width:calc(100% - 94px);
  }
}

@media print {
  /* Utskrift ska vara ett rent recept – aldrig annonser eller relaterade kort. */
  .fr-ad-wrap,
  .fr-ad-after-related,
  .fr-related,
  .fr-post-views {
    display:none !important;
  }
}


/* =========================================================
   v12 – synligt innehåll är source of truth + finjusterad mobillogo
   ========================================================= */
@media (max-width:620px) {
  .fr-brand { left:49%; }
}