/*
Theme Name: Andreas L. Berg — Blog
Theme URI: https://andreas-l-berg.com/
Author: Andreas L. Berg
Description: A dark, image-led WordPress theme designed to feel continuous with the Andreas L. Berg photography portfolio.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: andreas-berg-blog
*/

:root {
  color-scheme: dark;
  --ab-bg: #202020;
  --ab-ink: #f2f1ef;
  --ab-muted: #92918f;
  --ab-line: #343434;
  --ab-font: futura-100, "Futura 100", "Century Gothic", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ab-bg);
  color: var(--ab-ink);
  font-family: var(--ab-font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
}
body.admin-bar .ab-sidebar { top: 102px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 1px solid #c4c4c4; outline-offset: 4px; }
.ab-skip-link { position: fixed; top: 10px; left: 10px; z-index: 9999; padding: 10px 14px; transform: translateY(-160%); background: #111; color: #fff; }
.ab-skip-link:focus { transform: translateY(0); }

.ab-layout { width: min(1260px, 100%); min-height: 100vh; margin: 0 auto; padding: 95px 12px 72px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 75px; }
.ab-sidebar { position: sticky; top: 70px; align-self: start; height: max-content; padding: 0 12px; text-align: center; }
.ab-brand { display: grid; width: 150px; height: 150px; margin: 0 auto; place-items: center; overflow: visible; border-radius: 50%; }
.ab-brand img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.ab-brand-name { margin: 20px 0 72px; color: #c5c5c5; font-size: 20px; line-height: 1.35; }
.ab-menu-toggle { display: none; }
.ab-primary-nav, .ab-secondary-nav { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ab-primary-nav ul, .ab-secondary-nav ul { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ab-primary-nav li, .ab-secondary-nav li { margin: 0; padding: 0; list-style: none; }
.ab-primary-nav { padding-bottom: 16px; border-bottom: 1px solid #414141; }
.ab-primary-nav a, .ab-secondary-nav a { color: #a0a0a0; font-size: 16px; line-height: 1.35; text-decoration: none; transition: color .2s ease; }
.ab-primary-nav a:hover, .ab-primary-nav a[aria-current="page"], .ab-secondary-nav a:hover { color: #f4f4f4; }
.ab-secondary-nav { gap: 8px; margin-top: 16px; }
.ab-instagram { display: inline-grid; width: 22px; height: 22px; place-items: center; margin: 4px auto 0; }
.ab-instagram svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-instagram .ab-instagram-dot { fill: currentColor; stroke: none; }

.ab-main { min-width: 0; }
.ab-page-heading { margin: 0 0 38px; text-align: center; }
.ab-kicker { margin: 0 0 8px; color: #888; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.ab-page-heading h1 { margin: 0; color: #f2f1ef; font-size: clamp(30px, 4vw, 48px); font-weight: 300; letter-spacing: .03em; line-height: 1.15; text-transform: uppercase; }
.ab-page-description { max-width: 720px; margin: 16px auto 0; color: #aaa; text-align: center; }

.ab-post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ab-post-card { position: relative; min-width: 0; background: #111; }
.ab-card-link { display: block; color: inherit; text-decoration: none; }
.ab-card-image { position: relative; display: grid; aspect-ratio: 1 / 1; place-items: center; overflow: hidden; background: #111; }
.ab-card-image::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%); content: ""; opacity: .72; transition: opacity .3s ease; }
.ab-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.ab-card-link:hover .ab-card-image img, .ab-card-link:focus-visible .ab-card-image img { transform: scale(1.035); }
.ab-card-link:hover .ab-card-image::after, .ab-card-link:focus-visible .ab-card-image::after { opacity: 1; }
.ab-card-title { position: absolute; z-index: 1; right: 16px; bottom: 15px; left: 16px; margin: 0; color: #f2f1ef; font-size: clamp(18px, 2vw, 27px); font-weight: 200; line-height: 1.2; text-align: center; text-shadow: 0 2px 18px #000; }
.ab-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 9px 10px 11px; color: #858585; font-size: 11px; line-height: 1.45; }
.ab-card-meta time { color: #bdbbb8; }
.ab-card-categories a { color: inherit; text-decoration: none; }
.ab-card-categories a:hover { color: #eee; }
.ab-empty { padding: 40px 10px; color: var(--ab-muted); text-align: center; }
.ab-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 48px 0 0; }
.ab-pagination .page-numbers { display: inline-grid; min-width: 38px; min-height: 38px; place-items: center; padding: 6px 10px; border: 1px solid #414141; color: #aaa; text-decoration: none; }
.ab-pagination .page-numbers.current, .ab-pagination a.page-numbers:hover { border-color: #aaa; color: #fff; }

.ab-entry { max-width: 960px; margin: 0 auto; }
.ab-entry-header { margin: 0 auto 30px; text-align: center; }
.ab-entry-header h1 { margin: 0; font-size: clamp(36px, 7vw, 82px); font-weight: 100; letter-spacing: -.04em; line-height: 1.03; text-transform: uppercase; }
.ab-entry-location { margin: 12px 0 0; color: #aaa; font-size: 14px; letter-spacing: .06em; }
.ab-entry-license { max-width: 680px; margin: 18px auto 0; color: #999; font-size: 12px; }
.ab-entry-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin: 0 auto 35px; color: #868686; font-size: 12px; }
.ab-entry-meta a { color: #b6b4b1; text-decoration: none; }
.ab-entry-meta a:hover { color: #fff; }
.ab-entry-content { color: #d4d2ce; font-size: 16px; line-height: 1.8; }
.ab-entry-content > * { max-width: 100%; }
.ab-entry-content p { max-width: 760px; margin: 0 auto 1.35em; }
.ab-entry-content h2, .ab-entry-content h3, .ab-entry-content h4 { max-width: 760px; margin: 2em auto .65em; color: #eee; font-weight: 300; line-height: 1.2; }
.ab-entry-content figure { margin: 30px auto; }
.ab-entry-content img { display: block; width: auto; max-width: 100%; max-height: 82vh; margin: 0 auto; object-fit: contain; }
.ab-entry-content figcaption { margin-top: 8px; color: #898989; font-size: 12px; text-align: center; }
.ab-entry-content a { color: #e2e0dc; text-underline-offset: 3px; }
.ab-entry-content blockquote { max-width: 760px; margin: 36px auto; padding-left: 20px; border-left: 1px solid #777; color: #c9c7c3; }
.ab-entry-content .wp-block-gallery { margin-block: 34px; }
.ab-entry-taxonomies { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0 auto 30px; color: #888; font-size: 12px; text-align: center; }
.ab-term-group { display: inline-block; }
.ab-entry-taxonomies a { color: #c5c3bf; text-decoration: none; }
.ab-entry-taxonomies a:hover { color: #fff; }
.ab-post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 46px 0; padding-top: 20px; border-top: 1px solid var(--ab-line); }
.ab-post-navigation a { color: #c8c6c2; text-decoration: none; }
.ab-post-navigation a:hover { color: #fff; }
.ab-post-navigation .ab-next { text-align: right; }
.ab-comments { max-width: 760px; margin: 48px auto 0; padding-top: 28px; border-top: 1px solid var(--ab-line); }
.ab-comments h2, .ab-comments h3 { font-weight: 300; }
.ab-comments a { color: #ddd; }
.ab-comments input:not([type="submit"]), .ab-comments textarea { width: 100%; border: 1px solid #494949; border-radius: 0; background: #191919; color: #f2f1ef; padding: 12px; }
.ab-comments input[type="submit"] { border: 1px solid #777; background: transparent; color: #eee; padding: 11px 18px; cursor: pointer; }

.ab-search-form { display: flex; max-width: 540px; margin: 0 auto 32px; }
.ab-search-form label { flex: 1; }
.ab-search-form input[type="search"] { width: 100%; min-height: 42px; border: 1px solid #494949; border-right: 0; border-radius: 0; background: #191919; color: #f2f1ef; padding: 9px 12px; }
.ab-search-form input[type="submit"] { min-height: 42px; border: 1px solid #777; background: transparent; color: #eee; padding: 8px 14px; cursor: pointer; }
.ab-footer { display: flex; justify-content: center; gap: 24px; margin-top: 60px; padding: 22px 20px; border-top: 1px solid #303030; color: #777; font-size: 12px; text-align: center; }
.ab-footer a { color: inherit; text-decoration: none; }
.ab-footer a:hover { color: #eee; }
.ab-footer-inner { width: min(1260px, 100%); }
.ab-footer-inner { display: grid; justify-items: center; gap: 8px; }
.ab-footer-credit { margin: 0; }
.ab-footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 11px; }
.ab-footer-inner a { color: inherit; text-decoration: none; }
.ab-footer-inner a:hover { color: #eee; }
.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; }

@media (max-width: 850px) {
  .ab-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding: 65px 16px 65px; }
  .ab-brand { width: 110px; height: 110px; }
  .ab-brand-name { margin: 16px 0 45px; }
  .ab-post-grid { gap: 8px; }
}
@media (max-width: 600px) {
  body.admin-bar .ab-sidebar { top: 46px; }
  .ab-layout { display: block; padding: 24px 12px 55px; }
  .ab-sidebar { position: static; display: grid; grid-template-columns: 62px minmax(0, 1fr) 44px; grid-template-rows: auto auto; align-items: center; column-gap: 14px; padding: 0 4px 22px; text-align: left; }
  .ab-brand { grid-column: 1; grid-row: 1 / span 2; width: 62px; height: 62px; margin: 0; }
  .ab-brand-name { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; font-size: 19px; }
  .ab-menu-toggle { grid-column: 3; grid-row: 1 / span 2; display: flex; width: 42px; height: 42px; padding: 10px 8px; flex-direction: column; justify-content: center; gap: 5px; border: 1px solid #414141; border-radius: 50%; background: transparent; cursor: pointer; }
  .ab-menu-toggle span { display: block; width: 100%; height: 1px; background: #ddd; transition: transform .2s, opacity .2s; }
  .ab-sidebar.is-open .ab-menu-toggle span:first-child { transform: translateY(6px) rotate(45deg); }
  .ab-sidebar.is-open .ab-menu-toggle span:nth-child(2) { opacity: 0; }
  .ab-sidebar.is-open .ab-menu-toggle span:last-child { transform: translateY(-6px) rotate(-45deg); }
  .ab-primary-nav, .ab-secondary-nav { display: none; grid-column: 1 / -1; align-items: stretch; text-align: left; }
  .ab-sidebar.is-open .ab-primary-nav { display: flex; grid-row: 3; align-items: stretch; gap: 0; padding-top: 18px; }
  .ab-sidebar.is-open .ab-secondary-nav { display: flex; grid-row: 4; align-items: flex-start; gap: 0; margin-top: 12px; }
  .ab-sidebar.is-open .ab-primary-nav ul, .ab-sidebar.is-open .ab-secondary-nav ul { align-items: stretch; gap: 0; }
  .ab-primary-nav a, .ab-secondary-nav a { width: 100%; padding: 10px 4px; font-size: 16px; text-align: left; }
  .ab-primary-nav a:first-child { margin-bottom: 6px; padding-bottom: 16px; border-bottom: 1px solid #414141; }
  .ab-secondary-nav a { padding-top: 5px; padding-bottom: 5px; }
  .ab-instagram { margin: 7px 4px; }
  .ab-page-heading { margin-bottom: 22px; }
  .ab-page-heading h1 { font-size: clamp(26px, 8vw, 38px); }
  .ab-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .ab-card-image { aspect-ratio: 1 / 1.1; }
  .ab-card-title { right: 7px; bottom: 8px; left: 7px; font-size: clamp(15px, 4vw, 21px); }
  .ab-card-meta { justify-content: center; padding: 7px 3px 9px; font-size: 10px; text-align: center; }
  .ab-entry-header { margin-bottom: 22px; }
  .ab-entry-header h1 { font-size: clamp(34px, 11vw, 54px); }
  .ab-entry-content { font-size: 15px; line-height: 1.75; }
  .ab-entry-content img { max-height: 74vh; }
  .ab-entry-meta { margin-bottom: 24px; font-size: 11px; }
  .ab-post-navigation { gap: 12px; font-size: 13px; }
  .ab-footer { margin-top: 40px; font-size: 11px; }
}