/*
Theme Name: Bjöggi Clean
Theme URI: https://bjoggi.org
Author: Björgvin Ármannsson
Description: Hreint og nútímalegt bloggþema fyrir Bjöggi.org.
Version: 1.0.0
Text Domain: bjoggi-clean
*/

:root {
  --bj-bg: #f7f7f4;
  --bj-ink: #17201f;
  --bj-deep: #172b28;
  --bj-muted: #65706d;
  --bj-accent: #66827e;
  --bj-line: #dfe4df;
  --bj-white: #fff;
  --bj-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bj-bg);
  color: var(--bj-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: #c9ddd7; color: var(--bj-ink); }

.bj-wrap { width: min(var(--bj-max), calc(100% - 40px)); margin-inline: auto; }
.bj-site { min-height: 100vh; display: flex; flex-direction: column; }
.bj-main { flex: 1; }

.bj-header { border-bottom: 1px solid var(--bj-line); background: rgba(247,247,244,.96); }
.bj-header-inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bj-logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -.045em; }
.bj-logo-dot { color: #698681; }
.bj-nav { display: flex; align-items: center; gap: 24px; font-size: .9rem; font-weight: 650; }
.bj-nav a { transition: color .2s ease, border-color .2s ease, background .2s ease; }
.bj-nav a:hover { color: #55736e; }
.bj-admin-link { border: 1px solid #cbd6d2; border-radius: 999px; padding: 10px 17px; }
.bj-admin-link:hover { border-color: #58746f; background: #fff; }

.bj-hero { padding: 76px 0 56px; }
.bj-hero-grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: end; gap: 40px; }
.bj-kicker, .bj-date { margin: 0; color: var(--bj-accent); font-size: .75rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.bj-hero h1 { max-width: 600px; margin: 24px 0 0; font-size: clamp(3.35rem, 7vw, 6.7rem); font-weight: 650; line-height: .88; letter-spacing: -.065em; text-wrap: balance; }
.bj-lead { max-width: 480px; margin: 28px 0 0; color: #56615f; font-size: 1.125rem; line-height: 1.75; }

.bj-feature { display: block; overflow: hidden; border-radius: 32px; background: var(--bj-deep); color: #fff; box-shadow: 0 28px 80px -48px rgba(23,43,40,.75); }
.bj-feature-media { aspect-ratio: 3 / 2; overflow: hidden; background: #29413d; }
.bj-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.bj-feature:hover .bj-feature-media img { transform: scale(1.025); }
.bj-feature-body { padding: 34px 36px 38px; }
.bj-feature .bj-date { color: #a8c7c0; }
.bj-feature h2 { margin: 18px 0 0; font-size: clamp(2rem, 4vw, 2.55rem); line-height: 1.05; letter-spacing: -.04em; }
.bj-feature p { max-width: 650px; margin: 16px 0 0; color: #d8e4e1; line-height: 1.75; }

.bj-posts { border-top: 1px solid var(--bj-line); background: #fff; padding: 76px 0 84px; }
.bj-section-head { margin-bottom: 40px; }
.bj-section-head h2 { margin: 12px 0 0; font-size: clamp(2rem, 5vw, 2.55rem); letter-spacing: -.035em; }
.bj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
.bj-card { display: block; }
.bj-card-media { display: flex; aspect-ratio: 4 / 3; margin-bottom: 20px; overflow: hidden; align-items: flex-end; border-radius: 23px; background: #e2ebe7; }
.bj-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bj-card:hover .bj-card-media img { transform: scale(1.025); }
.bj-card-mark { padding: 24px; color: #73918b; font-size: 3rem; font-weight: 700; letter-spacing: -.08em; }
.bj-card h3 { margin: 12px 0 0; font-size: 1.55rem; line-height: 1.15; letter-spacing: -.035em; }
.bj-card p { margin: 12px 0 0; color: #68726f; line-height: 1.7; }
.bj-empty { padding: 42px; border: 1px dashed #cbd5d1; border-radius: 28px; background: var(--bj-bg); }
.bj-empty h3 { margin: 0; font-size: 1.6rem; }
.bj-empty p { margin: 12px 0 0; color: var(--bj-muted); line-height: 1.75; }

.bj-article { width: min(900px, calc(100% - 40px)); margin-inline: auto; padding: 72px 0 90px; }
.bj-back { display: inline-flex; margin-bottom: 40px; color: #5f7974; font-size: .9rem; font-weight: 700; }
.bj-article h1 { max-width: 900px; margin: 18px 0 0; font-size: clamp(2.8rem, 7vw, 5.8rem); font-weight: 650; line-height: .94; letter-spacing: -.06em; text-wrap: balance; }
.bj-article-excerpt { max-width: 760px; margin: 28px 0 0; color: #5e6a67; font-size: clamp(1.2rem, 3vw, 1.5rem); line-height: 1.5; }
.bj-article-image { width: 100%; margin: 42px 0 0; border-radius: 24px; }
.bj-content { margin-top: 42px; color: #34413f; font-size: 1.125rem; line-height: 1.9; }
.bj-content > * { max-width: 760px; margin-inline: auto; }
.bj-content > .alignwide { max-width: 900px; }
.bj-content > .alignfull { max-width: none; }
.bj-content p, .bj-content ul, .bj-content ol, .bj-content blockquote { margin-top: 1.35rem; margin-bottom: 1.35rem; }
.bj-content h2, .bj-content h3 { margin-top: 2.4em; color: var(--bj-ink); line-height: 1.15; letter-spacing: -.035em; }
.bj-content a { color: #3f6f67; text-decoration: underline; text-underline-offset: 3px; }
.bj-content img, .bj-content video, .bj-content iframe { border-radius: 24px; }
.bj-content iframe { width: 100%; aspect-ratio: 16 / 9; }
.bj-content blockquote { padding-left: 24px; border-left: 4px solid #9cb8b1; color: #52615e; }

.bj-footer { border-top: 1px solid var(--bj-line); }
.bj-footer-inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #69736f; font-size: .875rem; }
.bj-footer p { margin: 0; }

@media (max-width: 900px) {
  .bj-hero-grid { grid-template-columns: 1fr; align-items: stretch; }
  .bj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .bj-wrap, .bj-article { width: min(100% - 32px, var(--bj-max)); }
  .bj-header-inner { min-height: 72px; }
  .bj-nav { gap: 14px; }
  .bj-admin-link { padding: 8px 12px; }
  .bj-hero { padding: 48px 0; }
  .bj-hero h1 { font-size: clamp(3rem, 16vw, 4.4rem); }
  .bj-feature-body { padding: 26px; }
  .bj-posts { padding: 52px 0 64px; }
  .bj-grid { grid-template-columns: 1fr; }
  .bj-footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 26px; }
}