/* 
Wordpress breakpoints: Mobile - (0-599) / Tablet (600-767) / Desktop (768-99999)
*/

/* --- Reset --- */

/* minimal-reset.css */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

html {
    scroll-padding-top: 200px;
    /* offset for anchor links */
    scroll-behavior: smooth;
    /* smooth scrolling for anchor links */
}

strong {
    font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    /* margin-block-start: 0.5em;
    margin-block-end: 0.5em; */
}

/* --- Header --- */

header.wp-block-template-part {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    &.header-is-scrolled {
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 0) 100%);
    }
}

/* --- Inside Body --- .coast class is added too the body of all pages */

.coast {

    /* Outer Container - Contains the Hamburger button */
    .wp-block-navigation__responsive-container.is-menu-open {
        background-color: var(--wp--preset--color--base) !important;

        /* Top Level */
        ul {
            gap: 8px !important;
            padding-right: 10px !important;

            >li {
                padding-right: 10px !important;
            }

            >li.has-child {
                border-right: 1px solid var(--wp--preset--color--secondary) !important;
            }

            >li>a {
                color: var(--wp--preset--color--contrast) !important;
                text-align: right;
            }
        }

        /* Second Level */
        ul ul {
            padding-top: 0 !important;
            margin-top: 12px !important;
            margin-bottom: 24px !important;

            >li>a {
                color: var(--wp--preset--color--secondary) !important;
            }
        }
    }

    /* --- PLUGINS --- */
    /* --- Gravity Forms --- */
    .gform_wrapper input {
        --gf-local-shadow: rgba(18, 25, 97, 0) 0px 1px 4px 0px !important;
    }

    .gform_wrapper {
        --gf-form-gap-y: 1rem !important;
        --gf-ctrl-btn-border-color-primary: var(--wp--preset--color--primary) !important;
    }

    .gform_required_legend {
        display: none !important;
    }


}

/* Core Navigation Mobile Custom Breakpoint 
     * - change max-width to desired point hamburger appears 
     */

/* @media screen and (max-width: 1370px) {        
        .wp-block-navigation__responsive-container-open {
            display: block !important;
        }        
        .wp-block-navigation__responsive-container:not(
                .is-menu-open.has-modal-open
            ) {
            display: none !important;
        }
    } */

/* 
/* --- Utilities 
/* This file contains utility classes for common styles and effects
 * such as text clipping, hover effects, and animations.
 * 
 * Usage:
 * - Add classes to elements to apply styles.
 * - Combine with other classes for custom effects.
 * 
 * Example:
 * <div class="clip-text clip-2">This is a long text that will be clipped after two lines.</div>
 * <div class="hover-slide-left">Hover over me to slide left!</div>
 * 
 * Copyright 2023 Coast Starter Theme
 * Licensed under the GNU General Public License v2.0 or later
 * https://www.gnu.org/licenses/gpl-2.0.html
 * 
 * @package Coast Starter Theme
 * @since 1.0.0
 * @version 1.0.0           
*/

/* --- TEXT --- */

/* Clip text lines with css, add .clp-txt + .c(no of lines 2,3,5 or 10)  */

.clip-text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clip-2 {
    -webkit-line-clamp: 2;
}

.clip-3 {
    -webkit-line-clamp: 3;
}

.clip-5 {
    -webkit-line-clamp: 5;
}

.clip-10 {
    -webkit-line-clamp: 10;
}

.no-underline,
.no-underline *,
.no-underline *:hover {
    text-decoration-line: none;
}

/* --- HOVE EFFECTS --- */

.hover-slide-left {
    transition: all 200ms ease-in-out;
    &:hover {
        transform: translateX(-5px);
        transition: all 200ms ease-in-out;
    }
}

.hover-slide-right {
    transition: all 200ms ease-in-out;
    &:hover {
        transform: translateX(5px);
        transition: all 200ms ease-in-out;
    }
}

.hover-underline:hover {
    h1,
    h2,
    h3,
    p {
        text-decoration: underline;
    }
}

/* --- Animate in --- */

.fadein {
    opacity: 0;
    transition: all 1s;
}

/* dont hide elements in the editor - we don't run the required js script in the editor */

.block-editor-block-canvas .fadein,
.editor-styles-wrapper .fadein {
    opacity: 1 !important;
}

.fadein:nth-child(2) {
    transition-delay: 200ms;
}

.fadein:nth-child(3) {
    transition-delay: 400ms;
}

.fadein:nth-child(4) {
    transition-delay: 600ms;
}

.fadein:nth-child(5) {
    transition-delay: 700ms;
}

.fadein:nth-child(6) {
    transition-delay: 750ms;
}

.fadein:nth-child(7) {
    transition-delay: 800ms;
}

.coast-visible {
    opacity: 1;
}

/* --- Position --- */

.absolute {
    position: absolute !important;
}

.left-0 {
    left: 0 !important;
}

.right-0 {
    right: 0 !important;
}

/* Padding */

.p-sm {
    padding: 1rem;
}

.p-md {
    padding: 2rem;
}

.p-lg {
    padding: 3rem;
}

/* Height */

.h-full {
    height: 100%;
}

/* Width */

.w-full {
    width: 100%;
}

/* Max Width */

.max-w-text {
    max-width: 675px !important;
}

.mw-500 {
    max-width: 500px !important;
}

/* --- Reverse row on mobile - core row block */

@media screen and (max-width: 1050px) {
    .mobile-reverse {
        flex-direction: column-reverse;
    }
}

/* @import "./plugin-gravity.css"; */