/* OneAlgorithm brand overrides — layered on top of the Source theme.
   Keeps upstream CSS untouched so theme updates stay mergeable. */

/* NOTE: onealgorithm.com declares Inter + Roboto via @font-face, but the three
   .woff2 files in public/fonts are HTML error pages, not fonts (679-1644 bytes,
   magic bytes "<htm"/"<!DO"). The live site therefore falls back to the Tailwind
   default system stack. We deliberately match that fallback so the blog and the
   site render identically. Once the real fonts are fixed on the site, add the
   matching @font-face rules here. */

/* Values resolved from the site's own tokens in client/global.css.
   NOTE: the comments in global.css claim #005eaa / #ffa634, but the HSL values
   actually compile to the colours below. These are what the site renders. */
:root {
  --oa-blue: #00366b;        /* --onealgo-blue-950 : hsl(210 100% 21%) */
  --oa-orange: #ffad33;      /* --onealgo-orange-500: hsl(36 100% 60%) */
  --oa-orange-hover: #d97706;/* --onealgo-orange-600: hsl(32 95% 44%)  */
  --oa-gray-900: #111827;    /* text-gray-900 - nav links */
  --oa-gray-200: #e5e7eb;    /* border-gray-200 - header rule */
  --oa-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ===========================================================================
   HEADER — a direct port of the site's <nav>, in our own namespace so Ghost's
   Source CSS does not apply to it at all.
   =========================================================================== */
.oa-header {
  background: #fff;
  border-bottom: 1px solid var(--oa-gray-200);
  position: sticky;
  top: 0;
  z-index: 50;
}
.oa-header-container {                 /* max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 */
  max-width: 1280px;          /* max-w-7xl at a 16px root */
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px)  { .oa-header-container { padding: 0 24px; } }
@media (min-width: 1024px) { .oa-header-container { padding: 0 32px; } }

.oa-header-row {                       /* flex justify-between items-center h-16 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}
/* .logo-container / .logo hover, ported verbatim from global.css @layer components:
     scale 1.08 + warm drop-shadow, and a 2px gradient underline that grows
     from the centre. Easing is the site's own spring curve. */
.oa-logo {
  flex-shrink: 0;
  text-decoration: none;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.oa-logo .oa-wordmark {
  position: relative;
  padding-bottom: 8px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.oa-logo .oa-wordmark::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #ffa634, #005eaa);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateX(-50%);
}
.oa-logo:hover .oa-wordmark {
  transform: scale(1.08);
  filter: drop-shadow(0 0 20px rgba(255, 166, 52, 0.3));
}
.oa-logo:hover .oa-wordmark::after { width: 100%; }

/* Ghost's content column is 1120px; the site's is max-w-7xl (1280px).
   Match it so the page proportions carry across, not just the header. */
:root { --container-width: 1280px; }

.oa-nav {                              /* hidden md:flex items-center space-x-8 */
  display: none;
  align-items: center;
  gap: 32px;
}
@media (min-width: 768px) { .oa-nav { display: flex; } }
.oa-nav .nav { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.oa-nav .nav li { margin: 0; }
.oa-nav a {
  color: var(--oa-gray-900);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s ease;
}
.oa-nav a:hover { color: var(--oa-blue); }

.oa-cta {                              /* rounded-lg bg-orange px-5 py-2.5 font-semibold */
  display: inline-flex;
  align-items: center;
  background: var(--oa-orange);
  color: #fff !important;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.oa-cta:hover { background: var(--oa-orange-hover); transform: translateY(-2px); }

.oa-burger { display: inline-flex; background: none; border: 0; cursor: pointer; padding: 8px; }
@media (min-width: 768px) { .oa-burger { display: none; } }

/* Match the main site: Inter for body copy, Roboto for headings. */
body,
.is-body,
.gh-content,
.gh-card-excerpt,
.gh-excerpt {
  font-family: var(--oa-sans);
}

h1, h2, h3, h4, h5, h6,
.is-title,
.gh-card-title,
.gh-article-title {
  font-family: var(--oa-sans);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Wordmark — mirrors <OneAlgorithmText>: orange "One", blue "Alg", globe, blue "rithm". */
.oa-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--oa-sans);
  font-weight: 700;                    /* font-bold, as OneAlgorithmText */
  font-size: 20px;                     /* text-xl */
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 640px)  { .oa-header .oa-wordmark { font-size: 24px; } }   /* sm:text-2xl */
@media (min-width: 1024px) { .oa-header .oa-wordmark { font-size: 30px; } } /* lg:text-3xl */
.oa-wordmark .oa-one { color: var(--oa-orange); }
.oa-wordmark .oa-alg { color: var(--oa-blue); }
.oa-wordmark .oa-globe {
  height: 30px;
  width: 30px;
  margin: 0 0.01em;
  display: inline-block;
  vertical-align: middle;
}
/* Footer sits on a light background too — keep the same treatment. */
.gh-footer-logo.oa-wordmark { font-size: 20px; }

/* Primary conversion path: make the in-post "Talk to an Expert" link look like
   the orange CTA button used across onealgorithm.com. */
.gh-content a[href*="onealgorithm.com/contact"] {
  display: inline-block;
  background: var(--oa-orange);
  color: #fff !important;
  font-weight: 700;
  padding: 0.7em 1.5em;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  transition: background 0.15s ease;
}
.gh-content a[href*="onealgorithm.com/contact"]:hover {
  background: var(--oa-orange-hover);
  color: #fff !important;
}

/* Tag/kicker above post titles picks up brand blue rather than the default. */
.gh-article-tag a,
.gh-card-tag {
  color: var(--oa-blue);
}