/*
Theme Name: no-god
Theme URI: https://no-god.de
Author: Michael Süß
Description: A minimal, gallery-focused artist portfolio theme. Features a full-screen configurable background image, elegant top-left navigation, and dedicated templates for image and text categories.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: no-god
Tags: portfolio, minimal, photography, art, one-column, full-width-template, featured-images
*/

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* --color-bg and --color-text are also the palette in theme.json and the
     Customizer defaults in functions.php; keep the three in step. The
     Customizer overrides --color-bg and --color-link per site. */
  --color-bg:        #f0eeea;
  --color-surface:   #ffffff;
  --color-text:      #2a2a2a;
  --color-text-muted:#666666; /* 5.7:1 on white, 5:1 on --color-bg */
  --color-link:      var(--color-text);

  /* The mobile menu is its own surface. Its legibility must not depend on the
     background image, on whatever page content sits behind the blur, or on the
     nav colour picked in the Customizer — a colour chosen to read against a
     dark photograph is exactly the one that disappears here. So it inherits
     none of them. */
  --overlay-surface:      #f4f3f1;
  --overlay-ink:          #1c1c1c;
  --color-border:    rgba(0,0,0,0.08);

  --font-sans:       'Cormorant Garamond', 'Garamond', Georgia, serif;
  --font-ui:         'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --nav-top:         clamp(1.25rem, 3vw, 2.5rem);
  --nav-left:        clamp(1.25rem, 3vw, 2.5rem);
  /* Fixed, not fluid. The previous clamp(2.5rem, 1vw, 1rem) had its
     minimum above its maximum, so it always resolved to 2.5rem. */
  --nav-font-size:   2.5rem;
  --nav-line-height: 1.85;
  --nav-letter-spacing: 0.04em;

  --content-max:     720px;
  --content-padding: clamp(1.5rem, 5vw, 4rem);

  --transition-speed: 0.25s;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

/* No font-size here: every size below is in rem, so they follow the reader's
   default text size instead of a fixed 16px. */
html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The Customizer background, on a layer pinned to the viewport.
 *
 * Not background-attachment: fixed on body. iOS Safari ignores fixed, so the
 * image was sized against the whole document instead and a long page blew it
 * up to many times the screen height. A fixed box is the same size on every
 * page and every browser.
 *
 * Height in vh rather than inset: 0. On mobile vh is the large viewport, so
 * the layer does not resize, and the image does not rescale, each time the
 * browser toolbar slides in or out. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-image: var(--bg-image, none);
  background-size: var(--bg-size, cover);
  background-position: var(--bg-position, center center);
  background-repeat: no-repeat;
  pointer-events: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: opacity var(--transition-speed) ease;
}

a:hover {
  opacity: 0.5;
}

/* ============================================================
   FRONT PAGE — FULL-SCREEN BACKGROUND LAYOUT
   ============================================================ */

.site-frontpage {
  position: relative;
  width: 100vw;
  /* min-height: 100vh here would win over the svh height on mobile, where vh
     is the LARGE viewport — the page then ran under the browser chrome and
     took the footer with it. Declare vh first as a fallback instead: browsers
     without svh use it, browsers with svh override it. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Vignette layer. The image itself is painted by body::before from the
   Customizer, so this element carries no background of its own. */
.site-frontpage__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-frontpage__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.04) 100%);
  pointer-events: none;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.site-nav {
  position: fixed;
  top: var(--nav-top);
  left: var(--nav-left);
  z-index: 100;
}

/* The theme suppresses the admin bar's page bump (functions.php) so the
   full-screen front page keeps its exact viewport height. The bar itself is
   still rendered, so offset the nav out from under it for logged-in users. */
body.admin-bar .site-nav {
  top: calc(var(--nav-top) + 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-nav {
    top: calc(var(--nav-top) + 46px);
  }
}

.site-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav__list li {
  line-height: var(--nav-line-height);
}

/* Artist name — slightly larger, acts as home link */
.site-nav__name {
  font-family: var(--font-ui);
  font-size: var(--nav-font-size);
  font-weight: 400;
  letter-spacing: var(--nav-letter-spacing);
  color: var(--color-text);
  margin-bottom: 0.15em;
  display: block;
}

.site-nav__name:hover {
  opacity: 0.5;
}

/* Regular nav links */
.site-nav__link {
  font-family: var(--font-ui);
  font-size: var(--nav-font-size);
  font-weight: 400;
  letter-spacing: var(--nav-letter-spacing);
  color: var(--color-text);
  display: block;
}

.site-nav__link:hover {
  opacity: 0.5;
}

/* Active state */
.site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ============================================================
   INNER PAGES — SHARED LAYOUT WRAPPER
   ============================================================ */

.site-inner {
  /* svh after vh, as on the front page: on mobile vh is the large viewport,
     which pushed the footer of a short page just below the visible screen. */
  min-height: 100vh;
  min-height: 100svh;
  background-color: transparent;
  display: flex;
  flex-direction: column;
}

.site-inner #main {
  flex: 1;
}

/* Page content area — pushed right on wide screens, full-width on mobile */
.site-content {
  padding-top: calc(var(--nav-top) * 1);
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
  padding-bottom: 2rem;
}

@media (min-width: 1025px) {
  .site-content {
    padding-top: calc(var(--nav-top) * 1.5);
    padding-left: calc(var(--nav-left) + 400px);
  }
}

/* ============================================================
   BILDER (IMAGES) CATEGORY
   ============================================================ */

.archive-bilder .site-content {
  padding-top: calc(var(--nav-top) + 1rem);
}

.bilder-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* The link box carries both the size bound and the alignment.
 *
 * It must be the link and not the item: .bilder-item is a flex child, and auto
 * margins on a flex child suppress the stretch that would otherwise give it the
 * full column, leaving nothing to distribute once an image is column-width or
 * wider. Sizing the item that way also made the 50% resolve against the item's
 * own shrink-wrapped width, so every image narrower than the column came out at
 * half its natural size.
 *
 * fit-content shrinks the box to the image, capped at half the column, so the
 * auto margins below always have room to move it. */
.bilder-item__link {
  display: block;
  width: fit-content;
  max-width: 50%;
}

/* Auto margins rather than text-align: the image is a block box, and
 * text-align cannot move one. */
.bilder-item--left .bilder-item__link {
  margin-right: auto;
}

.bilder-item--center .bilder-item__link {
  margin-left: auto;
  margin-right: auto;
}

.bilder-item--right .bilder-item__link {
  margin-left: auto;
}

/* max-width only, never width: width would enlarge an image past its natural
 * size, which is what the mobile rule used to do. */
.bilder-item__image {
  max-width: 100%;
  height: auto;
}

/* Stands in for the image of a password-protected post */
.bilder-item__protected {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Single Bilder post */
.single-bilder-image {
  margin-bottom: 1.5rem;
}

/* ============================================================
   TEXTE (TEXT) CATEGORY
   ============================================================ */

.single-texte .entry-content {
  background-color: var(--color-surface);
  padding: 2.5rem;
}

.archive-texte .entry-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: var(--content-max);
}

.entry-card {
  background-color: var(--color-surface);
  padding: 2.5rem;
  border-bottom: none;
}

.entry-card__title {
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
  line-height: 1.25;
}

.entry-card__title a {
  color: var(--color-text);
}

.entry-card__meta {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.entry-card__excerpt {
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.75;
}

/* ============================================================
   SINGLE POST / PAGE CONTENT
   ============================================================ */

.entry-content {
  max-width: var(--content-max);
}

.entry-content h1,
.entry-content h2,
.entry-content h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  margin-top: 2em;
  margin-bottom: 0.6em;
  line-height: 1.2;
}

.entry-content h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.entry-content h2 { font-size: clamp(1.25rem, 2.5vw, 1.7rem); }
.entry-content h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }

.entry-content p {
  margin-bottom: 1.25em;
  font-size: 0.95rem;
  line-height: 1.8;
}

.entry-content p:first-child {
  margin-top: 0;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.4em;
  margin-bottom: 1.25em;
}

.entry-content li {
  margin-bottom: 0.35em;
  font-size: 0.95rem;
}

.entry-content blockquote {
  border-left: 2px solid var(--color-text-muted);
  padding: 0.5em 0 0.5em 1.5em;
  margin: 2em 0;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ============================================================
   PAGE TITLE
   ============================================================ */

.page-title {
  font-family: var(--font-ui);
  font-size: var(--nav-font-size);
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
}

/* ============================================================
   IMPRESSUM PAGE
   ============================================================ */

/* White background on all static pages. With a static front page the body
   carries .page there too, but front-page.php prints no .entry-content. */
.page .entry-content {
  background-color: var(--color-surface);
  padding: 2.5rem;
}

.page-impressum .entry-content {
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--color-text);
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
  margin-top: 3rem;
  display: flex;
  gap: 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pagination a {
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
}

.pagination a:hover {
  color: var(--color-text);
  opacity: 1;
}

/* ============================================================
   BACK LINK
   ============================================================ */

.back-link {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
}

.back-link::before {
  content: '← ';
}

.back-link:hover {
  color: var(--color-text);
  opacity: 1;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */

.site-footer {
  padding: 0 var(--nav-left) 1.5rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

/* ============================================================
   HAMBURGER MENU
   ============================================================ */

/* Button — hidden on desktop.
 *
 * 44×44 so it is comfortable to tap. The bars are still 28px wide and sit
 * where they always did: the padding insets them, and the negative margin
 * pulls the larger box back by the same amount. The button used to be
 * 28×22.5, hence (44 − 22.5) / 2 = 10.75px vertically. */
.site-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0 8px;
  margin: -10.75px -8px;
}

.site-nav__bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: currentColor; /* inherits nav colour */
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Animate to X when open */
.site-nav__hamburger.is-open .site-nav__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.site-nav__hamburger.is-open .site-nav__bar:nth-child(2) {
  opacity: 0;
}
.site-nav__hamburger.is-open .site-nav__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__bar {
    transition: none;
  }
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 1024px) {
  /* Show hamburger, hide nav list by default */
  .site-nav__hamburger {
    display: flex;
    color: var(--color-link);
  }

  .site-nav__list {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* fallback for browsers without svh */
    height: 100svh;
    /* Fully opaque: nothing behind the overlay reaches the eye, so contrast is
       a constant regardless of the background image or the page underneath. */
    background-color: var(--overlay-surface);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    z-index: 200;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-nav__list.is-open {
    display: flex;
  }

  /* Fixed ink on the overlay, overriding the Customizer's inline rule. That
     rule sits later in the cascade but is only one class deep, so three
     classes beat it without !important. Scoped to .is-open so the front page,
     where the list sits directly on the photo, keeps the Customizer colour. */
  .site-nav__list.is-open .site-nav__name,
  .site-nav__list.is-open .site-nav__link {
    color: var(--overlay-ink);
  }

  .site-nav__hamburger.is-open {
    color: var(--overlay-ink);
  }

  .site-nav__list .site-nav__name,
  .site-nav__list .site-nav__link {
    font-size: clamp(1.4rem, 5vw, 2rem);
    text-align: center;
  }

  /* Keep hamburger visible above the open overlay */
  .site-nav__hamburger {
    position: relative;
    z-index: 201;
  }

  /* Front page: show nav links directly, no hamburger needed.
     The same goes for every page when JavaScript is off: nothing could open
     the overlay, so the links stay in the page instead (see
     no_god_js_class()). */
  .home .site-nav__hamburger,
  html:not(.js) .site-nav__hamburger {
    display: none;
  }

  .home .site-nav__list,
  html:not(.js) .site-nav__list {
    display: flex;
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0;
  }

  .home .site-nav__list .site-nav__name,
  .home .site-nav__list .site-nav__link,
  html:not(.js) .site-nav__list .site-nav__name,
  html:not(.js) .site-nav__list .site-nav__link {
    font-size: var(--nav-font-size);
    text-align: left;
  }

  /* Inner pages without JavaScript: put the list in normal flow, so the
     content starts below it instead of scrolling under a fixed block of
     links. The front page keeps its fixed nav over the photo. */
  html:not(.js) body:not(.home) .site-nav {
    position: static;
    padding: var(--nav-top) var(--nav-left) 0;
  }

  html:not(.js) body:not(.home) .site-content {
    padding-top: 2rem;
  }

  .site-content {
    padding-top: calc(var(--nav-top) + 3.5rem);
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .archive-bilder .site-content {
    padding-top: calc(var(--nav-top) + 3.5rem);
  }

  .bilder-grid,
  .entry-list,
  .entry-content,
  .entry-card {
    width: 100%;
  }

  /* Full column width available, but still bounded rather than forced, so a
     small image stays at its natural size instead of being blown up.
     Selectors match the specificity of the alignment rules above, which would
     otherwise keep winning inside this media query. */
  .bilder-item__link,
  .bilder-item--left .bilder-item__link,
  .bilder-item--center .bilder-item__link,
  .bilder-item--right .bilder-item__link {
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
  }
}

/* ============================================================
   WORDPRESS ALIGNMENT CLASSES (block editor support)
   ============================================================ */

.alignleft  { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1.5rem;  margin-bottom: 1rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1rem; }
.alignfull  { width: 100%; margin-left: 0; margin-right: 0; }
.alignwide  { max-width: 100%; }

/* ============================================================
   UTILITY
   ============================================================ */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link: off-screen until it takes focus, then pinned top-left above the
   fixed navigation. */
.skip-link:focus {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 300;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  clip: auto;
  clip-path: none;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* While the overlay menu is open the page behind it must not scroll. */
body.nav-is-open {
  overflow: hidden;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.4rem;
  letter-spacing: 0.03em;
}