/*
Theme Name: dynamicTools Theme
Theme URI: https://dietz.digital/dynamic-tools/
Author: Dominik Gretzschel
Author URI: https://dietz.digital/
Description: Custom FSE theme for dynamicTools Product Suite
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
*/

/* ===========================
   DYNAMIC TOOLS THEME
   =========================== */

/* Color Variables */
/*

--wp--preset--color--base
--wp--preset--color--surface
--wp--preset--color--text-primary
--wp--preset--color--text-body
--wp--preset--color--pim-indigo
--wp--preset--color--pim-indigo-light
--wp--preset--color--dam-coral
--wp--preset--color--dam-coral-light
--wp--preset--color--ai-lavender
--wp--preset--color--ai-lavender-light
--wp--preset--color--dark-base
--wp--preset--color--dark-surface
--wp--preset--color--dark-border
--wp--preset--color--contrast
--wp--preset--color--white-50

*/

/* ===========================
   BUTTONS & ICONS
   =========================== */

/* Lucide Icon Integration */
.dt-icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.2s ease-in-out;
}

/* Ensure Button Link is Flex to handle alignment and order */
.wp-block-button__link,
.wp-block-read-more {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0.5em;
    transition: all 0.2s ease-in-out;
}

.wp-block-button__link .dt-icon,
.wp-block-read-more .dt-icon {
    margin-left: 0;
}

.wp-block-button__link:hover .dt-icon,
.wp-block-read-more:hover .dt-icon {
    transform: translateX(4px);
}

/* Disable hover animation for specific button styles */
.is-style-icon-only .wp-block-button__link:hover .dt-icon {
    transform: translateX(0);
}

/* Fix for Icon Only buttons collapsing when empty */
.is-style-icon-only .wp-block-button__link {
    min-width: 2.5em;
    min-height: 2.5em;
    padding: 0.5em !important;
}

/* ===========================
   MEDIA & TEXT BLOCK
   =========================== */

.wp-block-media-text .wp-block-media-text__media img {
    border-radius: var(--wp--custom--border-radius--image-std);
    width: 100%;
    height: auto;
    display: block;
}

/* ===========================
   SITE HEADER & FOOTER
   =========================== */

.wp-block-template-part.site-header,
header.wp-block-template-part,
.is-position-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Backdrop blur effect */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    /* Smooth transitions if you want to add scroll events later */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Sticky Footer Implementation */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* In FSE, the content is usually inside .wp-site-blocks */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-bottom: 0px;
}

/* Push the footer to the bottom */
.wp-block-template-part.site-footer,
footer.wp-block-template-part {
    margin-top: auto;
}

/* ===========================
   BLOG POST STYLES
   =========================== */

/* Blog Meta */
.dt-blog-meta {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 4px;
}

@media (max-width: 768px) {
    .dt-blog-meta {
        gap: 2px;
    }
}

/* ===========================
   BLOG POST GRID STYLES
   =========================== */

/* Tablet */
@media (max-width: 1024px) {
    .dt-wissen-loop .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobil */
@media (max-width: 768px) {
    .dt-wissen-loop .wp-block-post-template {
        grid-template-columns: 1fr;
    }
}

/* Badge Position */
.dt-badge-cat .wp-block-cover__inner-container {
    position: relative;
    top: -60px;
    left: 0px;
}