/* ==========================================================================
   JA Purity IV (T4) — Custom Styles
   Single file for all site customizations. Do not split.
   Visual references: BauBüro Weidner.html and the root-level weidner.css.
   ========================================================================== */

/* 1. Variables (custom properties) */
:root {
  /* Forum is self-hosted below; sans-serif UI text uses the existing font stack. */
  --body-font-family: "Forum", "Times New Roman", Georgia, serif;
  --body-font-size: 16px;
  --body-font-weight: 400;
  --body-line-height: 1.375;
  --body-letter-spacing: normal;
  --heading-font-family: var(--body-font-family);
  --heading-font-weight: 400;
  --heading-line-height: 1.2;
  --heading-letter-spacing: -0.01em;
  --megamenu-font-family: var(--body-font-family);
  --megamenu-font-weight: 400;
  --megamenu-letter-spacing: normal;
  --weidner-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --weidner-page-width: 93.75rem;
  --weidner-page-inset: 1.5rem;
  --weidner-column-gap: 2rem;
  --weidner-rail-width: 12.5rem;
  --weidner-blog-card-width: 32rem;
  --weidner-blog-card-height: 32rem;
  --weidner-blog-text-height: 11rem;
}

/* Body scope lets all dependent colors follow Purity IV's existing theme toggle. */
body {
  --body-bg-color: #ffffff;
  --body-text-color: #000000;
  --body-link-color: var(--body-text-color);
  --body-link-hover-color: var(--body-text-color);
  --headings-color: var(--body-text-color);
  --color-primary: var(--body-text-color);
  --mainnav-link-color: var(--body-text-color);
  --mainnav-link-hover-color: var(--body-text-color);
  --mainnav-link-active-color: var(--body-text-color);
  --mainnav-text-color: var(--body-text-color);
  --footer-bg-color: var(--body-bg-color);
  --footer-text-color: var(--body-text-color);
  --footer-link-color: var(--body-text-color);
  --footer-link-hover-color: var(--body-text-color);
  --t4-border-color: #d8d8d2;
  --weidner-muted: #686868;
}

body.dark-active {
  --body-bg-color: #141414;
  --body-text-color: #f2f2f2;
  --headings-color: var(--body-text-color);
  --footer-bg-color: var(--body-bg-color);
  --footer-text-color: var(--body-text-color);
  --footer-link-color: var(--body-text-color);
  --footer-link-hover-color: var(--body-text-color);
  --t4-border-color: #484848;
  --weidner-muted: #b8b8b8;
}

/* Only contact-page links use Bootstrap blue. */
#t4-main-body .contact {
  --body-link-color: var(--t4-blue, #0d6efd);
  --body-link-hover-color: #0a58ca;
}

/* 2. Base & Typography */
/* Original Forum Regular from google/fonts (ofl/forum), bundled under SIL OFL.
   Relative to local/css/custom.css: no Google Fonts request is needed. */
@font-face {
  font-family: "Forum";
  src: url("../fonts/Forum-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body:not(.contentpane) {
  background: var(--body-bg-color);
  color: var(--body-text-color);
  font-family: var(--body-font-family);
  font-size: 1.125rem;
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  -webkit-font-smoothing: antialiased;
}

.t4-wrapper .t4-content {
  background: var(--body-bg-color);
}

.t4-wrapper .t4-content-inner {
  max-width: var(--weidner-page-width);
  min-height: 100vh;
  margin-inline: auto;
}

.t4-wrapper a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
}

.t4-wrapper :is(a, button, input, select, textarea):focus-visible,
.t4-offcanvas :is(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* 3. Topbar & Header */
/* The reference has no topbar; navigation is presented in the sidebar. */
#t4-topbar {
  display: none;
}

#t4-header {
  margin-inline: var(--weidner-page-inset);
  padding-top: 2.25rem;
  background: var(--body-bg-color);
  color: var(--body-text-color);
}

/* Keep Bootstrap's py-* utilities; put the outer breathing room on the section. */
#t4-header .header-block {
  padding-inline: 0;
}

#t4-header :is(.container, .container-lg, .container-xxl) {
  max-width: none;
  padding-inline: 0;
}

#t4-header .navbar-brand.logo-text .site-name {
  display: block;
  margin: 0;
  color: var(--body-text-color);
  font-family: var(--heading-font-family);
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

#t4-header .navbar-brand.logo-text .site-slogan {
  display: block;
  margin-top: 0.5rem;
  color: var(--t4-gray-600);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
}

#t4-header .navbar-brand a {
  color: inherit;
  text-decoration: none;
}

/* Match the canvas when T4 activates its sticky header. */
body.not-at-top #t4-header.t4-sticky {
  background: var(--body-bg-color);
  box-shadow: none;
}

/* 4. Main Navigation / Mega Menu */
.t4-wrapper .t4-megamenu .navbar-nav > li > :is(a, span, .nav-link) {
  height: auto;
  padding: 0.75rem;
  color: var(--body-text-color);
  background: transparent;
  font-family: var(--body-font-family);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}

.t4-wrapper .t4-megamenu .navbar-nav > li.active > a,
.t4-wrapper .t4-megamenu a:is(:hover, :focus-visible, [aria-current="page"]) {
  color: var(--body-text-color);
  font-weight: 400;
  text-decoration: underline;
}

body .t4-wrapper .t4-megamenu .dropdown-menu {
  background: var(--body-bg-color);
  color: var(--body-text-color);
  border: 1px solid var(--t4-border-color);
  border-radius: 0;
  box-shadow: none;
}

.t4-wrapper .t4-megamenu .dropdown-menu a {
  color: var(--body-text-color);
  font-family: var(--body-font-family);
  font-weight: 400;
}

/* 5. Off-Canvas */
/* Use T4's native downward-collapsing header menu instead of its side drawer.
   Important overrides the framework's responsive display utilities on toggles. */
.t4-wrapper .t4-offcanvas-toggle {
  display: none !important;
}

body .t4-offcanvas {
  background: var(--body-bg-color);
  color: var(--body-text-color);
  font-family: var(--body-font-family);
}

body .t4-offcanvas .nav > li > a {
  color: var(--body-text-color);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
}

/* 6. Masthead / Sections / Spotlight */
#t4-masthead {
  margin-inline: var(--weidner-page-inset);
  background: var(--body-bg-color);
  color: var(--body-text-color);
}

.t4-wrapper .t4-masthead-inner {
  padding: 2rem 0 0;
  background: transparent;
  border: 0;
}

.t4-wrapper .t4-masthead .t4-masthead-detail {
  margin-inline: 0;
  max-width: none;
  text-align: start;
}

.t4-wrapper .t4-masthead .t4-masthead-title {
  color: var(--headings-color);
  font-family: var(--heading-font-family);
  font-size: 2.125rem;
  font-weight: 400;
}

/* Purity IV puts the border on the section, outside the breadcrumb list.
   Hide that section to remove both its border and the empty layout space. */
#t4-breadcrumbs,
.t4-wrapper .t4-section.t4-breadcrumbs {
  display: none;
}

/* 7. Main Content & Articles */
#t4-main-body {
  margin-inline: var(--weidner-page-inset);
  padding-block: 2rem 2.5rem;
}

#t4-main-body > .t4-section-inner {
  max-width: none;
  padding-inline: 0;
}

#t4-main-body .t4-main {
  min-width: 0;
  padding-top: 0;
}

.t4-component :is(.item-page, .blog, .blog-featured) .page-header {
  margin-bottom: 1.375rem;
  padding-bottom: 0;
  border: 0;
}

/* The featured layout places its page heading directly inside view-masonry.
   Target that wrapper without relying on a homepage body class or h1 markup.
   Nested article headings remain visible; the second selector covers other
   homepage layouts when the site supplies the home class. */
#t4-main-body .blog-featured > .view-masonry > .page-header,
body.home #t4-main-body .page-header:has(> h1) {
  display: none;
}

.t4-component :is(.item-page, .blog, .blog-featured) .page-header :is(h1, h2) {
  margin-top: 0;
  color: var(--headings-color);
  font-family: var(--heading-font-family);
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
  font-weight: 400;
  line-height: 1.2;
}

.t4-component :is(.item-intro, .article-body, .desc-article) {
  font-size: 1.125rem;
  line-height: 1.222222;
  overflow-wrap: break-word;
}

.t4-component :is(.item-intro, .article-body, .desc-article) p {
  margin-bottom: 1.375rem;
}

.t4-component :is(.blog, .blog-featured) .item-inner {
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.t4-component .blog-featured #item-container {
  --t4-gutter-x: var(--weidner-column-gap);
  row-gap: 1.375rem;
}

/* Remove the nested article container's second inset, keeping its Bootstrap rows. */
.t4-component .item-page > .container {
  max-width: none;
  padding-inline: 0;
}

.t4-component .item-page:is(.layout-default, .layout-1) .top-article-info {
  max-width: 36rem;
  margin: 0 0 1.5rem;
  text-align: start;
}

.t4-component .item-page .bottom-article-info {
  max-width: 42rem;
  margin-inline: 0;
}

/* Keep featured-page intro images hidden and full-article media fields unused;
   Category Blog's separately configured Joomla Intro Image stays visible. */
#t4-main-body .blog-featured .item-image,
#t4-main-body .item-page .full-image,
#t4-main-body .item-page.layout-2 .top-article-info > .row > :has(> .full-image) {
  display: none;
}

/* Category Blog shows the article's PhocaGallery output; full article pages
   suppress it without modifying the shortcode or gallery's own styling. */
#t4-main-body .item-page :is(.pg-category-items-box, .pswp) {
  display: none;
}

/* Layout 2 normally reserves half a row for the separate full-image field. */
#t4-main-body .item-page.layout-2 .top-article-info > .row > :has(> .intro-article-info) {
  width: 100%;
}

/* Activate this overview only when Joomla's Article Class is weidner-portfolio.
   T4 applies that class to the blog-items wrapper, not to each article. */
#t4-main-body .com-content-category-blog:has(> .blog-items.weidner-portfolio) {
  max-width: calc(var(--weidner-blog-card-width) * 2 + var(--weidner-column-gap));
}

/* The intro row already uses Joomla's two-column Bootstrap classes. */
#t4-main-body .com-content-category-blog:has(> .blog-items.weidner-portfolio) .items-row {
  --t4-gutter-x: var(--weidner-column-gap);
  row-gap: var(--weidner-column-gap);
}

/* Limit each article preview, leaving Bootstrap's column widths intact. */
#t4-main-body .com-content-category-blog:has(> .blog-items.weidner-portfolio) .items-row .item {
  min-width: 0;
  max-width: var(--weidner-blog-card-width);
  max-height: var(--weidner-blog-card-height);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Do not crop gallery-bearing previews at the ordinary card-height limit. */
#t4-main-body .com-content-category-blog:has(> .blog-items.weidner-portfolio) .items-row .item:has(.pg-category-items-box) {
  max-height: none;
  overflow: visible;
}

/* Normalize the template's alternative horizontal preview arrangements. */
#t4-main-body .com-content-category-blog:has(> .blog-items.weidner-portfolio) :is(.blog-item-content, .item-inner) {
  display: block;
  min-width: 0;
  height: auto;
}

#t4-main-body .com-content-category-blog:has(> .blog-items.weidner-portfolio) .item-content {
  min-width: 0;
  width: 100%;
}

/* Keep article excerpts readable without affecting embedded gallery markup. */
#t4-main-body .com-content-category-blog:has(> .blog-items.weidner-portfolio) .item-intro {
  overflow-wrap: anywhere;
}

/* Bound text paragraphs only, leaving plugin-generated gallery output intact. */
#t4-main-body .com-content-category-blog:has(> .blog-items.weidner-portfolio) .item-intro > p {
  max-height: var(--weidner-blog-text-height);
  overflow: hidden;
}

/* Hide embedded images in Category Blog previews regardless of the optional
   Article Class. PhocaGallery images and Joomla's Intro Image remain visible.
   Article-authored inline display styles require this single !important. */
#t4-main-body .com-content-category-blog .item-content img:not(.pg-category-items-box img, .item-image img) {
  display: none !important;
}

/* Image-only wrappers (including figures) otherwise reserve an empty column
   after their inline images are hidden. Do not touch PhocaGallery descendants. */
#t4-main-body .com-content-category-blog .item-content div:has(> img):not(:has(> :not(img))):not(.pg-category-items-box *),
#t4-main-body .com-content-category-blog .item-content :is(figure, picture):has(img):not(.pg-category-items-box *, .item-image) {
  display: none;
}

/* The contact name is a separate heading above the plain details/form row. */
#t4-main-body .contact > .page-header {
  max-width: 100%;
  text-align: center;
}

/* Align the heading with the padded contact-details column, not the whole row. */
#t4-main-body .contact:has(> .plain-style) > .page-header {
  width: calc(100% - var(--t4-gutter-x, 1.5rem));
  margin-inline-start: calc(var(--t4-gutter-x, 1.5rem) / 2);
}

#t4-main-body .contact > .page-header .contact-name {
  display: block;
  padding-inline: 0;
}

/* Purity's address uses col-3 labels and col-9 values. When the labels are
   visually hidden, their columns still indent some values by 25%, while the
    unclassed city row starts at the left edge. Center all details together. */
#t4-main-body .contact .contact-address {
  display: block;
  margin-inline: 0;
  text-align: center;
}

#t4-main-body .contact .contact-address > dt:has(.visually-hidden) {
  display: none;
}

#t4-main-body .contact .contact-address > dt:not(:has(.visually-hidden)),
#t4-main-body .contact .contact-address > dd {
  float: none;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  text-align: center;
}

/* The template appends a break after the street even though the next dd
   already starts on a new line. */
#t4-main-body .contact .contact-street > br:last-child {
  display: none;
}

/* Apply blue only to ordinary contact links; keep buttons
   styled as buttons rather than turning their labels into blue text. */
#t4-main-body .contact a:not(.btn) {
  color: var(--body-link-color);
  text-decoration: underline;
}

#t4-main-body .contact a:not(.btn):is(:hover, :focus-visible, :active) {
  color: var(--body-link-hover-color);
}

/* 8. Sidebars & Modules */
#t4-main-body .sidebar-l .t4-module {
  /* Preserve the requested module offset; this adds to the desktop rail padding. */
  margin: 5rem 0 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
}

#t4-main-body .sidebar-l .module-title {
  margin-bottom: 1rem;
  font-family: var(--heading-font-family);
  font-size: 1.125rem;
  font-weight: 400;
}

/* Hide menu-module headings (including "Main Menu"), not other sidebar titles. */
#t4-main-body :is(.sidebar-l, .sidebar-r) .t4-module:has(.nav-bar, .nav) .module-title {
  display: none;
}

#t4-main-body .sidebar-l :is(.nav, .menu) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#t4-main-body .sidebar-l :is(.nav-link, .menu a) {
  display: block;
  padding: 0.25rem 0;
  color: var(--body-text-color);
  background: transparent;
  font-family: var(--body-font-family);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.133333;
  text-decoration: none;
}

#t4-main-body .sidebar-l .active > a,
#t4-main-body .sidebar-l a:is(:hover, :focus-visible, [aria-current="page"]) {
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.17em;
}

/* Nested links stay visibly subordinate when the top-level menu wraps on mobile. */
#t4-main-body .sidebar-l :is(.nav, .menu) ul {
  padding-inline-start: 1rem;
}

/* 9. Forms & Buttons */
.t4-component :is(.btn, .form-control, .form-select) {
  border-radius: 0;
  font-family: var(--weidner-sans);
  font-size: 0.875rem;
}

.t4-component .btn.btn-primary {
  background: var(--body-text-color);
  color: var(--body-bg-color);
  border-color: var(--body-text-color);
}

.t4-component .btn.btn-primary:is(:hover, :focus-visible) {
  background: var(--body-bg-color);
  color: var(--body-text-color);
}

/* 10. Footer */
#t4-footer,
#t4-footnav {
  margin-inline: var(--weidner-page-inset);
  padding-block: 2rem;
  background: var(--footer-bg-color);
  color: var(--footer-text-color);
  border: 0;
  font-size: 0.875rem;
}

#t4-footer :is(.container, .container-xxl),
#t4-footnav :is(.container, .container-xxl) {
  max-width: none;
  padding-inline: 0;
}

#t4-footer a,
#t4-footnav a {
  color: var(--footer-link-color);
}

/* 11. Utilities (site-specific helper classes) */
/* No extra markup or helper classes are required by this stylesheet. */

/* 12. Responsive (media queries, by breakpoint) */
@media (max-width: 767.98px) {
  /* Some T4 category layouts switch to two columns at 576px. Keep phone-sized
     previews in a single column without affecting the desktop menu setting. */
  #t4-main-body .com-content-category-blog:has(> .blog-items.weidner-portfolio) .items-row > .item {
    flex: 0 0 100%;
    width: 100%;
  }

}

@media (min-width: 768px) {
  /* Center the name over the first Bootstrap half-column on tablets. */
  #t4-main-body .contact:has(> .plain-style) > .page-header {
    width: calc(50% - var(--t4-gutter-x, 1.5rem));
  }
}

@media (max-width: 991.98px) {
  /* Remove the desktop navigation rail, including its otherwise trailing content.
     Important also wins over any Bootstrap responsive display utility. */
  #t4-main-body .sidebar-l {
    display: none !important;
  }

  /* Reclaim the rail's Bootstrap column width when no right sidebar is present. */
  #t4-main-body > .t4-section-inner > .t4-row:has(> .sidebar-l):not(:has(> .sidebar-r)) > .t4-main {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  /* Keep T4's collapse/show states and native toggle intact; its menu opens
     downward below the header rather than sliding in from the viewport edge. */
  #t4-header .t4-megamenu,
  #t4-mainnav .t4-megamenu {
    background: var(--body-bg-color);
    color: var(--body-text-color);
    border: 1px solid var(--t4-border-color);
    box-shadow: none;
    max-height: 65vh;
    overflow-y: auto;
  }
}

@media (min-width: 992px) {
  /* Match Purity's 6rem right margin on .plain-contact-infor at desktop. */
  #t4-main-body .contact:has(> .plain-style) > .page-header {
    width: calc(50% - var(--t4-gutter-x, 1.5rem) - 6rem);
  }

  /* Desktop uses the sidebar menu. Important overrides Bootstrap d-flex on
     bundled header navigation wrappers without affecting mobile collapse. */
  #t4-mainnav,
  #t4-header :is(.t4-navbar, .mainnav, .t4-megamenu, .navbar-toggler) {
    display: none !important;
  }

  :root {
    --weidner-page-inset: 3.125rem;
    /* Size only the sidebar rail, rather than changing Bootstrap's col-lg-3. */
    --weidner-rail-width: 15%;
  }

  #t4-header {
    padding-top: 3.25rem;
  }

  #t4-main-body {
    min-height: 43.75rem;
  }

  /* Override Bootstrap's 25% sidebar column even when the grid structure below
     does not match the active T4 layout. The grid rules reset widths when used. */
  #t4-main-body .sidebar-l {
    flex: 0 0 var(--weidner-rail-width);
    width: var(--weidner-rail-width);
    max-width: var(--weidner-rail-width);
  }

  /* Apply the reference rail only to an existing main + left-sidebar pair.
     Other T4 layouts retain their configured grid and module positions. */
  #t4-main-body > .t4-section-inner > .t4-row:has(> .t4-main):has(> .sidebar-l):not(:has(> .sidebar-r)) {
    display: grid;
    grid-template-columns: var(--weidner-rail-width) minmax(0, 1fr);
    gap: var(--weidner-column-gap);
    margin-inline: 0;
  }

  #t4-main-body > .t4-section-inner > .t4-row:has(> .t4-main):has(> .sidebar-l):not(:has(> .sidebar-r)) > :is(.t4-main, .sidebar-l) {
    min-width: 0;
    width: auto;
    max-width: none;
    padding-inline: 0;
  }

  #t4-main-body > .t4-section-inner > .t4-row:has(> .t4-main):has(> .sidebar-l):not(:has(> .sidebar-r)) > .t4-main {
    grid-column: 2;
    grid-row: 1;
  }

  #t4-main-body > .t4-section-inner > .t4-row:has(> .t4-main):has(> .sidebar-l):not(:has(> .sidebar-r)) > .sidebar-l {
    grid-column: 1;
    grid-row: 1;
    padding-top: 6.125rem;
  }

  #t4-main-body .sidebar-l :is(.nav, .menu) {
    display: block;
  }

  #t4-main-body .sidebar-l :is(.nav, .menu) > li + li {
    margin-top: 1.25rem;
  }

  /* Refine the standard 3-column view only; T4's JS masonry keeps its own sizing. */
  .t4-component .blog-featured .columns-3 > #item-container.cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--weidner-column-gap);
    max-width: 51.875rem;
    margin-inline: 0;
  }

  .t4-component .blog-featured .columns-3 > #item-container.cols-3 > .item {
    width: auto;
    min-width: 0;
    padding-inline: 0;
  }
}

@media (min-width: 1200px) {
  :root {
    --weidner-column-gap: 2.5rem;
  }
}

/* 13. Print */
@media print {
  body:not(.contentpane) {
    --body-bg-color: #ffffff;
    --body-text-color: #000000;
    font-size: 11pt;
  }

  .t4-wrapper .t4-content-inner {
    min-height: 0;
  }

  #t4-header,
  #t4-main-body,
  #t4-footer,
  #t4-footnav {
    min-height: 0;
    margin: 0;
    padding-block: 1rem;
  }

  .t4-component .item-page .full-image {
    break-inside: avoid;
  }
}