/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.3.1764583980
Updated: 2025-12-01 10:13:00

*/

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');

body, p, li, a, input, textarea, button {
    font-family: 'Roboto Flex', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Exo 2', sans-serif;
    font-weight: 800;
}

.has-block-gap {
	gap: .5rem !important;
}

.no-white-space {
	white-space: nowrap !important;
}

.brand-triangle:before {
    aspect-ratio: 1 / 1;
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    width: 18rem;
    background-color: #64ccc9;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    pointer-events: none;
    z-index: -1;
}

.clickable-cover {
    position: relative;
    overflow: hidden;
}

.clickable-cover .wp-block-cover__inner-container {
    position: static; 
    z-index: 20;
}

.clickable-cover h2 a::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Sits BELOW the text but ABOVE the background image */
}

.clickable-cover h2 {
    position: relative;
    z-index: 20; /* Matches inner container to keep text visible */
    pointer-events: none; /* Passes clicks through text to the layer below */
}

.clickable-cover h2 a {
    pointer-events: auto; /* Re-enables clicking for the link itself */
}

.hover-zoom-bg .wp-block-cover__image-background {
    transition: transform 0.5s ease-in-out;
    /* Ensures the image doesn't spill out of the box */
    will-change: transform;
}

.hover-zoom-bg:hover .wp-block-cover__image-background {
    /* Scale the image up by 10% */
    transform: scale(1.1);
}

.custom-sub-cat-nav ul { 
	list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 2rem;
}

.custom-sub-cat-nav li a {
	text-decoration: none;
    background: #f1f1f1;
    padding: 8px 16px;
    border-radius: 50px;
    color: #111;
    font-size: 0.9rem;
    transition: 0.2s;
}

.custom-sub-cat-nav li a:hover {
	background: #e0e0e0;
}

.custom-sub-cat-nav li.current-cat a {
	background: #111; color: #fff;
}

.wc-block-product-description {
    display: none;
}

.wc-block-product-description.desc-ready {
    display: block;
}

.woo-hidden-desc {
	margin: 0 !important;
}

.woo-read-more-btn {
	display: inline-block;
}

.wp-block-navigation__responsive-container-open, .wc-block-search_button, .wc-block-mini-cart__button {
	padding: 8px;
}

/* 1. The Trigger Button */
.wc-block-search_button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-block-search_button svg, .wc-block-mini-cart__button .wc-block-mini-cart__icon {
	display: block;
	width: 24px;
    height: 24px;
}

.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
    margin-top: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open, .search-modal-overlay {
	padding: 2rem !important;
}
	
/* 2. The Overlay Container */
.search-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--wp--preset--color--base, #ffffff);
    z-index: 100000;
    display: none; 
    align-items: center;
    justify-content: center;
}

.search-modal-overlay.is-active {
    display: flex;
}

/* 3. The Close Button */
.wc-block-close_button {
    position: fixed;
    top: var(--wp--preset--spacing--50, 20px);
    right: var(--wp--preset--spacing--50, 20px);
    background: transparent;
    border: none;
    cursor: pointer;
    color: currentColor;
}

/* 4. Form Styling inside Overlay */
.search-modal-content {
    width: 100%;
    max-width: 600px;
}

/* Make the search input look modern */
.woocommerce-product-search {
    display: flex;
    gap: 10px;
}

.woocommerce-product-search input.search-field {
    flex-grow: 1;
    padding: 12px 16px;
    border-radius: 100px;
    font-size: 1rem;
    background-color: #f1f1f1;
    border-width: 0px;
    border-style: none;
}

.woocommerce-product-search input.search-field:hover {
	background-color: #e0e0e0;
}

.woocommerce-product-search button[type="submit"] {
    padding: 12px 24px;
    background-color: var(--wp--preset--color--contrast, #000);
    color: var(--wp--preset--color--base, #fff);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: none;
}

/* 1. Container Alignment */
.wc-block-catalog-sorting {
    display: flex;
    justify-content: flex-end; /* Keeps it on the right for desktop */
    margin-bottom: 1.5rem;
}

/* 2. Styling the Select Field */
.wc-block-catalog-sorting .orderby {
    border: 1px solid var(--wp--preset--color--contrast, #000);
    padding: 10px 35px 10px 15px;
    border-radius: 0; /* Boxy modern look to match TT5 */
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    background-color: transparent;
    
    /* Remove default arrow */
    appearance: none;
    -webkit-appearance: none;
    
    /* Custom Minimalist Arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

/* 3. Focus & Hover states */
.wc-block-catalog-sorting .orderby:hover {
    background-color: var(--wp--preset--color--contrast-2, #f5f5f5);
}

.wc-block-catalog-sorting .orderby:focus {
    outline: 2px solid var(--wp--preset--color--contrast);
    outline-offset: -1px;
}

/* 4. Mobile Responsiveness (Up to your 782px or 600px breakpoint) */
@media (max-width: 781px) {
    .wc-block-catalog-sorting {
        justify-content: stretch; /* Full width button on mobile */
    }
    
    .wc-block-catalog-sorting form,
    .wc-block-catalog-sorting .orderby {
        width: 100%; /* Makes it easier to tap on phones */
    }
}

@media (max-width: 382px) {
    .wc-block-product-template__responsive.columns-5 {
        display: grid !important;
        /* This forces exactly two columns regardless of pixel width */
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 1. Force the Desktop Menu to HIDE between 600px and 782px */
@media (max-width: 782px) {
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    /* 2. Force the Hamburger Button to SHOW between 600px and 782px */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
}

@media (min-width: 1024px) {
    .brand-triangle:before {
        width: 50%;
        --safe-edge: var(--edge-padding, 20px);
        --safe-max-width: var(--vv-grid-breakout-max-width, 1200px);
        --safe-header-height: var(--vv-header-height, 80px);

        --tw-translate-x: calc(
            (0.16666 * clamp(0px, calc(100vw - var(--safe-edge) * 2), var(--safe-max-width)) - var(--safe-header-height)) * -1
        );
        
        transform: translateX(var(--tw-translate-x));
    }
}