/*
Theme Name: The New German — Twenty Twenty-Five Child
Theme URI: https://new-german.com
Description: Child theme for Twenty Twenty-Five that applies "The New German" editorial style — a New York Times–inspired black-and-white newspaper look with a Fraktur masthead, serif headlines and a clean reading typography. Design tokens live in theme.json; layout/masthead polish lives in this stylesheet.
Author: The New German
Version: 1.5.0
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: tng-child
*/

/* =====================================================================
   Everything below is layout / component polish that theme.json cannot
   express on its own (masthead, section nav, meta rows, buttons).
   Colors, fonts and the type scale are defined in theme.json.
   ===================================================================== */

/* ---- Design tokens as CSS vars (kept in sync with theme.json) ---- */
:root {
  --tng-ink: #111111;
  --tng-paper: #ffffff;
  --tng-muted: #6b6b6b;
  --tng-line: #e2e2e2;
  --tng-fraktur: "UnifrakturMaguntia", "Times New Roman", serif;
  --tng-serif-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --tng-serif-body: "Lora", Georgia, serif;
  --tng-sans: "Inter", system-ui, -apple-system, sans-serif;
}

/* ---- Masthead / site title: legible serif nameplate, centered ---- */
/* Changed from Fraktur → DM Serif Display for readability with an
   international audience. Fraktur stays available via --tng-fraktur for
   small ornamental accents (see .tng-fraktur-accent). */
.wp-block-site-title,
.wp-block-site-title a {
  font-family: var(--tng-serif-display) !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--tng-ink);
  text-decoration: none;
}

.wp-block-site-title {
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1;
}

/* Optional ornamental Fraktur accent (e.g. a drop initial or a small mark) */
.tng-fraktur-accent { font-family: var(--tng-fraktur); }

/* ===== Newspaper masthead (header part) ===== */
.tng-masthead-wrap { border-bottom: 1px solid var(--tng-ink); }

/* Utility bar: tagline left, member button right */
.tng-utility {
  border-bottom: 1px solid var(--tng-line);
  padding-block: 0.4rem;
  align-items: center;
}
.tng-utility .tng-date {
  font-family: var(--tng-sans);
  font-size: 0.72rem;
  color: var(--tng-muted);
  margin: 0;
}
.tng-utility .wp-block-buttons { margin: 0; }

/* Masthead row: centered nameplate */
.tng-masthead { text-align: center; padding-block: 1.4rem 1rem; }
.tng-masthead .wp-block-site-title { width: 100%; text-align: center; }

/* Section bar: rubric nav + search + member button, framed by hairlines.
   Aligned to the same content width as the masthead above. */
.tng-sections {
  max-width: var(--wp--style--global--wide-size, 1160px);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--50, 1.5rem);
  border-top: 1px solid var(--tng-ink);
  border-bottom: 1px solid var(--tng-line);
  align-items: center;
  gap: 1rem;
}
.tng-sections .tng-nav ul { gap: 0; }
.tng-sections .tng-nav .wp-block-navigation-item__content {
  padding: 0.7rem 0.9rem;
  font-family: var(--tng-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tng-ink);
}
.tng-sections .tng-nav .wp-block-navigation-item__content:hover {
  color: var(--tng-muted);
}
/* Right cluster: search + member button */
.tng-sections .wp-block-search { margin: 0; }
.tng-sections .wp-block-search__button {
  background: transparent;
  color: var(--tng-ink);
  border: 0;
  padding: 0.35rem 0.5rem;
}
.tng-sections .wp-block-search__input {
  border: 1px solid var(--tng-line);
  border-radius: 0;
}
/* Compact member button in the bar */
.tng-sections .tng-join .wp-block-button__link,
.tng-join .wp-block-button__link {
  padding: 0.55rem 1rem;
  font-size: 0.68rem;
}

/* ===== Cleaned footer ===== */
.tng-footer { border-top: 2px solid var(--tng-ink); padding-block: 2.5rem 2rem; }
.tng-footer .tng-foot-title {
  font-family: var(--tng-serif-display);
  font-size: 1.5rem;
  margin: 0 0 0.4rem;
}
.tng-footer .tng-foot-tag {
  font-family: var(--tng-sans);
  font-size: 0.8rem;
  color: var(--tng-muted);
  margin: 0;
}
.tng-footer .tng-foot-h {
  font-family: var(--tng-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tng-muted);
  margin: 0 0 0.75rem;
}
.tng-footer ul { list-style: none; margin: 0; padding: 0; }
.tng-footer li { margin-bottom: 0.5rem; }
.tng-footer a {
  font-family: var(--tng-sans);
  font-size: 0.85rem;
  color: var(--tng-ink);
  text-decoration: none;
}
.tng-footer a:hover { text-decoration: underline; }
.tng-foot-bottom {
  border-top: 1px solid var(--tng-line);
  margin-top: 2rem;
  padding-top: 1.25rem;
  align-items: center;
}
.tng-foot-bottom p {
  font-family: var(--tng-sans);
  font-size: 0.72rem;
  color: var(--tng-muted);
  margin: 0;
}

/* ===== Coming-soon empty state ===== */
.tng-coming {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  padding-block: 4rem 5rem;
}
.tng-coming .tng-kicker { display: block; margin-bottom: 1rem; }
.tng-coming h2 {
  font-family: var(--tng-serif-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}
.tng-coming p {
  font-family: var(--tng-serif-body);
  color: var(--tng-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 auto 1.75rem;
}

/* ===== Centered newspaper masthead variant ===== */
/* Utility bar: small muted legal/utility nav left, search + member button right */
.tng-utility {
  gap: 0.5rem 1.5rem;
  padding-block: 0.5rem;
}
.tng-utilnav ul { gap: 0 1.1rem; flex-wrap: wrap; }
.tng-utilnav .wp-block-navigation-item__content {
  font-family: var(--tng-sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tng-muted);
  padding: 0.1rem 0;
}
.tng-utilnav .wp-block-navigation-item__content:hover { color: var(--tng-ink); }

/* Centered masthead nameplate */
.tng-masthead { text-align: center; padding-block: 1.2rem 0.8rem; }
.tng-masthead .wp-block-site-title { font-size: clamp(2.2rem, 7vw, 4rem); }
.tng-masthead .wp-block-site-title a { text-align: center; display: block; }

/* Centered rubric bar */
.tng-sections--center { justify-content: center; }
.tng-sections--center .tng-nav ul { justify-content: center; }

/* =====================================================================
   Front page — newspaper front layout (Query Loop based)
   ===================================================================== */
.tng-front { padding-block: 2.5rem 3.5rem; }

/* Lead + secondary row */
.tng-top { gap: 2.5rem; align-items: start; margin-bottom: 2rem; }
.tng-top .wp-block-column { min-width: 0; }

/* Lead story */
.tng-lead .wp-block-post-featured-image { margin-bottom: 1.1rem; }
.tng-lead .wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.tng-lead .wp-block-post-title { margin: 0.5rem 0 0.6rem; line-height: 1.1; }
.tng-lead .wp-block-post-title a { color: var(--tng-ink); text-decoration: none; }
.tng-lead .wp-block-post-title a:hover { opacity: 0.7; }
.tng-lead .wp-block-post-excerpt__excerpt {
  font-family: var(--tng-serif-body);
  color: var(--tng-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

/* Secondary list */
.tng-secondary .wp-block-post-template { display: flex; flex-direction: column; gap: 0; }
.tng-secondary li { padding: 1.1rem 0; border-top: 1px solid var(--tng-line); }
.tng-secondary li:first-child { border-top: 0; padding-top: 0; }
.tng-secondary .wp-block-post-title { margin: 0.35rem 0; line-height: 1.2; }
.tng-secondary .wp-block-post-title a { color: var(--tng-ink); text-decoration: none; }
.tng-secondary .wp-block-post-title a:hover { opacity: 0.7; }

/* "More stories" grid */
.tng-section-title {
  font-family: var(--tng-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tng-muted);
  border-bottom: 1px solid var(--tng-ink);
  padding-bottom: 0.6rem;
  margin-bottom: 1.4rem;
}
.tng-grid .wp-block-post-template { gap: 1.6rem !important; }
.tng-grid .wp-block-post-featured-image { margin-bottom: 0.7rem; }
.tng-grid .wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.tng-grid .wp-block-post-title { margin: 0.3rem 0; line-height: 1.2; }
.tng-grid .wp-block-post-title a { color: var(--tng-ink); text-decoration: none; }
.tng-grid .wp-block-post-title a:hover { opacity: 0.7; }

/* Divider */
.tng-rule { border: 0; border-top: 1px solid var(--tng-line); margin: 2.5rem 0; }

/* Newsletter box */
.tng-newsletter {
  border: 1px solid var(--tng-ink);
  padding: 2.5rem 1.5rem;
  margin-top: 3rem;
  text-align: center;
}
.tng-newsletter h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0.4rem 0 0.6rem; }
.tng-newsletter p {
  font-family: var(--tng-serif-body);
  color: var(--tng-muted);
  max-width: 30rem;
  margin: 0 auto 1.25rem;
}

/* Stack the lead/secondary columns on small screens */
@media (max-width: 781px) {
  .tng-top { gap: 1.5rem; }
}

/* ---- Thin rules that frame the header like a newspaper ---- */
.wp-block-template-part.tng-header,
header.wp-block-template-part {
  border-bottom: 1px solid var(--tng-line);
}

/* ---- Section navigation: uppercase, letter-spaced, underline on active ---- */
.wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--tng-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tng-muted);
  padding-block: 0.75rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
  color: var(--tng-ink);
  border-bottom-color: var(--tng-ink);
}

/* ---- Headlines: serif display, tight leading ---- */
h1, h2, h3,
.wp-block-post-title,
.wp-block-query-title {
  font-family: var(--tng-serif-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--tng-ink);
}

.wp-block-post-title a {
  color: var(--tng-ink);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.wp-block-post-title a:hover { opacity: 0.7; }

/* ---- Reading body: Lora serif ---- */
.entry-content,
.wp-block-post-content,
.entry-content p,
.wp-block-post-excerpt__excerpt {
  font-family: var(--tng-serif-body);
  color: var(--tng-ink);
}

.wp-block-post-excerpt__excerpt {
  color: var(--tng-muted);
}

/* ---- Category / kicker labels ---- */
.wp-block-post-terms,
.tng-kicker {
  font-family: var(--tng-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tng-muted);
}

.wp-block-post-terms a { color: var(--tng-muted); text-decoration: none; }

/* ---- Byline / meta rows ---- */
.wp-block-post-author,
.wp-block-post-author-name,
.wp-block-post-date,
.tng-meta {
  font-family: var(--tng-sans);
  font-size: 0.75rem;
  color: var(--tng-muted);
}
.wp-block-post-author-name { font-weight: 500; color: var(--tng-ink); }

/* ---- Section dividers between posts ---- */
.wp-block-post-template > li {
  border-bottom: 1px solid var(--tng-line);
  padding-block: 1.75rem;
}
.wp-block-post-template > li:first-child { padding-top: 0; }

/* ---- Buttons: solid black, uppercase, letter-spaced (NYT "Abonnieren") ---- */
.wp-block-button__link,
.wp-element-button {
  font-family: var(--tng-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  background-color: var(--tng-ink);
  color: var(--tng-paper);
  padding: 0.7rem 1.15rem;
  transition: opacity 0.15s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover { opacity: 0.78; }

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--tng-ink);
  border: 1px solid var(--tng-ink);
}

/* ---- Inputs (newsletter) ---- */
input[type="email"],
input[type="search"],
input[type="text"] {
  font-family: var(--tng-sans);
  border: 1px solid var(--tng-line);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
}
input[type="email"]:focus,
input[type="search"]:focus,
input[type="text"]:focus {
  outline: none;
  border-color: var(--tng-ink);
}

/* ---- Footer masthead echo ---- */
.wp-block-template-part footer .wp-block-site-title {
  font-size: 1.6rem;
}

/* ---- Hide scrollbar on horizontal section pills (if used) ---- */
.tng-scroll-x { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.tng-scroll-x::-webkit-scrollbar { display: none; }

/* =====================================================================
   Category archive (templates/category.html, v1.3.0)
   Magazine-grid layout: rubric head → hero (newest story, text left /
   image right) → 3-column card grid → centered pagination.
   One inherited query only; the hero is styled via :first-child, so
   pagination and post counts stay correct.
   ===================================================================== */
.tng-category-page { padding-block: 2.5rem 4rem; }

/* Rubric heading row */
.tng-cat-head {
  border-bottom: 1px solid var(--tng-ink);
  padding-bottom: 1rem;
}
.tng-cat-head .wp-block-query-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
}
.tng-cat-desc {
  font-family: var(--tng-sans);
  font-size: 0.8rem;
  color: var(--tng-muted);
  max-width: 46ch;
  margin: 0;
}

/* Cards */
.tng-cat-grid > li {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--tng-line);
}
.tng-cat-grid > li:first-child { padding-top: 0; }
.tng-cat-grid .wp-block-post-featured-image { margin: 0 0 0.3rem; }
.tng-cat-grid .wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.tng-cat-grid .wp-block-post-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.22;
}
.tng-cat-grid .wp-block-post-excerpt { margin: 0; }
.tng-cat-grid .wp-block-post-excerpt__excerpt { font-size: 0.95rem; line-height: 1.55; margin: 0; }
.tng-cat-grid .wp-block-post-date { margin-top: auto; }

/* Hero: the newest story spans the full row — text left, image right */
@media (min-width: 782px) {
  .tng-cat-grid > li:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 2.5rem;
    row-gap: 0.8rem;
    align-content: center;
    padding-block: 2.2rem;
  }
  .tng-cat-grid > li:first-child .wp-block-post-featured-image {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    margin: 0;
  }
  .tng-cat-grid > li:first-child > :not(.wp-block-post-featured-image) { grid-column: 1; }
  .tng-cat-grid > li:first-child .wp-block-post-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.12;
  }
  .tng-cat-grid > li:first-child .wp-block-post-excerpt__excerpt { font-size: 1.05rem; line-height: 1.6; }
  .tng-cat-grid > li:first-child .wp-block-post-date { margin-top: 0; }
}

/* Pagination — quiet, uppercase, centered */
.tng-cat-pagination {
  margin-top: 2rem;
  font-family: var(--tng-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tng-cat-pagination a { color: var(--tng-ink); text-decoration: none; }
.tng-cat-pagination a:hover { text-decoration: underline; }
.tng-cat-pagination .wp-block-query-pagination-numbers .current { color: var(--tng-muted); }

/* =====================================================================
   Dateline bar (wp_body_open, v1.3.1) — date · time · timezone on every
   page, hairline-framed utility strip above the masthead.
   ===================================================================== */
.tng-dateline {
  background: var(--tng-paper);
  border-bottom: 1px solid var(--tng-line);
}
.tng-dateline__inner {
  max-width: var(--wp--style--global--wide-size, 1160px);
  margin-inline: auto;
  padding: 0.45rem var(--wp--preset--spacing--50, 1.5rem);
  font-family: var(--tng-sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tng-muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Weather widget (Berlin) — right end of the dateline bar.
   Data via own REST proxy /wp-json/tng/v1/weather (see functions.php). */
.tng-weather {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  color: var(--tng-ink);
}
.tng-weather svg {
  width: 15px;
  height: 15px;
  display: block;
}
.tng-weather[hidden] {
  display: none;
}

/* Empty rubric */
.tng-coming-soon {
  font-family: var(--tng-serif-body);
  font-style: italic;
  color: var(--tng-muted);
  padding-block: 3.5rem;
  margin: 0;
}

/* =====================================================================
   Footer social row — injected via tng_footer_social_row() (functions.php)
   Desktop: label left, icons right. Mobile: centered, 44px touch targets.
   ===================================================================== */
.tng-social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--tng-line);
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  margin-bottom: 1.1rem;
}
.tng-social__label {
  font-family: var(--tng-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tng-muted);
}
.tng-social__icons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.tng-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--tng-ink);
  transition: color 0.15s ease;
}
.tng-social__link:hover,
.tng-social__link:focus-visible {
  color: var(--tng-muted);
}
.tng-social__link svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (max-width: 781px) {
  .tng-social {
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
  }
  .tng-social__icons {
    gap: 0.75rem;
  }
  .tng-social__link svg {
    width: 22px;
    height: 22px;
  }
}