/*
Theme Name: X – Child Theme (Unfinished Armies)
Description: Site-specific design changes for blog.unfinished-armies.de. Put changes here, not in the parent theme, so X updates do not overwrite them.
Template: x
Version: 1.7.2
Text Domain: x-child
*/

/* X loads its own stack styles; this file only carries overrides. */

/* -----------------------------------------------------------------------------
   Font: Lato, self-hosted (fonts/lato, SIL Open Font License in OFL.txt).
   functions.php points X's font setting at this family.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/lato/Lato-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato/Lato-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato/Lato-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato/Lato-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato/Lato-BoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/lato/Lato-Black.woff2") format("woff2");
}

/* The cookie notice (bst-dsgvo-cookie) sets its own "Helvetica Neue". */
.vex.vex-theme-flat-attack .vex-content,
.vex.vex-theme-flat-attack .vex-close::before {
  font-family: Lato, Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

/* Wider site container (1400px instead of the stored 1200px). Cornerstone prints
   this variable on :root straight from the database option, so the
   x_option_x_layout_site_max_width filter in functions.php (which sizes the
   thumbnails) does not reach it; :root:root outranks its rule. */
:root:root {
  --x-layout-site-max-width: 1400px;
}

/* Single posts, episodes and pages: one centred column whose content area is
   900px (the white box adds X's 60px padding on each side, so 1020px). Text
   and the block image sizes (functions.php: 900 / 435 / 280) share that width;
   --ua-gutter is the space between images placed side by side. */
:root {
  --ua-content-width: 900px;
  --ua-gutter: 30px;
}

.single .x-main.full,
.page .x-main.full {
  float: none;
  max-width: calc(var(--ua-content-width) + 120px);
  margin-left: auto;
  margin-right: auto;
}

/* Featured image above the post: 40% lower than its 3:2 original (5:2), the
   centre of the photo kept, so the title stays in view. */
.single .entry-featured .entry-thumb img,
.page .entry-featured .entry-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  object-position: center;
}

/* Classic content (all posts written before the block editor): centred and
   unaligned images fill the column (functions.php sets a matching sizes
   attribute). Floated images keep their size, they sit beside the text. Block
   images are handled below, they keep the size chosen in the editor. */
.entry-content img.aligncenter,
.entry-content img.alignnone,
.entry-content p > img:not(.alignleft):not(.alignright) {
  display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.entry-content img {
  max-width: 100%;
  height: auto;
}

/* Block editor images: "Groß" fills the column, "Halbe Breite" and "Drittel"
   keep their width (435 / 280px), so two halves or three thirds side by side,
   with the gutter between them, add up to exactly 900px. */
.entry-content .wp-block-image.size-large img,
.entry-content .wp-block-image.size-full img {
  width: 100%;
  height: auto;
}

.entry-content .wp-block-image.size-medium img,
.entry-content .wp-block-image.size-ua-third img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Floated images (block or classic) leave the gutter towards the text or the
   next image. */
.entry-content .alignleft {
  float: left;
  margin: 0 var(--ua-gutter) var(--ua-gutter) 0;
}

.entry-content .alignright {
  float: right;
  margin: 0 0 var(--ua-gutter) var(--ua-gutter);
}

/* Phones: no room for text beside a floated image, it stands above the text. */
@media (max-width: 479.98px) {
  .entry-content .alignleft,
  .entry-content .alignright {
    float: none;
    margin: 0 0 var(--ua-gutter);
  }
}

/* Galleries and columns use the same gutter, so their tiles line up with the
   half and third sizes. */
.entry-content .wp-block-gallery {
  --wp--style--gallery-gap-default: var(--ua-gutter);
  gap: var(--ua-gutter);
}

.entry-content .wp-block-columns {
  gap: var(--ua-gutter);
}

/* Body text of posts, episodes and pages: 18px instead of X's 0.6rem (15px).
   X prints that rule inline after this file, the body-class prefix outranks
   it. Headings in the text are percentages of this size in X; they are pinned
   to their previous sizes (rem, root 25px) so only the text grows. Previews on
   the blog home and archives keep 15px. */
.single .entry-content,
.page .entry-content {
  font-size: 18px;
}

.single .entry-content h2,
.page .entry-content h2 {
  font-size: 1.7143rem; /* 42.9px */
}

.single .entry-content h3,
.page .entry-content h3 {
  font-size: 1.371rem; /* 34.3px */
}

.single .entry-content h4,
.page .entry-content h4 {
  font-size: 1.0284rem; /* 25.7px */
}

.single .entry-content h5,
.page .entry-content h5 {
  font-size: 0.9rem; /* 22.5px */
}

/* Intro text: paragraph style "Einleitung" in the block editor (registered in
   functions.php). Bigger and bold, to open a topic, but well below an h2
   (text 18px, h2 about 43px). */
.entry-content .is-style-intro,
.is-style-intro {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 1.25em;
}

@media (max-width: 479.98px) {
  .entry-content .is-style-intro,
  .is-style-intro {
    font-size: 20px;
  }
}

/* Classic captions carry an inline width of the inserted size. */
.entry-content .wp-caption.aligncenter,
.entry-content .wp-caption.alignnone {
  width: 100% !important;
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
   Header: #321200, centred SVG logo with a white glow.
   -------------------------------------------------------------------------- */

.masthead .x-logobar,
.masthead .x-navbar {
  background-color: #321200;
  border: 0;
  box-shadow: none;
}

.masthead .x-logobar-inner {
  padding-top: 24px;
  padding-bottom: 16px;
}

.masthead .x-brand.img {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.masthead .x-brand.img img {
  display: inline-block;
  width: min(560px, 100%);
  height: auto;
  /* drop-shadow follows the letter shapes, box-shadow would outline the box. */
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

.masthead .x-navbar .x-nav > li > a {
  color: rgba(255, 255, 255, 0.8);
  box-shadow: none;
}

/* Hover and current item: white text and X's top bar in white instead of the
   red accent, 30% thinner (3px instead of 4px). X prints its rule inline after this file with the same
   specificity, so .masthead is added in front to win. */
.masthead .x-navbar .desktop .x-nav > li > a:hover,
.masthead .x-navbar .desktop .x-nav > .x-active > a,
.masthead .x-navbar .desktop .x-nav > .current-menu-item > a,
.masthead .x-navbar .desktop .x-nav > .current-menu-parent > a {
  color: #fff;
  box-shadow: inset 0 3px 0 0 #fff;
}

.masthead .x-navbar .desktop .sub-menu a:hover,
.masthead .x-navbar .mobile .x-nav li > a:hover,
.masthead .x-navbar .mobile .x-nav .x-active > a,
.masthead .x-navbar .mobile .x-nav .current-menu-item > a {
  color: #fff;
}

/* Mobile menu toggle */
.masthead .x-btn-navbar,
.masthead .x-btn-navbar.collapsed {
  color: #fff;
  background-color: transparent;
  box-shadow: none;
}

.masthead .x-nav-wrap.mobile a {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
}

/* -----------------------------------------------------------------------------
   Breadcrumb bar: flat, no embossed shadows. Current page and the line below in
   the header brown, links, icons and separators in a medium brown (#6b3e22,
   4.6:1 on the page background, so it passes WCAG AA for small text).
   -------------------------------------------------------------------------- */

.x-breadcrumb-wrap {
  border-bottom: 1px solid #321200;
  box-shadow: none;
  text-shadow: none;
  color: #321200;
}

.x-breadcrumb-wrap *,
.x-breadcrumb-wrap a:hover {
  text-shadow: none;
}

/* X prints its colours inline after this file (.x-breadcrumb-wrap a,
   .x-breadcrumbs .current, .x-breadcrumb-wrap a:hover in red); the extra
   .x-breadcrumb-wrap in front outranks them. */
.x-breadcrumb-wrap .x-breadcrumbs a,
.x-breadcrumb-wrap .x-breadcrumbs .delimiter,
.x-breadcrumb-wrap .x-nav-articles a {
  color: #6b3e22;
}

.x-breadcrumb-wrap .x-breadcrumbs .current,
.x-breadcrumb-wrap .x-breadcrumbs a:hover,
.x-breadcrumb-wrap .x-nav-articles a:hover {
  color: #321200;
}

/* -----------------------------------------------------------------------------
   Comments: same base size as the post text (X sets .entry-content to 0.6rem,
   15px, but the comment area kept the 25px body size, which X's percentages
   blew up to 43px author names and form labels). Headings 60% smaller than
   X's 71px. Comment count badge in the header brown instead of red.
   -------------------------------------------------------------------------- */

.x-comments-area {
  font-size: 0.6rem;
}

/* 28.6px: 40% of X's 285.7% of 25px, expressed against the 15px base. */
.x-comments-area .h-comments-title,
.x-comments-area #reply-title {
  font-size: 190.5%;
}

/* X styles the form labels and the author name like headings (171%); at text
   size they no longer compete with "Leave a Reply". */
.x-comments-area .comment-form label {
  font-size: 100%;
  font-weight: 700;
}

.x-comments-area .comment-form .comment-form-cookies-consent label {
  font-weight: 400;
}

.x-comments-area .x-comment-author {
  font-size: 120%;
}

/* The badge is sized for the 71px heading; scaled down with it and pulled
   closer to the text. X prints the red accent inline after this file, the
   .x-comments-area prefix outranks it. */
.x-comments-area .h-comments-title small {
  top: -2px;
  right: -32px;
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 26px;
  text-shadow: none;
  background-color: #321200;
  box-shadow: none;
}

/* -----------------------------------------------------------------------------
   Lightbox (X/Cornerstone iLightbox): close and fullscreen as round brown
   buttons with white icons on the photo's top-right corner (close on the
   corner, fullscreen to its left). js/lightbox.js sets left/top while the
   lightbox is open; until it has, the buttons stay hidden so they do not flash
   in the toolbar's corner.
   -------------------------------------------------------------------------- */

/* The toolbar itself is only a positioning frame: no box, border or shadow. */
.ilightbox-toolbar.light {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ilightbox-toolbar.light a.ilightbox-close,
.ilightbox-toolbar.light a.ilightbox-fullscreen {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #321200;
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.15s, background-color 0.15s;
}

.ilightbox-toolbar.light a.ilightbox-close.ua-placed,
.ilightbox-toolbar.light a.ilightbox-fullscreen.ua-placed {
  opacity: 1;
}

.ilightbox-toolbar.light a.ilightbox-close:hover,
.ilightbox-toolbar.light a.ilightbox-close:focus-visible,
.ilightbox-toolbar.light a.ilightbox-fullscreen:hover,
.ilightbox-toolbar.light a.ilightbox-fullscreen:focus-visible {
  background-color: #6b3e22;
}

.ilightbox-toolbar.light a.ilightbox-close::before,
.ilightbox-toolbar.light a.ilightbox-fullscreen::before {
  position: static;
  margin: 0;
  line-height: 1;
  color: #fff;
}

.ilightbox-toolbar.light a.ilightbox-close::before {
  font-size: 22px;
}

/* X shows a plain filled square (fa-square, f0c8) for fullscreen; the usual
   expand arrows (fa-expand, f065, same loaded FontAwesome font) read as
   fullscreen. */
.ilightbox-toolbar.light a.ilightbox-fullscreen::before {
  content: "\f065";
  font-size: 18px;
}

/* Fullscreen (browser fullscreen on <html>, js/lightbox.js keeps the normal
   lightbox): black, no white frame around the photo. iLightbox sets the
   overlay opacity inline, hence !important. */
:root:fullscreen .ilightbox-overlay {
  background: #000;
  opacity: 1 !important;
}

:root:fullscreen .ilightbox-holder.light {
  background: #000;
  box-shadow: none;
}

:root:-webkit-full-screen .ilightbox-overlay {
  background: #000;
  opacity: 1 !important;
}

:root:-webkit-full-screen .ilightbox-holder.light {
  background: #000;
  box-shadow: none;
}

/* In fullscreen the button leaves it: compress arrows (fa-compress, f066). */
:root:fullscreen .ilightbox-toolbar.light a.ilightbox-fullscreen::before {
  content: "\f066";
}

:root:-webkit-full-screen .ilightbox-toolbar.light a.ilightbox-fullscreen::before {
  content: "\f066";
}

/* Mobile fullscreen (iLightbox marks screens up to 980px with body.isMobile):
   only the photo, no thumbnail strip and no next/previous previews at the
   sides; visitors swipe instead. iLightbox sets the previews' opacity inline,
   hence !important. */
:root:fullscreen body.isMobile .ilightbox-thumbnails,
:root:fullscreen body.isMobile .ilightbox-holder.ilightbox-next,
:root:fullscreen body.isMobile .ilightbox-holder.ilightbox-prev {
  visibility: hidden;
  opacity: 0 !important;
}

:root:-webkit-full-screen body.isMobile .ilightbox-thumbnails,
:root:-webkit-full-screen body.isMobile .ilightbox-holder.ilightbox-next,
:root:-webkit-full-screen body.isMobile .ilightbox-holder.ilightbox-prev {
  visibility: hidden;
  opacity: 0 !important;
}

/* No Fullscreen API (iPhone Safari): no fullscreen button. */
.ua-no-fullscreen .ilightbox-toolbar a.ilightbox-fullscreen {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   Landmark heading (blog home, archives): half of X's size at every breakpoint.
   X: 400% (inherited from h1), 48px below 767px, 42px below 480px.
   -------------------------------------------------------------------------- */

.h-landmark {
  font-size: 200%;
  letter-spacing: -1.5px;
}

/* No rules left and right of landmark headings (blog home, category, tag,
   author and date archives). */
.h-landmark span::before,
.h-landmark span::after {
  display: none;
}

@media (max-width: 766.98px) {
  .h-landmark {
    font-size: 24px;
  }
}

@media (max-width: 479.98px) {
  .h-landmark {
    font-size: 21px;
  }
}