/* ============================================================
   FJALLA - SEO pages (calculator + blog)
   Separate file on purpose: keeps styles.css conflict-free.
   Uses the token system from styles.css (must load after it).
   ============================================================ */

/* ---------- shared page shell ---------- */
.seo-main { padding: 150px 0 90px; }
.seo-main .wrap { max-width: 880px; }
.seo-main h1 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h2); line-height: 1.05; }
.seo-sub { color: var(--fg-soft); font-size: var(--fs-lead); margin-top: 1rem; max-width: 62ch; }

/* ---------- calculator ---------- */
.calc-card { margin-top: 2.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--grad-soft); }
.calc-label { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--fg-soft); display: block; }
.calc-input-row { display: flex; align-items: center; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.calc-input {
  font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: var(--fg);
  background: rgba(255,255,255,.05); border: 2px solid var(--line-2); border-radius: var(--r-md);
  padding: 10px 18px; width: 220px;
}
.calc-input:focus { outline: none; border-color: var(--blue); }
.calc-range { flex: 1; min-width: 200px; accent-color: var(--blue); }
.calc-results { margin-top: 2rem; display: flex; flex-direction: column; gap: 14px; }
.calc-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 14px; align-items: center; }
.calc-name { font-family: var(--font-head); font-weight: 800; font-size: .9rem; }
.calc-name small { display: block; font-weight: 600; font-size: .68rem; color: var(--fg-muted); }
.calc-bar-track { height: 34px; border-radius: 8px; background: rgba(255,255,255,.05); overflow: hidden; }
.calc-bar { height: 100%; border-radius: 8px; background: rgba(255,255,255,.16); transition: width .5s var(--ease); min-width: 2px; }
.calc-row--fjalla .calc-bar { background: linear-gradient(90deg, var(--blue-deep), var(--blue), var(--blue-bright)); box-shadow: var(--glow-blue); }
.calc-amount { font-family: var(--font-display); font-size: 1.35rem; min-width: 130px; text-align: right; }
.calc-row--fjalla .calc-amount { color: var(--blue); }
.calc-note { margin-top: 1.6rem; font-size: .8rem; color: var(--fg-muted); line-height: 1.6; }
.calc-highlight { margin-top: 2rem; padding: 18px 22px; border-radius: var(--r-md); border: 1px solid rgba(54,182,255,.35); background: rgba(54,182,255,.08); font-size: .95rem; color: var(--fg-soft); }
.calc-highlight strong { color: var(--fg); }

/* ---------- FAQ ---------- */
.faq { margin-top: 3.5rem; }
.faq h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h3); margin-bottom: 1rem; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 12px; background: rgba(255,255,255,.02); }
.faq summary { cursor: pointer; padding: 16px 20px; font-family: var(--font-head); font-weight: 700; font-size: .95rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::after { content: "+"; font-family: var(--font-display); color: var(--blue); font-size: 1.2rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 20px 16px; color: var(--fg-soft); font-size: .92rem; line-height: 1.7; }

/* ---------- CTA band (calculator + articles) ---------- */
.seo-cta { margin-top: 3.5rem; padding: clamp(1.8rem, 4vw, 2.6rem); text-align: center; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--grad-soft); }
.seo-cta h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h3); }
.seo-cta p { color: var(--fg-soft); margin-top: .6rem; }
.seo-cta .store-row { margin-top: 1.4rem; justify-content: center; }

/* ---------- blog ---------- */
.blog-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.blog-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(255,255,255,.02); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.blog-card:hover { transform: translateY(-5px); border-color: var(--line-2); }
.blog-card h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.08rem; line-height: 1.35; }
.blog-card p { color: var(--fg-soft); font-size: .88rem; margin-top: 10px; flex: 1; }
.blog-card .blog-meta { margin-top: 14px; }
.blog-meta { font-family: var(--font-head); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); }
.article-body { margin-top: 2.2rem; }
.article-body h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h3); margin: 2.4rem 0 .8rem; }
.article-body h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; margin: 1.8rem 0 .5rem; }
.article-body p { color: var(--fg-soft); line-height: 1.75; margin-top: .9rem; }
.article-body ul, .article-body ol { color: var(--fg-soft); line-height: 1.75; margin: .9rem 0 0 1.3rem; }
.article-body ul li { list-style: disc; margin-top: .4rem; }
.article-body ol li { list-style: decimal; margin-top: .4rem; }
.article-body a { color: var(--blue); }
.article-body a:hover { text-decoration: underline; }
.article-body strong { color: var(--fg); }
.article-body blockquote { margin-top: 1.2rem; padding: 14px 20px; border-left: 3px solid var(--blue); background: rgba(54,182,255,.06); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--fg-soft); }
.article-body table { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: .9rem; }
.article-body th, .article-body td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--fg-soft); }
.article-body th { font-family: var(--font-head); font-weight: 800; color: var(--fg); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.article-related { margin-top: 3rem; }
.article-related h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h3); margin-bottom: 1rem; }

@media (max-width: 720px) {
  .calc-row { grid-template-columns: 96px 1fr; }
  .calc-amount { grid-column: 2; text-align: left; min-width: 0; }
}

/* ---------- mobile nav ----------
   styles.css hides .nav-links + the CTA below 720px and shows the hamburger,
   but SEO pages (blog/calculator) have no hamburger markup and no main.js.
   Instead: navbar wraps to two rows, links become a scrollable strip. */
@media (max-width: 720px) {
  .navbar { flex-wrap: wrap; row-gap: 2px; }
  .navbar .nav-links {
    display: flex; order: 3; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 2px; scrollbar-width: none;
  }
  .navbar .nav-links::-webkit-scrollbar { display: none; }
  .navbar .nav-links a { white-space: nowrap; font-size: .78rem; padding: 8px 10px; }
  .navbar .nav-right .btn { display: inline-flex; font-size: .8rem; padding: 10px 18px; white-space: nowrap; }
  .navbar .logo-img { height: 52px; }
}