/*
Theme Name: Elayne
Theme URI: https://imagewize.com/themes/elayne
Author: Jasper Frumau
Author URI: https://imagewize.com
Description: A premium business block theme with advanced patterns for professional websites. Features industry-specific pattern sets for spa, real estate, and professional services with built-in conversion optimization.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.2.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elayne
Tags: block-patterns, block-styles, blog, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, one-column, rtl-language-support, template-editing, threaded-comments, translation-ready, wide-blocks

Elayne WordPress Theme, (C) 2025 Jasper Frumau
Elayne is distributed under the terms of the GNU GPL.
*/

/* Partial underline styling for post titles (matches Versifier) */
.has-partial-underline a {
    display: inline-block;
    border-bottom: 2px solid currentColor !important;
    border-image: linear-gradient(to right, currentColor 33%, transparent 33%) 1;
    padding-bottom: 0.25rem;
    text-decoration: none !important;
}

.has-partial-underline-center.has-partial-underline-third a {
    border-image: linear-gradient(to right, transparent 33.33%, currentColor 33.33%, currentColor 66.66%, transparent 66.66%) 1 !important;
}

.wp-block-post-title.has-partial-underline-center.has-partial-underline-third {
    position: relative;
    padding-bottom: 0.5rem;
}

.wp-block-post-title.has-partial-underline-center.has-partial-underline-third::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 33.33%;
    right: 33.33%;
    height: 2px;
    background-color: currentColor;
}

.wp-block-post-title.has-partial-underline-center.has-partial-underline-third a {
    border-bottom: none !important;
    border-image: none !important;
    text-decoration: none !important;
}

/* Opt-out helper: add body class "no-partial-underline" to disable underline styles */
body.no-partial-underline .has-partial-underline a,
body.no-partial-underline .wp-block-post-title.has-partial-underline-center.has-partial-underline-third a {
    border-bottom: none !important;
    border-image: none !important;
    padding-bottom: 0;
}

body.no-partial-underline .wp-block-post-title.has-partial-underline-center.has-partial-underline-third {
    padding-bottom: 0;
}

body.no-partial-underline .wp-block-post-title.has-partial-underline-center.has-partial-underline-third::after {
    display: none;
}

/* Layout helpers: allow alignfull blocks inside post content to bleed edge-to-edge while root padding stays on */
.wp-site-blocks .wp-block-post-content .alignfull {
    margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
    width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px));
    max-width: 100vw;
}

/* Checkmark list style for pricing tables */
.is-style-checkmark-list {
    list-style: none;
    padding-left: 0;
}

.is-style-checkmark-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-left: 0 !important;
}

.is-style-checkmark-list li::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url('patterns/images/check-circle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 0.125rem;
}

figure.is-avatar,
.wp-block-image.is-avatar {
    width: var(--wp--custom--avatar-size) !important;
    height: var(--wp--custom--avatar-size) !important;
    max-width: var(--wp--custom--avatar-size) !important;
}

.is-avatar img {
    width: var(--wp--custom--avatar-size) !important;
    height: var(--wp--custom--avatar-size) !important;
    max-width: var(--wp--custom--avatar-size) !important;
    aspect-ratio: 1;
    object-fit: cover;
}

/* ========================================================================
   Spa & Wellness Style Variation (from Velora Spa theme)
   ======================================================================== */

/* Overlapping columns styling */
@media (min-width: 782px) {
    .is-style-overlap-columns .wp-block-column:nth-child(2) {
        margin-left: -10%;
        z-index: 2;
        position: relative;
        align-self: center;
    }

    /* Styling for reversed overlapping columns */
    .is-style-overlap-columns-reversed .wp-block-column:nth-child(1) {
        margin-right: -10%;
        margin-left: 0;
        z-index: 2;
        position: relative;
        align-self: center;
    }
}

/* Spa post grid styling */
.spa-post-grid .wp-block-post-featured-image {
    width: 100%;
}

.spa-post-grid .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Cart icon styling */
.cart-icon {
    margin: 0 !important;
    transition: transform 0.2s ease;
}

.cart-icon img {
    display: block;
    width: 24px;
    height: 24px;
}

.cart-icon a:hover {
    opacity: 0.8;
}

.cart-icon a:hover img {
    filter: brightness(0) sepia(100%) saturate(500%) hue-rotate(175deg);
    transform: scale(1.1);
}

/* Mobile navigation adjustments */
@media (max-width: 781px) {
    .wp-block-site-title {
        padding-left: 2.8rem;
    }

    .mobile-centered-nav .wp-block-navigation__responsive-container-open {
        margin: 0 auto;
    }

    .mobile-centered-nav {
        width: 100%;
        justify-content: center;
    }

    .mobile-centered-nav .wp-block-navigation__responsive-container-open {
        position: relative;
        left: 0;
        transform: translateX(0);
    }
}

/* Masonry grid layout using CSS columns */
.portfolio-masonry-grid {
    column-count: 3;
    column-gap: 16px;
}

.portfolio-masonry-grid .portfolio-item {
    break-inside: avoid;
    margin-bottom: 16px;
    display: inline-block;
    width: 100%;
}

/* Responsive masonry columns */
@media (max-width: 1024px) {
    .portfolio-masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 640px) {
    .portfolio-masonry-grid {
        column-count: 1;
    }
}

/* WooCommerce Product Collection responsive grid (3-2-1 columns) */
.wc-block-product-template.is-flex-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
}

.wc-block-product-template.is-flex-container > li {
    width: auto !important;
}

@media (max-width: 1024px) {
    .wc-block-product-template.is-flex-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 640px) {
    .wc-block-product-template.is-flex-container {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}