/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://gouglabs.com
 Description:  Default gouglabs child theme.
 Author:       John Goughenour
 Author URI:   https://gouglabs.com
 Template:     generatepress
 Version:      0.1
*/

/* ==================================================
   GLOBAL VARIABLES
================================================== */
/* Fluid Typography Scale */
h1, .fs-h1 {
    font-size: clamp(3rem, 2.6591rem + 1.3636vi, 3.75rem);
}

h2, .fs-h2 {
    font-size: clamp(2.25rem, 1.9943rem + 1.0227vi, 2.8125rem);
}

h3, .fs-h3 {
    font-size: clamp(1.875rem, 1.6619rem + 0.8523vi, 2.3438rem);
}

h4, .fs-h4 {
    font-size: clamp(1.5rem, 1.3295rem + 0.6818vi, 1.875rem);
}

h5, .fs-h5 {
    font-size: clamp(1.25rem, 1.108rem + 0.5682vi, 1.5625rem);
}

h6, .fs-h6 {
    font-size: clamp(1.125rem, 0.9972rem + 0.5114vi, 1.4063rem);
}

p, .fs-p {
    font-size: clamp(0.8rem, 0.7091rem + 0.3636vi, 1rem);
}

/* ==================================================
   HEADER AND NAVIGATION   
================================================== */
/* CSS scroll-driven animations. */
 /* Default fallback for browsers that do not support */
.overlay-site-header {
    background-color: rgba(1, 17, 32, 0.96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/*
 * Modern CSS scroll-driven header background
 */
@supports (animation-timeline: scroll()) and
          (timeline-scope: --hero-timeline) {

    /*
     * Make the hero timeline available to both the hero
     * and the header.
     */
    body {
        timeline-scope: --hero-timeline;
    }

    /*
     * Create a timeline based on the hero's position
     * inside the viewport.
     */
    .page-hero {
        view-timeline-name: --hero-timeline;
        view-timeline-axis: block;
    }

    /*
     * Animate the header using the hero's timeline.
     * GenerateBlocks can continue controlling the sticky position.
     */
    .overlay-site-header {
        animation-name: hero-header-background;
        animation-duration: 1ms;
        animation-timing-function: linear;
        animation-fill-mode: both;

        animation-timeline: --hero-timeline;
        animation-range: exit 80% exit 100%;
    }

    @keyframes hero-header-background {
        from {
            background-color: transparent;
            box-shadow: none;
        }

        to {
            background-color: rgba(1, 17, 32, 0.96);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        }
    }
}

/* ==================================================
   HERO SECTIONS
================================================== */
.hero-slant {
    position: relative;
    background-color: var(--contrast);
    overflow: hidden;
    padding-bottom: 75px;
}

.hero-slant::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 75px;
    background: var(--surface);
    clip-path: polygon(
        0 15%,
        45% 55%,
        67% 100%,
        100% 15%,
        100% 100%,
        0 100%
    );
    z-index: 2;
}

.hero-slant > * {
    position: relative;
    z-index: 3;
}

/* soft glow behind the image */
.featured-hero-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 22px;
    background: rgba(35, 219, 229, 0.54);
    filter: blur(28px);
    z-index: -1;
}

/* ==================================================
   BLOG ARCHIVE CARDS
   Reverse every second post card on desktop
================================================== */
/* Let each card respond to its own width */
.blog-card {
    container-name: blog-card;
    container-type: inline-size;
}

/* Wide cards: horizontal layout with alternating image position */
@container blog-card (min-width: 701px) {

    .site-main
    > :nth-child(even of article.infinite-scroll-item)
    .blog-card__wapper {
        flex-direction: row-reverse !important;
    }

    .site-main
    > :nth-child(even of article.infinite-scroll-item)
    .blog-card__cat {
        text-align: left;
    }
}

/* Narrow cards: stack the image and content */
@container blog-card (max-width: 700px) {

    .blog-card__wapper {
        flex-direction: column !important;
    }

    .blog-card__image {
        display: block;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .blog-card__text-wrapper {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .blog-card__meta-wrapper {
        margin-top: auto;
        flex-shrink: 0;
    }

    .blog-card__cat {
        text-align: left;
    }
}

/* ==================================================
   LIGHT AND DARK MODES
================================================== */
:root {
    color-scheme: light dark;
}

body {
    --surface: light-dark(#fff, #000);
    --text: light-dark(#000, #fff);
    --border: light-dark(#b4b4b4, #4a4a4a);
    --shadow: light-dark(#000, #fff;);
    --card: light-dark(#F4FAFC, #011120);
    --heading: light-dark(#087A91, #18BCD8)
}

/* ==================================================
   FOOTER
================================================== */
/* FOOTER */
.footer-puzzle {
    position: relative;
    background-color: var(--contrast);
    overflow: hidden;
}

.footer-puzzle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background: var(--surface);
    clip-path: polygon(
        0 0,
        100% 0,
        100% 20%,
        67% 100%,
        45% 58%,
        0 20%
    );
    z-index: 1;
}

.footer-puzzle > * {
    position: relative;
    z-index: 2;
}

/* ==================================================
   RESPONSIVE OVERRIDES
================================================== */
/* TABLETS / PHONES */
@media (max-width: 768px) {
    .hero-slant {
        padding-bottom: 40px;
    }

    .hero-slant::after {
        height: 40px;
        clip-path: polygon(
            0 15%,
            30% 45%,
            50% 100%,
            70% 45%,
            100% 15%,
            100% 100%,
            0 100%
        );
    }

    .footer-puzzle::before {
        height: 40px;
        clip-path: polygon(
            0 0,
            100% 0,
            100% 18%,
            50% 100%,
            0 18%
        );
    }
}

@media (max-width: 480px) {
    .hero-slant {
        padding-bottom: 28px;
    }

    .hero-slant::after {
        height: 28px;
        clip-path: polygon(
            0 10%,
            50% 100%,
            100% 10%,
            100% 100%,
            0 100%
        );
    }

    .footer-puzzle::before {
        height: 28px;
        clip-path: polygon(
            0 0,
            100% 0,
            100% 12%,
            50% 100%,
            0 12%
        );
    }
}