/*
 * Theme for the guide site. Restyles the cloned bundle without touching the React build, so
 * text, translations and routes stay as built.
 *
 * The bundle's Tailwind utilities are all `!important`. To beat them, this file is linked
 * BEFORE the bundle CSS (see index.html) and wrapped in its own layer: that makes `gw-theme`
 * the first declared layer, and for !important declarations the first layer wins. Hence every
 * declaration here carries !important as well.
 */

@layer gw-theme {

:root {
  --gw-ink: #0b1f2a !important;
  --gw-ink-2: #123341 !important;
  --gw-accent: #0f766e !important;
  --gw-accent-hover: #0d9488 !important;
  --gw-accent-bright: #2dd4bf !important;
  --gw-accent-soft: #e7f5f2 !important;
  --gw-bg: #f4f7f6 !important;
  --gw-surface: #ffffff !important;
  --gw-border: #dde6e4 !important;
  --gw-text: #10212b !important;
  --gw-muted: #5b6b73 !important;
  --gw-radius: 16px !important;
  --gw-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;

  /* Re-point the bundle's palette: every blue utility becomes teal, slate gets a green tint. */
  --color-blue-50: var(--gw-accent-soft) !important;
  --color-blue-100: #cdebe5 !important;
  --color-blue-200: #a7dcd2 !important;
  --color-blue-500: var(--gw-accent-hover) !important;
  --color-blue-600: var(--gw-accent) !important;
  --color-blue-900: #134e4a !important;
  --color-slate-50: var(--gw-bg) !important;
  --color-slate-200: var(--gw-border) !important;
  --color-slate-500: var(--gw-muted) !important;
  --color-slate-600: #475860 !important;
  --color-slate-700: #2b3d46 !important;
  --color-slate-800: var(--gw-text) !important;
  --color-slate-900: var(--gw-ink) !important;
  --font-sans: var(--gw-font) !important;
}

html, body { background: var(--gw-bg) !important; }
body, #root, #root .ant-typography, #root button { font-family: var(--gw-font) !important; }
#root { color: var(--gw-text) !important; -webkit-font-smoothing: antialiased !important; }

#root > .ant-layout { background: var(--gw-bg) !important; }
#root > .ant-layout > div { background: none !important; display: flex !important; flex-direction: column !important; }
#root .ant-layout-content { flex: 1 !important; }

/* ---------- Header ---------- */

header.ant-layout-header {
  background: var(--gw-ink) !important;
  border-bottom: 1px solid rgb(255 255 255 / 0.08) !important;
  height: auto !important;
  padding-inline: 0 !important;
  line-height: normal !important;
}
header.ant-layout-header > div { height: 64px !important; padding-block: 0 !important; }
header.ant-layout-header a:first-child img {
  width: 32px !important;
  height: 32px !important;
  padding: 5px !important;
  border-radius: 10px !important;
  background: rgb(255 255 255 / 0.1) !important;
}
header.ant-layout-header a:first-child span { color: #fff !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }

header.ant-layout-header nav {
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / 0.08) !important;
}
header.ant-layout-header nav a {
  padding: 6px 16px !important;
  border-radius: 999px !important;
  color: rgb(255 255 255 / 0.75) !important;
  background: transparent !important;
}
header.ant-layout-header nav a:hover { color: #fff !important; background: rgb(255 255 255 / 0.08) !important; }
header.ant-layout-header nav a[aria-current="page"],
/* The bundle never marks Guides as current; detect the guides grid instead. */
#root:has(main.container-max > .grid) header.ant-layout-header nav a[href$="/guides"] {
  color: var(--gw-ink) !important;
  background: var(--gw-accent-bright) !important;
}

/* ---------- Dark hero band (Help home + Guides) ---------- */

.ant-layout-content > main > section:first-child,
main.container-max > h1,
main.container-max > h1 + p {
  color: #fff !important;
  background-color: var(--gw-ink) !important;
  /* Paint the band edge to edge even when the element sits inside .container-max. */
  border-image: linear-gradient(var(--gw-ink), var(--gw-ink)) fill 0 / 0 / 0 100vmax !important;
}

.ant-layout-content > main > section:first-child {
  position: relative !important;
  overflow: hidden !important;
  padding-block: 56px 72px !important;
  text-align: start !important;
  border-image: none !important;
  background:
    radial-gradient(600px 300px at 85% 0%, rgb(45 212 191 / 0.22), transparent 70%),
    radial-gradient(500px 260px at 0% 100%, rgb(14 165 233 / 0.14), transparent 70%),
    var(--gw-ink) !important;
}
.ant-layout-content > main > section:first-child h1 {
  max-width: 20ch !important;
  text-wrap: balance !important;
  color: #fff !important;
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}
.ant-layout-content > main > section:first-child p {
  max-width: 36rem !important;
  margin-inline: 0 !important;
  color: rgb(255 255 255 / 0.72) !important;
}

main.container-max { padding-top: 0 !important; }
main.container-max > h1 {
  padding-top: 48px !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
main.container-max > h1,
main.container-max > h1 + p { text-align: start !important; margin-inline: 0 !important; }
main.container-max > h1 + p {
  margin-top: 0 !important;
  padding: 8px 0 72px !important;
  color: rgb(255 255 255 / 0.72) !important;
}

/* ---------- Help home: FAQ sections ---------- */

.ant-layout-content > main > section.container-max { margin-bottom: 40px !important; }
.ant-layout-content > main > section:first-child + section.container-max { margin-top: 40px !important; }

section.container-max > h3.ant-typography {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  letter-spacing: -0.02em !important;
}
section.container-max > h3.ant-typography::before {
  content: "" !important;
  width: 6px !important;
  height: 22px !important;
  border-radius: 3px !important;
  background: var(--gw-accent-bright) !important;
}

section.container-max > div.flex-col {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
}

a.rounded-2xl[href*="/article/"] {
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-radius) !important;
  background: var(--gw-surface) !important;
  box-shadow: 0 1px 2px rgb(11 31 42 / 0.04) !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
}
a.rounded-2xl[href*="/article/"]:hover {
  border-color: var(--gw-accent-hover) !important;
  box-shadow: 0 6px 18px -8px rgb(15 118 110 / 0.35) !important;
  transform: translateY(-1px) !important;
}
a.rounded-2xl[href*="/article/"]:focus-visible { outline: 2px solid var(--gw-accent) !important; outline-offset: 2px !important; }
a.rounded-2xl[href*="/article/"] > .anticon {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  color: var(--gw-accent) !important;
  background: var(--gw-accent-soft) !important;
  font-size: 18px !important;
}
a.rounded-2xl[href*="/article/"] > div > div:first-child { font-weight: 600 !important; }
a.rounded-2xl[href*="/article/"] > div > div + div { margin-top: 4px !important; }
a.rounded-2xl[href*="/article/"]::after {
  content: "" !important;
  flex-shrink: 0 !important;
  width: 8px !important;
  height: 8px !important;
  margin-inline: 4px 2px !important;
  border-top: 2px solid var(--gw-muted) !important;
  border-right: 2px solid var(--gw-muted) !important;
  transform: rotate(45deg) !important;
  transition: border-color 0.15s, translate 0.15s !important;
}
a.rounded-2xl[href*="/article/"]:hover::after { border-color: var(--gw-accent) !important; translate: 3px 0 !important; }

/* ---------- Guides grid ---------- */

main.container-max > .grid {
  position: relative !important;
  margin-top: -40px !important;
  gap: 16px !important;
}
main.container-max .ant-card.card-hover {
  overflow: hidden !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-radius) !important;
  box-shadow: 0 1px 2px rgb(11 31 42 / 0.04) !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
}
main.container-max .ant-card.card-hover:hover {
  border-color: var(--gw-accent-hover) !important;
  box-shadow: 0 10px 24px -12px rgb(15 118 110 / 0.4) !important;
  transform: translateY(-2px) !important;
}
main.container-max .ant-card.card-hover .ant-card-body { padding: 0 !important; }
main.container-max .ant-card.card-hover .ant-card-body > div:first-child {
  height: 112px !important;
  background: linear-gradient(180deg, var(--gw-bg), #fff) !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
main.container-max .ant-card.card-hover .ant-card-body > div:first-child img { max-height: 52px !important; max-width: 70% !important; }
main.container-max .ant-card.card-hover .ant-card-body > div + div {
  margin: 0 !important;
  padding: 16px 20px 0 !important;
  color: var(--gw-text) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}
main.container-max .ant-card.card-hover .ant-card-body > div:last-child {
  margin: 0 !important;
  padding: 8px 20px 18px !important;
  color: var(--gw-muted) !important;
}

/* ---------- Article ---------- */

.ant-layout-content > main > main.py-10:not(.container-max) { background: var(--gw-bg) !important; padding-top: 24px !important; }

.ant-breadcrumb { font-size: 14px !important; }
.ant-breadcrumb li:last-child .ant-breadcrumb-link { color: var(--gw-muted) !important; }
.ant-breadcrumb button {
  border-color: var(--gw-border) !important;
  color: var(--gw-accent) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.ant-breadcrumb button:hover { border-color: var(--gw-accent-hover) !important; color: var(--gw-accent-hover) !important; }

article.rounded-3xl {
  border: 1px solid var(--gw-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgb(11 31 42 / 0.05) !important;
}
article.rounded-3xl > header {
  border-top: 4px solid var(--gw-accent-bright) !important;
  border-bottom-color: var(--gw-border) !important;
  background: linear-gradient(180deg, var(--gw-accent-soft), #fff) !important;
}
article.rounded-3xl > header > span.ant-typography {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  color: var(--gw-accent) !important;
  background: #fff !important;
  border: 1px solid var(--gw-border) !important;
  letter-spacing: 0.12em !important;
}
article.rounded-3xl > header > h2.ant-typography {
  color: var(--gw-ink) !important;
  font-size: clamp(1.5rem, 3.4vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

/* Numbered step rows: "1." becomes a badge, the row a soft tinted bar. */
article.rounded-3xl > section > div.flex.gap-4 {
  align-items: center !important;
  margin-top: 28px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--gw-accent-soft) !important;
  box-shadow: none !important;
}
article.rounded-3xl > section > div.flex.gap-4:first-child { margin-top: 0 !important; }
article.rounded-3xl > section > div.flex.gap-4 > span:first-child {
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  min-width: 32px !important;
  height: 32px !important;
  padding-inline: 6px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: var(--gw-accent) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
article.rounded-3xl > section > div.flex.gap-4 > div { color: var(--gw-ink) !important; font-weight: 700 !important; }

article.rounded-3xl > section > div.overflow-hidden {
  border-color: var(--gw-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px -16px rgb(11 31 42 / 0.35) !important;
}
article.rounded-3xl > section h4.ant-typography {
  padding-inline-start: 12px !important;
  border-inline-start: 3px solid var(--gw-accent-bright) !important;
  color: var(--gw-ink) !important;
}
article.rounded-3xl a { color: var(--gw-accent) !important; text-decoration-color: var(--color-blue-200) !important; }

/* "Related → Guides" call-to-action under the article */
article.rounded-3xl + div {
  border: 0 !important;
  border-radius: var(--gw-radius) !important;
  background:
    radial-gradient(400px 160px at 100% 0%, rgb(45 212 191 / 0.25), transparent 70%),
    var(--gw-ink) !important;
}
article.rounded-3xl + div p:first-child { color: var(--gw-accent-bright) !important; }
article.rounded-3xl + div p + p { color: #fff !important; font-weight: 600 !important; font-size: 1.125rem !important; }
article.rounded-3xl + div a {
  color: var(--gw-ink) !important;
  background: var(--gw-accent-bright) !important;
  text-decoration: none !important;
}
article.rounded-3xl + div a:hover { background: #5eead4 !important; }

/* ---------- Footer ---------- */

#root footer {
  margin-top: 56px !important;
  border-top: 0 !important;
  background: var(--gw-ink) !important;
}
#root footer > div { color: rgb(255 255 255 / 0.6) !important; }
#root footer .text-blue-600 { color: var(--gw-accent-bright) !important; }

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  header.ant-layout-header > div { gap: 12px !important; }
  header.ant-layout-header a:first-child { min-width: 0 !important; }
  header.ant-layout-header a:first-child span {
    overflow: hidden !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  header.ant-layout-header nav { flex-shrink: 0 !important; }
  header.ant-layout-header nav a { padding: 6px 12px !important; }

  /* Guides: compact rows (logo | title + date) so more services fit on screen. */
  main.container-max > .grid { gap: 10px !important; }
  main.container-max .ant-card.card-hover .ant-card-body {
    display: grid !important;
    grid-template-columns: 88px 1fr !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    min-height: 88px !important;
  }
  main.container-max .ant-card.card-hover .ant-card-body > div:first-child {
    grid-row: 1 / 3 !important;
    height: auto !important;
    border-bottom: 0 !important;
    border-inline-end: 1px solid var(--gw-border) !important;
    background: var(--gw-bg) !important;
  }
  main.container-max .ant-card.card-hover .ant-card-body > div:first-child img { max-height: 32px !important; max-width: 68px !important; }
  main.container-max .ant-card.card-hover .ant-card-body > div + div { align-self: end !important; padding: 14px 16px 0 !important; font-size: 15px !important; }
  main.container-max .ant-card.card-hover .ant-card-body > div:last-child { align-self: start !important; padding: 4px 16px 14px !important; }

  .ant-layout-content > main > section:first-child { padding-block: 40px 64px !important; }
  article.rounded-3xl > header,
  article.rounded-3xl > section { padding-inline: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #root * { transition: none !important; }
}

}