/*
Theme Name: Casual Block Base Theme
Theme URI: https://wordpress.casualfridays.nz/
Author: Casual Fridays
Author URI: http://www.casualfridays.co.nz/
Description: This is the Casual block theme developed for the future of Wordpress.
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 5.7
Version: 2.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: http://www.casualfridays.co.nz/
Tags: blog, news, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, five-columns, six-columns, wide-blocks, full-width-blocks, block-styles, custom-colors, custom-logo, featured-image-header, full-site-editing.
*/

/* Table of Contents
- Defaults
    - Typographical Elements
    - Headings
- Structure and Layout
    - Site Content
- Plugins
    - WPForms
- Site Header
- Content Area
    - Fade Effects
- Site Footer
- Projects Archive
- Media Queries
    - Min-width: 600px
        - Site Header
        - Scroll Down
        - Transparent Header
    - Max-width: 781px
        - Font Size Adjustments
        - Column Width Adjustments
        - Scroll Down
        - Fade Effects
        - Frontpage
*/

html {
    font-size: 16px;
}

.site-footer-leader {
    opacity: 0.85;
}

/* --- Site Content --- */
.site-content {
    margin-block-start: 0;
}

.js .fadeup-effect, .js .fadedown-effect, .js .faderight-effect, .js .fadeleft-effect {
    opacity: 0;
    will-change: transform, opacity;
}

/* Scroll elements */
.scroll-speed-1, .scroll-speed-2, .scroll-speed-3, .scroll-speed-4, .scroll-speed-5, .scroll-speed-6,
.scroll-direction-left, .scroll-direction-right {
    position: relative; /* or absolute if needed */
    z-index: 10;        /* higher than normal content */
    will-change: transform;
    transition: transform 0.05s linear; /* optional slight easing */
}

.wp-block-columns .has-scroll-effect,
.wp-block-column .has-scroll-effect,
.wp-block-group .has-scroll-effect {
    overflow: visible !important;
}

/* --- Projects #1 START --- */

.site-content.projects .wp-block-post-template {
    display: grid;
}

/* Card wrapper */
.site-content.projects .post-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Image */
.site-content.projects .wp-block-post-featured-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Overlay */

.site-content.projects .post-contents {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* left align */
    justify-content: flex-end; /* push to bottom */
    padding: 2rem;
    box-sizing: border-box;
    gap: 1rem;
}

.site-content.projects .wp-block-post-title,
.site-content.projects .wp-block-read-more,
.site-content.projects .wp-block-post-excerpt,
.site-content.projects .wp-block-post-excerpt__more-link {
    position: static !important;
    display: block;
    margin: 0;
}

/* Link styles */
.site-content.projects .wp-block-post-title a,
.site-content.projects .wp-block-read-more a,
.site-content.projects .wp-block-post-excerpt,
.site-content.projects .wp-block-post-excerpt__more-link {
    text-decoration: none;
    color: #fff;
    text-align: left;
}

/* Reset margins, force left alignment */
.site-content.projects .post-contents .wp-block-post-title,
.site-content.projects .post-contents .wp-block-read-more,
.site-content.projects .post-contents .wp-block-post-excerpt {
    margin: 0 !important;
    align-self: flex-start;
    max-width: 100% !important;
    display: inline-block;
    text-align: left;
    color: #fff;
    text-decoration: none;
}

.hero-section .wp-block-cover__image-background {
object-position: -30% 50%!important;
overflow: visible!important;
}

/* --- Projects #1 END --- */

/* --- Media Queries --- */
@media only screen and (min-width: 600px) {
    .fixed-header .site-header {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        padding-top: 0.5em!important;
        padding-bottom: 0.5em!important;
        transition: all 100ms ease-in-out;
        z-index: 99;
    }

    /* Scroll-down link positioning at the bottom of the Cover block */
    .scroll-down a {
        position: absolute;
        left: 50%; /* Center horizontally within the Cover block */
        bottom: 10px; /* Place at the bottom of the Cover block */
        z-index: 2; /* Ensure it's above other content */
        transform: translateX(-50%); /* Correct horizontal centering */
        color: #fff;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        text-decoration: none !important;
        transition: opacity 0.3s;
    }

    .scroll-down a:hover, .scroll-down a:focus {
        opacity: 0.5; /* Hover effect */
    }

    /* Arrow inside the scroll-down link */
    #scroll a span {
        position: absolute;
        top: -50%; /* Center vertically inside the anchor link */
        left: 50%; /* Center horizontally inside the anchor link */
        width: 24px;
        height: 24px;
        margin-left: -12px; /* Adjust to center the arrow */
        margin-top: -12px; /* Adjust to center the arrow vertically */
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
        transform: rotate(-45deg); /* Create the downward-pointing arrow */
        animation: sdb05 1.5s infinite; /* Arrow animation */
        box-sizing: border-box;
    }

    /* Keyframes for scroll-down arrow animation */
    @keyframes sdb05 {
        0% {
            transform: rotate(-45deg) translate(0, 0);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            transform: rotate(-45deg) translate(-20px, 20px);
            opacity: 0;
        }
    }


    /* --- Transparent Header --- */

    [class*="template-transparent-header"] .site-header {
        background-color: transparent;
        position: fixed;
        width: 100%;
        z-index: 99;
        color: #ffffff;
    }

    [class*="template-transparent-header"] .fixed-header .site-header {
        background-color: #ffffff;
        color: #222222;
    }

    [class*="template-transparent-header"] .wp-block-cover .page-title-banner {
        margin-top: -77px;
        z-index: 0;
    }
}

@media (max-width: 781px) {
    /* Font Size Adjustments */
    h1 {font-size: clamp(1.8rem, 6vw, 2.027rem);}
    h2 {font-size: clamp(1.6rem, 5.5vw, 1.802rem);}
    h3 {font-size: clamp(1.4rem, 5vw, 1.602rem);}
    h4 {font-size: clamp(1.3rem, 4.5vw, 1.424rem);}
    h5 {font-size: clamp(1.1rem, 4vw, 1.266rem);}
    h6 {font-size: clamp(1rem, 3.5vw, 1.125rem);}

    /* Column Width Adjustments */
    .wp-block-columns.half-stack-only > .wp-block-column {
        flex-basis: 45% !important;
    }

    .wp-block-columns.third-stack-only > .wp-block-column {
        flex-basis: 33% !important;
    }

    .wp-block-columns.quarter-stack-only > .wp-block-column {
        flex-basis: 25% !important;
    }

    .reverse-stack-on-mobile {
            display: flex !important;
            flex-direction: column-reverse;
    }

    /* Scroll Down */
    .scroll-down a {display: none;}

    /* Remove Fade Effect Delays */
    .js .fadeup-effect-2, .js .fadedown-effect-2, .js .faderight-effect-2, .js .fadeleft-effect-2,
    .js .fadeup-effect-3, .js .fadedown-effect-3, .js .faderight-effect-3, .js .fadeleft-effect-3,
    .js .fadeup-effect-4, .js .fadedown-effect-4, .js .faderight-effect-4, .js .fadeleft-effect-4 {
        animation-delay: 0s;
    }

    .frontpage-1 {
        min-height: 60vh !important;
    }
}