/*
Theme Name: TianGuangAI.com Team
Theme URI: https://www.tianguangai.com
Author: www.TianGuangAI.com Team
Author URI: https://www.tianguangai.com
Description: A professional medical device company theme for OxyPlus, featuring premium hyperbaric chambers. Includes responsive design, custom sections for products, financing, and contact forms.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oxyplus
Tags: medical, healthcare, one-column, custom-colors, custom-logo, custom-menu, featured-images, responsive-layout
*/

/* 重置和基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: #333;
}



/* 导航栏固定 */
.nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #E6F4F9;
}

/* 清除导航菜单列表样式 */
.nav-fixed ul,
.nav-fixed li,
.mobile-nav ul,
.mobile-nav li,
.desktop-menu ul,
.desktop-menu li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* 英雄区域 - 固定 16:9 比例（使用 padding-top 技巧，兼容所有浏览器） */
.hero-section,
#heroSection {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important;  /* 9/16 = 0.5625 = 56.25% */
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden;
}

/* 视频背景 */
.hero-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    object-fit: cover;
}

/* 图片背景 */
.hero-image-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===== Hero Slideshow ===== */
.hero-slideshow {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
}

.hero-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    will-change: opacity;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Slideshow Navigation Arrows */
.hero-slideshow-nav {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    padding: 0;
}

.hero-slideshow-nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.08);
}

.hero-slideshow-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.hero-slideshow-nav svg {
    width: 24px;
    height: 24px;
}

.hero-slideshow-prev {
    left: 2rem;
}

.hero-slideshow-next {
    right: 2rem;
}

@media (max-width: 768px) {
    .hero-slideshow-nav {
        width: 40px;
        height: 40px;
    }
    .hero-slideshow-nav svg {
        width: 18px;
        height: 18px;
    }
    .hero-slideshow-prev {
        left: 1rem;
    }
    .hero-slideshow-next {
        right: 1rem;
    }
}

/* Slideshow Dots */
.hero-slideshow-dots {
    position: absolute !important;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 10px;
    align-items: center;
}

.hero-slideshow-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    padding: 0;
}

.hero-slideshow-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.hero-slideshow-dot.active {
    background: white;
    border-color: white;
    transform: scale(1.2);
}

/* Slide Counter */
.hero-slide-counter {
    position: absolute !important;
    bottom: 2.5rem;
    right: 2rem;
    z-index: 20;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0.3rem 0.8rem;
    border-radius: 1rem;
}

/* Progress Bar */
.hero-slide-progress {
    position: absolute !important;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.15);
}

.hero-slide-progress-bar {
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    width: 0%;
    transition: width 0.1s linear;
}

.hero-slide-progress-bar.running {
    transition: width 5s linear;
    width: 100%;
}

/* Pause Indicator */
.hero-pause-indicator {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 25;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.hero-pause-indicator.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.hero-pause-indicator svg {
    width: 28px;
    height: 28px;
}

/* Per-Slide Explore Button - 基础样式，JS强制覆盖定位和布局 */
.hero-slide-btn {
    transition: all 0.3s ease;
}

.hero-slide-btn::after {
    content: none;
}

.hero-slide-btn:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: white;
}

/* CTA Buttons - 所有定位和布局由JS强制设置，CSS仅保留hover */

/* 视频遮罩层 */
.hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(rgba(30, 155, 255, 0.3), rgba(30, 155, 255, 0.4));
    z-index: 2;
    pointer-events: none;
}

/* Hero 内容居中 */
.hero-content-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.hero-content-inner {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

@media (min-width: 640px) {
    .hero-content-inner {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .hero-content-inner {
        padding: 0 2rem;
    }
}

/* 天蓝色背景区 - 已修改为 #d5feff，文字改为黑色 */
.brand-section {
    background: #d5feff;
    color: #000;
}

/* 地球背景 - 已修改为 #d5feff，文字改为黑色 */
.impact-section {
    background: #d5feff;
    color: #000;
    position: relative;
}

/* 金融背景 */
.finance-section {
    background: linear-gradient(rgba(30, 155, 255, 0.85), rgba(30, 155, 255, 0.9)),
                url('images/finance-bg.jpg') center/cover;
    color: white;
}

/* 按钮悬停效果 */
.btn-primary {
    background: linear-gradient(135deg, #1E9BFF 0%, #1E9BFF 100%);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(30, 155, 255, 0.3);
}

.btn-black {
    background: #1E9BFF;
    transition: all 0.3s ease;
}

.btn-black:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(30, 155, 255, 0.4);
}

/* 卡片悬停 */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* 响应式菜单 */
.mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .desktop-menu {
        display: none;
    }
    .mobile-menu {
        display: block;
    }
    .mobile-nav {
        display: none;
    }
    .mobile-nav.active {
        display: flex;
    }
}

/* 输入框样式 */
input, textarea, select {
    transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #1E9BFF;
    box-shadow: 0 0 0 3px rgba(30, 155, 255, 0.1);
}

/* 轮播按钮 */
.carousel-btn {
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* WordPress特定样式 */
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

.gallery {
    margin-bottom: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-caption {
    display: block;
}

/* ===== External Logo Styles ===== */
/* Header external logo */
.header-external-logo {
    display: inline-block;
    line-height: 1;
}

.header-external-logo img {
    display: block;
    width: 200px !important;
    height: 50px !important;
    max-width: 200px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    content-visibility: auto;
}

/* Footer external logo */
.footer-external-logo {
    display: inline-block;
    line-height: 1;
    margin-bottom: 1rem;
}

.footer-external-logo img {
    display: block;
    width: 200px !important;
    height: 50px !important;
    max-width: 200px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* Responsive: scale down logo on small screens */
@media (max-width: 480px) {
    .header-external-logo img,
    .footer-external-logo img {
        width: 160px !important;
        height: 40px !important;
        max-width: 160px !important;
        max-height: 40px !important;
    }
}

/* ===== Footer Social Media Icons ===== */
.footer-social-icons {
    flex-wrap: wrap;
}

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.footer-social-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ===== Product Horizontal Scroll ===== */
.product-carousel-outer {
    position: relative;
}

.product-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
}

.product-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.product-scroll-track {
    display: flex;
    gap: 24px;
    padding-right: 16px;
}

.product-scroll-item {
    flex: 0 0 calc(100% - 0px);
    max-width: calc(100% - 0px);
    scroll-snap-align: start;
}

/* Desktop / Tablet: 2 items per row */
@media (min-width: 768px) {
    .product-scroll-item {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

/* Nav Buttons */
.product-carousel-nav-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(30, 155, 255, 0.2);
    color: #1E9BFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-carousel-nav-btn:hover {
    background: #1E9BFF;
    color: #fff;
    border-color: #1E9BFF;
    box-shadow: 0 4px 14px rgba(30, 155, 255, 0.35);
}

.product-carousel-prev {
    left: -6px;
}

.product-carousel-next {
    right: -6px;
}

@media (max-width: 767px) {
    .product-carousel-nav-btn {
        width: 36px;
        height: 36px;
    }
    .product-carousel-prev {
        left: -2px;
    }
    .product-carousel-next {
        right: -2px;
    }
}

/* ===== Single Post - 文章内容宽度与上下区块一致 ===== */

/* 覆盖 WordPress 块编辑器 CSS 变量 */
.oxyplus-prose {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
    --wp--style--global--content-size: 100% !important;
    --wp--style--global--wide-size: 100% !important;
    --wp--style--content-size: 100% !important;
    --wp--style--wide-size: 100% !important;
}

/* 强制所有子元素宽度100%，不超出容器 */
.oxyplus-prose > * {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 覆盖 WordPress 块编辑器所有布局容器和块的宽度限制 */
.oxyplus-prose .entry-content,
.oxyplus-prose [class*="wp-block-"],
.oxyplus-prose .wp-block-group,
.oxyplus-prose .wp-block-group__inner-container,
.oxyplus-prose .wp-block-columns,
.oxyplus-prose .wp-block-column,
.oxyplus-prose .wp-block-media-text,
.oxyplus-prose .wp-block-cover,
.oxyplus-prose .wp-block-image,
.oxyplus-prose .wp-block-paragraph,
.oxyplus-prose .wp-block-heading,
.oxyplus-prose .wp-block-list,
.oxyplus-prose .wp-block-quote,
.oxyplus-prose .wp-block-pullquote,
.oxyplus-prose .wp-block-table,
.oxyplus-prose .wp-block-embed,
.oxyplus-prose .wp-block-video,
.oxyplus-prose .alignwide,
.oxyplus-prose .alignfull,
.oxyplus-prose .is-layout-constrained,
.oxyplus-prose .is-layout-flow,
.oxyplus-prose .is-content-justification-left,
.oxyplus-prose .is-content-justification-center,
.oxyplus-prose .is-content-justification-right,
.oxyplus-prose .wp-container-core-group,
.oxyplus-prose [class*="wp-container-"],
.oxyplus-prose [style*="max-width"],
.oxyplus-prose [style*="width"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Prose 排版样式 */
.oxyplus-prose h1 {
    word-break: break-word;
}
.oxyplus-prose h2 {
    word-break: break-word;
}
.oxyplus-prose h3 {
    word-break: break-word;
}
.oxyplus-prose h4 {
    word-break: break-word;
}
.oxyplus-prose p {
    overflow-wrap: break-word;
    word-break: break-word;
}
.oxyplus-prose li {
    overflow-wrap: break-word;
    word-break: break-word;
}
.oxyplus-prose a {
    overflow-wrap: break-word;
    word-break: break-all;
}
.oxyplus-prose blockquote {
    overflow-wrap: break-word;
    word-break: break-word;
}
.oxyplus-prose img {
    max-width: 100% !important;
    height: auto !important;
}
.oxyplus-prose figure {
    max-width: 100% !important;
}
.oxyplus-prose code {
    overflow-wrap: break-word;
    word-break: break-all;
}
.oxyplus-prose pre {
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
}
.oxyplus-prose pre code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}
.oxyplus-prose table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
}
.oxyplus-prose iframe,
.oxyplus-prose embed,
.oxyplus-prose object,
.oxyplus-prose video {
    max-width: 100% !important;
    height: auto !important;
}