/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/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.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
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
*/

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}
/* ===== MOBILE HEADER CUSTOMIZATION ===== */

/* Ẩn header desktop trên mobile */
@media (max-width: 782px) {
    
    /* Ẩn navigation menu desktop */
    .wp-block-navigation {
        display: none !important;
    }
    
    /* Nhưng hiển thị khi ở trong offcanvas */
    .mobile-offcanvas-content .wp-block-navigation {
        display: flex !important;
    }
    
    /* Container header */
    .wp-site-blocks header .wp-block-group__inner-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }
    
    /* Row chính */
    header .wp-block-group > .wp-block-group__inner-container > .wp-block-group {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Hamburger Menu Button */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        order: -2; /* Đưa lên đầu tiên */
        margin-right: 12px;
    }
    
    .hamburger-icon {
        width: 24px;
        height: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .hamburger-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #000;
        transition: all 0.3s ease;
    }
    
    /* Animation khi menu mở */
    .mobile-menu-toggle.active .hamburger-icon span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    
    .mobile-menu-toggle.active .hamburger-icon span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active .hamburger-icon span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    
    /* Logo - để ở giữa trái */
    .wp-block-site-logo {
        order: -1; /* Đưa lên thứ 2 */
        margin: 0 !important;
        flex: 1;
    }
    
    .wp-block-site-logo img,
    .wp-block-site-logo .custom-logo {
        max-height: 40px !important;
        width: auto !important;
    }
    
    /* Search Icon Button */
    .mobile-search-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        order: 1;
        margin-right: 8px;
    }
    
    .mobile-search-toggle svg {
        width: 20px;
        height: 20px;
    }
    
    /* Request Quote Button */
    .wp-block-button {
        order: 2; /* Đưa xuống cuối */
        margin: 0 !important;
    }
    
    .wp-block-button__link {
        padding: 10px 20px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
        border-radius: 25px !important;
    }
    
    /* Offcanvas Menu */
    .mobile-offcanvas {
        position: fixed;
        top: 0;
        width: var(--offcanvas-width, 320px);
        height: 100vh;
        background-color: var(--offcanvas-bg, #ffffff);
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
        z-index: 9999;
        overflow-y: auto;
        padding: 20px;
    }
    
    /* Position based on left/right */
    .mobile-offcanvas.position-left {
        left: 0;
        transform: translateX(-100%);
    }
    
    .mobile-offcanvas.position-right {
        right: 0;
        transform: translateX(100%);
    }
    
    .mobile-offcanvas.active {
        transform: translateX(0);
    }
    
    /* Offcanvas Content Container */
    .mobile-offcanvas-content {
        width: 100%;
    }
    
    .mobile-offcanvas-content nav {
        width: 100%;
    }
    
    /* Close button trong offcanvas */
    .mobile-offcanvas-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px 10px;
        line-height: 1;
        color: currentColor;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-offcanvas-close svg {
        width: 24px;
        height: 24px;
    }
    
    /* Menu items trong offcanvas */
    .mobile-offcanvas nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-offcanvas nav ul li {
        margin-bottom: 0;
    }
    
    .mobile-offcanvas nav ul li a {
        display: block;
        padding: 12px 15px;
        color: #000;
        text-decoration: none;
        font-size: 16px;
        border-radius: 4px;
        transition: background-color 0.2s;
    }
    
    .mobile-offcanvas nav ul li a:hover {
        background-color: #f5f5f5;
    }
    
    /* Navigation block inside offcanvas */
    .mobile-offcanvas-content .wp-block-navigation {
        width: 100%;
    }
    
    .mobile-offcanvas-content .wp-block-navigation ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-offcanvas-content .wp-block-navigation-item {
        display: block;
    }
    
    /* Overlay */
    .mobile-offcanvas-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0,0,0,0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
        z-index: 9998;
    }
    
    .mobile-offcanvas-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Search Popup */
    .mobile-search-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0,0,0,0.95);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        padding: 20px;
    }
    
    .mobile-search-popup.active {
        display: flex;
    }
    
    .mobile-search-popup .search-container {
        width: 100%;
        max-width: 500px;
        position: relative;
    }
    
    .mobile-search-popup input[type="search"] {
        width: 100%;
        padding: 15px 20px;
        font-size: 16px;
        border: none;
        border-radius: 30px;
        outline: none;
    }
    
    .mobile-search-popup .close-search {
        position: absolute;
        top: -50px;
        right: 0;
        background: none;
        border: none;
        color: #fff;
        font-size: 32px;
        cursor: pointer;
    }
    
    /* Ẩn các element desktop */
    .hide-on-mobile {
        display: none !important;
    }
    
    /* WordPress Navigation Block trong Offcanvas */
    .mobile-offcanvas-content .wp-block-navigation {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        flex-direction: column;
    }
    
    /* Responsive container - ẩn button mở khi ở trong offcanvas */
    .mobile-offcanvas-content .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
    
    /* Hiển thị responsive container content */
    .mobile-offcanvas-content .wp-block-navigation__responsive-container {
        display: block !important;
        top: 50px !important;
        left: 30px !important;
    }
    
    .mobile-offcanvas-content .wp-block-navigation__responsive-close {
        position: static !important;
    }
    
    .mobile-offcanvas-content .wp-block-navigation__responsive-dialog {
        position: static !important;
        inset: auto !important;
    }
    
    /* Ẩn nút close của navigation vì đã có nút close riêng của offcanvas */
    .mobile-offcanvas-content .wp-block-navigation__responsive-container-close {
        display: none !important;
    }
    
    /* Content của responsive navigation */
    .mobile-offcanvas-content .wp-block-navigation__responsive-container-content {
        position: static !important;
    }
    
    /* Navigation list */
    .mobile-offcanvas-content .wp-block-navigation__container {
        flex-direction: column !important;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Navigation items */
    .mobile-offcanvas-content .wp-block-navigation-item {
        display: block;
        width: 100%;
    }
    
    .mobile-offcanvas-content .wp-block-navigation-item a {
        display: block;
        padding: 12px 0 !important;
        color: inherit;
        text-decoration: none;
    }
    
    .mobile-offcanvas-content .wp-block-navigation-item a:hover {
        opacity: 0.7;
    }
    
    .mobile-offcanvas-content .wp-block-navigation-item__content {
        width: 100%;
    }
    
    /* Submenu */
    .mobile-offcanvas-content .wp-block-navigation-submenu {
        flex-direction: column !important;
    }
}

/* Desktop - giữ nguyên */
@media (min-width: 783px) {
    .mobile-menu-toggle,
    .mobile-search-toggle,
    .mobile-offcanvas,
    .mobile-offcanvas-overlay,
    .mobile-search-popup {
        display: none !important;
    }
}

/**
 * Read More Button Styles
 * Complete variations for ELEO Electric theme
 * Add to style.css or create separate file
 */

/* ============================================
   BASE READ MORE STYLES
   ============================================ */

/* Target all read more elements */
.wp-block-post-excerpt__more-link,
.more-link,
a.read-more-link,
.wp-block-read-more,
.wp-block-read-more a,
.wp-block-post-template .wp-block-read-more a {
    display: inline-block;
    padding: 0.5rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* ============================================
   PRIMARY OUTLINE STYLE (Default)
   ============================================ */

.wp-block-read-more,
.wp-block-read-more a,
.read-more-outline-primary {
    color: #FF6B35;
    background-color: transparent;
    border: 2px solid #FF6B35;
    border-radius: 6px;
}

.wp-block-read-more:hover,
.wp-block-read-more a:hover,
.read-more-outline-primary:hover {
    color: #ffffff;
    background-color: #FF6B35;
    border-color: #FF6B35;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 107, 53, 0.25);
}

.wp-block-read-more:active,
.wp-block-read-more a:active,
.read-more-outline-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.2);
}

/* ============================================
   FILLED PRIMARY STYLE
   ============================================ */

.wp-block-read-more.is-style-fill,
.wp-block-read-more.is-style-fill a,
.read-more-filled-primary {
    color: #ffffff;
    background-color: #FF6B35;
    border: 2px solid #FF6B35;
    border-radius: 6px;
}

.wp-block-read-more.is-style-fill:hover,
.wp-block-read-more.is-style-fill a:hover,
.read-more-filled-primary:hover {
    background-color: #E55A2B;
    border-color: #E55A2B;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(229, 90, 43, 0.3);
}

/* ============================================
   GHOST STYLE (Text only with underline)
   ============================================ */

.wp-block-read-more.is-style-ghost,
.wp-block-read-more.is-style-ghost a,
.read-more-ghost {
    color: #FF6B35;
    background-color: transparent;
    border: none;
    padding: 0.5rem 0;
    position: relative;
}

.wp-block-read-more.is-style-ghost::after,
.wp-block-read-more.is-style-ghost a::after,
.read-more-ghost::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #FF6B35;
    transition: width 0.3s ease;
}

.wp-block-read-more.is-style-ghost:hover::after,
.wp-block-read-more.is-style-ghost a:hover::after,
.read-more-ghost:hover::after {
    width: 100%;
}

.wp-block-read-more.is-style-ghost:hover,
.wp-block-read-more.is-style-ghost a:hover,
.read-more-ghost:hover {
    color: #E55A2B;
    transform: none;
}

/* ============================================
   ARROW STYLE (with icon)
   ============================================ */

.wp-block-read-more.is-style-arrow,
.wp-block-read-more.is-style-arrow a,
.read-more-arrow {
    color: #FF6B35;
    background-color: transparent;
    border: 2px solid #FF6B35;
    border-radius: 6px;
    padding-right: 2.5rem;
}

.wp-block-read-more.is-style-arrow::after,
.wp-block-read-more.is-style-arrow a::after,
.read-more-arrow::after {
    content: '→';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.wp-block-read-more.is-style-arrow:hover::after,
.wp-block-read-more.is-style-arrow a:hover::after,
.read-more-arrow:hover::after {
    transform: translateY(-50%) translateX(4px);
}

.wp-block-read-more.is-style-arrow:hover,
.wp-block-read-more.is-style-arrow a:hover,
.read-more-arrow:hover {
    color: #ffffff;
    background-color: #FF6B35;
}

/* ============================================
   ROUNDED STYLE (Pill shape)
   ============================================ */

.wp-block-read-more.is-style-rounded,
.wp-block-read-more.is-style-rounded a,
.read-more-rounded {
    color: #FF6B35;
    background-color: transparent;
    border: 2px solid #FF6B35;
    border-radius: 50px;
}

.wp-block-read-more.is-style-rounded:hover,
.wp-block-read-more.is-style-rounded a:hover,
.read-more-rounded:hover {
    color: #ffffff;
    background-color: #FF6B35;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 107, 53, 0.25);
}

/* ============================================
   GRADIENT STYLE
   ============================================ */

.wp-block-read-more.is-style-gradient,
.wp-block-read-more.is-style-gradient a,
.read-more-gradient {
    color: #ffffff;
    background: linear-gradient(135deg, #FF6B35 0%, #FF8F6B 100%);
    border: none;
    border-radius: 6px;
}

.wp-block-read-more.is-style-gradient:hover,
.wp-block-read-more.is-style-gradient a:hover,
.read-more-gradient:hover {
    background: linear-gradient(135deg, #E55A2B 0%, #FF6B35 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

/* ============================================
   3D STYLE (with shadow depth)
   ============================================ */

.wp-block-read-more.is-style-3d,
.wp-block-read-more.is-style-3d a,
.read-more-3d {
    color: #ffffff;
    background-color: #FF6B35;
    border: none;
    border-radius: 6px;
    box-shadow: 0 4px 0 #E55A2B;
}

.wp-block-read-more.is-style-3d:hover,
.wp-block-read-more.is-style-3d a:hover,
.read-more-3d:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #E55A2B;
}

.wp-block-read-more.is-style-3d:active,
.wp-block-read-more.is-style-3d a:active,
.read-more-3d:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* ============================================
   ACCESSIBILITY & FOCUS STATES
   ============================================ */

.wp-block-read-more:focus,
.wp-block-read-more a:focus,
.more-link:focus,
a.read-more-link:focus {
    outline: 2px solid #FF6B35;
    outline-offset: 3px;
}

/* Focus visible for keyboard navigation */
.wp-block-read-more:focus-visible,
.wp-block-read-more a:focus-visible {
    outline: 3px solid #FF6B35;
    outline-offset: 3px;
}

/* ============================================
   POST TEMPLATE / QUERY LOOP CONTEXT
   ============================================ */

.wp-block-post-template .wp-block-read-more,
.wp-block-query .wp-block-read-more {
    margin-top: 1.25rem;
}

/* Ensure read more button doesn't break layout */
.wp-block-post {
    position: relative;
}

.wp-block-post .wp-block-read-more {
    width: fit-content;
}

/* ============================================
   EXCERPT SPACING
   ============================================ */

.wp-block-post-excerpt {
    margin-bottom: 1rem;
}

.wp-block-post-excerpt__excerpt {
    margin-bottom: 1rem;
    color: #666;
    line-height: 1.7;
}

/* ============================================
   ICON VARIATIONS
   ============================================ */

/* Plus icon */
.read-more-icon-plus::before {
    content: '+';
    margin-right: 0.5rem;
    font-weight: bold;
}

/* Chevron icon */
.read-more-icon-chevron::after {
    content: '›';
    margin-left: 0.5rem;
    font-size: 1.2em;
}

/* Double arrow */
.read-more-icon-double::after {
    content: '»';
    margin-left: 0.5rem;
}

/* ============================================
   SIZE VARIATIONS
   ============================================ */

/* Small */
.wp-block-read-more.size-small,
.read-more-small {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
}

/* Medium (default) */
.wp-block-read-more.size-medium,
.read-more-medium {
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
}

/* Large */
.wp-block-read-more.size-large,
.read-more-large {
    padding: 1rem 2.25rem;
    font-size: 1.1rem;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 782px) {
    .wp-block-read-more,
    .wp-block-read-more a,
    .more-link,
    a.read-more-link {
        padding: 0.625rem 1.5rem;
        font-size: 0.875rem;
    }
    
    /* Full width on mobile if needed */
    .wp-block-read-more.mobile-full-width {
        display: block;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .wp-block-read-more,
    .wp-block-read-more a {
        padding: 0.625rem 1.25rem;
        font-size: 0.85rem;
    }
}

/* ============================================
   ANIMATION EFFECTS
   ============================================ */

/* Pulse animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 107, 53, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
    }
}

.read-more-pulse {
    animation: pulse 2s infinite;
}

/* Shine effect */
@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.read-more-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
}

.read-more-shine:hover::before {
    animation: shine 0.6s;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    .wp-block-read-more,
    .wp-block-read-more a {
        color: #FF8F6B;
        border-color: #FF8F6B;
    }
    
    .wp-block-read-more:hover,
    .wp-block-read-more a:hover {
        color: #000;
        background-color: #FF8F6B;
    }
    
}