/* ==========================================================================
   Lacasa — glue between the legacy Tailwind build (styles.css, layers
   unwrapped) and Odoo. Everything the React app did at runtime (header
   state, drawer, modals, reveal animations, sliders, wizard selection)
   lives here. Resets use :where() so Tailwind utilities always win.
   ========================================================================== */

/* Odoo's frontend bundle sets its own body font/colour; the legacy root wins. */
:where(#wrapwrap, #wrapwrap > main, .lc-legacy) {
  font-family: var(--font-arabic);
  color: var(--color-foreground);
  background: var(--color-background);
  font-size: 16px;
  line-height: 1.5;
}
:where(#wrapwrap > main) { padding: 0; }
:where(.lc-legacy) :where(h1, h2, h3, h4, p, ul, ol, fieldset, figure) { margin: 0; padding: 0; border: 0; min-width: 0; }
:where(.lc-legacy) :where(h1, h2, h3, h4) { line-height: inherit; font-weight: inherit; font-size: inherit; color: inherit; }
:where(.lc-legacy) :where(ul, ol) { list-style: none; }
:where(.lc-legacy) :where(a) { text-decoration: none; color: inherit; }
:where(.lc-legacy) :where(a:hover, a:focus) { text-decoration: none; }
:where(.lc-legacy) :where(img, svg, video) { display: block; max-width: 100%; height: auto; vertical-align: middle; }
:where(.lc-legacy) :where(button) { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: inherit; }
:where(.lc-legacy) :where(input, select, textarea) { font: inherit; color: inherit; border-radius: 0; box-shadow: none; }
:where(.lc-legacy) :where(input, textarea)::placeholder { color: var(--color-muted-foreground); opacity: .7; }
:where(.lc-legacy) :where(select) { appearance: auto; }
/* Odoo's own helpers that bootstrap used to style (skip link, hidden nodes). */
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.d-none, [hidden] { display: none !important; }
.lc-legacy .text-destructive { color: var(--color-destructive); }
.lc-legacy .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lc-legacy .lc-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.lc-legacy .lc-prose p + p { margin-top: .75em; }
.lc-legacy .lc-article-body p { font-size: 1rem; line-height: 1.9; color: var(--color-foreground); }
@media (min-width: 768px) { .lc-legacy .lc-article-body p { font-size: 1.125rem; } }
.lc-legacy .lc-article-body h2 { font-weight: 600; font-size: 1.5rem; margin-top: 2rem; color: var(--color-foreground); }
.lc-legacy .lc-article-body a { color: var(--color-accent); text-decoration: underline; }
.lc-legacy .lc-article-body img { margin: 1.5rem 0; }
.lc-legacy .lc-article-body ul { list-style: disc; padding-inline-start: 1.5rem; }

/* Ken Burns on hero images (the legacy class had no rule in the shipped CSS). */
.lc-legacy .ken-burns { animation: lc-ken-burns 22s ease-out both; transform-origin: center; }
@keyframes lc-ken-burns { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .lc-legacy .ken-burns { animation: none; } }

/* Reveal-on-load (the React app tweened opacity/translate). */
.lc-legacy .lc-reveal { opacity: 0; transform: translateY(18px); animation: lc-reveal .9s cubic-bezier(.2,.7,.2,1) .1s forwards; }
.lc-legacy .lc-reveal--up { transform: translateY(72px); animation-duration: 1.1s; }
.lc-legacy .lc-reveal--late { animation-delay: .45s; }
@keyframes lc-reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lc-legacy .lc-reveal { animation: none; opacity: 1; transform: none; } }

/* Header: transparent + light over dark heroes while at the top of the page. */
.lc-header { transition: background-color .5s ease, backdrop-filter .5s ease; }
.lc-dark-hero .lc-header.is-top { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.lc-dark-hero .lc-header.is-top .text-foreground,
.lc-dark-hero .lc-header.is-top .text-foreground\/70,
.lc-dark-hero .lc-header.is-top .text-foreground\/80,
.lc-dark-hero .lc-header.is-top .text-muted-foreground { color: var(--color-background); }
.lc-dark-hero .lc-header.is-top .text-foreground\/70 { opacity: .78; }
.lc-dark-hero .lc-header.is-top .text-muted-foreground { opacity: .55; }
.lc-dark-hero .lc-header.is-top .border-border { border-color: color-mix(in oklab, var(--color-background) 30%, transparent); }
.lc-dark-hero .lc-header.is-top .bg-foreground { background: var(--color-background); color: var(--color-foreground); }
.lc-dark-hero .lc-header.is-top .bg-foreground:hover { background: var(--color-accent); color: var(--color-accent-foreground); }
.lc-header.is-open-nav { background: var(--color-background); }

/* Mobile drawer */
.lc-drawer { visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, visibility .3s ease, transform .3s ease; }
.lc-drawer.is-open { visibility: visible; opacity: 1; transform: none; }

/* Modals */
.lc-modal { visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s ease; }
.lc-modal.is-open { visibility: visible; opacity: 1; }
.lc-modal__dialog { transform: translateY(14px); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.lc-modal.is-open .lc-modal__dialog { transform: none; }
.lc-legacy .lc-form.is-done > :not(.lc-form__success) { display: none !important; }
.lc-legacy .lc-form.is-done > .lc-form__success { display: block !important; }
.lc-legacy .lc-form .is-invalid { border-color: var(--color-destructive); }
.lc-legacy button.is-loading .lc-btn__label { opacity: .5; }

/* Calculator */
.lc-legacy .lc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none; cursor: pointer; padding: 0; border: 0;
  background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
  background-image: linear-gradient(var(--color-primary), var(--color-primary)); background-repeat: no-repeat; background-size: var(--lc-fill, 0%) 100%; }
.lc-legacy .lc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--color-background); border: 1px solid color-mix(in oklab, var(--color-primary) 50%, transparent); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.lc-legacy .lc-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--color-background); border: 1px solid color-mix(in oklab, var(--color-primary) 50%, transparent); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.lc-legacy .lc-chip { border-color: var(--color-border); color: var(--color-muted-foreground); }
.lc-legacy .lc-chip:hover { border-color: color-mix(in oklab, var(--color-foreground) 40%, transparent); }
.lc-legacy .lc-chip.is-active { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 10%, transparent); color: var(--color-foreground); }
.lc-legacy .lc-system { border-color: var(--color-border); }
.lc-legacy .lc-system:hover { border-color: color-mix(in oklab, var(--color-foreground) 40%, transparent); }
.lc-legacy .lc-system.is-active { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 5%, transparent); }
.lc-legacy .lc-view { color: color-mix(in oklab, var(--color-foreground) 70%, transparent); }
.lc-legacy .lc-view.is-active { background: var(--color-marine-deep); color: var(--color-background); }
.lc-legacy .lc-donut { width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; transition: background .3s ease;
  background: conic-gradient(var(--color-accent) 0 var(--lc-a, 20%), var(--color-sand-deep) var(--lc-a, 20%) var(--lc-b, 20%), var(--color-marine) var(--lc-b, 20%) var(--lc-c, 100%), var(--color-chart-3) var(--lc-c, 100%) 100%); }
.lc-legacy .lc-donut__hole { width: 118px; height: 118px; border-radius: 50%; background: var(--color-background); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.lc-legacy [data-calc-toggle] svg { transition: transform .3s ease; }
.lc-legacy [data-calc-toggle][aria-expanded="false"] svg { transform: rotate(0deg); }
.lc-legacy [data-calc-toggle][aria-expanded="true"] svg { transform: rotate(180deg); }

/* Consultation wizard */
.lc-legacy .lc-wizard__step { display: none; }
.lc-legacy .lc-wizard__step.is-active { display: block; animation: lc-wiz-in .45s cubic-bezier(.2,.7,.2,1); }
@keyframes lc-wiz-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.lc-legacy .lc-option { display: block; border-color: var(--color-border); }
.lc-legacy .lc-option:hover { border-color: color-mix(in oklab, var(--color-foreground) 40%, transparent); }
.lc-legacy .lc-option:has(input:checked), .lc-legacy .lc-option.is-selected { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 6%, transparent); }
.lc-legacy .lc-wiz-tab { color: var(--color-muted-foreground); cursor: default; }
.lc-legacy .lc-wiz-tab.is-active { color: var(--color-foreground); font-weight: 500; }
.lc-legacy .lc-wiz-tab.is-done { color: var(--color-accent); cursor: pointer; }

/* Print: only the calculator matters. */
@media print {
  .lc-header, .lc-drawer, .lc-modal, footer, [data-lc-open], .lc-legacy .md\:hidden.fixed, .lc-range, [data-calc-chips], [data-calc-systems] { display: none !important; }
  .lc-legacy .lg\:col-span-7, .lc-legacy .lg\:col-span-5 { grid-column: span 12 / span 12; }
  .lc-legacy .hidden.md\:block { display: block !important; max-height: none !important; overflow: visible !important; }
}