/* 
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;
            }
        }
    }
}

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

@media screen and (max-width: 766px) {
    .wp-block-navigation__responsive-container-open {
        display: block !important;
    }

    .wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
        display: none !important;
    }
}

/* // KADENCE FIX MOBILE section height */

/* @media screen and (max-width: 767px) {
    .kt-inner-column-height-full.kt-mobile-layout-row>.wp-block-kadence-column>.kt-inside-inner-col {
        height: 100%;
    }
}

@media screen and (max-width: 767px) {
    .kt-inner-column-height-full.kt-mobile-layout-row {
        grid-auto-rows: minmax(0, 1fr);
    }
} */

/* 
/* --- 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           
*/

.base,
.hover-base:hover,
.a-hover-base a:hover {
    color: var(--wp--preset--color--base) !important;
}

.contrast,
.hover-contrast:hover,
.a-hover-contrast a:hover {
    color: var(--wp--preset--color--primary) !important;
}

.accent-1,
.hover-accent-1:hover,
.a-hover-accent-1 a:hover {
    color: var(--wp--preset--color--accent-1) !important;
}

.accent-2,
.hover-accent-2:hover,
.a-hover-accent-2 a:hover {
    color: var(--wp--preset--color--accent-2) !important;
}

.accent-3,
.hover-accent-3:hover,
.a-hover-accent-3 a:hover {
    color: var(--wp--preset--color--accent-3) !important;
}

.primary,
.hover-primary:hover,
.a-hover-primary a:hover {
    color: var(--wp--preset--color--primary) !important;
}

.secondary,
.hover-secondary:hover,
.a-hover-secondary a:hover {
    color: var(--wp--preset--color--secondary) !important;
}

.tertiary,
.hover-tertiary:hover,
.a-hover-tertiary a:hover {
    color: var(--wp--preset--color--tertiary) !important;
}

/* --- 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;
}

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

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

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

.rounded-sm {
    border-radius: 1rem;
}

.rounded-md {
    border-radius: 2rem;
}

.rounded-lg {
    border-radius: 3rem;
}

.overflow-hidden {
    overflow: hidden;
}

/* Simple CSS override to sync Kadence blocks with theme.json font sizes */

:root {
    .coast{
    /* Override common Kadence font size variables */
    --global-kb-font-size-sm: var(--wp--preset--font-size--sm) !important;
    --global-kb-font-size-md: var(--wp--preset--font-size--md) !important;
    --global-kb-font-size-lg: var(--wp--preset--font-size--lg) !important;
    --global-kb-font-size-xl: var(--wp--preset--font-size--xl) !important;
    --global-kb-font-size-xxl: var(--wp--preset--font-size--xxl) !important;
    --global-kb-font-size-xxxl: var(--wp--preset--font-size--xxxl) !important;
    }
}

/* Force Kadence blocks to use WordPress font size classes */

.wp-block-kadence-advancedheading.has-xs-font-size,
.wp-block-kadence-advancedtext.has-xs-font-size,
[class*='wp-block-kadence'].has-xs-font-size {
    font-size: var(--wp--preset--font-size--xs) !important;
}

.wp-block-kadence-advancedheading.has-sm-font-size,
.wp-block-kadence-advancedtext.has-sm-font-size,
[class*='wp-block-kadence'].has-sm-font-size {
    font-size: var(--wp--preset--font-size--sm) !important;
}

.wp-block-kadence-advancedheading.has-md-font-size,
.wp-block-kadence-advancedtext.has-md-font-size,
[class*='wp-block-kadence'].has-md-font-size {
    font-size: var(--wp--preset--font-size--md) !important;
}

.wp-block-kadence-advancedheading.has-lg-font-size,
.wp-block-kadence-advancedtext.has-lg-font-size,
[class*='wp-block-kadence'].has-lg-font-size {
    font-size: var(--wp--preset--font-size--lg) !important;
}

.wp-block-kadence-advancedheading.has-xl-font-size,
.wp-block-kadence-advancedtext.has-xl-font-size,
[class*='wp-block-kadence'].has-xl-font-size {
    font-size: var(--wp--preset--font-size--xl) !important;
}

.wp-block-kadence-advancedheading.has-xxl-font-size,
.wp-block-kadence-advancedtext.has-xxl-font-size,
[class*='wp-block-kadence'].has-xxl-font-size {
    font-size: var(--wp--preset--font-size--xxl) !important;
}

/* Editor styles */

.block-editor-block-list__block .wp-block-kadence-advancedheading.has-xs-font-size,
.block-editor-block-list__block .wp-block-kadence-advancedtext.has-xs-font-size {
    font-size: var(--wp--preset--font-size--xs) !important;
}

.block-editor-block-list__block .wp-block-kadence-advancedheading.has-sm-font-size,
.block-editor-block-list__block .wp-block-kadence-advancedtext.has-sm-font-size {
    font-size: var(--wp--preset--font-size--sm) !important;
}

.block-editor-block-list__block .wp-block-kadence-advancedheading.has-md-font-size,
.block-editor-block-list__block .wp-block-kadence-advancedtext.has-md-font-size {
    font-size: var(--wp--preset--font-size--md) !important;
}

.block-editor-block-list__block .wp-block-kadence-advancedheading.has-lg-font-size,
.block-editor-block-list__block .wp-block-kadence-advancedtext.has-lg-font-size {
    font-size: var(--wp--preset--font-size--lg) !important;
}

.block-editor-block-list__block .wp-block-kadence-advancedheading.has-xl-font-size,
.block-editor-block-list__block .wp-block-kadence-advancedtext.has-xl-font-size {
    font-size: var(--wp--preset--font-size--xl) !important;
}

.block-editor-block-list__block .wp-block-kadence-advancedheading.has-xxl-font-size,
.block-editor-block-list__block .wp-block-kadence-advancedtext.has-xxl-font-size {
    font-size: var(--wp--preset--font-size--xxl) !important;
}

/* Carousel Arrows */

.kb-splide .splide__arrow, .kb-splide .splide__arrow:hover {
    background-color: transparent;
}

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