/**
 * Cinematic Wrap — Custom Post Type Frontend Styles (Light Edition)
 *
 * Visual thesis: Every custom Tesla wrap is cinema. The page is the theater.
 * Director / Film language: Denis Villeneuve × Blade Runner 2049 — daytime edit.
 * Palette moved to warm film-paper light mode (Drive poster daytime / Ford v Ferrari sunlit garage).
 *
 * @package Uni_Paint_Simulator
 * @since 2.1.0
 */

/* -----------------------------------------------------------
 * Fonts
 * ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&family=Inter+Tight:wght@700;800;900&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');

/* -----------------------------------------------------------
 * Tokens — Light editorial / film-paper
 * ----------------------------------------------------------- */
:root {
    /* Surfaces (warm off-white, film stock) */
    --cw-void: #F7F5F0;
    --cw-carbon: #EDEAE3;
    --cw-smoke: #E0DCD3;
    --cw-divider: rgba(20, 20, 22, 0.10);
    --cw-divider-strong: rgba(20, 20, 22, 0.22);

    /* Text — inverted for light */
    --cw-bone: #141416;
    --cw-ash: #5C5C60;
    --cw-mute: #9B9B9F;

    /* Accent */
    --cw-blood: #E31937;
    --cw-blood-dim: rgba(227, 25, 55, 0.65);
    --cw-ember: #C2410C;
    --cw-ember-haze: rgba(194, 65, 12, 0.12);

    /* Atmospheric layers — warm sepia wash */
    --cw-fog: radial-gradient(ellipse 80% 60% at 50% 5%, rgba(194, 65, 12, 0.05), transparent 60%);
    --cw-fog-strong: radial-gradient(ellipse 100% 80% at 30% 0%, rgba(194, 65, 12, 0.08), transparent 55%);
    --cw-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

    /* Typography */
    --cw-ff-display: 'Inter Tight', 'Noto Sans TC', system-ui, sans-serif;
    --cw-ff-body: 'Inter', 'Noto Sans TC', system-ui, sans-serif;
    --cw-ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Scale — CJK-safe ceilings */
    --cw-hero: clamp(2.25rem, 6.5vw, 5.25rem);
    --cw-display: clamp(1.75rem, 4vw, 3.25rem);
    --cw-title: clamp(1.25rem, 2.4vw, 1.85rem);
    --cw-body: 1rem;
    --cw-caption: 0.82rem;
    --cw-label: 0.7rem;

    /* Rhythm */
    --cw-frame-max: 1440px;
    --cw-edge: clamp(1rem, 4vw, 3rem);
    --cw-bar-height: 44px;
}

/* -----------------------------------------------------------
 * Base reset inside CPT pages
 * ----------------------------------------------------------- */
body.single-uni_custom_wrap,
body.post-type-archive-uni_custom_wrap,
body.tax-wrap_vehicle {
    background: var(--cw-void);
    color: var(--cw-bone);
}

/* -----------------------------------------------------------
 * Theme container breakthrough — SURGICAL
 *
 * IMPORTANT: do NOT target `.container`, `main`, `.site-main` directly —
 * those are used inside the header/footer and would break the global layout.
 * Only target WoodMart's content-specific wrappers and post-level wrappers.
 * ----------------------------------------------------------- */
body.single-uni_custom_wrap .wd-page-content,
body.single-uni_custom_wrap .main-page-wrapper,
body.single-uni_custom_wrap .wd-content-layout,
body.single-uni_custom_wrap article.type-uni_custom_wrap,
body.single-uni_custom_wrap article.post.type-uni_custom_wrap,
body.single-uni_custom_wrap .entry-content,
body.post-type-archive-uni_custom_wrap .wd-page-content,
body.post-type-archive-uni_custom_wrap .main-page-wrapper,
body.post-type-archive-uni_custom_wrap .wd-content-layout,
body.tax-wrap_vehicle .wd-page-content,
body.tax-wrap_vehicle .main-page-wrapper,
body.tax-wrap_vehicle .wd-content-layout {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hide theme sidebars + widgets on CPT pages */
body.single-uni_custom_wrap .wd-sidebar,
body.single-uni_custom_wrap .sidebar-container.wd-sidebar,
body.post-type-archive-uni_custom_wrap .wd-sidebar,
body.post-type-archive-uni_custom_wrap .sidebar-container.wd-sidebar,
body.tax-wrap_vehicle .wd-sidebar,
body.tax-wrap_vehicle .sidebar-container.wd-sidebar {
    display: none !important;
}

/* Hide theme's duplicate post title / meta */
body.single-uni_custom_wrap > .main-page-wrapper > .wd-page-content .entry-header,
body.single-uni_custom_wrap article.type-uni_custom_wrap > .entry-header,
body.single-uni_custom_wrap article.type-uni_custom_wrap > header.entry-header,
body.single-uni_custom_wrap article.type-uni_custom_wrap > .post-header,
body.single-uni_custom_wrap article.type-uni_custom_wrap > .entry-meta {
    display: none !important;
}

.cw-root,
.cw-root * {
    box-sizing: border-box;
}

.cw-root {
    font-family: var(--cw-ff-body);
    font-weight: 400;
    color: var(--cw-bone);
    background: var(--cw-void);
    min-height: 60vh;
    position: relative;
    letter-spacing: 0.01em;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* CJK-safe defaults */
    word-break: normal;
    overflow-wrap: anywhere;
    /* Full-bleed: break out of any narrow theme container */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    overflow-x: hidden;
    /* Inner containers handle their own centering */
    box-sizing: border-box;
}

.cw-root::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--cw-fog);
    pointer-events: none;
    z-index: 0;
}

.cw-root > * {
    position: relative;
    z-index: 1;
}

/* -----------------------------------------------------------
 * Typography primitives
 * ----------------------------------------------------------- */
.cw-root .cw-kicker {
    font-family: var(--cw-ff-mono);
    font-size: var(--cw-label);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cw-ember);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}

.cw-root .cw-kicker::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--cw-ember);
    opacity: 0.7;
    flex-shrink: 0;
}

.cw-root .cw-frameno {
    font-family: var(--cw-ff-mono);
    font-size: var(--cw-label);
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--cw-ash);
}

.cw-root .cw-hero-type {
    font-family: var(--cw-ff-display);
    font-weight: 900;
    font-size: var(--cw-hero);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--cw-bone);
    margin: 0;
    text-wrap: balance;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
}

/* CJK is wider; reduce line-height-compensated negative tracking that clips glyphs */
.cw-root .cw-hero-type:lang(zh),
.cw-root .cw-hero-type:lang(zh-TW) {
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.cw-root .cw-display-type {
    font-family: var(--cw-ff-display);
    font-weight: 800;
    font-size: var(--cw-display);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--cw-bone);
    margin: 0;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.cw-root .cw-title-type {
    font-family: var(--cw-ff-display);
    font-weight: 700;
    font-size: var(--cw-title);
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--cw-bone);
    margin: 0;
    overflow-wrap: anywhere;
}

.cw-root .cw-meta {
    font-family: var(--cw-ff-mono);
    font-size: var(--cw-caption);
    letter-spacing: 0.08em;
    color: var(--cw-ash);
}

/* -----------------------------------------------------------
 * Letterbox cine bars
 * ----------------------------------------------------------- */
.cw-root .cw-cinebar {
    height: var(--cw-bar-height);
    background: var(--cw-bone);
    color: var(--cw-void);
    border-bottom: 1px solid var(--cw-bone);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--cw-edge);
    font-family: var(--cw-ff-mono);
    font-size: var(--cw-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    gap: 1rem;
}

.cw-root .cw-cinebar > span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.cw-root .cw-cinebar--bottom {
    border-bottom: 0;
    border-top: 1px solid var(--cw-bone);
}

.cw-root .cw-cinebar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cw-blood);
    box-shadow: 0 0 12px var(--cw-blood);
    animation: cw-blink 2.4s ease-in-out infinite;
    display: inline-block;
    flex-shrink: 0;
}

@keyframes cw-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* -----------------------------------------------------------
 * Theme overrides — strip rounded/shadowed defaults on buttons/links
 * ----------------------------------------------------------- */
.cw-root button,
.cw-root .cw-btn,
.cw-root .cw-filter,
.cw-root .cw-reel-icon,
.cw-root .cw-reel-page,
.cw-root .cw-archive-cell-view,
.cw-root .cw-portrait-like-btn,
.cw-root .cw-portrait-download-btn,
.cw-root .cw-portrait-share-btn,
.cw-root .cw-portrait-vehicle {
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.cw-root a {
    text-decoration: none;
}

/* -----------------------------------------------------------
 * Filter pills — overrides theme CSS that collapses inline spans
 * ----------------------------------------------------------- */
.cw-root .cw-filter {
    text-decoration: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.55rem !important;
    padding: 0.7rem 1rem !important;
    border: 1px solid var(--cw-divider-strong) !important;
    color: var(--cw-ash) !important;
    background: transparent !important;
    font-family: var(--cw-ff-mono) !important;
    font-size: var(--cw-label) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.cw-root .cw-filter:hover {
    border-color: var(--cw-bone) !important;
    color: var(--cw-bone) !important;
    background: transparent !important;
}

.cw-root .cw-filter.is-active {
    background: var(--cw-bone) !important;
    color: var(--cw-void) !important;
    border-color: var(--cw-bone) !important;
}

.cw-root .cw-filter.is-active .cw-filter-no {
    color: var(--cw-blood) !important;
}

.cw-root .cw-filter > span,
.cw-root .cw-filter .cw-filter-no,
.cw-root .cw-filter .cw-filter-label,
.cw-root .cw-filter .cw-filter-count {
    display: inline !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.cw-root .cw-filter .cw-filter-no {
    color: var(--cw-ember) !important;
    font-weight: 600 !important;
}

.cw-root .cw-filter .cw-filter-count {
    opacity: 0.55 !important;
    padding-left: 0.5rem !important;
    margin-left: 0.2rem !important;
    border-left: 1px solid currentColor !important;
    font-size: 0.65rem !important;
}

/* -----------------------------------------------------------
 * Buttons (cine-strip style)
 * ----------------------------------------------------------- */
.cw-root .cw-btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.4rem;
    font-family: var(--cw-ff-mono);
    font-size: var(--cw-caption);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cw-bone);
    background: transparent;
    border: 1px solid var(--cw-divider-strong);
    cursor: pointer;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    position: relative;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1;
}

.cw-root .cw-btn:hover {
    color: var(--cw-void);
    background: var(--cw-bone);
    border-color: var(--cw-bone);
}

.cw-root .cw-btn--primary {
    background: var(--cw-blood);
    border-color: var(--cw-blood);
    color: #fff;
}

.cw-root .cw-btn--primary:hover {
    background: var(--cw-bone);
    color: var(--cw-blood);
    border-color: var(--cw-bone);
}

.cw-root .cw-btn--ghost {
    border-color: var(--cw-divider-strong);
    color: var(--cw-ash);
}

.cw-root .cw-btn--ghost:hover {
    color: var(--cw-void);
    background: var(--cw-bone);
    border-color: var(--cw-bone);
}

.cw-root .cw-btn--small {
    padding: 0.55rem 1rem;
    font-size: var(--cw-label);
}

.cw-root .cw-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.cw-root .cw-btn .cw-btn-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.cw-root .cw-btn:hover .cw-btn-arrow {
    transform: translateX(4px);
}

/* -----------------------------------------------------------
 * Reveal / entrance primitives
 * ----------------------------------------------------------- */
.cw-root .cw-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.cw-root .cw-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

.cw-root .cw-reveal--left { transform: translateX(-32px); }
.cw-root .cw-reveal--left.is-in { transform: translateX(0); }

.cw-root .cw-reveal--scale { transform: scale(0.96); }
.cw-root .cw-reveal--scale.is-in { transform: scale(1); }

.cw-root .cw-reveal--letterbox {
    clip-path: inset(50% 0 50% 0);
    opacity: 1;
    transform: none;
    transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.cw-root .cw-reveal--letterbox.is-in {
    clip-path: inset(0 0 0 0);
}

.cw-root .cw-reveal[style*="--cw-delay"] { transition-delay: var(--cw-delay); }

/* -----------------------------------------------------------
 * TOC plugin guards — hide injected TOC inside CPT pages
 * Common selectors from Easy TOC / Table of Contents Plus / LuckyWP etc.
 * ----------------------------------------------------------- */
body.single-uni_custom_wrap .ez-toc-container,
body.single-uni_custom_wrap #ez-toc-container,
body.single-uni_custom_wrap .ez-toc,
body.single-uni_custom_wrap #toc_container,
body.single-uni_custom_wrap .toc_container,
body.single-uni_custom_wrap .wp-block-luckywp-tableofcontents,
body.single-uni_custom_wrap .lwptoc,
body.post-type-archive-uni_custom_wrap .ez-toc-container,
body.post-type-archive-uni_custom_wrap #ez-toc-container,
body.post-type-archive-uni_custom_wrap #toc_container,
body.tax-wrap_vehicle .ez-toc-container,
body.tax-wrap_vehicle #toc_container {
    display: none !important;
}

/* Responsive helpers */
@media (prefers-reduced-motion: reduce) {
    .cw-root .cw-reveal,
    .cw-root .cw-reveal--letterbox,
    .cw-root .cw-cinebar-dot {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* Accessible focus ring */
.cw-root :focus-visible {
    outline: 2px solid var(--cw-ember);
    outline-offset: 3px;
}

/* -----------------------------------------------------------
 * Safety — keep theme's header/footer readable when bleed-light bg
 * ----------------------------------------------------------- */
body.single-uni_custom_wrap .site-header,
body.post-type-archive-uni_custom_wrap .site-header,
body.tax-wrap_vehicle .site-header { background: var(--cw-void); }