/* ============================================================================
 * catalog.css — Hedron Global brand layer (loaded AFTER compiled tailwind.css)
 * ----------------------------------------------------------------------------
 * Combines the design bundle's brand layer (fonts, RTL, placeholder, table,
 * skeleton, focus ring, lang-fallback indicator) with prior responsive-class
 * overrides, filter drawer, and type-ahead utilities used in the app.
 *
 * Palette: hedron-red via var(--color-hedron-*). Originally ember-orange in
 * the design bundle; renamed to match the class names used in pages-bundle.js.
 * ========================================================================== */

/* ── Per-language font application ───────────────────────────────────────── */
:lang(fa), [dir="rtl"] {
  font-family: var(--font-arabic);
  line-height: 1.7;
}
:lang(fa) .font-display,
[dir="rtl"] .font-display {
  font-family: var(--font-arabic);
  font-weight: 600;
}
:lang(fa) .font-mono,
[dir="rtl"] .font-mono {
  font-family: var(--font-mono);
}

/* ── RTL chevron/arrow flip utility ──────────────────────────────────────── */
.rtl-flip { transform: none; }
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* ── Keep codes, numbers, units LTR even in RTL ──────────────────────────── */
.ltr-num, [dir="rtl"] .ltr-num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ── Trilingual content-fallback indicator ───────────────────────────────── */
.lang-fallback {
  position: relative;
  border-bottom: 1px dashed var(--color-graphite-400);
  cursor: help;
  text-decoration: none;
  opacity: 0.95;
  transition: opacity 0.15s ease;
}
.lang-fallback:hover { opacity: 1; }
.lang-fallback::after {
  content: attr(data-fallback-lang);
  position: absolute;
  top: -0.6rem; inset-inline-end: -0.6rem;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 4px;
  background: var(--color-graphite-50);
  color: var(--color-graphite-700);
  border: 1px solid var(--color-graphite-200);
  border-radius: 2px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Placeholder tile (SVG category glyph on neutral) ───────────────────── */
.hg-placeholder {
  background:
    linear-gradient(135deg, rgba(61,57,52,0.06), rgba(17,17,16,0.02)),
    repeating-linear-gradient(
      45deg,
      var(--color-surface-muted) 0 2px,
      var(--color-surface) 2px 8px
    );
  color: var(--color-graphite-400);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.hg-placeholder__code {
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-start: 0.5rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--color-graphite-200);
  border-radius: 2px;
  color: var(--color-graphite-700);
}

/* ── Table: sticky header + subtle row gap (no hard borders) ─────────────── */
.hg-table {
  border-collapse: separate;
  border-spacing: 0 6px;
}
.hg-table thead th {
  position: sticky; top: 0;
  background: var(--color-graphite-100);
  z-index: 2;
}
.hg-table tbody tr {
  background: var(--color-surface-raised);
}
.hg-table tbody tr:hover { background: var(--color-surface-muted); }
.hg-table td, .hg-table th {
  padding: 12px 14px;
  font-size: 13px;
  text-align: start;
}
.hg-table th {
  font-weight: 600;
  color: var(--color-graphite-700);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
}
.hg-table .num,
.hg-table .col-num { text-align: end; font-variant-numeric: tabular-nums; }

/* ── Skeleton shimmer ───────────────────────────────────────────────────── */
@keyframes hg-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.hg-skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-muted) 0%,
    var(--color-surface-sunken) 50%,
    var(--color-surface-muted) 100%);
  background-size: 200% 100%;
  animation: hg-shimmer 1.4s linear infinite;
  border-radius: 3px;
}

/* ── Focus ring (never invisible, never garish) ─────────────────────────── */
.hg-focus:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-hedron-400);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Subtle border for auto-propagated matrix links (Desk editor only).
   Star/icon badge intentionally removed from public site. */
.matrix-card--auto {
  border-color: rgba(148, 163, 184, 0.6);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18),
              0 1px 4px 0 rgba(96, 165, 250, 0.10);
}

/* ── Tailwind v4 @layer cascade fix for <a> elements ───────────────────── */
/* Frappe's Bootstrap CSS sets `a { background-color: transparent }` outside
   any @layer. Un-layered styles always beat @layer utilities in the CSS
   cascade, so Tailwind bg- and text- classes silently fail on links. Fix
   with !important on the specific accent utilities used on <a> elements. */
a.bg-hedron-500  { background-color: var(--color-hedron-500) !important; }
a.bg-hedron-600  { background-color: var(--color-hedron-600) !important; }
a.bg-hedron-50   { background-color: var(--color-hedron-50)  !important; }
a.bg-graphite-900 { background-color: var(--color-graphite-900) !important; }
a.bg-white       { background-color: #fff !important; }
a.bg-surface     { background-color: var(--color-surface) !important; }
a.hover\:bg-hedron-600:hover { background-color: var(--color-hedron-600) !important; }
a.hover\:bg-hedron-500:hover { background-color: var(--color-hedron-500) !important; }

/* Frappe's website.bundle.css ALSO sets `a { color: rgb(23,23,23) }` un-layered.
   On dark backgrounds (footer, hero buttons, navbar mega-menu) Tailwind text
   utilities silently lose. Override the colors actually used on <a> elements. */
a.text-white         { color: #fff !important; }
a.text-surface       { color: var(--color-surface) !important; }
a.text-graphite-200  { color: var(--color-graphite-200) !important; }
a.text-graphite-300  { color: var(--color-graphite-300) !important; }
a.text-graphite-400  { color: var(--color-graphite-400) !important; }
a.text-graphite-500  { color: var(--color-graphite-500) !important; }
a.text-graphite-600  { color: var(--color-graphite-600) !important; }
a.text-graphite-700  { color: var(--color-graphite-700) !important; }
a.text-graphite-800  { color: var(--color-graphite-800) !important; }
a.text-graphite-900  { color: var(--color-graphite-900) !important; }
a.text-graphite-950  { color: var(--color-graphite-950) !important; }
a.text-hedron-500    { color: var(--color-hedron-500)   !important; }
a.text-hedron-600    { color: var(--color-hedron-600)   !important; }
a.text-hedron-700    { color: var(--color-hedron-700)   !important; }
a.text-white\/60     { color: rgba(255,255,255,0.6)     !important; }
a.text-white\/70     { color: rgba(255,255,255,0.7)     !important; }
a.text-white\/80     { color: rgba(255,255,255,0.8)     !important; }
a.text-white\/90     { color: rgba(255,255,255,0.9)     !important; }
a.hover\:text-white:hover         { color: #fff !important; }
a.hover\:text-graphite-900:hover  { color: var(--color-graphite-900) !important; }
a.hover\:text-graphite-950:hover  { color: var(--color-graphite-950) !important; }
a.hover\:text-hedron-600:hover    { color: var(--color-hedron-600)   !important; }
a.hover\:text-hedron-700:hover    { color: var(--color-hedron-700)   !important; }
a.hover\:text-white\/80:hover     { color: rgba(255,255,255,0.8)     !important; }

/* Same issue hits md:inline-flex on <a>; must be media-scoped or else it
   forces the desktop CTA visible on mobile and causes horizontal overflow. */
@media (min-width: 48rem) {  /* md */
  a.md\:inline-flex { display: inline-flex !important; }
}

/* Frappe's legacy CSS sets `h1..h6 { color: rgb(23,23,23) }` un-layered, so
   Tailwind v4 utility classes lose the cascade on heading colors (same
   pattern as the <a> overrides above). Body-prefixed !important wins. */
body :is(h1,h2,h3,h4,h5,h6).text-white         { color: #fff !important; }
body :is(h1,h2,h3,h4,h5,h6).text-hedron-500    { color: var(--color-hedron-500) !important; }
body :is(h1,h2,h3,h4,h5,h6).text-graphite-900  { color: var(--color-graphite-900) !important; }

/* Carousel stage sizing — Tailwind v4 `:where()` min-height utilities lose the
   cascade against Frappe's un-layered base CSS, so we set the minimum here as a
   regular un-layered rule. On phones, 75vw gives ≈4:3 landscape framing at any
   width (293px on a 390px iPhone). The 440px floor is restored at sm (640px)
   where it already reads as landscape (0.69:1), so stacked slide layouts
   (Design A, C-Red, C-Dark) always have room. On desktop a 3:1 aspect ratio
   gives a wide cinematic frame; the carousel's max content width is ~1312px so
   3:1 wants ~437px — the 440px floor governs in practice. */
.hg-stage { min-height: 75vw; }
@media (min-width: 640px) {
  .hg-stage { min-height: 440px; }
}
@media (min-width: 1024px) {
  .hg-stage { aspect-ratio: 3 / 1; }
}

/* Library / References listing row grids — defined here as named classes (not
   Tailwind arbitrary `grid-cols-[…]` values) so column-count changes never
   require a tailwind.css rebuild. Mobile = 3-col stack; md+ = full row. The
   class sets only the column template; display is left to `grid` / `md:grid`
   utilities so the header row's `hidden md:grid` still hides on mobile. */
.hg-lib-row { grid-template-columns: 32px 1fr auto; }
.hg-ref-row { grid-template-columns: 32px 1fr auto; }
@media (min-width: 768px) {
  .hg-lib-row { grid-template-columns: 32px 40px 1fr 120px 48px; }
  .hg-ref-row { grid-template-columns: 32px 40px 1fr 120px 80px 40px; }
}

/* Carousel photo treatments — named classes keep filter magic numbers out of
   templates and make it possible to evolve the look in one place. */
.hg-photo--mono        { filter: grayscale(1) brightness(0.85); }
.hg-photo--mono-dim    { filter: grayscale(1) brightness(0.7); }
.hg-photo--duotone-red { filter: grayscale(1); mix-blend-mode: multiply; }
.hg-photo--ambient     { filter: brightness(0.25) blur(4px); }

/* Carousel swipe — preserve vertical scroll, capture horizontal pan via JS,
   and suppress text selection while the user drags. */
.hg-carousel-swipe { touch-action: pan-y; user-select: none; -webkit-user-select: none; }

/* Mobile: carousel → vertical stack of slides.
   Below lg (1024px) the horizontal translateX strip becomes a flex-col.
   Alpine's inline transform is neutralised with !important.
   Two layout flavours:
     .hg-layout-split     — Design A / C: flex column, image panel gets 56vw height
     .hg-layout-fullbleed — Design B / D: photo fills container; changed from
                            absolute inset-0 to position:relative so the slide
                            has intrinsic height for its absolutely-placed children */
@media (max-width: 1023px) {
  .hg-carousel-swipe { overflow: visible !important; background-color: transparent !important; }
  .hg-stage { overflow: visible !important; height: auto !important; min-height: 0 !important; aspect-ratio: unset !important; }
  .hg-stage > div { position: static !important; flex-direction: column !important; transform: none !important; transition: none !important; height: auto !important; gap: 0.75rem; }
  .hg-stage > div > div { height: auto !important; width: 100% !important; overflow: hidden; border-radius: 2px; }
  .hg-layout-split { position: static !important; height: auto !important; }
  .hg-slide-image-panel { height: 56vw !important; min-height: 0 !important; flex: none !important; }
  .hg-layout-fullbleed { position: relative !important; height: 56vw !important; width: 100% !important; }
  .hg-slide-text-panel { flex: none !important; max-width: 100% !important; padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .hg-carousel-nav { display: none !important; }
}

/* Frappe's website.bundle.css has un-layered `img { height: auto }` which
   outranks Tailwind v4's `:where(img.h-full)` (specificity 0,0,0) and
   collapses the Design A image side to its natural aspect ratio. Body-
   prefixed !important wins. The other gallery layouts size images via
   absolute inset-0 (top+bottom) so they aren't affected by `height: auto`. */
body .hg-carousel-swipe img.h-full { height: 100% !important; }

/* Same Frappe `img { height: auto }` override as the carousel — the zigzag
   section image uses h-full inside an aspect-ratio container, so it collapses
   and bg-graphite-100 shows as empty padding. */
body .hg-zigzag-img { height: 100% !important; }

/* Frappe's website.bundle.css has un-layered:
     article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block }
   This is Bootstrap's HTML5 element reset. It beats Tailwind's @layer utilities
   `.grid`/`.flex`/`.inline-flex` rules on those tags, so e.g. the mobile drawer
   <nav class="grid"> renders as block and anchors flow inline.
   Override at element-with-class specificity, !important to outrank Bootstrap. */
nav.grid, header.grid, aside.grid, section.grid, main.grid, footer.grid, article.grid, figure.grid { display: grid !important; }
nav.flex, header.flex, aside.flex, section.flex, main.flex, footer.flex, article.flex, figure.flex { display: flex !important; }
nav.inline-flex, header.inline-flex, aside.inline-flex, section.inline-flex { display: inline-flex !important; }
nav.hidden, header.hidden, aside.hidden, section.hidden, main.hidden, footer.hidden, article.hidden, figure.hidden { display: none !important; }

/* ── Tailwind v4 + Frappe Bootstrap legacy `.hidden` cascade fix ─────────── */
/* Two problems compound here: (1) Tailwind v4 emits `.hidden` AFTER responsive
   variants (`.lg\:flex`, `.md\:block`, etc.), so on equal specificity `.hidden`
   wins. (2) Frappe's `website.bundle.css` declares
   `.d-none, .hide-control, .hidden { display: none !important; }` un-layered,
   defeating any non-`!important` Tailwind override.
   Restore progressive-disclosure with `body`-prefixed selectors AND
   `!important` to outrank Frappe's rule.
   For Alpine `x-show` elements that ALSO carry `.hidden` (e.g. the navbar
   mega-menu and mobile drawer), don't rely on `x-show` alone — pair it with
   `:class="{ 'hidden': !state }"` so Frappe's `.hidden !important` wins when
   the state is closed and our `body .lg\:block !important` wins when open. */
@media (min-width: 40rem) {  /* sm */
  body .sm\:table-cell { display: table-cell !important; }
  body .sm\:flex       { display: flex !important; }
  body .sm\:block      { display: block !important; }
  body .sm\:grid       { display: grid !important; }
}
@media (min-width: 48rem) {  /* md */
  body .md\:table-cell { display: table-cell !important; }
  body .md\:flex       { display: flex !important; }
  body .md\:block      { display: block !important; }
  body .md\:grid       { display: grid !important; }
  body .md\:hidden     { display: none !important; }
}
@media (min-width: 64rem) {  /* lg */
  body .lg\:table-cell { display: table-cell !important; }
  body .lg\:flex       { display: flex !important; }
  body .lg\:block      { display: block !important; }
  body .lg\:grid       { display: grid !important; }
  body .lg\:hidden     { display: none !important; }
}

/* Frappe's website.bundle.css declares `img { position: relative }` un-layered.
   Tailwind v4 wraps utilities in `:where(...)` (specificity 0,0,0), so a bare
   `img` selector (0,0,1) wins. Restore positioning utilities for `<img>` with
   higher-specificity overrides. */
body img.absolute { position: absolute !important; }
body img.fixed    { position: fixed !important; }
body img.relative { position: relative !important; }
body img.sticky   { position: sticky !important; }
@media (min-width: 64rem) {
  body img.lg\:absolute { position: absolute !important; }
  body img.lg\:relative { position: relative !important; }
  .lg\:static     { position: static !important; }
  .lg\:translate-x-0 { transform: none !important; }
  .lg\:bg-transparent { background-color: transparent !important; }
  .lg\:p-0        { padding: 0 !important; }
}
@media (min-width: 80rem) {  /* xl — used by progressive product table columns */
  body .xl\:block      { display: block !important; }
  body .xl\:flex       { display: flex !important; }
}
@media (min-width: 96rem) {  /* 2xl — used by progressive product table columns */
  body .\32 xl\:block  { display: block !important; }
  body .\32 xl\:flex   { display: flex !important; }
}

/* ── Mobile filter drawer ───────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

@media (min-width: 64rem) {
  [x-cloak].filter-drawer          { display: block !important; }
  [x-cloak].filter-drawer-backdrop { display: none !important; }
}

.filter-drawer {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

@media (min-width: 64rem) {
  .filter-drawer {
    box-shadow: none;
    position: sticky !important;
    top: 1rem;
  }
}

.filter-drawer.-translate-x-full { transform: translateX(-100%) !important; }
.filter-drawer.translate-x-full  { transform: translateX(100%)  !important; }
.filter-drawer.translate-x-0     { transform: translateX(0)     !important; }
.filter-drawer.fixed         { position: fixed !important; }
.filter-drawer.inset-y-0     { top: 0 !important; bottom: 0 !important; }
.filter-drawer.start-0       { inset-inline-start: 0 !important; }
.filter-drawer.end-0         { inset-inline-end: 0 !important; }
.filter-drawer.z-50          { z-index: 50 !important; }
.filter-drawer.w-72          { width: 18rem !important; }
.filter-drawer.\[max-width\:85vw\],
.filter-drawer.max-w-\[85vw\] { max-width: 85vw !important; }
.filter-drawer.transition-transform { transition-property: transform; transition-duration: 200ms; }

.filter-drawer-backdrop.fixed    { position: fixed !important; }
.filter-drawer-backdrop.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.filter-drawer-backdrop.z-40     { z-index: 40 !important; }
.filter-drawer-backdrop.bg-black\/40 { background-color: rgba(0,0,0,0.4) !important; }

@media (min-width: 64rem) {
  .filter-drawer.-translate-x-full,
  .filter-drawer.translate-x-full,
  .filter-drawer.translate-x-0 { transform: none !important; }
  .filter-drawer.fixed      { position: sticky !important; }
  .filter-drawer.inset-y-0  { top: 1rem !important; bottom: auto !important; }
  .filter-drawer.z-50       { z-index: auto !important; }
  .filter-drawer.w-72       { width: 16rem !important; }
  .filter-drawer-toggle.lg\:hidden,
  button.lg\:hidden { display: none !important; }
}

.filter-drawer-toggle.inline-flex { display: inline-flex; align-items: center; }
.filter-drawer-backdrop { transition: opacity 0.15s ease; }

/* ── Search type-ahead ──────────────────────────────────────────────────── */

.hg-typeahead { position: relative; }

.hg-typeahead-list {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 40;
  max-height: 22rem;
  overflow-y: auto;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-graphite-200);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-raised);
  padding: 0.25rem;
  margin: 0;
  list-style: none;
}

.hg-typeahead-list.hidden { display: none !important; }

.hg-typeahead-item {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: var(--color-graphite-800);
  line-height: 1.3;
}

.hg-typeahead-item:hover,
.hg-typeahead-item.is-active {
  background: var(--color-hedron-50);
}

.hg-typeahead-item-title {
  font-size: 0.875rem;
  font-weight: 500;
}

.hg-typeahead-item-meta {
  font-size: 0.75rem;
  color: var(--color-graphite-500);
  margin-top: 0.125rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hg-typeahead-code {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-graphite-600);
  flex-shrink: 0;
}

.hg-typeahead-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hg-typeahead-item mark {
  background: var(--color-hedron-100);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.hg-typeahead-empty {
  padding: 0.625rem;
  font-size: 0.8125rem;
  color: var(--color-graphite-500);
  text-align: center;
  cursor: default;
  list-style: none;
}

/* ── C+ Design Components ────────────────────────────────── */

/* Hero scrim gradient overlay */
.hg-hero-scrim {
  background: linear-gradient(
    180deg,
    rgba(8, 8, 10, 0.5) 0%,
    rgba(8, 8, 10, 0.25) 55%,
    rgba(8, 8, 10, 0.94) 100%
  );
}

/* Parallax fixed background */
.hg-parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
@media (max-width: 768px) {
  .hg-parallax {
    background-attachment: scroll;
  }
}

/* Elevated gap between table rows */
.hg-row-gap {
  height: 6px;
  background-color: var(--color-graphite-100);
}

/* Corner tick marks */
.hg-tick {
  position: absolute;
  pointer-events: none;
}
.hg-tick--tl { top: 0; left: 0; border-top: 2px solid var(--color-hedron-500); border-left: 2px solid var(--color-hedron-500); }
.hg-tick--tr { top: 0; right: 0; border-top: 2px solid var(--color-hedron-500); border-right: 2px solid var(--color-hedron-500); }
.hg-tick--bl { bottom: 0; left: 0; border-bottom: 2px solid var(--color-hedron-500); border-left: 2px solid var(--color-hedron-500); }
.hg-tick--br { bottom: 0; right: 0; border-bottom: 2px solid var(--color-hedron-500); border-right: 2px solid var(--color-hedron-500); }
/* Mirror tick positions under RTL — corners follow logical reading direction.
   `!important` is needed because home/index.html sets `left:48px`/`right:48px`
   inline on the tick spans, which would otherwise win against these rules. */
[dir="rtl"] .hg-tick--tl { left: auto !important; right: 0 !important; border-left: none; border-right: 2px solid var(--color-hedron-500); }
[dir="rtl"] .hg-tick--tr { right: auto !important; left: 0 !important; border-right: none; border-left: 2px solid var(--color-hedron-500); }
[dir="rtl"] .hg-tick--bl { left: auto !important; right: 0 !important; border-left: none; border-right: 2px solid var(--color-hedron-500); }
[dir="rtl"] .hg-tick--br { right: auto !important; left: 0 !important; border-right: none; border-left: 2px solid var(--color-hedron-500); }

/* White tick variant — for use on colored panels (B-Red, B-Dark, etc.) where
   the brand-red default would clash. Override border-color on every corner. */
.hg-tick--white.hg-tick--tl,
.hg-tick--white.hg-tick--tr,
.hg-tick--white.hg-tick--bl,
.hg-tick--white.hg-tick--br { border-color: #ffffff; }
[dir="rtl"] .hg-tick--white.hg-tick--tl,
[dir="rtl"] .hg-tick--white.hg-tick--tr,
[dir="rtl"] .hg-tick--white.hg-tick--bl,
[dir="rtl"] .hg-tick--white.hg-tick--br { border-color: #ffffff !important; }

/* Mega menu */
.hg-mega-menu {
  transition: opacity 150ms ease, transform 150ms ease;
}
.hg-mega-menu[x-cloak] { display: none; }

/* Sticky-shrink navbar — inner row height transitions are driven by Tailwind
   utility classes toggled in Alpine (h-[88px] ⇄ h-32). Logo height is set
   here in CSS so the class selector beats bootstrap's `img { height: auto }`
   reset (Tailwind v4 `:where()` utilities lose that specificity battle). */
.hg-navbar .hg-logo {
  height: 4rem;
  width: auto;
  transition: height 200ms cubic-bezier(0.2, 0, 0, 1);
}
.hg-navbar[data-scrolled="true"] .hg-logo {
  height: 2rem;
}
.hg-navbar .hg-wordmark {
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
  transform-origin: left center;
}
[dir="rtl"] .hg-navbar .hg-wordmark {
  transform-origin: right center;
}
.hg-navbar[data-scrolled="true"] .hg-wordmark {
  transform: scale(0.86);
}

/* The desktop primary nav declares `uppercase`, which its <a> children inherit.
   But the Products/Industries mega-menu toggles are <button>s, and Frappe's
   website.bundle.css ships an unlayered `button, select { text-transform: none }`
   reset — unlayered rules beat Tailwind v4's @layer'd `.uppercase` regardless of
   specificity, so those two buttons render in title case while the rest are CAPS.
   Re-assert uppercase here (catalog.css is unlayered) scoped to the desktop nav's
   buttons via the nav's own `.uppercase` class. Mobile uses span-level uppercase. */
.hg-navbar nav.uppercase button {
  text-transform: uppercase;
}

/* Mobile (below lg): the scroll-shrink is a desktop affordance. On touch
   viewports the navbar renders compact from first paint so it fits without
   the post-scroll jump. Overrides the Alpine-toggled h-32 / h-[88px] utility
   classes and the default logo/wordmark sizing. */
@media (max-width: 1023px) {
  .hg-navbar-inner { height: 64px !important; }
  .hg-navbar .hg-logo,
  .hg-navbar[data-scrolled="true"] .hg-logo { height: 2rem !important; }
  .hg-navbar .hg-wordmark,
  .hg-navbar[data-scrolled="true"] .hg-wordmark { transform: none !important; }
  /* anchor offset to match the 64px mobile bar (desktop uses 5.5rem).
     !important because the base `html { scroll-padding-top: 5.5rem }` sits
     later in source order with equal specificity. */
  html { scroll-padding-top: 4.5rem !important; }
}

/* Footer logo — width auto-scales to preserve aspect ratio.
   Height is set inline from HG Site Settings (footer_logo_height). */
.hg-footer-logo {
  width: auto;
  display: block;
  object-fit: contain;
}

/* Offset in-page anchor jumps by the shrunk navbar height (88px) so the target
   section lands below the sticky header instead of under it. */
html { scroll-padding-top: 5.5rem; }

/* Print: drop the sticky behavior so the navbar appears once at the top of the
   printed document, not pinned to each printed page. */
@media print {
  .hg-navbar { position: static !important; }
}

/* Frappe's website.bundle.css declares bare-selector heading colors
   (h4 { color: #171717 }) that beat Tailwind v4's :where()-wrapped
   utilities. Body-prefixed !important wins the specificity battle for
   the dark footer column titles. */
body footer h4 { color: #fff !important; }

/* Brand stamp motto section */
.hg-brand-stamp {
  position: relative;
  text-align: center;
}

/* Expanded row accent border (inline-start: left in LTR, right in RTL) */
.hg-expanded-accent {
  border-inline-start: 2px solid var(--color-hedron-500);
}

/* File type badge colors — monochrome (graphite scale + outline) */
.hg-badge-datasheet { background-color: var(--color-graphite-50); color: var(--color-graphite-800); border: 1px solid var(--color-graphite-200); }
.hg-badge-cert { background-color: var(--color-graphite-100); color: var(--color-graphite-900); border: 1px solid var(--color-graphite-300); }
.hg-badge-pdf { background-color: var(--color-graphite-50); color: var(--color-graphite-700); border: 1px solid var(--color-graphite-200); }
.hg-badge-brochure { background-color: var(--color-graphite-100); color: var(--color-graphite-800); border: 1px solid var(--color-graphite-200); }
.hg-badge-wps { background-color: var(--color-graphite-50); color: var(--color-graphite-700); border: 1px solid var(--color-graphite-300); }
.hg-badge-video { background-color: var(--color-graphite-100); color: var(--color-graphite-700); border: 1px solid var(--color-graphite-200); }
.hg-badge-default { background-color: var(--color-graphite-50); color: var(--color-graphite-500); border: 1px solid var(--color-graphite-200); }

/* Context bar */
.hg-ctx-bar {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* Glass overlay panels — brand red and graphite black washes for hero / section overlays.
   Single-color washes (not dark duotones) so the brand red stays bright when stacked
   on a photo. Use directly on a photo container; alpha is baked into the gradient stops. */
.hg-duotone,
.hg-glass-red {
  background: linear-gradient(135deg, rgba(200, 16, 46, 0.85), rgba(200, 16, 46, 0.55));
}
.hg-glass-black {
  background: linear-gradient(135deg, rgba(8, 8, 10, 0.78), rgba(8, 8, 10, 0.55));
}

/* Dimension micro-signature tints */
.hg-dim-products { background-color: var(--color-graphite-100); }
.hg-dim-industry { background-color: var(--color-graphite-50); }
.hg-dim-application { background-color: var(--color-graphite-50); }
.hg-dim-reference { background-color: var(--color-surface-muted); }
.hg-dim-library { background-color: var(--color-surface-sunken); }
.hg-dim-partner { background-color: var(--color-surface-raised); }

/* ── Card elevation (Carpenter-style soft shadow, replaces border-only) ──── */
.hg-card-shadow {
  background-color: var(--color-surface-raised);
  border: 1px solid transparent;
  box-shadow:
    0 1px 2px rgba(17,17,16,0.04),
    0 4px 12px rgba(17,17,16,0.06);
  transition:
    box-shadow var(--duration-base, 200ms) var(--ease-standard, cubic-bezier(0.2,0,0,1)),
    transform var(--duration-base, 200ms) var(--ease-standard, cubic-bezier(0.2,0,0,1));
}
.hg-card-shadow:hover,
a.hg-card-shadow:hover,
.group:hover > .hg-card-shadow {
  box-shadow:
    0 2px 4px rgba(17,17,16,0.06),
    0 12px 24px rgba(17,17,16,0.10);
  transform: translateY(-1px);
}
a.hg-card-shadow,
a.hg-card-shadow:hover,
a.hg-card-shadow:focus,
a.hg-card-shadow * { text-decoration: none; }
a.hg-card-shadow:focus-visible {
  outline: 2px solid var(--color-hedron-400);
  outline-offset: 2px;
}