@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Roboto:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600&display=swap");

/*
 * Styling tokens for the canned /feed prototype. Sourced directly from the
 * Netlify mock at https://dulcet-kitsune-9b43f0.netlify.app/prototype — these
 * values match the prototype's :root vars so the demo can clone the look
 * one-to-one. Scoped under .gc-feed-proto so nothing leaks into the rest
 * of the GC web-ui.
 */
.gc-feed-proto {
  --blaze-100: #ffded5;
  --blaze-200: #ffb0a8;
  --blaze-300: #ff9c88;
  --blaze-400: #ff7b56;
  --blaze-500: #ff5a2c;
  --blaze-600: #cc4823;
  --blaze-700: #9e3819;
  --blaze-800: #662412;
  --blaze-900: #331209;
  --ink-500: #141517;
  --ink-400: #4a4445;
  --aura-500: #fbeee8;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --white: #ffffff;
  --black: #000000;
  --horizon-500: #6072b6;
  --horizon-400: #7e8fcc;
  --ember-500: #c63348;
  --ember-400: #f25a70;
  --viridian-500: #00b074;
  --gold-warm: #d4c878;
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Roboto", sans-serif;
  --font-utility: "Roboto Mono", monospace;
}
/* Disable the platform tap-highlight + text selection flash on every
 * interactive feed-card target. Without these:
 *  - iOS Safari + Android Chrome paint a translucent blue/grey overlay
 *    on every tap of a `role=button` / `<button>` / `<a>` element
 *  - mouse drags inside a card occasionally start a text selection
 *  - desktop Chrome shows a focus outline ring on click (vs only on
 *    keyboard focus via :focus-visible). */
.gc-feed-proto,
.gc-feed-proto * {
  -webkit-tap-highlight-color: transparent;
}
.gc-feed-proto [role="button"],
.gc-feed-proto button {
  -webkit-touch-callout: none;
  user-select: none;
}
.gc-feed-proto [role="button"]:focus:not(:focus-visible),
.gc-feed-proto button:focus:not(:focus-visible) {
  outline: none;
}
/* CMS Page Builder — Animation Keyframes (M11) */

/* Prevent horizontal overflow from content-source carousels in the editor.
   The scroll-wrapper (ScrollBehaviorWrapper) can create native scrollbars
   that conflict with Embla's drag-based carousel. */
[gc-testing-id="content-source-scroll-wrapper"] {
  overflow-x: hidden !important;
}
[gc-testing-id="editorPreview"],
[gc-testing-id="editor-preview-pane"] {
  overflow-x: hidden !important;
}

@keyframes cms-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cms-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cms-slide-left {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes cms-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes cms-slide-down {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cms-slide-right {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes cms-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes cms-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Tree-to-preview hover highlight */
[data-block-id].cms-tree-hover {
  outline: 2px dashed var(--chakra-colors-blaze-blaze, #ff6b00) !important;
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-color 150ms ease;
}

[data-section-id].cms-tree-hover {
  outline: 2px dashed var(--chakra-colors-blue-400, #4299e1) !important;
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-color 150ms ease;
}

[data-column-idx].cms-tree-hover {
  outline: 2px dashed var(--chakra-colors-purple-400, #9f7aea) !important;
  outline-offset: 1px;
  border-radius: 4px;
  transition: outline-color 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .cms-animate {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cms-continuous {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .cms-animate[data-mobile-disabled="true"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cms-continuous[data-mobile-disabled="true"] {
    animation: none !important;
  }
}
/* This file should only contain the base resets needed, other theme configuration should exist within the theme provider */
:root {
  font-family: Roboto, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* position: fixed; */
  bottom: 0;
  left: 0;
}

body {
  padding: 0;
  margin: 0;
  --removed-body-scroll-bar-size: 0px !important;
}

/* Override chakra's -webkit-block non-sense */
p {
  display: block !important;
}
/* Except for those that are actually multiline */
p.multiline-clamp {
  display: -webkit-box !important;
}

[data-is-android="true"] *::-webkit-scrollbar {
  -webkit-appearance: none;
}

/* Utility class to block pointer events of children */
.block-pointer-events * {
  pointer-events: none;
}

@media (hover: hover) {
  * {
    --sb-track-color: transparent;
    --sb-thumb-color: var(--chakra-colors-charcoal-300);
    --sb-size: 6px;
    --sb-border-size: 0px;
  }

  .styled-scrollbar::-webkit-scrollbar {
    width: var(--sb-size);
  }

  .styled-scrollbar::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 50px;
  }

  .styled-scrollbar::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 50px;
    background-clip: content-box;
    border: var(--sb-border-size) solid var(--sb-track-color);
  }

  .styled-scrollbar-hover::-webkit-scrollbar {
    width: var(--sb-size);
  }

  .styled-scrollbar-hover::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 50px;
  }

  .styled-scrollbar-hover::-webkit-scrollbar-thumb {
    background: var(--sb-track-color);
    border-radius: 50px;
    background-clip: content-box;
    border: 16px solid var(--sb-track-color);
  }

  .styled-scrollbar-hover:hover::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 50px;
    background-clip: content-box;
    border: var(--sb-border-size) solid var(--sb-track-color);
  }

  @supports not selector(::-webkit-scrollbar) {
    .styled-scrollbar {
      scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
    .styled-scrollbar-hover {
      scrollbar-color: var(--sb-track-color) var(--sb-track-color);
    }
    .styled-scrollbar-hover:hover {
      scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
  }
}

.thin-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.thin-scrollbar:hover {
  scrollbar-color: var(--chakra-colors-charcoal-300) transparent;
}
.thin-scrollbar::-webkit-scrollbar {
  height: 2px !important;
  background: transparent !important;
}
.thin-scrollbar::-webkit-scrollbar-track {
  background: transparent !important;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
}
.thin-scrollbar:hover::-webkit-scrollbar-thumb {
  background: var(--chakra-colors-charcoal-300);
}
.thin-scrollbar::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Breathing shimmer animation for image placeholders */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Enhanced shimmer for Chakra Skeleton (used by Image component fallback) */
.chakra-skeleton {
  background: linear-gradient(
    90deg,
    rgba(48, 54, 61, 0.3) 0%,
    rgba(60, 68, 77, 0.5) 20%,
    rgba(72, 81, 92, 0.6) 50%,
    rgba(60, 68, 77, 0.5) 80%,
    rgba(48, 54, 61, 0.3) 100%
  ) !important;
  background-size: 1000px 100% !important;
  animation: shimmer 2s ease-in-out infinite !important;
}