/*
 Theme Name:   MaWe GeneratePress Child
 Theme URI:    https://manfred-webel.de/
 Description:  A GeneratePress child theme for manfred-webel.de
 Author:       Alex von Freeden
 Author URI:   https://laikalaika.de
 Template:     generatepress
 Version:      0.2
 Text Domain:  mawe-generatepress-child
 Domain Path:  /languages
*/

/* ==========================================================================
   Fonts
   ========================================================================== */

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

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

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

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

/* ==========================================================================
   Custom Properties
   ========================================================================== */

:root {
    --container-width: 1400px;
    --container-padding: 40px;
    --seal-size: 60px;
    --mawe-image-radius: 8px;
}

/* Mirror the GeneratePress Customizer setting (container padding is
   30px on mobile) so var(--container-padding) consumers stay in sync. */
@media (max-width: 768px) {
    :root {
        --container-padding: 30px;
    }
}

/* ==========================================================================
   Base
   ========================================================================== */

/* Full-height layout so the footer always sits at the bottom */

html {
    min-height: 100vh;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#page.site {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex-shrink: 0;
    width: 100%;
}

/* Helper classes */

.balance {
    text-wrap: balance;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/* Selection */

::selection {
    background-color: #000000;
    color: #ffffff;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        hyphens: auto;
    }
}

/* Paragraph text */

p {
    hyphens: auto;
}

/* Paragraph block links: underline at rest, rising black fill on hover.
   The background gradient replaces the native underline so the two
   don't stack. The fill anchors at the bottom and grows upward. */

.wp-block-paragraph a,
.mawe-table a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    transition: background-size 0.2s ease, color 0.2s ease;
}

.wp-block-paragraph a:hover,
.wp-block-paragraph a:active,
.mawe-table a:hover,
.mawe-table a:active {
    background-image: linear-gradient(#000000, #000000);
    background-size: 100% 100%;
    color: #ffffff;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Three-column grid: logo | nav | (empty right column for visual balance) */

.inside-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.inside-header .site-logo {
    justify-self: start;
}

.inside-header #site-navigation {
    grid-column: 2;
    justify-self: center;
}

.inside-header #site-navigation .inside-navigation {
    padding: 0;
    width: auto;
    max-width: none;
}

/* Main navigation — link states */

.main-navigation .menu-item > a {
    text-decoration: none;
}

.main-navigation .menu-item > a:hover,
.main-navigation .menu-item > a:focus,
.main-navigation .current-menu-item > a {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    text-decoration-skip-ink: none;
}

.main-navigation .menu-item > a:focus-visible {
    outline: 3px dashed currentColor;
    outline-offset: 3px;
    text-decoration: none;
}

/* MaWe seal — fixed position, anchored to the right edge of the container */

.header-seal {
    position: fixed;
    top: 40px;
    left: calc(50% + (var(--container-width) / 2) - var(--container-padding) - var(--seal-size));
    width: var(--seal-size);
    height: auto;
    z-index: 1000;
    display: block;
}

/* Below the container width, follow the viewport edge instead */
@media (max-width: 1400px) {
    .header-seal {
        left: auto;
        right: var(--container-padding);
    }
}

@media (max-width: 768px) {
    .inside-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .header-seal {
        width: 40px;
        top: 10px;
        right: 10px;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Two-column widget area: 70 / 30 split */

.footer-widgets-container .inside-footer-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

.footer-widgets-container .footer-widget-1 {
    flex: 0 0 calc(70% - 1em);
    max-width: calc(70% - 1em);
}

.footer-widgets-container .footer-widget-2 {
    flex: 0 0 calc(30% - 1em);
    max-width: calc(30% - 1em);
}

@media (max-width: 768px) {
    .footer-widgets-container .footer-widget-1,
    .footer-widgets-container .footer-widget-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Copyright bar is hidden via functions.php; this covers any edge cases */
.site-info {
    display: none;
}

/* ==========================================================================
   GeneratePress Overrides
   ========================================================================== */

/* Remove the top margin on the home page content area */
.home .entry-content {
    margin-top: 0;
}

/* Consistent border radius on standalone and gallery images in content */
.entry-content .wp-block-image img {
    border-radius: var(--mawe-image-radius);
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
    border-radius: var(--mawe-image-radius);
    overflow: visible;
    display: flex;
    flex-direction: column;
    box-shadow: none !important;
}

/* Image link fills all available height so cropping is preserved.
   flex-basis 0 (not auto) avoids circular sizing with the img's height: 100% */
.wp-block-gallery.has-nested-images figure.wp-block-image > a {
    flex: 1 0 0%;
    display: flex;
    overflow: hidden;
    border-radius: var(--mawe-image-radius);
}

.wp-block-gallery.has-nested-images figure.wp-block-image > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--mawe-image-radius);
}

/* Caption hangs below the image, left-aligned. Absolute positioning keeps it
   out of the figure's flex flow so all images keep the same height. */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption.wp-element-caption {
    position: absolute !important;
    top: 100%;
    bottom: auto !important;
    left: 0;
    right: 0;
    background: none !important;
    color: inherit !important;
    text-align: left;
    padding: 0.4em 0 0;
    margin: 0;
    font-size: 12px;
    max-height: none;
    overflow: visible;
    text-shadow: none !important;
}

/* Standalone image blocks: left-aligned caption, matching gallery captions */
.wp-block-image figcaption.wp-element-caption {
    text-align: left;
    font-size: 12px;
}

/* Remove WP core's blur overlay behind (formerly overlaid) captions */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
    content: none;
}

/* Reserve space below the gallery for the hanging captions.
   !important needed: WP emits a per-block layout rule setting gap. */
.wp-block-gallery.has-nested-images {
    margin-bottom: 4em;
    row-gap: 3em !important;
}
/* Consistent border radius on video embeds (e.g. YouTube) */
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
    border-radius: 12px;
    overflow: hidden;
}

/* ==========================================================================
   Page-specific: visually hidden titles
   Visible to screen readers and search engines, hidden from sighted users.
   ========================================================================== */

.page-id-36 .entry-title,   /* Info */
.page-id-48 .entry-title,   /* Startseite */
.post-type-archive-werke h1 /* Werke Archive */ {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Arrow buttons (.mawe-arrow-button)
   Used with GenerateBlocks button blocks that carry an arrow icon. */

.mawe-arrow-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
}

/* Footer buttons sit as plain siblings with no gap container,
   so margin provides the spacing between them */
.site-footer .mawe-arrow-button {
    margin: 0 1em 0.4em 0;
}

/* Keep the arrow icon itself free of text-decoration */
.mawe-arrow-button .gb-shape,
.mawe-arrow-button .gb-shape svg {
    text-decoration: none;
}

/* Hover / active: underline the label only */
.mawe-arrow-button:hover .gb-text,
.mawe-arrow-button:active .gb-text {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    text-decoration-skip-ink: none;
}

/* Focus: dashed outline around the whole button */
.mawe-arrow-button:focus-visible {
    outline: 3px dashed currentColor;
    outline-offset: 3px;
}

.mawe-arrow-button:focus .gb-text {
    text-decoration: none;
}

/* ==========================================================================
   Blog Archive
   ========================================================================== */

.mawe-blog-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mawe-blog-entry {
    border-top: 1px solid currentColor;
}

.mawe-blog-entry__inner {
    display: grid;
    grid-template-columns: 220px 1fr max-content;
    gap: 0 2em;
    padding: 1.25em 0;
    align-items: start;
}

.mawe-blog-entry__title {
    font-size: inherit;
    font-weight: 700;
    margin: 0;
    line-height: inherit;
}

.mawe-blog-entry__title a {
    color: inherit;
    text-decoration: none;
}

.mawe-blog-entry__title a:hover,
.mawe-blog-entry__title a:focus-visible {
    text-decoration: underline;
}

.mawe-blog-entry__content {
    min-width: 0; /* prevent grid blowout */
}

.mawe-blog-entry__excerpt,
.mawe-blog-entry__body {
    margin: 0 0 0.75em;
}

.mawe-blog-entry__excerpt p:last-child,
.mawe-blog-entry__body p:last-child {
    margin-bottom: 0;
}

.mawe-blog-entry__date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mawe-blog-entry__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: var(--mawe-image-radius);
    margin-bottom: 0.75em;
}

.mawe-blog-entry__link {
    color: inherit;
    text-decoration: none;
}

.mawe-blog-entry__link::before {
    content: '→\00a0';
}

/* Underline the text label only, not the arrow */
.mawe-blog-entry__link:hover .mawe-blog-entry__link-text,
.mawe-blog-entry__link:focus-visible .mawe-blog-entry__link-text {
    text-decoration: underline;
}

.mawe-blog-entry__image-link .mawe-blog-entry__image {
    transition: opacity 0.3s ease-in-out;
}

.mawe-blog-entry__image-link:hover .mawe-blog-entry__image,
.mawe-blog-entry__image-link:focus-visible .mawe-blog-entry__image {
    opacity: 0.7;
}

@media (max-width: 640px) {
    .mawe-blog-entry__inner {
        grid-template-columns: 1fr;
        gap: 0.5em 0;
    }

    .mawe-blog-entry__date {
        order: -1;
        font-size: 0.875em;
    }
}

/* ==========================================================================
   Artwork Archive
   ========================================================================== */

.mawe-artworks-archive-loop h2 a {
    text-decoration: none;
}

.mawe-artworks-archive-loop h2 a:hover,
.mawe-artworks-archive-loop h2 a:active {
    text-decoration: underline;
}

/* ==========================================================================
   Werke: Single
   ========================================================================== */

/* Spacing between post title and featured image */

.single-werke .entry-title {
    margin-bottom: 1em;
}

/* Featured image between title and content — same radius as content images */

.mawe-werk-featured-image {
    margin: 0 0 2em;
}

.mawe-werk-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--mawe-image-radius);
}

.mawe-werk-featured-image__caption {
    margin-top: 0.5em;
    font-size: 12px;
}

/* ==========================================================================
   Plugin: WP Grid Builder
   ========================================================================== */

/* Werk Archive filter facet — pill-style toggle buttons */

.wpgb-facet-1 {
    --wpgb-border-radius: 999px;
    --wpgb-border-width: 1.5px;
    --wpgb-grey-500: #111111;
    --wpgb-grey-100: #111111;
    --wpgb-accent-scheme-1: #111111;
    --wpgb-dark-scheme-1: #111111;
    --wpgb-light-scheme-1: #ffffff;
}

.wpgb-facet-1 .wpgb-inline-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wpgb-facet-1 .wpgb-button {
    border-color: #111 !important;
    border-radius: 999px !important;
    border-width: 1.5px !important;
    background-color: transparent !important;
    color: #111 !important;
    padding: 0.35em 1.1em !important;
    height: auto !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.wpgb-facet-1 .wpgb-button-label {
    font-weight: 700 !important;
}

.wpgb-facet-1 .wpgb-button[aria-pressed="true"] {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}

.wpgb-facet-1 .wpgb-button[aria-pressed="false"]:hover {
    background-color: #e8e8e8 !important;
}

.wpgb-facet > fieldset:last-child {
    margin-bottom: 0;
}

#page > .wpgb-facet-1 {
    padding: 40px 0 0 40px;
}

/* ==========================================================================
   Plugin: Fluent Forms
   ========================================================================== */

/* Contact form (#3) */

/* Required field asterisks */
#fluentform_3 .ff-el-is-required .ff-el-input--label span,
#fluentform_3 .ff-el-is-required > label span {
    color: #000000;
}

/* Focus outline on inputs, textarea, and select */
#fluentform_3 .ff-el-form-control:focus {
    outline: 2px solid #000000;
    outline-offset: 0;
    border-color: #000000;
    box-shadow: none;
}

/* User-entered text */
#fluentform_3 .ff-el-form-control {
    color: #000000;
}

/* Field labels */
#fluentform_3 .ff-el-input--label label {
    font-size: 16px;
    font-weight: bold;
}

/* Submit button — pill style matching the site's button convention */
#fluentform_3 .ff_submit_btn_wrapper .ff-btn-submit,
#fluentform_3 .ff-btn.ff-btn-submit {
    border-radius: 9999px;
    border: 3px solid #000000;
    background-color: #ffffff;
    color: #000000;
    padding-left: 2em;
    padding-right: 2em;
    font-weight: bold;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#fluentform_3 .ff_submit_btn_wrapper .ff-btn-submit:hover,
#fluentform_3 .ff_submit_btn_wrapper .ff-btn-submit:focus-visible,
#fluentform_3 .ff-btn.ff-btn-submit:hover,
#fluentform_3 .ff-btn.ff-btn-submit:focus-visible {
    background-color: #000000;
    color: #ffffff;
}

/* ==========================================================================
   Plugin: Gallery Block Lightbox (baguetteBox)
   Light theme: transparent white backdrop, black controls and caption,
   caption below the image, breathing room top and bottom.
   ========================================================================== */

/* Backdrop — plugin sets the dark color as an inline style */
#baguetteBox-overlay {
    background-color: rgba(255, 255, 255, 0.92) !important;
}

/* Flex column on the slide container so the caption can sit below the
   image. Padding provides the top/bottom spacing; the image shrinks to fit.
   Overrides the plugin's inline-block vertical centering. */
#baguetteBox-overlay .full-image {
    /* inline-flex + vertical-align keep the plugin's horizontal
       slide row (white-space: nowrap on the slider) intact */
    display: inline-flex !important;
    vertical-align: top;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4vh 2vw;
    box-sizing: border-box;
}

/* Image and caption participate directly in the slide's flex layout */
#baguetteBox-overlay .full-image figure {
    display: contents;
}

/* Viewport-based sizing: flex percentage sizing proved unreliable here
   (the flex algorithm under-sized the image). The slide always spans the
   full viewport, so vh/vw give a stable near-fullscreen size. */
#baguetteBox-overlay .full-image img {
    flex: none;
    width: auto;
    height: auto;
    max-height: calc(92vh - 3em); /* 3em ≈ caption space */
    max-width: 94vw;
    object-fit: contain;
    border-radius: var(--mawe-image-radius);
    box-shadow: none !important;
}

/* Caption below the image (DOM order puts it first — order: 2 moves it after) */
#baguetteBox-overlay .full-image figcaption {
    position: static;
    order: 2;
    flex: 0 0 auto;
    width: auto;
    max-width: 90%;
    padding-top: 0.5em;
    background: none !important;
    color: #000000;
    text-align: left;
    font-size: 12px;
    font-family: inherit;
}

/* Controls: black instead of white/grey */
#baguetteBox-overlay .baguetteBox-button svg polyline,
#baguetteBox-overlay .baguetteBox-button svg line {
    stroke: #000000;
}

#baguetteBox-overlay .baguetteBox-button {
    background-color: transparent;
}

/* ==========================================================================
   WordPress Table Block (.mawe-table)
   ========================================================================== */

.mawe-table,
.mawe-table table {
    border: none !important;
    border-collapse: collapse;
    width: 100%;
}

/* Remove all cell borders, add only bottom border per row */
.mawe-table td,
.mawe-table th {
    border: none !important;
    border-bottom: 1px solid currentColor !important;
    padding: 0.5em 1em 0.5em 0;
}

/* Top border on the very first row */
.mawe-table tr:first-child td,
.mawe-table tr:first-child th {
    border-top: 1px solid currentColor !important;
}

/* Mobile: stack cells vertically */
@media (max-width: 640px) {
    .mawe-table table,
    .mawe-table tbody,
    .mawe-table tr,
    .mawe-table td,
    .mawe-table th {
        display: block;
        width: 100%;
    }

    .mawe-table tr {
        border-top: 1px solid currentColor;
        border-bottom: none;
        padding: 0.5em 0;
    }

    /* Bottom border on the last row */
    .mawe-table tr:last-child {
        border-bottom: 1px solid currentColor;
    }

    .mawe-table td,
    .mawe-table th,
    .mawe-table tr:first-child td,
    .mawe-table tr:first-child th {
        border: none !important;
        padding: 0.1em 0;
    }
}