/* ============================================================
   EntryThingy Help Center — Custom Stylesheet
   Mirrors gallery-site design system for seamless experience.

   Colors, typography, spacing, and radius values are taken
   directly from gallery-site/static/css/main.css and
   gallery-site/tailwind.config.js.

   Upload this file in HelpScout Docs → Customize → Stylesheet.
   In the HelpScout theme color pickers, set:
     Page Background:   #ffffff
     Header Background: #ffffff
     Nav Text:          #374151
     Nav Active:        #111827
     Link Color:        #2563eb
     Article Text:      #374151
   ============================================================ */

/* Outfit from Google Fonts (matches app — loaded via Vite in gallery-site) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

/* ============================================================
   Design tokens — mirrors gallery-site/static/css/main.css
   ============================================================ */
:root {
  --et-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --et-blue:       #3b82f6;
  --et-blue-hover: #2563eb;
  --et-blue-dark:  #1e40af;
  --et-blue-light: rgba(59, 130, 246, 0.1);

  --et-gray-50:  #f9fafb;
  --et-gray-100: #f3f4f6;
  --et-gray-200: #e5e7eb;
  --et-gray-300: #d1d5db;
  --et-gray-400: #9ca3af;
  --et-gray-500: #6b7280;
  --et-gray-600: #4b5563;
  --et-gray-700: #374151;
  --et-gray-800: #1f2937;
  --et-gray-900: #111827;

  --et-radius-sm: 0.25rem;
  --et-radius-md: 0.375rem;
  --et-radius-lg: 0.5rem;

  --et-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --et-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);

  --et-transition: 0.15s ease-in-out;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--et-font) !important;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--et-gray-700);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Header — white background, 1px gray-200 bottom border
   Matches: <header class="border-b border-gray-200 bg-white h-16">
   ============================================================ */
header,
.hs-header,
.docs-header,
.page-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--et-gray-200) !important;
  box-shadow: none !important;
}

/* Logo / site name */
.hs-site-name,
.site-title,
[class*="site-name"] {
  font-family: var(--et-font) !important;
  font-weight: 700;
  color: var(--et-gray-900) !important;
  text-decoration: none !important;
}

/* ============================================================
   Navigation
   Matches: inactive = text-gray-800, active = bg-gray-100 text-gray-900
   ============================================================ */
nav a,
.hs-nav a,
.hs-nav-link,
[class*="nav-link"] {
  font-family: var(--et-font) !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--et-gray-800) !important;
  text-decoration: none !important;
  border-radius: var(--et-radius-md);
  transition: color var(--et-transition), background-color var(--et-transition);
}

nav a:hover,
.hs-nav-link:hover,
[class*="nav-link"]:hover {
  color: var(--et-gray-900) !important;
  background-color: var(--et-gray-50) !important;
}

nav a.active,
.hs-nav-link.active,
[class*="nav-link"].active,
[class*="nav-link"][aria-current="page"] {
  color: var(--et-gray-900) !important;
  background-color: var(--et-gray-100) !important;
  font-weight: 600;
}

/* ============================================================
   Search input
   Matches: .select-standard — gray-300 border, blue focus ring
   ============================================================ */
input[type="search"],
input[type="text"],
.hs-search-input,
[class*="search-input"] {
  font-family: var(--et-font) !important;
  border: 1px solid var(--et-gray-300) !important;
  border-radius: var(--et-radius-lg) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  background-color: #ffffff !important;
  color: var(--et-gray-700) !important;
  box-shadow: var(--et-shadow-sm) !important;
  transition: border-color var(--et-transition), box-shadow var(--et-transition) !important;
}

input[type="search"]:focus,
input[type="text"]:focus,
.hs-search-input:focus,
[class*="search-input"]:focus {
  outline: none !important;
  border-color: var(--et-blue) !important;
  box-shadow: 0 0 0 3px var(--et-blue-light) !important;
}

/* ============================================================
   Headings — matches .h1-standard: gray-900, bold, text-wrap balance
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--et-font) !important;
  font-weight: 700;
  color: var(--et-gray-900);
  line-height: 1.3;
  text-wrap: balance;
  margin-top: 0;
}

h1 { font-size: 1.75rem;  margin-bottom: 0.5rem; }
h2 { font-size: 1.375rem; margin-bottom: 0.5rem;  margin-top: 2rem; }
h3 { font-size: 1.125rem; margin-bottom: 0.375rem; margin-top: 1.5rem; }
h4 { font-size: 1rem;     margin-bottom: 0.25rem;  margin-top: 1.25rem; }

/* ============================================================
   Body text and paragraphs
   ============================================================ */
p {
  color: var(--et-gray-700);
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* ============================================================
   Links — matches .primary-link: blue-hover (#2563eb)
   ============================================================ */
a {
  color: var(--et-blue-hover) !important;
  text-decoration: none !important;
  transition: color var(--et-transition);
}

a:hover {
  color: var(--et-blue-dark) !important;
  text-decoration: underline !important;
}

/* ============================================================
   Lists
   ============================================================ */
ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.375rem;
  color: var(--et-gray-700);
  line-height: 1.65;
}

/* ============================================================
   Horizontal rule, blockquote
   ============================================================ */
hr {
  border: none;
  border-top: 1px solid var(--et-gray-200);
  margin: 2rem 0;
}

blockquote {
  border-left: 3px solid var(--et-gray-300);
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  background-color: var(--et-gray-50);
  border-radius: 0 var(--et-radius-md) var(--et-radius-md) 0;
}

blockquote p {
  color: var(--et-gray-600);
  margin-bottom: 0;
}

/* ============================================================
   Code — inline and block
   ============================================================ */
code {
  font-size: 0.8125rem;
  background-color: var(--et-gray-100);
  color: var(--et-gray-800);
  padding: 0.125rem 0.375rem;
  border-radius: var(--et-radius-sm);
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
}

pre {
  background-color: var(--et-gray-900);
  color: #e2e8f0;
  padding: 1rem 1.25rem;
  border-radius: var(--et-radius-lg);
  overflow-x: auto;
  margin: 1.25rem 0;
  font-size: 0.8125rem;
  line-height: 1.6;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* ============================================================
   Tables — matches .data-table pattern from main.css
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 1.25rem 0;
}

thead {
  background-color: var(--et-gray-100);
}

th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--et-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

td {
  padding: 0.5rem 0.75rem;
  color: var(--et-gray-700);
  border-bottom: 1px solid var(--et-gray-200);
}

tbody tr:nth-child(odd) td {
  background-color: var(--et-gray-50);
}

tbody tr:hover td {
  background-color: var(--et-gray-100);
}

/* ============================================================
   Images — matches .img-outlined: subtle inset outline
   ============================================================ */
img {
  max-width: 100%;
  height: auto;
  border-radius: var(--et-radius-lg);
  outline: 1px solid rgba(0, 0, 0, 0.08);
  outline-offset: -1px;
}

/* ============================================================
   Category / Collection cards
   ============================================================ */
.hs-collection,
.hs-category,
[class*="collection-item"],
[class*="category-card"] {
  border: 1px solid var(--et-gray-200) !important;
  border-radius: var(--et-radius-lg) !important;
  background-color: #ffffff !important;
  transition: box-shadow var(--et-transition) !important;
}

.hs-collection:hover,
.hs-category:hover,
[class*="collection-item"]:hover,
[class*="category-card"]:hover {
  box-shadow: var(--et-shadow-md) !important;
}

/* ============================================================
   Breadcrumbs — muted, gray-500
   ============================================================ */
.hs-breadcrumb,
[class*="breadcrumb"] {
  font-size: 0.8125rem;
}

.hs-breadcrumb a,
[class*="breadcrumb"] a {
  color: var(--et-gray-500) !important;
  text-decoration: none !important;
}

.hs-breadcrumb a:hover,
[class*="breadcrumb"] a:hover {
  color: var(--et-gray-700) !important;
  text-decoration: none !important;
}

.hs-breadcrumb span,
[class*="breadcrumb"] span {
  color: var(--et-gray-400);
}

/* ============================================================
   Sidebar article list
   ============================================================ */
.hs-sidebar,
[class*="sidebar"] {
  font-family: var(--et-font) !important;
}

.hs-sidebar a,
[class*="sidebar"] a {
  font-size: 0.875rem !important;
  color: var(--et-gray-700) !important;
  text-decoration: none !important;
  transition: color var(--et-transition);
}

.hs-sidebar a:hover,
[class*="sidebar"] a:hover {
  color: var(--et-gray-900) !important;
  text-decoration: none !important;
}

.hs-sidebar a.active,
[class*="sidebar"] a.active {
  color: var(--et-blue-hover) !important;
  font-weight: 500 !important;
}

/* ============================================================
   Feedback / "Was this helpful?" section
   ============================================================ */
[class*="feedback"],
[class*="helpful"] {
  border-top: 1px solid var(--et-gray-200);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

[class*="feedback"] p,
[class*="helpful"] p {
  color: var(--et-gray-600);
  font-size: 0.875rem;
}

[class*="feedback"] button,
[class*="helpful"] button {
  font-family: var(--et-font) !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.375rem 0.875rem;
  border-radius: var(--et-radius-md);
  border: 1px solid var(--et-gray-300);
  background: #ffffff;
  color: var(--et-gray-700);
  cursor: pointer;
  transition: background-color var(--et-transition), border-color var(--et-transition);
}

[class*="feedback"] button:hover,
[class*="helpful"] button:hover {
  background-color: var(--et-gray-50);
  border-color: var(--et-gray-400);
}

/* ============================================================
   Footer — white, gray-200 top border, muted text
   ============================================================ */
footer,
[class*="footer"] {
  background-color: #ffffff !important;
  border-top: 1px solid var(--et-gray-200) !important;
  color: var(--et-gray-500) !important;
  font-family: var(--et-font) !important;
  font-size: 0.8125rem !important;
}

footer a,
[class*="footer"] a {
  color: var(--et-gray-500) !important;
  text-decoration: none !important;
}

footer a:hover,
[class*="footer"] a:hover {
  color: var(--et-gray-700) !important;
}