/*
Theme Name:     Casa Cumulus Portfolio
Theme URI:      https://example.com
Description:    A bold, minimal child theme for designers and architects. International orange background with yellow Helvetica italic typography, animated slash field, and Elementor-native page editing throughout. Built on Hello Elementor.
Author:         Your Studio
Author URI:     https://example.com
Template:       hello-elementor
Version:        1.0.1
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    casa-cumulus-portfolio
Tags:           portfolio, minimal, bold, elementor, dark
*/

/* ============================================================
   ROOT VARIABLES
   The palette and type lives here. Change a value, the entire
   site updates. Elementor's Global Colors point to these.
   ============================================================ */
:root {
    --cc-background:      #FF4F00;   /* International orange */
    --cc-voice:           #FFC900;   /* Yellow — sampled from logo */
    --cc-touch:           #1F1F1F;   /* Dark gray — interactive */
    --cc-touch-04:        rgba(31, 31, 31, 0.04);
    --cc-touch-55:        rgba(31, 31, 31, 0.55);
    --cc-touch-72:        rgba(31, 31, 31, 0.72);

    --cc-font:            "Helvetica Neue", Helvetica, Arial, sans-serif;
    --cc-font-weight:     700;
    --cc-font-style:      italic;
}

/* ============================================================
   GLOBAL FOUNDATION
   Background uses !important + multiple selectors to win
   the cascade fight with Hello Elementor + Elementor's Kit CSS,
   which inject body backgrounds with high specificity.
   ============================================================ */
html {
    background-color: var(--cc-background) !important;
}
body,
body.elementor-default,
body[class*="elementor-kit-"] {
    background-color: var(--cc-background) !important;
    color: var(--cc-touch);
    font-family: var(--cc-font);
    font-weight: var(--cc-font-weight);
    font-style: var(--cc-font-style);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
}

/* Ensure Elementor sections layer above the canvas */
.elementor-section,
.elementor-element,
.elementor-container,
.elementor-widget-wrap {
    position: relative;
    z-index: 1;
}

/* The slash canvas, fixed to the viewport, drawn behind everything */
#cc-slash-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    pointer-events: none;
    z-index: 0;
}

/* Cursor-following thumbnail (Selected Works rows) */
#cc-cursor-thumb {
    position: fixed;
    width: 200px;
    height: 200px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 9999;
    border-radius: 4px;
    overflow: hidden;
    left: 0;
    top: 0;
    will-change: transform;
    background-color: var(--cc-touch);
}
#cc-cursor-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   WORK ROW HOVER STATES (Selected Works page)
   Applied via the .work-row-link class on Elementor Inner Section
   or Container. Both inverts colors and shows hover background.
   ============================================================ */
.work-row-link {
    cursor: pointer;
    transition: background-color 0.18s ease;
    position: relative;
}
.work-row-link:hover {
    background-color: var(--cc-touch-04);
}
.work-row-link .elementor-heading-title {
    transition: color 0.18s ease;
}
/* Title (middle column): yellow → dark gray on hover */
.work-row-link:hover .elementor-column:nth-child(2) .elementor-heading-title {
    color: var(--cc-touch) !important;
}
/* Number (first column): dark gray → yellow on hover */
.work-row-link:hover .elementor-column:first-child .elementor-heading-title {
    color: var(--cc-voice) !important;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .work-row-link,
    .work-row-link * {
        transition: none !important;
    }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    #cc-slash-canvas,
    #cc-cursor-thumb {
        display: none;
    }
    body { background: #fff; color: #000; }
}

/* ============================================================
   ADMIN BAR FIX
   WordPress's admin bar can push body content down; ensure the
   fixed canvas still covers the viewport.
   ============================================================ */
body.admin-bar #cc-slash-canvas {
    top: 32px;
    height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar #cc-slash-canvas {
        top: 46px;
        height: calc(100vh - 46px);
    }
}