/* ============================================================
   TISSA — tissa-fixes.css
   Compiled overrides for theme CSS + Oleada B fixes.
   Loaded AFTER main.css. Higher specificity wins.
   Last updated: 2026-04-23 (Oleada B deployment)
   ============================================================ */

/* ---- Nav dropdowns (plain CSS, not relying on Tailwind group-hover) ---- */
.tissa-dropdown {
    position: relative;
}
.tissa-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 8px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 60;
}
.tissa-dropdown:hover .tissa-dropdown__menu,
.tissa-dropdown:focus-within .tissa-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.tissa-dropdown__inner {
    background: var(--tissa-white);
    border: 1px solid var(--tissa-border);
    border-radius: 2px;
    box-shadow: 0 20px 40px -12px rgba(37,38,40,.18);
    padding: 8px 0;
}
.tissa-dropdown__inner a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--tissa-carbon);
    text-decoration: none;
    transition: background .12s;
}
.tissa-dropdown__inner a:hover {
    background: var(--tissa-offwhite);
    text-decoration: none;
}
.tissa-dropdown__chevron {
    transition: transform .18s ease;
}
.tissa-dropdown:hover .tissa-dropdown__chevron {
    transform: rotate(180deg);
}

/* Hero + portfolio images — force consistent aspect ratio + fast loading */
main img {
    content-visibility: auto;
}
main .rounded-lg[data-nimg="1"],
main img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}

/* 4C framework + Portfolio cards → equal height images */
main section img[class*="shadow-"] {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Hero right image container */
main section .hidden.md\:block img,
main section div > img[alt*="TISSA"] {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    max-height: 480px;
    width: 100%;
}

/* Portfolio cards in /work */
main a[href*="/work/"] img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Work case study page — same aspect for all 3 images */
main section.grid img,
main .grid img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Low-quality image placeholder trick via CSS blur until loaded */
main img {
    transition: filter .4s ease;
}
main img:not([src]) { filter: blur(10px); }

/* Mobile nav dropdown affordance (always open on mobile) */
@media (max-width: 768px) {
    .tissa-dropdown__menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding-top: 0;
        min-width: 0;
    }
    .tissa-dropdown__inner {
        border: 0;
        box-shadow: none;
        background: transparent;
    }
}


/* ============================================================
   FIX B-01 / F-007 / F-010 — H1/H2 italic Playfair site-wide
   Impeccable §3: H1 = Playfair Display italic 500, H2 = same.
   Scope: marketing surfaces only. Excludes .tissa-sp-h2
   (start-project modal), dashboard, portal, and login card
   internal elements that carry their own type specs.
   Decision: !important needed here because inline style
   font-family is set on each element AND Tailwind font-bold
   class sets font-weight:700 via --tw-font-weight cascade.
   ============================================================ */

/* All public marketing H1s and H2s.
 * Body class on marketing pages: .tissa-body.page (WP page type)
 * Dashboard/portal: page-dashboard.php renders its own full HTML,
 * no .tissa-body body class used there. Safe to scope to .tissa-body.
 */
.tissa-body article h1,
.tissa-body article h2 {
    font-style: italic !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
}

/* H1 greeting pattern: clamp size + tighter tracking */
.tissa-body article h1 {
    font-size: clamp(40px, 6vw, 68px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.012em !important;
}

/* H2 section: 32px desktop */
.tissa-body article h2 {
    font-size: clamp(24px, 3.5vw, 38px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.008em !important;
}

/* Login "Welcome back." — §10 vault treatment, §3 H1 pattern */
/* Actual class on login H1 is .tl-greet (see page-login.php) */
.tl-greet,
.tissa-login-card h1,
.tissa-login-card .tl-greeting {
    font-family: var(--font-playfair), Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    letter-spacing: -0.012em !important;
}

/* Preserve start-project modal headings (not marketing H2s) */
.tissa-sp-h2 {
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: 0;
}

/* H3 cards/blocks */
.tissa-body article h3 {
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.2;
}


/* ============================================================
   FIX F-025 / TECH COLOR — Strip non-canonical colors
   Impeccable §4: never introduce purple, pink, teal, indigo.
   #7d87ff (indigo-400) and #8200da (purple-700) are defined
   in Tailwind @layer theme but must not render on brand surfaces.
   Strategy: alias the Tailwind color vars to canon colors.
   - indigo-400 → --tissa-carbon (decision context)
   - purple-700 → --tissa-carbon (decision context)
   - purple-400 → --tissa-carbon-muted (secondary)
   - purple-100 → --tissa-offwhite (light bg contexts)
   These utility classes appear in dashboard status badges
   (border-l-indigo-400, border-l-purple-400). Per §4, the
   defensible canon replacement is carbon (same weight class).
   ============================================================ */
:root {
    /* Alias forbidden Tailwind palette tokens to canon values */
    --color-indigo-400: var(--tissa-carbon);          /* was #7d87ff */
    --color-purple-700: var(--tissa-carbon);          /* was #8200da */
    --color-purple-400: var(--tissa-carbon-muted);    /* was #c07eff */
    --color-purple-100: var(--tissa-offwhite);        /* was #f3e8ff */
}


/* ============================================================
   FIX F-021 / F-022 — Prohibit forbidden motion
   Impeccable §2: bounce, rubber, cartoon easing rejected.
   §6: hover — underline draw or color shift only; no scale.
   Strategy:
   - Override @keyframes bounce / pulse with no-ops (can't
     delete compiled keyframes; override to identity transform).
   - Disable animate-bounce, animate-pulse class animations
     on brand surfaces. animate-spin is preserved ONLY for
     .tissa-loader (loading spinner context).
   - Null out hover:scale and hover:-translate-y on all
     text-containing cards on marketing pages.
   ============================================================ */

/* Neutralize bounce keyframe — override to no-op */
@keyframes bounce {
    0%, 50%, 100% { transform: none; animation-timing-function: linear; }
}

/* Neutralize pulse keyframe — override to no-op */
@keyframes pulse {
    0%, 100% { opacity: 1; }
}

/* Restrict spin to .tissa-loader ONLY (loading spinner) */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Kill animate-bounce and animate-pulse on brand surfaces */
.tissa-body .animate-bounce,
.tissa-body .animate-pulse {
    animation: none !important;
}

/* animate-spin: only allow on .tissa-loader */
.animate-spin:not(.tissa-loader) {
    animation: none !important;
}
.tissa-loader {
    animation: spin 1s linear infinite !important;
}

/* Kill hover scale transforms on content cards (§6 — no scale on text) */
@media (hover: hover) {
    .tissa-body article .hover\:scale-105:hover,
    .tissa-body article .hover\:scale-\[1\.02\]:hover {
        scale: 1 !important;
        --tw-scale-x: 1 !important;
        --tw-scale-y: 1 !important;
        --tw-scale-z: 1 !important;
    }

    /* Kill upward translate on text-containing cards */
    .tissa-body article .hover\:-translate-y-1:hover,
    .tissa-body article .hover\:-translate-y-0\.5:hover {
        --tw-translate-y: 0 !important;
        translate: 0 0 !important;
    }

    /* Canon hover for content cards: shadow shift only, 200ms */
    .tissa-body article .hover\:shadow-lg:hover {
        transition-duration: 200ms !important;
        transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    /* Image-only containers (.tissa-lift) retain lift — per animations.css scope */
    a[href^="/work/"]:hover,
    .tissa-lift:hover {
        transform: translateY(-4px);
    }
}


/* ============================================================
   FIX M-04 — Cap animation durations in animations.css context
   §6: 200–400ms. Never over 600ms.
   The animations.css defines transitions at 0.8s and 1s.
   These are overridden here to 350ms max.
   ============================================================ */
.tissa-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.tissa-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger cap at 4 children, 60ms step per §6 */
.tissa-stagger > *:nth-child(1) { transition-delay: 0.06s; }
.tissa-stagger > *:nth-child(2) { transition-delay: 0.12s; }
.tissa-stagger > *:nth-child(3) { transition-delay: 0.18s; }
.tissa-stagger > *:nth-child(4) { transition-delay: 0.24s; }
.tissa-stagger > *:nth-child(5) { transition-delay: 0.24s; } /* cap */
.tissa-stagger > *:nth-child(6) { transition-delay: 0.24s; } /* cap */

/* Hero H1 reveal: cap at 400ms */
main > article:first-child h1 {
    animation: tissa-hero-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* Nav shutter: was 0.6s, cap to 280ms */
header a[href*="contact"]:last-child::after {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Gallery image scale: duration cap 200ms, no scale */
.tissa-body article section .hover\:scale-\[1\.02\] {
    transition-duration: 200ms !important;
}


/* ============================================================
   FIX M-11 — Header background: cream not white
   §2: cream dominates. Header is first element every user sees.
   ============================================================ */
header.fixed {
    background-color: rgba(251, 249, 245, 0.95) !important; /* --tissa-offwhite/95 */
}


/* ============================================================
   FIX M-01 — rounded-lg → max 2px on content cards
   §5: Never rounded > 2px on primary cards. 4–6px on inputs.
   Scope: marketing page non-input elements only.
   Dashboard/portal retain their own radius (separate CSS files).
   ============================================================ */
.tissa-body article .rounded-lg:not(input):not(textarea):not(select):not(.tissa-sp-form-field) {
    border-radius: 2px !important;
}

/* Images in marketing pages: allow small radius for visual softness only */
.tissa-body article img.rounded-lg {
    border-radius: 2px !important;
}

/* Inputs: 4px per §5 */
input.rounded-lg, textarea.rounded-lg {
    border-radius: 4px !important;
}


/* ============================================================
   FIX M-15 — Article body text: carbon, not muted
   §4: body copy = --tissa-carbon (#252628). Muted is metadata.
   ============================================================ */
.tissa-body article .prose p,
.tissa-body article p.text-\[var\(--tissa-carbon-muted\)\] {
    color: var(--tissa-carbon) !important;
}
/* Preserve muted for metadata/captions */
.tissa-body article .text-xs,
.tissa-body article .text-\[10px\],
.tissa-body article time,
.tissa-body article .byline {
    color: var(--tissa-carbon-muted);
}


/* ============================================================
   FIX L-04 — Login return link: amber hover → carbon
   §4: amber for action states only; nav hover = carbon.
   ============================================================ */
.tl-return-link:hover {
    color: var(--tissa-carbon) !important;
}


/* ============================================================
   FIX L-05 — Login shake: replace spring curve with out-expo
   §6: no spring, no bounce. Canonical: cubic-bezier(0.22,1,0.36,1)
   ============================================================ */
.tl-field.error {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* ============================================================
   FIX M-19 — Mobile nav drawer (<768px)
   §10: marketing pages need navigation at all viewports.
   §6: transform translateX, 280ms out-expo.
   Cream background, carbon text. No bounce.
   This implements a CSS-only toggle via the :checked hack
   using a hidden checkbox + label as hamburger.
   ============================================================ */

/* Hamburger toggle input (hidden) */
#tissa-mobile-nav-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Hamburger button label */
.tissa-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    z-index: 101;
    position: relative;
    background: transparent;
    border: 0;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}
.tissa-hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--tissa-carbon);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s linear;
    transform-origin: center;
}

/* Off-canvas drawer */
.tissa-mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: var(--tissa-offwhite);
    border-left: 1px solid var(--tissa-border);
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 64px 32px 32px;
    overflow-y: auto;
}

/* Drawer nav items */
.tissa-mobile-drawer nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tissa-mobile-drawer nav a {
    display: block;
    padding: 14px 0;
    font-family: var(--font-source-serif), Georgia, serif;
    font-size: 16px;
    color: var(--tissa-carbon);
    text-decoration: none;
    border-bottom: 1px solid var(--tissa-border);
    transition: color 0.2s linear;
}
.tissa-mobile-drawer nav a:hover {
    color: var(--tissa-carbon);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.tissa-mobile-drawer .tissa-drawer-cta {
    display: block;
    margin-top: 24px;
    padding: 14px 24px;
    background: var(--tissa-carbon);
    color: #fff;
    font-family: var(--font-source-serif), Georgia, serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
}

/* Close button inside drawer */
.tissa-mobile-drawer .tissa-drawer-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px;
    color: var(--tissa-carbon);
    font-size: 20px;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overlay backdrop */
.tissa-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(37, 38, 40, 0.4);
    z-index: 199;
    opacity: 0;
    transition: opacity 0.28s linear;
}

@media (max-width: 767px) {
    .tissa-hamburger {
        display: flex;
    }
    .tissa-mobile-drawer {
        display: block;
    }
    .tissa-mobile-overlay {
        display: block;
    }

    /* When toggle is checked — open state */
    #tissa-mobile-nav-toggle:checked ~ .tissa-mobile-overlay {
        opacity: 1;
        pointer-events: auto;
    }
    #tissa-mobile-nav-toggle:checked ~ .tissa-mobile-drawer {
        transform: translateX(0);
    }
    /* Animate hamburger to X */
    #tissa-mobile-nav-toggle:checked ~ header .tissa-hamburger span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }
    #tissa-mobile-nav-toggle:checked ~ header .tissa-hamburger span:nth-child(2) {
        opacity: 0;
    }
    #tissa-mobile-nav-toggle:checked ~ header .tissa-hamburger span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }
}


/* ============================================================
   FIX B-06 / M-12 / M-13 — Bruno widget overrides
   Applied here for cascade priority. See also bruno.css.
   ============================================================ */

/* Token corrections */
.tissa-bruno-root {
    --tissa-carbon: #252628;          /* was #1C1C1E */
    --tissa-cream: #FBF9F5;           /* was #FAF8F4 */
    --tissa-offwhite: #FBF9F5;
    --tissa-amber-legacy: #252628;           /* was #252628 */
    --tissa-amber-hover: #b45309;
}

/* M-13 — toggle button: circle → 4px radius (square-corner standard) */
.tissa-bruno-toggle {
    border-radius: 4px !important;
}

/* M-12 — typing indicator: disable infinite blink loop */
.tissa-bruno-typing span {
    animation: none !important;
    opacity: 0.4;
}
/* Simple single-pass fade in — not looping */
.tissa-bruno-typing span:nth-child(1) { opacity: 0.3; }
.tissa-bruno-typing span:nth-child(2) { opacity: 0.5; }
.tissa-bruno-typing span:nth-child(3) { opacity: 0.7; }


/* ============================================================
   FIX M-14 — Cookie consent: tokenize, square corners
   §5: border-radius ≤ 2px on primary components.
   ============================================================ */
#tissa-consent {
    border-radius: 2px !important;
    font-family: var(--font-source-serif), Georgia, serif !important;
    background: var(--tissa-carbon) !important;
    color: var(--tissa-offwhite) !important;
}
#tissa-consent-accept {
    border-radius: 2px !important;
    background: var(--tissa-offwhite) !important;
    color: var(--tissa-carbon) !important;
}


/* ============================================================
   FIX F-001 — "Powered by Intelligence" card grid → editorial
   The four-card AI section (Cognitive Orchestration etc.) is
   DB-stored content rendered via the_content(). We can't edit
   the HTML from here without touching the DB or using JS.
   CSS approach: visually dissolve the card grid, reformat as
   an editorial column list per §2 "Use editorial columns and
   rules" and per audit-craft F-001 fix directive.
   The cards are inside:
   section.bg-[var(--tissa-carbon)] > div > div.grid.md:grid-cols-4
   Each card: div > div.border.border-white/10.rounded-lg.p-6
   ============================================================ */

/* Target the 4-card AI grid inside the carbon section */
.tissa-body article section[class*="bg-"][class*="carbon"] .grid.gap-6:not(.md\:grid-cols-3):not(.lg\:grid-cols-3) {
    display: block !important;
    gap: 0 !important;
}

/* Dissolve card borders; reformat as editorial items with hairline rules */
.tissa-body article section[class*="bg-"][class*="carbon"] .grid > div > div[class*="border"][class*="rounded-lg"],
.tissa-body article section[class*="bg-"][class*="carbon"] div[class*="border-white\/10"] {
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;
    padding: 20px 0 !important;
    background: transparent !important;
}
.tissa-body article section[class*="bg-"][class*="carbon"] .grid > div:last-child > div[class*="border"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Card headings: Geist Mono, amber, uppercase — editorial label style */
.tissa-body article section[class*="bg-"][class*="carbon"] div[class*="border-white\/10"] h3 {
    font-family: var(--font-mono), "Courier New", monospace !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: var(--tissa-carbon) !important;
    margin-bottom: 8px !important;
}

/* Card body: Source Serif, white/70 — editorial paragraph */
.tissa-body article section[class*="bg-"][class*="carbon"] div[class*="border-white\/10"] p {
    font-family: var(--font-source-serif), Georgia, serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: rgba(251, 249, 245, 0.75) !important;
}

/* Remove hover border transitions on dissolved cards */
@media (hover: hover) {
    .tissa-body article section[class*="bg-"][class*="carbon"] div[class*="border-white\/10"]:hover {
        border-color: rgba(255, 255, 255, 0.12) !important;
        transition: none !important;
    }
}


/* ============================================================
   TISSA kicker / eyebrow — enforce Geist Mono
   §12: eyebrow labels must use font-mono, not fall back.
   ============================================================ */
.tissa-kicker,
.tissa-body article p[class*="text-xs"][class*="uppercase"][class*="tracking"] {
    font-family: var(--font-mono), "Courier New", monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
}


/* ============================================================
   Accessibility floor (§9)
   Focus rings: 2px amber outline, 2px offset on all interactive.
   Reduced-motion media query.
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--tissa-carbon);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}