/* ==========================================================================
   Longxc Power — shared site styles
   Loaded after the Tailwind CDN on every page. Two jobs:
   1. Make the fixed 1280px content cap fluid so the layout uses wide screens.
   2. A small set of shared polish utilities used across pages.
   The `body` prefix raises specificity just enough to win over the Tailwind
   CDN's single-class `.max-w-container-max { max-width: 1280px }`.
   ========================================================================== */

/* --- Fluid content container ------------------------------------------- */
body .max-w-container-max {
  width: 100%;
  max-width: 1280px;
}

@media (min-width: 1536px) {
  body .max-w-container-max {
    max-width: 1440px;
  }
}

@media (min-width: 1800px) {
  body .max-w-container-max {
    max-width: 1600px;
  }
}

@media (min-width: 2200px) {
  body .max-w-container-max {
    max-width: 1800px;
  }
}

/* Give the outer margins a little more room on very wide viewports so content
   does not crowd the edges once the container grows. */
@media (min-width: 1800px) {
  body .px-margin-desktop,
  body .md\:px-margin-desktop {
    padding-left: 72px;
    padding-right: 72px;
  }
}

/* --- Motion tokens ----------------------------------------------------- */
:root {
  --lxc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for UI */
  --lxc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS drawer settle */
}

/* --- Shared interaction polish ----------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* Press feedback on every button. The `[class]` selector raises specificity
   just above Tailwind's single-class utilities so the transform is included
   in the transition (and `transition: all` / weak easings are replaced with a
   named property list on a strong ease-out curve). */
button[class] {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter;
  transition-timing-function: var(--lxc-ease-out);
  transition-duration: 200ms;
}
button[class]:active {
  transform: scale(0.97);
}

/* --- Shared nav + footer links (single-source partials) ----------------- */
.lxc-navlink {
  color: #5a4136; /* on-surface-variant */
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--lxc-ease-out, ease);
}
.lxc-navlink:hover {
  color: #a04100; /* primary */
}
.lxc-navlink[data-active] {
  color: #a04100;
  font-weight: 700;
  border-bottom-color: #a04100;
}

.footer-link {
  font-size: 14px;
  line-height: 20px;
  color: #5a4136;
  text-decoration: underline;
  transition: color 0.2s var(--lxc-ease-out, ease);
}
.footer-link:hover {
  color: #006c49; /* secondary */
}

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

/* Consistent keyboard-focus ring in the brand's energy orange. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #a04100;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Hide horizontal scrollbar on the category filter rails. */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* --- Card text clamping ------------------------------------------------
   A line-clamped paragraph must NOT also be the flex-grow element of a card.
   `flex-1` / `flex-grow` stretches the paragraph taller than its line-clamp,
   which defeats the clamp and lets `overflow: hidden` slice the next line in
   half ("upper half of the line"). Neutralise the grow so the clamp holds to
   whole lines, and push the following block (spec table / CTA / footer) to the
   card's base with `margin-top: auto` so buttons stay bottom-aligned. */
.line-clamp-2[class*='flex-1'],
.line-clamp-2[class*='flex-grow'],
.line-clamp-3[class*='flex-1'],
.line-clamp-3[class*='flex-grow'] {
  flex: 0 0 auto;
}
.line-clamp-2[class*='flex-1'] + *,
.line-clamp-2[class*='flex-grow'] + *,
.line-clamp-3[class*='flex-1'] + *,
.line-clamp-3[class*='flex-grow'] + * {
  margin-top: auto;
}

/* Fade/slide-in used for dynamically rendered cards. */
@keyframes lxc-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lxc-animate-in {
  animation: lxc-fade-in-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .lxc-animate-in {
    animation: none;
  }
}

/* Lightweight skeleton shimmer for loading states. */
.lxc-skeleton {
  position: relative;
  overflow: hidden;
  background: #e6e8ea;
}
.lxc-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: lxc-shimmer 1.4s infinite;
}
@keyframes lxc-shimmer {
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lxc-skeleton::after {
    animation: none;
  }
}

/* Mobile nav drawer (shared component injected by site.js). */
.lxc-mobile-drawer {
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lxc-mobile-drawer[hidden] {
  display: none;
}
.lxc-mobile-drawer .lxc-drawer-panel {
  transition: transform 0.32s var(--lxc-ease-drawer);
}